@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Onest:wght@400..700&family=JetBrains+Mono:wght@400;600;700&display=swap');

/* TürkHosting WHMCS teması — üretilen dosya, elle düzenlenmez. */

/* Fontlar — latin-ext alt kümesi Türkçe karakterler için zorunlu */

/* Tasarım token'ları — turkhosting-new/src/app/(frontend)/styles.css
   ile birebir aynı olmalı. Kaynak orası, burası kopya. */

:root {
  /* Marka kırmızısı — 500 logo ve ikonlarda, 600 buton/CTA'da */
  --th-brand-50: #fef2f2;
  --th-brand-100: #fee2e2;
  --th-brand-200: #fecaca;
  --th-brand-300: #fca5a5;
  --th-brand-400: #f87171;
  --th-brand-500: #ef4444;
  --th-brand-600: #dc2626;
  --th-brand-700: #b91c1c;
  --th-brand-800: #991b1b;
  --th-brand-900: #7f1d1d;
  --th-brand-950: #450a0a;

  /* Nötr paleti — Tailwind gray ile aynı */
  --th-gray-50: #f9fafb;
  --th-gray-100: #f3f4f6;
  --th-gray-200: #e5e7eb;
  --th-gray-300: #d1d5db;
  --th-gray-400: #9ca3af;
  --th-gray-500: #6b7280;
  --th-gray-600: #4b5563;
  --th-gray-700: #374151;
  --th-gray-800: #1f2937;
  --th-gray-900: #111827;
  --th-gray-950: #030712;

  /* Durum renkleri — sürüm tablosu rozetleriyle aynı mantık:
     yeşil olumlu, gri nötr. Marka kırmızısı yalnızca hata için. */
  --th-success: #059669;
  --th-success-bg: #ecfdf5;
  --th-warning: #d97706;
  --th-warning-bg: #fffbeb;
  --th-danger: #dc2626;
  --th-danger-bg: #fef2f2;

  /* Tipografi — Outfit başlıklarda, Onest gövde metninde.
     WHMCS'te next/font yok; fontlar includes/head.tpl içinde yüklenir. */
  --th-font-sans: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --th-font-display: 'Outfit', 'Onest', system-ui, sans-serif;
  --th-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Yüzey ve kenarlıklar */
  --th-surface: #ffffff;
  --th-surface-muted: var(--th-gray-50);
  --th-border: var(--th-gray-200);

  /* Sayfa zemini — turkhosting-new styles.css ile birebir.
     Panelde gövde zemini kart yüzeyinden AYRI tutulur: WHMCS sayfaları
     kart yığını olarak dizilir, düz beyaz zeminde kartların sınırı kaybolur. */
  --th-body-bg: #ffffff;
  --th-body-text: var(--th-gray-700);

  --th-radius: 0.75rem;
  --th-radius-lg: 1rem;
  --th-radius-full: 9999px;
}

/* Gece modu — site ThemeToggle ile .dark sınıfı kullanıyor.
   WHMCS tarafında aynı sınıf adı korunur ki mantık ortak kalsın. */
.dark {
  --th-surface: var(--th-gray-900);
  --th-surface-muted: rgba(255, 255, 255, 0.04);
  --th-border: rgba(255, 255, 255, 0.1);
  --th-success-bg: rgba(5, 150, 105, 0.1);
  --th-warning-bg: rgba(217, 119, 6, 0.1);
  --th-danger-bg: rgba(220, 38, 38, 0.1);

  /* Gece zemini siteyle aynı: gray-950 (#030712) değil #05070b.
     Site bilinçli olarak biraz daha koyu bir ton kullanıyor. */
  --th-body-bg: #05070b;
  --th-body-text: var(--th-gray-400);
}

body {
  font-family: var(--th-font-sans);
  background: var(--th-body-bg);
  color: var(--th-body-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  font-family: var(--th-font-display);
  letter-spacing: -0.02em;
  color: var(--th-gray-900);
}

.dark h1,
.dark h2,
.dark h3,
.dark h4 {
  color: var(--th-gray-50);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Bileşen stilleri — token'ları six'in Bootstrap 3 işaretlemesine uygular.
   !important kullanılmadı ki eklentiler hâlâ ezebilsin. */

/* ── Kök yazı boyutu ──
   Bootstrap 3 html{font-size:10px} tanımlıyor. Bu temadaki rem değerleri
   kurumsal sitenin Tailwind ölçülerinden (1rem = 16px) çevrildi; 10px
   kökte hepsi %62,5 küçük çıkıyordu — 80rem'lik kap 800px kalıyor, sayfa
   siteye göre dar görünüyordu. Six ve sipariş formu CSS'i rem'i yalnızca
   birkaç yerde kullanıyor (küçük boşluklar), etkisi önemsiz.
   :root ön eki six'in html kuralını yükleme sırasından bağımsız ezer. */
html:root {
  font-size: 16px;
}

/* ── Sayfa genişliği ──
   Bootstrap'in .container'ı sabit genişlikli (1170 / 970 / 750px).
   Kurumsal site akışkan ve en fazla 1280px (max-w-7xl + px-4/6/8);
   üst kısım (.th-wrap) ile gövde aynı hizada dursun diye gövde kabı da
   aynı kurala çekilir. */
body #main-body > .container {
  width: 100%;
  max-width: 80rem;
  padding-inline: 1rem;
}

@media (min-width: 640px) { body #main-body > .container { padding-inline: 1.5rem; } }
@media (min-width: 1280px) { body #main-body > .container { padding-inline: 2rem; } }

/* ═════════ Üst kısım ve alt bilgi ═════════
   Kurumsal sitedeki Header.tsx ve Footer.tsx'in karşılığı. Değerler
   Tailwind sınıflarından çevrildi (max-w-7xl = 80rem, h-10, h-[76px]…);
   sitede değişen bir ölçü burada da değişmeli.

   Kendi th-* sınıfları var, six/Bootstrap sınıfı kullanılmıyor: six'in
   .navbar kuralları ezilmek zorunda kalınmasın. */

.th-wrap {
  max-width: 80rem;
  margin: 0 auto;
  padding-inline: 1rem;
}

@media (min-width: 640px) { .th-wrap { padding-inline: 1.5rem; } }
@media (min-width: 1280px) { .th-wrap { padding-inline: 2rem; } }

#th-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

#th-header svg { flex-shrink: 0; }

/* Üst şerit */
.th-topbar {
  background: var(--th-gray-950);
  color: #fff;
  font-size: 13px;
}

.th-topbar .th-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 2.5rem;
}

.th-topbar-r {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.th-tl {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: #fff;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 0.15s;
}

.th-tl:hover,
.th-tl:focus {
  color: #fff;
  opacity: 0.7;
  text-decoration: none;
}

.th-sep {
  width: 1px;
  height: 0.875rem;
  background: rgba(255, 255, 255, 0.25);
}

/* Sol bağlantılar 640px'te, telefon ve e-posta 1024px'te açılır —
   sitede 768–1023px arasında satır taşıyordu (turkhosting-new#52) */
.th-tl-l { display: none; }
.th-tl-c { display: none; }
@media (min-width: 640px) { .th-tl-l { display: inline-flex; } span.th-tl-l { display: block; } }
@media (min-width: 1024px) { .th-tl-c { display: inline-flex; } span.th-tl-c { display: block; } }

/* Ana bar */
.th-mainbar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(229, 231, 235, 0.7);
}

.th-mainbar-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 76px;
}

@media (min-width: 1024px) { .th-mainbar-row { gap: 1.5rem; } }
@media (min-width: 1280px) { .th-mainbar-row { gap: 2rem; } }

.th-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.th-logo img {
  height: 2.25rem;
  width: auto;
  max-width: none;
}

.th-logo-text {
  font-family: var(--th-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--th-gray-900);
}

.th-logo-text span { color: var(--th-brand-500); }

@media (max-width: 639px) {
  .th-mainbar-row { height: 64px; }
  .th-logo img { height: 1.75rem; }
}

/* Masaüstü menü — sitede xl (1280px) altında gizli, mobil menü devreye girer */
.th-nav {
  display: none;
  flex: 1;
  justify-content: center;
}

@media (min-width: 1280px) { .th-nav { display: flex; } }

.th-nav-list {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.th-nav-list > li { position: relative; }

.th-nav-a {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 15px;
  font-weight: 500;
  color: var(--th-gray-700);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.th-nav-a:hover,
.th-nav-a:focus,
.th-nav-cat:hover > .th-nav-a,
.th-nav-cat:focus-within > .th-nav-a {
  background: var(--th-gray-100);
  color: var(--th-gray-900);
  text-decoration: none;
}

.th-chev {
  color: var(--th-gray-400);
  transition: transform 0.2s;
}

.th-nav-cat:hover .th-chev,
.th-nav-cat:focus-within .th-chev { transform: rotate(180deg); }

/* Açılır panel — CSS-only, sitedeki gibi hover ve klavye odağıyla */
.th-dd {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 1.5rem;
  visibility: hidden;
  opacity: 0;
  transform: translateY(0.25rem);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.th-dd-r { left: auto; right: 0; }

.th-nav-cat:hover .th-dd,
.th-nav-cat:focus-within .th-dd {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.th-dd-in {
  width: 18rem;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid var(--th-gray-100);
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(3, 7, 18, 0.12);
}

.th-dd-a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.75rem;
  text-decoration: none;
  transition: background-color 0.15s;
}

.th-dd-a:hover,
.th-dd-a:focus {
  background: var(--th-gray-50);
  text-decoration: none;
}

.th-dd-l {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.th-dd-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: var(--th-brand-50);
  color: var(--th-brand-500);
  flex-shrink: 0;
}

.th-dd-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--th-gray-800);
}

.th-new {
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: var(--th-brand-50);
  color: var(--th-brand-600);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.th-dd-foot {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--th-gray-100);
}

.th-dd-all {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.75rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--th-brand-600);
  text-decoration: none;
}

.th-dd-all:hover,
.th-dd-all:focus {
  background: var(--th-brand-50);
  color: var(--th-brand-600);
  text-decoration: none;
}

/* Sağ taraf: sepet, bildirim, hesap, mobil menü */
.th-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.th-iconbtn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--th-gray-200);
  border-radius: 0.625rem;
  background: #fff;
  color: var(--th-gray-700);
  cursor: pointer;
  list-style: none;
  transition: border-color 0.15s, color 0.15s;
}

.th-iconbtn::-webkit-details-marker { display: none; }

.th-iconbtn:hover,
.th-iconbtn:focus {
  border-color: var(--th-brand-200);
  color: var(--th-brand-600);
  text-decoration: none;
}

/* Yönetici olarak giriş — turuncu: kırmızı yalnızca hata için (CLAUDE.md) */
.th-admin {
  border-color: rgba(217, 119, 6, 0.4);
  color: var(--th-warning);
}

/* Okunmuş bildirim rozeti hidden ile gizlenir (js/th-alerts.js, #70);
   ileride .th-count'a display eklenirse sessizce bozulmasın */
.th-count[hidden] { display: none; }

.th-count {
  position: absolute;
  top: -0.375rem;
  right: -0.375rem;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.3125rem;
  border-radius: 9999px;
  background: var(--th-brand-600);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.125rem;
  text-align: center;
}

.th-cta {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  border-radius: 0.5rem;
  background: var(--th-brand-600);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.25);
  transition: background-color 0.15s;
}

.th-cta:hover,
.th-cta:focus {
  background: var(--th-brand-700);
  color: #fff;
  text-decoration: none;
}

@media (min-width: 640px) { .th-actions > .th-cta { display: inline-flex; } }

.th-cta-block {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
}

/* Açılır kutular (bildirim, hesap) — native details */
.th-pop { position: relative; }

.th-pop > summary { list-style: none; }
.th-pop > summary::-webkit-details-marker { display: none; }

.th-pop-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.625rem);
  z-index: 60;
  min-width: 14rem;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid var(--th-gray-100);
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(3, 7, 18, 0.15);
}

.th-pop-panel a {
  display: block;
  padding: 0.625rem 0.875rem;
  border-radius: 0.625rem;
  font-size: 14px;
  color: var(--th-gray-700);
  text-decoration: none;
}

.th-pop-panel a:hover,
.th-pop-panel a:focus {
  background: var(--th-gray-50);
  color: var(--th-gray-900);
  text-decoration: none;
}

.th-pop-panel .th-pop-danger {
  margin-top: 0.25rem;
  border-top: 1px solid var(--th-gray-100);
  border-radius: 0 0 0.625rem 0.625rem;
  color: var(--th-gray-600);
}

.th-alerts { min-width: 18rem; max-width: 22rem; }

/* Önem şeridi kenarlık DEĞİL, ayrı bir çubuk: .th-pop-panel a köşeleri
   yuvarlak (0.625rem), sol kenarlık o köşelerde kıvrılıp parantez gibi
   bir kavis çiziyordu. Çubuk kendi ucu yuvarlak, metinle aynı yükseklikte. */
.th-alerts { display: grid; gap: 0.25rem; }
/* .th-pop-panel a'nın sol iç boşluğunu ezmek için iki sınıflı seçici */
.th-pop-panel .th-alert {
  position: relative;
  padding-left: 1.5rem;
  line-height: 1.55;
}
.th-alert::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 3px;
  border-radius: 3px;
  background: var(--th-gray-300);
}
.th-alert-warning::before { background: var(--th-warning); }
.th-alert-danger::before { background: var(--th-danger); }
.th-alert-success::before { background: var(--th-success); }

/* js/th-alerts.js rakamları sarar: adet ve tutar metinden önce okunur */
.th-alert-num {
  font-weight: 600;
  color: var(--th-gray-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.th-user-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  border: 1px solid var(--th-gray-200);
  border-radius: 9999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--th-gray-800);
  white-space: nowrap;
}

.th-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: var(--th-brand-100);
  color: var(--th-brand-700);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .th-user-name,
  .th-user-btn .th-chev { display: none; }
  .th-user-btn { padding: 0.125rem; }
}

/* Dar telefon: giriş yapmış kullanıcıda sepet + bildirim + hesap + menü
   düğmeleri logoyla birlikte 390px'e sığmıyor, sayfa 5px yana kayıyordu */
/* Mobilde üst şerit kalkar: bağlantıları zaten gizli, giriş yapmış
   kullanıcıda boş siyah bant kalıyordu. Giriş Yap / Kayıt Ol mobil
   menüde de var. */
@media (max-width: 639px) {
  .th-topbar { display: none; }
}

@media (max-width: 479px) {
  .th-mainbar-row { gap: 0.5rem; }
  .th-actions { gap: 0.375rem; }
  .th-iconbtn { width: 2.25rem; height: 2.25rem; }
  .th-logo img { height: 1.5rem; }
}

/* Mobil menü */
.th-mobile { display: block; }
@media (min-width: 1280px) { .th-mobile { display: none; } }

.th-mobile > summary { list-style: none; }
.th-mobile > summary::-webkit-details-marker { display: none; }

.th-burger span {
  position: relative;
  display: block;
  width: 19px;
  height: 15px;
}

.th-burger i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 9999px;
  background: currentColor;
  transition: transform 0.3s, opacity 0.2s;
}

.th-burger i:nth-child(1) { top: 0; }
.th-burger i:nth-child(2) { top: 6.5px; }
.th-burger i:nth-child(3) { top: 13px; }
.th-mobile[open] .th-burger i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.th-mobile[open] .th-burger i:nth-child(2) { opacity: 0; }
.th-mobile[open] .th-burger i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.th-mobile-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 50;
  max-height: 80dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.75rem 1rem 2rem;
  background: #fff;
  border-top: 1px solid var(--th-gray-100);
  box-shadow: 0 25px 50px -12px rgba(3, 7, 18, 0.2);
}

.th-m-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 15px;
  font-weight: 700;
  color: var(--th-gray-900);
  cursor: pointer;
  list-style: none;
  text-decoration: none;
}

.th-m-top::-webkit-details-marker { display: none; }

.th-m-top:hover,
.th-m-top:focus {
  background: var(--th-gray-50);
  color: var(--th-gray-900);
  text-decoration: none;
}

.th-m-cat { border-top: 1px solid var(--th-gray-100); }
.th-m-cat[open] .th-chev { transform: rotate(180deg); }

.th-m-subs {
  margin: 0 0 0.5rem 0.75rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--th-gray-200);
}

.th-m-all,
.th-m-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 14px;
  color: var(--th-gray-600);
  text-decoration: none;
}

.th-m-all { font-weight: 600; color: var(--th-brand-600); }

.th-m-account {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--th-gray-100);
}

.th-m-btn {
  display: block;
  padding: 0.625rem 1rem;
  border: 1px solid var(--th-gray-200);
  border-radius: 0.75rem;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--th-gray-700);
  text-decoration: none;
}

/* Müşteri paneli menüsü */
.th-subnav {
  background: #fff;
  border-bottom: 1px solid var(--th-gray-200);
}

.th-subnav-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: 3rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.th-subnav-row::-webkit-scrollbar { display: none; }

.th-subnav-row a {
  padding: 0.4375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 14px;
  font-weight: 500;
  color: var(--th-gray-600);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.th-subnav-row a:hover,
.th-subnav-row a:focus {
  background: var(--th-gray-100);
  color: var(--th-gray-900);
  text-decoration: none;
}

.th-subnav-row a.on {
  background: var(--th-brand-50);
  color: var(--th-brand-600);
  font-weight: 600;
}

/* Alt bilgi */
#th-footer {
  background: var(--th-gray-950);
  color: var(--th-gray-400);
  font-size: 14px;
}

.th-footer-grid {
  display: grid;
  gap: 2.5rem;
  padding-block: 4rem 3rem;
}

@media (min-width: 1024px) {
  .th-footer-grid { grid-template-columns: 1.1fr 3fr; gap: 3rem; }
}

.th-fbrand img {
  height: 2.25rem;
  width: auto;
}

.th-fslogan {
  margin: 1.25rem 0 0.5rem;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.th-fdesc {
  margin: 0;
  max-width: 22rem;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--th-gray-500);
}

.th-fcols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1.5rem;
}

@media (min-width: 768px) { .th-fcols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.th-fcol h5 {
  margin: 0 0 1rem;
  font-family: var(--th-font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--th-gray-500);
}

.th-fcol h5 a { color: inherit; text-decoration: none; }

.th-fcol ul {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.th-fcol a {
  color: var(--th-gray-300);
  text-decoration: none;
  transition: color 0.15s;
}

.th-fcol a:hover,
.th-fcol a:focus {
  color: #fff;
  text-decoration: none;
}

.th-fbase { border-top: 1px solid rgba(255, 255, 255, 0.08); }

.th-fbase-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-block: 1.25rem;
  font-size: 13px;
  color: var(--th-gray-500);
}

/* Yukarı çık — site BackToTop.tsx: sağ altta sabit, yuvarlak */
#th-footer .back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--th-gray-200);
  border-radius: 9999px;
  background: #fff;
  color: var(--th-gray-600);
  box-shadow: 0 10px 15px -3px rgba(3, 7, 18, 0.1);
  transition: color 0.15s, border-color 0.15s;
}

#th-footer .back-to-top:hover,
#th-footer .back-to-top:focus {
  border-color: rgba(239, 68, 68, 0.4);
  color: var(--th-brand-600);
}

@media (min-width: 640px) {
  #th-footer .back-to-top { right: 1.5rem; bottom: 1.5rem; width: 3rem; height: 3rem; }
}

/* ── Rozet — six'in .badge'i gri; nötr tutulur, kırmızı yapılmaz ── */
.th-badge {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0.125rem 0.4375rem;
  border-radius: var(--th-radius-full);
  background: var(--th-gray-200);
  color: var(--th-gray-700);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.dark .th-badge {
  background: rgba(255, 255, 255, 0.12);
  color: var(--th-gray-200);
}

/* ── Kenar çubuğu ── */
.th-sidebar-panel {
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
  box-shadow: none;
  overflow: hidden;
}

.dark .th-sidebar-panel {
  background: var(--th-gray-900);
}

.th-sidebar-heading {
  background: transparent;
  border-bottom: 1px solid var(--th-border);
  padding: 0.875rem 1rem;
}

.th-sidebar-title {
  font-family: var(--th-font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--th-gray-900);
}

.dark .th-sidebar-title {
  color: var(--th-gray-50);
}

/* Panel başlık ikonu — nötr. Kırmızı ikon her kartta tekrarlanınca
   arayüz uyarı doluymuş gibi okunuyor. */
.th-sidebar-icon {
  margin-right: 0.5rem;
  color: var(--th-gray-400);
}

/* Katlama oku — küçük ve soluk, başlıkla yarışmaz */
.th-sidebar-heading .panel-minimise {
  font-size: 11px;
  color: var(--th-gray-400);
  cursor: pointer;
  margin-top: 0.1875rem;
  transition: transform 0.2s;
}

.th-sidebar-list {
  margin: 0;
}

.th-sidebar-link.list-group-item {
  border: 0;
  border-bottom: 1px solid var(--th-border);
  border-radius: 0;
  padding: 0.6875rem 1rem;
  background: transparent;
  font-size: 14px;
  color: var(--th-gray-700);
  transition: background-color 0.15s, color 0.15s;
}

.th-sidebar-link.list-group-item:last-child {
  border-bottom: 0;
}

.th-sidebar-link.list-group-item:hover {
  background: var(--th-surface-muted);
  color: var(--th-gray-900);
}

.dark .th-sidebar-link.list-group-item {
  color: var(--th-gray-300);
}

.dark .th-sidebar-link.list-group-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}

/* Aktif öğe — nötr zemin + sol kenarda marka çizgisi.
   Zemin kırmızı YAPILMAZ: bu bir gezinme işareti, uyarı değil. İnce
   kırmızı çizgi konumu belirtmeye yetiyor (site .rich-text alıntısıyla
   aynı dil). */
/* Seçici ağırlığı bilerek yüksek: six'in .panel-sidebar a.list-group-item.active
   kuralı (#465054 koyu antrasit zemin) daha özgüldü ve koyu zemin üstünde
   koyu yazı okunmuyordu. */
body .th-sidebar-list a.th-sidebar-link.list-group-item.active,
body .th-sidebar-list a.th-sidebar-link.list-group-item.active:hover,
body .th-sidebar-list a.th-sidebar-link.list-group-item.active:focus {
  background: var(--th-surface-muted);
  border-left: 3px solid var(--th-brand-500);
  padding-left: calc(1rem - 3px);
  color: var(--th-gray-900);
  font-weight: 600;
}

.dark .th-sidebar-link.list-group-item.active,
.dark .th-sidebar-link.list-group-item.active:hover,
.dark .th-sidebar-link.list-group-item.active:focus {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.th-sidebar-link.list-group-item.disabled,
.th-sidebar-link.list-group-item.disabled:hover {
  background: transparent;
  color: var(--th-gray-400);
  cursor: not-allowed;
}

.sidebar-menu-item-icon {
  display: inline-block;
  width: 1.25rem;
  margin-right: 0.625rem;
  text-align: center;
  color: var(--th-gray-400);
}

.th-sidebar-link.active .sidebar-menu-item-icon {
  color: var(--th-gray-600);
}

.th-sidebar-body,
.th-sidebar-footer {
  padding: 0.875rem 1rem;
  font-size: 13px;
  color: var(--th-gray-600);
  background: transparent;
}

.th-sidebar-footer {
  border-top: 1px solid var(--th-border);
}

.dark .th-sidebar-body,
.dark .th-sidebar-footer {
  color: var(--th-gray-400);
}

/* Kenar çubuğundaki rozetler sağa yaslanır (six davranışı) */
.th-sidebar-link .th-badge {
  float: right;
  margin-left: 0.5rem;
}

/* ── Ana gövde ──
   six bu boşluğu kendi custom.css'inde veriyor; çocuk temada ebeveynin
   custom.css'i yüklenmediği için burada kurulur. Yoksa içerik menü
   çubuğuna yapışıyor. */
/* six: #main-body{background-color:#fff;padding:20px 0} */
body #main-body {
  background-color: var(--th-surface-muted);
  padding-top: 2rem;
  padding-bottom: 4rem;
}

/* Kısa sayfalarda (bilgi bankası, iletişim) sayfa altı ekranın ortasında
   kalıyor, altında beyaz boşluk açılıyordu. Gövde kalan yüksekliği
   doldurur, sayfa altı ekranın dibine iner. Body zemini de gövdeyle
   aynı yapılır ki geçişte renk farkı kalmasın. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--th-surface-muted);
}

body > #main-body {
  flex: 1 0 auto;
}

.dark body #main-body {
  background-color: var(--th-body-bg);
}

/* ── Sayfa başlığı (pageheader.tpl — ezilmedi, CSS yetiyor) ── */
.header-lined {
  border-bottom: 1px solid var(--th-border);
  padding-bottom: 0.875rem;
  margin-bottom: 1.5rem;
}

.header-lined h1 {
  font-size: 26px;
  font-weight: 600;
  margin: 0;
}

.header-lined h1 small {
  display: block;
  margin-top: 0.375rem;
  font-family: var(--th-font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--th-gray-500);
}

.breadcrumb {
  background: transparent;
  padding: 0.5rem 0 0;
  margin: 0;
  font-size: 13px;
  color: var(--th-gray-500);
}

.breadcrumb > li + li:before {
  content: '/';
  color: var(--th-gray-300);
}

.breadcrumb a {
  color: var(--th-gray-500);
}

.breadcrumb a:hover {
  color: var(--th-brand-600);
}

/* ── Kartlar (panel.tpl — ezilmedi) ──
   ⚠ six/all.min.css .panel-primary{border-color:#337ab7} gibi kuralları
   AYNI özgüllükte tanımlıyor (mavi/turuncu/yeşil çerçeveler oradan).
   body ön ekiyle ağırlık artırılıyor. */
body .panel {
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background-color: var(--th-surface);
  box-shadow: none;
}

/* Renkli varyantların çerçevesi nötrlenir — WHMCS bunları "aktif
   hizmetler", "duyurular" gibi bloklarda kullanıyor, uyarı değiller */
body .panel-primary,
body .panel-info,
body .panel-success,
body .panel-warning,
body .panel-danger,
body .panel-default {
  border-color: var(--th-border);
}

body .panel-primary > .panel-heading,
body .panel-info > .panel-heading,
body .panel-default > .panel-heading {
  background-color: var(--th-surface-muted);
  border-color: var(--th-border);
  color: var(--th-gray-900);
}

body .panel-footer {
  background-color: var(--th-surface-muted);
  border-top-color: var(--th-border);
}

.dark .panel {
  background: var(--th-gray-900);
}

body .panel > .panel-heading {
  border-bottom: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg) var(--th-radius-lg) 0 0;
  padding: 0.875rem 1.125rem;
}

body .panel .panel-title {
  font-family: var(--th-font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--th-gray-900);
}

/* WHMCS panel başlıklarına ikon gömüyor (<i> + metin, arada boşluk yok).
   İkon bazen doğrudan .panel-title içinde, bazen <strong> sarmalında —
   ikisi de yakalanır. */
.panel .panel-title i,
.panel .panel-title strong > i {
  margin-right: 0.5rem;
  color: var(--th-gray-400);
}

/* Katlama oku sağda duruyor, sol boşluk almamalı */
.panel .panel-title i.panel-minimise {
  margin-right: 0;
}

.dark .panel .panel-title {
  color: var(--th-gray-50);
}

.panel > .panel-body {
  padding: 1.125rem;
}

.panel > .panel-footer {
  background: var(--th-surface-muted);
  border-top: 1px solid var(--th-border);
  border-radius: 0 0 var(--th-radius-lg) var(--th-radius-lg);
  padding: 0.875rem 1.125rem;
}

/* Renkli panel varyantları — six panel-{$type} basıyor.
   panel-primary NÖTR bırakılır: WHMCS bunu "aktif hizmetler", "duyurular"
   gibi olumlu/nötr bloklarda kullanıyor. Marka kırmızısı arayüzde uyarı
   rengi olarak okunuyor (CLAUDE.md) — yalnızca panel-danger'da. */
.panel-primary > .panel-heading {
  background: var(--th-surface-muted);
  color: var(--th-gray-900);
}

.dark .panel-primary > .panel-heading {
  background: rgba(255, 255, 255, 0.04);
  color: var(--th-gray-50);
}

