/*
 * Panele ozel ek stiller.
 * ApexHost temasinin theme.css dosyasina DOKUNULMAZ; burasi yalnizca temada
 * karsiligi olmayan bilesenler icin (DNS kayit editoru, sekmeler, yukleme
 * gostergesi, sunucu guc butonlari).
 */

/* ---------------------------------------------------- gezinme yukleme cizgisi */
.nav-loading::after {
  content: "";
  position: fixed;
  inset: 0 auto auto 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, #4f39f6, #b06ab3, #4f39f6);
  background-size: 200% 100%;
  animation: navbar-progress .9s linear infinite;
  z-index: 9999;
}

@keyframes navbar-progress {
  from { background-position: 200% 0; }
  to   { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-loading::after { animation: none; }
}

/* --------------------------------------------------------------- sekmeler */
.panel-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding-bottom: 12px;
}

.panel-tabs .tab-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, .62);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.panel-tabs .tab-link:hover {
  background: rgba(255, 255, 255, .05);
  color: #fff;
}

.panel-tabs .tab-link.active {
  background: rgba(79, 57, 246, .16);
  color: #fff;
}

/* ------------------------------------------------------- DNS kayit editoru */
.dns-editor { width: 100%; }

.dns-editor .dns-row {
  display: grid;
  grid-template-columns: 150px 1fr 1.4fr 110px 110px 44px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.dns-editor .dns-head {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .45);
  font-weight: 600;
}

.dns-editor .form-control { margin-bottom: 0; }

.dns-editor .dns-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: transparent;
  color: rgba(255, 255, 255, .55);
  cursor: pointer;
}

.dns-editor .dns-remove:hover {
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, .4);
}

@media (max-width: 991px) {
  .dns-editor .dns-row {
    grid-template-columns: 1fr 1fr;
  }
  .dns-editor .dns-head { display: none; }
  .dns-editor .dns-row { padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; }
}

/* -------------------------------------------------------- sunucu guc kutusu */
.power-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.power-actions .btn { min-width: 140px; }

.server-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  margin-bottom: 8px;
}

.server-stat .label-text {
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
}

.server-stat .value-text {
  font-size: 14px;
  font-weight: 600;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

/* Kullanim cubugu */
.usage-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.usage-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4f39f6, #8b7cff);
}

/* --------------------------------------------------------- yonetici alani */
.admin-shell { display: flex; min-height: 100vh; }

.admin-sidebar {
  width: 248px;
  flex: 0 0 248px;
  background: rgba(255, 255, 255, .02);
  border-right: 1px solid rgba(255, 255, 255, .07);
  padding: 20px 14px;
}

.admin-content { flex: 1 1 auto; padding: 24px 28px; min-width: 0; }

.admin-sidebar .group-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .35);
  margin: 18px 10px 8px;
}

.admin-sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: rgba(255, 255, 255, .7);
  font-size: 14px;
  text-decoration: none;
}

