/* ============================================================================
HOSTRAGONS — WHMCS BİRLEŞİK TASARIM SİSTEMİ
twenty-one (sistem) + standard_cart (sipariş) yüzeylerini ana site ile
TEK BÜTÜN haline getirir. Tek tip tokenlar; gradient yalnız hero/promo'da,
diğer her yer solid derin mor (sakin/premium). Inter tipografi.
============================================================================ */
:root {
--hg-primary: #761098;
--hg-primary-dark: #5a0c78;
--hg-magenta: #bf0b90;
--hg-grad: linear-gradient(135deg, #761098 0%, #bf0b90 100%);
--hg-ink: #0f172a;
--hg-muted: #64748b;
--hg-line: rgba(15, 23, 42, 0.09);
--hg-tint: #f7f1fb;
--hg-tint2: #f4e9fd;
--hg-radius: 0.85rem;
--hg-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
--hg-shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.12);
}
/* ---------- 1) TEMEL / TİPOGRAFİ ---------- */
body.primary-bg-color {
font-family: "Inter", sans-serif;
background: #f6f7fb;
color: #334155;
padding-top: 104px; /* sabit site header offset */
}
@media (max-width: 991px) { body.primary-bg-color { padding-top: 0 !important; } }
#main-body { padding-top: 2.25rem; padding-bottom: 3rem; }
#main-body h1, #main-body h2, #main-body h3, #main-body h4, #main-body h5, #main-body h6 {
font-family: "Inter", sans-serif; color: var(--hg-ink); font-weight: 800; letter-spacing: -0.01em;
}
#main-body a:not(.btn) { color: var(--hg-primary); }
#main-body a:not(.btn):hover { color: var(--hg-primary-dark); }
#main-body .text-primary { color: var(--hg-primary) !important; }
#main-body .bg-primary { background-color: var(--hg-primary) !important; }
/* ---------- 2) BUTONLAR (tüm CTA'lar markaya, tek dil) ---------- */
#main-body .btn { border-radius: 0.6rem; font-weight: 600; padding: 0.55rem 1.2rem; transition: all 0.16s ease; }
#main-body .btn-lg { padding: 0.75rem 1.6rem; border-radius: 0.7rem; }
#main-body .btn-primary,
#main-body .btn-checkout,
#main-body .btn-success,
#main-body .btn-warning,
#main-body .domain-checker-container .btn-warning,
.checkout .btn-primary {
background: var(--hg-primary) !important;
border-color: var(--hg-primary) !important;
color: #fff !important;
box-shadow: 0 6px 16px rgba(118, 16, 152, 0.22);
}
#main-body .btn-primary:hover,
#main-body .btn-checkout:hover,
#main-body .btn-success:hover,
#main-body .btn-warning:hover,
.checkout .btn-primary:hover {
background: var(--hg-primary-dark) !important;
border-color: var(--hg-primary-dark) !important;
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(118, 16, 152, 0.28);
}
#main-body .btn-default, #main-body .btn-secondary {
background: #fff !important; border-color: #e2e8f0 !important; color: #334155 !important; box-shadow: none;
}
#main-body .btn-default:hover, #main-body .btn-secondary:hover { background: var(--hg-tint) !important; border-color: #d8b9ef !important; color: var(--hg-primary) !important; }
#main-body .btn-outline-primary { color: var(--hg-primary) !important; border-color: var(--hg-primary) !important; background: transparent !important; }
#main-body .btn-outline-primary:hover { background: var(--hg-primary) !important; color: #fff !important; }
/* ---------- 3) FORM / INPUT ---------- */
#main-body .form-control, #main-body .custom-select, #main-body select.form-control, #main-body .input-group-text {
border-radius: 0.6rem; border-color: #e2e8f0; color: #334155;
}
#main-body .form-control { padding: 0.6rem 0.9rem; height: auto; }
#main-body .input-group-lg .form-control { padding: 0.85rem 1rem; }
#main-body .form-control:focus, #main-body .custom-select:focus {
border-color: var(--hg-primary); box-shadow: 0 0 0 0.2rem rgba(118, 16, 152, 0.15);
}
#main-body .input-group-text { background: var(--hg-tint2); border-color: #e9d5fb; color: var(--hg-primary); }
#main-body label, #main-body .form-control-label { font-weight: 600; color: #475569; }
/* ---------- 4) KARTLAR / PANELLER ---------- */
#main-body .card, #main-body .panel, #main-body .well {
border: 1px solid var(--hg-line); border-radius: var(--hg-radius);
box-shadow: var(--hg-shadow); background: #fff;
}
#main-body .card-header, #main-body .panel-heading {
background: #fff; border-bottom: 1px solid var(--hg-line);
font-weight: 700; color: var(--hg-ink); padding: 1rem 1.25rem;
}
#main-body .card-title { color: var(--hg-ink); font-weight: 800; }
#main-body .card-body { padding: 1.4rem; }
/* ---------- 5) TABLOLAR ---------- */
#main-body table { border-color: var(--hg-line); }
#main-body .table thead th, #main-body table thead th {
background: var(--hg-tint); color: var(--hg-ink); font-weight: 700;
border-bottom: 2px solid #e9d5fb; border-top: 0;
}
#main-body .table tbody tr:hover, #main-body table tbody tr:hover { background: #faf6fe; }
#main-body .table td, #main-body .table th { border-color: var(--hg-line); vertical-align: middle; }
/* ---------- 6) ALERT / BADGE / LIST-GROUP ---------- */
#main-body .alert { border-radius: 0.7rem; border: 1px solid var(--hg-line); }
#main-body .alert-info { background: var(--hg-tint); border-color: #e9d5fb; color: var(--hg-primary-dark); }
#main-body .badge-info, #main-body .badge-primary { background: var(--hg-primary) !important; }
#main-body .list-group-item.active { background: var(--hg-primary) !important; border-color: var(--hg-primary) !important; color: #fff !important; }
#main-body .nav-pills .nav-link.active { background: var(--hg-primary) !important; }
/* WHMCS içeriği henüz dark-hazır değil → header'daki tema toggle'ı WHMCS'te gizle */
body.primary-bg-color .hg-theme-toggle { display: none !important; }
/* ---------- 7) BREADCRUMB ---------- */
.master-breadcrumb { background: transparent; }
.master-breadcrumb .breadcrumb { background: transparent; font-size: 0.85rem; }
.master-breadcrumb a { color: var(--hg-primary); }
/* ---------- LINK ALTÇİZGİ FIX (WHMCS theme.min.css + BS5, site header/footer/menülerde) ----------
WHMCS bootstrap'i a:hover'a underline ekliyor; statik sitede yok. Site header/footer,
menüler ve breadcrumb'ta (hover dahil) altçizgiyi kaldır — statik siteyle birebir. */
header.hg-header a, header.hg-header a:hover, header.hg-header a:focus,
#footer a, #footer a:hover, #footer a:focus,
footer.section-space-top a, footer.section-space-top a:hover, footer.section-space-top a:focus,
.master-breadcrumb a, .master-breadcrumb a:hover, .master-breadcrumb a:focus,
#main-body a:not(.btn):hover { text-decoration: none !important; }
/* ============================================================================
STANDARD_CART SİPARİŞ FORMU — sidebar kaldır, ferah/ortalı, markalı
============================================================================ */
#order-standard_cart { max-width: 1080px; margin: 0 auto; }
#order-standard_cart .cart-sidebar { display: none !important; } /* dağınık sol sidebar kalktı */
#order-standard_cart .cart-body { width: 100% !important; float: none !important; padding: 0 !important; }
#order-standard_cart .header-lined { border: 0; margin-bottom: 1.25rem; }
/* sipariş özeti — solid mor başlıklı temiz kart */
#order-standard_cart .order-summary {
border: 1px solid var(--hg-line); border-radius: var(--hg-radius);
box-shadow: var(--hg-shadow); overflow: hidden; background: #fff;
}
#order-standard_cart .order-summary > h2, .order-summary > h2.font-size-30 {
background: var(--hg-primary) !important; color: #fff !important; border: 0 !important;
margin: 0 !important; padding: 1rem 1.25rem !important; font-size: 1.2rem !important; font-weight: 800;
}
/* sepet ürün tablosu başlığı — solid mor */
.view-cart-items-header, #main-body .view-cart-items-header { background: var(--hg-primary) !important; color: #fff !important; border-radius: 0.5rem 0.5rem 0 0; }
/* domain arama kutusu — turuncu yerine solid mor */
#main-body .domain-checker-container, #main-body .domain-checker-bg {
background: var(--hg-primary) !important; border-radius: var(--hg-radius) !important;
}
#main-body .domain-checker-container .btn-warning, #main-body .domain-lookup .btn-warning {
background: #fff !important; color: var(--hg-primary) !important; border: 0 !important; box-shadow: none;
}
#main-body .domain-checker-container .btn-warning:hover { background: var(--hg-tint2) !important; }
/* öne çıkan TLD kartları + fiyat tablosu */
.domain-pricing .featured-tld {
border: 1px solid var(--hg-line); border-radius: var(--hg-radius); padding: 1.25rem;
box-shadow: var(--hg-shadow); transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.domain-pricing .featured-tld:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(118, 16, 152, 0.12); }
.domain-pricing .featured-tld .price { color: var(--hg-primary) !important; font-weight: 800; }
.tld-pricing-header { background: var(--hg-tint); border-radius: 0.6rem; font-weight: 700; color: var(--hg-ink); }
/* ============================================================================
ÖZEL BİLEŞENLER — auth, kayıt, wizard, hero, güven (rafine, sakin)
============================================================================ */
/* ---- Giriş/Kayıt: iki kolon (form + gradient promo) ---- */
/* Tam genişlik (full-bleed) split login — container'dan taşar */
.hg-auth { padding: 0; width: 100vw; margin-left: calc(50% - 50vw); }
/* Login header'a yapışsın + footer boşluğu da kalksın (sabit header'lı desktop) */
@media (min-width: 992px) {
body:has(.hg-auth) .master-breadcrumb { display: none !important; }
body:has(.hg-auth) #main-body { padding-top: 0 !important; padding-bottom: 0 !important; }
body:has(.hg-auth) .hg-auth { margin-top: -3px; }
}
/* Kayıt sayfasında da breadcrumb gizlensin (login ile tutarlı, temiz auth sayfası) */
body:has(.hg-reg) .master-breadcrumb { display: none !important; }
/* Şifre sıfırlama — adım göstergesi */
.hg-reset-steps { display: flex; align-items: flex-start; justify-content: center; gap: .25rem; margin-bottom: 1.9rem; }
.hg-reset-step { display: flex; flex-direction: column; align-items: center; gap: .35rem; color: #94a3b8; width: 4.5rem; text-align: center; }
.hg-reset-step b { width: 2.1rem; height: 2.1rem; display: grid; place-content: center; border-radius: 50%; background: #f1f5f9; color: #94a3b8; font-size: .9rem; font-weight: 800; }
.hg-reset-step small { font-size: .72rem; font-weight: 600; line-height: 1.1; }
.hg-reset-step.is-active b { background: var(--hg-primary); color: #fff; box-shadow: 0 6px 14px rgba(118,16,152,.35); }
.hg-reset-step.is-active { color: var(--hg-primary); }
.hg-reset-step.is-done b { background: #dcfce7; color: #15803d; }
.hg-reset-line { flex: 1 1 auto; max-width: 38px; height: 2px; background: #e2e8f0; margin-top: 1.05rem; }
/* Login: Caps Lock uyarısı + buton yükleniyor durumu */
.hg-caps-warn { display: flex; align-items: center; gap: .4rem; margin-top: .5rem; font-size: .8rem; font-weight: 600; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: .5rem; padding: .35rem .6rem; }
.hg-auth__btn.is-loading { opacity: .9; cursor: progress; }
.hg-auth__grid {
display: grid; grid-template-columns: 1fr 1fr; max-width: none; margin: 0;
background: #fff; border: 0; border-radius: 0; box-shadow: none; overflow: hidden;
min-height: calc(100vh - 150px); align-items: stretch;
}
@media (max-width: 767px) { .hg-auth__grid { grid-template-columns: 1fr; min-height: 0; } }
.hg-auth__card { display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 480px; margin: 0 auto !important; padding: 3rem 2rem; border: 0 !important; box-shadow: none !important; background: #fff; }
.hg-auth__head { margin-bottom: 1.5rem; }
.hg-auth__eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hg-primary); margin-bottom: 0.5rem; }
.hg-auth__title { font-size: 1.75rem; font-weight: 800; color: var(--hg-ink); margin: 0 0 0.35rem; }
.hg-auth__sub { color: var(--hg-muted); margin: 0; font-size: 0.95rem; }
.hg-auth__forgot { font-size: 0.82rem; color: var(--hg-primary); text-decoration: none; }
.hg-auth__forgot:hover { color: var(--hg-primary-dark); text-decoration: underline; }
.hg-auth__remember { display: block; font-size: 0.88rem; color: #475569; margin: 0.25rem 0 1.25rem; }
.hg-auth__btn { width: 100%; padding: 0.75rem 1rem; font-weight: 700; border-radius: 0.65rem; background: var(--hg-primary) !important; border: 0 !important; box-shadow: 0 8px 18px rgba(118,16,152,.25) !important; }
.hg-auth__btn:hover { background: var(--hg-primary-dark) !important; }
.hg-auth__secure { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 0.9rem 0 0; font-size: 0.78rem; color: var(--hg-muted); }
.hg-auth__secure i { color: #16a34a; }
.hg-auth__alt { margin: 1.25rem 0 0; font-size: 0.9rem; color: var(--hg-muted); text-align: center; }
.hg-auth__alt a { color: var(--hg-primary); font-weight: 700; text-decoration: none; }
.hg-auth__alt a:hover { color: var(--hg-primary-dark); }
.hg-auth__promo { position: relative; background: var(--hg-grad); color: #fff; display: flex; align-items: center; justify-content: center; padding: 3rem clamp(2.5rem, 5vw, 5rem); overflow: hidden; }
.hg-auth__promo-body { max-width: 460px; }
@media (max-width: 767px) { .hg-auth__promo { display: none; } }
.hg-auth__promo::after { content: ""; position: absolute; width: 320px; height: 320px; right: -120px; top: -120px; background: rgba(255, 255, 255, 0.12); border-radius: 50%; }
.hg-auth__promo-body { position: relative; z-index: 1; }
.hg-auth__promo-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.25rem 0.7rem; background: rgba(255, 255, 255, 0.18); border-radius: 999px; margin-bottom: 1rem; }
.hg-auth__promo-title { font-size: 1.6rem; font-weight: 800; line-height: 1.25; margin: 0 0 0.75rem; }
.hg-auth__promo-title span { color: #ffc4ef; }
.hg-auth__promo-text { color: rgba(255, 255, 255, 0.88); font-size: 0.95rem; margin: 0 0 1.5rem; }
.hg-auth__benefits { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.hg-auth__benefits li { display: flex; align-items: center; gap: 0.6rem; font-weight: 500; }
.hg-auth__benefits i { width: 1.9rem; height: 1.9rem; display: grid; place-content: center; background: rgba(255, 255, 255, 0.18); border-radius: 0.55rem; font-size: 0.85rem; }
.hg-auth__rating { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: 0.9rem; color: rgba(255, 255, 255, 0.9); }
.hg-auth__stars { color: #ffce54; letter-spacing: 2px; font-size: 0.95rem; }
.hg-auth__rating strong { color: #fff; }
/* ---- Kayıt sayfası ---- */
.row:has(#registration) > [class*="col-lg-4"] { display: none !important; }
.row:has(#registration) > .primary-content, .row:has(#registration) > [class*="col-lg-8"] { flex: 0 0 100% !important; max-width: 100% !important; display: block !important; }
#registration.hg-reg, .hg-reg { max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important; float: none !important; }
.hg-reg-head { text-align: center; margin-bottom: 1.75rem; }
.hg-reg-title { font-size: 2rem; font-weight: 800; color: var(--hg-ink); margin: 0.35rem 0 0.5rem; }
.hg-reg-sub { color: var(--hg-muted); margin: 0; }
.hg-reg-sub a { color: var(--hg-primary); font-weight: 700; text-decoration: none; }
/* Split layout: sol form + sağ sticky promo */
.hg-reg-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 2rem; align-items: start; }
@media (max-width: 991px) { .hg-reg-layout { grid-template-columns: 1fr; } }
.hg-reg-main { min-width: 0; }
.hg-reg-aside { position: sticky; top: 128px; }
@media (max-width: 991px) { .hg-reg-aside { position: static; } }
.hg-reg-aside__card { background: var(--hg-grad); color: #fff; border-radius: 1.25rem; padding: 2rem 1.75rem; position: relative; overflow: hidden; box-shadow: var(--hg-shadow-lg); }
.hg-reg-aside__card > * { position: relative; z-index: 1; }
.hg-reg-aside__card::after { content: ""; position: absolute; width: 240px; height: 240px; right: -90px; top: -90px; background: rgba(255,255,255,.12); border-radius: 50%; z-index: 0; }
.hg-reg-aside__badge { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; padding: .25rem .7rem; background: rgba(255,255,255,.18); border-radius: 999px; margin-bottom: 1rem; }
.hg-reg-aside__title { font-size: 1.5rem; font-weight: 800; line-height: 1.25; margin: 0 0 .75rem; }
.hg-reg-aside__title span { color: #ffc4ef; }
.hg-reg-aside__text { color: rgba(255,255,255,.88); font-size: .92rem; margin: 0 0 1.25rem; }
.hg-reg-aside__list { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.hg-reg-aside__list li { display: flex; align-items: center; gap: .6rem; padding: .42rem 0; font-size: .92rem; color: rgba(255,255,255,.95); }
.hg-reg-aside__list i { color: #ffc4ef; width: 1.1rem; text-align: center; }
.hg-reg-aside__rating { display: flex; flex-direction: column; gap: .15rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.2); font-size: .82rem; color: rgba(255,255,255,.9); }
.hg-reg-aside__stars { color: #ffce54; letter-spacing: 2px; font-size: 1rem; }
.hg-reg .card { border: 1px solid var(--hg-line); border-radius: 1rem; box-shadow: 0 6px 20px rgba(15,23,42,.04); }
.hg-reg .card-title { color: var(--hg-primary); font-weight: 800; font-size: 1.12rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--hg-line); margin-bottom: 1.25rem; }
.hg-reg input[type="submit"].btn-primary { padding: 0.85rem 3rem; font-weight: 700; font-size: 1.02rem; }
/* ---- Güven şeridi (kayıt) ---- */
.hg-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; max-width: 900px; margin: 0 auto 1.75rem; }
.hg-trust__item { flex: 1 1 200px; display: flex; align-items: center; gap: 0.7rem; background: #fff; border: 1px solid var(--hg-line); border-radius: var(--hg-radius); padding: 0.85rem 1rem; box-shadow: var(--hg-shadow); }
.hg-trust__ico { width: 2.4rem; height: 2.4rem; flex-shrink: 0; display: grid; place-content: center; background: var(--hg-tint2); color: var(--hg-primary); border-radius: 0.6rem; font-size: 1rem; }
.hg-trust__t { display: block; font-weight: 700; font-size: 0.85rem; color: var(--hg-ink); line-height: 1.2; }
.hg-trust__s { display: block; font-size: 0.75rem; color: var(--hg-muted); }
/* ---- Satın alma adım göstergesi (wizard) — sakin solid mor ---- */
.hg-steps { margin: 0 0 1.5rem; }
.hg-steps__inner { display: flex; max-width: 760px; margin: 0 auto; }
.hg-step { flex: 1 1 0; position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.hg-step::before { content: ""; position: absolute; top: 1.05rem; left: -50%; width: 100%; height: 3px; background: #e2e8f0; z-index: 0; }
.hg-step:first-child::before { display: none; }
.hg-step__n { position: relative; z-index: 1; width: 2.2rem; height: 2.2rem; display: grid; place-content: center; border-radius: 50%; background: #fff; border: 2px solid #e2e8f0; color: #94a3b8; font-weight: 700; font-size: 0.9rem; }
.hg-step__t { font-size: 0.8rem; font-weight: 600; color: #94a3b8; }
.hg-step.is-done::before { background: var(--hg-primary); }
.hg-step.is-done .hg-step__n { background: var(--hg-primary); border-color: var(--hg-primary); color: #fff; }
.hg-step.is-done .hg-step__t { color: #475569; }
.hg-step.is-active::before { background: var(--hg-primary); }
.hg-step.is-active .hg-step__n { background: var(--hg-primary); border-color: var(--hg-primary); color: #fff; box-shadow: 0 0 0 5px rgba(118, 16, 152, 0.14); }
.hg-step.is-active .hg-step__t { color: var(--hg-primary); }
@media (max-width: 575px) { .hg-step__t { font-size: 0.68rem; } }
/* ---- Güvenlik rozet satırı ---- */
.hg-secure-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; max-width: 760px; margin: 0 auto 1.75rem; font-size: 0.82rem; color: #475569; }
.hg-secure-row span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hg-secure-row i { color: #16a34a; }
/* ---- Domain hero (gradient — sayfanın tek odak gradient'i) ---- */
.hg-dhero { position: relative; overflow: hidden; background: var(--hg-grad); color: #fff; border-radius: 1rem; padding: 1.75rem 2rem; margin: 0 0 1.75rem; }
.hg-dhero::after { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; top: -90px; background: rgba(255, 255, 255, 0.12); border-radius: 50%; }
.hg-dhero__body { position: relative; z-index: 1; display: flex; align-items: center; gap: 1.25rem; }
.hg-dhero__icon { width: 3.5rem; height: 3.5rem; flex-shrink: 0; display: grid; place-content: center; background: rgba(255, 255, 255, 0.18); border-radius: 0.9rem; font-size: 1.5rem; }
.hg-dhero__title { font-size: 1.7rem; font-weight: 800; margin: 0 0 0.25rem; color: #fff; }
.hg-dhero__sub { margin: 0; color: rgba(255, 255, 255, 0.88); font-size: 0.95rem; }
/* ---- Domain 3 adım ---- */
.hg-domsteps { margin-top: 2.5rem; }
.hg-domsteps__title { text-align: center; font-weight: 800; font-size: 1.4rem; color: var(--hg-ink); margin-bottom: 1.5rem; }
.hg-domsteps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 767px) { .hg-domsteps__grid { grid-template-columns: 1fr; } }
.hg-domstep { background: #fff; border: 1px solid var(--hg-line); border-radius: var(--hg-radius); padding: 1.5rem; text-align: center; box-shadow: var(--hg-shadow); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.hg-domstep:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(118, 16, 152, 0.1); }
.hg-domstep__n { width: 2.6rem; height: 2.6rem; margin: 0 auto 0.9rem; display: grid; place-content: center; border-radius: 50%; background: var(--hg-primary); color: #fff; font-weight: 800; }
.hg-domstep__t { font-weight: 700; color: var(--hg-ink); margin: 0 0 0.35rem; }
.hg-domstep__s { font-size: 0.85rem; color: var(--hg-muted); margin: 0; }
/* footer (site footer kullanılıyor; twenty-one footer'ı nötrle) */
#footer.footer { background: transparent; }
/* ---------- MOBİL: geniş içerik tabloları yatay kaydırılabilir ---------- */
@media (max-width: 767px) {
#main-body .domain-pricing, #main-body .dataTables_wrapper, #main-body .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#main-body .domain-pricing table { min-width: 540px; }
#order-standard_cart .order-summary { margin-top: 1.5rem; } /* sepet özeti mobilde alta */
.hg-steps__inner { font-size: .9rem; }
}
/* ---------- DOMAIN FİYAT SAYFASI (inebur tarzı) ---------- */
.domain-pricing h4 { font-weight: 800; color: var(--hg-ink); margin: 2rem 0 1rem; }
.tld-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.tld-filters a.badge { background: #fff !important; color: #475569 !important; border: 1px solid var(--hg-line); border-radius: 999px; padding: .45rem .9rem; font-size: .82rem; font-weight: 600; transition: all .15s ease; }
.tld-filters a.badge:hover, .tld-filters a.badge-success { background: var(--hg-primary) !important; color: #fff !important; border-color: var(--hg-primary) !important; }
#tableDomainPricing { border: 1px solid var(--hg-line); border-radius: .75rem; overflow: hidden; }
#tableDomainPricing thead th { background: var(--hg-tint) !important; color: var(--hg-ink) !important; font-weight: 700; border: 0 !important; }
#tableDomainPricing tbody tr:nth-child(even) { background: #faf7fd; }
#tableDomainPricing tbody tr:hover { background: var(--hg-tint2); }
#tableDomainPricing td:first-child { font-weight: 700; color: var(--hg-primary); }
.domain-pricing .featured-tld { text-align: center; }
.domain-pricing .featured-tld .price { font-size: 1.15rem; margin-top: .5rem; }
.hg-dcta { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border: 1px solid var(--hg-line); border-radius: var(--hg-radius); padding: 1.5rem; box-shadow: var(--hg-shadow); height: 100%; }
.hg-dcta__icon { width: 3rem; height: 3rem; flex-shrink: 0; display: grid; place-content: center; background: var(--hg-tint2); color: var(--hg-primary); border-radius: .75rem; font-size: 1.3rem; }
.hg-dcta h3 { font-size: 1.1rem; font-weight: 800; margin: 0 0 .35rem; color: var(--hg-ink); }
.hg-dcta p { font-size: .9rem; color: var(--hg-muted); margin: 0 0 .9rem; }
/* ---------- MÜŞTERİ PANELİ: üst istatistik kutuları (.tiles) ---------- */
#main-body .tiles { margin-bottom: 1.5rem !important; }
#main-body .tiles .tile {
position: relative;
display: flex; flex-direction: column; align-items: flex-start; gap: 0;
background: #fff;
border: 1px solid var(--hg-line);
border-radius: var(--hg-radius);
box-shadow: var(--hg-shadow);
padding: 1.3rem 1.35rem 1.2rem;
margin: .4rem;
min-height: 138px;
text-decoration: none;
overflow: hidden;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#main-body .tiles .tile:hover { transform: translateY(-3px); box-shadow: var(--hg-shadow-lg); border-color: #d8b9ef; }
#main-body .tiles .tile i {
display: grid; place-content: center;
width: 2.6rem; height: 2.6rem; margin-bottom: .6rem;
font-size: 1.15rem; color: var(--hg-primary);
background: var(--hg-tint2); border-radius: .7rem;
}
#main-body .tiles .tile .stat { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--hg-ink); letter-spacing: -0.02em; }
#main-body .tiles .tile .title { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--hg-muted); margin-top: .35rem; }
/* markaya aykırı mavi/yeşil/kırmızı/altın alt çubuğu → ince mor üst aksan (tutarlı) */
#main-body .tiles .tile .highlight {
position: absolute; top: 0; left: 0; right: 0; bottom: auto;
width: auto; height: 3px;
background: var(--hg-grad) !important;
opacity: 0; transition: opacity .15s ease;
}
#main-body .tiles .tile:hover .highlight { opacity: 1; }
/* ============================================================================
MÜŞTERİ PANELİ — KAPSAMLI YENİDEN TASARIM (2026-05-29)
Tüm clientarea sayfalarının paylaştığı iskelet + ağır sayfalar
============================================================================ */
/* ---------- Sayfa düzeni: ferah, ortalı içerik ---------- */
#main-body { padding-top: 1.5rem; }
#main-body .sidebar { padding-right: .25rem; }
/* ---------- E-posta doğrulama / uyarı bandı (markalı) ---------- */
#main-body .alert-warning {
background: #fff8ec; border-color: #fde6bd; color: #92600a;
border-radius: .7rem;
display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
#main-body .alert-warning .btn { white-space: nowrap; }
#main-body .alert-warning .float-right, #main-body .alert-warning .float-end { float: none !important; margin: 0 !important; }
/* ---------- SOL SIDEBAR (her sayfada) ---------- */
#main-body .card-sidebar { box-shadow: var(--hg-shadow); border: 1px solid var(--hg-line); border-radius: var(--hg-radius); overflow: hidden; }
#main-body .card-sidebar .card-header {
background: var(--hg-tint); border-bottom: 1px solid var(--hg-line);
padding: .85rem 1.1rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em;
}
#main-body .card-sidebar .card-header .card-title { font-size: .82rem; font-weight: 700; color: var(--hg-primary-dark); }
#main-body .card-sidebar .card-header i:not(.card-minimise) { color: var(--hg-primary); }
#main-body .card-sidebar .list-group-item {
border: 0; border-top: 1px solid var(--hg-line); padding: 0; background: #fff;
transition: background .12s ease;
}
#main-body .card-sidebar .list-group-item:first-child { border-top: 0; }
#main-body .card-sidebar .list-group-item .sidebar-menu-item-wrapper { display: flex; align-items: center; gap: .7rem; padding: .7rem 1.1rem; }
#main-body .card-sidebar .list-group-item .sidebar-menu-item-icon-wrapper { width: 1.4rem; text-align: center; }
#main-body .card-sidebar .list-group-item .sidebar-menu-item-icon { color: var(--hg-muted); transition: color .12s ease; }
#main-body .card-sidebar .list-group-item .sidebar-menu-item-label { font-size: .9rem; font-weight: 600; color: #334155; }
#main-body .card-sidebar .list-group-item:hover { background: var(--hg-tint); }
#main-body .card-sidebar .list-group-item:hover .sidebar-menu-item-icon { color: var(--hg-primary); }
#main-body .card-sidebar .list-group-item.active { background: var(--hg-primary) !important; }
#main-body .card-sidebar .list-group-item.active .sidebar-menu-item-icon,
#main-body .card-sidebar .list-group-item.active .sidebar-menu-item-label { color: #fff !important; }
#main-body .card-sidebar .sidebar-menu-item-badge { margin-left: auto; background: var(--hg-tint2); color: var(--hg-primary-dark); font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; }
#main-body .card-sidebar .list-group-item.active .sidebar-menu-item-badge { background: rgba(255,255,255,.25); color: #fff; }
/* ---------- DURUM ROZETLERİ (.label.status) — semantik, modern pill ---------- */
#main-body .label.status, #main-body span.status {
display: inline-block; padding: .32rem .7rem; border-radius: 999px;
font-size: .76rem; font-weight: 700; letter-spacing: .01em; line-height: 1; border: 0;
}
#main-body .status-active, #main-body .status-paid, #main-body .status-open, #main-body .status-answered,
#main-body .status-completed, #main-body .status-accepted, #main-body .status-valid { background: #e7f7ee; color: #18794e; }
#main-body .status-pending, #main-body .status-draft, #main-body .status-in-progress,
#main-body .status-on-hold, #main-body .status-pending-transfer, #main-body .status-awaiting-payment { background: #fff3da; color: #9a6700; }
#main-body .status-unpaid, #main-body .status-overdue, #main-body .status-suspended,
#main-body .status-customer-reply, #main-body .status-fraud, #main-body .status-collections { background: #fdeaea; color: #b42318; }
#main-body .status-terminated, #main-body .status-cancelled, #main-body .status-closed,
#main-body .status-refunded, #main-body .status-expired, #main-body .status-inactive { background: #eef1f5; color: #5a6678; }
/* ---------- TABLOLAR (liste sayfaları) ---------- */
#main-body .table-container { border: 1px solid var(--hg-line); border-radius: var(--hg-radius); box-shadow: var(--hg-shadow); overflow: hidden; background: #fff; }
#main-body .table-container .table { margin: 0; }
#main-body .table.table-list thead th { white-space: nowrap; }
#main-body .table.table-list tbody td { padding: .9rem 1rem; }
#main-body .table.table-list tbody tr { transition: background .12s ease; }
/* dataTables üst kontrolleri (arama + uzunluk) */
#main-body .dataTables_filter input { border: 1px solid var(--hg-line); border-radius: .6rem; padding: .45rem .8rem; }
#main-body .dataTables_length select { border: 1px solid var(--hg-line); border-radius: .6rem; padding: .35rem 1.6rem .35rem .6rem; }
#main-body .dataTables_paginate .paginate_button { border-radius: .55rem !important; border: 1px solid var(--hg-line) !important; margin: 0 .15rem; color: var(--hg-primary) !important; }
#main-body .dataTables_paginate .paginate_button.current { background: var(--hg-primary) !important; color: #fff !important; border-color: var(--hg-primary) !important; }
#main-body .dataTables_paginate .paginate_button:hover { background: var(--hg-tint) !important; }
/* ---------- FATURA GÖRÜNTÜLEME (viewinvoice — bağımsız sayfa, #main-body YOK) ---------- */
.invoice-container {
background: #fff; border: 1px solid var(--hg-line); border-radius: var(--hg-radius);
box-shadow: var(--hg-shadow-lg); padding: 2.5rem; max-width: 920px; margin: 2rem auto;
font-family: "Inter", sans-serif; color: var(--hg-ink);
}
.invoice-header { align-items: center; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 2px solid var(--hg-line); }
.invoice-status {
display: inline-block; padding: .45rem 1.1rem; border-radius: 999px;
font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.invoice-status.unpaid, .invoice-status.overdue { background: #fdeaea; color: #b42318; }
.invoice-status.paid { background: #e7f7ee; color: #18794e; }
.invoice-status.cancelled, .invoice-status.refunded { background: #eef1f5; color: #5a6678; }
.invoice-container table { border-radius: .6rem; overflow: hidden; border: 1px solid var(--hg-line); width: 100%; }
.invoice-container table thead th { background: var(--hg-primary); color: #fff; border: 0; padding: .8rem 1rem; }
.invoice-container table tfoot td, .invoice-container table .total td { font-weight: 800; color: var(--hg-ink); }
.invoice-container .btn-primary { background: var(--hg-primary) !important; border-color: var(--hg-primary) !important; }
.invoice-container a { color: var(--hg-primary); }
/* ince markalı üst bar (viewinvoice.tpl'e eklenen) */
.hg-inv-topbar { max-width: 920px; margin: 1.5rem auto 0; display: flex; align-items: center; justify-content: space-between; padding: 0 .5rem; }
.hg-inv-topbar img { height: 34px; }
.hg-inv-topbar a.hg-inv-back { font-family: "Inter",sans-serif; font-weight: 600; font-size: .9rem; color: var(--hg-primary); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.hg-inv-topbar a.hg-inv-back:hover { color: var(--hg-primary-dark); }
/* ---------- DESTEK TALEBİ GÖRÜNTÜLEME (viewticket) — chat-bubble thread ---------- */
#main-body .card.view-ticket .card-body { padding-bottom: .5rem; }
#main-body .ticket-reply.markdown-content {
position: relative; background: #fff; border: 1px solid var(--hg-line);
border-radius: 1rem; padding: 1.1rem 1.3rem; margin-bottom: 1.1rem; box-shadow: var(--hg-shadow);
}
#main-body .ticket-reply.markdown-content.staff {
background: var(--hg-tint); border-color: #e4cdf5;
}
#main-body .posted-by { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; flex-wrap: wrap; }
#main-body .posted-by-name, #main-body .ticket-requestor-name { font-weight: 700; color: var(--hg-ink); }
#main-body .hg-tkt-avatar { display: inline-grid; place-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--hg-grad); color: #fff; font-size: .85rem; flex: 0 0 auto; }
#main-body .hg-tkt-avatar--client { background: #64748b; }
#main-body .posted-on { color: var(--hg-muted); font-size: .82rem; margin-left: auto; }
/* ---------- ÜRÜN DETAYI (productdetails) ---------- */
#main-body .product-details-tab-container { border: 1px solid var(--hg-line); border-radius: var(--hg-radius); box-shadow: var(--hg-shadow); }
#main-body .product-actions-wrapper .btn { border-radius: .6rem; }
/* cPanel "Hesabı Yönet" ikon ızgarası (.lu-tiles) — hafif markalı kart */
#main-body .lu-tiles .lu-tile, #main-body .module-client-area .lu-tile {
border: 1px solid var(--hg-line) !important; border-radius: .7rem !important;
background: #fff !important; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
#main-body .lu-tiles .lu-tile:hover { transform: translateY(-2px); box-shadow: var(--hg-shadow); border-color: #d8b9ef !important; }
/* ---------- HESAP / GÜVENLİK / FORM sayfaları ---------- */
#main-body .product-details .card-header, #main-body .card .card-header { border-radius: 0; }
#main-body fieldset legend, #main-body .group-title { color: var(--hg-ink); font-weight: 800; }
/* ============================================================================
GERİ BİLDİRİM DÜZELTMELERİ (2026-05-29 — kullanıcı)
============================================================================ */
/* (1) Sidebar filtre sayıları "beyaz kutu" idi: .sidebar-menu-item-badge içinde
ayrıca bootstrap span.badge vardı (çift badge). İç badge'i nötrle. */
#main-body .card-sidebar .sidebar-menu-item-badge .badge {
background: transparent !important; color: inherit !important;
padding: 0 !important; font-size: inherit !important; font-weight: 700 !important; box-shadow: none !important;
}
/* (2) Hizmetler tablosu — net aksiyon butonu + satır tıklanabilir göstergesi */
#main-body .table-list tbody tr[onclick] { cursor: pointer; }
#main-body .hg-col-action { white-space: nowrap; width: 1%; }
#main-body .hg-manage-btn { white-space: nowrap; font-weight: 600; border-radius: .55rem; padding: .35rem .8rem; }
#main-body .hg-manage-btn i { font-size: .75em; }
/* P18 — Services/liste tablosu: uzun çevirilerde (örn. Danca "Servicelancering") aksiyon butonu
tabloyu genişletip SAYFAYI taşırıyordu (.table-container overflow:hidden kırpıyordu). Artık tablo
KENDİ kutusu içinde yatay kayar → buton erişilebilir, sayfa sağa kaymaz. */
#main-body .table-container { overflow-x: auto; }
#main-body #tableServicesList .btn, #main-body .hg-manage-btn { white-space: nowrap; }
@media (max-width: 991px) { #main-body .table-container > .table, #main-body #tableServicesList { min-width: 720px; } }
/* P19 — Müşteri paneli (anasayfa hariç) HEP-AÇIK yatay kısayol çubuğu. Arka plansız (sade); "+" masaüstünde header "Alan Adı" menüsü hizasından başlar. */
.hg-quickbar { background: transparent; }
.hg-quickbar__inner { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: 1.15rem 0 .55rem; } /* üstten nefes payı: header'a yapışmasın */
@media (min-width: 992px) { .hg-quickbar__inner { padding-left: 340px; } } /* "+" → "Alan Adı" dropdown hizası */
.hg-quickbar__plus { display: inline-flex; align-items: center; justify-content: center; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: var(--hg-primary, #761098); color: #fff; font-weight: 800; font-size: 1.1rem; line-height: 1; flex-shrink: 0; }
.hg-quickbar__item { display: inline-flex; align-items: center; gap: .4rem; padding: .34rem .75rem; border-radius: 999px; background: #fff; border: 1px solid #e7ddf2; color: var(--hg-primary, #761098) !important; font-weight: 600; font-size: .85rem; text-decoration: none !important; white-space: nowrap; transition: all .15s ease; }
.hg-quickbar__item:hover { background: var(--hg-primary, #761098); color: #fff !important; border-color: var(--hg-primary, #761098); }
.hg-quickbar__item i { font-size: .82em; }
[data-bs-theme="dark"] .hg-quickbar { background: transparent; }
[data-bs-theme="dark"] .hg-quickbar__item { background: #221a3a; border-color: #342b4e; }
/* (3) Ürün detayı — "kocaman" overview başlıkları kompakt label'a çevrildi */
#main-body .product-details .col-md-6.text-center { text-align: left !important; }
#main-body .product-details .col-md-6.text-center h4 {
font-size: .76rem !important; text-transform: uppercase; letter-spacing: .03em;
color: var(--hg-muted); font-weight: 700; margin: .85rem 0 .1rem; line-height: 1.2;
}
#main-body .product-details .col-md-6.text-center h4:first-child { margin-top: 0; }
/* overview değer satırları (h4'ten sonraki düz metin) biraz daha belirgin */
#main-body .product-details .col-md-6.text-center { font-size: .95rem; color: var(--hg-ink); font-weight: 600; }
#main-body .product-status-text { font-size: 1.05rem; }
/* (4) Destek talebi SOL sidebar butonları (Yanıtla / Bildirimi Kapat) —
col-6 + btn-block ile yan yana sıkışıp "Bildirimi Kapat" kayıyordu → tam genişlik stack */
#main-body .col-button-left, #main-body .col-button-right {
flex: 0 0 100% !important; max-width: 100% !important;
}
#main-body .col-button-left .btn, #main-body .col-button-right .btn { margin-bottom: .5rem; white-space: nowrap; }
/* ============================================================================
SEPET / YAPILANDIRMA — İKİ SÜTUN: "Sipariş Özeti" SAĞ STICKY SIDEBAR
Önceki sorun: özet, içeriğin ALTINDA dar bir kutu olarak kalıyordu (kullanıcı bildirimi).
Her iki sayfa da: .row > .secondary-cart-body (sol) + .secondary-cart-sidebar (sağ).
Bootstrap .row flex-wrap:wrap + body içerik genişliği = full → sidebar alta wrap oluyordu.
Çözüm CSS-only (:has() ile, ŞABLONA DOKUNMADAN). ≥992px iki sütun; altında doğal stack (mobil korunur).
============================================================================ */
@media (min-width: 992px) {
#order-standard_cart .row:has(> .secondary-cart-sidebar) {
display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 32px;
}
#order-standard_cart .row:has(> .secondary-cart-sidebar) > .secondary-cart-body {
flex: 1 1 0; min-width: 0; /* basis 0 → kalan alanı paylaş, içerik genişliğine yapışma */
}
#order-standard_cart .row:has(> .secondary-cart-sidebar) > .secondary-cart-sidebar {
flex: 0 0 350px; position: sticky; top: 96px;
}
#order-standard_cart .secondary-cart-sidebar .order-summary { width: 100%; margin-top: 0 !important; }
}
/* ============================================================================
AUTH (LOGIN) — MODERN + ANİMASYONLU RESTYLE (DEMO)
Mevcut .hg-auth yapısının üzerine modern katman: giriş animasyonları, animasyonlu
input focus (glow ring + ikon rengi), buton hover-lift + shine, promo akan gradyan +
sıralı belirme. Tamamı CSS — şablona dokunulmadı. (Beğenilirse register/panel/sepete yayılır.)
============================================================================ */
@keyframes hgUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes hgRight{ from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: none; } }
@keyframes hgFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hgGrad { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes hgFloat{ 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-14px,18px) scale(1.06); } }
/* form kartı + promo giriş animasyonu */
.hg-auth__card { animation: hgUp .65s cubic-bezier(.16,1,.3,1) both; }
.hg-auth__promo {
/* zengin koyu-mor gradyan (statik — pan animasyonu soluk gösteriyordu) + giriş slide */
background: linear-gradient(135deg, #5e0c7d, #761098 55%, #8f17b3) !important;
animation: hgRight .75s cubic-bezier(.16,1,.3,1) both;
}
.hg-auth__promo::after { animation: hgFloat 11s ease-in-out infinite; }
/* başlık + alanların sıralı belirmesi */
.hg-auth__head { animation: hgFade .5s .1s both; }
.hg-auth__card .form-group { animation: hgFade .5s both; }
.hg-auth__card .form-group:nth-of-type(1){ animation-delay:.18s; }
.hg-auth__card .form-group:nth-of-type(2){ animation-delay:.26s; }
.hg-auth__card .form-group:nth-of-type(3){ animation-delay:.34s; }
.hg-auth__btn { animation: hgFade .5s .42s both; }
/* modern input: yumuşak çerçeve, focus'ta mor glow ring + hafif yükselme + ikon mor */
.hg-auth .input-group-merge {
border: 1.5px solid #e6e9f0 !important; border-radius: 13px !important; background: #fff;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; overflow: hidden;
}
.hg-auth .input-group-merge:focus-within {
border-color: var(--hg-primary) !important;
box-shadow: 0 0 0 4px rgba(118,16,152,.13), 0 6px 16px rgba(118,16,152,.08);
transform: translateY(-1px);
}
.hg-auth .input-group-merge .form-control {
border: 0 !important; box-shadow: none !important; height: 52px; font-size: .95rem; background: transparent;
}
.hg-auth .input-group-merge .input-group-text {
border: 0 !important; background: transparent !important; color: #9aa3b2; transition: color .2s ease;
}
.hg-auth .input-group-merge:focus-within .input-group-text { color: var(--hg-primary); }
.hg-auth .form-control-label { font-size: .82rem; font-weight: 600; color: #475569; margin-bottom: .4rem; letter-spacing: .01em; }
/* buton: gradyan + hover-lift + shine sweep */
.hg-auth__btn {
position: relative; overflow: hidden; background: var(--hg-grad) !important;
transition: transform .2s ease, box-shadow .25s ease, filter .2s ease; isolation: isolate;
}
.hg-auth__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(118,16,152,.38) !important; filter: saturate(1.08); }
.hg-auth__btn:active { transform: translateY(0); }
.hg-auth__btn::after {
content: ""; position: absolute; inset: 0 auto 0 -60%; width: 45%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
transform: skewX(-20deg); transition: left .55s ease; z-index: -1;
}
.hg-auth__btn:hover::after { left: 130%; }
/* promo: avantaj satırları sıralı belir + hover, ikon hafif büyür */
.hg-auth__benefits li { animation: hgFade .5s both; }
.hg-auth__benefits li:nth-child(1){ animation-delay:.45s; }
.hg-auth__benefits li:nth-child(2){ animation-delay:.55s; }
.hg-auth__benefits li:nth-child(3){ animation-delay:.65s; }
.hg-auth__benefits li:nth-child(4){ animation-delay:.75s; }
.hg-auth__benefits i { transition: transform .2s ease, background .2s ease; }
.hg-auth__benefits li:hover i { transform: scale(1.12) rotate(-4deg); background: rgba(255,255,255,.28); }
.hg-auth__rating { animation: hgFade .5s .85s both; }
@media (prefers-reduced-motion: reduce) {
.hg-auth__card, .hg-auth__promo, .hg-auth__head, .hg-auth__card .form-group, .hg-auth__btn,
.hg-auth__benefits li, .hg-auth__rating, .hg-auth__promo::after { animation: none !important; }
}
/* ============================================================================
███ MODERN OVERHAUL (workflow) — 2026-06-02 ███
----------------------------------------------------------------------------
AMAÇ: Panel/sipariş/auth yüzeylerini "markalı ama düz eski WHMCS" hissinden
çıkarıp Stripe/Linear/Vercel tarzı FERAH, DERİNLİKLİ, PREMIUM bir SaaS panele
taşımak. Kullanıcı "aynı geldi" dedi → bu katman AÇIKÇA farklı olmalı.
KURALLAR: Hepsi body.primary-bg-color'a scope'lu (statik siteyi etkilemez).
.hg-auth (login) düzenini ve #order-standard_cart iç grid'ini BOZMAZ.
!important yalnız twenty-one varsayılanını / eski yumuşak gölgeyi ezmek için.
[dir=rtl] ve mobil (<768px) ele alınır. .tpl dosyalarına dokunulmaz.
============================================================================ */
/* ---------- 0) MODERN TOKEN'LAR (overhaul ölçeği) ---------- */
:root {
--mo-bg: #f4f5fa; /* yumuşak zemin → kartlar öne çıkar */
--mo-surface: #ffffff;
--mo-line: #eef0f5; /* kart kenarı (çok ince) */
--mo-line-soft: #f0f1f6; /* tablo satır ayraç */
--mo-ink: #101828; /* slate-900 başlık */
--mo-ink-2: #1d2939;
--mo-muted: #667085; /* genel muted */
--mo-th: #8a93a5; /* tablo başlık muted */
--mo-radius: 16px;
--mo-radius-sm: 10px;
--mo-radius-xs: 12px;
--mo-shadow: 0 1px 3px rgba(16,24,40,.04), 0 12px 28px -8px rgba(16,24,40,.08);
--mo-shadow-hover:0 2px 6px rgba(16,24,40,.05), 0 22px 44px -12px rgba(16,24,40,.16);
--mo-purple: #761098;
--mo-purple-dark: #5a0c78;
--mo-tint: rgba(118,16,152,.06); /* hover wash */
--mo-tint-soft: rgba(118,16,152,.04); /* satır hover */
--mo-tint-strong: rgba(118,16,152,.10); /* aktif / ikon kutu */
}
/* ---------- 1) ZEMİN ---------- */
body.primary-bg-color { background: var(--mo-bg) !important; } /* Inter korunur */
/* ---------- 2) İÇERİK KARTLARI (.card / .panel) — derin, ferah ----------
AMA: .hg-auth ve #order-standard_cart İÇİNİ DEĞİŞTİRME (onlar ayrı stilli). */
body.primary-bg-color #main-body .card:not(.card-sidebar):not(.view-ticket),
body.primary-bg-color #main-body .panel {
background: var(--mo-surface) !important;
border: 1px solid var(--mo-line) !important;
border-radius: var(--mo-radius) !important;
box-shadow: var(--mo-shadow) !important;
}
body.primary-bg-color #main-body .card:not(.card-sidebar) > .card-body,
body.primary-bg-color #main-body .panel > .panel-body { padding: 1.5rem !important; }
/* Kart başlığı: 1.05rem bold slate-900, ince alt çizgi */
body.primary-bg-color #main-body .card:not(.card-sidebar) > .card-header,
body.primary-bg-color #main-body .panel > .panel-heading {
background: var(--mo-surface) !important;
border-bottom: 1px solid var(--mo-line) !important;
padding: 1.15rem 1.5rem !important;
font-size: 1.05rem !important; font-weight: 700 !important; color: var(--mo-ink) !important;
}
body.primary-bg-color #main-body .card .card-title,
body.primary-bg-color #main-body .panel .panel-title { font-size: 1.05rem; font-weight: 700; color: var(--mo-ink); }
/* auth/sepet kartlarına bu derinliği UYGULAMA (kendi tasarımları var) */
body.primary-bg-color .hg-auth .card,
body.primary-bg-color .hg-auth__card,
body.primary-bg-color #order-standard_cart .card { box-shadow: none !important; }
/* ---------- 3) İSTATİSTİK TILE'LARI (.tiles .tile) — premium metrik kartı ---------- */
body.primary-bg-color #main-body .tiles { margin-bottom: 1.75rem !important; }
body.primary-bg-color #main-body .tiles .tile {
background: var(--mo-surface) !important;
border: 1px solid var(--mo-line) !important;
border-radius: var(--mo-radius) !important;
box-shadow: var(--mo-shadow) !important;
padding: 1.5rem 1.5rem 1.4rem !important;
min-height: 148px;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.primary-bg-color #main-body .tiles .tile:hover {
transform: translateY(-3px);
box-shadow: var(--mo-shadow-hover) !important;
border-color: #e3d6ef !important;
}
/* ikon: 44px yumuşak-mor kare, radius-12, mor ikon */
body.primary-bg-color #main-body .tiles .tile i {
width: 44px !important; height: 44px !important; margin-bottom: .85rem !important;
display: grid; place-content: center;
background: var(--mo-tint-strong) !important;
color: var(--mo-purple) !important;
border-radius: var(--mo-radius-xs) !important;
font-size: 1.15rem !important;
}
/* büyük rakam 2rem/800 slate-900 */
body.primary-bg-color #main-body .tiles .tile .stat {
font-size: 2rem !important; font-weight: 800 !important; line-height: 1 !important;
color: var(--mo-ink) !important; letter-spacing: -.02em;
}
/* etiket .78rem muted UPPERCASE */
body.primary-bg-color #main-body .tiles .tile .title {
font-size: .78rem !important; font-weight: 600 !important; text-transform: uppercase !important;
letter-spacing: .05em !important; color: var(--mo-muted) !important; margin-top: .4rem !important;
}
/* eski renkli üst-çubukları kaldır */
body.primary-bg-color #main-body .tiles .tile .highlight { display: none !important; }
/* ---------- 4) DATATABLE (.table / .table-list / .dataTable) — çerçevesiz, ferah ----------
Sepet/auth/fatura tablolarını HARİÇ tut (kendi stilleri var). */
body.primary-bg-color #main-body .table:not(.invoice-items-table),
body.primary-bg-color #main-body .table-list,
body.primary-bg-color #main-body table.dataTable {
border: 0 !important; margin: 0; background: transparent;
}
/* thead: UPPERCASE .72rem letter-spacing muted, arka-plansız */
body.primary-bg-color #main-body .table:not(.invoice-items-table) thead th,
body.primary-bg-color #main-body .table-list thead th,
body.primary-bg-color #main-body table.dataTable thead th {
background: transparent !important;
color: var(--mo-th) !important;
font-size: .72rem !important; font-weight: 700 !important;
text-transform: uppercase !important; letter-spacing: .06em !important;
border-top: 0 !important; border-bottom: 1px solid var(--mo-line) !important;
padding: .75rem 1rem !important; vertical-align: middle;
}
/* td: padding .9rem 1rem, orta hizalı */
body.primary-bg-color #main-body .table:not(.invoice-items-table) tbody td,
body.primary-bg-color #main-body .table-list tbody td,
body.primary-bg-color #main-body table.dataTable tbody td {
padding: .9rem 1rem !important; vertical-align: middle;
border-top: 0 !important; color: var(--mo-ink-2);
}
/* tbody tr: alt-çizgi 1px + hover wash */
body.primary-bg-color #main-body .table:not(.invoice-items-table) tbody tr,
body.primary-bg-color #main-body .table-list tbody tr,
body.primary-bg-color #main-body table.dataTable tbody tr {
border-bottom: 1px solid var(--mo-line-soft);
transition: background .12s ease;
}
body.primary-bg-color #main-body .table:not(.invoice-items-table) tbody tr:last-child,
body.primary-bg-color #main-body .table-list tbody tr:last-child { border-bottom: 0; }
body.primary-bg-color #main-body .table:not(.invoice-items-table) tbody tr:hover,
body.primary-bg-color #main-body .table-list tbody tr:hover,
body.primary-bg-color #main-body table.dataTable tbody tr:hover { background: var(--mo-tint-soft) !important; }
/* tabloyu yuvarlak kart konteynıra al */
body.primary-bg-color #main-body .table-container,
body.primary-bg-color #main-body .dataTables_wrapper {
background: var(--mo-surface);
border: 1px solid var(--mo-line);
border-radius: var(--mo-radius);
box-shadow: var(--mo-shadow);
padding: .35rem 1.25rem 1rem;
}
body.primary-bg-color #main-body .table-container { padding: 0 1.25rem; }
/* arama input + length select: modern yuvarlak */
body.primary-bg-color #main-body .dataTables_filter input,
body.primary-bg-color #main-body .dataTables_length select {
border: 1px solid var(--mo-line) !important; border-radius: 999px !important;
padding: .5rem 1rem !important; background: var(--mo-bg) !important; color: var(--mo-ink-2);
transition: border-color .15s ease, box-shadow .15s ease;
}
body.primary-bg-color #main-body .dataTables_length select { padding-right: 2rem !important; border-radius: var(--mo-radius-sm) !important; }
body.primary-bg-color #main-body .dataTables_filter input:focus {
border-color: var(--mo-purple) !important; background: #fff !important;
box-shadow: 0 0 0 3px rgba(118,16,152,.12) !important; outline: 0;
}
/* pagination: yuvarlak buton, aktif = solid mor */
body.primary-bg-color #main-body .dataTables_paginate .paginate_button {
border-radius: 999px !important; border: 1px solid var(--mo-line) !important;
margin: 0 .15rem !important; min-width: 2.1rem; padding: .35rem .7rem !important;
color: var(--mo-ink-2) !important; background: var(--mo-surface) !important;
transition: all .14s ease;
}
body.primary-bg-color #main-body .dataTables_paginate .paginate_button:hover {
background: var(--mo-tint) !important; border-color: #e3d6ef !important; color: var(--mo-purple) !important;
}
body.primary-bg-color #main-body .dataTables_paginate .paginate_button.current,
body.primary-bg-color #main-body .dataTables_paginate .paginate_button.current:hover {
background: var(--mo-purple) !important; color: #fff !important; border-color: var(--mo-purple) !important;
}
/* ---------- 5) DURUM ROZETLERİ — pill + öncü nokta ---------- */
body.primary-bg-color #main-body .label.status,
body.primary-bg-color #main-body span.status,
body.primary-bg-color #main-body .status-active,
body.primary-bg-color #main-body .status-paid {
display: inline-flex !important; align-items: center; gap: .42rem;
padding: .3rem .7rem !important; border-radius: 999px !important;
font-size: .75rem !important; font-weight: 600 !important; line-height: 1; border: 0 !important;
}
/* öncü nokta (currentColor) */
body.primary-bg-color #main-body .label.status::before,
body.primary-bg-color #main-body span.status::before {
content: ""; width: .42rem; height: .42rem; border-radius: 50%;
background: currentColor; flex: 0 0 auto;
}
/* paid/active → yeşil */
body.primary-bg-color #main-body .status-active,
body.primary-bg-color #main-body .status-paid,
body.primary-bg-color #main-body .status-open,
body.primary-bg-color #main-body .status-answered,
body.primary-bg-color #main-body .status-completed,
body.primary-bg-color #main-body .status-accepted,
body.primary-bg-color #main-body .status-valid { background: #dcfce7 !important; color: #16a34a !important; }
/* unpaid/overdue → kırmızı */
body.primary-bg-color #main-body .status-unpaid,
body.primary-bg-color #main-body .status-overdue,
body.primary-bg-color #main-body .status-suspended,
body.primary-bg-color #main-body .status-customer-reply,
body.primary-bg-color #main-body .status-fraud,
body.primary-bg-color #main-body .status-collections { background: #fee2e2 !important; color: #dc2626 !important; }
/* pending → amber */
body.primary-bg-color #main-body .status-pending,
body.primary-bg-color #main-body .status-draft,
body.primary-bg-color #main-body .status-in-progress,
body.primary-bg-color #main-body .status-on-hold,
body.primary-bg-color #main-body .status-pending-transfer,
body.primary-bg-color #main-body .status-awaiting-payment { background: #fef3c7 !important; color: #d97706 !important; }
/* cancelled/closed → slate */
body.primary-bg-color #main-body .status-terminated,
body.primary-bg-color #main-body .status-cancelled,
body.primary-bg-color #main-body .status-closed,
body.primary-bg-color #main-body .status-refunded,
body.primary-bg-color #main-body .status-expired,
body.primary-bg-color #main-body .status-inactive { background: #e2e8f0 !important; color: #475569 !important; }
/* ---------- 6) SOL SIDEBAR — temiz, ikon+etiket, aktif aksanlı ---------- */
body.primary-bg-color #main-body .card-sidebar {
background: var(--mo-surface) !important;
border: 1px solid var(--mo-line) !important;
border-radius: var(--mo-radius) !important;
box-shadow: var(--mo-shadow) !important;
padding: .6rem !important; overflow: visible;
}
/* sidebar başlığı UPPERCASE muted */
body.primary-bg-color #main-body .card-sidebar .card-header {
background: transparent !important; border-bottom: 0 !important;
padding: .65rem .75rem .4rem !important;
}
body.primary-bg-color #main-body .card-sidebar .card-header .card-title {
font-size: .72rem !important; font-weight: 700 !important; text-transform: uppercase;
letter-spacing: .06em; color: var(--mo-th) !important;
}
/* öğeler: ikon+etiket flex, padding .6rem .8rem, radius 10px */
body.primary-bg-color #main-body .card-sidebar .list-group-item {
border: 0 !important; background: transparent !important; padding: 0 !important;
border-radius: var(--mo-radius-sm) !important; margin-bottom: 2px; overflow: hidden;
}
body.primary-bg-color #main-body .card-sidebar .list-group-item .sidebar-menu-item-wrapper {
display: flex; align-items: center; gap: .65rem; padding: .6rem .8rem !important; border-radius: var(--mo-radius-sm);
}
body.primary-bg-color #main-body .card-sidebar .list-group-item .sidebar-menu-item-label {
font-size: .9rem; font-weight: 500; color: var(--mo-ink-2);
}
body.primary-bg-color #main-body .card-sidebar .list-group-item .sidebar-menu-item-icon { color: var(--mo-muted); }
/* hover */
body.primary-bg-color #main-body .card-sidebar .list-group-item:hover { background: var(--mo-tint) !important; }
body.primary-bg-color #main-body .card-sidebar .list-group-item:hover .sidebar-menu-item-icon,
body.primary-bg-color #main-body .card-sidebar .list-group-item:hover .sidebar-menu-item-label { color: var(--mo-purple); }
/* aktif: bg + mor metin + 600 + sol mor aksan */
body.primary-bg-color #main-body .card-sidebar .list-group-item.active {
background: var(--mo-tint-strong) !important; position: relative;
}
body.primary-bg-color #main-body .card-sidebar .list-group-item.active::before {
content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px;
border-radius: 0 3px 3px 0; background: var(--mo-purple);
}
body.primary-bg-color #main-body .card-sidebar .list-group-item.active .sidebar-menu-item-icon,
body.primary-bg-color #main-body .card-sidebar .list-group-item.active .sidebar-menu-item-label {
color: var(--mo-purple) !important; font-weight: 600 !important;
}
/* sidebar sayaç badge → pill */
body.primary-bg-color #main-body .card-sidebar .sidebar-menu-item-badge {
margin-left: auto; background: var(--mo-tint-strong); color: var(--mo-purple-dark);
font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px;
}
body.primary-bg-color #main-body .card-sidebar .list-group-item.active .sidebar-menu-item-badge {
background: rgba(118,16,152,.18); color: var(--mo-purple-dark);
}
/* ---------- 7) BUTONLAR — primary solid mor, hover lift ---------- */
body.primary-bg-color #main-body .btn { border-radius: var(--mo-radius-sm) !important; transition: transform .15s ease, box-shadow .2s ease, background .15s ease; }
body.primary-bg-color #main-body .btn-primary,
body.primary-bg-color #main-body .btn-checkout {
background: var(--mo-purple) !important; border-color: var(--mo-purple) !important;
box-shadow: 0 4px 12px rgba(118,16,152,.20) !important;
}
body.primary-bg-color #main-body .btn-primary:hover,
body.primary-bg-color #main-body .btn-checkout:hover {
background: var(--mo-purple-dark) !important; border-color: var(--mo-purple-dark) !important;
transform: translateY(-1px); box-shadow: 0 8px 20px rgba(118,16,152,.30) !important;
}
/* ---------- 8) SAYFA BAŞLIKLARI — bold, ferah ---------- */
body.primary-bg-color #main-body .header-lined h1,
body.primary-bg-color #main-body .header-lined h2,
body.primary-bg-color #main-body > h1,
body.primary-bg-color #main-body .primary-content > h1 {
font-size: 1.7rem; font-weight: 800; color: var(--mo-ink); letter-spacing: -.015em;
margin: 0 0 1.4rem;
}
body.primary-bg-color #main-body .header-lined { border-bottom: 0; padding-bottom: 0; }
/* bölümler arası ferah boşluk */
body.primary-bg-color #main-body .card,
body.primary-bg-color #main-body .panel,
body.primary-bg-color #main-body .table-container { margin-bottom: 1.5rem; }
/* ---------- 9) GİRİŞ ANİMASYONU KALDIRILDI ----------
fadeUp (opacity:0 başlangıç + both) tab/AJAX ile gelen kartları (cPanel Extended modülü gibi)
opacity:0'da bırakıp GÖRÜNMEZ yapıyordu ("alt taraf açılmıyor"). Modern görünüm (kart/derinlik/
tablo/tile) animasyonsuz da duruyor. Güvenlik: bu öğeler her zaman görünür kalsın. */
body.primary-bg-color #main-body .card,
body.primary-bg-color #main-body .tiles .tile,
body.primary-bg-color #main-body .table-container,
body.primary-bg-color #main-body .tab-pane.active { animation: none !important; opacity: 1 !important; }
/* ---------- 10) RTL ---------- */
body.primary-bg-color[dir="rtl"] #main-body .card-sidebar .list-group-item.active::before,
[dir="rtl"] body.primary-bg-color #main-body .card-sidebar .list-group-item.active::before {
left: auto; right: 0; border-radius: 3px 0 0 3px;
}
body.primary-bg-color[dir="rtl"] #main-body .card-sidebar .sidebar-menu-item-badge,
[dir="rtl"] body.primary-bg-color #main-body .card-sidebar .sidebar-menu-item-badge { margin-left: 0; margin-right: auto; }
/* ---------- 11) MOBİL (<768px): kartlar tam genişlik, tile 2 sütun ---------- */
@media (max-width: 767px) {
body.primary-bg-color #main-body .card:not(.card-sidebar),
body.primary-bg-color #main-body .panel,
body.primary-bg-color #main-body .table-container { width: 100%; }
body.primary-bg-color #main-body .card:not(.card-sidebar) > .card-body,
body.primary-bg-color #main-body .panel > .panel-body { padding: 1.15rem !important; }
/* tile 2 sütun */
body.primary-bg-color #main-body .tiles { display: grid !important; grid-template-columns: 1fr 1fr; gap: .75rem; }
body.primary-bg-color #main-body .tiles .tile { width: auto !important; margin: 0 !important; min-height: 124px; padding: 1.15rem !important; }
body.primary-bg-color #main-body .tiles .tile .stat { font-size: 1.6rem !important; }
}
/* ---------- 12) AUTH/SEPET — DERİNLİK UYUMU (iç düzene DOKUNMADAN) ----------
.hg-auth grid'i ve #order-standard_cart grid'i KORUNUR; sadece dış kabuk
yumuşak zeminle uyumlu kalsın diye nötrleme. */
body.primary-bg-color .hg-auth { background: var(--mo-bg); }
/* sepet özet kartına overhaul gölgesini ver (iç grid'e dokunmadan derinlik) */
body.primary-bg-color #order-standard_cart .order-summary {
border-radius: var(--mo-radius) !important; box-shadow: var(--mo-shadow) !important; border-color: var(--mo-line) !important;
}
/* ============================================================================
███ MODERN OVERHAUL — DOĞRULAMA DÜZELTMELERİ (workflow) — 2026-06-02 ███
----------------------------------------------------------------------------
Görsel doğrulamada bulunan kusurların hedefli düzeltmeleri. Hepsi MODERN
OVERHAUL scope'unu (body.primary-bg-color / auth) korur, .tpl'e dokunmaz.
============================================================================ */
/* ---------- F1) AUTH-REGISTER: intl-tel-input telefon alanı çakışması (medium)
Bayrak/dial-code kutusu input'un sol padding'ini itmiyordu; '+44' önek kodu
ile 'Telefon Numarası' placeholder üst üste biniyordu. Input'a yeterli sol
padding ver, dial-code kutusunu şeffaf yap, container tam genişlik. ---------- */
.iti { width: 100% !important; display: block !important; }
.iti--separate-dial-code .iti__selected-flag { background: transparent !important; }
.iti__flag-container { z-index: 2; }
.iti input,
.iti input[type="tel"],
.iti input[type="text"],
input.iti__tel-input { padding-left: 92px !important; }
/* tek bayrak (dial-code olmadan) varyantı için daha dar padding yeterli */
.iti:not(.iti--separate-dial-code) input,
.iti:not(.iti--separate-dial-code) input[type="tel"] { padding-left: 52px !important; }
/* ---------- F2) AUTH-REGISTER: mobilde sticky header H1'i kesiyor (medium)
'Oluşturun' üst satırı ~56px header altında kalıyordu; scroll anchor + üst
boşluk ekle. ---------- */
html { scroll-padding-top: 72px; }
@media (max-width: 768px) {
body.primary-bg-color .hg-auth__head h1,
body.primary-bg-color .hg-auth h1,
.register-hero h1 {
margin-top: 1rem;
padding-top: .5rem;
scroll-margin-top: 72px;
}
body.primary-bg-color .hg-auth,
body.primary-bg-color #main-body { scroll-margin-top: 72px; }
}
/* ---------- F3) ORDER-PRODUCT: modern stil bu sayfaya etki etmiyor (high)
Sebep: order/configureproduct adımı body.primary-bg-color scope'u dışında
olabilir. Order form gövdelerinde de zemin + kart derinliği + buton stilini
garanti et. WHMCS order body class'ları: body.cart, body.order, .order-form,
#order-standard_cart kapsayıcısı. CSS-only, .tpl'e dokunmadan kapsamı genişlet. */
body.cart, body.order, body[class*="order"] { background: var(--mo-bg) !important; }
body.cart #order-standard_cart .card,
body.order #order-standard_cart .card,
.order-form #order-standard_cart .card:not(.card-sidebar),
#order-standard_cart .card:not(.card-sidebar):not(.view-ticket) {
background: var(--mo-surface) !important;
border: 1px solid var(--mo-line) !important;
border-radius: var(--mo-radius) !important;
box-shadow: var(--mo-shadow) !important;
}
/* order form butonları (Kontrol Et / Devam / Sepete Ekle) modern mor */
#order-standard_cart .btn-primary,
#order-standard_cart .btn-checkout,
.order-form .btn-primary,
body.cart .btn-primary, body.order .btn-primary {
background: var(--mo-purple) !important; border-color: var(--mo-purple) !important;
border-radius: var(--mo-radius-sm) !important;
box-shadow: 0 4px 12px rgba(118,16,152,.20) !important;
transition: transform .15s ease, box-shadow .2s ease, background .15s ease;
}
#order-standard_cart .btn-primary:hover,
#order-standard_cart .btn-checkout:hover,
.order-form .btn-primary:hover {
background: var(--mo-purple-dark) !important; border-color: var(--mo-purple-dark) !important;
transform: translateY(-1px); box-shadow: 0 8px 20px rgba(118,16,152,.30) !important;
}
/* order form input/select alanları modern */
#order-standard_cart input[type="text"],
#order-standard_cart input[type="search"],
#order-standard_cart select,
.order-form input[type="text"],
.order-form select {
border-radius: var(--mo-radius-sm) !important;
}
#order-standard_cart input:focus,
#order-standard_cart select:focus,
.order-form input:focus {
border-color: var(--mo-purple) !important;
box-shadow: 0 0 0 3px rgba(118,16,152,.12) !important; outline: 0;
}
/* ---------- F4) CA-HOME: e-posta doğrulama uyarı çubuğu eski/ağır (medium)
Gri+koyu gri yerine modern amber palet. ---------- */
body.primary-bg-color #main-body .alert.alert-warning,
body.primary-bg-color #main-body #verifyEmailBanner,
body.primary-bg-color #main-body .alert-email-verification {
background: #fff8ec !important;
border: 1px solid #ffe0a3 !important;
color: #7a5200 !important;
border-radius: var(--mo-radius-sm) !important;
box-shadow: none !important;
}
body.primary-bg-color #main-body #verifyEmailBanner .btn,
body.primary-bg-color #main-body .alert.alert-warning .btn,
body.primary-bg-color #main-body .alert-email-verification .btn {
background: #f59e0b !important; border: none !important; color: #fff !important;
border-radius: var(--mo-radius-sm) !important; box-shadow: none !important;
}
body.primary-bg-color #main-body #verifyEmailBanner .btn:hover,
body.primary-bg-color #main-body .alert.alert-warning .btn:hover {
background: #d97706 !important;
}
/* ---------- F5) CA-INVOICES + CA-DOMAINS: arama kutusu boş hayalet kutu (medium)
Büyüteç ikonu + placeholder kaybolmuştu. Beyaz zemin + inline SVG büyüteç +
sol padding + görünür placeholder/ikon geri getir. Yuvarlak pill korunur. */
body.primary-bg-color #main-body .dataTables_filter input,
body.primary-bg-color #main-body .dt-search input,
body.primary-bg-color #main-body .table-toolbar .search-box input,
body.primary-bg-color #main-body .clientarea-domains .domain-search input,
body.primary-bg-color #main-body .clientarea-table-search input {
background-color: #fff !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: 14px center !important;
background-size: 16px 16px !important;
padding-left: 40px !important;
border: 1px solid var(--mo-line) !important;
color: var(--mo-ink-2) !important;
min-width: 220px;
}
body.primary-bg-color #main-body .dataTables_filter input::placeholder,
body.primary-bg-color #main-body .dt-search input::placeholder,
body.primary-bg-color #main-body .table-toolbar .search-box input::placeholder,
body.primary-bg-color #main-body .clientarea-domains .domain-search input::placeholder,
body.primary-bg-color #main-body .clientarea-table-search input::placeholder {
color: #9ca3af !important; opacity: 1 !important;
}
/* RTL: ikonu sağa al, padding'i ters çevir */
[dir="rtl"] body.primary-bg-color #main-body .dataTables_filter input,
[dir="rtl"] body.primary-bg-color #main-body .table-toolbar .search-box input,
[dir="rtl"] body.primary-bg-color #main-body .clientarea-domains .domain-search input {
background-position: right 14px center !important;
padding-left: 1rem !important; padding-right: 40px !important;
}
/* ---------- F6) CA-SERVICES: MOBİLDE tablo karta sığmıyor, DURUM/İŞLEM kesik (high)
840px tablo 282px karta sığmıyordu, üst kart overflow:hidden ile kesiyordu.
Önce sarmalayıcılara yatay kaydırma ver (her zaman erişilebilir), sonra
<768px'te stack-kart düzenine çevir (thead gizle, td block, data-title etiket). */
body.primary-bg-color #main-body .table-list-wrap,
body.primary-bg-color #main-body .clientarea-table-wrap,
body.primary-bg-color #main-body .card .table-responsive,
body.primary-bg-color #main-body .dataTables_wrapper {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
/* kesen üst kapsayıcı içeriği kesmesin */
body.primary-bg-color #main-body .card:not(.card-sidebar) { overflow-x: auto !important; }
body.primary-bg-color #main-body .card:not(.card-sidebar) > .card-body { overflow: visible !important; }
/* tabloyu stack-kart düzenine çevir */
body.primary-bg-color #main-body .table-list.dataTable,
body.primary-bg-color #main-body .clientarea-table .table-list {
width: 100% !important; min-width: 0 !important;
}
body.primary-bg-color #main-body .table-list.dataTable thead {
position: absolute !important; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
body.primary-bg-color #main-body .table-list.dataTable tbody tr {
display: block !important;
border: 1px solid var(--mo-line) !important;
border-radius: var(--mo-radius-sm) !important;
padding: .35rem .25rem;
margin-bottom: .75rem;
background: var(--mo-surface) !important;
}
body.primary-bg-color #main-body .table-list.dataTable tbody td {
display: flex !important; align-items: center; justify-content: space-between;
gap: 1rem; width: auto !important;
padding: .55rem .85rem !important; text-align: right;
border: 0 !important; border-bottom: 1px solid var(--mo-line-soft) !important;
}
body.primary-bg-color #main-body .table-list.dataTable tbody td:last-child { border-bottom: 0 !important; }
/* data-title varsa etiket olarak göster (WHMCS td'lerinde mevcut) */
body.primary-bg-color #main-body .table-list.dataTable tbody td[data-title]::before {
content: attr(data-title);
font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--mo-th); text-align: left; flex: 0 0 auto;
}
/* aksiyon kolonu: tam genişlik alt satır, butonlar block */
body.primary-bg-color #main-body .table-list.dataTable tbody td.hg-col-action,
body.primary-bg-color #main-body .table-list.dataTable tbody td:last-child {
display: block !important; text-align: center;
}
body.primary-bg-color #main-body .table-list.dataTable tbody td.hg-col-action .btn { width: 100%; margin: .25rem 0 0; }
}
/* ---------- F7) CA-SERVICES: DESKTOP başlık/arama dikey hizalama cilası (low) ---------- */
@media (min-width: 992px) {
body.primary-bg-color #main-body .table-list thead th { vertical-align: middle !important; }
body.primary-bg-color #main-body .clientarea-table-search { align-self: center; }
}
/* ---------- F8) CA-SERVICES: RTL aksiyon butonu ok ikonu yönü (low) ---------- */
[dir="rtl"] body.primary-bg-color #main-body .btn .icon-arrow,
[dir="rtl"] body.primary-bg-color #main-body .btn .icon-arrow-right {
transform: scaleX(-1);
margin-inline-start: .4rem; margin-inline-end: 0;
}
/* ============================================================
UI CİLA — 2026-06-02 (kullanıcı listesi)
Hepsi body.primary-bg-color scope'lu → statik site etkilenmez.
============================================================ */
/* P1) ÇİFT-PANEL ("pencere üzerinde pencere"): .table-container > .dataTables_wrapper
ikisi de kart chrome (bg+border+shadow+radius) alıyordu → iç içe iki beyaz kart.
İç wrapper'ı saydam yap; tek kart (.table-container) kalsın. */
body.primary-bg-color #main-body .table-container .dataTables_wrapper,
body.primary-bg-color #main-body .table-container .dataTables_wrapper.dt-bootstrap4 {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin-bottom: 0 !important;
}
/* P2) ALTÇİZGİLİ LİNKLER — clientarea içerik/tablo/sidebar/breadcrumb linkleri düz
(buton hariç). Modern panel görünümü. */
body.primary-bg-color #main-body a:not(.btn),
body.primary-bg-color #main-body a:not(.btn):hover,
body.primary-bg-color #main-body a:not(.btn):focus { text-decoration: none !important; }
/* P3) AKSİYON BUTON İKON HİZASI — "Hizmete Giriş" (.hg-manage-btn) + tablo butonları
ikonu ortala (kayık ok düzelir). */
body.primary-bg-color #main-body .hg-manage-btn,
body.primary-bg-color #main-body table.dataTable .btn,
body.primary-bg-color #main-body .table-list .btn {
display: inline-flex !important; align-items: center; justify-content: center; gap: .4rem;
}
body.primary-bg-color #main-body .hg-manage-btn i,
body.primary-bg-color #main-body table.dataTable .btn i,
body.primary-bg-color #main-body .table-list .btn i {
vertical-align: middle; line-height: 1; margin: 0; font-size: .85em;
}
/* P4) SIDEBAR FİLTRE SAYI ROZETLERİ — SADECE rozet içeren filtre öğesini flex yap
(viewticket .ticket-details-children gibi
'li blokları BOZMA) + rakamı ortala */
body.primary-bg-color #main-body .card-sidebar .list-group-item:has(.sidebar-menu-item-badge),
body.primary-bg-color #main-body .card-sidebar .sidebar-menu-item:has(.sidebar-menu-item-badge) {
display: flex !important; align-items: center;
}
body.primary-bg-color #main-body .card-sidebar .sidebar-menu-item-badge {
display: inline-flex !important; align-items: center; justify-content: center;
min-width: 1.7rem; height: 1.4rem; padding: 0 .45rem; text-align: center;
font-variant-numeric: tabular-nums; line-height: 1;
}
/* P5) AFFILIATES istatistik kutuları → modern beyaz kart (renkli alert yerine) */
body.primary-bg-color #main-body .affiliate-stat {
background: var(--mo-surface) !important;
border: 1px solid var(--mo-line) !important;
border-radius: var(--mo-radius) !important;
box-shadow: var(--mo-shadow) !important;
color: var(--mo-muted) !important;
display: flex !important; align-items: center; gap: .85rem;
padding: 1.15rem 1.3rem !important; min-height: 92px;
font-size: .92rem; font-weight: 600;
}
body.primary-bg-color #main-body .affiliate-stat i {
width: 46px; height: 46px; flex: 0 0 46px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--mo-tint); color: var(--mo-purple);
border-radius: 12px; font-size: 1.2rem;
}
body.primary-bg-color #main-body .affiliate-stat span {
font-size: 1.65rem; font-weight: 800; line-height: 1; color: var(--mo-ink);
margin-right: .15rem;
}
body.primary-bg-color #main-body .affiliate-stat-green i { background: rgba(34,197,94,.12); color: #16a34a; }
body.primary-bg-color #main-body .affiliate-stat-orange i { background: rgba(249,115,22,.12); color: #ea580c; }
body.primary-bg-color #main-body .affiliate-stat-pink i,
body.primary-bg-color #main-body .affiliate-stat-purple i { background: var(--mo-tint); color: var(--mo-purple); }
/* P6) DOMAINDETAILS — overview büyük yazıyı kırp (kompakt, modern key/value) */
body.primary-bg-color #main-body #tabOverview h1,
body.primary-bg-color #main-body #tabOverview h2 { font-size: 1.25rem; font-weight: 700; }
body.primary-bg-color #main-body #tabOverview h3,
body.primary-bg-color #main-body #tabOverview h4 { font-size: 1.05rem; font-weight: 700; }
body.primary-bg-color #main-body #tabOverview .label,
body.primary-bg-color #main-body #tabOverview dt,
body.primary-bg-color #main-body #tabOverview .text-muted { font-size: .82rem; }
/* P7) BAŞLIK BOYUTU — statik sitenin dev display başlıkları clientarea içeriğine
sızıyordu (bare h2 = 64px!). Panel içeriğinde makul boyuta indir.
.card-title/.panel-title hariç (kendi redesign kuralları var). */
body.primary-bg-color #main-body h1:not(.card-title):not(.panel-title) { font-size: 1.75rem !important; font-weight: 700; line-height: 1.25; }
body.primary-bg-color #main-body h2:not(.card-title):not(.panel-title) { font-size: 1.4rem !important; font-weight: 700; line-height: 1.3; }
body.primary-bg-color #main-body h3:not(.card-title):not(.panel-title) { font-size: 1.18rem !important; font-weight: 700; line-height: 1.3; }
body.primary-bg-color #main-body h4:not(.card-title):not(.panel-title) { font-size: 1.05rem !important; font-weight: 700; }
body.primary-bg-color #main-body h5:not(.card-title):not(.panel-title) { font-size: .98rem !important; font-weight: 700; line-height: 1.35; }
body.primary-bg-color #main-body h6:not(.card-title):not(.panel-title) { font-size: .86rem !important; font-weight: 700; }
/* Bootstrap başlık utility class'ları (.h1-.h6) — statik site bunları dev yapıyor (örn. 48px) */
body.primary-bg-color #main-body .h1 { font-size: 1.75rem !important; }
body.primary-bg-color #main-body .h2 { font-size: 1.4rem !important; }
body.primary-bg-color #main-body .h3 { font-size: 1.18rem !important; }
body.primary-bg-color #main-body .h4 { font-size: 1.05rem !important; }
body.primary-bg-color #main-body .h5 { font-size: .98rem !important; }
body.primary-bg-color #main-body .h6 { font-size: .86rem !important; }
/* P8) DOMAINDETAILS overview — key/value kompakt modern liste.
WHMCS bu alanda her etiketi
yapıyor; etiketi sade + değeri belirgin. */
body.primary-bg-color #main-body #tabOverview h5,
body.primary-bg-color #main-body .tab-pane h5 {
font-size: .82rem !important; font-weight: 600 !important; color: var(--mo-muted) !important;
text-transform: uppercase; letter-spacing: .02em; margin: 0 0 .1rem !important;
}
/* P9) VIEWTICKET sol "BILDIRIM DETAYI" paneli — etiket/değer düzgün blok
(.ticket-details-children: +
+ değer; flex'e girince bitişiyordu) */
body.primary-bg-color #main-body .ticket-details-children {
display: block !important; padding: .65rem 1.15rem; line-height: 1.45;
}
body.primary-bg-color #main-body .ticket-details-children .title {
display: block; font-size: .74rem; font-weight: 600; text-transform: uppercase;
letter-spacing: .03em; color: var(--mo-muted); margin-bottom: .12rem;
}
body.primary-bg-color #main-body .ticket-details-children br { display: none; }
body.primary-bg-color #main-body .ticket-details-children .label { margin-left: .4rem; vertical-align: middle; }
body.primary-bg-color #main-body .ticket-details-children .ticket-requestor-name { font-weight: 600; color: var(--mo-ink); }
/* P10) RENEW CART (Alan Adı Yenileme) — dağınık/yüksek satırlar → kompakt modern kart.
Her .domain-renewal: ad+rozet üstte, bitiş ortada, dönem-select + Sepete Ekle tek hizada. */
body.primary-bg-color #main-body .domain-renewals { margin-top: .4rem; }
body.primary-bg-color #main-body .domain-renewal {
position: relative; display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "head badge" "meta meta" "period button";
align-items: center; column-gap: 1rem; row-gap: .35rem;
background: var(--mo-surface); border: 1px solid var(--mo-line);
border-radius: var(--mo-radius); box-shadow: var(--mo-shadow);
padding: .9rem 1.15rem; margin-bottom: .75rem;
}
body.primary-bg-color #main-body .domain-renewal h3,
body.primary-bg-color #main-body .domain-renewal h3.font-size-24 {
grid-area: head; font-size: 1.08rem !important; font-weight: 700; margin: 0; align-self: end;
}
body.primary-bg-color #main-body .domain-renewal > p {
grid-area: meta; margin: 0; font-size: .82rem; color: var(--mo-muted);
}
body.primary-bg-color #main-body .domain-renewal .pull-right.float-right {
grid-area: badge; float: none !important; justify-self: end; align-self: start;
}
body.primary-bg-color #main-body .domain-renewal form.form-horizontal { grid-area: period; margin: 0; }
body.primary-bg-color #main-body .domain-renewal .text-right { grid-area: button; margin: 0; justify-self: end; }
/* form satırı kompakt: etiket + select tek hizada */
body.primary-bg-color #main-body .domain-renewal .form-group.row {
display: flex; align-items: center; gap: .6rem; margin: 0; flex-wrap: wrap;
}
body.primary-bg-color #main-body .domain-renewal .form-group.row .control-label {
flex: 0 0 auto; width: auto; max-width: none; padding: 0; text-align: left;
font-size: .8rem; font-weight: 600; color: var(--mo-muted);
}
body.primary-bg-color #main-body .domain-renewal .form-group.row > div[class*="col-"] {
flex: 1 1 190px; max-width: 340px; padding: 0;
}
body.primary-bg-color #main-body .domain-renewal .select-renewal-pricing { width: 100%; }
/* Sepete Ekle → belirgin outline-purple buton (ana CTA "Sepeti Görüntüle" ile yarışmadan) */
body.primary-bg-color #main-body .domain-renewal .btn-add-renewal-to-cart {
background: #fff !important; color: var(--mo-purple) !important;
border: 1px solid var(--mo-purple) !important; font-weight: 600; padding: .45rem 1.1rem; white-space: nowrap;
}
body.primary-bg-color #main-body .domain-renewal .btn-add-renewal-to-cart:hover {
background: var(--mo-purple) !important; color: #fff !important; border-color: var(--mo-purple) !important;
}
/* ============================================================
UI CİLA 2. TUR — 2026-06-02 (kullanıcı 7 maddelik liste)
============================================================ */
/* P11) Breadcrumb gizle + ana menüdeki "+" müşteri-paneli submenüsü (hg_unify enjekte eder) */
body.primary-bg-color .master-breadcrumb { display: none !important; }
/* "+" menü öğesi — ana navigasyona iç içe, hover ile açılan panel submenüsü */
.hg-plusmenu { position: relative; display: flex; align-items: center; }
.hg-plusmenu__toggle { display: inline-flex !important; align-items: center; padding: .25rem .5rem !important; }
.hg-plusmenu__plus {
width: 30px; height: 30px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--hg-primary, #761098); color: #fff !important; font-size: 1.25rem; font-weight: 700; line-height: 1;
transition: transform .18s ease; box-shadow: 0 4px 12px -2px rgba(118,16,152,.45);
}
.hg-plusmenu:hover .hg-plusmenu__plus { transform: rotate(90deg); }
.hg-plusmenu__panel {
position: absolute; top: calc(100% + 6px); left: 0; min-width: 248px;
background: #fff; border: 1px solid #eef0f5; border-radius: 14px;
box-shadow: 0 18px 44px -12px rgba(16,24,40,.24); padding: .5rem;
opacity: 0; visibility: hidden; transform: translateY(8px);
transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 1200;
}
.hg-plusmenu:hover .hg-plusmenu__panel,
.hg-plusmenu:focus-within .hg-plusmenu__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.hg-plusmenu__title {
display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
color: #94a3b8; font-weight: 700; padding: .45rem .65rem .35rem;
}
.hg-plusmenu__panel a {
display: flex; align-items: center; gap: .65rem; padding: .58rem .65rem; border-radius: 9px;
color: #1f2430 !important; font-weight: 600; font-size: .9rem; text-decoration: none !important;
transition: background .14s, color .14s;
}
.hg-plusmenu__panel a:hover { background: var(--hg-tint, #f4e9f8); color: var(--hg-primary, #761098) !important; }
.hg-plusmenu__panel a i { color: var(--hg-primary, #761098); width: 18px; text-align: center; flex: 0 0 18px; }
@media (max-width: 991px) {
.hg-plusmenu__panel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; min-width: 0; padding-left: 0; }
}
/* P12) DOMAINS toplu-işlem barı — ORTALANMIŞ, etiketli, ikon/yazı hizalı */
body.primary-bg-color #main-body .hg-bulkbar {
display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
background: var(--mo-tint); border: 1px solid var(--mo-line);
border-radius: var(--mo-radius); padding: .7rem 1rem; text-align: center;
}
body.primary-bg-color #main-body .hg-bulkbar__label {
font-size: .84rem; font-weight: 700; color: var(--mo-purple-dark);
display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
}
body.primary-bg-color #main-body .hg-bulkbar__label i { font-size: .95rem; }
/* butonlar: ikon + yazı dikey ortalı, tutarlı boşluk */
body.primary-bg-color #main-body .hg-bulkbar .btn,
body.primary-bg-color #main-body .hg-bulkbar .setBulkAction {
display: inline-flex !important; align-items: center; justify-content: center; gap: .45rem; line-height: 1.2;
}
body.primary-bg-color #main-body .hg-bulkbar .btn i { margin: 0 !important; line-height: 1; font-size: .9rem; }
body.primary-bg-color #main-body .hg-bulkbar .btn-group { display: inline-flex; flex-wrap: wrap; }
body.primary-bg-color #main-body .hg-bulkbar .dropdown-item { display: flex; align-items: center; gap: .45rem; }
body.primary-bg-color #main-body .hg-bulkbar .dropdown-item i { margin: 0 !important; }
/* P13) AFFILIATE — komisyon/İstek link kartı yanında entegre */
body.primary-bg-color #main-body .hg-aff-link { font-family: ui-monospace, monospace; background: var(--mo-bg); }
body.primary-bg-color #main-body .hg-aff-comm { list-style: none; margin: 0; padding: 0; }
body.primary-bg-color #main-body .hg-aff-comm li {
display: flex; justify-content: space-between; align-items: center;
padding: .55rem 0; border-bottom: 1px dashed var(--mo-line); font-size: .9rem;
}
body.primary-bg-color #main-body .hg-aff-comm li:last-child { border-bottom: 0; }
body.primary-bg-color #main-body .hg-aff-comm li span { color: var(--mo-muted); }
body.primary-bg-color #main-body .hg-aff-comm li strong { color: var(--mo-ink); }
body.primary-bg-color #main-body .hg-aff-balance { color: #16a34a !important; font-size: 1.08rem; }
/* P14) VIEWTICKET — konuşma + personel rol etiketi + avatar */
body.primary-bg-color #main-body .ticket-reply .posted-by { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
body.primary-bg-color #main-body .ticket-reply .posted-by-name { font-weight: 700; color: var(--mo-ink); }
body.primary-bg-color #main-body .ticket-reply .posted-by-role {
font-size: .7rem; font-weight: 700; color: var(--mo-purple); background: var(--mo-tint);
padding: .12rem .55rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .02em;
}
body.primary-bg-color #main-body .ticket-reply .posted-by-level {
font-size: .72rem; font-weight: 600; color: var(--mo-muted);
display: inline-flex; align-items: center; gap: .3rem;
}
body.primary-bg-color #main-body .ticket-reply .posted-by-level::before {
content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--mo-muted); opacity: .5;
}
body.primary-bg-color #main-body .ticket-reply .posted-on { margin-left: auto; font-size: .8rem; color: var(--mo-muted); }
body.primary-bg-color #main-body .hg-tkt-avatar {
width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
background: var(--mo-purple); color: #fff; font-size: .95rem; flex: 0 0 36px;
}
body.primary-bg-color #main-body .hg-tkt-avatar--client { background: #94a3b8; }
body.primary-bg-color #main-body .ticket-reply.staff { background: var(--mo-tint-soft); }
/* P15) SERVICES & clientarea tabloları — kompakt (satır yüksekliği düşür).
NOT: satır 754 (...tbody td) eziyordu → aynı spesifiklik + sonra geldiği için kazanır. */
body.primary-bg-color #main-body table.dataTable tbody td,
body.primary-bg-color #main-body table.dataTable thead th {
padding-top: .5rem !important; padding-bottom: .5rem !important; vertical-align: middle; line-height: 1.3;
}
body.primary-bg-color #main-body table.dataTable tbody td strong { line-height: 1.3; }
body.primary-bg-color #main-body table.dataTable tbody td .text-muted,
body.primary-bg-color #main-body table.dataTable tbody td small { font-size: .78rem; display: inline-block; line-height: 1.2; }
/* fiyat/tutar hücresi dar sütunda "₺0,00 TRY" parçalanmasın */
body.primary-bg-color #main-body table.dataTable tbody td[data-order],
body.primary-bg-color #main-body table.dataTable tbody td.text-center { white-space: nowrap; }
/* P16) DOMAINDETAILS — "Bu gün hangi işlem" düz liste yerine ikonlu aksiyon kartları + overview info-grid */
body.primary-bg-color #main-body .hg-dd-actions {
display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: .7rem; margin-top: .5rem;
}
body.primary-bg-color #main-body .hg-dd-action {
display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem;
background: var(--mo-surface); border: 1px solid var(--mo-line); border-radius: var(--mo-radius);
text-decoration: none !important; color: var(--mo-ink); font-weight: 600; font-size: .9rem;
transition: border-color .15s, box-shadow .15s, transform .15s; cursor: pointer;
}
body.primary-bg-color #main-body .hg-dd-action:hover {
border-color: var(--mo-purple); box-shadow: var(--mo-shadow); transform: translateY(-1px); color: var(--mo-ink);
}
body.primary-bg-color #main-body .hg-dd-action__ico {
width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--mo-tint); color: var(--mo-purple); font-size: 1rem;
}
body.primary-bg-color #main-body .hg-dd-action__txt { flex: 1 1 auto; }
body.primary-bg-color #main-body .hg-dd-action__arrow { color: var(--mo-muted); font-size: .78rem; }
body.primary-bg-color #main-body .hg-dd-action:hover .hg-dd-action__arrow { color: var(--mo-purple); }
/* overview key/value — KOMPAKT+MİNİMAL info-grid: her alan ayrı kutu, etiket küçük üstte, değer altta */
body.primary-bg-color #main-body #tabOverview .card-body { padding: 1.25rem 1.4rem !important; }
body.primary-bg-color #main-body #tabOverview .row.mb-3 { margin: 0 !important; }
body.primary-bg-color #main-body #tabOverview .row.mb-3 + .row { margin-top: 0; }
body.primary-bg-color #main-body #tabOverview .row.mb-3 > [class*="col-"] {
display: flex; flex-direction: column; gap: .15rem;
padding: .65rem .9rem; margin: 0;
border: 1px solid var(--mo-line-soft); border-radius: 10px; background: var(--mo-bg);
margin-bottom: .55rem !important;
}
body.primary-bg-color #main-body #tabOverview .row.mb-3 > .col-lg-6 { flex: 0 0 calc(50% - .35rem); max-width: calc(50% - .35rem); }
body.primary-bg-color #main-body #tabOverview .row.mb-3 { display: flex; flex-wrap: wrap; gap: 0 .7rem; }
body.primary-bg-color #main-body #tabOverview .row.mb-3 > [class*="col-"] span,
body.primary-bg-color #main-body #tabOverview .row.mb-3 > [class*="col-"] > a { font-size: .92rem; color: var(--mo-ink); font-weight: 600; }
body.primary-bg-color #main-body #tabOverview h5 { margin: 0 !important; }
/* ============================================================
P17) VIEWINVOICE — kompakt + modern kart + ödeme butonları
============================================================ */
body.hg-invoice-page #main-body { padding-bottom: 1.5rem; }
body.hg-invoice-page .invoice-container {
max-width: 940px; margin: 1.25rem auto 0; background: var(--mo-surface);
border: 1px solid var(--mo-line); border-radius: var(--mo-radius);
box-shadow: var(--mo-shadow); padding: 1.75rem 2rem !important;
}
/* logo + başlık kompakt */
body.hg-invoice-page .invoice-header img { max-height: 48px; width: auto; }
body.hg-invoice-page .invoice-header h2 { font-size: 1.4rem; }
body.hg-invoice-page .invoice-header h3 { font-size: 1rem; color: var(--mo-muted); font-weight: 600; margin: .25rem 0 0; }
/* durum rozeti */
body.hg-invoice-page .invoice-status > span { font-size: 1.2rem; font-weight: 800; letter-spacing: .01em; }
body.hg-invoice-page .invoice-status .unpaid, body.hg-invoice-page .invoice-status .draft,
body.hg-invoice-page .invoice-status .cancelled, body.hg-invoice-page .invoice-status .collections { color: #dc2626; }
body.hg-invoice-page .invoice-status .paid { color: #16a34a; }
body.hg-invoice-page .invoice-status .refunded { color: var(--mo-muted); }
/* Ödeme Yap butonu — belirgin marka CTA */
body.hg-invoice-page .payment-btn-container { margin-top: .65rem; }
body.hg-invoice-page .payment-btn-container .btn,
body.hg-invoice-page .payment-btn-container input[type="submit"],
body.hg-invoice-page .payment-btn-container button[type="submit"],
body.hg-invoice-page .payment-btn-container button {
background: var(--mo-purple) !important; border-color: var(--mo-purple) !important; color: #fff !important;
font-weight: 700 !important; padding: .6rem 1.7rem !important; border-radius: 10px !important; font-size: 1rem !important;
box-shadow: 0 8px 20px -6px rgba(118,16,152,.5); display: inline-flex; align-items: center; gap: .5rem;
}
body.hg-invoice-page .payment-btn-container .btn:hover,
body.hg-invoice-page .payment-btn-container input[type="submit"]:hover { background: var(--mo-purple-dark) !important; }
/* ödeme yöntemi select (kredi kartı / crypto) */
body.hg-invoice-page select.custom-select, body.hg-invoice-page select.form-control {
border-radius: 9px !important; padding: .5rem .85rem !important; border: 1px solid var(--mo-line) !important;
font-weight: 600; min-width: 200px; background-color: #fff;
}
/* satır kalemleri kartı kompakt + temiz */
body.hg-invoice-page .invoice-container .card { border: 1px solid var(--mo-line); border-radius: var(--mo-radius); box-shadow: none; margin-bottom: 1rem; }
body.hg-invoice-page .invoice-container .card-header { background: var(--mo-bg); border-bottom: 1px solid var(--mo-line); padding: .75rem 1rem; }
body.hg-invoice-page .invoice-container .card-title { font-size: 1.02rem !important; margin: 0; }
body.hg-invoice-page .table-sm td { padding: .55rem .9rem; vertical-align: middle; }
body.hg-invoice-page .total-row { background: var(--mo-bg); }
body.hg-invoice-page .total-row.text-center, body.hg-invoice-page tr:last-child .total-row { font-weight: 700; }
/* alt aksiyon butonları (print/download/resmi fatura) */
body.hg-invoice-page .btn-group .btn { display: inline-flex; align-items: center; gap: .4rem; border-radius: 8px !important; }
body.hg-invoice-page .hg-official-invoice {
background: var(--mo-purple) !important; border-color: var(--mo-purple) !important; color: #fff !important;
font-weight: 600; display: inline-flex; align-items: center; gap: .45rem;
}
body.hg-invoice-page .hg-official-invoice:hover { background: var(--mo-purple-dark) !important; color: #fff !important; }
/* boşlukları azalt */
body.hg-invoice-page .invoice-container hr { margin: 1rem 0; border-color: var(--mo-line); }
body.hg-invoice-page address.small-text { line-height: 1.5; margin-bottom: .25rem; }