.panel-success > .panel-heading {
  background: var(--th-success-bg);
  color: var(--th-success);
}

.panel-warning > .panel-heading {
  background: var(--th-warning-bg);
  color: var(--th-warning);
}

.panel-danger > .panel-heading {
  background: var(--th-danger-bg);
  color: var(--th-danger);
}

/* ── Uyarı kutuları (alert.tpl — ezilmedi) ── */
.alert {
  border: 1px solid transparent;
  border-radius: var(--th-radius);
  padding: 0.875rem 1.125rem;
  font-size: 14px;
}

.alert h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 0.375rem;
  color: inherit;
}

.alert ul {
  margin: 0.375rem 0 0;
  padding-left: 1.25rem;
}

/* Durum renkleri CLAUDE.md tablosundan — yeşil olumlu, kırmızı YALNIZCA hata */
.alert-success {
  background: var(--th-success-bg);
  border-color: rgba(5, 150, 105, 0.25);
  color: var(--th-success);
}

.alert-info {
  background: var(--th-gray-50);
  border-color: var(--th-gray-200);
  color: var(--th-gray-700);
}

.dark .alert-info {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--th-gray-300);
}

.alert-warning {
  background: var(--th-warning-bg);
  border-color: rgba(217, 119, 6, 0.25);
  color: var(--th-warning);
}

.alert-danger {
  background: var(--th-danger-bg);
  border-color: rgba(220, 38, 38, 0.25);
  color: var(--th-danger);
}

/* ── Düğmeler ──
   ⚠ six .btn-primary{#337ab7} ve .btn-success{#5cb85c} tanımlarını AYNI
   özgüllükte yapıyor; body ön eki olmadan mavi/yeşil kalıyorlar. */
.btn {
  border-radius: var(--th-radius);
  font-size: 14px;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  transition: background-color 0.15s, border-color 0.15s;
}

body .btn-primary {
  background-color: var(--th-brand-600);
  background-image: none;
  border-color: var(--th-brand-600);
  color: #fff;
}

body .btn-primary:hover,
body .btn-primary:focus,
body .btn-primary:active {
  background-color: var(--th-brand-700);
  border-color: var(--th-brand-700);
  color: #fff;
}

body .btn-default {
  background-color: var(--th-surface);
  background-image: none;
  border-color: var(--th-border);
  color: var(--th-gray-700);
}

body .btn-default:hover,
body .btn-default:focus {
  background-color: var(--th-surface-muted);
  border-color: var(--th-gray-300);
  color: var(--th-gray-900);
}

.dark .btn-default {
  background: transparent;
  color: var(--th-gray-300);
}

.dark .btn-default:hover,
.dark .btn-default:focus {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

/* Sidebar "Güncelle" düğmesi six'te .btn-success ile yeşil geliyor.
   Marka CTA'sı olması gerektiği için kırmızıya alınıyor — panelde
   birincil eylem düğmesi bu. */
body .btn-success {
  background-color: var(--th-brand-600);
  background-image: none;
  border-color: var(--th-brand-600);
}

body .btn-success:hover,
body .btn-success:focus {
  background-color: var(--th-brand-700);
  border-color: var(--th-brand-700);
}

body .btn-danger {
  background-color: var(--th-danger);
  background-image: none;
  border-color: var(--th-danger);
}

/* ── Tablolar (tablelist.tpl EZİLMEDİ — saf DataTables yapılandırması,
      görsel işaretleme içermiyor; stil DataTables'ın çıktısına uygulanır) ── */
.table {
  font-size: 14px;
}

.table > thead > tr > th {
  border-bottom: 1px solid var(--th-border);
  background: var(--th-surface-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--th-gray-500);
  padding: 0.625rem 0.875rem;
}

.table > tbody > tr > td {
  border-top: 1px solid var(--th-border);
  padding: 0.75rem 0.875rem;
  vertical-align: middle;
}

.table-hover > tbody > tr:hover {
  background: var(--th-surface-muted);
}

.dark .table > tbody > tr > td {
  color: var(--th-gray-300);
}

/* DataTables denetimleri */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius);
  padding: 0.375rem 0.625rem;
  background: var(--th-surface);
  color: var(--th-gray-800);
  font-size: 14px;
}

.dark .dataTables_wrapper .dataTables_filter input,
.dark .dataTables_wrapper .dataTables_length select {
  background: var(--th-gray-900);
  color: var(--th-gray-100);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  font-size: 13px;
  color: var(--th-gray-500);
}

.pagination > li > a,
.pagination > li > span {
  border-color: var(--th-border);
  color: var(--th-gray-700);
  background: var(--th-surface);
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
  background: var(--th-brand-600);
  border-color: var(--th-brand-600);
  color: #fff;
}

.dark .pagination > li > a,
.dark .pagination > li > span {
  background: var(--th-gray-900);
  color: var(--th-gray-300);
}

/* Durum etiketleri — WHMCS .label sınıfları.
   Marka kırmızısı olumlu durumda KULLANILMAZ (CLAUDE.md). */
.label {
  border-radius: var(--th-radius-full);
  padding: 0.2em 0.6em;
  font-size: 11px;
  font-weight: 700;
}

.label-success { background: var(--th-success); }
.label-warning { background: var(--th-warning); }
.label-danger { background: var(--th-danger); }
.label-info { background: var(--th-gray-500); }
.label-default { background: var(--th-gray-400); }

/* ── Modal (footer.tpl'deki #modalAjax) ── */
.modal-content {
  border: 0;
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
  box-shadow: 0 25px 50px -12px rgba(3, 7, 18, 0.35);
}

.dark .modal-content {
  background: var(--th-gray-900);
}

.modal-title {
  font-family: var(--th-font-display);
  font-size: 17px;
  font-weight: 600;
}

/* ── Form denetimleri ── */
.form-control {
  height: auto;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius);
  background: var(--th-surface);
  color: var(--th-gray-800);
  font-size: 14px;
  box-shadow: none;
}

.form-control:focus {
  border-color: var(--th-brand-400);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
  outline: 0;
}

.dark .form-control {
  background: var(--th-gray-900);
  color: var(--th-gray-100);
}

.th-select.form-control {
  height: auto;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius);
  background: var(--th-surface);
  color: var(--th-gray-800);
  font-size: 14px;
  box-shadow: none;
}

.dark .th-select.form-control {
  background: var(--th-gray-900);
  color: var(--th-gray-100);
}

.th-select.form-control:focus {
  border-color: var(--th-brand-400);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
  outline: 0;
}

/* Açılır listelerin oku: tarayıcının kendi oku (appearance: auto) sağ
   kenara yapışık çiziliyordu, metin ise 0.75rem içeriden başlıyor —
   iki yan eşit görünmüyordu. Ok kendimiz çiziliyor ve sağdan, metnin
   soldaki boşluğuyla aynı uzaklıkta (0.75rem) duruyor. Çoklu seçimli
   ve satır sayısı verilmiş listeler kutu olarak kalır. */
select.form-control:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}

/* ── Giriş / kayıt sayfaları ──
   Referans: turkhosting-register-login-form/login.html
   Solda form, sağda koyu tanıtım paneli. */
.th-auth {
  display: flex;
  min-height: 100vh;
  margin: 0;
}

/* Form bölmesi */
.th-auth-form {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  background: var(--th-surface-muted);
}

.th-auth-inner {
  width: 100%;
  max-width: 27rem;
}

/* Form alanları arası nefes — Bootstrap'in varsayılanı bu tasarım için dar */
.th-auth-inner .form-group {
  margin-bottom: 1.25rem;
}

.th-auth-inner .form-control {
  padding: 0.6875rem 0.875rem;
}

.th-auth-inner .checkbox {
  margin-top: 1rem;
}

.th-auth-head {
  margin-bottom: 2rem;
}

.th-auth-head h1 {
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.th-auth-head p {
  margin: 0;
  color: var(--th-gray-500);
}

/* Etiket satırı — "Şifre" solda, "Şifremi Unuttum" sağda */
.th-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.th-label-row label {
  margin: 0;
}

.th-auth-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--th-brand-600);
}

.th-auth-link:hover {
  color: var(--th-brand-700);
}

.th-auth-submit.btn {
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  font-size: 15px;
}

body .th-auth-alt {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 14px;
  color: var(--th-gray-500);
}

.th-auth-alt a {
  font-weight: 600;
  color: var(--th-brand-600);
}

.th-auth-social {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--th-border);
}

/* Tanıtım paneli — mobilde gizli (form tam genişlik alır) */
.th-auth-aside {
  display: none;
  width: 50%;
  background: var(--th-gray-950);
  color: var(--th-gray-300);
}

@media (min-width: 992px) {
  .th-auth-aside {
    display: flex;
    align-items: flex-start;
    padding: 0 3rem;
  }

  /* İçerik ekrana sabit: kayıt formu uzun, aşağı kaydırınca panel boş
     görünüyordu. Panel formun boyu kadar uzar, metin ekranın ortasında
     kalır. */
  .th-auth-aside-inner {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    padding-block: 3rem;
  }
}

.th-auth-aside-inner {
  max-width: 34rem;
}

.th-auth-aside h2 {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 1.25rem;
}

.th-auth-aside h2 span {
  color: var(--th-brand-500);
}

.th-auth-aside > .th-auth-aside-inner > p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--th-gray-400);
  margin: 0;
}

/* İstatistikler — 2x2 ızgara */
.th-auth-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1.5rem;
  margin: 3rem 0 3.5rem;
}

.th-auth-stat strong {
  display: block;
  font-family: var(--th-font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
}

.th-auth-stat span {
  font-size: 14px;
  color: var(--th-gray-500);
}

/* Renkler sitenin paletinden: marka kırmızısının iki tonu + koyu gri +
   başarı yeşili (mor/mavi sitede yok, imajdan kopuyordu) */
.th-stat-hardware { color: var(--th-brand-600); }
.th-stat-location { color: #fff; } /* koyu panelde: koyu gri görünmüyordu */
.th-stat-support { color: var(--th-brand-400); }
.th-stat-ssl { color: var(--th-success); }

.th-auth-aside-foot {
  font-size: 13px;
  color: var(--th-gray-600);
  margin: 0;
}

/* Giriş/kayıt: siteye dönüş bağlantısı (header bu sayfalarda gizli) */
.th-auth-back {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--th-gray-500);
  text-decoration: none;
}

.th-auth-back:hover,
.th-auth-back:focus { color: var(--th-brand-600); text-decoration: none; }

/* Kayıt: hesap türü kartları */
.th-type {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 479px) { .th-type { grid-template-columns: 1fr; } }

.th-type-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  border: 1.5px solid var(--th-gray-200);
  border-radius: 0.875rem;
  background: var(--th-surface);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.th-type-card:hover { border-color: var(--th-brand-300); }

.th-type-card:focus-visible {
  outline: 2px solid var(--th-brand-500);
  outline-offset: 2px;
}

.th-type-card.on {
  border-color: var(--th-brand-600);
  background: var(--th-brand-50);
}

.th-type-card b {
  font-family: var(--th-font-display);
  font-size: 16px;
  color: var(--th-gray-900);
}

.th-type-card span {
  font-size: 13px;
  line-height: 1.45;
  color: var(--th-gray-500);
}

/* WHMCS'in formda kalması gereken ama gösterilmeyen alanları */
.th-hidden-field { display: none; }

.th-invalid-wrap .form-control { border-color: var(--th-danger); }

/* Açılır listeler: yazı alttan kesiliyordu ("Turkey", "TRY").
   Bootstrap 3 select.form-control'e sabit 34px yükseklik veriyor; tema
   dolgusu (16px kökle 8px + 8px) bu yüksekliğe sığmıyordu. Yükseklik
   sabit, dikey dolgu sıfır: yazı dikeyde ortalanır. */
/* six'in "#registration .form-control{height:36px}" kuralı kimlik
   ağırlığında; kayıt formundaki kutular ona takılıyordu */
body #registration input.form-control:not([type="checkbox"]):not([type="radio"]),
body #registration select.form-control {
  height: 2.75rem;
}

/* six'in .field kuralı köşeyi 3px yapıyordu: giriş formundaki kutularla
   aynı yarıçap */
body #registration .form-control { border-radius: var(--th-radius); }

body select.form-control,
body select.th-select.form-control,
body .th-auth-inner select.form-control {
  height: 2.75rem;
  padding-top: 0;
  padding-bottom: 0;
  line-height: normal;
}

/* Onay kutusu + metin aynı satırda, kutu metnin ilk satırıyla hizalı */
.th-check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--th-gray-700);
  cursor: pointer;
}

.th-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.125rem 0 0;
  accent-color: var(--th-brand-600);
}

.th-check a { color: var(--th-brand-600); font-weight: 600; }

.th-check-group { padding-top: 1.875rem; }

@media (max-width: 767px) { .th-check-group { padding-top: 0; } }

/* Ek bilgiler: iki sütunlu ızgara (float'lı sütunlar kayıyordu) */
.th-grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.25rem;
  margin-left: 0;
  margin-right: 0;
}

.th-grid2::before,
.th-grid2::after { display: none; }

.th-grid2 > [class*="col-"] {
  float: none;
  width: auto;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 575px) { .th-grid2 { grid-template-columns: 1fr; } }

/* Sunucu doğrulama hatası form sütununda */
.th-server-error { margin-bottom: 1.25rem; }
.th-server-error .alert { margin: 0; }

/* Düğme odak çerçevesi: tarayıcının mavi çift halkası yerine marka rengi,
   yalnızca klavyeyle odaklanınca */
body .btn:focus,
body .btn:active:focus {
  outline: none;
  box-shadow: none;
}

body .btn:focus-visible {
  outline: 2px solid var(--th-brand-500);
  outline-offset: 2px;
}

/* ── Kayıt sihirbazı ── */
/* x-cloak: Alpine yüklenene kadar tüm adımlar görünür olurdu */
[x-cloak] {
  display: none !important;
}

.th-register-inner {
  max-width: 34rem;
}

/* Dar sütunlarda etiketler ikiye bölünüyordu ("Posta Kodu").
   Küçültülerek tek satırda tutuluyor. */
body .th-register-inner .col-sm-3 label,
body .th-register-inner .col-sm-4 label,
body .th-register-inner .col-sm-5 label {
  font-size: 12px;
  white-space: nowrap;
}

/* Kayıt formunda alanlar tam genişlik kullanmalı; Bootstrap .row
   negatif margin'i th-auth-inner içinde taşmaya yol açıyordu */
.th-register-inner .row {
  margin-left: -10px;
  margin-right: -10px;
}

.th-register-inner .row > [class*='col-'] {
  padding-left: 10px;
  padding-right: 10px;
}

/* Adım göstergesi.
   ⚠ six/all.min.css .label ve li stillerini ID/sınıf seçicileriyle
   tanımlıyor; body ön eki ve line-height sıfırlaması gerekiyor,
   aksi hâlde numaralar dairenin içinde ortalanmıyor. */
body .th-steps {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

body .th-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--th-gray-400);
  white-space: nowrap;
}

/* Çizgi öğeyi doldurur — adımlar eşit aralıklı dağılır */
body .th-step:not(:last-child) {
  flex: 1;
}

body .th-step:not(:last-child)::after {
  content: '';
  flex: 1;
  min-width: 1.5rem;
  height: 2px;
  margin: 0 0.75rem;
  background-color: var(--th-gray-200);
  border-radius: 1px;
}

body .th-step.is-done:not(:last-child)::after {
  background-color: var(--th-success);
}

/* Numara dairesi — line-height:1 şart, yoksa rakam aşağı kayıyor */
body .th-step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--th-radius-full);
  background-color: var(--th-gray-100);
  color: var(--th-gray-500);
  font-family: var(--th-font-sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

body .th-step.is-active .th-step-dot {
  background-color: var(--th-brand-600);
  color: #fff;
}

body .th-step.is-done .th-step-dot {
  background-color: var(--th-success);
  color: #fff;
}

body .th-step.is-active,
body .th-step.is-done {
  color: var(--th-gray-900);
}

body .th-step.is-active {
  font-weight: 600;
}

/* Dar ekranda yalnızca numaralar kalır — etiketler sığmıyor */
@media (max-width: 767px) {
  body .th-step-label {
    display: none;
  }

  body .th-step:not(:last-child)::after {
    margin: 0 0.375rem;
  }
}

.th-sub-heading {
  margin: 1.5rem 0 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--th-border);
  font-family: var(--th-font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--th-gray-700);
}

.th-optional {
  font-weight: 400;
  color: var(--th-gray-400);
}

/* Doğrulama hatası — kırmızı burada doğru kullanım (CLAUDE.md) */
.th-invalid.form-control {
  border-color: var(--th-danger);
}

.th-invalid.form-control:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* Şifre göster/gizle */
.th-password-wrap {
  position: relative;
}

/* Şifre üret düğmesi ve güç ölçeri aynı hizada dursun */
body .th-register-inner .generate-password {
  margin-top: 0;
}

body .password-strength-meter {
  padding-top: 0.5rem;
}

.th-password-wrap .form-control {
  padding-right: 2.75rem;
}

.th-password-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  padding: 0.375rem;
  color: var(--th-gray-400);
  cursor: pointer;
}

.th-password-toggle:hover {
  color: var(--th-gray-700);
}

/* Sözleşme onayı — bağlantı marka renginde (six mavi bırakıyor) */
body .th-tos a {
  color: var(--th-brand-600);
  font-weight: 600;
}

body .th-tos a:hover {
  color: var(--th-brand-700);
}

body .th-tos input[type='checkbox'] {
  margin-top: 0.1875rem;
}

.th-tos {
  margin-top: 1.5rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius);
  background: var(--th-surface-muted);
  font-size: 14px;
}

.th-tos label {
  margin: 0;
  font-weight: 400;
}

/* Gezinme düğmeleri — üstte ayırıcı çizgi, formdan ayrışsın */
body .th-wizard-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--th-border);
}

/* İleri/Geri düğmeleri okla birlikte etiket taşımalı — tek ok
   kullanıcıya ne yapacağını söylemiyor */
body .th-wizard-nav .btn {
  min-width: 6rem;
}

/* İleri/gönder sağa yaslanır, geri solda kalır */
.th-wizard-next,
.th-wizard-submit {
  margin-left: auto;
}

.th-wizard-nav .btn {
  padding: 0.625rem 1.5rem;
}

/* Şifre gücü ölçeri — six'in işaretlemesi korunuyor */
.password-strength-meter .progress {
  height: 6px;
  border-radius: var(--th-radius-full);
  background: var(--th-gray-100);
  box-shadow: none;
  margin-bottom: 0.5rem;
}

.password-strength-meter .progress-bar-success {
  background: var(--th-success);
}

/* Uyarı kutusunda sağa yaslanan düğme (ör. ürün detayındaki "Faturayı öde").
   WHMCS düğmeyi float:right ile metinden ÖNCE basıyor; tema dolgusuyla
   düğme kutunun altından taşıyordu. Kutu esnek satır olur, düğme sağda
   metinle dikeyde ortalanır; dar ekranda alta iner. */
body .alert:has(> .pull-right) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

body .alert:has(> .pull-right)::before,
body .alert:has(> .pull-right)::after { display: none; }

body .alert > .pull-right {
  float: none;
  order: 2;
  margin-left: auto;
}

body .alert > .pull-right .btn { white-space: nowrap; }

/* Kenar çubuğu alt düğmeleri (ör. faturalarda "Hepsini Öde" / "Bakiye
   Ekleyin"): yarım genişlikte yan yana sığmıyor, metin kesiliyordu. Alt
   alta, tam genişlik. */
body .th-sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Destek talebinde düğmeler bir .row içinde geliyor; satır da aynı
   sütun düzenine alınıyor. */
body .th-sidebar-footer > .row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
}

body .th-sidebar-footer::before,
body .th-sidebar-footer::after,
body .th-sidebar-footer > .row::before,
body .th-sidebar-footer > .row::after { display: none; }

body .th-sidebar-footer > [class*="col-"],
body .th-sidebar-footer > .row > [class*="col-"] {
  float: none;
  width: 100%;
  padding: 0;
}

/* "Bildirimi Kapat" yıkıcı ama ikincil eylem: Yanıtla'nın yanında aynı
   ağırlıkta kırmızı durmasın, çerçeveli. */
body .th-sidebar-footer .btn-danger {
  border-color: var(--th-border);
  background: var(--th-surface);
  color: var(--th-danger);
}

body .th-sidebar-footer .btn-danger:hover,
body .th-sidebar-footer .btn-danger:focus {
  border-color: var(--th-danger);
  background: var(--th-brand-50);
  color: var(--th-danger);
}

/* Talep bilgileri gibi bağlantı olmayan satırlar: üzerine gelince
   tıklanabilir gibi zemin değiştirmesin */
body .th-sidebar-list div.th-sidebar-link.list-group-item:hover { background: transparent; }

body .th-sidebar-footer .btn {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═════════ Müşteri paneli ana sayfası (clientareahome.tpl) ═════════
   Maketteki düzen. Sol kenar çubuğu (Bilgileriniz, Sorumlular, Hızlı
   Erişim) bu sayfada gizli: panel menüsü üstte, hızlı işlemler sağ
   sütunda. Six'in sayfa başlığı da gizli, şablon kendi başlığını basıyor.
   :has() ile — header.tpl'deki ortak düzen bozulmuyor. */
#main-body .row:has(.th-home) > .sidebar,
#main-body .row:has(.th-home) > .col-md-9:not(.main-content) {
  display: none;
}

#main-body .row:has(.th-home) > .main-content {
  float: none;
  width: 100%;
}

.th-home-head { margin-bottom: 1.25rem; }
.th-home-head h1 { margin: 0 0 0.25rem; font-size: 26px; font-weight: 700; color: var(--th-gray-900); }
.th-home-head p { margin: 0; color: var(--th-gray-500); }

.th-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.875rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 767px) { .th-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.th-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--th-border);
  border-radius: 0.875rem;
  background: var(--th-surface);
  color: var(--th-gray-500);
  text-decoration: none;
  transition: border-color 0.15s;
}

.th-kpi:hover,
.th-kpi:focus { border-color: var(--th-brand-300); color: var(--th-gray-500); text-decoration: none; }

.th-kpi span { font-size: 13px; }

.th-kpi b {
  font-family: var(--th-font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--th-gray-900);
}

/* Ödenmemiş fatura varsa sarı: uyarı, hata değil (kırmızı yalnızca hata) */
.th-kpi.warn { border-color: color-mix(in srgb, var(--th-warning) 35%, transparent); background: var(--th-warning-bg); }

.th-due {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--th-warning) 35%, transparent);
  border-radius: 0.875rem;
  background: var(--th-warning-bg);
}

.th-due-text { display: flex; flex-direction: column; gap: 0.125rem; }
.th-due-text b { font-family: var(--th-font-display); font-size: 16px; color: var(--th-gray-900); }
.th-due-text span { font-family: var(--th-font-mono); font-size: 13.5px; color: var(--th-gray-700); }

.th-dash {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 991px) { .th-dash { grid-template-columns: 1fr; } }

.th-dash-main,
.th-dash-side,
.th-dash-extra {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.th-dash-extra { margin-top: 1.25rem; }
.th-dash-extra:empty { display: none; }

.th-home-card {
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
  overflow: hidden;
}

.th-home-card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem 0.75rem;
}

.th-home-card-h h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--th-gray-900); }
.th-home-card-h a { font-size: 13px; font-weight: 500; color: var(--th-brand-600); }

.th-home-body { padding: 0 1.25rem 1rem; font-size: 14px; color: var(--th-gray-600); }
.th-home-body a { color: var(--th-brand-600); font-weight: 500; }

.th-home-list { border-top: 1px solid var(--th-border); }

.th-home-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--th-border);
  font-size: 14px;
  color: var(--th-gray-800);
  text-decoration: none;
}

.th-home-row:first-child { border-top: 0; }
.th-home-row:hover,
.th-home-row:focus { background: var(--th-surface-muted); color: var(--th-gray-900); text-decoration: none; }

.th-home-row-l { min-width: 0; overflow-wrap: anywhere; }
.th-home-row-l small,
.th-home-row-l .text-domain { display: block; font-size: 12.5px; color: var(--th-gray-500); }

/* WHMCS durum etiketleri (label-success vb.) satır içinde */
.th-home-row .label { margin-left: 0.5rem; }

.th-home-foot a { color: var(--th-brand-600); font-weight: 500; }
.th-home-empty { margin: 0; color: var(--th-gray-400); }

.th-home-foot {
  padding: 0.625rem 1.25rem;
  border-top: 1px solid var(--th-border);
  background: var(--th-surface-muted);
  font-size: 13px;
}

.th-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  padding: 0 1.25rem 1.25rem;
}

.th-quick a {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.75rem;
  border: 1px solid var(--th-border);
  border-radius: 0.75rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--th-gray-800);
  text-decoration: none;
  transition: border-color 0.15s;
}

.th-quick a:hover,
.th-quick a:focus { border-color: var(--th-brand-300); color: var(--th-gray-900); text-decoration: none; }

.th-quick i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  background: var(--th-brand-50);
  color: var(--th-brand-600);
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
}

/* ── Panel ana sayfa: istatistik kutuları (clientareahome.tpl) ──
   ŞABLON EZİLMEDİ — six'in .tile yapısı stillendi. İşaretleme
   onclick ve yönlendirme içeriyor, dokunulmaması daha güvenli. */
.tiles .tile {
  margin-bottom: 1.25rem;
}

body .tiles .tile > a {
  position: relative;
  display: block;
  padding: 1.5rem 1rem 1.25rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background-color: var(--th-surface);
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.tiles .tile > a:hover {
  border-color: var(--th-gray-300);
  box-shadow: 0 4px 12px -4px rgba(3, 7, 18, 0.1);
}

.dark .tiles .tile > a {
  background: var(--th-gray-900);
}

body .tiles .tile .icon {
  font-size: 18px;
  color: var(--th-gray-300);
  margin-bottom: 0.5rem;
}

body .tiles .tile .stat {
  font-family: var(--th-font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--th-gray-900);
}

.dark .tiles .tile .stat {
  color: #fff;
}

.tiles .tile .title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--th-gray-500);
  margin-top: 0.25rem;
}

/* Alt renk şeridi — six bg-color-* sınıflarıyla kategori ayırıyor.
   İnce tutuluyor: dört kutuda dört farklı renk, kalın şerit olunca
   panel karnaval gibi görünüyor. Kategori ipucu yeterli. */
body .tiles .tile .highlight {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  opacity: 0.55;
}

body .tiles .highlight.bg-color-blue { background-color: var(--th-gray-700); }
body .tiles .highlight.bg-color-green { background-color: var(--th-success); }
body .tiles .highlight.bg-color-gold { background-color: var(--th-warning); }
body .tiles .highlight.bg-color-red { background-color: var(--th-brand-500); }

/* Hover'da şerit belirginleşir — kutunun tıklanabilir olduğunu gösterir */
body .tiles .tile > a:hover .highlight {
  opacity: 1;
}

/* ── Liste tabloları (clientareaproducts / domains / invoices) ──
   ŞABLON EZİLMEDİ — bu dosyalar neredeyse tamamen DataTables
   yapılandırması ve tıklama kancası; görsel katman çok az. */
.table-container {
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
  overflow: hidden;
}

.dark .table-container {
  background: var(--th-gray-900);
}

.table-list {
  margin-bottom: 0;
}

/* Satır tıklanabilir (clickableSafeRedirect) — imleç bunu belli etmeli */
.table-list tbody tr {
  cursor: pointer;
}

.table-list tbody tr:hover {
  background: var(--th-surface-muted);
}

/* Durum etiketleri — WHMCS status-{durum} basıyor.
   Yeşil olumlu, gri nötr, kırmızı yalnızca gerçek sorun (CLAUDE.md). */