.admin-sidebar a:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.admin-sidebar a.active { background: rgba(79, 57, 246, .18); color: #fff; }

@media (max-width: 991px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar { width: 100%; flex: none; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  .admin-content { padding: 18px 14px; }
}

/* Uzun tablolar yatayda kaydirilabilir olsun, sayfa tasmasin */
.table-container { overflow-x: auto; }

/* Kod/JSON gosterimleri */
pre.code-block {
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 10px;
  padding: 14px;
  font: 12px/1.6 "IBM Plex Mono", ui-monospace, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 360px;
  overflow: auto;
}

/* ------------------------------------------------- gecici bildirim mesajlari
 * Bir islemden sonra gosterilen mesajlar kendiliginden kaybolur.
 * Sayfa icerigi olan bilgilendirme kutulari (data-auto-dismiss tasimayanlar)
 * bu davranistan etkilenmez.
 */
.alert-container[data-auto-dismiss] {
  transition: opacity .35s ease, transform .35s ease, max-height .35s ease, margin .35s ease;
  max-height: 400px;
}

.alert-container[data-auto-dismiss].is-leaving {
  opacity: 0;
  transform: translateY(-6px);
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Kapatma dugmesi */
.alert-close {
  margin-left: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: currentColor;
  opacity: .55;
  cursor: pointer;
  flex: 0 0 auto;
}

.alert-close:hover { opacity: 1; background: rgba(255, 255, 255, .1); }

/* Kalan sureyi gosteren ince cizgi */
.alert-container[data-auto-dismiss] .alert { position: relative; overflow: hidden; }

.alert-container[data-auto-dismiss] .alert::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: currentColor;
  opacity: .35;
  transform-origin: left center;
  animation: alert-countdown linear forwards;
  animation-duration: var(--alert-duration, 5000ms);
}

@keyframes alert-countdown {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Hareket azaltma tercihi: animasyon yok, yine de kaybolur */
@media (prefers-reduced-motion: reduce) {
  .alert-container[data-auto-dismiss] { transition: none; }
  .alert-container[data-auto-dismiss] .alert::after { animation: none; opacity: 0; }
}

/* ===================================================== dil degistirici ===== */
/* Bayrak DEGIL dil kodu gosteriliyor: bir dil bir ulke demek degil. Ingilizce
   icin hangi bayragi secersen sec (ABD? Ingiltere?) bir kitleyi disarida
   birakirsin. Kod evrensel ve okunakli. */

.locale-switch { position: relative; }

.locale-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: auto;
  padding: 0 9px;
}

.locale-code {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
}

.locale-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  min-width: 178px;
  margin: 0;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: #14141c;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}

.locale-menu[hidden] { display: none; }

.locale-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: rgba(255, 255, 255, .72);
  font-size: 13.5px;
  text-decoration: none;
  transition: background .13s ease, color .13s ease;
}

.locale-item:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.locale-item.is-active { color: #fff; }

.locale-item-code {
  flex: 0 0 auto;
  min-width: 26px;
  padding: 2px 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .08);
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  letter-spacing: .04em;
}

.locale-item.is-active .locale-item-code { background: rgba(109, 92, 246, .3); color: #b8acff; }
.locale-item-name  { flex: 1 1 auto; }
.locale-item-check { flex: 0 0 auto; color: #8b7cff; display: flex; }

@media (max-width: 575px) {
  .locale-code { display: none; }
  .locale-toggle { padding: 0; }
}

/* ================================================= paket karti ikonlari ===== */
/* Her pakette ayni onay isareti duruyordu; ikon urun tipini anlatmali.
   Renk grubu ayirt eder: ayni izgarada RDP, VPS ve hosting yan yana. */

.plan-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .045);
  color: rgba(255, 255, 255, .82);
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.plan-icon.tone-rdp     { color: #8b7cff; background: rgba(109, 92, 246, .13); border-color: rgba(109, 92, 246, .3); }
.plan-icon.tone-vps     { color: #4fc3f7; background: rgba(79, 195, 247, .12); border-color: rgba(79, 195, 247, .28); }
.plan-icon.tone-hosting { color: #5bd6a4; background: rgba(91, 214, 164, .12); border-color: rgba(91, 214, 164, .28); }

.regular-plan-card:hover .plan-icon { border-color: currentColor; }

/* One cikan pakette ikon biraz daha belirgin dursun */
.regular-plan-card.popular .plan-icon { background: rgba(255, 255, 255, .08); }

/* Domain aramasi beklerken donen gosterge */
.domain-spinner {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, .18);
  border-top-color: var(--adm-primary-2, #8b7cff);
  border-radius: 50%;
  animation: domain-spin .7s linear infinite;
}

@keyframes domain-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .domain-spinner { animation-duration: 2s; }
}

/* ===== musteri paneli mobil uyumu ===== */
/*
 * Yonetim tarafindaki cekmece deseninin (admin.css '.admin-sidebar' mobil
 * bloklari) musteri karsiligi, arti dar ekranda tasan tablo/sekme/kart
 * duzenleri. Buradaki kurallarin tamami #main-body ya da .theme-topbar
 * altina kapsanir: panel.css yonetim duzeninde de yukleniyor, oradaki
 * iskelet .admin-shell - yani bu blok yonetim ekranlarina hic dokunmaz.
 *
 * Tema sinif adlari degistirilmez; yalnizca yeni sinif eklenir.
 */

/* ------------------------------------------------- musteri paneli cekmecesi
 * Kirilma noktasi 991px DEGIL 1199.98px: custom.css:397 kenar cubugunu tam
 * o noktada width:100% yapip icerigin USTUNE yigiyor. 991px secilseydi
 * 992-1199 bandinda duzeltmek istedigimiz yigilmis hal geri gelirdi.
 */
.client-menu-bar { display: none; }

@media (max-width: 1199.98px) {
  /* Cubuk yapisik kalir: 13 baglantilik menuye ulasmak icin sayfa basina
     donmek gerekmesin. Kaydirilinca navbar top:0'a oturuyor (theme.js:117),
     bu yuzden yapisma noktasini panel.js navbar yuksekliginden olcup yazar. */
  .client-menu-bar {
    position: sticky;
    top: var(--client-menu-top, 64px);
    z-index: 40;
    display: block;
    margin-inline: -4vw;
    padding: 8px 4vw;
    background: var(--background);
    border-bottom: 1px solid var(--border);
  }

  .client-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--theme-radius);
    background: var(--card);
    color: var(--foreground);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
  }
  .client-menu-btn:hover { color: #fff; }

  /* Ayni ozgulluk (0,1,1) ama panel.css custom.css'ten SONRA yukleniyor. */
  #main-body .sidebar-col {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 200;
    width: 288px;
    max-width: 86vw;
    padding: 14px 12px 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--background);
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
    /* Kapaliyken gorunurluk kalkar: yoksa ekran disindaki 13 baglanti
       sekme sirasinda gezilebilir kalir. */
    visibility: hidden;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .22s;
  }

  #main-body .sidebar-col.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s;
    /* Ayri bir perde elemani gerekmesin diye admin.css:517'deki numara. */
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55);
  }

  #main-body .sidebar-col .theme-sidebar-panel:last-child { margin-bottom: 0; }

  .client-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }
  .client-drawer-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--foreground);
  }
  .client-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: var(--theme-radius);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
  }
  .client-drawer-close:hover { color: var(--foreground); }

  /* Cekmece acikken arka plan kaymasin */
  body.client-menu-open { overflow: hidden; }
}

/* Genis ekranda cekmece basligi hic gorunmez. */
@media (min-width: 1200px) {
  .client-drawer-head { display: none; }
}

@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
  #main-body .sidebar-col,
  #main-body .sidebar-col.is-open { transition: visibility 0s; }
}

/* ----------------------------------------------------------- sekme seridi
 * Hizmet sayfasinda 9 sekme var; bes satira sarmak yerine tek serit halinde
 * yatay kaydirilir. Sag ucdaki maske seridin devam ettigini belli eder.
 */
@media (max-width: 767.98px) {
  #main-body .panel-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 88%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 88%, transparent 100%);
  }
  #main-body .panel-tabs::-webkit-scrollbar { display: none; }
  #main-body .panel-tabs .tab-link {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 12px;
  }
}