.label.status {
  display: inline-block;
  padding: 0.25em 0.7em;
  border-radius: var(--th-radius-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.status-active,
.status-paid,
.status-completed,
.status-answered {
  background: var(--th-success-bg);
  color: var(--th-success);
}

.status-pending,
.status-open,
.status-unpaid,
.status-customer-reply {
  background: var(--th-warning-bg);
  color: var(--th-warning);
}

.status-suspended,
.status-overdue,
.status-cancelled,
.status-fraud,
.status-terminated {
  background: var(--th-danger-bg);
  color: var(--th-danger);
}

.status-closed,
.status-expired,
.status-draft,
.status-refunded {
  background: var(--th-gray-100);
  color: var(--th-gray-600);
}

.dark .status-closed,
.dark .status-expired,
.dark .status-draft,
.dark .status-refunded {
  background: rgba(255, 255, 255, 0.08);
  color: var(--th-gray-300);
}

/* Tablo yükleniyor göstergesi */
#tableLoading {
  padding: 2rem 1rem;
  color: var(--th-gray-500);
}

/* ── Destek talebi görünümü (viewticket.tpl) ── */
.ticket-reply {
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  margin-bottom: 1rem;
  overflow: hidden;
}

/* Personel yanıtı — nötr vurgulu zemin, müşteriden ayrışsın */
.ticket-reply.staff {
  background: var(--th-surface-muted);
  border-left: 3px solid var(--th-gray-400);
}

.ticket-reply .ticket-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--th-border);
  font-size: 13px;
  color: var(--th-gray-600);
}

.ticket-reply .ticket-body {
  padding: 1rem;
  line-height: 1.7;
}

/* ── Sipariş akışı (templates/orderforms/standard_cart) ──
   ŞABLON EZİLMEDİ. Sepet ayrı bir şablon sisteminde ama sayfa hem
   tema custom.css'ini hem sipariş formunun kendi CSS'ini yüklüyor,
   bu yüzden buradan stillenebiliyor.

   ⚠ Do Not Break: form alan adları, {$token}, reCAPTCHA blokları
   şablonlarda; buraya yalnızca görsel katman yazılır. */
.cart-body {
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
  padding: 1.25rem;
}

.dark .cart-body {
  background: var(--th-gray-900);
}

.cart-sidebar .panel {
  border-radius: var(--th-radius-lg);
}

/* Toplam tutar bloğu — fiyatlar mono fontla hizalı okunur */
.bordered-totals {
  border-top: 1px solid var(--th-border);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}

.cart-sidebar .amt,
.bordered-totals .amt {
  font-family: var(--th-font-mono);
  font-weight: 600;
}

/* Sepetten çıkar — yıkıcı işlem, kırmızı burada doğru */
.btn-remove-from-cart {
  color: var(--th-danger);
}

.btn-remove-from-cart:hover,
.btn-remove-from-cart:focus {
  color: var(--th-brand-700);
}

.btn-continue-shopping {
  color: var(--th-gray-600);
}

.btn-continue-shopping:hover {
  color: var(--th-gray-900);
}

/* Ürün kartları (products.tpl) */
.product {
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
  overflow: hidden;
}

.product .product-desc {
  padding: 1rem;
  color: var(--th-gray-600);
  font-size: 14px;
  line-height: 1.7;
}

.product header,
.product .product-header {
  padding: 1rem;
  border-bottom: 1px solid var(--th-border);
  font-family: var(--th-font-display);
  font-weight: 600;
}

/* Fiyatlar mono — rakam hizası tutarlı olsun */
.product .price,
.product-pricing,
.cart-price {
  font-family: var(--th-font-mono);
  font-weight: 700;
  color: var(--th-gray-900);
}

.dark .product .price,
.dark .product-pricing,
.dark .cart-price {
  color: #fff;
}

/* Alan adı arama kutusu (domainchecker) */
.domain-checker-container,
.domain-search-container {
  border-radius: var(--th-radius-lg);
}

/* Sipariş adımları göstergesi */
.cart-steps,
.order-steps {
  margin-bottom: 1.5rem;
}

/* Giriş/kayıt sayfalarında kenar çubuğu ve sayfa başlığı gizlenir.
   WHMCS bu sayfalarda da sidebar basıyor ("Daha önce kayıt oldunuz mu?"),
   iki bölmeli tasarım dar alana sıkışıyordu. Bağlantılar zaten formun
   altında var. */
body:has(.th-auth) #main-body > .container > .row > .sidebar,
body:has(.th-auth) #main-body > .container > .row > .col-md-3 {
  display: none;
}

body:has(.th-auth) #main-body > .container > .row > .main-content,
body:has(.th-auth) #main-body > .container > .row > .col-md-9 {
  width: 100%;
}

/* Sayfa başlığı ve breadcrumb da gizlenir — form kendi başlığını taşıyor */
body:has(.th-auth) .header-lined {
  display: none;
}

/* #main-body boşluğu da kalkar: th-auth tam ekran yükseklik istiyor */
body:has(.th-auth) #main-body {
  padding: 0;
  background: var(--th-surface-muted);
}

/* Kayıt sayfasında sihirbaz daha geniş alan ister — 4 adımlı gösterge
   dar sütuna sığmıyor, etiketler kesiliyordu. Tanıtım paneli daralır. */
.th-auth-register .th-auth-form {
  padding: 2.5rem 2rem;
}

@media (min-width: 992px) {
  .th-auth-register .th-auth-aside {
    width: 42%;
  }
}

/* Adım etiketleri uzun; küçülterek taşma önlenir */
.th-register-inner .th-step {
  font-size: 12px;
}

.th-register-inner .th-step-dot {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 12px;
}

/* ── Giriş / kayıt: tam ekran ──
   Header ve footer gizlenir; sayfa yalnızca form + tanıtım panelinden
   oluşur. Kurumsal sitedeki giriş deneyimiyle aynı.

   :has() ile yapılıyor — şablon ezmeye gerek kalmıyor, header.tpl ve
   footer.tpl tüm sayfalarda ortak kalıyor. */
body:has(.th-auth) #th-header,
body:has(.th-auth) #th-footer {
  display: none;
}

/* macOS/iOS'te sayfa en üstte aşağı çekilince (lastik kaydırma) koyu
   panelin üstünde açık zemin görünüyordu */
html:has(.th-auth),
body:has(.th-auth) { overscroll-behavior-y: none; }

/* Sayfa kapsayıcıları tam genişlik/yükseklik alır */
body:has(.th-auth) #main-body > .container {
  width: 100%;
  max-width: none;
  padding: 0;
}

body:has(.th-auth) #main-body > .container > .row {
  margin: 0;
}

body:has(.th-auth) #main-body > .container > .row > [class*='col-'] {
  padding: 0;
  /* six sütun kabına 60px alt boşluk veriyor; koyu panel o boşluğa
     uzanamıyor, uzun kayıt formunda altta açık renkli şerit kalıyordu */
  margin-bottom: 0;
}

/* Logo forma taşınır — header gizlendiği için marka görünmez kalmasın */
.th-auth-brand {
  margin-bottom: 2rem;
}

.th-auth-brand img {
  height: 32px;
  width: auto;
}

/* ── İki aşamalı doğrulama ──
   Şablon WHMCS çekirdeğinden geliyor (six'te ayrı dosya yok), ezilemiyor.
   Görünüm CSS ile giriş sayfasına yaklaştırılıyor: ortalanmış dar kart.

   Sayfa .header-lined başlığı + form içeriyor; ikisini de saran bir
   kapsayıcı yok, o yüzden .main-content üzerinden hizalanıyor. */
body.two-factor #main-body .main-content,
body:has(#frmTwoFactor) #main-body .main-content,
body:has(form[action*="two-factor"]) #main-body .main-content {
  max-width: 30rem;
  margin: 0 auto;
  float: none;
}

/* 2FA sayfasında başlık ortalanır — tek sütunda sola yaslı durması
   dengesiz görünüyordu */
body:has(#frmTwoFactor) .header-lined,
body:has(form[action*="two-factor"]) .header-lined {
  text-align: center;
  border-bottom: 0;
  margin-bottom: 1.5rem;
}

/* Kod alanı — tek kutuya girilen sayı; büyük ve ortalanmış olmalı */
body:has(#frmTwoFactor) .main-content input[type="text"],
body:has(form[action*="two-factor"]) .main-content input[type="text"] {
  text-align: center;
  font-family: var(--th-font-mono);
  font-size: 20px;
  letter-spacing: 0.25em;
  padding: 0.75rem;
}

/* Yardım metni ve yedek kod bağlantısı */
body:has(#frmTwoFactor) .main-content .alert,
body:has(form[action*="two-factor"]) .main-content .alert {
  text-align: center;
  font-size: 14px;
}

/* six bu sayfada bağlantıları Bootstrap mavisinde bırakıyor */
body:has(#frmTwoFactor) .main-content a,
body:has(form[action*="two-factor"]) .main-content a {
  color: var(--th-brand-600);
}

body:has(#frmTwoFactor) .main-content a:hover,
body:has(form[action*="two-factor"]) .main-content a:hover {
  color: var(--th-brand-700);
}

/* ── Tipografi: six'in font dayatmalarını temizle ──
   six/all.min.css 'Open Sans', Raleway ve Tahoma tanımlıyor
   (body, başlıklar, .navbar-main, form öğeleri, .label).
   Tarayıcı form öğelerine de kendi fontunu uygular — inherit şart. */
body,
body .navbar-main,
body .panel-title,
body .list-group-item,
body .alert,
body .label,
body .breadcrumb {
  font-family: var(--th-font-sans);
}

/* Form öğeleri fontu miras almaz — açıkça verilmeli */
body input,
body select,
body textarea,
body button,
body .form-control,
body .btn {
  font-family: var(--th-font-sans);
}

/* Başlıklar Outfit — six Raleway/Open Sans dayatıyor */
body h1,
body h2,
body h3,
body h4,
body .header-lined h1,
body .panel .panel-title {
  font-family: var(--th-font-display);
  letter-spacing: -0.02em;
}

/* Teknik değerler mono: fatura tutarı, alan adı, IP, sipariş no.
   Rakam hizası tutarlı olsun diye. */
body .amt,
body .cart-price,
body code,
body kbd,
body pre {
  font-family: var(--th-font-mono);
}

/* six .label'ları Tahoma ile basıyor */
body .label,
body .badge,
body .th-badge {
  font-family: var(--th-font-sans);
}

/* Gövde metni ölçüsü — six 13px kullanıyor, panelde küçük kalıyor */
body {
  font-size: 14px;
  line-height: 1.6;
}

body .form-control {
  font-size: 14px;
}

body label {
  font-weight: 600;
  font-size: 13px;
  color: var(--th-gray-700);
  margin-bottom: 0.375rem;
}

.dark body label {
  color: var(--th-gray-300);
}

/* ── Form alanları: WHMCS'in ürettiği girdileri de kapsa ──
   $customfields ve telefon bileşeni .form-control sınıfı OLMADAN
   gelebiliyor (WHMCS kendi işaretlemesini basıyor). Öznitelik
   seçicileriyle hepsi yakalanır. */
body .th-auth-inner input[type='text'],
body .th-auth-inner input[type='email'],
body .th-auth-inner input[type='tel'],
body .th-auth-inner input[type='password'],
body .th-auth-inner input[type='number'],
body .th-auth-inner select,
body .th-auth-inner textarea {
  display: block;
  width: 100%;
  height: auto;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius);
  background-color: var(--th-surface);
  color: var(--th-gray-800);
  font-family: var(--th-font-sans);
  font-size: 14px;
  line-height: 1.5;
  box-shadow: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

body .th-auth-inner input:focus,
body .th-auth-inner select:focus,
body .th-auth-inner textarea:focus {
  border-color: var(--th-brand-400);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
  outline: 0;
}

/* Onay kutuları — WHMCS bunları etiketsiz basabiliyor */
body .th-auth-inner input[type='checkbox'],
body .th-auth-inner input[type='radio'] {
  width: auto;
  height: auto;
  margin-right: 0.5rem;
  accent-color: var(--th-brand-600);
}

/* Custom field açıklamaları — "Faturalandırma için gereklidir" gibi */
body .field-help-text,
body .th-auth-inner .help-block {
  display: block;
  margin-top: 0.375rem;
  font-size: 12px;
  line-height: 1.5;
  color: var(--th-gray-500);
}

/* Zorunlu alan yıldızı — WHMCS {$customfield.required} ile basıyor */
body .th-auth-inner .text-danger,
body .th-auth-inner label .required {
  color: var(--th-danger);
}

/* ── Telefon alanı (intl-tel-input) ──
   WHMCS uluslararası telefon bileşeni kullanıyor; kendi kutusunu
   çiziyor ve bizim alanla hizasız kalıyordu. */
body .th-auth-inner .iti,
body .th-auth-inner .intl-tel-input {
  display: block;
  width: 100%;
}

body .th-auth-inner .iti input,
body .th-auth-inner .intl-tel-input input {
  width: 100%;
}

/* Ülke seçici bayrak kutusu */
body .th-auth-inner .iti__flag-container,
body .th-auth-inner .flag-container {
  border-right: 1px solid var(--th-border);
}

/* ── Satır aralığı ──
   Custom field'lar iki sütunda dengesiz yükseklikte olabiliyor
   (açıklama metni olan/olmayan); alt hizayı bozmasın. */
body .th-register-inner .form-group {
  margin-bottom: 1.25rem;
}

/* Ek bilgiler başlığı */
body .th-sub-heading {
  margin: 1.75rem 0 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--th-border);
  font-family: var(--th-font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--th-gray-800);
}

/* ── Sihirbaz doğrulama geri bildirimi ──
   Kırmızı burada DOĞRU kullanım: gerçek hata durumu (CLAUDE.md). */
body .th-step-error {
  margin-bottom: 1.25rem;
  font-size: 14px;
}

body .th-field-error {
  display: block;
  margin-top: 0.375rem;
  font-size: 12px;
  font-weight: 500;
  color: var(--th-danger);
}

/* ── Sipariş formu ve tema dışı sidebar'lar ──
   Sepetin kenar çubuğu (orderforms/standard_cart) bizim sidebar.tpl'den
   GELMİYOR — th-sidebar-* sınıfları orada yok. six ayrıca aktif öğeyi
   a.list-group-item.active{#465054} ile koyu antrasit yapıyor.
   Tema sınıfı aranmadan, genel seçicilerle nötrlenir. */
body .panel-sidebar a.list-group-item.active,
body .panel-sidebar a.list-group-item.active:focus,
body .panel-sidebar a.list-group-item.active:hover {
  background-color: var(--th-surface-muted);
  border-color: var(--th-border);
  border-left: 3px solid var(--th-brand-500);
  color: var(--th-gray-900);
  font-weight: 600;
}

body .panel-sidebar a.list-group-item.active i,
body .panel-sidebar a.list-group-item.active:focus i,
body .panel-sidebar a.list-group-item.active:hover i {
  color: var(--th-gray-600);
}

body .panel-sidebar a.list-group-item,
body .panel-sidebar div.list-group-item {
  color: var(--th-gray-700);
  font-size: 14px;
}

body .panel-sidebar a.list-group-item:hover {
  background-color: var(--th-surface-muted);
}

/* ── Sipariş formu seçim kutuları (iCheck) ──
   standard_cart radyo ve onay kutularını mavi bir resim (blue.png)
   ile çiziyor; marka rengiyle çelişiyordu. Resim kaldırılıp kutu
   CSS ile çiziliyor. Sınıf adları ve tıklama davranışı iCheck'in
   kendisinde, burada yalnızca görünüm değişir. */
#order-standard_cart .iradio_square-blue,
#order-standard_cart .icheckbox_square-blue {
  width: 20px;
  height: 20px;
  background: var(--th-surface) none;
  border: 1.5px solid var(--th-gray-300);
  transition: border-color 0.15s, background-color 0.15s;
}

#order-standard_cart .iradio_square-blue {
  border-radius: 50%;
}

#order-standard_cart .icheckbox_square-blue {
  border-radius: 5px;
}

#order-standard_cart .iradio_square-blue.hover,
#order-standard_cart .icheckbox_square-blue.hover {
  border-color: var(--th-brand-500);
}

/* Seçili radyo: kırmızı halka + beyaz iç boşluk */
#order-standard_cart .iradio_square-blue.checked {
  border-color: var(--th-brand-600);
  background-color: var(--th-brand-600);
  box-shadow: inset 0 0 0 4px var(--th-surface);
}

#order-standard_cart .icheckbox_square-blue.checked {
  border-color: var(--th-brand-600);
  background: var(--th-brand-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 14px no-repeat;
}

#order-standard_cart .iradio_square-blue.disabled,
#order-standard_cart .icheckbox_square-blue.disabled {
  opacity: 0.5;
}

/* Ürün listesi yerine yönlendirme kartı (orderform/products.tpl) */
.th-redirect {
  max-width: 32rem;
  margin: 3rem auto;
  padding: 2rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
  text-align: center;
}

.th-redirect h1 { margin: 0 0 0.5rem; font-size: 22px; }
.th-redirect p { margin: 0 0 1.25rem; color: var(--th-gray-500); }

/* ═════════ TürkHosting sipariş formu (orderforms/turkhosting_cart) ═════════
   Şablonlar standard_cart kopyası; JS ve temel CSS standard_cart'tan
   geliyor. #order-standard_cart kimliği bilerek korunuyor, seçiciler ona
   bağlı. Sipariş formu CSS'i bizden SONRA yüklendiği için seçiciler
   kimlik + sınıf ağırlığında.

   Ürün seçimi kurumsal sitede yapılıyor; sepette kategori sütunu yok,
   içerik tam genişlik. */
/* body ön eki şart: standard_cart'ın ".cart-body{float:right;width:75%}"
   kuralı aynı ağırlıkta ve bizden sonra yükleniyor; ön ek olmadan içerik
   solda 300px boşlukla duruyordu. */
body #order-standard_cart .cart-sidebar {
  display: none;
}

body #order-standard_cart .cart-body {
  float: none;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

#order-standard_cart .header-lined {
  margin-bottom: 1rem;
  border-bottom: 0;
  padding-bottom: 0;
}

#order-standard_cart .th-lead {
  margin: 0 0 1.25rem;
  max-width: 44rem;
  font-size: 15px;
  color: var(--th-gray-500);
}

/* Adım göstergesi */
.th-steps {
  display: flex;
  gap: 0.375rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}

.th-steps li {
  flex: 1;
  display: block;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--th-gray-400);
}

.th-steps li::before {
  content: "";
  display: block;
  margin-bottom: 0.5rem;
  height: 4px;
  border-radius: 2px;
  background: var(--th-gray-200);
}

.th-steps li.done::before,
.th-steps li.cur::before { background: var(--th-brand-600); }

.th-steps li.done { color: var(--th-gray-700); }
.th-steps li.cur { color: var(--th-gray-900); font-weight: 700; }

.th-step-n::after { content: ". "; }

.th-step-l { white-space: nowrap; }

/* Dar ekranda yalnızca bulunulan adımın adı */
@media (max-width: 639px) {
  .th-steps li:not(.cur) .th-step-l,
  .th-steps li:not(.cur) .th-step-n { display: none; }
  .th-steps li.cur { flex: 2.5; }
}

/* ── Alan adı adımı: seçenekler sekme ──
   İşaretleme standard_cart'ın aynısı (radyo + her seçeneğin kendi kutusu);
   WHMCS'in JS'i seçili olanın kutusunu açıp diğerlerini kapatıyor.
   .option display:contents ile kutusunu kaybediyor: etiketler bir sıraya
   diziliyor, açık olan kutu altlarında tam genişlik duruyor. */
#order-standard_cart .domain-selection-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  background: transparent;
  border: 0;
}

#order-standard_cart .domain-selection-options .option {
  display: contents;
}

#order-standard_cart .domain-selection-options .option > label {
  order: 0;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.5625rem 1.125rem;
  border: 1.5px solid var(--th-gray-200);
  border-radius: 9999px;
  background: var(--th-surface);
  font-size: 14px;
  font-weight: 500;
  color: var(--th-gray-700);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

#order-standard_cart .domain-selection-options .option > label:hover {
  border-color: var(--th-brand-300);
}

#order-standard_cart .domain-selection-options .option > label:has(.checked),
#order-standard_cart .domain-selection-options .option > label:has(input:checked) {
  border-color: var(--th-brand-600);
  background: var(--th-brand-50);
  color: var(--th-brand-700);
  font-weight: 600;
}

/* Sekmede radyo düğmesi gösterilmez; seçili sekme rengiyle belli */
#order-standard_cart .domain-selection-options .option > label .iradio_square-blue,
#order-standard_cart .domain-selection-options .option > label input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#order-standard_cart .domain-selection-options .domain-input-group {
  order: 1;
  flex: 1 1 100%;
  margin: 0.5rem 0 0;
  padding: 1.25rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
}

/* Bootstrap ofsetli sütunları sade bir esnek satıra çevir */
#order-standard_cart .domain-input-group > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
}

#order-standard_cart .domain-input-group > .row > [class*="col-"] {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

#order-standard_cart .domain-input-group > .row > [class*="col-"]:first-child { flex: 1 1 20rem; min-width: 0; }
#order-standard_cart .domain-input-group > .row > [class*="col-"]:last-child { flex: 0 0 auto; }

#order-standard_cart .domain-input-group .domains-row {
  display: flex;
  gap: 0.5rem;
  margin: 0;
}

#order-standard_cart .domain-input-group .domains-row > [class*="col-"] {
  float: none;
  width: auto;
  padding: 0;
}

#order-standard_cart .domain-input-group .domains-row > [class*="col-"]:first-child { flex: 1; min-width: 0; }
#order-standard_cart .domain-input-group .domains-row > [class*="col-"]:last-child { flex: 0 0 8.5rem; }

#order-standard_cart .domain-input-group .form-control,
#order-standard_cart .domain-input-group .input-group-addon,
#order-standard_cart .domain-input-group .btn {
  height: 2.875rem;
}

#order-standard_cart .domain-input-group .input-group-addon {
  border-radius: var(--th-radius) 0 0 var(--th-radius);
  background: var(--th-surface-muted);
  border-color: var(--th-border);
  color: var(--th-gray-500);
}

#order-standard_cart .domain-input-group .btn { padding-inline: 1.5rem; }

@media (max-width: 639px) {
  #order-standard_cart .domain-input-group > .row > [class*="col-"]:last-child { flex: 1 1 100%; }
  #order-standard_cart .domain-input-group .btn { width: 100%; }
}

/* Pasif birincil düğme — Bootstrap 3 .btn-primary[disabled] rengini
   #337ab7 açık maviye çekiyor; sorgu sırasında "Kontrol Et" mavi
   görünüyordu. Marka rengi kalır, yalnızca soluklaşır. */
body .btn-primary.disabled,
body .btn-primary[disabled],
body .btn-primary.disabled:hover,
body .btn-primary[disabled]:hover,
body .btn-primary.disabled:focus,
body .btn-primary[disabled]:focus {
  background-color: var(--th-brand-600);
  border-color: var(--th-brand-600);
  color: #fff;
  opacity: 0.55;
}

/* ── Alan adı sorgu sonuçları ──
   Sonuç bölümü WHMCS'in JS'iyle sonradan dolduruluyor; işaretleme
   standard_cart'ın aynısı, yalnızca görünüm değişiyor. Ortalanmış büyük
   yeşil başlık, gri zeminli kutular ve koyu "Ekle" düğmeleri yerine
   maketteki satır düzeni: alan adı solda, fiyat ve düğme sağda. */

/* ── Alan adı adımı: maketteki düzen ──
   Solda tek kart (soru, kutu, sekmeler, sonuçlar), sağda sipariş özeti. */
body #order-standard_cart .th-dgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21.25rem;
  gap: 1.5rem;
  align-items: start;
}

body #order-standard_cart .th-dgrid:has(.th-dside[hidden]) { grid-template-columns: minmax(0, 1fr); }

body #order-standard_cart .th-dmain { min-width: 0; }

body #order-standard_cart .th-dcard {
  padding: 1.5rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
}

body #order-standard_cart .th-dcard-h {
  margin: 0 0 0.25rem;
  font-size: 18px;
  font-weight: 600;
  color: var(--th-gray-900);
}

body #order-standard_cart .th-dcard-sub {
  margin: 0 0 1rem;
  font-size: 14px;
  color: var(--th-gray-500);
}

body #order-standard_cart .th-dside {
  position: sticky;
  top: 8.5rem;
}

@media (max-width: 991px) {
  body #order-standard_cart .th-dgrid { grid-template-columns: 1fr; }
  body #order-standard_cart .th-dside { position: static; }
}

/* Kart içinde sekmeler küçük, seçilen kutu çerçevesiz (kartın kendisi var) */
body #order-standard_cart .th-dcard .domain-selection-options { margin-bottom: 0.5rem; }

body #order-standard_cart .th-dcard .domain-selection-options .option > label {
  padding: 0.375rem 0.875rem;
  font-size: 13px;
}

body #order-standard_cart .th-dcard .domain-selection-options .domain-input-group {
  margin-top: 0.75rem;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Tek kutu: "www." öneki ve uzantı listesi gizli; ziyaretçi tam adı
   yazıyor, js/th-cart.js gönderimden önce ad ve uzantıya bölüyor.
   Listeler formda yerinde duruyor, WHMCS onları okuyor. */
/* "Alan adım var" (#domainowndomain) da aynı tek kutu düzeninde: bu
   kural yalnızca kayıt ve transfer için yazılmıştı, own-domain'de
   "www." öneki 25px'e sıkışıp giriş alanının altında kalıyordu. */
body #order-standard_cart #domainregister .input-group-addon,
body #order-standard_cart #domaintransfer .input-group-addon,
body #order-standard_cart #domainowndomain .input-group-addon,
body #order-standard_cart #domainregister .domains-row > [class*="col-"]:last-child,
body #order-standard_cart #domaintransfer .domains-row > [class*="col-"]:last-child,
body #order-standard_cart #domainowndomain .domains-row > [class*="col-"]:last-child {
  display: none;
}

body #order-standard_cart #domainregister .form-control,
body #order-standard_cart #domaintransfer .form-control,
body #order-standard_cart #domainowndomain .form-control {
  border-radius: var(--th-radius);
}

body #order-standard_cart .th-dcard .domain-input-group .form-control,
body #order-standard_cart .th-dcard .domain-input-group .btn { height: 2.875rem; font-size: 15px; }

body #order-standard_cart .th-dcard .domain-input-group .form-control:focus {
  border-color: var(--th-brand-500);
  box-shadow: 0 0 0 3px var(--th-brand-100);
}

/* Sonuçlar kartın içinde, tek sütun satır listesi */
body #order-standard_cart .th-dcard .spotlight-tlds-container {
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--th-border);
  border-radius: 0.75rem;
  overflow: hidden;
}

body #order-standard_cart .th-dcard .spotlight-tld {
  min-height: 3.25rem;
  border: 0;
  border-top: 1px solid var(--th-border);
  border-radius: 0;
}

body #order-standard_cart .th-dcard .spotlight-tld-container:first-child .spotlight-tld { border-top: 0; }

body #order-standard_cart .th-dcard .domain-lookup-primary-results {
  border-color: rgba(5, 150, 105, 0.3);
  background: var(--th-success-bg);
}

body #order-standard_cart .th-dcard .suggested-domains { margin-top: 1rem; border-radius: 0.75rem; }

/* Özet kartındaki ürün satırı */
body #order-standard_cart .th-sum-prod {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--th-border);
}

body #order-standard_cart .th-sum-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  background: var(--th-brand-50);
  color: var(--th-brand-600);
}

/* Asıl sonuç: "ornek.com müsait" satırı */
body #order-standard_cart .domain-lookup-primary-results {
  margin: 1rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
  text-align: left;
}

body #order-standard_cart .domain-lookup-primary-results .headline,
body #order-standard_cart .domain-checker-result-headline {
  font-family: var(--th-font-display);
  font-size: 18px;
  font-weight: 600;
}

body #order-standard_cart .domain-lookup-primary-loader {
  margin: 1rem 0;
  text-align: left;
  font-size: 15px;
  color: var(--th-gray-500);
}

body #order-standard_cart .domain-checker-available { color: var(--th-success); }
body #order-standard_cart .domain-checker-unavailable,
body #order-standard_cart .domain-checker-invalid { color: var(--th-danger); }

body #order-standard_cart .domain-lookup-primary-results .domain-price {
  margin-top: 0.25rem;
  font-size: 14px;
  color: var(--th-gray-600);
}

body #order-standard_cart .domain-lookup-primary-results .domain-price .price {
  margin-left: 0.25rem;
  font-family: var(--th-font-mono);
  font-weight: 600;
  color: var(--th-gray-900);
}

/* Öne çıkan uzantılar: gri şerit içinde dikey kartlar yerine satır ızgarası */
body #order-standard_cart .spotlight-tlds {
  margin: 1rem 0;
  padding: 0;
  background: transparent;
}

body #order-standard_cart .spotlight-tlds-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.625rem;
  margin: 0;
}

body #order-standard_cart .spotlight-tld-container {
  float: none;
  width: auto;
  padding: 0;
}

body #order-standard_cart .spotlight-tld {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: auto;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--th-border);
  border-radius: 0.75rem;
  background: var(--th-surface);
  font-family: var(--th-font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--th-gray-900);
  text-align: left;
}

body #order-standard_cart .spotlight-tld .domain-lookup-result {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

body #order-standard_cart .spotlight-tld .domain-lookup-result > .w-hidden { display: none; }

body #order-standard_cart .spotlight-tld span { display: inline; padding: 0; }

body #order-standard_cart .spotlight-tld .price {
  font-family: var(--th-font-mono);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--th-gray-700);
  white-space: nowrap;
}

body #order-standard_cart .spotlight-tld .domain-lookup-spotlight-loader {
  line-height: 1;
  font-size: 14px;
  color: var(--th-gray-400);
}

/* Kayıtlı / geçersiz: düğme değil, gri etiket */
body #order-standard_cart .spotlight-tld .btn.unavailable,
body #order-standard_cart .spotlight-tld .btn.invalid {
  width: auto;
  margin: 0;
  padding: 0.125rem 0.5rem;
  border: 0;
  border-radius: 9999px;
  background: var(--th-gray-100);
  color: var(--th-gray-500);
  font-family: var(--th-font-sans);
  font-size: 12px;
  font-weight: 600;
  opacity: 1;
}

/* "Ekle" düğmesi — sonuçların hepsinde aynı */
body #order-standard_cart .spotlight-tld .btn-add-to-cart,
body #order-standard_cart .suggested-domains .btn-add-to-cart {
  width: auto;
  margin: 0;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--th-gray-300);
  border-radius: 0.5rem;
  background: var(--th-surface);
  color: var(--th-gray-800);
  font-family: var(--th-font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

body #order-standard_cart .spotlight-tld .btn-add-to-cart:hover,
body #order-standard_cart .suggested-domains .btn-add-to-cart:hover {
  border-color: var(--th-brand-300);
  color: var(--th-brand-700);
}

/* Eklendi durumu: WHMCS düğmeye "checkout" sınıfı veriyor */
body #order-standard_cart .spotlight-tld .btn-add-to-cart.checkout,
body #order-standard_cart .suggested-domains .btn-add-to-cart.checkout {
  border-color: var(--th-brand-600);
  background: var(--th-brand-600);
  color: #fff;
}

/* Önerilen alan adları: liste kartı */
body #order-standard_cart .suggested-domains {
  margin-top: 1.5rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
  overflow: hidden;
}

body #order-standard_cart .suggested-domains .panel-heading,
body #order-standard_cart .suggested-domains .card-header {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--th-border);
  background: var(--th-surface-muted);
  font-family: var(--th-font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--th-gray-900);
}

body #order-standard_cart .suggested-domains .domain-lookup-suggestions-loader {
  padding: 1.25rem;
  background: transparent;
  font-size: 14px;
  color: var(--th-gray-500);
  text-align: left;
  opacity: 1;
}

body #order-standard_cart .suggested-domains .list-group { margin: 0; }

body #order-standard_cart .suggested-domains .list-group-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0.75rem 1.25rem;
  border: 0;
  border-top: 1px solid var(--th-border);
  border-radius: 0;
  font-family: var(--th-font-mono);
  font-size: 14px;
  color: var(--th-gray-900);
  text-align: left;
}

/* WHMCS öneri satırını jQuery .show() ile açıyor ve satıra satır içi
   display:block yazıyor; satır düzeni (alan adı solda, fiyat + düğme
   sağda) yalnızca !important ile korunabiliyor. Gizli satır (w-hidden)
   yine gizli kalır. */
body #order-standard_cart .suggested-domains .domain-suggestion:not(.w-hidden) { display: flex !important; }

body #order-standard_cart .suggested-domains .list-group-item.w-hidden { display: none; }
body #order-standard_cart .suggested-domains .list-group-item:first-child { border-top: 0; }

body #order-standard_cart .suggested-domains .extension { font-weight: 700; }

body #order-standard_cart .suggested-domains .actions {
  float: none;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

body #order-standard_cart .suggested-domains .price {
  padding: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--th-gray-700);
}

body #order-standard_cart .suggested-domains .more-suggestions {
  padding: 0.75rem;
  border-top: 1px solid var(--th-border);
  background: var(--th-surface);
  font-size: 14px;
}

body #order-standard_cart .suggested-domains .more-suggestions a { color: var(--th-brand-600); font-weight: 500; }

body #order-standard_cart .domain-suggestions-warning {
  padding: 0.75rem 1.25rem;
  font-size: 12px;
  text-align: left;
}

body #order-standard_cart #btnDomainContinue {
  margin-top: 1.25rem;
  min-width: 14rem;
  padding: 0.875rem 1.5rem;
}

@media (max-width: 575px) {
  body #order-standard_cart .suggested-domains .list-group-item { flex-wrap: wrap; }
  body #order-standard_cart .suggested-domains .actions { margin-left: 0; width: 100%; justify-content: space-between; flex-direction: row-reverse; }
}

/* Tek kutu tam genişlik: uzantı sütunu gizlenince input-group (Bootstrap 3
   display:table) içeriğine göre daralıyordu */
body #order-standard_cart .th-dcard .domain-input-group .domains-row > [class*="col-"]:first-child { flex: 1 1 auto; width: 100%; }
body #order-standard_cart .th-dcard .domain-input-group .input-group { display: flex; width: 100%; }
body #order-standard_cart .th-dcard .domain-input-group .input-group .form-control { flex: 1; width: 100%; float: none; }

/* Sonuç formu kartın içinde: üst boşluk */
body #order-standard_cart .th-dcard #frmProductDomainSelections { margin-top: 0.5rem; }
body #order-standard_cart .th-dcard #frmProductDomainSelections > .text-center { text-align: left; }

/* ── Alan adı yapılandırması (configuredomains): eklenti kartları ──
   Ortalı kutu, gri fiyat şeridi ve yeşil "Sepete Ekle" çubuğu yerine
   dönem kartlarıyla aynı seçim kartı: seçilince kırmızı çerçeve. */
body #order-standard_cart .panel-addon {
  overflow: hidden;
  border: 1.5px solid var(--th-gray-200);
  border-radius: 0.875rem;
  background: var(--th-surface);
  box-shadow: none;
  font-size: 14px;
  text-align: left;
  transition: border-color 0.15s;
}

body #order-standard_cart .panel-addon:hover { border-color: var(--th-brand-300); }

body #order-standard_cart .panel-addon .panel-body { padding: 1rem 1.125rem 0.75rem; }

body #order-standard_cart .panel-addon .panel-body label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
  font-family: var(--th-font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--th-gray-900);
}

body #order-standard_cart .panel-addon .panel-body { color: var(--th-gray-600); line-height: 1.55; }

body #order-standard_cart .panel-addon .panel-price {
  padding: 0 1.125rem 0.75rem;
  background: transparent;
  font-family: var(--th-font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--th-gray-800);
}

body #order-standard_cart .panel-addon .panel-add {
  padding: 0.625rem 1.125rem;
  border-top: 1px solid var(--th-border);
  border-radius: 0;
  background: var(--th-surface-muted);
  color: var(--th-brand-600);
  font-size: 13px;
  font-weight: 600;
}

body #order-standard_cart .panel-addon-selected {
  border-color: var(--th-brand-600);
  background: var(--th-brand-50);
}

body #order-standard_cart .panel-addon-selected .panel-add {
  background: var(--th-brand-600);
  color: #fff;
}

body #order-standard_cart .addon-products { margin-top: 1rem; }

/* ── Yapılandırma: ödeme dönemi kartları ── */
#order-standard_cart .th-field-label {
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--th-font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--th-gray-900);
}

#order-standard_cart .th-cycles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

#order-standard_cart .th-cycle {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 1rem;
  border: 1.5px solid var(--th-gray-200);
  border-radius: 0.875rem;
  background: var(--th-surface);
  font-weight: 400;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

#order-standard_cart .th-cycle:hover { border-color: var(--th-brand-300); }

#order-standard_cart .th-cycle:focus-visible {
  outline: 2px solid var(--th-brand-500);
  outline-offset: 2px;
}

#order-standard_cart .th-cycle.on {
  border-color: var(--th-brand-600);
  background: var(--th-brand-50);
}

#order-standard_cart .th-cycle input,
#order-standard_cart .th-cycle .iradio_square-blue {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#order-standard_cart .th-cycle-name {
  font-family: var(--th-font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--th-gray-900);
}

#order-standard_cart .th-cycle-price {
  font-family: var(--th-font-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--th-gray-900);
  font-variant-numeric: tabular-nums;
}

#order-standard_cart .th-cycle-note {
  font-size: 12.5px;
  color: var(--th-gray-500);
}

/* Avantaj rozeti yeşil: olumlu bilgi, kırmızı değil (CLAUDE.md) */
#order-standard_cart .th-cycle-badge {
  position: absolute;
  top: -0.625rem;
  right: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: var(--th-success);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

/* WHMCS'in açılır listesi formu gönderiyor; görünmez ama yerinde */
#order-standard_cart .th-cycle-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Ürün bilgisi kartı */
#order-standard_cart .product-info {
  margin: 0 0 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
}

#order-standard_cart .product-info .product-title {
  margin: 0 0 0.375rem;
  font-family: var(--th-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--th-gray-900);
}

#order-standard_cart .product-info p { color: var(--th-gray-600); }

/* ── Ödeme sayfası (checkout) ── */

/* Ara başlıklar: six'in ortalı, çizgi üstüne oturan mavi etiketi yerine
   sola hizalı başlık — sitedeki form bölümleriyle aynı */
body #order-standard_cart .sub-heading,
body #order-standard_cart .sub-heading-borderless {
  height: auto;
  margin: 2rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--th-border);
  text-align: left;
}

body #order-standard_cart .sub-heading span,
body #order-standard_cart .sub-heading-borderless span {
  position: static;
  top: 0;
  padding: 0;
  background: transparent;
  font-family: var(--th-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--th-gray-900);
}

/* "Zaten bir hesabınız var mı?" — ikincil düğme, açık mavi değil */
/* İşaretlemede düğmeler metinden önce geliyor (six'te float:right ile
   sağa atılıyordu); row-reverse metni sola, düğmeyi sağa alır */
body #order-standard_cart .already-registered {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface-muted);
}

body #order-standard_cart .already-registered p { margin: 0; color: var(--th-gray-600); }

body #order-standard_cart .already-registered .btn,
body #order-standard_cart .already-registered .pull-right,
body #order-standard_cart .already-registered .float-right { float: none; }

body #order-standard_cart .already-registered .btn-info,
body #order-standard_cart .already-registered .btn-warning {
  background: var(--th-surface);
  border: 1px solid var(--th-gray-300);
  color: var(--th-gray-800);
}

body #order-standard_cart .already-registered .btn-info:hover,
body #order-standard_cart .already-registered .btn-warning:hover {
  border-color: var(--th-brand-300);
  color: var(--th-brand-700);
}

/* Bugün ödenecek tutar — yeşil uyarı kutusu yerine nötr özet satırı.
   #frmCheckout ile sınırlı: sepet özetindeki tutar da aynı kimliği
   taşıyor ve bu kural ona da uygulanıp çerçeveli bir kutu çiziyordu. */
body #order-standard_cart #frmCheckout #totalDueToday {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface-muted);
  color: var(--th-gray-700);
  text-align: left;
}

body #order-standard_cart #frmCheckout #totalDueToday strong,
body #order-standard_cart #frmCheckout #totalDueToday #totalCartPrice {
  font-family: var(--th-font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--th-gray-900);
}

/* Ödeme yöntemleri — ortalanmış küçük radyolar yerine seçim kartları */
body #order-standard_cart #paymentGatewaysContainer > .text-center {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.625rem;
  text-align: left;
}

body #order-standard_cart #paymentGatewaysContainer .radio-inline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0.875rem 1rem;
  border: 1.5px solid var(--th-gray-200);
  border-radius: 0.75rem;
  background: var(--th-surface);
  font-size: 14px;
  font-weight: 500;
  color: var(--th-gray-800);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

body #order-standard_cart #paymentGatewaysContainer .radio-inline:hover { border-color: var(--th-brand-300); }

body #order-standard_cart #paymentGatewaysContainer .radio-inline:has(.checked),
body #order-standard_cart #paymentGatewaysContainer .radio-inline:has(input:checked) {
  border-color: var(--th-brand-600);
  background: var(--th-brand-50);
}

body #order-standard_cart #paymentGatewaysContainer > p { margin-bottom: 0.75rem; }

/* Sözleşme onayı ve sipariş düğmesi */
body #order-standard_cart #btnCompleteOrder {
  min-width: 16rem;
  padding: 0.875rem 1.5rem;
  font-size: 15px;
}

/* Ödeme düzeni: solda form, sağda sabit sipariş özeti */
body #order-standard_cart .th-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22.5rem;
  gap: 2rem;
  align-items: start;
}

body #order-standard_cart .th-checkout-main { min-width: 0; }

body #order-standard_cart .th-checkout-side {
  position: sticky;
  top: 8.5rem;
}

@media (max-width: 991px) {
  body #order-standard_cart .th-checkout { grid-template-columns: 1fr; }
  /* Dar ekranda özet formun üstünde: ödeme öncesi ne aldığını görsün */
  body #order-standard_cart .th-checkout-side { position: static; order: -1; }
}

body #order-standard_cart .th-sum {
  padding: 1.375rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
}

body #order-standard_cart .th-sum h2 {
  margin: 0 0 1rem;
  font-size: 18px;
  font-weight: 600;
  color: var(--th-gray-900);
}

body #order-standard_cart .th-sum-items {
  margin: 0 0 0.75rem;
  padding: 0 0 0.75rem;
  list-style: none;
  border-bottom: 1px solid var(--th-border);
}

body #order-standard_cart .th-sum-items li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

body #order-standard_cart .th-sum-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 14px;
  color: var(--th-gray-800);
}

body #order-standard_cart .th-sum-name small {
  font-size: 12.5px;
  color: var(--th-gray-500);
  overflow-wrap: anywhere;
}

body #order-standard_cart .th-sum-p,
body #order-standard_cart .th-sum-row span:last-child {
  font-family: var(--th-font-mono);
  font-size: 13.5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--th-gray-800);
}

body #order-standard_cart .th-sum-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.25rem 0;
  font-size: 13.5px;
  color: var(--th-gray-600);
}

body #order-standard_cart .th-sum-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--th-border);
  font-weight: 600;
  color: var(--th-gray-900);
}

body #order-standard_cart .th-sum-total b {
  font-family: var(--th-font-mono);
  font-size: 22px;
  font-weight: 600;
}

body #order-standard_cart .th-sum-edit {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--th-brand-600);
}

body #order-standard_cart .th-sum-note {
  margin: 0.75rem 0 0;
  font-size: 12.5px;
  color: var(--th-gray-500);
}

/* Hesap sekmeleri */
body #order-standard_cart .th-acc-tabs {
  display: inline-flex;
  gap: 0.25rem;
  margin: 0 0 1.25rem;
  padding: 0.25rem;
  border: 1px solid var(--th-border);
  border-radius: 9999px;
  background: var(--th-surface-muted);
}

body #order-standard_cart .th-acc-tab {
  padding: 0.5rem 1.125rem;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--th-gray-600);
  cursor: pointer;
}

body #order-standard_cart .th-acc-tab.on {
  background: var(--th-surface);
  color: var(--th-gray-900);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(3, 7, 18, 0.08);
}

body #order-standard_cart .th-acc-tab:focus-visible {
  outline: 2px solid var(--th-brand-500);
  outline-offset: 2px;
}

/* Sekmeler varken WHMCS'in düğmeli kutusu gizli; düğmeler JS için yerinde */
body #order-standard_cart .th-acc-native { display: none; }

/* Sözleşme ve sipariş düğmesi form sütununda sola hizalı */
body #order-standard_cart .th-checkout-main > form > .text-center:last-child {
  text-align: left;
}

/* ── Sepet: kalem listesi ── */
body #order-standard_cart .view-cart-items .item-title {
  font-family: var(--th-font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--th-gray-900);
}

body #order-standard_cart .view-cart-items .btn-link {
  color: var(--th-brand-600);
  font-weight: 500;
}

body #order-standard_cart .view-cart-items .btn-remove-from-cart { color: var(--th-gray-400); }
body #order-standard_cart .view-cart-items .btn-remove-from-cart:hover { color: var(--th-danger); }

/* "Sepeti boşalt" — koyu mavi sekme yerine sade bağlantı */
body #order-standard_cart .empty-cart {
  margin: 0.5rem 0 0;
  text-align: right;
}

body #order-standard_cart .empty-cart .btn {
  padding: 0.25rem 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--th-gray-500);
  font-size: 13px;
  font-weight: 500;
}

body #order-standard_cart .empty-cart .btn:hover { color: var(--th-danger); }

/* Bootstrap .row ve .clearfix ::before/::after ile "display:table"
   sözde öğe ekliyor. Bu kapları flex/grid yaptığımızda sözde öğeler
   görünmez birer öğe gibi araya giriyor: satırlar yaslanmıyor, içerik
   soldan boşlukla başlıyordu (alan adı kutusu 40px, sepet satırı 36px). */
body #order-standard_cart .domain-input-group > .row::before,
body #order-standard_cart .domain-input-group > .row::after,
body #order-standard_cart .domain-input-group .domains-row::before,
body #order-standard_cart .domain-input-group .domains-row::after,
body #order-standard_cart .view-cart-items .item > .row::before,
body #order-standard_cart .view-cart-items .item > .row::after,
body #order-standard_cart .order-summary .clearfix::before,
body #order-standard_cart .order-summary .clearfix::after,
body #order-standard_cart .already-registered::before,
body #order-standard_cart .already-registered::after,
body #order-standard_cart #frmCheckout #totalDueToday::before,
body #order-standard_cart #frmCheckout #totalDueToday::after {
  display: none;
}

/* ── Sepet görünümü (viewcart) ──
   standard_cart ürün tablosu başlığını six mavisiyle (#058), sipariş
   özetini koyu griyle (#666) çiziyor. Ürün tablosu nötr başlıklı kart,
   özet açık zeminli kart olur; marka rengi yalnızca "Ödeme Yap"ta.
   body ön eki şart: sipariş formu CSS'i bizden SONRA yükleniyor ve aynı
   ağırlıktaki kuralları onunki kazanıyor. */
body #order-standard_cart .order-summary {
  background-color: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  overflow: hidden;
}

body #order-standard_cart .order-summary h2 {
  color: var(--th-gray-900);
  font-family: var(--th-font-display);
  font-size: 18px;
  font-weight: 600;
  text-align: left;
  padding: 1rem 1.25rem 0.5rem;
}

body #order-standard_cart .view-cart-tabs .nav-tabs a {
  color: var(--th-gray-600);
}

body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded=true],
body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected=true] {
  color: var(--th-gray-900);
  background-color: var(--th-surface-muted);
  border-color: var(--th-border) var(--th-border) var(--th-surface-muted);
}

body #order-standard_cart .view-cart-tabs .tab-content {
  background-color: var(--th-surface-muted);
  border-radius: 0 0 var(--th-radius) var(--th-radius);
}

/* ── Sepet: maketteki düzen ──
   Tablo başlığı (Ürün/Seçenek · Adet · Fiyat) kalkıyor; kalemler kart
   içinde satır satır. Ürün satırının işaretlemesi şablonda yeniden
   yazıldı (th-item), eklenti ve alan adı satırları standard_cart
   işaretlemesiyle kalıp aynı görünüme CSS ile getiriliyor. */
body #order-standard_cart .view-cart-items-header { display: none; }

body #order-standard_cart .view-cart-items {
  padding: 0.25rem 1.25rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
}

body #order-standard_cart .view-cart-items .item {
  padding: 1rem 0;
  border-top: 1px solid var(--th-border);
  background: transparent;
}

body #order-standard_cart .view-cart-items .item:first-child { border-top: 0; }

body #order-standard_cart .view-cart-items .item > .row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 0;
}

body #order-standard_cart .view-cart-items .item > .row > div {
  float: none;
  width: auto;
  padding: 0;
}

body #order-standard_cart .view-cart-items .item > .row > div:first-child,
body #order-standard_cart .view-cart-items .item > .row > .th-item-main { flex: 1; min-width: 0; }

body #order-standard_cart .th-item-main {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}

body #order-standard_cart .view-cart-items .item-title {
  font-family: var(--th-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--th-gray-900);
}

body #order-standard_cart .th-item-meta,
body #order-standard_cart .view-cart-items .item-group {
  display: block;
  font-size: 13px;
  color: var(--th-gray-500);
}

body #order-standard_cart .view-cart-items .item-domain {
  display: block;
  font-family: var(--th-font-mono);
  font-size: 12.5px;
  color: var(--th-gray-600);
  overflow-wrap: anywhere;
}

body #order-standard_cart .th-item-opts {
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--th-gray-500);
}

body #order-standard_cart .th-item-links {
  display: flex;
  gap: 1rem;
  margin-top: 0.375rem;
  font-size: 13px;
}

body #order-standard_cart .th-item-links a {
  font-weight: 500;
  color: var(--th-brand-600);
}

body #order-standard_cart .th-item-links .btn-remove-from-cart {
  padding: 0;
  border: 0;
  background: transparent;
  font-weight: 500;
  color: var(--th-gray-500);
  cursor: pointer;
}

body #order-standard_cart .th-item-links .btn-remove-from-cart:hover { color: var(--th-danger); }

body #order-standard_cart .th-qty {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 13px;
  color: var(--th-gray-600);
}

body #order-standard_cart .th-qty label { margin: 0; font-weight: 500; }
body #order-standard_cart .th-qty input { width: 4.5rem; height: 2.125rem; padding: 0.25rem; }
body #order-standard_cart .th-qty .btn { padding: 0.3125rem 0.75rem; }

body #order-standard_cart .view-cart-items .item-price {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.125rem;
  text-align: right;
}

body #order-standard_cart .view-cart-items .item-price > span:first-child {
  font-family: var(--th-font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--th-gray-900);
  white-space: nowrap;
}

body #order-standard_cart .view-cart-items .item-price .cycle,
body #order-standard_cart .view-cart-items .item-price small {
  font-size: 12px;
  color: var(--th-gray-500);
}

/* standard_cart çift sıralı satırlara gri zemin veriyor; kart içinde
   satırlar çizgiyle ayrılıyor, zemin tek renk */
body #order-standard_cart .view-cart-items .item:nth-child(even) { background: transparent; }

/* Ürün ikonu — maketteki kare rozet.
   !important tek istisna: standard_cart ".item span:not(.caret):not(.renewal-price)
   {display:block}" kuralı iki :not() yüzünden kimlik + 4 sınıf ağırlığında;
   ön ekle aşılamıyor. */
body #order-standard_cart .th-item-ic {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  background: var(--th-brand-50);
  color: var(--th-brand-600);
}

body #order-standard_cart .view-cart-items .item > .row > .th-item-ic + div { flex: 1; min-width: 0; }

/* Promosyon kodu: sekme yerine kalem listesinin altında tek satır.
   "Tahmini vergiler" sekmesi gizli: Türkiye'de KDV tek oran, tahmin
   gerektirmiyor. */
body #order-standard_cart .view-cart-tabs { margin-top: 1rem; }
body #order-standard_cart .view-cart-tabs .nav-tabs { display: none; }

body #order-standard_cart .view-cart-tabs .tab-content {
  padding: 0;
  background: transparent;
}

body #order-standard_cart .view-cart-tabs #applyPromo form {
  display: flex;
  gap: 0.5rem;
}

body #order-standard_cart .view-cart-tabs #applyPromo .form-group { flex: 1; margin: 0; }

body #order-standard_cart .view-cart-tabs #applyPromo .btn-block {
  display: inline-block;
  width: auto;
  margin: 0;
  white-space: nowrap;
}

/* Sipariş özeti: düz satırlar, tutar sağda, düğme tam genişlik */
body #order-standard_cart .order-summary .summary-container {
  padding: 0 1.25rem 1.25rem;
  background: transparent;
  border: 0;
  font-size: 14px;
}

body #order-standard_cart .order-summary .subtotal,
body #order-standard_cart .order-summary .bordered-totals > div,
body #order-standard_cart .order-summary .recurring-totals {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.375rem 0;
  border: 0;
  color: var(--th-gray-600);
}

body #order-standard_cart .order-summary .bordered-totals {
  margin: 0;
  padding: 0;
  border: 0;
}

body #order-standard_cart .order-summary .subtotal > span:last-child,
body #order-standard_cart .order-summary .bordered-totals span:last-child,
body #order-standard_cart .order-summary .recurring-charges {
  float: none;
  font-family: var(--th-font-mono);
  font-size: 13.5px;
  font-style: normal;
  color: var(--th-gray-800);
  text-align: right;
}

body #order-standard_cart .order-summary .recurring-totals > span:first-child { float: none; }

body #order-standard_cart .order-summary .subtotal > span:first-child,
body #order-standard_cart .order-summary .bordered-totals span:first-child {
  float: none;
  font-size: 14px;
}

body #order-standard_cart .order-summary .total-due-today {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 0.125rem;
  margin: 0.75rem 0 1rem;
  padding: 0.875rem 0 0;
  border-top: 1px solid var(--th-border);
  background: transparent;
  text-align: left;
}

body #order-standard_cart .order-summary .total-due-today > span:last-child {
  font-size: 13px;
  font-weight: 600;
  color: var(--th-gray-700);
}

body #order-standard_cart .order-summary .total-due-today .amt {
  font-family: var(--th-font-mono);
  font-size: 26px;
  font-weight: 600;
  color: var(--th-gray-900);
}

body #order-standard_cart .order-summary .text-right { text-align: center; }

body #order-standard_cart .order-summary .btn-checkout {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 15px;
}

body #order-standard_cart .order-summary .btn-continue-shopping {
  margin-top: 0.5rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--th-gray-500);
}

body #order-standard_cart .order-summary .th-sum-note {
  margin: 0.75rem 0 0;
  font-size: 12.5px;
  text-align: center;
  color: var(--th-gray-500);
}

@media (max-width: 575px) {
  body #order-standard_cart .view-cart-items .item > .row { flex-direction: column; gap: 0.5rem; }
  body #order-standard_cart .view-cart-items .item-price { align-items: flex-start; text-align: left; }
}

/* Sepet başlığı 36px geliyordu (#order-standard_cart .font-size-36);
   diğer sayfa başlıklarıyla aynı boya çekilir. */
#order-standard_cart .header-lined h1.font-size-36 {
  font-size: 28px;
}

/* ── Sayfa başlığı ──
   six: .header-lined h1{color:#058...} — mavi başlık buradan geliyordu.
   Sipariş formu CSS'i bizimkinden SONRA yüklendiği için özgüllük şart. */
body .header-lined h1 {
  color: var(--th-gray-900);
  border-bottom: 0;
  font-weight: 600;
}

.dark body .header-lined h1 {
  color: var(--th-gray-50);
}

body .header-lined .breadcrumb li a {
  color: var(--th-gray-500);
}

body .header-lined .breadcrumb li a:hover {
  color: var(--th-brand-600);
}

body .header-lined .breadcrumb > .active {
  color: var(--th-gray-700);
}

/* ═════════ Liste tabloları: six kalıntıları ═════════
   Hizmetlerim, Faturalarım, Destek Taleplerim, Alan Adlarım. Six burada
   koyu bilgi şeridi (#4f5360), başlıkta 4px yeşil çizgi, çift satırlarda
   mavi zemin ve gri alt şerit kullanıyor; kurallarının bir kısmı
   !important. Seçiciler bilerek ağır (body + :nth-child(n)), !important
   yalnızca six'in kendisi !important kullandığı iki yerde. */

/* Üst satır: bilgi metni solda, arama sağda — açık zemin */
body .dataTables_wrapper .dataTables_info {
  padding: 1rem 1.25rem !important;
  border: 0;
  background: transparent;
  color: var(--th-gray-500);
  font-size: 13px;
  font-weight: 400;
}