/* ------------------------------------------------------------- tablolar */
.table-container {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Sablon satir ici "word-break" demis ama .table-cell'in white-space:nowrap
   kurali onu etkisiz birakiyordu (uzun TXT/SPF kaydi tabloyu genisletiyor). */
#main-body .table-cell[style*="word-break"] {
  white-space: normal;
  min-width: 180px;
}

@media (max-width: 767.98px) {
  #main-body .table-cell { padding: .5rem .75rem; height: 44px; }
  #main-body .table .table-head { padding: .6rem .75rem; }
}

/* Dar ekranda satir = kart. table-stack sinifini panel.js koyar; colspan
   tasiyan tablolar (DNS duzenleme satiri, yedek geri yukleme formu) blok
   duzeninde anlamsizlasacagi icin disarida kalir. Hucre etiketleri de
   baslik satirindan turetilir - 23 cagri yerinde elle yazilmaz. */
@media (max-width: 575.98px) {
  #main-body .table-container.table-stack { overflow-x: visible; }

  #main-body .table-stack table.table,
  #main-body .table-stack .tbody,
  #main-body .table-stack .tbody > tr,
  #main-body .table-stack .tbody > tr > td { display: block; width: 100%; }

  #main-body .table-stack .thead { display: none; }

  #main-body .table-stack .tbody > tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
  }
  #main-body .table-stack .tbody > tr:hover { background: transparent !important; }

  #main-body .table-stack .tbody > tr > td {
    height: auto;
    white-space: normal;
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 12px;
    padding: 8px 12px;
    text-align: right;
  }
  #main-body .table-stack .tbody > tr > td > * { min-width: 0; }
  #main-body .table-stack .tbody > tr > td:not(:last-child) {
    border-bottom: 1px solid var(--border);
  }

  #main-body .table-stack .tbody > tr > td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    text-align: left;
    font-size: var(--text-sm);
    color: var(--muted-foreground);
  }
  /* Basliksiz islem sutunu (ui_table_open sonundaki bos baslik) saga yaslanir. */
  #main-body .table-stack .tbody > tr > td:not([data-label])::before { content: none; }
  #main-body .table-stack .tbody > tr > td:not([data-label]) { justify-content: flex-end; }
}

/* ------------------------------------------------------------ DNS editoru
 * dns.php izgara sutunlarini SATIR ICI stille veriyor; satir ici bildirim
 * media query'den bagimsiz kazandigi icin yukaridaki 991px kurali orada hic
 * calismiyordu. Sablon bu gorevin dosyalari disinda, o yuzden !important.
 */
@media (max-width: 991.98px) {
  .dns-editor .dns-row { grid-template-columns: 1fr 1fr !important; }
  .dns-editor .dns-row > *:last-child { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
  .dns-editor .dns-row { grid-template-columns: 1fr !important; }
}

/* ----------------------------------------------------------- deger satiri
 * .server-stat nowrap bir flex satiriydi: odeme takip numarasi, e-posta ve
 * sunucu adi gibi uzun degerler 375px'te karti tasiriyordu.
 */
.server-stat { flex-wrap: wrap; row-gap: 2px; column-gap: 12px; }
.server-stat .label-text { flex: 0 0 auto; }
.server-stat .value-text {
  min-width: 0;
  word-break: break-all;
  text-align: right;
}

/* --------------------------------------------------------------- ust cubuk
 * 375px'te selamlama + tam ad + dort dugme tek satira sigmiyordu: olculen
 * genislik 355px, kullanilabilir alan 338px.
 *
 * Cozum SARMA DEGIL: cubuk mr-auto/ml-auto ile hizalaniyor, sarma acildiginda
 * otomatik kenar bosluklari tum bos alani yutup ikinci grubu HER ZAMAN alt
 * satira itiyor (ust cubuk 64px yerine 110px oluyor). Bunun yerine ad
 * bloguna min-width:0 verilip fazlasi kirpiliyor - grup 140px'e sigiyor.
 */
@media (max-width: 767.98px) {
  .theme-topbar .active-user > .text { display: none; }
  .theme-topbar .topbar-content .v-divider { display: none; }
  /* Bakiye rakami kirpilmamali; daralma hakki ad tarafina birakilir. */
  .theme-topbar .topbar-content .mr-auto { flex: 0 0 auto; }
  .theme-topbar .topbar-content .ml-auto,
  .theme-topbar .active-user,
  .theme-topbar .active-user > .d-flex,
  .theme-topbar .active-user a { min-width: 0; }
  .theme-topbar .active-user a > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* 575.98px altinda ust cubuktaki "Musteri Paneli" dugmesi yalnizca ikona
   duser (topbar.php:21 metni d-sm-inline ile gizliyor) ve ayni baglanti
   navbar'da da duruyor. Gizlenince ada 51px daha kaliyor: 38px'lik
   "Test M..." yerine tam ad okunur oluyor. */
@media (max-width: 575.98px) {
  .theme-topbar .mr-auto a[href$="/panel"] { display: none; }
  .theme-topbar .mr-auto a[href$="/panel"] + .v-divider { display: none; }
}

/* ------------------------------------------------------------- uyarilar
 * theme.css:2702 `.alert { width: max-content }` diyor: DNS saglayicisindan
 * donen uzun hata metni 375px'te 713px genisliginde bir kutu uretiyor ve
 * ekranin iki yanindan tasiyor. Dar ekranda kutu kapsayicisina sigar.
 * (Bu kural yonetim tarafinda da gecerli; admin.css sonra yuklendigi icin
 *  orada gerekirse ezilebilir.)
 */
@media (max-width: 767.98px) {
  .alert-container .alert { width: 100%; max-width: 100%; }
  .alert-container .alert > div,
  .alert-container .alert-content { min-width: 0; }
  .alert-container .alert-message { word-break: break-word; }
}

/* Uzun hizmet/domain adi breadcrumb'i tasirmasin */
.theme-master-breadcrumb .theme-breadcrumb { flex-wrap: wrap; row-gap: 4px; }
.theme-master-breadcrumb .breadcrumb-item { min-width: 0; word-break: break-word; }

/* ------------------------------------------------------ ana sayfa kahramani
 * Temanin .quick-actions-header kurallarinda hic mobil karsiligi yok:
 * text-5xl baslik ve 90vh + 8rem dolgu 375px'te ekranin tamamini yiyor.
 */
@media (max-width: 767.98px) {
  .quick-actions-header { min-height: auto; padding-block: 3.5rem 2.5rem; }
  .quick-actions-header .title { font-size: var(--text-3xl); letter-spacing: -.02rem; }
  .quick-actions-header .quick-actions-wrapper { margin-top: 2.5rem; gap: 10px; }
  .quick-actions-header .scroll-container { --itemHeight: 66px; }
  .quick-actions-header .action-item { width: 210px; }
  .quick-actions-header .action-text { font-size: var(--text-sm); }
}

@media (max-width: 575.98px) {
  .quick-actions-header .title { font-size: var(--text-2xl); }
  /* Uc kayan seritten ucuncusu 375px'te yalnizca yer kapliyor. */
  #quick-actions-container-3 { display: none; }
}


/* Saga yaslanmis dugme satirlari (sepette "Alisverise devam" + "Odemeye
   gec") 375px'te tek satira sigmiyor; sarma yalnizca tasarken devreye
   girer, genis ekranda hicbir sey degismez. */
@media (max-width: 575.98px) {
  #main-body .d-flex.justify-content-end { flex-wrap: wrap; row-gap: 8px; }
}

/* =========================================================== ag araclari
 * /tools sayfalari ve /panel/tools.
 * Temada karsiligi olmayan bilesenler: arac izgarasi, sonuc rozetleri,
 * varlik kisayollari ve ham cikti blogu.
 */

/* --- arac izgarasi ---------------------------------------------------- */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.tools-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}

.tools-card:hover {
  border-color: rgba(79, 57, 246, .55);
  background: rgba(79, 57, 246, .07);
  text-decoration: none;
}

.tools-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
}

.tools-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tools-card-title { font-weight: 600; }
.tools-card-desc {
  font-size: var(--text-sm, .875rem);
  opacity: .68;
  line-height: 1.45;
}

/* --- form ------------------------------------------------------------- */
.tools-form .form-group { margin-bottom: 16px; }

/* Girisli musterinin kendi hedefleri - tek tikla doldurma. */
.tools-mine {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.tools-mine-label {
  font-size: var(--text-sm, .875rem);
  opacity: .6;
  margin-right: 2px;
}

.tools-chip {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  font-size: var(--text-sm, .875rem);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  color: inherit;
  text-decoration: none;
}

.tools-chip:hover {
  border-color: rgba(79, 57, 246, .6);
  background: rgba(79, 57, 246, .1);
  text-decoration: none;
}

/* --- ozet rozetleri --------------------------------------------------- */
.tools-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}

.tools-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
  min-width: 0;
}

.tools-stat-label {
  font-size: var(--text-sm, .875rem);
  text-transform: uppercase;
  letter-spacing: .03em;
  opacity: .55;
}

/* Uzun degerler (SAN listesi, ASN adi) karti tasirmasin. */
.tools-stat-value { overflow-wrap: anywhere; }

/* --- sonuc tablolari -------------------------------------------------- */
.tools-mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .92em;
  overflow-wrap: anywhere;
}

.tools-row-bad  { background: rgba(220, 53, 69, .07); }
.tools-row-warn { background: rgba(255, 193, 7, .06); }

/* --- ham cikti (WHOIS) ------------------------------------------------ */
.tools-raw {
  margin: 0;
  padding: 14px;
  max-height: 460px;
  overflow: auto;
  border-radius: 8px;
  background: rgba(0, 0, 0, .28);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .8rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --- notlar ----------------------------------------------------------- */
.tools-notes {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tools-notes li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--text-sm, .875rem);
  opacity: .75;
  line-height: 1.5;
}

.tools-notes li svg { flex: 0 0 auto; margin-top: 3px; }