body .dataTables_wrapper .dataTables_filter label { padding: 0.625rem 1rem; }

body .dataTables_wrapper .dataTables_filter label .form-control {
  height: 2.375rem;
  padding: 0.375rem 0.75rem 0.375rem 2.25rem !important;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius);
  background-color: var(--th-surface);
  background-position: 0.625rem 50%;
  background-size: 14px;
}

body .dataTables_wrapper .dataTables_filter label .form-control:focus {
  border-color: var(--th-brand-500);
  box-shadow: 0 0 0 3px var(--th-brand-100);
}

/* Başlık satırı: yeşil çizgi yerine ince gri çizgi, sola hizalı küçük
   büyük harf etiket */
body .dataTables_wrapper table.table-list thead th:nth-child(n) {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--th-border);
  background: var(--th-surface-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--th-gray-500);
  text-align: left;
}

body .dataTables_wrapper table.table-list thead th.sorting_asc,
body .dataTables_wrapper table.table-list thead th.sorting_desc {
  background: var(--th-gray-100);
  color: var(--th-gray-700);
}

body table.dataTable thead .sorting::after,
body table.dataTable thead .sorting_asc::after,
body table.dataTable thead .sorting_desc::after {
  bottom: 50%;
  transform: translateY(50%);
  font-size: 11px;
}

/* Gövde: zebra yok, satır üzerine gelince açık zemin */
body .table-list > tbody > tr > td,
body .table-list > tbody > tr:nth-child(even) > td {
  padding: 0.875rem 1rem;
  border-top: 1px solid var(--th-border);
  background: var(--th-surface);
  font-size: 14px;
  color: var(--th-gray-800);
  text-align: left;
}

body .table-list > tbody > tr:hover > td { background: var(--th-surface-muted); }

body .table-list > tbody > tr > td strong { font-weight: 600; color: var(--th-gray-900); }

/* Alt satır: kayıt sayısı ve sayfalama — gri şerit yerine kartın içinde */
body .dataTables_wrapper .dataTables_length {
  padding: 0.75rem 1.25rem;
  background: transparent;
  font-size: 13px;
  color: var(--th-gray-500);
}

body .dataTables_wrapper .dataTables_length label { padding: 0; }

body .dataTables_wrapper .dataTables_length label .form-control {
  height: 2rem;
  padding: 0 0.5rem;
  border: 1px solid var(--th-border);
  border-radius: 0.5rem;
}

body .dataTables_wrapper .dataTables_paginate { padding: 0.75rem 1.25rem; }

body .dataTables_wrapper .dataTables_paginate .pagination > li > a,
body .dataTables_wrapper .dataTables_paginate .pagination > li > span {
  padding: 0.375rem 0.75rem;
  font-size: 13px;
}

body .dataTables_wrapper .dataTables_paginate .pagination > li:first-child > a { border-radius: 0.5rem 0 0 0.5rem; }
body .dataTables_wrapper .dataTables_paginate .pagination > li:last-child > a { border-radius: 0 0.5rem 0.5rem 0; }

/* Durum rozetleri satır içinde ortalanmasın (six text-align:center) */
body .table-list td .label,
body .table-list td .status { display: inline-block; }

/* Hizmet satırındaki kilit/sunucu ikonu sütunu */
body .table-list td img { max-height: 2rem; }

/* İç sayfalarda kalan mavi bağlantılar (ürün detayı "www.", "Son
   Güncelleme"). Yalnızca kart gövdesindeki ve paragraf içindeki metin
   bağlantıları; sayfalama, sekme ve düğmeler kapsam dışı (önceki geniş
   kural etkin sayfa numarasını kırmızı zeminde kırmızı yapıp
   görünmez kılıyordu). */
body .main-content .panel-body a:not(.btn):not(.label),
body .main-content p > a:not(.btn) { color: var(--th-brand-600); }

/* ═════════ Fatura görüntüleme (viewinvoice.tpl) ═════════
   Ayrı sayfa (header.tpl yok). Sitedeki kartlarla aynı dil: beyaz kart,
   ince çerçeve, küçük gri etiketler + koyu değerler, tutarlar tabular.
   Ödenmemiş faturada ödeme kutusu öne çıkıyor; yazdırmada yalnızca
   fatura kalıyor. */
body.th-inv-page {
  margin: 0;
  background: var(--th-surface-muted);
  font-family: var(--th-font-sans);
  font-size: 14px;
  color: var(--th-gray-700);
}

.th-inv-wrap {
  max-width: 54rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 2.5rem;
}

.th-inv-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.th-inv-mono { font-family: var(--th-font-mono); font-size: 12.5px; }

/* Üst şerit */
.th-inv-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.th-inv-back,
.th-inv-act {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--th-gray-700);
  font-weight: 500;
  text-decoration: none;
}

.th-inv-back:hover { color: var(--th-brand-600); text-decoration: none; }

.th-inv-actions { display: flex; gap: 0.5rem; }

.th-inv-act {
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--th-border);
  border-radius: 0.625rem;
  background: var(--th-surface);
  font-size: 13px;
}

.th-inv-act:hover {
  border-color: var(--th-brand-300);
  color: var(--th-brand-600);
  text-decoration: none;
}

/* Kart */
.th-inv {
  padding: 2.25rem 2.5rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
  box-shadow: 0 1px 3px rgba(3, 7, 18, 0.05);
}

@media (max-width: 640px) { .th-inv { padding: 1.5rem 1.125rem; } }

.th-inv h2 {
  margin: 0 0 0.625rem;
  font-family: var(--th-font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--th-gray-500);
}

/* Başlık */
.th-inv-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.th-inv-logo { display: block; height: 2.25rem; width: auto; }
.th-inv-company { font-family: var(--th-font-display); font-size: 22px; color: var(--th-gray-900); }

.th-inv-title { text-align: right; }

.th-inv-title h1 {
  margin: 0.5rem 0 0;
  font-family: var(--th-font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--th-gray-900);
}

.th-inv-title h1 span { font-family: var(--th-font-mono); font-size: 22px; font-weight: 500; }

@media (max-width: 640px) { .th-inv-title { text-align: left; } }

.th-inv-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.th-inv-status::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: currentColor;
}

.th-inv-status.unpaid,
.th-inv-status.collections { background: var(--th-danger-bg); color: var(--th-danger); }
.th-inv-status.paid { background: var(--th-success-bg); color: var(--th-success); }
.th-inv-status.pending { background: var(--th-warning-bg); color: var(--th-warning); }
.th-inv-status.draft,
.th-inv-status.cancelled,
.th-inv-status.refunded { background: var(--th-gray-100); color: var(--th-gray-600); }

/* Özet şeridi */
.th-inv-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 1.75rem 0 0;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius);
  overflow: hidden;
}

.th-inv-meta > div { padding: 0.875rem 1rem; }
.th-inv-meta > div + div { border-left: 1px solid var(--th-border); }

.th-inv-meta dt {
  margin-bottom: 0.25rem;
  font-size: 12px;
  font-weight: 500;
  color: var(--th-gray-500);
}

.th-inv-meta dd { margin: 0; font-weight: 600; color: var(--th-gray-900); }

@media (max-width: 640px) {
  .th-inv-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-inv-meta > div:nth-child(3) { border-left: 0; }
  .th-inv-meta > div:nth-child(n+3) { border-top: 1px solid var(--th-border); }
}

/* Bildirimler */
.th-inv-msg {
  margin: 1.25rem 0 0;
  padding: 0.875rem 1rem;
  border: 1px solid;
  border-radius: var(--th-radius);
  font-size: 14px;
}

.th-inv-msg b { margin-right: 0.375rem; }
.th-inv-msg.success { border-color: color-mix(in srgb, var(--th-success) 30%, transparent); background: var(--th-success-bg); color: var(--th-success); }
.th-inv-msg.info { border-color: var(--th-border); background: var(--th-gray-50); color: var(--th-gray-700); }
.th-inv-msg.danger { border-color: color-mix(in srgb, var(--th-danger) 25%, transparent); background: var(--th-danger-bg); color: var(--th-danger); }

/* Ödeme kutusu */
.th-inv-pay {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  margin-top: 1.25rem;
  border: 1px solid var(--th-brand-200);
  border-radius: var(--th-radius-lg);
  overflow: hidden;
}

@media (max-width: 640px) { .th-inv-pay { grid-template-columns: minmax(0, 1fr); } }

.th-inv-pay-sum {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  padding: 1.25rem;
  background: var(--th-brand-50);
}

.th-inv-pay-sum span { font-size: 12.5px; font-weight: 600; color: var(--th-brand-700); }
.th-inv-pay-sum b { font-family: var(--th-font-display); font-size: 28px; font-weight: 600; color: var(--th-gray-900); }
.th-inv-pay-sum small { font-size: 12.5px; color: var(--th-gray-600); }

.th-inv-pay-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
}

.th-inv-gw label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--th-gray-700);
}

.th-inv-gw .form-inline select,
.th-inv-gw select {
  width: 100%;
  max-width: 20rem;
  height: auto;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius);
  background-color: var(--th-surface);
  font-size: 14px;
  color: var(--th-gray-800);
}

/* Ödeme yönteminin çıktısı (havale talimatı metni ya da ödeme formu) */
.th-inv-paybtn {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--th-gray-700);
  text-align: left;
  overflow-wrap: anywhere;
}

.th-inv-paybtn:empty { display: none; }
.th-inv-paybtn a { color: var(--th-brand-600); font-weight: 500; }
.th-inv-paybtn .btn,
.th-inv-paybtn input[type="submit"],
.th-inv-paybtn button {
  margin-top: 0.5rem;
  padding: 0.625rem 1.25rem;
  border: 0;
  border-radius: 0.625rem;
  background: var(--th-brand-600);
  color: #fff;
  font-weight: 600;
}

.th-inv-paybtn .btn:hover,
.th-inv-paybtn input[type="submit"]:hover,
.th-inv-paybtn button:hover { background: var(--th-brand-700); }

/* Kredi uygulama */
.th-inv-credit {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--th-success) 30%, transparent);
  border-radius: var(--th-radius);
  background: var(--th-success-bg);
}

.th-inv-credit p { margin: 0 0 0.75rem; color: var(--th-success); }

.th-inv-credit-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.th-inv-credit-row label { margin: 0; font-weight: 600; }
.th-inv-credit-row .form-control { width: 9rem; }

/* Taraflar */
.th-inv-parties {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (max-width: 640px) { .th-inv-parties { grid-template-columns: minmax(0, 1fr); } }

.th-inv-parties address {
  margin: 0;
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--th-gray-600);
  overflow-wrap: anywhere;
}

.th-inv-parties address b { color: var(--th-gray-900); font-weight: 600; }
.th-inv-parties address a { color: var(--th-brand-600); }

/* Kalemler ve işlemler tabloları */
.th-inv-items,
.th-inv-tx { margin-top: 2rem; }

.th-inv table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.th-inv th {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--th-border);
  background: var(--th-gray-50);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  color: var(--th-gray-500);
}

.th-inv th:first-child { border-top-left-radius: 0.5rem; }
.th-inv th:last-child { border-top-right-radius: 0.5rem; }

.th-inv td {
  padding: 0.875rem 0.75rem;
  border-bottom: 1px solid var(--th-border);
  vertical-align: top;
  color: var(--th-gray-800);
}

.th-inv .r { text-align: right; }

.th-inv-items td { white-space: pre-line; }
.th-inv-items td.r { white-space: nowrap; font-weight: 600; }

.th-inv-empty { text-align: center; color: var(--th-gray-500) !important; }

.th-inv-tx tfoot td {
  border-bottom: 0;
  font-weight: 600;
  color: var(--th-gray-900);
}

.th-inv-tx tfoot td:first-child { text-align: right; color: var(--th-gray-600); }

@media (max-width: 640px) {
  .th-inv table { font-size: 13px; }
  .th-inv th,
  .th-inv td { padding: 0.625rem 0.5rem; }
}

/* Toplam özeti: sağa yaslı */
.th-inv-totals {
  width: 100%;
  max-width: 20rem;
  margin: 1rem 0 0 auto;
}

.th-inv-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3125rem 0.75rem;
}

.th-inv-totals dt { font-weight: 500; color: var(--th-gray-500); }
.th-inv-totals dd { margin: 0; color: var(--th-gray-800); }

.th-inv-totals > .grand {
  margin-top: 0.5rem;
  padding: 0.75rem;
  border-radius: 0.625rem;
  background: var(--th-gray-50);
}

.th-inv-totals > .grand dt { font-weight: 600; color: var(--th-gray-900); }
.th-inv-totals > .grand dd { font-family: var(--th-font-display); font-size: 20px; font-weight: 600; color: var(--th-gray-900); }

.th-inv-note { margin: 0.75rem 0 0; font-size: 12px; color: var(--th-gray-500); }

.th-inv-foot {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--th-gray-500);
}

.th-inv-foot a { color: var(--th-brand-600); font-weight: 500; }

/* Yazdırma: yalnızca fatura, gölgesiz, kenar boşluksuz */
@media print {
  body.th-inv-page { background: #fff; }
  .th-inv-wrap { max-width: none; padding: 0; }
  .th-inv { padding: 0; border: 0; box-shadow: none; }
  .th-inv th { background: none; }
  .th-inv-totals > .grand { background: none; border-top: 2px solid var(--th-gray-900); border-radius: 0; }
}

/* Markdown düzenleyici (talep açma ve talep yanıtı) */
body .md-editor {
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius);
  overflow: hidden;
  background: var(--th-surface);
}

body .md-editor > .md-header {
  padding: 0.5rem;
  border-bottom: 1px solid var(--th-border);
  background: var(--th-gray-50);
}

body .md-editor > textarea {
  border: 0;
  border-radius: 0;
  padding: 0.875rem 1rem;
  font-size: 14px;
  background: var(--th-surface);
}

body .md-editor > textarea:focus { box-shadow: none; }

body .md-editor.active {
  border-color: var(--th-brand-400);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* Önizleme düğmesi six'te birincil (kırmızı) görünüyordu; araç çubuğunda
   tek renkli düğme dikkati Gönder'den çalıyor. Basılıyken vurgulu. */
body .md-editor .md-header .btn-primary {
  border-color: var(--th-border);
  background: var(--th-surface);
  color: var(--th-gray-700);
}

body .md-editor .md-header .btn-primary.active {
  border-color: var(--th-brand-300);
  background: var(--th-brand-50);
  color: var(--th-brand-600);
  box-shadow: none;
}

body .md-editor > .md-footer {
  padding: 0.375rem 1rem;
  border-top: 1px solid var(--th-border);
  background: var(--th-gray-50);
  font-size: 12px;
  color: var(--th-gray-500);
}

/* ═════════ Liste tabloları: dar ekran ═════════
   DataTables responsive sütun gizlemesini six'in dar dolgularına göre
   hesaplıyor; bizim dolgularla tablo karttan ~65px taşıyor ve
   .table-container overflow:hidden olduğu için son sütun (Durum)
   görünmüyordu. Tablo kendi içinde yatay kayıyor; bilgi şeridi ve
   sayfalama yerinde kalıyor. */
body .table-container .listtable {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Destek talepleri listesi: six numarayı italik, başlığı mavi basıyor */
body .table-list a.border-left {
  display: block;
  border: 0;
  color: var(--th-gray-900);
  font-weight: 600;
  text-decoration: none;
}

body .table-list a.border-left .ticket-number {
  display: block;
  font-family: var(--th-font-mono);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  color: var(--th-gray-500);
}

body .table-list tr:hover a.border-left .ticket-subject { color: var(--th-brand-600); }

.dark body .table-list a.border-left { color: var(--th-gray-100); }

/* Arama kutusu ve "Toplam … görüntülenmektedir" şeridi de .listtable
   içinde; tablo kayarken onlar yerinde kalsın, metin sığmazsa alt
   satıra geçsin (six nowrap veriyor). */
body .table-container .listtable > .dataTables_filter,
body .table-container .listtable > .dataTables_info {
  position: sticky;
  left: 0;
}

body .table-container .listtable > .dataTables_info { white-space: normal; }

/* ═════════ Alan adlarım listesi (clientarea.php?action=domains) ═════════ */
body #tableDomainsList td.sorting_1 > a,
body #tableDomainsList td > a[target="_blank"] {
  color: var(--th-gray-900);
  font-weight: 600;
}

body #tableDomainsList tr:hover td > a[target="_blank"] { color: var(--th-brand-600); }

/* Tarihler üç satıra kırılıyordu */
body #tableDomainsList td:has(> span.hidden) { white-space: nowrap; }

body #tableDomainsList .ssl-info img { width: 22px; height: auto; opacity: 0.7; }

.dark body #tableDomainsList td > a[target="_blank"] { color: var(--th-gray-100); }


/* ═════════ Ortak parçalar (ezilen iç sayfalar) ═════════
   Durum etiketi, nokta, segment seçici, anahtar satırı, seçim kartı,
   ikincil tehlike düğmesi. */

/* hidden özniteliği display kuralları tarafından ezilmesin */
.th-type[hidden],
.th-acc [hidden],
.th-dom [hidden] { display: none !important; }

.th-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.625rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.th-pill::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; }
.th-pill.ok { background: var(--th-success-bg); color: var(--th-success); }
.th-pill.wait { background: var(--th-warning-bg); color: var(--th-warning); }
.th-pill.bad { background: var(--th-danger-bg); color: var(--th-danger); }
.th-pill.off { background: var(--th-gray-100); color: var(--th-gray-600); }

.th-dot {
  display: inline-block;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--th-gray-400, #9ca3af);
}

.th-dot.ok { background: var(--th-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--th-success) 18%, transparent); }
.th-dot.bad { background: var(--th-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--th-danger) 15%, transparent); }
.th-dot.off { background: var(--th-gray-400, #9ca3af); box-shadow: 0 0 0 3px var(--th-gray-100); }

/* Segment seçici (ör. öncelik): radyo düğmeleri bitişik düğme grubu */
.th-seg {
  display: inline-flex;
  padding: 0.25rem;
  border: 1px solid var(--th-border);
  border-radius: 0.75rem;
  background: var(--th-gray-50);
}

.th-seg label { margin: 0; cursor: pointer; }
.th-seg input { position: absolute; opacity: 0; pointer-events: none; }

.th-seg span {
  display: block;
  padding: 0.4375rem 1.125rem;
  border-radius: 0.5rem;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--th-gray-600);
  transition: background-color 0.15s, color 0.15s;
}

.th-seg input:checked + span {
  background: var(--th-surface);
  color: var(--th-gray-900);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(3, 7, 18, 0.1);
}

.th-seg input:focus-visible + span { outline: 2px solid var(--th-brand-500); outline-offset: 1px; }

/* Seçim kartı (radyo) */
.th-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }

@media (max-width: 575px) { .th-choice { grid-template-columns: minmax(0, 1fr); } }

.th-choice-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  padding: 0.875rem 1rem;
  border: 1.5px solid var(--th-border);
  border-radius: 0.875rem;
  background: var(--th-surface);
  font-weight: 400;
  cursor: pointer;
}

.th-choice-card:has(input:checked) { border-color: var(--th-brand-600); background: var(--th-brand-50); }
.th-choice-card input { margin: 0.1875rem 0 0; accent-color: var(--th-brand-600); }
.th-choice-card b { display: block; font-size: 14px; color: var(--th-gray-900); }
.th-choice-card small { display: block; margin-top: 0.125rem; font-size: 12.5px; color: var(--th-gray-500); }

/* Anahtar satırı: onay kutusu görünümü anahtar */
.th-switches {
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius);
  overflow: hidden;
}

.th-switch-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0;
  padding: 0.8125rem 1rem;
  font-weight: 400;
  cursor: pointer;
}

.th-switch-row + .th-switch-row { border-top: 1px solid var(--th-border); }
.th-switch-row:hover { background: var(--th-gray-50); }

.th-switch-row input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }

.th-switch-ui {
  position: relative;
  flex: none;
  width: 2.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--th-gray-300, #d1d5db);
  transition: background-color 0.15s;
}

.th-switch-ui::after {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s;
}

.th-switch-row input:checked + .th-switch-ui { background: var(--th-brand-600); }
.th-switch-row input:checked + .th-switch-ui::after { transform: translateX(1rem); }
.th-switch-row input:focus-visible + .th-switch-ui { outline: 2px solid var(--th-brand-500); outline-offset: 2px; }

.th-switch-t { font-size: 14px; color: var(--th-gray-700); }

/* İkincil tehlike düğmesi (devre dışı bırak, kapat …) */
body .btn.th-btn-danger {
  border-color: var(--th-border);
  background: var(--th-surface);
  color: var(--th-danger);
}

body .btn.th-btn-danger:hover,
body .btn.th-btn-danger:focus {
  border-color: var(--th-danger);
  background: var(--th-brand-50);
  color: var(--th-danger);
}

.th-help { margin: 0.375rem 0 0; font-size: 12.5px; line-height: 1.5; color: var(--th-gray-500); }

/* ═════════ Destek talebi 1. adım (supportticketsubmit-stepone.tpl) ═════════ */
.th-tk1 { max-width: 60rem; }

.th-tk1-kb {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: linear-gradient(90deg, var(--th-brand-50), var(--th-surface) 60%);
  color: inherit;
  text-decoration: none;
}

.th-tk1-kb:hover { border-color: var(--th-brand-300); color: inherit; text-decoration: none; }

.th-tk1-kb-ic,
.th-tk1-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: var(--th-brand-50);
  color: var(--th-brand-600);
}

.th-tk1-kb-ic { background: var(--th-surface); box-shadow: 0 1px 3px rgba(3, 7, 18, 0.08); }

.th-tk1-kb-t { flex: 1; min-width: 0; }
.th-tk1-kb-t b { display: block; font-size: 15px; color: var(--th-gray-900); }
.th-tk1-kb-t span { display: block; margin-top: 0.125rem; font-size: 13px; color: var(--th-gray-600); }

.th-tk1-kb-go {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--th-brand-600);
}

@media (max-width: 575px) { .th-tk1-kb-go { display: none; } }

.th-tk1-h { margin: 2rem 0 0.25rem; font-size: 20px; }
.th-tk1-sub { margin: 0 0 1.25rem; font-size: 14px; color: var(--th-gray-500); }

.th-tk1-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (max-width: 767px) { .th-tk1-grid { grid-template-columns: minmax(0, 1fr); } }

.th-tk1-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.th-tk1-card:hover,
.th-tk1-card:focus-visible {
  border-color: var(--th-brand-300);
  box-shadow: 0 6px 18px rgba(3, 7, 18, 0.07);
  color: inherit;
  text-decoration: none;
  transform: translateY(-1px);
}

.th-tk1-t { flex: 1; min-width: 0; }
.th-tk1-t b { display: block; font-size: 15px; font-weight: 600; color: var(--th-gray-900); }
.th-tk1-t span { display: block; margin-top: 0.1875rem; font-size: 13px; line-height: 1.45; color: var(--th-gray-500); }

.th-tk1-go { flex: none; color: var(--th-gray-300, #d1d5db); transition: color 0.15s, transform 0.15s; }
.th-tk1-card:hover .th-tk1-go { color: var(--th-brand-600); transform: translateX(2px); }

.th-tk1-foot { margin: 1.5rem 0 0; font-size: 13.5px; color: var(--th-gray-500); }
.th-tk1-foot a { color: var(--th-brand-600); font-weight: 600; }

/* ═════════ Destek talebi 2. adım ve yanıt formu ═════════ */
.th-tk2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 991px) { .th-tk2 { grid-template-columns: minmax(0, 1fr); } }

/* Talep formunda WHMCS kenar çubuğu gizli: sağdaki ipucu sütunuyla
   birlikte form üç sütun arasında daralıyordu */
#main-body .row:has(.th-tk2) > .sidebar { display: none; }
#main-body .row:has(.th-tk2) > .col-md-9 { width: 100%; }

.th-tk2-main {
  padding: 1.5rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
}

@media (max-width: 575px) { .th-tk2-main { padding: 1.125rem; } }

.th-tk2-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

@media (max-width: 575px) { .th-tk2-row { grid-template-columns: minmax(0, 1fr); gap: 0; } }

.th-tk2-prio { margin: 0 0 15px; padding: 0; border: 0; }

.th-tk2-prio legend {
  margin-bottom: 5px;
  padding: 0;
  border: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--th-gray-700);
}

.th-tk2-drop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1.5px dashed var(--th-border);
  border-radius: var(--th-radius);
  background: var(--th-gray-50);
}

.th-tk2-drop > input[type="file"] {
  flex: 1 1 14rem;
  height: auto;
  padding: 0.375rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
}

.th-tk2-drop #fileUploadsContainer { flex-basis: 100%; }
.th-tk2-drop #fileUploadsContainer:empty { display: none; }
.th-tk2-drop #fileUploadsContainer input[type="file"] { margin-top: 0.5rem; font-size: 13px; }

.th-tk2-more {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--th-border);
  border-radius: 0.5rem;
  background: var(--th-surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--th-gray-700);
}

.th-tk2-more:hover { border-color: var(--th-brand-300); color: var(--th-brand-600); }

.th-tk2-hint { margin: 0.375rem 0 0; font-size: 12px; color: var(--th-gray-500); }

.th-tk2-captcha:empty { display: none; }

.th-tk2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--th-border);
}

.th-tk2-side { display: flex; flex-direction: column; gap: 0.75rem; }

@media (min-width: 992px) { .th-tk2-side { position: sticky; top: 1.5rem; } }

.th-tk2-box {
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
}

.th-tk2-box h3 {
  margin: 0 0 0.625rem;
  font-family: var(--th-font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--th-gray-500);
}

.th-tk2-who { margin: 0; }
.th-tk2-who b { display: block; font-size: 14.5px; color: var(--th-gray-900); }
.th-tk2-who span { display: block; font-size: 13px; color: var(--th-gray-600); overflow-wrap: anywhere; }
.th-tk2-note { margin: 0.5rem 0 0; font-size: 12.5px; color: var(--th-gray-500); }

.th-tk2-tips { margin: 0; padding: 0; list-style: none; }

.th-tk2-tips li {
  position: relative;
  padding-left: 1.375rem;
  font-size: 13px;
  line-height: 1.5;
  color: var(--th-gray-600);
}

.th-tk2-tips li + li { margin-top: 0.5rem; }

.th-tk2-tips li::before {
  content: "";
  position: absolute;
  top: 0.375rem;
  left: 0.25rem;
  width: 0.5rem;
  height: 0.3rem;
  border-left: 2px solid var(--th-brand-600);
  border-bottom: 2px solid var(--th-brand-600);
  transform: rotate(-45deg);
}

.th-tk2-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0 0.25rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--th-gray-600);
}

.th-tk2-back:hover { color: var(--th-brand-600); text-decoration: none; }

/* ═════════ Talep görüntüleme (viewticket.tpl) ═════════ */
.th-vt-closed {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius);
  background: var(--th-gray-50);
  font-size: 13.5px;
  color: var(--th-gray-700);
}

.th-vt-head {
  margin-bottom: 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
}

.th-vt-id { font-family: var(--th-font-mono); font-size: 12.5px; color: var(--th-gray-500); }

.th-vt-head h2 {
  margin: 0.25rem 0 0.875rem;
  font-size: 20px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.th-vt-head dl { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: 0; }
.th-vt-head dt { font-size: 11.5px; font-weight: 500; color: var(--th-gray-500); }
.th-vt-head dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--th-gray-900); }

/* Yanıt kutusu: six'in aç/kapa paneli, kart görünümünde */
body .panel.th-vt-reply {
  margin-bottom: 1.25rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
  box-shadow: none;
  overflow: hidden;
}

body .th-vt-reply > .panel-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border: 0;
  background: var(--th-surface);
  cursor: pointer;
}

body .th-vt-reply.panel-collapsed > .panel-heading:hover { background: var(--th-gray-50); }

.th-vt-reply-ic {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.625rem;
  background: var(--th-brand-600);
  color: #fff;
}

body .th-vt-reply .panel-title {
  flex: 1;
  font-family: var(--th-font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--th-gray-900);
}

body .th-vt-reply .collapse-icon { float: none; color: var(--th-gray-500); }