/* --- varlik satiri kisayollari --------------------------------------- */
.tools-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tools-action {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.tools-action:hover {
  border-color: rgba(79, 57, 246, .6);
  background: rgba(79, 57, 246, .12);
  text-decoration: none;
}

/* --- dizin sayfasindaki varlik listesi -------------------------------- */
.tools-asset-list { display: flex; flex-direction: column; }

.tools-asset {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.tools-asset:last-child { border-bottom: 0; }

.tools-asset-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* --- teshis karti (hizmet/domain ozet sayfalari) ---------------------- */
.tools-diag {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tools-diag .tools-action { padding: 5px 10px; font-size: .78rem; }

/* Dar ekranda arac izgarasi tek sutuna insin; 260px'lik minmax 375px'te
   yatay tasma uretiyor. */
@media (max-width: 575.98px) {
  .tools-grid  { grid-template-columns: 1fr; }
  .tools-stats { grid-template-columns: 1fr; }
  .tools-asset { align-items: flex-start; flex-direction: column; }
}

/* =================================================== erisilebilirlik ve cila
 * Tema hicbir yerde :focus-visible tanimlamiyor (all.css, custom.css ve
 * theme.css icinde tek bir kural yok). Klavyeyle gezen ziyaretci su an
 * nerede oldugunu goremiyor - bu bir suslemeden once ERISILEBILIRLIK
 * eksigi. Asagidaki kural yalnizca KLAVYE odaginda gorunur; fareyle
 * tiklamada cikmaz, dolayisiyla tasarimi bozmaz.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--indigo, #4f39f6);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Koyu zeminde indigo yeterince ayrismayabiliyor; dugmelerde ek halka. */
.btn:focus-visible {
  outline-color: #a99bff;
  box-shadow: 0 0 0 4px rgba(79, 57, 246, .28);
}

/* Icerige atlama baglantisi olmadigi icin ana bloga odaklanildiginda
   ana hat basilmasin - gorsel gurultu uretir, bilgi vermez. */
#main-body:focus-visible { outline: none; }

/* Secim rengi: varsayilan mavi koyu temada tarayiciya gore degisiyor. */
::selection { background: rgba(79, 57, 246, .55); color: #fff; }

/* --------------------------------------------------------- kart etkilesimi
 * Paket kartlari tiklanabilir ama bunu belli etmiyorlardi. Hareket 2px:
 * fark edilir, dikkat dagitmaz.
 */
.plan-card,
.regular-plan-card,
.premium-plan-card,
.tools-card {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.plan-card:hover,
.regular-plan-card:hover,
.premium-plan-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .6);
}

/* --------------------------------------------------------------- hareket
 * Vestibuler rahatsizligi olan ziyaretci icin: isletim sisteminde
 * "hareketi azalt" acikken gecis ve donusum kalmaz. Kayan seridi de
 * durduruyoruz - o serit theme.js tarafindan surekli hareket ettiriliyor
 * ve sayfadaki en rahatsiz edici oge.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .quick-actions-header .actions-row { transform: none !important; }
}

/* ------------------------------------------------------------- yazdirma
 * Fatura ve talep sayfalari yazdiriliyor; gezinme ve dugmeler kagida
 * basilmasin.
 */
@media print {
  .header, .footer, .float-search-bar, .client-menu-bar,
  .sidebar-col, .hero-cta, .hero-trust, .quick-actions-wrapper,
  .breadcrumb-wrapper, [data-confirm], .btn { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .bg-card, .panel { border-color: #ddd !important; box-shadow: none !important; }
}

/* ------------------------------------------------------ hakkimizda sayfasi */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.about-item { display: flex; align-items: flex-start; gap: 12px; }

.about-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(79, 57, 246, .10);
}

.about-item-title { font-weight: 600; margin-bottom: 2px; }
.about-item-text  { font-size: var(--text-sm); opacity: .6; line-height: 1.5; }

.about-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px 24px;
}

.about-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: var(--text-sm);
  line-height: 1.55;
  opacity: .78;
}

.about-list li svg { flex: 0 0 auto; margin-top: 3px; color: var(--green, #0fba6d); }

/* ================================================ Telegram dugmesi (sol alt)
 * partials/telegram-float.php
 *
 * Konum: sol alt. Sag alt bilerek SECILMEDI - temanin yuzen arama cubugu
 * (.float-search-bar) altta ORTALANMIS duruyor ve acildiginda
 * min(768px, 100vw - 40px) genisliyor; sag alt kalabalik bolge.
 *
 * z-index 90: arama cubugunun (100) ALTINDA. Dar ekranda cubuk acilinca
 * ikisi cakisirsa cubuk temiz sekilde ustte kalsin, kenarlari birbirine
 * girmesin.
 */
.tg-float {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 52px;
  padding: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #2aabee 0%, #229ed9 100%);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 24px -8px rgba(34, 158, 217, .65), 0 2px 6px rgba(0, 0, 0, .35);
  transition: transform .18s ease, box-shadow .18s ease, padding-right .22s ease;
}

.tg-float:hover,
.tg-float:focus-visible {
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(34, 158, 217, .8), 0 3px 8px rgba(0, 0, 0, .4);
}

.tg-float-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
}

/* Telegram ucagi optik olarak sola kacik durur; 1px saga alinca
   daire icinde ortalanmis gorunuyor.
 *
 * fill BURADA DA tanimli: isaretlemede <svg fill="currentColor"> var ama
 * bu bir SUNUM NITELIGI ve bazi mobil tarayicilar (eski Android WebView,
 * eski iOS Safari) currentColor'i kok svg niteliginden cocuk <path>'e
 * dogru tasimiyor - ikon siyah cikiyor ya da hic gorunmuyor. CSS
 * bildirimi sunum niteliginden once gelir ve her yerde calisir. */
.tg-float-icon svg,
.tg-float-icon svg path {
  fill: currentColor;
  transform: translateX(1px);
}

.tg-float-icon svg path { transform: none; }

/* Etiket varsayilan olarak KAPALI: dugme sade bir daire. Uzerine
   gelindiginde acilir - boylece ne yaptigi bir kez ogrenilir, sonra
   yer kaplamaz. Genislik animasyonu yerine max-width kullaniliyor:
   icerik genisligi bilinmeden gecis yapilabilsin diye. */
.tg-float-label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--text-sm, .875rem);
  font-weight: 600;
  letter-spacing: .01em;
  opacity: 0;
  transition: max-width .22s ease, opacity .18s ease, margin-right .22s ease;
}

.tg-float:hover .tg-float-label,
.tg-float:focus-visible .tg-float-label {
  max-width: 140px;
  margin-right: 18px;
  opacity: 1;
}

/* Klavye odaginda marka mavisi uzerinde indigo halka ayrismiyor. */
.tg-float:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Dokunmatikte hover yok; etiket hic acilmasin, dugme daire kalsin. */
@media (hover: none) {
  .tg-float-label { display: none; }
}

@media (max-width: 767.98px) {
  /* GUVENLI ALAN: iOS Safari'de alttaki tarayici cubugu ve ana ekran
     cizgisi sabit ogelerin uzerine biniyor; 16px'lik bosluk telefonda
     dugmenin yarisini yutuyordu. env() destegi olmayan tarayicida
     ikinci deger (0px) devreye girer, davranis eskisi gibi kalir. */
  .tg-float {
    left: calc(16px + env(safe-area-inset-left, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    height: 46px;
  }
  .tg-float-icon { width: 46px; height: 46px; flex-basis: 46px; }
  .tg-float-icon svg { width: 23px; height: 23px; }
}

/* Yuzen arama cubugu ile cakisma.
 *
 * Cubuk 768px ALTINDA temanin kendi kuralilyla gizleniyor
 * (custom.css: @media (max-width: 767.98px) { .float-search-bar { display:none } }),
 * yani telefonda cakisma YOK.
 *
 * Cakisma yalnizca 768-992px arasinda ve cubuk ACIKKEN oluyor: o aralikta
 * genisligi calc(100vw - 100px), yani sol kenari 50px - dugmenin sag kenari
 * ise 76px. 992px ustunde cubuk 768px'e sabitlenip ortalandigi icin sol
 * kenari 112px'e cekiliyor ve temas bitiyor.
 *
 * :has() ile cubugun ACIK olup olmadigina bakiyoruz; destegi olmayan eski
 * tarayicida kural hic uygulanmaz ve z-index sirasi devreye girer - cubuk
 * (100) dugmenin (90) ustunde kalir, gorunum bozulmaz. */
@media (min-width: 768px) and (max-width: 991.98px) {
  body:has(.float-search-bar.bar-is-active) .tg-float { bottom: 158px; }
}

/* ============================================================================
 * ORTAK GORSEL KATMAN
 *
 * Sayfalarin tamami "baslik + duz kart" kalibindaydi: calisiyordu ama hicbir
 * yerde derinlik, vurgu ya da hiyerarsi yoktu. Asagidaki kurallar TEK TEK
 * sayfalari degil, her sayfanin kullandigi ORTAK yardimcilari
 * (ui_page_title, ui_card_open, ui_table_open, ui_empty) bicimlendiriyor -
 * bir kere yazildiginda otuza yakin sayfa birden degisiyor.
 *
 * theme.css'e DOKUNULMADI; buradaki her kural yardimcilara yeni eklenen
 * tutamak siniflari uzerinden calisiyor.
 * ==========================================================================*/

/* ------------------------------------------------------------ sayfa basligi
 * Basligin soluna ince bir vurgu cizgisi. Sayfanin nerede basladigini
 * gozun tek bakista bulmasini sagliyor; alt basligi da baslikla ayni
 * hizaya cekiyor.
 */
.page-head { position: relative; }

.page-head-text { position: relative; padding-left: 16px; }

.page-head-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #6f5bff 0%, #4f39f6 60%, rgba(79, 57, 246, 0) 100%);
}

.page-head-title { letter-spacing: -.02em; }

.page-head-sub {
  max-width: 68ch;
  line-height: 1.6;
  font-size: var(--text-base, 1rem);
  opacity: .62;
}

/* ------------------------------------------------------------------- kart
 * Duz zemin yerine cok hafif bir gradyan: kart kenari ile govdesi
 * arasinda fark olusunca kart "kagit" gibi degil "yuzey" gibi duruyor.
 * Ust kenardaki ince cizgi yalnizca uzerine gelindiginde beliriyor.
 */
.surface-card {
  position: relative;
  border-color: rgba(255, 255, 255, .07);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .028) 0%, rgba(255, 255, 255, 0) 46%);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.surface-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(129, 110, 255, .55), transparent);
  opacity: 0;
  transition: opacity .22s ease;
}