body .th-vt-reply > .panel-body {
  padding: 0 1.25rem 1.25rem;
  border-top: 0;
}

body .th-vt-reply > .panel-body > form { padding-top: 1rem; border-top: 1px solid var(--th-border); }

.th-vt-print { margin-bottom: 1rem; font-size: 12px; }

/* Mesaj akışı */
.th-vt-thread { display: flex; flex-direction: column; gap: 0.875rem; }

.th-vt-msg { display: flex; gap: 0.875rem; align-items: flex-start; }

.th-vt-av {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--th-gray-100);
  font-family: var(--th-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--th-gray-700);
}

.th-vt-msg.staff .th-vt-av { background: var(--th-brand-600); color: #fff; }

.th-vt-body {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--th-border);
  border-radius: 0.25rem var(--th-radius-lg) var(--th-radius-lg) var(--th-radius-lg);
  background: var(--th-surface);
  overflow: hidden;
}

.th-vt-msg.staff .th-vt-body { border-color: var(--th-brand-200); }

.th-vt-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.625rem;
  padding: 0.75rem 1.125rem;
  border-bottom: 1px solid var(--th-border);
  background: var(--th-gray-50);
}

.th-vt-msg.staff .th-vt-meta { background: var(--th-brand-50); border-bottom-color: var(--th-brand-200); }

.th-vt-name { font-size: 14px; color: var(--th-gray-900); }

.th-vt-tag {
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  background: var(--th-gray-200, #e5e7eb);
  font-size: 11px;
  font-weight: 600;
  color: var(--th-gray-600);
}

.th-vt-tag:empty { display: none; }
.th-vt-tag.staff { background: var(--th-brand-600); color: #fff; }

.th-vt-date { margin-left: auto; font-size: 12px; color: var(--th-gray-500); }

.th-vt-text {
  padding: 1rem 1.125rem;
  font-size: 14px;
  line-height: 1.65;
  color: var(--th-gray-800);
  overflow-wrap: anywhere;
}

.th-vt-text p:last-child { margin-bottom: 0; }
.th-vt-text a { color: var(--th-brand-600); }
.th-vt-text pre,
.th-vt-text code { font-family: var(--th-font-mono); font-size: 12.5px; }
.th-vt-text pre { padding: 0.75rem; border: 1px solid var(--th-border); border-radius: 0.5rem; background: var(--th-gray-50); }
.th-vt-text blockquote { margin: 0 0 0.75rem; padding: 0.25rem 0 0.25rem 0.875rem; border-left: 3px solid var(--th-border); font-size: 14px; color: var(--th-gray-600); }

.th-vt-files { padding: 0 1.125rem 1rem; }
.th-vt-files-h { display: block; margin-bottom: 0.375rem; font-size: 12px; font-weight: 600; color: var(--th-gray-500); }
.th-vt-files ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

.th-vt-files a,
.th-vt-files li.removed {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--th-border);
  border-radius: 0.5rem;
  background: var(--th-surface);
  font-size: 13px;
  color: var(--th-gray-700);
}

.th-vt-files a:hover { border-color: var(--th-brand-300); color: var(--th-brand-600); text-decoration: none; }
.th-vt-files li.removed { color: var(--th-gray-400, #9ca3af); text-decoration: line-through; }

.th-vt-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.625rem 1.125rem;
  border-top: 1px solid var(--th-border);
  font-size: 12px;
  color: var(--th-gray-500);
}

.th-vt-rate { display: flex; align-items: center; gap: 0.625rem; margin-left: auto; }

/* Puanlama yıldızları: six'in kuralları .ticket-reply altındaydı (şablonda
   artık yok). Aynı sağdan-sola düzen: üzerine gelinen yıldız ve
   solundakiler sarı. rating-done'daki .active de six'in rtl hesabına göre. */
.th-vt-foot .rating,
.th-vt-foot .rating-done {
  display: inline-flex;
  align-items: center;
  direction: rtl;
  unicode-bidi: bidi-override;
}

.th-vt-foot .rating span.star,
.th-vt-foot .rating-done span.star { display: inline-block; padding: 0 0.0625rem; font-size: 18px; line-height: 1; }

.th-vt-foot .rating span.star { cursor: pointer; }

.th-vt-foot .rating span.star::before,
.th-vt-foot .rating-done span.star::before { content: "\2605"; color: var(--th-gray-300, #d1d5db); }

.th-vt-foot .rating span.star:hover::before,
.th-vt-foot .rating span.star:hover ~ span.star::before,
.th-vt-foot .rating-done span.star.active::before { color: var(--th-warning); }

.th-vt-foot .rating-done .rated { margin-right: 0.5rem; direction: ltr; font-size: 12px; color: var(--th-gray-500); }

/* Mobilde avatar küçülür, kart tam genişlik */
@media (max-width: 575px) {
  .th-vt-av { width: 2rem; height: 2rem; font-size: 13px; }
  .th-vt-msg { gap: 0.5rem; }
  .th-vt-date { margin-left: 0; flex-basis: 100%; }
}

/* ═════════ Hesap bilgilerim (clientareadetails.tpl) ═════════ */
.th-acc { display: flex; flex-direction: column; gap: 1rem; }

.th-acc-sec {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
}

@media (max-width: 991px) { .th-acc-sec { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }
@media (max-width: 575px) { .th-acc-sec { padding: 1.125rem; } }

.th-acc-sec-h h2 { margin: 0 0 0.375rem; font-size: 16px; }
.th-acc-sec-h p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--th-gray-500); }

.th-acc-sec-b .form-group:last-child,
.th-acc-sec-b .th-grid2:last-child > .form-group:nth-last-child(-n+2) { margin-bottom: 0; }

@media (max-width: 575px) {
  .th-acc-sec-b .th-grid2:last-child > .form-group:nth-last-child(2) { margin-bottom: 15px; }
}

.th-acc-sec-b .form-control[disabled] { background: var(--th-gray-50); color: var(--th-gray-500); }

.th-acc-lock {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 1rem 0 0;
  font-size: 12.5px;
  color: var(--th-gray-500);
}

.th-acc-lock svg { flex: none; margin-top: 0.125rem; }
.th-acc-lock a { color: var(--th-brand-600); font-weight: 500; }

.th-acc .th-type { margin-bottom: 1.25rem; }

/* Özel alanların WHMCS çıktısı (select/input) kendi sınıfıyla geliyor */
.th-acc .form-group select.form-control,
.th-acc .form-group > select { width: 100%; }

.th-acc-optin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius);
}

.th-acc-optin b { font-size: 14px; color: var(--th-gray-900); }
.th-acc-optin p { margin: 0.125rem 0 0; font-size: 13px; color: var(--th-gray-500); }

.th-acc-extra:empty { display: none; }

/* Kaydet şeridi: uzun formda alta yapışık */
.th-acc-save {
  position: sticky;
  bottom: 1rem;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(3, 7, 18, 0.08);
}

.th-acc-save > div { display: flex; gap: 0.625rem; }
.th-acc-save-t { font-size: 13px; color: var(--th-gray-500); }

@media (max-width: 575px) {
  .th-acc-save-t { display: none; }
  .th-acc-save { justify-content: flex-end; }
}

/* ═════════ Alan adı yönetimi (clientareadomaindetails.tpl) ═════════ */
.th-dom-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
}

.th-dom-hero-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 0.875rem;
  background: var(--th-brand-50);
  color: var(--th-brand-600);
}

.th-dom-hero-t { flex: 1; min-width: 0; }

.th-dom-hero-t h2 {
  margin: 0 0 0.375rem;
  font-size: 22px;
  overflow-wrap: anywhere;
}

.th-dom-visit {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex: none;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--th-border);
  border-radius: 0.625rem;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--th-gray-700);
}

.th-dom-visit:hover { border-color: var(--th-brand-300); color: var(--th-brand-600); text-decoration: none; }

@media (max-width: 575px) {
  .th-dom-hero { flex-wrap: wrap; padding: 1.125rem; }
  .th-dom-visit { width: 100%; justify-content: center; }
}

.th-dom-note {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--th-warning) 30%, transparent);
  border-radius: var(--th-radius);
  background: var(--th-warning-bg);
  font-size: 13.5px;
  color: var(--th-warning);
}

.th-dom-note svg { flex: none; margin-top: 0.0625rem; }
.th-dom-note.bad { border-color: color-mix(in srgb, var(--th-danger) 25%, transparent); background: var(--th-danger-bg); color: var(--th-danger); }

.th-dom-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 0;
}

@media (max-width: 991px) { .th-dom-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.th-dom-tiles > div {
  padding: 0.875rem 1rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius);
  background: var(--th-surface);
}

.th-dom-tiles dt { margin-bottom: 0.25rem; font-size: 12px; font-weight: 500; color: var(--th-gray-500); }
.th-dom-tiles dd { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--th-gray-900); overflow-wrap: anywhere; }
.th-dom-tiles dd small { font-size: 12px; font-weight: 500; color: var(--th-gray-500); }

.th-dom-ssl {
  margin-top: 1rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
  overflow: hidden;
}

.th-dom-ssl > header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.25rem;
}

.th-dom-ssl > header h3 { flex: 1; margin: 0; font-family: var(--th-font-sans); font-size: 14px; font-weight: 600; }
.th-dom-ssl #statusDisplayLabel { font-size: 13.5px; font-weight: 600; color: var(--th-gray-700); }

.th-dom-ssl > dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--th-border);
}

@media (max-width: 575px) { .th-dom-ssl > dl { grid-template-columns: minmax(0, 1fr); } }

.th-dom-ssl > dl > div { padding: 0.75rem 1.25rem; }
.th-dom-ssl > dl > div + div { border-left: 1px solid var(--th-border); }

@media (max-width: 575px) { .th-dom-ssl > dl > div + div { border-left: 0; border-top: 1px solid var(--th-border); } }

.th-dom-ssl dt { font-size: 12px; font-weight: 500; color: var(--th-gray-500); }
.th-dom-ssl dd { margin: 0.125rem 0 0; font-size: 13.5px; font-weight: 600; color: var(--th-gray-900); }

.th-dom .moduleoutput { margin-top: 1rem; }

.th-dom-h { margin: 1.75rem 0 0.75rem; font-size: 16px; }
.th-dom .tab-pane > .th-dom-h:first-child { margin-top: 0; }

.th-dom-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.75rem;
}

.th-dom-act {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius);
  background: var(--th-surface);
  font-size: 14px;
  font-weight: 600;
  color: var(--th-gray-800);
}

.th-dom-act:hover { border-color: var(--th-brand-300); color: var(--th-brand-600); text-decoration: none; }

.th-dom-act-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: var(--th-brand-50);
  color: var(--th-brand-600);
}

.th-dom-lead { margin: 0 0 1.25rem; font-size: 14px; line-height: 1.6; color: var(--th-gray-600); }

.th-dom-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
}

@media (max-width: 767px) { .th-dom-state { flex-direction: column; align-items: stretch; } }

.th-dom-state-t { display: flex; align-items: flex-start; gap: 0.25rem; }
.th-dom-state-t .th-dot { margin-top: 0.4375rem; }
.th-dom-state-t b { font-size: 15px; color: var(--th-gray-900); }
.th-dom-state-t p { margin: 0.25rem 0 0; font-size: 13.5px; line-height: 1.55; color: var(--th-gray-600); }
.th-dom-state form { flex: none; margin: 0; }

.th-dom-form {
  padding: 1.5rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
}

.th-dom-narrow { max-width: 22rem; }

.th-dom-addons { display: flex; flex-direction: column; gap: 0.75rem; }

.th-dom-addon {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
}

.th-dom-addon-t b { font-size: 15px; color: var(--th-gray-900); }
.th-dom-addon-t p { margin: 0.25rem 0 0.875rem; font-size: 13.5px; line-height: 1.55; color: var(--th-gray-600); }
.th-dom-addon-t form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }

/* ═════════ Hizmet detayı (clientareaproductdetails.tpl +
              modules/servers/cpanel/overview.tpl) ═════════
   Renkler yalnızca site token'larından (marka kırmızısı, griler,
   success/warning/danger). cPanel'in client.css'i de yükleniyor; buradaki
   kurallar onun kimlik seçicilerini (#cPanelUsagePanel …) aşacak
   özgüllükte değil, kendi sınıflarımıza yazıldı. */
.th-mono { font-family: var(--th-font-mono); font-size: 13px; }

.th-svc-hero {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  padding: 1.375rem 1.5rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background:
    radial-gradient(120% 140% at 100% 0%, var(--th-brand-50) 0%, transparent 55%),
    var(--th-surface);
}

.th-svc-hero-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.875rem;
  background: var(--th-brand-600);
  color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--th-brand-600) 30%, transparent);
}

.th-svc-hero-t { flex: 1; min-width: 0; }

.th-svc-group {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--th-gray-500);
}

.th-svc-hero-t h2 { margin: 0.125rem 0 0.5rem; font-size: 22px; overflow-wrap: anywhere; }

.th-svc-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; }

.th-svc-domain { font-size: 13.5px; font-weight: 500; color: var(--th-gray-600); }
.th-svc-domain:hover { color: var(--th-brand-600); }

.th-svc-hero-act { display: flex; flex-wrap: wrap; gap: 0.5rem; flex: none; }

@media (max-width: 767px) {
  .th-svc-hero { flex-wrap: wrap; padding: 1.125rem; }
  .th-svc-hero-act { width: 100%; }
  .th-svc-hero-act .btn { flex: 1 1 auto; }
}

.th-svc-note {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--th-warning) 30%, transparent);
  border-radius: var(--th-radius);
  background: var(--th-warning-bg);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--th-gray-800);
}

.th-svc-note svg { flex: none; margin-top: 0.125rem; color: var(--th-warning); }
.th-svc-note.bad { border-color: color-mix(in srgb, var(--th-danger) 25%, transparent); background: var(--th-danger-bg); }
.th-svc-note.bad svg { color: var(--th-danger); }

.th-svc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

@media (max-width: 991px) { .th-svc-grid { grid-template-columns: minmax(0, 1fr); } }

.th-svc-grid > .th-svc-card { margin-top: 0; }

.th-svc .th-dom-tiles { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

.th-svc-card {
  margin-top: 1rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
  overflow: hidden;
}

.th-svc-card-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--th-border);
}

.th-svc-card-h h3 { margin: 0; font-family: var(--th-font-sans); font-size: 15px; font-weight: 600; color: var(--th-gray-900); }
.th-svc-card-note { font-size: 12px; color: var(--th-gray-500); }

.th-svc-card-b { padding: 1.25rem; }
.th-svc-card-b > p { font-size: 14px; color: var(--th-gray-600); }

.th-svc-card-f { padding: 0.75rem 1.25rem; border-top: 1px solid var(--th-border); background: var(--th-gray-50); }

/* Etiket–değer listesi */
.th-svc-dl { margin: 0; }

.th-svc-dl > div {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.6875rem 1.25rem;
}

.th-svc-dl > div + div { border-top: 1px solid var(--th-border); }
.th-svc-dl dt { font-size: 13px; font-weight: 500; color: var(--th-gray-500); }
.th-svc-dl dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--th-gray-900); overflow-wrap: anywhere; }
.th-svc-dl dd small { font-size: 12px; font-weight: 500; color: var(--th-gray-500); }

@media (max-width: 479px) { .th-svc-dl > div { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; } }

/* Kullanım çubukları (knob.js kadranlarının yerine). Normalde koyu gri:
   kırmızı yalnızca sınıra yaklaşınca — her çubuk kırmızı olsaydı uyarı
   anlamını yitirirdi */
.th-usage { display: flex; flex-direction: column; gap: 1.125rem; padding: 1.25rem; }

.th-usage-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 0.75rem; align-items: center; }

.th-usage-t { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 1rem; font-size: 13.5px; }
.th-usage-t b { font-weight: 600; color: var(--th-gray-900); }
.th-usage-t span { font-family: var(--th-font-mono); font-size: 12.5px; color: var(--th-gray-500); }

.th-bar {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--th-gray-100);
  overflow: hidden;
}

.th-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--th-gray-900);
  transition: width 0.4s;
}

.th-usage-row small { min-width: 2.75rem; text-align: right; font-size: 12px; font-weight: 600; color: var(--th-gray-700); }
.th-usage-row.warn .th-bar > span { background: var(--th-warning); }
.th-usage-row.bad .th-bar > span { background: var(--th-danger); }
.th-usage-row.bad small { color: var(--th-danger); }

.th-usage-warn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--th-border);
  background: var(--th-danger-bg);
  font-size: 13px;
  color: var(--th-danger);
}

/* cPanel kısayolları */
.th-sc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.625rem;
  margin: 0;
  padding: 1.25rem;
}

.th-sc-grid::before,
.th-sc-grid::after { display: none; }

.th-sc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.875rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius);
  background: var(--th-surface);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--th-gray-800);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.th-sc:hover,
.th-sc:focus-visible {
  border-color: var(--th-brand-300);
  box-shadow: 0 4px 14px rgba(3, 7, 18, 0.06);
  color: var(--th-brand-600);
  text-decoration: none;
}

.th-sc-ic {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: var(--th-brand-50);
  color: var(--th-brand-600);
}

.th-sc:hover .th-sc-ic { background: var(--th-brand-600); color: #fff; }

/* Hızlı e-posta formu */
.th-mailform { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 0.625rem; }

@media (max-width: 767px) { .th-mailform { grid-template-columns: minmax(0, 1fr); } }

.th-mailform-addr .input-group-addon {
  border-color: var(--th-border);
  border-radius: 0 var(--th-radius) var(--th-radius) 0;
  background: var(--th-gray-50);
  font-size: 13px;
  color: var(--th-gray-600);
}

.th-mailform-addr .form-control { border-radius: var(--th-radius) 0 0 var(--th-radius); }

/* WordPress */
.th-wp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.625rem; margin-bottom: 1.25rem; }
.th-wp-row.no-margin { margin-bottom: 0; }
.th-wp-new h4 { margin: 0; font-size: 14px; font-weight: 600; }
.th-wp-new .th-help { margin: 0.125rem 0 0.75rem; font-family: var(--th-font-mono); }
.th-wp-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 0.625rem; }

@media (max-width: 767px) {
  .th-wp-row,
  .th-wp-form { grid-template-columns: minmax(0, 1fr); }
}

/* Sitejet önizleme kartı */
.th-svc-sitejet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem; }
.th-svc-sitejet img { border: 1px solid var(--th-border); border-radius: var(--th-radius); }
.th-svc-sitejet-t h2 { margin: 0.125rem 0 0.25rem; font-size: 20px; }
.th-svc-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }

@media (max-width: 767px) { .th-svc-sitejet { grid-template-columns: minmax(0, 1fr); } }

.th-svc-addon-form { display: flex; gap: 0.5rem; }

/* Eklenti kartı (hizmet eklentileri sekmesi) */
.th-svc-addon {
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
  overflow: hidden;
}

.th-svc-addon > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--th-border);
}

.th-svc-addon > header b { font-size: 15px; color: var(--th-gray-900); }

.th-svc-addon > dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.th-svc-addon > dl > div { padding: 0.75rem 1.25rem; }
.th-svc-addon > dl > div + div { border-left: 1px solid var(--th-border); }
.th-svc-addon dt { font-size: 12px; font-weight: 500; color: var(--th-gray-500); }
.th-svc-addon dd { margin: 0.125rem 0 0; font-size: 13.5px; font-weight: 600; color: var(--th-gray-900); }

@media (max-width: 575px) {
  .th-svc-addon > dl { grid-template-columns: minmax(0, 1fr); }
  .th-svc-addon > dl > div + div { border-left: 0; border-top: 1px solid var(--th-border); }
}

.th-svc-addon > footer { padding: 0.75rem 1.25rem; border-top: 1px solid var(--th-border); background: var(--th-gray-50); }

/* Şifre değiştirme */
.th-svc-pw { max-width: 36rem; }
.th-pw-row { display: flex; gap: 0.5rem; }
.th-pw-input { position: relative; flex: 1; }

@media (max-width: 479px) { .th-pw-row { flex-direction: column; } }

/* ═════════ Şifre sıfırlama (password-reset-*.tpl) ═════════ */
.th-auth-lead { margin: -0.5rem 0 1.5rem; font-size: 14px; line-height: 1.6; color: var(--th-gray-600); }

.th-auth-done {
  padding: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--th-success) 30%, transparent);
  border-radius: var(--th-radius-lg);
  background: var(--th-success-bg);
  text-align: center;
}

.th-auth-done-ic {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: var(--th-success);
  color: #fff;
}

.th-auth-done b { display: block; font-size: 16px; color: var(--th-gray-900); }
.th-auth-done p { margin: 0.375rem 0 0; font-size: 14px; line-height: 1.6; color: var(--th-gray-700); }

/* ═════════ Kenar çubuğu: mobil ═════════
   six dar ekranda listeyi yatay kaydırılan tek satıra çeviriyor
   (öğeler inline-block, overflow-x: scroll); öğeler sağdan kesiliyordu.
   Dikey liste olarak kalır. Aç/kapa six JS'inde (display satır içi). */
@media (max-width: 991px) {
  body .sidebar .th-sidebar-list {
    overflow-x: visible;
    white-space: normal;
    padding: 0 !important;
  }

  /* Kaynağı six'in mobil kuralları; her öğeye ayrı #ddd çerçeve ve listeye
     10px iç boşluk veriyordu — öğeler ayrı kutular gibi duruyordu */
  body .sidebar .panel-sidebar .th-sidebar-list > .list-group-item {
    border: 0 !important;
    border-bottom: 1px solid var(--th-border) !important;
  }

  body .sidebar .panel-sidebar .th-sidebar-list > .list-group-item:last-child { border-bottom: 0 !important; }

  body .sidebar .th-sidebar-list > .list-group-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    float: none;
    width: 100%;
    margin: 0;
    padding: 0.75rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--th-border);
    border-radius: 0;
    text-align: left;
  }

  body .sidebar .th-sidebar-list > .list-group-item:last-child { border-bottom: 0; }

  /* Rozet HTML'de önce geliyor (masaüstünde float ile sağda); esnek
     kutuda float etkisiz — sona alınıp sağa itiliyor */
  body .sidebar .th-sidebar-list > .list-group-item > .th-badge {
    order: 2;
    float: none;
    margin-left: auto;
  }

  body .sidebar .th-sidebar-list > .list-group-item > i {
    flex: none;
    width: 1rem;
    margin: 0;
    text-align: center;
  }
}

/* ═════════ Liste tabloları: kart (dar ekran) ═════════
   js/th-lists.js hücrelere data-label yazar. 767px altında başlık satırı
   gizlenir, her satır bir kart: sütun adı solda küçük, değer sağda.
   Kırılım 991px: tablet genişliğinde tablo sütunları sığmıyordu ve yatay
   kaydırma satır içi açılır menüleri kırpıyordu. */
@media (max-width: 991px) {
  body .table-container .listtable { overflow-x: visible; }

  body table.table-list.th-cards,
  body table.table-list.th-cards tbody { display: block; width: 100% !important; }

  body table.table-list.th-cards thead { display: none; }

  body table.table-list.th-cards tbody tr {
    display: block;
    margin: 0 0.75rem 0.75rem;
    padding: 0.5rem 0;
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius);
    background: var(--th-surface);
  }

  body table.table-list.th-cards tbody tr:first-child { margin-top: 0.75rem; }

  body table.table-list.th-cards tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: auto !important;
    padding: 0.4375rem 1rem !important;
    border: 0 !important;
    background: transparent !important;
    text-align: right !important;
    font-size: 13.5px;
  }

  body table.table-list.th-cards tbody td::before {
    content: attr(data-label);
    flex: none;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    color: var(--th-gray-500);
  }

  /* Etiketsiz sütunlar (simge, onay kutusu, araç düğmeleri) */
  body table.table-list.th-cards tbody td.th-cell-bare { justify-content: flex-end; }
  body table.table-list.th-cards tbody td.th-cell-bare::before { content: none; }
  body table.table-list.th-cards tbody td.th-cell-bare:has(> img:only-child),
  body table.table-list.th-cards tbody td.ssl-info { display: none; }

  /* İlk anlamlı sütun kartın başlığı gibi: etiket yok, sola yaslı, kalın */
  body table.table-list.th-cards tbody td.th-cell-bare + td,
  body table.table-list.th-cards tbody td:first-child:not(.th-cell-bare) {
    justify-content: flex-start;
    padding-bottom: 0.625rem !important;
    border-bottom: 1px solid var(--th-border) !important;
    margin-bottom: 0.25rem;
    text-align: left !important;
    font-size: 14.5px;
    font-weight: 600;
  }

  body table.table-list.th-cards tbody td.th-cell-bare + td::before,
  body table.table-list.th-cards tbody td:first-child:not(.th-cell-bare)::before { content: none; }

  /* Talep listesi: başlık hücresindeki dikey çizgi kartta anlamsız */
  body table.table-list.th-cards a.border-left { padding: 0; }

  /* Boş tablo satırı ("Kayıt bulunamadı") */
  body table.table-list.th-cards tbody td.dataTables_empty { justify-content: center; text-align: center !important; }
  body table.table-list.th-cards tbody td.dataTables_empty::before { content: none; }
}

@media (max-width: 991px) {
  /* Destek talepleri: kart başlığı konu olsun (ilk sütun departman) */
  body #tableTicketsList.th-cards tbody tr { display: flex; flex-direction: column; }
  body #tableTicketsList.th-cards tbody td:nth-child(2) {
    order: -1;
    justify-content: flex-start;
    padding-bottom: 0.625rem !important;
    border-bottom: 1px solid var(--th-border) !important;
    margin-bottom: 0.25rem;
    text-align: left !important;
  }
  body #tableTicketsList.th-cards tbody td:nth-child(2)::before { content: none; }
  body #tableTicketsList.th-cards tbody td:first-child {
    justify-content: space-between;
    padding-bottom: 0.4375rem !important;
    border-bottom: 0 !important;
    margin-bottom: 0;
    text-align: right !important;
    font-size: 13.5px;
    font-weight: 400;
  }
  body #tableTicketsList.th-cards tbody td:first-child::before { content: attr(data-label); }

  /* Alan adları: toplu seçim kutusu kartın sağ üstünde */
  body #tableDomainsList.th-cards tbody tr { position: relative; }
  body #tableDomainsList.th-cards tbody td:first-child.th-cell-bare {
    position: absolute;
    top: 0.75rem;
    right: 0.25rem;
    padding: 0 0.75rem !important;
  }
}

/* six'in açık mavi .btn-info'su (ör. "Ürün Yönetimi", "Davet Gönder"):
   sitede mavi yok; koyu ikincil düğme */
body .btn-info {
  border-color: var(--th-gray-900);
  background-color: var(--th-gray-900);
  background-image: none;
  color: #fff;
}

body .btn-info:hover,
body .btn-info:focus {
  border-color: var(--th-gray-700);
  background-color: var(--th-gray-700);
  color: #fff;
}

/* ═════════ İki aşamalı doğrulama (two-factor-*.tpl) ═════════ */
.th-2fa-ic {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1.25rem;
  border-radius: 1rem;
  background: var(--th-brand-50);
  color: var(--th-brand-600);
}

.th-2fa-form[hidden] { display: none !important; }

/* Modülün çıktısındaki kutu ve düğme (TOTP vb.) */
.th-2fa-challenge { margin-bottom: 1rem; }
.th-2fa-challenge p { font-size: 13.5px; color: var(--th-gray-600); }
.th-2fa-challenge .form-group { margin-bottom: 1rem; }
.th-2fa-challenge br { display: none; }

body .th-auth-inner .form-control.th-2fa-code {
  height: 3.5rem;
  font-family: var(--th-font-mono);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-align: center;
  color: var(--th-gray-900);
}

body .th-auth-inner .form-control.th-2fa-code::placeholder {
  font-family: var(--th-font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
}

.th-2fa-backup {
  margin-bottom: 0.75rem;
  padding: 1rem;
  border: 1.5px dashed var(--th-border);
  border-radius: var(--th-radius);
  background: var(--th-gray-50);
  font-family: var(--th-font-mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--th-gray-900);
  user-select: all;
}

.th-2fa-copy { margin-bottom: 1rem; }

/* ═════════ Satış ortaklığı (affiliates*.tpl) ═════════ */
.th-aff-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem;
  border-radius: var(--th-radius-lg);
  background:
    radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--th-brand-600) 35%, transparent) 0%, transparent 60%),
    var(--th-gray-950, #030712);
  color: #fff;
}