.surface-card:hover::after { opacity: 1; }

.surface-card-head {
  border-bottom-color: rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .012);
}

.surface-card-title { letter-spacing: -.01em; }

.surface-card-foot {
  border-top-color: rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .012);
}

/* ------------------------------------------------------------------ tablo */
.surface-table .thead .table-head {
  font-size: var(--text-xs, .75rem);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  opacity: .5;
}

/* Satir vurgusu: uzun tablolarda goz kaymasini onluyor. */
.surface-table .tbody .table-row {
  transition: background-color .12s ease;
}

.surface-table .tbody .table-row:hover {
  background-color: rgba(255, 255, 255, .022);
}

/* ------------------------------------------------------------- bos durum
 * Bos ekran bir hata gibi degil, bir sonraki adim gibi gorunmeli.
 */
.ui-empty-icon {
  position: relative;
  border-color: rgba(129, 110, 255, .22) !important;
  background: radial-gradient(circle at 50% 35%, rgba(79, 57, 246, .22), rgba(79, 57, 246, .04) 70%) !important;
  color: #b3a6ff;
}

.ui-empty-icon::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(129, 110, 255, .12);
}

.ui-empty h3 { letter-spacing: -.01em; }
.ui-empty p  { max-width: 46ch; margin-inline: auto; line-height: 1.6; }

/* --------------------------------------------------------- giris cercevesi
 * pages/auth/* - ui_auth_open() / ui_auth_close()
 *
 * Bu sayfalar bos koyu zeminde tek bir kart olarak duruyordu. Uc ekleme
 * yapildi: marka isareti, baslik hiyerarsisi ve arkada yumusak isik.
 * Ziyaretcinin "dogru sitede miyim" sorusuna cevap veren ekran burasi;
 * sade olmasi ile bos gorunmesi ayni sey degil.
 */
.auth-shell {
  position: relative;
  padding-block: 26px 40px;
  text-align: center;
}

.auth-shell::before {
  content: "";
  position: absolute;
  top: -60px;
  left: 50%;
  width: min(680px, 120%);
  height: 320px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
              rgba(79, 57, 246, .22) 0%,
              rgba(79, 57, 246, .06) 45%,
              transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.auth-shell > .row { position: relative; z-index: 1; }

.auth-brand {
  display: inline-block;
  margin-bottom: 18px;
  font-size: var(--text-2xl, 1.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: inherit;
  text-decoration: none;
}

.auth-brand:hover { text-decoration: none; opacity: .9; }

.auth-title {
  font-size: var(--text-3xl, 1.875rem);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 8px;
}

.auth-sub {
  max-width: 42ch;
  margin: 0 auto 26px;
  font-size: var(--text-sm, .875rem);
  line-height: 1.6;
  opacity: .6;
}

/* Formlar cercevenin ICINDE sola hizali kalmali - ortalanmis etiket ve
   girdi okunmaz. Yalnizca baslik blogu ortali. */
.auth-shell .surface-card { text-align: left; }

.auth-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 4px 0 0;
  font-size: var(--text-xs, .75rem);
  line-height: 1.55;
  opacity: .5;
}

.auth-note svg { flex: 0 0 auto; opacity: .8; }
.auth-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 575.98px) {
  .auth-shell { padding-block: 14px 28px; }
  .auth-title { font-size: var(--text-2xl, 1.5rem); }
  .auth-sub { margin-bottom: 20px; }
}

/* -------------------------------------------------------------- durum sayfasi
 * pages/server-status.php
 *
 * "Her sey calisiyor mu" sorusunun cevabi OKUMADAN gorunmeli: yesil ve
 * canli bir nokta, metinden once algilaniyor. Nabiz animasyonu 2.4sn -
 * yeterince yavas ki dikkat dagitmasin, yeterince belirgin ki "canli"
 * hissi versin. prefers-reduced-motion acikken duruyor (ust taraftaki
 * genel kural yakaliyor).
 */
.status-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  margin-bottom: 22px;
  border: 1px solid rgba(15, 186, 109, .22);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(15, 186, 109, .12) 0%, rgba(15, 186, 109, .03) 60%);
}

.status-banner-dot,
.status-dot {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: #0fba6d;
  box-shadow: 0 0 0 3px rgba(15, 186, 109, .16);
}

.status-banner-dot::after,
.status-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(15, 186, 109, .55);
  animation: status-pulse 2.4s ease-out infinite;
}

@keyframes status-pulse {
  0%   { transform: scale(.6); opacity: .9; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

.status-banner-text { display: flex; flex-direction: column; gap: 2px; }
.status-banner-text strong { font-size: var(--text-base, 1rem); }
.status-banner-text small  { font-size: var(--text-sm, .875rem); opacity: .58; }

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.status-card {
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .03) 0%, rgba(255, 255, 255, 0) 55%);
  transition: border-color .18s ease, transform .18s ease;
}

.status-card:hover {
  border-color: rgba(15, 186, 109, .3);
  transform: translateY(-2px);
}

.status-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.status-card-name { font-weight: 600; letter-spacing: -.01em; }

.status-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.status-card-latency {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: var(--text-sm, .875rem);
  opacity: .6;
}

.status-foot { margin-top: 20px; margin-bottom: 0; }

@media (max-width: 575.98px) {
  .status-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- liste kartlari
 * Duyurular, bilgi bankasi kategorileri ve benzeri "izgarada duran kart"
 * bloklari. Tiklanabilir olduklari belli olmuyordu.
 *
 * KALIP: baglanti ::after ile TUM karti kapliyor. Boylece kartin her yeri
 * tiklanir ama isaretlemede tek bir <a> kaliyor - ic ice baglanti hem
 * gecersiz HTML hem de ekran okuyucuda ayni hedefi iki kez okutur.
 */
.tile-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-color: rgba(255, 255, 255, .07);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .028) 0%, rgba(255, 255, 255, 0) 50%);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.tile-card:hover {
  transform: translateY(-3px);
  border-color: rgba(129, 110, 255, .32);
  box-shadow: 0 14px 32px -18px rgba(0, 0, 0, .75);
}

/* Kategori kartlari gibi baglantisiz olanlar yukselmesin. */
.tile-card-flat:hover { transform: none; }

.tile-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: var(--text-xs, .75rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .45;
}

.tile-card-title { margin: 0 0 10px; letter-spacing: -.01em; }

.tile-card-link { color: inherit; text-decoration: none; }
.tile-card-link:hover { color: inherit; text-decoration: none; }