.th-aff-hero .th-svc-group { color: var(--th-brand-400); }
.th-aff-hero h2 { margin: 0.25rem 0 0.5rem; font-size: 24px; color: #fff; }
.th-aff-hero p { margin: 0; max-width: 34rem; font-size: 14.5px; line-height: 1.6; color: var(--th-gray-300, #d1d5db); }
.th-aff-hero-act { flex: none; margin: 0; }

@media (max-width: 767px) {
  .th-aff-hero { flex-direction: column; align-items: stretch; padding: 1.5rem; }
  .th-aff-hero-act .btn { width: 100%; }
}

.th-aff-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

@media (max-width: 767px) { .th-aff-steps { grid-template-columns: minmax(0, 1fr); } }

.th-aff-steps > section {
  position: relative;
  padding: 1.25rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
}

.th-aff-steps p { margin: 0.75rem 0 0; font-size: 13.5px; line-height: 1.6; color: var(--th-gray-700); }

.th-aff-n {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-family: var(--th-font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--th-gray-100);
}

.th-aff-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: radial-gradient(120% 140% at 100% 0%, var(--th-brand-50) 0%, transparent 55%), var(--th-surface);
}

.th-aff-link > div { min-width: 0; }

.th-aff-link code {
  display: block;
  margin-top: 0.25rem;
  padding: 0;
  background: none;
  font-family: var(--th-font-mono);
  font-size: 14px;
  color: var(--th-gray-900);
  overflow-wrap: anywhere;
}

@media (max-width: 575px) {
  .th-aff-link { flex-direction: column; align-items: stretch; }
}

.th-aff-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.th-aff-kpi dd { font-family: var(--th-font-display); font-size: 22px; }

@media (max-width: 575px) { .th-aff-kpi { grid-template-columns: minmax(0, 1fr); } }

.th-aff-money {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.th-aff-money > div { padding: 1rem 1.25rem; }
.th-aff-money > div + div { border-left: 1px solid var(--th-border); }
.th-aff-money dt { font-size: 12px; font-weight: 500; color: var(--th-gray-500); }
.th-aff-money dd { margin: 0.25rem 0 0; font-family: var(--th-font-display); font-size: 20px; font-weight: 600; color: var(--th-gray-900); }
.th-aff-money > .on dd { color: var(--th-success); }

@media (max-width: 575px) {
  .th-aff-money { grid-template-columns: minmax(0, 1fr); }
  .th-aff-money > div + div { border-left: 0; border-top: 1px solid var(--th-border); }
}

.th-aff-withdraw { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.th-aff-withdraw form { margin: 0; }
.th-aff-withdraw .th-help { margin: 0; }

/* ═════════ Panel ana sayfası: karşılama bandı ve özet kutuları (v2) ═════════
   Sitedeki koyu kahraman alanının dili: gece mavisi zemin, sağ üstte
   marka kırmızısı ışıltı, beyaz başlık. */
.th-home-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  padding: 1.75rem 2rem;
  border-radius: var(--th-radius-lg);
  background:
    radial-gradient(70% 160% at 100% 0%, color-mix(in srgb, var(--th-brand-600) 38%, transparent) 0%, transparent 60%),
    var(--th-gray-950);
  color: #fff;
}

.th-home-hero-k {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--th-brand-400);
}

.th-home-hero h1 { margin: 0.25rem 0 0.375rem; font-size: 26px; font-weight: 700; color: #fff; }
.th-home-hero p { margin: 0; font-size: 14px; color: var(--th-gray-300, #d1d5db); }
.th-home-hero-act { display: flex; flex-wrap: wrap; gap: 0.5rem; flex: none; }

body .btn.th-btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

body .btn.th-btn-ghost:hover,
body .btn.th-btn-ghost:focus { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.12); color: #fff; }

@media (max-width: 767px) {
  .th-home-hero { flex-direction: column; align-items: stretch; padding: 1.375rem; }
  .th-home-hero h1 { font-size: 22px; }
  .th-home-hero-act .btn { flex: 1 1 auto; }
}

.th-kpi { position: relative; gap: 0.25rem; padding: 1.125rem; }

.th-kpi-ic {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.5rem;
  border-radius: 0.625rem;
  background: var(--th-gray-100);
  color: var(--th-gray-700);
}

.th-kpi .th-kpi-l { font-size: 13px; }

.th-kpi .th-kpi-go {
  position: absolute;
  top: 1.25rem;
  right: 1.125rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--th-brand-600);
  opacity: 0;
  transition: opacity 0.15s;
}

.th-kpi:hover .th-kpi-go,
.th-kpi:focus-visible .th-kpi-go { opacity: 1; }
.th-kpi:hover .th-kpi-ic { background: var(--th-brand-50); color: var(--th-brand-600); }
.th-kpi.warn .th-kpi-ic { background: color-mix(in srgb, var(--th-warning) 18%, transparent); color: var(--th-warning); }

@media (hover: none) { .th-kpi .th-kpi-go { display: none; } }

/* Hızlı işlemler: simge kutusu */
.th-quick i svg { display: block; }
.th-quick i { width: 2rem; height: 2rem; }

/* Talep/hizmet durum etiketleri: WHMCS satır içi renkle basıyor (panelden
   ayarlı, siteyle uyumsuz siyah/mavi); tutarlı hap görünümü */
.th-home .th-home-row .label {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--th-border);
  border-radius: 999px;
  background: var(--th-gray-50) !important;
  font-size: 11px;
  font-weight: 600;
  color: var(--th-gray-700) !important;
}

/* Hizmet yokken yol gösteren kart */
.th-home-start { padding: 1rem 1.25rem 1.25rem; }
.th-home-start > p { margin: 0 0 1rem; font-size: 14px; color: var(--th-gray-600); }

.th-home-start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; }

@media (max-width: 575px) { .th-home-start-grid { grid-template-columns: minmax(0, 1fr); } }

.th-home-start-grid a {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}

.th-home-start-grid a:hover { border-color: var(--th-brand-300); background: var(--th-brand-50); text-decoration: none; }
.th-home-start-grid b { font-size: 14px; color: var(--th-gray-900); }
.th-home-start-grid span { font-size: 12.5px; color: var(--th-gray-500); }

/* ═════════ Sipariş akışı v2 ═════════
   Ürün yapılandırma özeti (ordersummary.tpl + configureproduct sağ sütun),
   alan adı yapılandırma (configuredomains.tpl), alan adı kaydı
   (domainregister.tpl) ve transferi (domaintransfer.tpl). */

/* ── Özet kartı ── */
body #order-standard_cart .order-summary.th-sum {
  position: relative;
  padding: 1.25rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
  box-shadow: 0 4px 16px rgba(3, 7, 18, 0.05);
}

@media (min-width: 992px) { body #order-standard_cart #orderSummary { position: sticky; top: 1.5rem; } }

body #order-standard_cart .th-sum .th-sum-title {
  margin: 0 0 1rem;
  font-family: var(--th-font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--th-gray-900);
}

body #order-standard_cart .th-sum .loader { position: absolute; top: 1.25rem; right: 1.25rem; color: var(--th-gray-400, #9ca3af); }

body #order-standard_cart .th-sum-head { padding-bottom: 0.75rem; border-bottom: 1px solid var(--th-border); }
body #order-standard_cart .th-sum-head b { display: block; font-size: 15px; color: var(--th-gray-900); }
body #order-standard_cart .th-sum-head span { font-size: 12.5px; color: var(--th-gray-500); }

body #order-standard_cart .th-sum-lines { margin: 0; padding: 0.5rem 0; list-style: none; }

body #order-standard_cart .th-sum-lines > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  padding: 0.375rem 0;
  font-size: 13.5px;
  color: var(--th-gray-800);
}

body #order-standard_cart .th-sum-lines > li > span { min-width: 0; overflow-wrap: anywhere; }
body #order-standard_cart .th-sum-lines > li > b { font-family: var(--th-font-mono); font-size: 13px; font-weight: 600; text-align: right; white-space: nowrap; }
body #order-standard_cart .th-sum-lines small { display: block; font-size: 12px; font-weight: 400; color: var(--th-gray-500); white-space: normal; }
body #order-standard_cart .th-sum-lines > li.sub { padding-left: 0.75rem; border-left: 2px solid var(--th-gray-100); color: var(--th-gray-600); }
body #order-standard_cart .th-sum-lines > li.th-sum-group { display: block; padding-top: 0.75rem; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--th-gray-500); }
body #order-standard_cart .th-sum-rm { margin-left: 0.375rem; color: var(--th-gray-400, #9ca3af); }
body #order-standard_cart .th-sum-rm:hover { color: var(--th-danger); }

body #order-standard_cart .th-sum-totals { margin: 0; padding: 0.625rem 0; border-top: 1px solid var(--th-border); }
body #order-standard_cart .th-sum-totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.25rem 0; font-size: 13px; }
body #order-standard_cart .th-sum-totals dt { font-weight: 500; color: var(--th-gray-500); }
body #order-standard_cart .th-sum-totals dd { margin: 0; font-family: var(--th-font-mono); font-size: 13px; color: var(--th-gray-800); }

body #order-standard_cart .order-summary.th-sum .th-sum-due {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.125rem;
  margin: 0.5rem 0 1rem;
  padding: 0.875rem 1rem;
  border: 0;
  border-radius: 0.75rem;
  background: var(--th-gray-50);
  text-align: left;
}

body #order-standard_cart .order-summary.th-sum .th-sum-due > span { font-size: 12.5px; font-weight: 600; color: var(--th-gray-600); }
body #order-standard_cart .order-summary.th-sum .th-sum-due .amt { font-family: var(--th-font-display); font-size: 26px; font-weight: 700; color: var(--th-gray-900); }

body #order-standard_cart .th-sum-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
body #order-standard_cart .th-sum-note { margin: 0.625rem 0 0; font-size: 12px; text-align: center; color: var(--th-gray-500); }

/* ── Ürün özellik listesi (th-cart.js <br> satırlarını listeye çevirir) ── */
#order-standard_cart .product-info .th-feat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem 1.25rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 575px) { #order-standard_cart .product-info .th-feat { grid-template-columns: minmax(0, 1fr); } }

#order-standard_cart .product-info .th-feat li {
  position: relative;
  padding-left: 1.375rem;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--th-gray-700);
}

#order-standard_cart .product-info .th-feat li::before {
  content: "";
  position: absolute;
  top: 0.375rem;
  left: 0.25rem;
  width: 0.5rem;
  height: 0.3rem;
  border-left: 2px solid var(--th-brand-600);
  border-bottom: 2px solid var(--th-brand-600);
  transform: rotate(-45deg);
}

#order-standard_cart .product-info .th-feat strong { color: var(--th-gray-900); }

/* Sipariş formu alanları: standard_cart küçük köşe/yükseklik veriyordu */
body #order-standard_cart .form-control { border-radius: var(--th-radius); }
body #order-standard_cart input.form-control:not([type="checkbox"]):not([type="radio"]) { height: 2.75rem; }
body #order-standard_cart input[type="number"].form-control,
body #order-standard_cart .configurable-option-qty input,
body #order-standard_cart input.input-qty { width: 5.5rem; display: inline-block; text-align: center; }

/* ── Ortak: sayfa açıklaması, ara başlık, alt eylem şeridi ── */
body #order-standard_cart .th-of-lead { margin: 0 0 1.25rem; font-size: 14px; color: var(--th-gray-600); }
body #order-standard_cart .th-of-h { margin: 2rem 0 0.75rem; font-family: var(--th-font-display); font-size: 17px; font-weight: 600; color: var(--th-gray-900); }

body #order-standard_cart .th-of-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--th-border);
}

@media (max-width: 575px) { body #order-standard_cart .th-of-actions .btn { width: 100%; } }

/* ── Alan adı yapılandırma kartları ── */
body #order-standard_cart .th-cd {
  margin-bottom: 1rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
  overflow: hidden;
}

body #order-standard_cart .th-cd-h { display: flex; align-items: center; gap: 0.875rem; padding: 1rem 1.25rem; }

body #order-standard_cart .th-cd-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: var(--th-brand-50);
  color: var(--th-brand-600);
}

body #order-standard_cart .th-cd-t { flex: 1; min-width: 0; }
body #order-standard_cart .th-cd-t b { display: block; font-size: 16px; color: var(--th-gray-900); overflow-wrap: anywhere; }
body #order-standard_cart .th-cd-t span { display: block; font-size: 13px; line-height: 1.5; color: var(--th-gray-500); }

body #order-standard_cart .th-cd-nohost {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--th-border);
  background: var(--th-gray-50);
  font-size: 13px;
  color: var(--th-gray-600);
}

@media (max-width: 575px) { body #order-standard_cart .th-cd-nohost { flex-direction: column; align-items: stretch; } }

body #order-standard_cart .th-cd-b { padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--th-border); }

body #order-standard_cart .th-cd-sub {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--th-gray-500);
}

body #order-standard_cart .th-cd-addons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
  margin: 0;
}

body #order-standard_cart .th-cd-addons::before,
body #order-standard_cart .th-cd-addons::after { display: none; }
body #order-standard_cart .th-cd-addons .panel-addon { margin: 0; display: flex; flex-direction: column; }
body #order-standard_cart .th-cd-addons .panel-addon .panel-body { flex: 1; }
body #order-standard_cart .th-cd-addons .panel-addon .panel-body p { margin: 0; font-size: 13px; color: var(--th-gray-600); }

body #order-standard_cart .th-cd-ns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }

@media (max-width: 575px) { body #order-standard_cart .th-cd-ns { grid-template-columns: minmax(0, 1fr); } }

body #order-standard_cart .th-cd-ns label small { font-weight: 400; color: var(--th-gray-400, #9ca3af); }
body #order-standard_cart .th-cd-epp { max-width: 28rem; margin: 0; }
body #order-standard_cart .th-cd-fields .form-group:last-child { margin-bottom: 0; }

/* ── Alan adı kaydı: koyu arama bandı ── */
body #order-standard_cart .domain-checker-container.th-dsearch {
  margin: 0 0 1.5rem;
  padding: 2rem;
  border-radius: var(--th-radius-lg);
  background:
    radial-gradient(70% 160% at 100% 0%, color-mix(in srgb, var(--th-brand-600) 38%, transparent) 0%, transparent 60%),
    var(--th-gray-950);
}

body #order-standard_cart .th-dsearch-t { margin-bottom: 1.25rem; text-align: center; }
body #order-standard_cart .th-dsearch-t h2 { margin: 0 0 0.375rem; font-family: var(--th-font-display); font-size: 24px; font-weight: 700; color: #fff; }
body #order-standard_cart .th-dsearch-t p { margin: 0; font-size: 14px; color: var(--th-gray-300, #d1d5db); }

body #order-standard_cart .th-dsearch .domain-checker-bg {
  margin: 0;
  padding: 0;
  border: 0;
  background: none !important;
}

body #order-standard_cart .th-dsearch .row { margin: 0; }
body #order-standard_cart .th-dsearch .row > [class*="col-"] { float: none; width: 100%; max-width: 40rem; margin: 0 auto; padding: 0; }

body #order-standard_cart .th-dsearch .input-group-box {
  display: flex;
  gap: 0.375rem;
  padding: 0.375rem;
  border-radius: 0.875rem;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

body #order-standard_cart .th-dsearch .input-group-box .form-control {
  flex: 1;
  height: 3rem;
  border: 0;
  box-shadow: none;
  font-size: 16px;
}

body #order-standard_cart .th-dsearch .input-group-box .input-group-btn { width: auto; }
body #order-standard_cart .th-dsearch .input-group-box .btn { height: 3rem; padding: 0 1.5rem; border-radius: 0.625rem; font-size: 15px; }

@media (max-width: 575px) { body #order-standard_cart .domain-checker-container.th-dsearch { padding: 1.25rem; } }

/* Öne çıkan uzantılar (logo görselleri yerine metin kartları) */
body #order-standard_cart .th-ftld {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

body #order-standard_cart .th-ftld-card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
}

body #order-standard_cart .th-ftld-card b { font-family: var(--th-font-display); font-size: 24px; font-weight: 700; color: var(--th-gray-900); }
body #order-standard_cart .th-ftld-card span { font-family: var(--th-font-mono); font-size: 14px; font-weight: 600; color: var(--th-brand-600); }
body #order-standard_cart .th-ftld-card small { margin-left: 0.125rem; font-family: var(--th-font-sans); font-size: 12px; font-weight: 400; color: var(--th-gray-500); }

/* Kategori süzgeci: gri/yeşil Bootstrap rozetleri yerine çip */
body #order-standard_cart .tld-filters { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 1rem; }

body #order-standard_cart .tld-filters .badge {
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--th-border);
  border-radius: 999px;
  background: var(--th-surface) !important;
  font-size: 13px;
  font-weight: 500;
  color: var(--th-gray-700) !important;
}

body #order-standard_cart .tld-filters .badge.badge-success,
body #order-standard_cart .tld-filters .badge.active {
  border-color: var(--th-gray-900);
  background: var(--th-gray-900) !important;
  color: #fff !important;
}

/* Fiyat tablosu */
body #order-standard_cart .domain-pricing .bg-white {
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  overflow: hidden;
}

body #order-standard_cart .tld-pricing-header {
  margin: 0;
  background: var(--th-gray-50);
  font-size: 12px;
  font-weight: 600;
  color: var(--th-gray-500);
}

body #order-standard_cart .tld-pricing-header [class*="col-"] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border: 0 !important;
  background: none !important;
}

body #order-standard_cart .tld-pricing-header .tld-column { padding-left: 1.5rem; text-align: left; }

body #order-standard_cart .tld-row {
  margin: 0;
  padding: 0.625rem 0;
  border-top: 1px solid var(--th-border);
  font-size: 14px;
  color: var(--th-gray-800);
}

body #order-standard_cart .tld-row:nth-child(even) { background: transparent; }
body #order-standard_cart .tld-row strong { font-family: var(--th-font-display); font-size: 15px; color: var(--th-gray-900); }
body #order-standard_cart .tld-row small { font-size: 11.5px; color: var(--th-gray-500); }
body #order-standard_cart .tld-row .two-row-center { border: 0 !important; }
body #order-standard_cart .tld-row [class*="col-"] { border: 0 !important; }
body #order-standard_cart .tld-sale-group { margin-left: 0.375rem; padding: 0.0625rem 0.4375rem; border-radius: 999px; background: var(--th-brand-50); font-size: 10.5px; font-weight: 700; color: var(--th-brand-600); text-transform: uppercase; }

/* Alt kutular */
body #order-standard_cart .th-dpromo { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.75rem; margin-top: 2rem; }

body #order-standard_cart .th-dpromo-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

body #order-standard_cart .th-dpromo-card:hover { border-color: var(--th-brand-300); box-shadow: 0 6px 18px rgba(3, 7, 18, 0.06); text-decoration: none; }
body #order-standard_cart .th-dpromo-card > span:nth-child(2) { flex: 1; min-width: 0; }
body #order-standard_cart .th-dpromo-card b { display: block; font-size: 14.5px; color: var(--th-gray-900); }
body #order-standard_cart .th-dpromo-card small { display: block; font-size: 12.5px; color: var(--th-gray-500); }
body #order-standard_cart .th-dpromo-go { flex: none; color: var(--th-gray-400, #9ca3af); }
body #order-standard_cart .th-dpromo-note { margin-top: 0.5rem; }

/* ── Transfer: form + adımlar ── */
body #order-standard_cart .th-tf { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.25rem; align-items: start; }

@media (max-width: 991px) { body #order-standard_cart .th-tf { grid-template-columns: minmax(0, 1fr); } }

body #order-standard_cart .th-tf .panel { margin: 0; border: 1px solid var(--th-border); border-radius: var(--th-radius-lg); box-shadow: none; overflow: hidden; }
body #order-standard_cart .th-tf .panel-heading { padding: 1rem 1.25rem; border-bottom: 1px solid var(--th-border); background: var(--th-surface); }
body #order-standard_cart .th-tf .panel-title { font-size: 16px !important; font-weight: 600; }
body #order-standard_cart .th-tf .panel-body { padding: 1.25rem; }
body #order-standard_cart .th-tf .panel-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--th-border); background: var(--th-gray-50); }
body #order-standard_cart .th-tf label { width: 100%; }
body #order-standard_cart .th-tf label a { font-weight: 500; color: var(--th-gray-500); }

body #order-standard_cart .th-tf-steps { padding: 1.25rem; border: 1px solid var(--th-border); border-radius: var(--th-radius-lg); background: var(--th-surface); }
body #order-standard_cart .th-tf-steps h3 { margin: 0 0 1rem; font-family: var(--th-font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--th-gray-500); }
body #order-standard_cart .th-tf-steps ol { margin: 0; padding: 0; list-style: none; counter-reset: thtf; }

body #order-standard_cart .th-tf-steps li {
  position: relative;
  padding: 0 0 1rem 2.5rem;
  counter-increment: thtf;
}

body #order-standard_cart .th-tf-steps li:last-child { padding-bottom: 0; }

body #order-standard_cart .th-tf-steps li::before {
  content: counter(thtf);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--th-brand-50);
  font-size: 13px;
  font-weight: 700;
  color: var(--th-brand-600);
}

body #order-standard_cart .th-tf-steps b { display: block; font-size: 14px; color: var(--th-gray-900); }
body #order-standard_cart .th-tf-steps span { display: block; margin-top: 0.125rem; font-size: 13px; line-height: 1.5; color: var(--th-gray-600); }

/* Kenar çubuğu rozetleri "badge th-badge": six'in filtre kodu
   (tablelist.tpl) öğedeki ilk span'ı filtre metni sayıyor, yalnızca
   .badge'i dışarıda bırakıyor — rozet .badge olmayınca "Yanıtlandı" yerine
   sayıyı ("1") arıyor, hiçbir filtre çalışmıyordu. Bootstrap/six'in .badge
   görünümü burada nötrleniyor. */
body .list-group-item > .badge.th-badge,
body a.list-group-item.active > .badge.th-badge,
body a.list-group-item:hover > .badge.th-badge {
  top: 0;
  min-width: 0;
  padding: 0.125rem 0.4375rem;
  border-radius: var(--th-radius-full);
  background: var(--th-gray-200);
  color: var(--th-gray-700);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: baseline;
}

/* ═════════ Hesap güvenliği (clientareasecurity.tpl) ═════════ */
.th-sec-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }

@media (max-width: 767px) { .th-sec-links { grid-template-columns: minmax(0, 1fr); } }

.th-sec-link {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.th-sec-link:hover { border-color: var(--th-brand-300); box-shadow: 0 6px 18px rgba(3, 7, 18, 0.06); color: inherit; text-decoration: none; }
.th-sec-link > span:nth-child(2) { flex: 1; min-width: 0; }
.th-sec-link b { display: block; font-size: 14.5px; color: var(--th-gray-900); }
.th-sec-link small { display: block; font-size: 12.5px; color: var(--th-gray-500); }
.th-sec-link .th-dpromo-go { flex: none; color: var(--th-gray-400, #9ca3af); }

.th-sec-sso { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.25rem 1.5rem; margin: 0; }

@media (max-width: 767px) { .th-sec-sso { flex-direction: column; align-items: flex-start; } }

.th-sec-sso-t b { font-size: 15px; color: var(--th-gray-900); }
.th-sec-sso-t p { margin: 0.375rem 0 0; font-size: 13.5px; line-height: 1.6; color: var(--th-gray-600); }
.th-sec-sso-s { display: flex; align-items: center; gap: 0.625rem; flex: none; font-size: 13px; font-weight: 600; color: var(--th-gray-700); }

/* WHMCS'in bootstrap-switch anahtarı: yeşil/gri yerine site renkleri */
.th-sec-sso .bootstrap-switch { border-color: var(--th-border); border-radius: 999px; }
.th-sec-sso .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success { background: var(--th-success); }

/* ═════════ Kullanıcı yönetimi (account-user-management.tpl) ═════════ */
.th-users { margin: 0; padding: 0; list-style: none; }

.th-user-row { display: flex; align-items: center; gap: 0.875rem; padding: 1rem 1.25rem; }
.th-user-row + .th-user-row { border-top: 1px solid var(--th-border); }
.th-user-t { flex: 1; min-width: 0; }
.th-user-t b { display: block; font-size: 14.5px; color: var(--th-gray-900); overflow-wrap: anywhere; }
.th-user-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; margin-top: 0.25rem; }
.th-user-meta small { font-size: 12px; color: var(--th-gray-500); }
.th-user-act { display: flex; flex-wrap: wrap; gap: 0.5rem; flex: none; margin: 0; }

@media (max-width: 575px) {
  .th-user-row { flex-wrap: wrap; }
  .th-user-act { width: 100%; padding-left: 3.375rem; }
}

.th-users-group {
  padding: 0.75rem 1.25rem 0.25rem;
  border-top: 1px solid var(--th-border);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--th-gray-500);
}

.th-invite-lead { margin: 0 0 1rem; }

.th-perms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 0.5rem; }

@media (max-width: 575px) { .th-perms { grid-template-columns: minmax(0, 1fr); } }

.th-perm {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius);
  font-weight: 400;
  cursor: pointer;
}

.th-perm:has(input:checked) { border-color: var(--th-brand-300); background: var(--th-brand-50); }
.th-perm input { margin: 0.1875rem 0 0; accent-color: var(--th-brand-600); }
.th-perm b { display: block; font-size: 13.5px; color: var(--th-gray-900); }
.th-perm small { display: block; font-size: 12px; line-height: 1.45; color: var(--th-gray-500); }

/* Liste tablosu açılır menüleri (ör. Alan Adlarım → araç düğmesi →
   "Alan Adı Yönetimi") kesiliyordu: .listtable'a verilen yatay kaydırma
   dikeyde de kırpıyor, .table-container da overflow:hidden. Masaüstünde
   tablo sığıyor (dar ekranda kart görünümü), taşmaya izin verilir.
   Köşeler kart yarıçapını başlık hücreleri ve bilgi şeridiyle koruyor. */
@media (min-width: 992px) {
  body .table-container,
  body .table-container .listtable { overflow: visible; }
  body .table-container .listtable > .dataTables_info { border-radius: var(--th-radius-lg) var(--th-radius-lg) 0 0; }
}

/* Boş liste (dar ekran): kart değil, ortalı boş durum. Önceden ilk hücre
   kuralları "Kayıt Bulunamadı" hücresini sağ üste konumluyor, geride içi
   boş bir kart kalıyordu. */
@media (max-width: 991px) {
  body table.table-list.th-cards tbody tr:has(> td.dataTables_empty) {
    margin: 0.75rem;
    padding: 0;
    border: 1px dashed var(--th-border);
    background: var(--th-gray-50);
  }

  body table.table-list.th-cards tbody tr > td.dataTables_empty.dataTables_empty {
    position: static !important;
    display: block;
    padding: 1.5rem 1rem !important;
    border: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 14px;
    font-weight: 500;
    color: var(--th-gray-500);
  }

  body table.table-list.th-cards tbody tr > td.dataTables_empty.dataTables_empty::before { content: none; }
}

/* Boş liste (masaüstü): sola yapışık düz metin yerine ortalı, soluk */
body table.table-list tbody td.dataTables_empty {
  padding: 2rem 1rem !important;
  text-align: center;
  font-size: 14px;
  color: var(--th-gray-500);
}

/* ═════════ Kalan iç sayfalar (sorumlular, bakiye, iptal, alan adı alt
              sayfaları, kullanıcı, yükseltme, duyurular, dosyalar, sunucu
              durumu, teklif, toplu ödeme, e-posta penceresi) ═════════ */