/* Karti kaplayan tiklama alani. */
.tile-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.tile-card-text {
  margin: 0 0 16px;
  line-height: 1.6;
  /* Uc satirdan uzun ozet karti dengesiz uzatiyordu. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tile-card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: var(--text-sm, .875rem);
  font-weight: 600;
  color: #a99bff;
  opacity: .75;
  transition: gap .18s ease, opacity .18s ease;
}

.tile-card:hover .tile-card-more { gap: 10px; opacity: 1; }

/* Klavye ile gezenler icin: odak karta gecince cerceve karti sarsin. */
.tile-card:focus-within {
  border-color: rgba(129, 110, 255, .5);
  outline: 2px solid var(--indigo, #4f39f6);
  outline-offset: 2px;
}
.tile-card .tile-card-link:focus-visible { outline: none; }

/* ------------------------------------------------------------------ metin
 * Yasal sayfalar ve makale govdesi. Satir uzunlugu 70 karakteri gecince
 * goz satir basini kaybediyor; olcu burada sabitleniyor.
 */
.prose { max-width: 72ch; }

.prose p {
  margin: 0 0 1.05em;
  line-height: 1.8;
  opacity: .72;
}

.prose p:last-child { margin-bottom: 0; }
.prose p:first-child { font-size: var(--text-lg, 1.125rem); opacity: .82; }

/* ------------------------------------------------------------ sayac kartlari
 * ui_stat_card() - musteri panelinin ilk gordugu dort kutu.
 *
 * Temanin kendi kurallari yalnizca alt kenara 2px renk koyuyordu. Buraya
 * renge UYUMLU bir isik ve rakamin okunurlugu ekleniyor: sayfada ilk
 * bakilan yer burasi.
 */
.stat-card {
  overflow: hidden;
  border-color: rgba(255, 255, 255, .07);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.stat-card::before {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -50px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  opacity: .1;
  pointer-events: none;
  transition: opacity .2s ease;
}

.stat-card-primary::before { background: #4f39f6; }
.stat-card-success::before { background: #0fba6d; }
.stat-card-warning::before { background: #f9b44e; }
.stat-card-danger::before  { background: #f56565; }

.stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 12px 28px -18px rgba(0, 0, 0, .8);
}

.stat-card:hover::before { opacity: .17; }

/* Rakamlar esit genislikte: dort kutu yan yana dururken zipliyorlardi. */
.stat-card-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* Kartin uzerindeki icerik dairenin ustunde kalmali. */
.stat-card > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------ rehber seridi
 * Serit hero'dan buraya tasindi; hero'ya ozgu dolgu ve arka plan isigi
 * .guides-section ile geri aliniyor.
 */
.guides-section { padding-block: var(--space-16, 4rem); min-height: auto; }
.guides-section::before { display: none; }
.guides-section .quick-actions-wrapper { margin-top: 2.5rem; }

.guides-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
}

/* ============================================================================
 * KART DILI - tek bir tasarim sozlugu
 *
 * Site uzerinde dokuz farkli kart var (paket, ozellik, adim, durum, sayac,
 * arac, duyuru, cozum, genel yuzey) ve her biri kendi kenarligi, kendi
 * gölgesi, kendi hover davranisiyla geliyordu. Asagidaki degiskenler o
 * sozlugu TEK yerde tanimliyor; kartlar yalnizca kendilerine ozgu olan
 * seyi (ikon rengi, ic duzen) ayrica belirtiyor.
 *
 * Tema KOYU: acik temada ise yarayan "beyaz zemin + gri kenar" mantigi
 * burada calismiyor. Koyu zeminde derinlik iki seyden gelir - USTTEN ALTA
 * cok hafif bir aydinlanma (isik yukaridan gelir) ve kenarligin zeminden
 * bir tik acik olmasi. Golge koyu zeminde neredeyse gorunmez, bu yuzden
 * golgeye degil bu ikisine yaslaniyoruz.
 * ==========================================================================*/
:root {
  --card-bd:        rgba(255, 255, 255, .07);
  --card-bd-hover:  rgba(129, 110, 255, .30);
  --card-lift:      linear-gradient(180deg, rgba(255, 255, 255, .032) 0%, rgba(255, 255, 255, 0) 58%);
  --card-shadow:    0 16px 40px -22px rgba(0, 0, 0, .85);
  --card-accent:    #816eff;
  --card-accent-soft: rgba(129, 110, 255, .12);
}

/* ==================================================== ORTAK KART DILI
 * Panel ve icerik sayfalarindaki kartlarin tamami ayni kenarligi, ayni
 * yuzeyi ve ayni hover davranisini paylasiyor. Once her biri kendi
 * degerlerini tasiyordu ve yan yana geldiklerinde ayni siteye ait
 * gorunmuyorlardi.
 *
 * NOT: magazaya bakan sayfalarin (ana sayfa, urun gruplari) kart dili
 * AYRI bir dosyada: public/assets/storefront.css, .hp- onekiyle. Oradaki
 * kartlar temanin bilesenlerini hic kullanmiyor.
 */
.surface-card,
.tile-card,
.status-card,
.stat-card,
.tools-card {
  border-color: var(--card-bd);
}

.tile-card:hover,
.tools-card:hover {
  border-color: var(--card-bd-hover);
  box-shadow: var(--card-shadow);
}

/* ------------------------------------------------ genis acilir menu (araclar)
 * Arac menusu on maddeden olusuyor; tek sutunda ekranin neredeyse yarisini
 * kapliyordu.
 *
 * NEDEN grid/flex DEGIL, columns:
 * Temanin jQuery kodu menuyu .show() ile aciyor ve bu SATIR ICI
 * "display: block" yaziyor. Satir ici bildirim stil dosyasindaki
 * display'i ezdigi icin grid ya da flex kurmak mumkun degil.
 * CSS sutunlari (column-count) display degerinden bagimsiz calisiyor.
 */
.theme-navbar .theme-dropdown-menu.ddm-wide {
  min-width: 420px;
  columns: 2;
  column-gap: 4px;
}

/* Bir madde iki sutuna bolunmesin. */
.theme-navbar .ddm-wide .ddm-item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* Son satir ("Tum araclar") ayirici cizgiyle otekilerden ayrilir; sutunlu
   duzende kendi sutununun basinda durabilir, bu yuzden ust cizgi degil
   kendi kutusu var. */
.theme-navbar .ddm-wide .ddm-item:last-child .ddm-link {
  color: #a99bff;
  font-weight: 600;
}

/* Mobilde acilir menu zaten tam genislige yayiliyor; iki sutun 375px'te
   okunmaz oluyor. */
@media (max-width: 1364px) {
  .theme-navbar .theme-dropdown-menu.ddm-wide {
    min-width: 0;
    columns: 1;
  }
}