/* Özet satırları panel içinde de (yükseltme özeti, toplu ödeme) */
.th-tk2 .th-sum-lines { margin: 0; padding: 0.5rem 0; list-style: none; }
.th-tk2 .th-sum-lines > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; padding: 0.4375rem 0; font-size: 14px; color: var(--th-gray-800); }
.th-tk2 .th-sum-lines > li + li { border-top: 1px solid var(--th-border); }
.th-tk2 .th-sum-lines > li > b { font-family: var(--th-font-mono); font-size: 13px; text-align: right; white-space: nowrap; }
.th-tk2 .th-sum-lines small { display: block; font-size: 12px; color: var(--th-gray-500); }
.th-tk2 .th-sum-totals { margin: 0.5rem 0 0; padding: 0.625rem 0 0; border-top: 1px solid var(--th-border); }
.th-tk2 .th-sum-totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.25rem 0; font-size: 13.5px; }
.th-tk2 .th-sum-totals dt { font-weight: 500; color: var(--th-gray-500); }
.th-tk2 .th-sum-totals dd { margin: 0; font-family: var(--th-font-mono); color: var(--th-gray-800); }
.th-tk2 .th-sum-due { display: flex; flex-direction: column; gap: 0.125rem; margin: 0.75rem 0 1rem; padding: 0.875rem 1rem; border-radius: 0.75rem; background: var(--th-gray-50); }
.th-tk2 .th-sum-due > span { font-size: 12.5px; font-weight: 600; color: var(--th-gray-600); }
.th-tk2 .th-sum-due .amt { font-family: var(--th-font-display); font-size: 24px; font-weight: 700; color: var(--th-gray-900); }

.th-mini-dl { margin: 0; }
.th-mini-dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.375rem 0; font-size: 13px; }
.th-mini-dl > div + div { border-top: 1px solid var(--th-border); }
.th-mini-dl dt { font-weight: 500; color: var(--th-gray-500); }
.th-mini-dl dd { margin: 0; font-family: var(--th-font-mono); font-weight: 600; color: var(--th-gray-900); }
.th-side-note { padding: 0 0.25rem; }

/* Sorumlu seçici */
.th-contact-pick { margin-bottom: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--th-border); border-radius: var(--th-radius-lg); background: var(--th-surface); }
.th-contact-pick label { display: block; margin-bottom: 0.375rem; font-size: 13px; font-weight: 600; color: var(--th-gray-700); }
.th-contact-pick-row { display: flex; gap: 0.5rem; }
.th-contact-pick-row .form-control { flex: 1; }

/* Bakiye tutarı */
.th-amount { position: relative; max-width: 16rem; }
.th-amount .form-control { padding-right: 3rem; font-family: var(--th-font-mono); font-size: 18px; font-weight: 600; }
.th-amount span { position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); font-weight: 600; color: var(--th-gray-500); }

/* İptal talebi / yükseltme: hizmet kartı */
.th-cancel-svc { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--th-border); border-radius: var(--th-radius-lg); background: var(--th-surface); }
.th-cancel-svc b { display: block; font-size: 15.5px; color: var(--th-gray-900); }
.th-cancel-svc small { display: block; font-size: 13px; color: var(--th-gray-500); }
.th-cancel-type { margin: 0 0 1rem; padding: 0; border: 0; }
.th-cancel-type legend { margin-bottom: 0.5rem; padding: 0; border: 0; font-size: 13px; font-weight: 600; color: var(--th-gray-700); }

.th-cancel-domain { display: flex; align-items: flex-start; gap: 0.75rem; margin: 0; padding: 0.875rem 1rem; border: 1px solid color-mix(in srgb, var(--th-warning) 30%, transparent); border-radius: var(--th-radius); background: var(--th-warning-bg); font-weight: 400; cursor: pointer; }
.th-cancel-domain input { margin: 0.1875rem 0 0; accent-color: var(--th-brand-600); }
.th-cancel-domain b { display: block; font-size: 14px; color: var(--th-gray-900); }
.th-cancel-domain small { display: block; margin-top: 0.125rem; font-size: 13px; color: var(--th-gray-700); }
.th-cancel-domain-c { font-weight: 600; }
.th-cancel-done { max-width: 34rem; margin: 0 auto 1rem; }

/* Satır düzenleyici (DNS, e-posta yönlendirme) */
.th-rec-head,
.th-rec-row { display: grid; gap: 0.625rem; align-items: center; padding: 0.625rem 1.25rem; }
.th-rec-dns { grid-template-columns: minmax(0, 1fr) 9rem minmax(0, 2fr) 6rem; }
.th-rec-fwd { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr); }
.th-rec-head { background: var(--th-gray-50); border-bottom: 1px solid var(--th-border); font-size: 12px; font-weight: 600; color: var(--th-gray-500); }
.th-rec-row + .th-rec-row { border-top: 1px solid var(--th-border); }
.th-rec-row label { margin: 0; font-weight: 400; }
.th-rec-l { display: none; }
.th-rec-na { color: var(--th-gray-400, #9ca3af); }
.th-rec-at { font-family: var(--th-font-mono); font-size: 13px; color: var(--th-gray-500); white-space: nowrap; }
.th-rec-new { position: relative; background: var(--th-brand-50); }
.th-rec-newl { display: none; }
.th-rec-empty { margin: 0; padding: 1.25rem; font-size: 14px; text-align: center; color: var(--th-gray-500); }
.th-rec-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.th-rec-foot > div { display: flex; gap: 0.5rem; }

@media (max-width: 767px) {
  .th-rec-head { display: none; }
  .th-rec-dns,
  .th-rec-fwd { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; padding: 1rem 1.25rem; }
  .th-rec-l { display: block; margin-bottom: 0.25rem; font-size: 12px; font-weight: 600; color: var(--th-gray-500); }
  .th-rec-newl { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--th-brand-600); }
}

.th-epp { max-width: 32rem; }
.th-epp .th-2fa-backup { margin: 0.5rem 0 0.75rem; }

/* WHOIS kartları */
.th-whois-sel { max-width: 26rem; }
.th-whois .form-control[disabled] { background: var(--th-gray-50); color: var(--th-gray-400, #9ca3af); }

/* Özel isim sunucusu */
.th-ns-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; align-items: start; }
.th-ns-forms > .th-svc-card { margin: 0; }
.th-ns-f { display: flex; justify-content: flex-end; gap: 0.5rem; }
.th-suffix { display: flex; align-items: stretch; }
.th-suffix .form-control { border-radius: var(--th-radius) 0 0 var(--th-radius); }
.th-suffix span { display: flex; align-items: center; padding: 0 0.75rem; border: 1px solid var(--th-border); border-left: 0; border-radius: 0 var(--th-radius) var(--th-radius) 0; background: var(--th-gray-50); font-family: var(--th-font-mono); font-size: 13px; color: var(--th-gray-600); white-space: nowrap; }

/* Kullanıcı profili / 2FA */
.th-sec-actions { display: flex; justify-content: flex-end; margin-top: 0.5rem; }
.th-acc-sec-b .form-group label .th-pill { margin-left: 0.375rem; vertical-align: middle; }
.th-2fa-card .th-sec-sso-t b .th-pill { margin-left: 0.5rem; vertical-align: middle; }

/* Paket yükseltme */
.th-upg { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.75rem; }

.th-upg-card { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; margin: 0; padding: 1.25rem; border: 1px solid var(--th-border); border-radius: var(--th-radius-lg); background: var(--th-surface); transition: border-color 0.15s, box-shadow 0.15s; }
.th-upg-card:hover { border-color: var(--th-brand-300); box-shadow: 0 6px 18px rgba(3, 7, 18, 0.06); }
.th-upg-t b { display: block; font-family: var(--th-font-display); font-size: 18px; color: var(--th-gray-900); }
.th-upg-desc { margin-top: 0.5rem; font-size: 13px; line-height: 1.6; color: var(--th-gray-600); }
.th-upg-buy { display: grid; gap: 0.5rem; }
.th-upg-price { font-family: var(--th-font-mono); font-size: 16px; font-weight: 600; color: var(--th-gray-900); }
.th-upg-price small { font-family: var(--th-font-sans); font-size: 12px; font-weight: 400; color: var(--th-gray-500); }

.th-upgc-head,
.th-upgc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem; align-items: center; padding: 0.75rem 1.25rem; }
.th-upgc-head { background: var(--th-gray-50); border-bottom: 1px solid var(--th-border); font-size: 12px; font-weight: 600; color: var(--th-gray-500); }
.th-upgc-row + .th-upgc-row { border-top: 1px solid var(--th-border); }
.th-upgc-row b { font-size: 14px; color: var(--th-gray-900); }
.th-upgc-cur { font-size: 13.5px; color: var(--th-gray-500); }
.th-upgc-qty { display: flex; align-items: center; gap: 0.5rem; font-size: 13px; }
.th-upgc-qty .form-control { width: 5rem; text-align: center; }
.th-upgc-chk { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-weight: 400; }

@media (max-width: 767px) {
  .th-upgc-head { display: none; }
  .th-upgc-row { grid-template-columns: minmax(0, 1fr); gap: 0.375rem; }
}

.th-upgs .th-upgs-arrow { color: var(--th-gray-400, #9ca3af); }
.th-promo { display: flex; gap: 0.5rem; }
.th-promo .form-control { flex: 1; min-width: 0; }

/* Duyurular */
.th-ann { display: flex; flex-direction: column; gap: 0.75rem; }
.th-ann-item { position: relative; padding: 1.25rem 1.5rem; border: 1px solid var(--th-border); border-radius: var(--th-radius-lg); background: var(--th-surface); }
.th-ann-date { font-family: var(--th-font-mono); font-size: 12px; font-weight: 600; color: var(--th-brand-600); }
.th-ann-item h2 { margin: 0.25rem 0 0.5rem; font-size: 18px; }
.th-ann-item h2 a { color: var(--th-gray-900); text-decoration: none; }
.th-ann-item h2 a:hover { color: var(--th-brand-600); }
.th-ann-text { font-size: 14px; line-height: 1.65; color: var(--th-gray-700); }
.th-ann-text p:last-child { margin-bottom: 0; }
.th-ann-more { display: inline-block; margin-top: 0.5rem; font-size: 13.5px; font-weight: 600; color: var(--th-brand-600); }
.th-ann-edit { position: absolute; top: 1.25rem; right: 1.5rem; font-size: 12px; }
.th-ann-read { padding: 1.5rem 1.75rem; }
.th-ann-read-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.th-ann-body { font-size: 15px; line-height: 1.75; color: var(--th-gray-800); }
.th-ann-body a { color: var(--th-brand-600); }

/* Boş durum, sayfalama */
.th-empty { display: grid; justify-items: center; gap: 0.375rem; padding: 2.5rem 1.5rem; border: 1px dashed var(--th-border); border-radius: var(--th-radius-lg); background: var(--th-surface); text-align: center; }
.th-empty b { font-size: 15px; color: var(--th-gray-900); }
.th-empty > span:last-child { font-size: 13px; color: var(--th-gray-500); }
.th-pager { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 1rem; }
.th-pager .btn.active { border-color: var(--th-gray-900); background: var(--th-gray-900); color: #fff; }

/* Dosyalar */
.th-dl-search { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.th-dl-search .form-control { flex: 1; height: 3rem; font-size: 15px; }
.th-dl-search .btn { height: 3rem; padding: 0 1.5rem; }
.th-dl-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; }
.th-dl-n { margin-left: 0.25rem; padding: 0 0.4375rem; border-radius: 999px; background: var(--th-gray-100); font-size: 11px; font-weight: 700; color: var(--th-gray-600); }
.th-dl-file { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1.25rem; color: inherit; text-decoration: none; }
.th-dl-file + .th-dl-file { border-top: 1px solid var(--th-border); }
.th-dl-file:hover { background: var(--th-gray-50); color: inherit; text-decoration: none; }
.th-dl-t { flex: 1; min-width: 0; }
.th-dl-t b { display: block; font-size: 14px; color: var(--th-gray-900); }
.th-dl-t small { display: block; font-size: 12.5px; color: var(--th-gray-500); }
.th-dl-size { flex: none; font-family: var(--th-font-mono); font-size: 12.5px; color: var(--th-gray-500); }

/* Sunucu durumu */
.th-issues { display: flex; flex-direction: column; gap: 0.75rem; }
.th-issues > .th-svc-card { margin: 0; }
.th-issue.affected { border-color: color-mix(in srgb, var(--th-warning) 40%, transparent); }
.th-issue-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.th-issue-b { font-size: 14px; line-height: 1.65; color: var(--th-gray-700); border-bottom: 1px solid var(--th-border); }

.th-ok-state { display: flex; align-items: center; gap: 0.75rem; padding: 1.125rem 1.25rem; border: 1px solid color-mix(in srgb, var(--th-success) 30%, transparent); border-radius: var(--th-radius-lg); background: var(--th-success-bg); }
.th-ok-state b { display: block; font-size: 14.5px; color: var(--th-gray-900); }
.th-ok-state span:not(.th-dot) { display: block; font-size: 13px; color: var(--th-gray-600); }

.th-srv { overflow-x: auto; }
.th-srv .table { margin: 0; font-size: 13.5px; }
.th-srv .table > thead > tr > th { border-bottom: 1px solid var(--th-border); background: var(--th-gray-50); font-size: 12px; color: var(--th-gray-500); }

/* Teklif kabul kutusu (viewquote) */
.th-quote-accept .th-inv-pay-body { justify-content: center; }

/* Toplu ödeme */
.th-mp-inv + .th-mp-inv { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--th-border); }
.th-mp-inv header { display: flex; align-items: baseline; gap: 0.5rem; }
.th-mp-inv header b { font-family: var(--th-font-mono); font-size: 14px; color: var(--th-gray-900); }

/* Gönderilen e-posta penceresi */
body.th-mailview { margin: 0; padding: 1.25rem; background: var(--th-surface-muted); font-family: var(--th-font-sans); }
.th-mailview-h { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }
.th-mailview-h h1 { margin: 0.25rem 0 0; font-family: var(--th-font-display); font-size: 18px; color: var(--th-gray-900); }
.th-mailview-att { margin: 0.375rem 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--th-gray-600); }
.th-mailview-b { padding: 0.5rem; border: 1px solid var(--th-border); border-radius: var(--th-radius-lg); background: #fff; }
.th-mailview-f { margin-top: 1rem; text-align: right; }

/* ═════════ Ödeme yönlendirme (forwardpage.tpl) ═════════ */
.th-fwd { display: grid; place-items: start center; padding: 1rem 0 2rem; }

.th-fwd-card {
  width: 100%;
  max-width: 36rem;
  padding: 2rem;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
  text-align: center;
}

@media (max-width: 575px) { .th-fwd-card { padding: 1.5rem 1.125rem; } }

.th-fwd-spin {
  display: inline-block;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  border: 3px solid var(--th-brand-50);
  border-top-color: var(--th-brand-600);
  border-radius: 50%;
  animation: th-spin 0.9s linear infinite;
}

@keyframes th-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .th-fwd-spin { animation: none; } }

.th-fwd-card h2 { margin: 0 0 0.375rem; font-size: 20px; }
.th-fwd-card > p { margin: 0; font-size: 14px; color: var(--th-gray-600); }
.th-fwd-count { margin-top: 0.375rem !important; font-size: 13px !important; color: var(--th-gray-500) !important; }

/* Ödeme yönteminin çıktısı: havale talimatı metni ya da sağlayıcı formu */
.th-fwd-code {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  border-radius: var(--th-radius);
  background: var(--th-gray-50);
  font-size: 14px;
  line-height: 1.65;
  color: var(--th-gray-700);
  overflow-wrap: anywhere;
}

.th-fwd-code:not(:has(> :not(form:empty))) { display: none; }
.th-fwd-code p { margin: 0; }
.th-fwd-code a { color: var(--th-brand-600); font-weight: 500; }
.th-fwd-code input[type="submit"],
.th-fwd-code button { margin-top: 0.75rem; padding: 0.5rem 1rem; border: 0; border-radius: 0.625rem; background: var(--th-brand-600); color: #fff; font-weight: 600; }

.th-fwd-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }

/* ═════════ Ana sayfa: yaklaşan yenilemeler + hesabınızı tamamlayın ═════════
   Veri hooks/turkhosting_home.php'den. Durum renkleri: ≤7 gün ya da
   gecikmiş kırmızı, ≤14 gün turuncu, sonrası nötr. */
.th-home-card-h h2 .th-pill { margin-left: 0.375rem; vertical-align: middle; }
.th-renew-note,
.th-setup-n { font-size: 12px; color: var(--th-gray-500); }
.th-setup-n { font-family: var(--th-font-mono); font-weight: 600; }

.th-renew-list,
.th-setup-list { margin: 0; padding: 0; list-style: none; }

.th-renew-row { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1.25rem; }
.th-renew-row + .th-renew-row { border-top: 1px solid var(--th-border); }

.th-renew-ic { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; background: var(--th-brand-50); color: var(--th-brand-600); }

.th-renew-t { flex: 1; min-width: 0; }
.th-renew-t b { display: block; font-size: 14.5px; color: var(--th-gray-900); overflow-wrap: anywhere; }
.th-renew-t small { display: block; margin-top: 0.125rem; font-size: 12.5px; color: var(--th-gray-500); }

.th-renew-bar { display: block; height: 0.3125rem; margin-top: 0.5rem; border-radius: 999px; background: var(--th-gray-100); overflow: hidden; }
.th-renew-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--th-gray-400, #9ca3af); }
.th-renew-bar.wait > i { background: var(--th-warning); }
.th-renew-bar.bad > i { background: var(--th-danger); }

.th-renew-row .btn { flex: none; }

@media (max-width: 479px) {
  .th-renew-row { flex-wrap: wrap; }
  .th-renew-row .btn { width: 100%; }
}

/* Hesabınızı tamamlayın */
.th-setup-bar { display: block; height: 0.3125rem; margin: 0 1.25rem 0.25rem; border-radius: 999px; background: var(--th-gray-100); overflow: hidden; }
.th-setup-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--th-success); }

.th-setup-row { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1.25rem; }
.th-setup-row + .th-setup-row { border-top: 1px solid var(--th-border); }

.th-setup-chk { display: grid; place-items: center; flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.0625rem; border: 2px solid var(--th-border); border-radius: 50%; color: #fff; }
.th-setup-row.done .th-setup-chk { border-color: var(--th-success); background: var(--th-success); }

.th-setup-t { flex: 1; min-width: 0; }
.th-setup-t b { display: block; font-size: 13.5px; font-weight: 600; color: var(--th-gray-900); }
.th-setup-row.done .th-setup-t b { font-weight: 500; color: var(--th-gray-500); text-decoration: line-through; text-decoration-color: var(--th-gray-300, #d1d5db); }
.th-setup-t small { display: block; margin-top: 0.125rem; font-size: 12px; line-height: 1.5; color: var(--th-gray-500); }
.th-setup-row .btn { flex: none; }

/* ═════════ Yenileme sayfaları (domain-renewals, service-renewals) ═════════ */
body #order-standard_cart .th-renew-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
body #order-standard_cart .th-renew-head .form-control { max-width: 16rem; }
body #order-standard_cart .th-renew-tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

body #order-standard_cart .th-rnw { display: flex; flex-direction: column; gap: 0.75rem; }

body #order-standard_cart .th-rnw-item {
  margin: 0;
  padding: 0;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-lg);
  background: var(--th-surface);
  overflow: hidden;
}

body #order-standard_cart .th-rnw-h { display: flex; align-items: center; gap: 0.875rem; padding: 1rem 1.25rem; }
body #order-standard_cart .th-rnw-t { flex: 1; min-width: 0; }
body #order-standard_cart .th-rnw-t h3 { margin: 0; font-family: var(--th-font-display); font-size: 17px; font-weight: 600; color: var(--th-gray-900); overflow-wrap: anywhere; }
body #order-standard_cart .th-rnw-t small { display: block; margin-top: 0.125rem; font-size: 12.5px; color: var(--th-gray-500); }
body #order-standard_cart .th-rnw-h .th-pill { flex: none; }

body #order-standard_cart .th-rnw-desc { margin: 0; padding: 0 1.25rem 0.75rem; font-size: 13px; color: var(--th-gray-600); }

body #order-standard_cart .th-rnw-b {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--th-border);
  background: var(--th-gray-50);
}

body #order-standard_cart .th-rnw-b:empty { display: none; }
body #order-standard_cart .th-rnw-form { flex: 1; max-width: 22rem; margin: 0; }
body #order-standard_cart .th-rnw-form label { display: block; margin-bottom: 0.375rem; font-size: 12.5px; font-weight: 600; color: var(--th-gray-600); }
body #order-standard_cart .th-rnw-period { flex: 1; min-width: 0; font-size: 13px; color: var(--th-gray-700); }
body #order-standard_cart .th-rnw-period .div-renewal-period-label { display: block; font-size: 12px; font-weight: 600; color: var(--th-gray-500); }
body #order-standard_cart .th-rnw-add { flex: none; }

@media (max-width: 575px) {
  body #order-standard_cart .th-rnw-h { flex-wrap: wrap; }
  body #order-standard_cart .th-rnw-b { flex-direction: column; align-items: stretch; }
  body #order-standard_cart .th-rnw-form { max-width: none; }
}

body #order-standard_cart .th-rnw-addons { padding: 0.875rem 1.25rem; border-top: 1px solid var(--th-border); }
body #order-standard_cart .th-rnw-addons .th-rnw-item { border-radius: var(--th-radius); }
body #order-standard_cart .th-rnw-addons .th-rnw-item + .th-rnw-item { margin-top: 0.5rem; }

/* standard_cart'ın yenileme listesi ve özet kalıntıları: listeye gri üst
   çizgi + zemin, özet içeriğine 10px gri kutu, başlığa ortalama, toplamlara
   alt-üst çizgi, "Bugün ödenmesi gereken"e sağa yaslama veriyordu. */
body #order-standard_cart .domain-renewals.th-rnw,
body #order-standard_cart .service-renewals.th-rnw {
  margin: 0;
  border-top: 0;
  background: none;
}

body #order-standard_cart .order-summary.th-sum .th-sum-title { padding: 0; text-align: left; }

body #order-standard_cart .order-summary.th-sum .summary-container {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: inherit;
}

body #order-standard_cart .order-summary.th-sum .summary-totals { margin: 0; border-bottom: 0; }
body #order-standard_cart .order-summary.th-sum .th-sum-lines:empty { display: none; }
body #order-standard_cart .order-summary.th-sum .th-sum-due > span,
body #order-standard_cart .order-summary.th-sum .th-sum-due .amt { display: block; text-align: left; }

/* ── Ödeme sayfası v2 ── */

/* İlk ara başlığın üst çizgisi formun en tepesinde boşa bir çizgi çiziyordu */
body #order-standard_cart #frmCheckout > .sub-heading:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Hesap seçimi: bootstrap sütunları ve gri "yeni hesap" satırı yerine kart listesi */
body #order-standard_cart .th-acct-list {
  display: grid;
  gap: 0.625rem;
  margin: 0;
}

body #order-standard_cart .th-acct-list::before,
body #order-standard_cart .th-acct-list::after { display: none; }

body #order-standard_cart .th-acct-list .account {
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--th-gray-200);
  border-radius: 0.75rem;
  background: var(--th-surface);
  transition: border-color 0.15s, background-color 0.15s;
}

body #order-standard_cart .th-acct-list .account:hover { border-color: var(--th-brand-300); }

body #order-standard_cart .th-acct-list .account.active,
body #order-standard_cart .th-acct-list .account:has(input:checked) {
  border-color: var(--th-brand-600);
  background: var(--th-brand-50);
}

body #order-standard_cart .th-acct-list .account.is-off { opacity: 0.6; }

body #order-standard_cart .th-acct-list .account label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 0.875rem 1rem;
  font-weight: 400;
  cursor: pointer;
}

body #order-standard_cart .th-acct-list .account label > input,
body #order-standard_cart .th-acct-list .account label > [class*="iradio"] {
  position: static;
  flex: none;
  margin: 0.125rem 0 0;
}

body #order-standard_cart .th-acct-b { display: block; min-width: 0; }
body #order-standard_cart .th-acct-t { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
body #order-standard_cart .th-acct-t strong { font-size: 14.5px; font-weight: 600; color: var(--th-gray-900); }

body #order-standard_cart .th-acct-b small {
  display: block;
  margin-top: 0.25rem;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--th-gray-500);
}

/* Bugün ödenecek: etiket solda, tutar sağda; JS'in eklediği ek ücret
   notu gibi öğeler alt satıra tam genişlikte düşer */
body #order-standard_cart #frmCheckout #totalDueToday.th-due {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem 1rem;
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
}

body #order-standard_cart #totalDueToday.th-due .th-due-l { font-size: 14px; font-weight: 500; color: var(--th-gray-600); }
body #order-standard_cart #totalDueToday.th-due #totalCartPrice { text-align: right; }

body #order-standard_cart #totalDueToday.th-due > :not(.th-due-l):not(#totalCartPrice) {
  grid-column: 1 / -1;
  justify-self: end;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--th-gray-500);
}

body #order-standard_cart #paymentGatewaysContainer > p.small {
  font-size: 13px;
  color: var(--th-gray-600) !important;
}

/* Sözleşme ve sipariş düğmesi tek blokta */
body #order-standard_cart .th-co-submit {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--th-border);
}

body #order-standard_cart .th-tos {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0;
  padding: 0.875rem 1rem;
  border: 1px solid var(--th-border);
  border-radius: 0.75rem;
  background: var(--th-surface-muted);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--th-gray-700);
  cursor: pointer;
}

body #order-standard_cart .th-tos input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0.0625rem 0 0;
  accent-color: var(--th-brand-600);
  cursor: pointer;
}

body #order-standard_cart .th-tos:has(input:checked) { border-color: var(--th-brand-300); }
body #order-standard_cart .th-tos a { color: var(--th-brand-600); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

body #order-standard_cart .th-co-submit #btnCompleteOrder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  justify-self: start;
}

@media (max-width: 575px) {
  body #order-standard_cart .th-co-submit #btnCompleteOrder { justify-self: stretch; min-width: 0; }
}

/* Güvenlik notu: turuncu uyarı kutusu yerine sakin bir bilgi satırı */
body #order-standard_cart .th-co-secure {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--th-gray-500);
}

body #order-standard_cart .th-co-secure svg { flex: none; margin-top: 0.0625rem; color: var(--th-success); }
body #order-standard_cart .th-co-secure strong { font-family: var(--th-font-mono); font-weight: 500; color: var(--th-gray-700); }

body #order-standard_cart .th-checkout-side .th-sum-note { text-align: left; }

/* ── Mobil alt gezinme ──
   Masaüstünde yok; 767px altında üstteki yatay kayan panel menüsünün
   yerini alır. Yükseklik --th-tabbar-h: sayfa altı ve "yukarı çık"
   düğmesi bu kadar yukarıda kalır ki çubuk içeriği örtmesin. */
.th-tabbar { display: none; }

@media (max-width: 767px) {
  body:has(.th-tabbar) { --th-tabbar-h: calc(3.75rem + env(safe-area-inset-bottom, 0px)); }

  .th-subnav { display: none; }

  .th-tabbar {
    position: fixed;
    inset: auto 0 0;
    z-index: 45; /* başlık (50) ve mobil menü üstte kalsın */
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: var(--th-tabbar-h);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--th-gray-200);
    box-shadow: 0 -4px 16px rgba(3, 7, 18, 0.06);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
  }

  .th-tabbar a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1875rem;
    min-width: 0;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--th-gray-500);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .th-tabbar a > span:not(.th-tab-ic):not(.sr-only) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .th-tabbar a:hover,
  .th-tabbar a:focus { color: var(--th-gray-900); text-decoration: none; }

  .th-tabbar a:focus-visible { outline: 2px solid var(--th-brand-500); outline-offset: -4px; border-radius: 0.5rem; }

  /* Aktif sekme: kırmızı simge + üstte ince çizgi */
  .th-tabbar a.on { color: var(--th-brand-600); font-weight: 600; }

  .th-tabbar a.on::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1.75rem;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--th-brand-600);
    transform: translateX(-50%);
  }

  .th-tab-ic { position: relative; display: inline-flex; }

  .th-tab-badge {
    position: absolute;
    top: -0.375rem;
    right: -0.625rem;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3125rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--th-brand-600);
    font-size: 10px;
    font-weight: 700;
    line-height: 0.875rem;
    color: #fff;
    text-align: center;
  }

  body:has(.th-tabbar) #th-footer { padding-bottom: var(--th-tabbar-h); }
  body:has(.th-tabbar) #th-footer .back-to-top { bottom: calc(var(--th-tabbar-h) + 1rem); }
}

@media print { .th-tabbar { display: none !important; } }