/* ══════════════════════════════════════════════════════════════
   KUTGEN GOD-TIER · UI çekirdeği
   ══════════════════════════════════════════════════════════════
   OLED zemin · glassmorphism bento adaları · beyaz etiketli neon.

   ─── NEDEN TAILWIND UTILITY DEĞİL ───
   Projenin app.css'i ÖNCEDEN DERLENMİŞ. Derlenmemiş bir utility sınıfı
   sessizce hiçbir şey yapmaz (bkz. tailwind derleme kısıtı). Bu yüzden
   god-tier katmanı kendi ad alanıyla (.gt-*) bağımsız yazıldı; Tailwind'in
   yanında yaşar, çakışmaz, derleme gerektirmez.

   ─── NEDEN .gt KAPSAMI ───
   Her şey `.gt` altına kapsanmıştır. 35 modül tek gecede dönüştürülemez;
   bir sayfayı god-tier yapmak için gövdeye `class="gt"` eklemek yeter,
   diğer sayfalar hiç etkilenmez. Kademeli geçişin tek güvenli yolu budur.

   ─── NEDEN NEON SABİT DEĞİL ───
   Ürün beyaz etiketli: her ofis kendi rengini seçiyor. Neon --vurgu
   jetonundan gelir (kabuk basar). Sabit bir siberpunk moru, müşterinin
   markasını ezerdi.

   ─── 200Hz AKICILIK: NE ANİME EDİLİR, NE EDİLMEZ ───
   Hover'da box-shadow / filter / backdrop-filter ANİME EDİLMEZ — bunlar
   her karede yeniden boyama (repaint) ister ve 200Hz'de tökezler.
   Parlama, hazır duran bir sözde-elemanın yalnızca OPACITY'sini
   değiştirerek yapılır; opacity ve transform GPU'da bileşiklenir.
   ══════════════════════════════════════════════════════════════ */

/* ── YAZI TİPİ YERELDEN GELİR, GOOGLE'DAN DEĞİL ───────────────────
   Burada eskiden `@import url(fonts.googleapis.com/...)` vardı.
   ÖLÇTÜM: satış vitrininin CSP'si (lib.php · vitrin_basliklar())
     style-src 'self' 'unsafe-inline'   → googleapis engellenir
     font-src  'self' data:             → gstatic engellenir
   Yani vitrinde Space Grotesk SESSİZCE düşer ve Inter'e geri dönerdi;
   tam da Clash Display'i eleyen tuzağın aynısı. Proje zaten Inter ve
   Fraunces'ı yerel woff2 olarak taşıyor (bkz. tasarim/yazi/) — Space
   Grotesk de aynı yolu izler. Tek dosya değişken yazı tipi (400-700),
   iki alt küme; latin-ext olmadan Ğ Ş sessizce başka yazıya düşer.
   Lisans: SIL OFL 1.1 — yeniden dağıtıma izinli.                    */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('yazi/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('yazi/space-grotesk.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* NOT: Clash Display bilerek kullanılmadı — kaynağı (api.fontshare.com)
   ne ERP ne de vitrin CSP'sinde var; sessizce düşerdi. */

/* Jetonlar iki kapsamda birden yaşar:
   .gt              → gövdesi god-tier olan yüzeyler (süper admin, vitrin, panel)
   html.dark .gt-vitrin → müşteri vitrini, YALNIZCA koyu modda (aşağıda anlatılıyor) */
.gt,
html.dark .gt-vitrin {
  /* ── Zemin: OLED. Saf siyah değil; #000 üzerinde cam kenarları
        görünmez olur ve panel "kırık ekran" gibi durur. */
  --gt-zemin:      #05060a;
  --gt-zemin-2:    #0a0c13;
  --gt-yuzey:      rgba(255, 255, 255, 0.035);
  --gt-yuzey-2:    rgba(255, 255, 255, 0.06);
  --gt-kenar:      rgba(255, 255, 255, 0.07);
  --gt-kenar-2:    rgba(255, 255, 255, 0.12);

  /* ── Metin: saf beyaz göz yorar; kırık beyazdan inen bir skala. */
  --gt-metin:      #eef1f7;
  --gt-metin-2:    #a8b0c2;
  --gt-metin-3:    #6b7488;

  /* ── Neon: BEYAZ ETİKETTEN. Kabuk --vurgu/--marka basar;
        basmadıysa titanyum altına düşer. */
  --gt-neon:       var(--vurgu, var(--accent-color, #d4af37));
  --gt-neon-rgb:   var(--vurgu-rgb, 212 175 55);
  --gt-marka:      var(--marka, var(--primary-color, #4f7cff));
  --gt-marka-rgb:  var(--marka-rgb, 79 124 255);

  --gt-basari:     #34d399;
  --gt-uyari:      #fbbf24;
  --gt-tehlike:    #fb7185;

  --gt-r-sm: 12px;
  --gt-r:    18px;
  --gt-r-lg: 26px;

  /* Tek yumuşama eğrisi — panelin "aynı elden çıkmış" hissi buradan gelir. */
  --gt-egri: cubic-bezier(.16, 1, .3, 1);
  --gt-hiz:  .45s;

  /* Zemin ve metin rengi her iki kapsamda da ortak. */
  background: var(--gt-zemin);
  color: var(--gt-metin);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Yazı tipi YALNIZCA .gt kapsamında devralınır.
   Müşteri vitrini bilerek DIŞARIDA: orada başlıklar Fraunces (app.css,
   `.vitrin h1, .vitrin h2`), gövde Inter. Bu, kiracının halka açık
   sitesinin editoryal sesi — bir emlak vitrini için Space Grotesk'ten
   daha doğru duruyor ve zaten müşterinin markası, bizim değil.
   God-tier oraya YÜZEY getirir, tipografiyi devralmaz; arayüz
   parçalarına (etiket, rozet, sayı) Space Grotesk aşağıda verilir. */
.gt {
  font-family: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-feature-settings: 'ss01' 1, 'tnum' 1;
}

/* Zeminde duran, çok yavaş nefes alan iki ışık kuyusu.
   position:fixed + pointer-events:none → hiçbir tıklamayı yemez. */
.gt::before {
  content: '';
  position: fixed;
  inset: -30vmax;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(38vmax 38vmax at 18% 8%,  rgb(var(--gt-marka-rgb) / .16), transparent 62%),
    radial-gradient(32vmax 32vmax at 86% 92%, rgb(var(--gt-neon-rgb) / .12), transparent 62%);
  animation: gt-nefes 22s var(--gt-egri) infinite alternate;
  will-change: transform;
}
@keyframes gt-nefes {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(2%, -1.5%, 0) scale(1.06); }
}

/* ⚠️ ESKİDEN BURADA `.gt > * { position: relative }` VARDI.
   Kabuğun "İçeriğe geç" atlama bağlantısı position:absolute + ekran
   dışına itilerek gizleniyor; bu kural onu relative yapıp EKRANDA
   GÖRÜNÜR hâle getirdi. Erişilebilirlik yardımcısını bozan bir stil,
   tasarımın kendisinden daha pahalıdır. Artık yalnızca yerleşim
   kapsayıcıları katmanlanıyor. */
.gt-kabuk, .gt-icerik, .gt-ust { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════════
   TİPOGRAFİ — nefes alan lüks
   ══════════════════════════════════════════════════════════════ */
.gt-h1 { font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; margin: 0; }
.gt-h2 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; margin: 0; }
.gt-h3 { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.gt-p  { color: var(--gt-metin-2); line-height: 1.65; max-width: 62ch; margin: 0; }

/* Bölüm başlığı — büyük harf, geniş harf aralığı; veriyi çerçeveler. */
.gt-eyebrow {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .18em; color: var(--gt-metin-3); margin: 0;
}

/* Devasa sayı. tabular-nums şart: rakam değişince sütun zıplamaz. */
.gt-veri {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 700; letter-spacing: -.045em; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--gt-metin) 30%, var(--gt-metin-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gt-veri-neon {
  background: linear-gradient(180deg, var(--gt-neon), rgb(var(--gt-neon-rgb) / .55));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ══════════════════════════════════════════════════════════════
   İSKELET — sidebar + üst bar + içerik
   ══════════════════════════════════════════════════════════════ */
.gt-kabuk { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
@media (max-width: 1024px) { .gt-kabuk { grid-template-columns: 1fr; } }

.gt-yan {
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-right: 1px solid var(--gt-kenar);
  overflow-y: auto;
}
/* Dar ekranda kenar çubuğu YATAY ŞERİDE döner.
   Dikey kalsaydı kullanıcı içeriğe ulaşmak için bütün menüyü aşağı
   kaydırmak zorunda kalırdı — telefonda panelin kullanılamaz olması
   demek. Şerit yatay kayar, aktif çubuk alta iner. */
@media (max-width: 1024px) {
  .gt-yan {
    position: sticky; top: 0; z-index: 40; height: auto;
    flex-direction: row; align-items: center; gap: 4px;
    padding: 10px 12px;
    overflow-x: auto; overflow-y: hidden;
    border-right: 0; border-bottom: 1px solid var(--gt-kenar);
    scrollbar-width: none;
  }
  .gt-yan::-webkit-scrollbar { display: none; }
  .gt-yan-grup { display: none; }             /* grup başlıkları şeritte gürültü */
  .gt-logo { padding: 0 12px 0 2px; }
  .gt-logo .gt-kucuk { display: none; }
  .gt-yan-link { white-space: nowrap; padding: 8px 12px; }
  /* Aktif göstergesi soldan ALTA taşınır — yatay dizide sol kenar yok. */
  .gt-yan-link::before {
    left: 12px; right: 12px; top: auto; bottom: 2px;
    width: auto; height: 2px; margin: 0; border-radius: 2px;
    transform: scaleX(0); transform-origin: center;
  }
  .gt-yan-link[aria-current="page"]::before,
  .gt-yan-link.gt-aktif::before { transform: scaleX(1); }
  .gt-yan > [style*="margin-top:auto"] { margin-top: 0 !important; padding-top: 0 !important; }
}

.gt-logo { display: flex; align-items: center; gap: 10px; padding: 4px 10px 20px; }
.gt-logo-mark {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: linear-gradient(135deg, var(--gt-marka), var(--gt-neon));
  box-shadow: 0 0 22px rgb(var(--gt-neon-rgb) / .38);
}
.gt-logo-ad { font-weight: 700; letter-spacing: -.02em; font-size: .98rem; }

.gt-yan-grup { padding: 16px 12px 6px; }

.gt-yan-link {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--gt-r-sm);
  color: var(--gt-metin-2); text-decoration: none;
  font-size: .875rem; font-weight: 500;
  transition: color .18s var(--gt-egri), background-color .18s var(--gt-egri);
  isolation: isolate;
}
.gt-yan-link svg { width: 17px; height: 17px; flex: none; opacity: .78; }
.gt-yan-link:hover { color: var(--gt-metin); background: var(--gt-yuzey); }

/* Aktif satırın solundaki neon çubuk — scaleY ile açılır (layout tetiklemez). */
.gt-yan-link::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 3px; height: 22px; margin-top: -11px; border-radius: 0 3px 3px 0;
  background: var(--gt-neon); box-shadow: 0 0 14px rgb(var(--gt-neon-rgb) / .8);
  transform: scaleY(0); transform-origin: center;
  transition: transform .32s var(--gt-egri);
}
.gt-yan-link[aria-current="page"],
.gt-yan-link.gt-aktif { color: var(--gt-metin); background: var(--gt-yuzey-2); }
.gt-yan-link[aria-current="page"]::before,
.gt-yan-link.gt-aktif::before { transform: scaleY(1); }

.gt-ust {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 26px;
  background: rgba(5, 6, 10, .62);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid var(--gt-kenar);
}
.gt-ust-bosluk { margin-left: auto; }

.gt-icerik { padding: 34px 26px 72px; }
@media (max-width: 640px) { .gt-icerik { padding: 22px 16px 56px; } }
.gt-sinir { max-width: 1320px; margin: 0 auto; }

/* ══════════════════════════════════════════════════════════════
   BENTO — boşlukta asılı adalar
   ══════════════════════════════════════════════════════════════ */
.gt-bento {
  display: grid; gap: 18px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
@media (max-width: 900px) { .gt-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gt-bento { grid-template-columns: 1fr; gap: 14px; } }

.gt-w3  { grid-column: span 3;  } .gt-w4  { grid-column: span 4;  }
.gt-w5  { grid-column: span 5;  } .gt-w6  { grid-column: span 6;  }
.gt-w7  { grid-column: span 7;  } .gt-w8  { grid-column: span 8;  }
.gt-w12 { grid-column: span 12; }
@media (max-width: 900px) { .gt-w3, .gt-w4, .gt-w5 { grid-column: span 3; } .gt-w6, .gt-w7, .gt-w8, .gt-w12 { grid-column: span 6; } }
@media (max-width: 560px) { [class*="gt-w"] { grid-column: 1 / -1; } }

.gt-ada {
  position: relative; isolation: isolate;
  padding: 22px;
  border-radius: var(--gt-r);
  background: var(--gt-yuzey);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--gt-kenar);
  /* Üstte ince ışık çizgisi: camın kalınlık hissi buradan gelir. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 44px -28px rgba(0,0,0,.9);
  transition: transform var(--gt-hiz) var(--gt-egri), border-color .3s var(--gt-egri);
  will-change: transform;
}
.gt-ada-tik { cursor: pointer; }

/* ALTTAN SIZAN PARLAMA.
   Hazır duruyor, yalnızca opacity değişiyor — box-shadow animasyonu
   her karede repaint ister, bu bileşiklenir ve 200Hz'de bile pürüzsüz. */
.gt-ada::after {
  content: ''; position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% 118%, rgb(var(--gt-neon-rgb) / .32), transparent 62%);
  opacity: 0;
  transition: opacity var(--gt-hiz) var(--gt-egri);
}
.gt-ada-tik:hover, .gt-ada-tik:focus-within {
  transform: translate3d(0, -3px, 0);
  border-color: var(--gt-kenar-2);
}
.gt-ada-tik:hover::after, .gt-ada-tik:focus-within::after { opacity: 1; }

.gt-ada-neon { border-color: rgb(var(--gt-neon-rgb) / .3); }
.gt-ada-neon::after { opacity: .5; }

.gt-ada-bas { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }

/* ══════════════════════════════════════════════════════════════
   ROZET
   ══════════════════════════════════════════════════════════════ */
.gt-rozet {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: .7rem; font-weight: 600; letter-spacing: .02em;
  background: var(--gt-yuzey-2); border: 1px solid var(--gt-kenar);
  color: var(--gt-metin-2); white-space: nowrap;
}
.gt-rozet-neon    { background: rgb(var(--gt-neon-rgb) / .12); border-color: rgb(var(--gt-neon-rgb) / .35); color: var(--gt-neon); }
.gt-rozet-basari  { background: rgba(52, 211, 153, .12); border-color: rgba(52, 211, 153, .32); color: var(--gt-basari); }
.gt-rozet-uyari   { background: rgba(251, 191, 36, .12);  border-color: rgba(251, 191, 36, .32);  color: var(--gt-uyari); }
.gt-rozet-tehlike { background: rgba(251, 113, 133, .12); border-color: rgba(251, 113, 133, .32); color: var(--gt-tehlike); }

.gt-nokta { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

/* ══════════════════════════════════════════════════════════════
   DÜĞMELER
   ══════════════════════════════════════════════════════════════ */
.gt-dugme {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--gt-r-sm);
  font: inherit; font-size: .875rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--gt-metin); text-decoration: none;
  background: var(--gt-yuzey-2); border: 1px solid var(--gt-kenar);
  cursor: pointer;
  transition: transform .22s var(--gt-egri), border-color .22s var(--gt-egri), background-color .22s var(--gt-egri);
  will-change: transform;
}
.gt-dugme:hover { transform: translate3d(0, -1px, 0); border-color: var(--gt-kenar-2); background: rgba(255,255,255,.09); }
.gt-dugme:active { transform: translate3d(0, 0, 0) scale(.985); }
.gt-dugme:focus-visible { outline: 2px solid var(--gt-neon); outline-offset: 2px; }
.gt-dugme[disabled], .gt-dugme[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.gt-dugme-neon {
  background: linear-gradient(135deg, var(--gt-marka), var(--gt-neon));
  border-color: transparent; color: #08090d; font-weight: 700;
}
/* Parlama ayrı katmanda: gradient'i değil, opacity'yi anime ediyoruz. */
.gt-dugme-neon::after {
  content: ''; position: absolute; inset: -2px; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background: inherit; filter: blur(14px); opacity: .45;
  transition: opacity .28s var(--gt-egri);
}
.gt-dugme-neon:hover::after { opacity: .95; }

.gt-dugme-hayalet { background: transparent; }
.gt-dugme-tam { width: 100%; }
.gt-dugme-kucuk { padding: 7px 13px; font-size: .78rem; }

/* ══════════════════════════════════════════════════════════════
   FORM
   ══════════════════════════════════════════════════════════════ */
.gt-alan-grup { display: flex; flex-direction: column; gap: 7px; }
.gt-etiket { font-size: .78rem; font-weight: 600; color: var(--gt-metin-2); letter-spacing: .01em; }
.gt-ipucu  { font-size: .72rem; color: var(--gt-metin-3); line-height: 1.5; }

.gt-alan {
  width: 100%; padding: 12px 14px;
  border-radius: var(--gt-r-sm);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--gt-kenar);
  color: var(--gt-metin); font: inherit; font-size: .9rem;
  transition: border-color .22s var(--gt-egri), background-color .22s var(--gt-egri), box-shadow .22s var(--gt-egri);
}
.gt-alan::placeholder { color: var(--gt-metin-3); }
.gt-alan:hover { border-color: var(--gt-kenar-2); }
.gt-alan:focus {
  outline: none;
  border-color: rgb(var(--gt-neon-rgb) / .6);
  background: rgba(255,255,255,.06);
  /* Odakta box-shadow tek seferlik değişir (hover gibi sürekli değil) —
     burada maliyet sorun değil, halka görünürlük için gerekli. */
  box-shadow: 0 0 0 3px rgb(var(--gt-neon-rgb) / .14);
}
.gt-alan[aria-invalid="true"] { border-color: rgba(251,113,133,.6); box-shadow: 0 0 0 3px rgba(251,113,133,.14); }

select.gt-alan {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8b0c2' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
  padding-right: 38px;
}
select.gt-alan option { background: var(--gt-zemin-2); color: var(--gt-metin); }
textarea.gt-alan { resize: vertical; min-height: 92px; }

/* Onay kutusu / radyo — tarayıcı varsayılanı camın üstünde çirkin durur. */
.gt-onay { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.gt-onay input { accent-color: var(--gt-neon); width: 17px; height: 17px; margin-top: 1px; flex: none; }
.gt-onay span { font-size: .84rem; color: var(--gt-metin-2); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════
   TABLO — satır değil, "yüzen şerit"
   ══════════════════════════════════════════════════════════════ */
.gt-tablo-sar { overflow-x: auto; border-radius: var(--gt-r); border: 1px solid var(--gt-kenar); background: var(--gt-yuzey); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.gt-tablo { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
.gt-tablo thead th {
  position: sticky; top: 0; z-index: 2;
  padding: 13px 18px; text-align: left;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .13em;
  color: var(--gt-metin-3);
  background: rgba(10, 12, 19, .9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gt-kenar);
  white-space: nowrap;
}
.gt-tablo tbody td { padding: 15px 18px; border-bottom: 1px solid rgba(255,255,255,.045); color: var(--gt-metin-2); vertical-align: middle; }
.gt-tablo tbody tr:last-child td { border-bottom: 0; }
.gt-tablo tbody tr { transition: background-color .2s var(--gt-egri); }
.gt-tablo tbody tr:hover { background: rgba(255,255,255,.035); }
.gt-tablo tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--gt-neon); }
.gt-tablo .gt-td-vurgu { color: var(--gt-metin); font-weight: 600; }
.gt-tablo .gt-td-sayi { text-align: right; font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════
   YARDIMCILAR
   ══════════════════════════════════════════════════════════════ */
.gt-satir { display: flex; align-items: center; gap: 12px; }
.gt-satir-arasi { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gt-dikey { display: flex; flex-direction: column; gap: 14px; }
.gt-ayrac { height: 1px; background: var(--gt-kenar); border: 0; margin: 0; }
.gt-sessiz { color: var(--gt-metin-3); }
.gt-kucuk  { font-size: .78rem; }
.gt-bosluk-lg { height: 34px; }

/* İlerleme çubuğu — genişlik değil transform anime edilir. */
.gt-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.gt-bar-ic {
  height: 100%; border-radius: inherit; transform-origin: left center;
  background: linear-gradient(90deg, var(--gt-marka), var(--gt-neon));
  box-shadow: 0 0 14px rgb(var(--gt-neon-rgb) / .5);
  transform: scaleX(var(--gt-oran, 0));
  transition: transform .9s var(--gt-egri);
}

/* Yükleniyor iskeleti */
.gt-iskelet {
  border-radius: var(--gt-r-sm);
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.09) 37%, rgba(255,255,255,.04) 63%);
  background-size: 400% 100%;
  animation: gt-kayma 1.4s ease infinite;
}
@keyframes gt-kayma { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Girişte yumuşak yükselme. Sıra gecikmesi satır içi --gt-gecikme ile. */
.gt-gir { animation: gt-yuksel .7s var(--gt-egri) both; animation-delay: var(--gt-gecikme, 0s); }
@keyframes gt-yuksel { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }

/* ── Erişilebilirlik: hareket azaltma isteğine UYULUR.
      Vestibüler rahatsızlığı olan kullanıcı için bu tercih değil ihtiyaç. */
@media (prefers-reduced-motion: reduce) {
  .gt *, .gt *::before, .gt *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .gt::before { animation: none; }
}

/* Yazdırma: cam ve neon kâğıtta okunmaz. */
@media print {
  .gt { background: #fff; color: #000; }
  .gt::before, .gt-yan, .gt-ust { display: none !important; }
  .gt-ada, .gt-tablo-sar { background: #fff; border-color: #ccc; box-shadow: none; backdrop-filter: none; }
  .gt-veri, .gt-veri-neon { color: #000; -webkit-text-fill-color: #000; }
}

/* ══════════════════════════════════════════════════════════════
   KÖPRÜ — mevcut Tailwind koyu sözlüğünü god-tier'a yükseltir
   ══════════════════════════════════════════════════════════════
   Süper Admin 1798 satır ve zaten koyu bir sözlük kullanıyor:
   `bg-white/5 border-white/10 rounded-2xl`. Bu satırları tek tek
   .gt-ada'ya çevirmek hem günler sürer hem de her dokunuş bir
   regresyon riskidir.

   Bunun yerine o KALIBI yakalayıp cam muamelesi veriyoruz.

   ─── NEDEN :where() ───
   :where() içindeki her şeyin özgüllüğü SIFIRDIR. Yani köprü, sayfanın
   kendi Tailwind sınıflarıyla kavga etmez: bir yerde `bg-blue-600`
   yazıyorsa o kazanır. Köprü yalnızca hiçbir şeyin söylemediği yeri
   doldurur. Özgüllük savaşı, kademeli geçişi imkânsız kılardı.

   ─── NEDEN SADECE .gt ALTINDA ───
   Gövdesinde `gt` olmayan hiçbir sayfa etkilenmez. Emlakçı paneli ve
   müşteri vitrini aydınlık kalmaya devam eder.
   ══════════════════════════════════════════════════════════════ */

/* Kart yüzeyleri: yarı saydam beyaz + kenarlık kalıbı → cam ada */
.gt :where(.bg-white\/5, .bg-white\/\[0\.04\], .bg-white\/10):where(.rounded-xl, .rounded-2xl, .rounded-\[18px\]) {
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 44px -30px rgba(0,0,0,.85);
}

/* Form alanları: koyu zeminde tarayıcı varsayılanı camın üstünde çirkin durur */
.gt :where(input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
           input[type="date"], input[type="search"], input[type="password"], select, textarea) {
  color-scheme: dark;
}
.gt :where(input, select, textarea):focus-visible {
  outline: 2px solid var(--gt-neon);
  outline-offset: 1px;
}

/* Tablolar: mevcut başlıklara yapışkanlık ve harf aralığı */
.gt :where(table) { border-collapse: separate; border-spacing: 0; }
.gt :where(thead th) { letter-spacing: .09em; }

/* Rakam hizası — süper admin baştan sona sayı gösteriyor */
.gt :where(.tabular-nums, td, th) { font-variant-numeric: tabular-nums; }

/* Mevcut düğmelere kaldırma hissi (renklerine dokunmadan) */
.gt :where(button, a[class*="rounded"]):not(.gt-dugme):not(.gt-yan-link) {
  transition: transform .22s var(--gt-egri), filter .22s var(--gt-egri);
}
.gt :where(button, a[class*="rounded"]):not(.gt-dugme):not(.gt-yan-link):hover {
  transform: translate3d(0, -1px, 0);
}

/* Süper admin üst barı — kabuktaki .k-ustbar cam yüzeye oturur */
.gt :where(.k-ustbar) {
  background: rgba(5, 6, 10, .62);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid var(--gt-kenar);
}
.gt :where(.k-nav a) { border-radius: var(--gt-r-sm); }
.gt :where(.k-nav a[aria-current="page"]) {
  background: rgb(var(--gt-neon-rgb) / .12);
  color: var(--gt-neon);
  box-shadow: inset 0 0 0 1px rgb(var(--gt-neon-rgb) / .28);
}

/* super-admin.php `bg-white/[0.04]` kullanıyor ama bu keyfi değer
   app.css'te DERLENMEMİŞ — yani o kartın arka planı bugüne kadar hiç
   basılmadı, sessizce şeffaf kaldı. Köprüde yalnızca "bahsetmek" yerine
   gerçekten tanımlıyoruz; aksi hâlde nöbetçi onu derlenmiş sanır ve
   taban listesi çürür. */
.gt .bg-white\/\[0\.04\] { background-color: rgba(255, 255, 255, .04); }

/* ══════════════════════════════════════════════════════════════
   KÖPRÜ · SATIŞ VİTRİNİ  (satis-vitrini/*)
   ══════════════════════════════════════════════════════════════
   Vitrin AYRI bir kod tabanı ama aynı derlenmiş app.css'i kullanıyor;
   sözlüğü ERP'ninkinden farklı: `.cam`, `bg-slate-900`, `bg-marka`.
   Bu blok o sözlüğü god-tier yüzeyine yükseltir — 700 satırlık
   index.php'ye tek satır dokunmadan.

   ─── NEDEN YERLEŞİM KAPSAYICILARINA z-index ───
   `.gt::before` (ışık kuyuları) position:fixed + z-index:0. Boyama
   sırasında konumlandırılmış eleman, konumlandırılmamış blokların
   ÜSTÜNDE kalır: vitrin bölümleri statik olduğu için ışık kuyusu
   kahraman metnin üzerine biner. Çözüm bölümleri bir kat yukarı
   almak. `.gt > *` YAZILMAZ — bir kez yazıldı ve gizli "içeriğe geç"
   bağlantısını görünür yaptı. Yalnızca gerçek yerleşim etiketleri.
   ══════════════════════════════════════════════════════════════ */
/* :not(.fixed…) ÖLÇÜLDÜ, tahmin değil: bu kural ilk yazıldığında vitrinin
   `fixed top-0 z-40` üst barını position:relative yaptı (özgüllük .gt+etiket
   = 0,1,1 > .fixed = 0,1,0) ve bar sayfayla birlikte kayıp gitti. Filtre
   :where() içinde: eşleşmeyi daraltır ama özgüllüğü büyütmez. */
.gt > :where(header, main, section, footer, nav):where(:not(.fixed):not(.absolute):not(.sticky)) {
  position: relative;
  z-index: 1;
}
/* Konumlandırılmış yerleşim etiketleri (fixed üst bar) katmanını KORUR;
   yalnızca ışık kuyusunun üstünde kalmaları sağlanır. */
.gt > :where(header, main, section, footer, nav):where(.fixed, .absolute, .sticky) { z-index: 40; }

/* Vitrinin kendi cam sınıfı: blur 12 → 24, kenar god-tier jetonundan.
   .cam app.css'te DERLENMİŞ (ölçüldü) — burada eziyoruz, tanımlamıyoruz. */
.gt :where(.cam) {
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  background: rgba(255, 255, 255, .035);
  border-color: var(--gt-kenar);
}
/* Sabit üst bar cam ise altına OLED bir zemin gerekir; yoksa sayfa
   kaydıkça altındaki metin okunmaz hâle gelir. */
.gt > :where(header.cam) {
  background: rgba(5, 6, 10, .62);
  border-bottom: 1px solid var(--gt-kenar);
}

/* Dolu koyu kartlar → cam ada. Yalnızca "kart" kalıbında (yuvarlak
   köşe + kenarlık); .bg-slate-800 demo tarayıcı çubuğu gibi süs
   parçalarında da geçiyor, onlara dokunulmaz. */
.gt :where(.bg-slate-900, .bg-slate-900\/50, .bg-slate-900\/60):where(.rounded-xl, .rounded-2xl) {
  background: var(--gt-yuzey);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-color: var(--gt-kenar);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 44px -30px rgba(0,0,0,.85);
}

/* Ana eylem düğmeleri (bg-marka) → neon. Parlama HAZIR duran bir
   sözde-elemanın opacity'siyle açılır; box-shadow anime edilmez. */
/* :not(.absolute…) — bugün vitrinde konumlandırılmış her altın rozet
   <span>, ama yarın biri <a> yapabilir; position:relative onu yerinden
   oynatırdı. Kural kendi sınırını taşısın. */
.gt :where(a, button).bg-marka:not(.absolute):not(.fixed):not(.sticky) { position: relative; isolation: isolate; }
.gt :where(a, button).bg-marka:not(.absolute):not(.fixed):not(.sticky)::after {
  content: '';
  position: absolute;
  /* inset:0 — DIKKAT: -1px yazmak elemanı 2px büyütür ve sayfanın
     sağ kenarındaki düğme mobilde yatay kaydırma açar (ölçüldü: 397→399).
     Halkayı zaten box-shadow veriyor; box-shadow yerleşimi etkilemez. */
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .28s var(--gt-egri);
  box-shadow: 0 0 0 1px rgb(var(--gt-neon-rgb) / .5),
              0 10px 34px -8px rgb(var(--gt-neon-rgb) / .55);
}
.gt :where(a, button).bg-marka:not(.absolute):not(.fixed):not(.sticky):hover::after,
.gt :where(a, button).bg-marka:not(.absolute):not(.fixed):not(.sticky):focus-visible::after { opacity: 1; }

/* Bölüm ayraçları: düz çizgi yerine sönümlenen ışık.
   border-white/5 vitrinde bölüm sınırı olarak kullanılıyor. */
.gt > :where(section).border-t { border-top-color: transparent; }
.gt > :where(section).border-t::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gt-kenar-2) 22%, var(--gt-kenar-2) 78%, transparent);
}

/* Vitrin başlıkları god-tier tipografisine geçer. Boyutlar Tailwind'den
   geldiği için yalnızca aile/aralık/denge veriyoruz — hiyerarşi bozulmaz. */
.gt :where(h1, h2, h3) { font-family: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif; letter-spacing: -.022em; text-wrap: balance; }

/* Fiyat/istatistik rakamları: tablo hizası + hafif sıkılaştırma */
.gt :where(.text-4xl, .text-5xl, .text-6xl) { font-variant-numeric: tabular-nums; letter-spacing: -.03em; }

/* ══════════════════════════════════════════════════════════════
   EMLAKÇI PANELİ — İKİ TEMA  (.gt-panel · 42 sayfa, erp yerleşimi)
   ══════════════════════════════════════════════════════════════
   ─── NEDEN İKİ TEMA ───
   İlk dönüşüm paneli koşulsuz OLED yaptı. Kullanıcı "çok koyu ve
   boğuk" buldu ve haklıydı; ölçüm sebebi gösterdi: kart zemini
   rgba(255,255,255,.035) — OLED üstünde kartla zemin arasındaki fark
   neredeyse sıfır, her şey tek bir gri çamura karışıyordu.

   Artık panel AÇIK başlar (kabuk · tema 'panel'), koyu tema menüdeki
   düğmeyle seçilir ve `panel_tema` anahtarıyla hatırlanır.

   ─── TEK JETON SETİ, İKİ DEĞER ───
   Bütün yüzeyler --p-* jetonlarını okur. Açık değerler .gt-panel'de,
   koyu değerler html.dark .gt-panel'de. Bir bileşen asla doğrudan
   renk yazmaz; yazarsa iki temadan birinde kırılır.

   ─── KOYU TEMA ARTIK "CAM" DEĞİL, KATMANLI ───
   Boğukluğun ilacı daha fazla şeffaflık değil, AYRIŞMA: zemin #0b0e15,
   kart #151a26 (düz), girinti #1c2231. Üç yüzey birbirinden gözle
   ayrılıyor; metin #f1f4fa, ikincil metin #b9c2d3 (eskisi #a8b0c2).
   ══════════════════════════════════════════════════════════════ */

.gt-panel {
  --p-zemin:    #f3f5fa;
  --p-kart:     #ffffff;
  --p-kart-2:   #f7f8fc;
  --p-kenar:    #e4e8f0;
  --p-kenar-2:  #d3d9e4;
  --p-metin:    #0f172a;
  --p-metin-2:  #475569;
  --p-metin-3:  #677286;   /* beyazda 4.8:1 — #7a8599 3.9'da kalıyordu */
  --p-golge:    0 1px 2px rgba(15, 23, 42, .05), 0 12px 32px -16px rgba(15, 23, 42, .16);
  --p-golge-2:  0 2px 4px rgba(15, 23, 42, .06), 0 22px 48px -20px rgba(15, 23, 42, .24);
  --p-halka:    rgb(var(--p-vurgu-rgb) / .28);
  --p-mesh-1:   rgb(var(--p-vurgu-rgb) / .10);
  --p-mesh-2:   rgb(99 102 241 / .07);
  --p-r:        18px;
  /* Vurgu: AÇIK temada ham kiracı rengi, metin olarak koyulaştırılmış hâli. */
  --p-vurgu-rgb:   var(--vurgu-rgb, 212 175 55);
  --p-vurgu-ust:   var(--vurgu-ust, #161003);
  --p-vurgu-metin: var(--vurgu-metin-hesap, #8a6d12);
}
html.dark .gt-panel {
  --p-zemin:    #0b0e15;
  --p-kart:     #151a26;
  --p-kart-2:   #1c2231;
  --p-kenar:    rgba(255, 255, 255, .09);
  --p-kenar-2:  rgba(255, 255, 255, .16);
  --p-metin:    #f1f4fa;
  --p-metin-2:  #b9c2d3;
  --p-metin-3:  #8a95ab;
  --p-golge:    inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 40px -22px rgba(0, 0, 0, .85);
  --p-golge-2:  inset 0 1px 0 rgba(255, 255, 255, .07), 0 26px 56px -24px rgba(0, 0, 0, .9);
  --p-halka:    rgb(var(--p-vurgu-rgb) / .40);
  --p-mesh-1:   rgb(var(--p-vurgu-rgb) / .16);
  --p-mesh-2:   rgb(99 102 241 / .14);
  /* Vurgu: KOYU temada AÇILMIŞ kiracı rengi. Ham renk siyahsa (#121212)
     çubuk, aşama çizgisi, yüzde ve üst başlık koyu zeminde kayboluyordu. */
  --p-vurgu-rgb:   var(--vurgu-koyu-rgb, 212 175 55);
  --p-vurgu-ust:   var(--vurgu-koyu-ust, #161003);
  --p-vurgu-metin: var(--vurgu-metin-koyu, #d4af37);
}

/* ── Zemin: düz gri değil, markadan gelen hafif bir ışık ───────────
   Kabuk gövdeye `bg-gray-100` de basıyor; silmek yerine eziyoruz —
   `gt-panel` kaldırılırsa panel eski zeminine dönebilsin. */
body.gt-panel {
  background-color: var(--p-zemin);
  background-image:
    radial-gradient(60vmax 40vmax at 100% -10%, var(--p-mesh-1), transparent 60%),
    radial-gradient(50vmax 40vmax at -10% 110%, var(--p-mesh-2), transparent 60%);
  background-attachment: fixed;
  color: var(--p-metin);
}
html.dark body.gt-panel { color-scheme: dark; }

/* ── Açık tema: soluk gri metin okunur griye ─────────────────────
   Panelde text-gray-400 408 kez geçiyor ve beyazda 2.54:1 (ölçüldü) —
   yardım metinleri, KPI etiketleri, tarih satırları. Açık tema varsayılan
   olunca herkesin gördüğü şey bu olacaktı.
   :where() ile özgüllük .text-gray-400'le EŞİT (0,1,0): kaynak sırası
   kazandırır ama `hover:text-gray-700` (0,2,0) hâlâ üste çıkar — üstüne
   gelince koyulaşan düğmelerin ipucu bozulmaz. */
:where(html:not(.dark) .gt-panel) .text-gray-400,
:where(html:not(.dark) .gt-panel) .text-slate-400 { color: var(--p-metin-3); }
:where(html:not(.dark) .gt-panel) .text-gray-300 { color: #8b95a7; }

/* ── Tipografi: başlıklar Space Grotesk, gövde Inter ────────────── */
.gt-panel main :where(h1, h2, h3) {
  font-family: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.gt-panel main :where(h1) { font-weight: 700; }
.gt-panel main :where(.tabular-nums, td, th) { font-variant-numeric: tabular-nums; }

/* ── Kartlar: iki temada da tanımlı kenar + katmanlı gölge ───────── */
.gt-panel main :where(.bg-white):not(.gt-kagit) {
  background-color: var(--p-kart);
  border-color: var(--p-kenar);
  box-shadow: var(--p-golge);
}
/* Tailwind'in shadow-* sınıfları tek tip bir damla gölge basıyor;
   jeton gölgesi temaya göre ayarlı. */
.gt-panel main :where(.shadow-sm, .shadow, .shadow-md, .shadow-lg):not(.gt-kagit) {
  box-shadow: var(--p-golge);
}
.gt-panel main :where(.shadow-xl, .shadow-2xl) { box-shadow: var(--p-golge-2); }

/* ── Tablolar: başlık satırı okunur, satır üstünde hafif vurgu ───── */
.gt-panel main :where(thead th) {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--p-metin-3);
}
.gt-panel main :where(tbody tr) { transition: background-color .15s ease; }
.gt-panel main :where(tbody tr:hover) { background-color: rgb(var(--p-vurgu-rgb) / .06); }

/* ── Form alanları ─────────────────────────────────────────────── */
.gt-panel main :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
  background-color: var(--p-kart);
  border-color: var(--p-kenar-2);
  color: var(--p-metin);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.gt-panel main :where(input, select, textarea)::placeholder { color: var(--p-metin-3); }
.gt-panel main :where(input, select, textarea):focus {
  outline: none;
  border-color: rgb(var(--p-vurgu-rgb));
  box-shadow: 0 0 0 4px var(--p-halka);
}
.gt-panel :where(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: rgb(var(--p-vurgu-rgb)); }
html.dark .gt-panel :where(select) option { background-color: var(--p-kart); color: var(--p-metin); }

/* ── Birincil düğmeler: düz mavi yerine derinlikli ───────────────
   Rengi DEĞİŞTİRMİYORUZ (bg-blue-600 panelin "birincil eylem" dili,
   40+ ekranda tutarlı); üstüne ışık ve renkli gölge ekliyoruz. */
.gt-panel main :where(.bg-blue-600, .bg-indigo-600, .bg-emerald-600) {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 20px -8px currentColor;
}
.gt-panel main :where(.bg-blue-600)    { box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 22px -8px rgb(37 99 235 / .55); }
.gt-panel main :where(.bg-indigo-600)  { box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 22px -8px rgb(79 70 229 / .55); }
.gt-panel main :where(.bg-emerald-600) { box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 22px -8px rgb(5 150 105 / .55); }
.gt-panel main :where(button, a):where(.bg-blue-600, .bg-indigo-600, .bg-emerald-600) {
  transition: transform .18s ease, filter .18s ease;
}
.gt-panel main :where(button, a):where(.bg-blue-600, .bg-indigo-600, .bg-emerald-600):hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

/* ── Ayraçlar ──────────────────────────────────────────────────── */
.gt-panel :where(hr) { border-color: var(--p-kenar); }
html.dark .gt-panel :where([class*="divide-gray"], [class*="divide-slate"]) > * + * { border-color: var(--p-kenar); }

/* ── Tema düğmesi (menüde) ─────────────────────────────────────── */
.gt-tema-dugme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.gt-tema-dugme:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.gt-tema-dugme:active { transform: scale(.94); }
.gt-tema-dugme:focus-visible { outline: 2px solid rgb(var(--p-vurgu-rgb)); outline-offset: 2px; }
.gt-tema-dugme svg { width: 17px; height: 17px; }
.gt-tema-dugme .gt-tema-gunes { display: none; }
html.dark .gt-tema-dugme .gt-tema-ay { display: none; }
html.dark .gt-tema-dugme .gt-tema-gunes { display: block; }

/* ── Kâğıt kaçış yolu ───────────────────────────────────────────
   Bazı beyaz yüzeyler KART değil KÂĞIT (evrak A4 önizlemesi) ve
   metnini satır içi `color:#1a1a1a` basıyor — harici CSS ezemez.
   Koyu temada camlaştırmak belgeyi görünmez yapıyordu (1.1:1).
   gt-kagit taşıyan yüzey iki temada da beyaz kalır. */
.gt-panel .gt-kagit { background-color: #ffffff; }

/* ══════════════════════════════════════════════════════════════
   PANEL KİTİ  (.pk-*) — iki temada çalışan ekran bileşenleri
   ══════════════════════════════════════════════════════════════
   NEDEN VAR: Panel ekranları Tailwind'in aydınlık renk sınıflarıyla
   yazılmış; koyu tema onları köprüyle çeviriyor. Yeni yazılan bir
   ekran köprüye muhtaç olmamalı: bu bileşenler rengi DOĞRUDAN --p-*
   jetonlarından alır, iki temada da ilk günden doğru görünür.
   İlk kullanan: erp-mutabakat.php. Tailwind yalnızca YERLEŞİM için
   (flex/grid/gap) kullanılır — renk, gölge, köşe buradan gelir.
   ══════════════════════════════════════════════════════════════ */

/* ── Sayfa başlığı ── */
.pk-ust { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.pk-kasa { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--p-vurgu-metin); }
.pk-h1 { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -.025em; color: var(--p-metin); line-height: 1.15; margin-top: 4px; }
.pk-alt { font-size: 14px; color: var(--p-metin-2); margin-top: 6px; max-width: 62ch; line-height: 1.55; }

/* ── Kart ── */
.pk-kart { background: var(--p-kart); border: 1px solid var(--p-kenar); border-radius: var(--p-r, 18px); box-shadow: var(--p-golge); }
.pk-kart-ic { padding: 22px; }
.pk-kart-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--p-kenar); }
.pk-kart-baslik { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 15px; font-weight: 700; color: var(--p-metin); letter-spacing: -.01em; }
.pk-kart-not { font-size: 12px; color: var(--p-metin-3); }
.pk-girinti { background: var(--p-kart-2); border: 1px solid var(--p-kenar); border-radius: 14px; }

/* ── Adım başlığı (form bölümleri) ── */
.pk-adim { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pk-adim-no { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700; color: var(--p-vurgu-ust); background: rgb(var(--p-vurgu-rgb)); flex-shrink: 0; }
.pk-adim-ad { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 16px; font-weight: 700; color: var(--p-metin); }
.pk-adim-acik { font-size: 12.5px; color: var(--p-metin-3); margin-top: 1px; }

/* ── KPI karosu ── */
.pk-kpi { position: relative; overflow: hidden; padding: 16px 18px; background: var(--p-kart); border: 1px solid var(--p-kenar); border-radius: 16px; box-shadow: var(--p-golge); }
.pk-kpi::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--kpi, rgb(var(--p-vurgu-rgb))); }
.pk-kpi-ad { font-size: 11.5px; font-weight: 600; color: var(--p-metin-3); letter-spacing: .02em; }
.pk-kpi-deger { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 26px; font-weight: 700; color: var(--p-metin); letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pk-kpi-alt { font-size: 12px; color: var(--p-metin-2); margin-top: 3px; font-variant-numeric: tabular-nums; }

/* ── Rozet (durum) ── */
.pk-rozet { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: var(--rz-z); color: var(--rz-m); border: 1px solid var(--rz-k); }
.pk-rozet::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pk-rz-gri    { --rz-z: #f1f5f9; --rz-m: #475569; --rz-k: #e2e8f0; }
.pk-rz-amber  { --rz-z: #fff7e6; --rz-m: #a15c00; --rz-k: #fde2b0; }
.pk-rz-yesil  { --rz-z: #e8f8f0; --rz-m: #047857; --rz-k: #bfead6; }
.pk-rz-mavi   { --rz-z: #eaf2ff; --rz-m: #1d4ed8; --rz-k: #c9dafd; }
.pk-rz-kirmizi{ --rz-z: #fff0f1; --rz-m: #be123c; --rz-k: #fecdd3; }
html.dark .pk-rz-gri     { --rz-z: rgb(148 163 184 / .14); --rz-m: #cbd5e1; --rz-k: rgb(148 163 184 / .22); }
html.dark .pk-rz-amber   { --rz-z: rgb(251 191 36 / .15);  --rz-m: #fcd34d; --rz-k: rgb(251 191 36 / .28); }
html.dark .pk-rz-yesil   { --rz-z: rgb(52 211 153 / .15);  --rz-m: #6ee7b7; --rz-k: rgb(52 211 153 / .28); }
html.dark .pk-rz-mavi    { --rz-z: rgb(96 165 250 / .15);  --rz-m: #93c5fd; --rz-k: rgb(96 165 250 / .28); }
html.dark .pk-rz-kirmizi { --rz-z: rgb(251 113 133 / .15); --rz-m: #fda4af; --rz-k: rgb(251 113 133 / .28); }

/* ── Düğmeler ── */
.pk-dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 700; line-height: 1.2; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .16s ease, filter .16s ease, background-color .16s ease, border-color .16s ease; white-space: nowrap; }
.pk-dugme:active { transform: translateY(1px); }
.pk-dugme:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--p-halka); }
.pk-dugme svg { width: 16px; height: 16px; flex-shrink: 0; }
.pk-birincil { color: var(--p-vurgu-ust); background: rgb(var(--p-vurgu-rgb)); background-image: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 24px -10px rgb(var(--p-vurgu-rgb) / .75); }
.pk-birincil:hover { filter: brightness(1.05); transform: translateY(-1px); }
.pk-ikincil { color: var(--p-metin); background: var(--p-kart); border-color: var(--p-kenar-2); }
.pk-ikincil:hover { background: var(--p-kart-2); }
.pk-tehlike { color: #be123c; background: transparent; border-color: #fecdd3; }
.pk-tehlike:hover { background: #fff0f1; }
html.dark .pk-tehlike { color: #fda4af; border-color: rgb(251 113 133 / .35); }
html.dark .pk-tehlike:hover { background: rgb(251 113 133 / .12); }
.pk-wa { color: #fff; background: #1faa59; }
.pk-wa:hover { filter: brightness(1.06); }
.pk-dugme-tam { width: 100%; }
.pk-dugme-buyuk { padding: 14px 18px; font-size: 15px; border-radius: 14px; }

/* ── Form alanları ── */
.pk-etiket { display: block; font-size: 13px; font-weight: 600; color: var(--p-metin); margin-bottom: 6px; }
.pk-etiket i { font-style: normal; color: rgb(var(--p-vurgu-rgb)); }
.pk-yardim { font-size: 12px; color: var(--p-metin-3); margin-top: 6px; line-height: 1.45; }
.pk-alan { width: 100%; padding: 11px 13px; font-size: 14.5px; color: var(--p-metin); background: var(--p-kart); border: 1px solid var(--p-kenar-2); border-radius: 12px; transition: border-color .15s ease, box-shadow .15s ease; font-variant-numeric: tabular-nums; }
.pk-alan::placeholder { color: var(--p-metin-3); }
.pk-alan:focus { outline: none; border-color: rgb(var(--p-vurgu-rgb)); box-shadow: 0 0 0 4px var(--p-halka); }
.pk-alan-ek { position: relative; }
.pk-alan-ek .pk-alan { padding-right: 38px; }
.pk-alan-ek > span { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--p-metin-3); pointer-events: none; }
.pk-alan-mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12.5px; }

/* ── Seçim kartı (radyo) ── */
.pk-secim { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--p-kenar-2); border-radius: 14px; background: var(--p-kart); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.pk-secim:hover { border-color: rgb(var(--p-vurgu-rgb) / .6); }
.pk-secim input { position: absolute; opacity: 0; pointer-events: none; }
.pk-secim-isaret { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--p-kenar-2); flex-shrink: 0; margin-top: 1px; display: grid; place-items: center; transition: border-color .15s ease; }
.pk-secim-isaret::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--p-vurgu-rgb)); transform: scale(0); transition: transform .18s cubic-bezier(.2,.9,.3,1.3); }
.pk-secim:has(input:checked) { border-color: rgb(var(--p-vurgu-rgb)); background: rgb(var(--p-vurgu-rgb) / .07); box-shadow: 0 0 0 4px rgb(var(--p-vurgu-rgb) / .12); }
.pk-secim:has(input:checked) .pk-secim-isaret { border-color: rgb(var(--p-vurgu-rgb)); }
.pk-secim:has(input:checked) .pk-secim-isaret::after { transform: scale(1); }
.pk-secim:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--p-halka); }
.pk-secim-ad { font-weight: 700; font-size: 14px; color: var(--p-metin); }
.pk-secim-acik { font-size: 12.5px; color: var(--p-metin-3); margin-top: 2px; line-height: 1.4; }

/* ── Paylaşım çubuğu: iki tarafın payı tek bakışta ── */
.pk-pay { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--p-kart-2); border: 1px solid var(--p-kenar); }
.pk-pay-biz { background: rgb(var(--p-vurgu-rgb)); transition: width .35s cubic-bezier(.2,.8,.2,1); }
.pk-pay-karsi { flex: 1; background: repeating-linear-gradient(-45deg, var(--p-kenar-2) 0 6px, transparent 6px 12px); }
.pk-pay-ince { height: 6px; }
.pk-taraf-ad { font-size: 12px; font-weight: 600; color: var(--p-metin-3); display: flex; align-items: center; gap: 6px; }
.pk-taraf-ad::before { content: ''; width: 9px; height: 9px; border-radius: 3px; background: var(--nokta, rgb(var(--p-vurgu-rgb))); }
.pk-taraf-karsi::before { background: repeating-linear-gradient(-45deg, var(--p-metin-3) 0 2px, transparent 2px 4px); border: 1px solid var(--p-metin-3); }
.pk-tutar { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; color: var(--p-metin); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pk-tutar-buyuk { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; }
.pk-yuzde { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--p-vurgu-metin); }

/* ── Kaydırıcı ── */
.pk-kaydirici { width: 100%; height: 6px; accent-color: rgb(var(--p-vurgu-rgb)); cursor: pointer; }

/* ── Filtre sekmeleri ── */
.pk-sekmeler { display: flex; flex-wrap: wrap; gap: 6px; }
.pk-sekme { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--p-metin-2); background: transparent; border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.pk-sekme:hover { background: var(--p-kart-2); color: var(--p-metin); }
.pk-sekme[aria-pressed="true"] { background: var(--p-kart); color: var(--p-metin); border-color: var(--p-kenar-2); box-shadow: var(--p-golge); }
.pk-sekme b { font-size: 11px; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--p-kart-2); color: var(--p-metin-2); font-variant-numeric: tabular-nums; }

/* ── Liste satırı ── */
.pk-satir { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.3fr) minmax(0, 1fr) auto 18px; gap: 18px; align-items: center; padding: 16px 22px; text-decoration: none; color: inherit; border-top: 1px solid var(--p-kenar); transition: background-color .15s ease; }
.pk-satir:first-child { border-top: 0; }
.pk-satir:hover { background: rgb(var(--p-vurgu-rgb) / .05); }
.pk-satir:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgb(var(--p-vurgu-rgb)); }
.pk-satir-ok { color: var(--p-metin-3); transition: transform .15s ease; }
.pk-satir:hover .pk-satir-ok { transform: translateX(3px); color: var(--p-metin); }
@media (max-width: 860px) {
  .pk-satir { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; }
  .pk-satir > .pk-satir-gizle { display: none; }
  .pk-satir-ok { display: none; }
}

/* ── Baş harf avatarı (renk addan türetilir, her ofis hep aynı renkte) ── */
.pk-avatar { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .02em; color: hsl(var(--h, 220) 62% 32%); background: hsl(var(--h, 220) 80% 94%); border: 1px solid hsl(var(--h, 220) 60% 86%); }
html.dark .pk-avatar { color: hsl(var(--h, 220) 90% 80%); background: hsl(var(--h, 220) 45% 20%); border-color: hsl(var(--h, 220) 40% 30%); }

/* ── İlerleme adımları (durum yolu) ── */
.pk-yol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pk-yol-adim { position: relative; padding-top: 14px; }
.pk-yol-adim::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 999px; background: var(--p-kart-2); border: 1px solid var(--p-kenar); }
.pk-yol-adim.bitti::before { background: rgb(var(--p-vurgu-rgb)); border-color: transparent; }
.pk-yol-adim.simdi::before { background: linear-gradient(90deg, rgb(var(--p-vurgu-rgb)) 50%, var(--p-kart-2) 50%); }
.pk-yol-ad { font-size: 12.5px; font-weight: 700; color: var(--p-metin-3); }
.pk-yol-adim.bitti .pk-yol-ad, .pk-yol-adim.simdi .pk-yol-ad { color: var(--p-metin); }
.pk-yol-zaman { font-size: 11.5px; color: var(--p-metin-3); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ── Bilgi satırları (tanım listesi) ── */
.pk-tanim { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px 16px; font-size: 14px; }
.pk-tanim dt { color: var(--p-metin-3); font-size: 13px; }
.pk-tanim dd { color: var(--p-metin); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pk-tanim a { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--p-kenar-2); }
.pk-tanim a:hover { border-bottom-color: currentColor; }

/* ── Uyarı / bildirim şeritleri ── */
.pk-serit { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: 14px; font-size: 14px; line-height: 1.5; border: 1px solid var(--rz-k); background: var(--rz-z); color: var(--rz-m); }
.pk-serit b { font-weight: 700; }
.pk-serit svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

/* ── Zaman çizelgesi (denetim izi) ── */
.pk-cizelge { list-style: none; margin: 0; padding: 0; }
.pk-cizelge li { position: relative; display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 14px; padding: 0 0 14px 18px; font-size: 13px; }
.pk-cizelge li::before { content: ''; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--p-vurgu-rgb)); box-shadow: 0 0 0 3px var(--p-kart); }
.pk-cizelge li::after { content: ''; position: absolute; left: 3.5px; top: 16px; bottom: 0; width: 1px; background: var(--p-kenar-2); }
.pk-cizelge li:last-child::after { display: none; }
.pk-cizelge time { color: var(--p-metin-3); font-variant-numeric: tabular-nums; }
.pk-cizelge .ad { color: var(--p-metin); font-weight: 600; }
.pk-cizelge .dt { color: var(--p-metin-3); display: block; margin-top: 1px; overflow-wrap: anywhere; }

/* ── Boş durum ── */
.pk-bos { text-align: center; padding: 48px 24px; }
.pk-bos-ikon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 20px; display: grid; place-items: center; background: rgb(var(--p-vurgu-rgb) / .12); color: rgb(var(--p-vurgu-rgb)); }
.pk-bos-ikon svg { width: 30px; height: 30px; }

/* Telefon ve tutar asla satır ortasında kırılmaz: "0555 123 45 / 67" okunmaz. */
.pk-kirma { white-space: nowrap; }
.pk-mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .01em; }
.pk-sayi { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .pk-kart-ic { padding: 18px; }
  .pk-tanim { grid-template-columns: 1fr; gap: 2px; }
  .pk-tanim dd { margin-bottom: 8px; }
  .pk-cizelge li { grid-template-columns: 1fr; gap: 0; }
  .pk-yol-ad { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-pay-biz, .pk-secim-isaret::after, .pk-dugme, .pk-satir-ok { transition: none; }
}

/* ── Koyu tema köprüsü (ÜRETİLİR · php tasarim/derle-gt-panel.php) ──
   Panelin işaretlemesi aydınlık Tailwind sözlüğüyle yazılmış. Açık
   temada o sınıflar zaten doğru; koyu temada her birinin karşılığı
   gerekiyor. Üreteç işaretlemeyi tarar ve yalnızca kullanılanları,
   tam kaçışlı seçiciyle ve `html.dark` önekiyle yazar. */
/* ⇩ ÜRETİLEN BLOK — BAŞLANGIÇ · tasarim/derle-gt-panel.php ⇩ */
/* ⚠ ÜRETİLEN DOSYA — elle düzenlemeyin.
 * Kaynak: tasarim/derle-gt-panel.php
 * Taranan: 48 dosya (yerlesim=erp + sidebar/bilesenler) · 256 aydinlik sinif.
 */

html.dark .gt-panel .bg-amber-100,
html.dark .gt-panel .bg-amber-50,
html.dark .gt-panel .bg-amber-50\/50,
html.dark .gt-panel .hover\:bg-amber-100:hover,
html.dark .gt-panel .hover\:bg-amber-50:hover {
  background-color: rgb(251 191 36  / .18);
}

html.dark .gt-panel .bg-blue-100,
html.dark .gt-panel .bg-blue-50,
html.dark .gt-panel .bg-blue-50\/40,
html.dark .gt-panel .file\:bg-blue-50::file-selector-button,
html.dark .gt-panel .hover\:bg-blue-100:hover,
html.dark .gt-panel .hover\:bg-blue-50:hover,
html.dark .gt-panel .hover\:bg-blue-50\/40:hover,
html.dark .gt-panel .hover\:bg-blue-50\/60:hover,
html.dark .gt-panel .peer:checked ~ .peer-checked\:bg-blue-50 {
  background-color: rgb(96 165 250 / .18);
}

html.dark .gt-panel .bg-emerald-100,
html.dark .gt-panel .bg-emerald-50,
html.dark .gt-panel .bg-emerald-50\/50,
html.dark .gt-panel .bg-emerald-50\/60,
html.dark .gt-panel .bg-green-100,
html.dark .gt-panel .bg-green-50,
html.dark .gt-panel .bg-teal-100,
html.dark .gt-panel .bg-teal-50,
html.dark .gt-panel .bg-teal-50\/40,
html.dark .gt-panel .has-\[\:checked\]\:bg-emerald-50:has(:checked),
html.dark .gt-panel .hover\:bg-emerald-100:hover,
html.dark .gt-panel .hover\:bg-emerald-50:hover,
html.dark .gt-panel .hover\:bg-green-100:hover,
html.dark .gt-panel .hover\:bg-green-50:hover,
html.dark .gt-panel .hover\:bg-teal-100:hover {
  background-color: rgb(52 211 153 / .18);
}

html.dark .gt-panel .bg-gray-100,
html.dark .gt-panel .bg-gray-100\/60,
html.dark .gt-panel .bg-gray-200,
html.dark .gt-panel .bg-gray-50,
html.dark .gt-panel .bg-gray-50\/40,
html.dark .gt-panel .bg-gray-50\/50,
html.dark .gt-panel .bg-gray-50\/60,
html.dark .gt-panel .bg-gray-50\/70,
html.dark .gt-panel .bg-slate-100,
html.dark .gt-panel .bg-slate-200,
html.dark .gt-panel .hover\:bg-gray-100:hover,
html.dark .gt-panel .hover\:bg-gray-200:hover,
html.dark .gt-panel .hover\:bg-gray-50:hover,
html.dark .gt-panel .hover\:bg-gray-50\/60:hover,
html.dark .gt-panel .hover\:bg-gray-50\/70:hover,
html.dark .gt-panel .hover\:bg-slate-200:hover {
  background-color: var(--p-kart-2);
}

html.dark .gt-panel .bg-indigo-100,
html.dark .gt-panel .bg-indigo-50,
html.dark .gt-panel .bg-indigo-50\/30,
html.dark .gt-panel .bg-indigo-50\/40,
html.dark .gt-panel .bg-indigo-50\/60,
html.dark .gt-panel .bg-purple-100,
html.dark .gt-panel .bg-purple-50,
html.dark .gt-panel .bg-purple-50\/40,
html.dark .gt-panel .has-\[\:checked\]\:bg-indigo-50:has(:checked),
html.dark .gt-panel .hover\:bg-indigo-100:hover,
html.dark .gt-panel .hover\:bg-indigo-50:hover {
  background-color: rgb(167 139 250 / .18);
}

html.dark .gt-panel .bg-orange-100,
html.dark .gt-panel .bg-orange-50,
html.dark .gt-panel .bg-orange-50\/50,
html.dark .gt-panel .hover\:bg-orange-50:hover {
  background-color: rgb(251 146 60  / .18);
}

html.dark .gt-panel .bg-pink-100,
html.dark .gt-panel .bg-pink-50 {
  background-color: rgb(244 114 182 / .18);
}

html.dark .gt-panel .bg-red-100,
html.dark .gt-panel .bg-red-50,
html.dark .gt-panel .bg-red-50\/40,
html.dark .gt-panel .bg-red-50\/50,
html.dark .gt-panel .bg-red-50\/60,
html.dark .gt-panel .has-\[\:checked\]\:bg-red-50:has(:checked),
html.dark .gt-panel .hover\:bg-red-100:hover,
html.dark .gt-panel .hover\:bg-red-50:hover {
  background-color: rgb(251 113 133 / .18);
}

html.dark .gt-panel .border-amber-100,
html.dark .gt-panel .border-amber-200 {
  border-color: rgb(251 191 36  / .28);
}

html.dark .gt-panel .border-blue-100,
html.dark .gt-panel .border-blue-200,
html.dark .gt-panel .border-blue-300,
html.dark .gt-panel .hover\:border-blue-300:hover {
  border-color: rgb(96 165 250 / .28);
}

html.dark .gt-panel .border-emerald-100,
html.dark .gt-panel .border-emerald-200,
html.dark .gt-panel .border-teal-200,
html.dark .gt-panel .border-teal-300 {
  border-color: rgb(52 211 153 / .28);
}

html.dark .gt-panel .border-gray-100,
html.dark .gt-panel .border-gray-200,
html.dark .gt-panel .border-gray-300,
html.dark .gt-panel .border-gray-50,
html.dark .gt-panel .border-slate-200,
html.dark .gt-panel .hover\:border-gray-300:hover {
  border-color: var(--p-kenar);
}

html.dark .gt-panel .border-indigo-100,
html.dark .gt-panel .border-indigo-200,
html.dark .gt-panel .border-indigo-300,
html.dark .gt-panel .border-purple-200,
html.dark .gt-panel .has-\[\:checked\]\:border-indigo-300:has(:checked),
html.dark .gt-panel .hover\:border-indigo-200:hover {
  border-color: rgb(167 139 250 / .28);
}

html.dark .gt-panel .border-orange-100 {
  border-color: rgb(251 146 60  / .28);
}

html.dark .gt-panel .border-red-100,
html.dark .gt-panel .border-red-200,
html.dark .gt-panel .border-red-300,
html.dark .gt-panel .has-\[\:checked\]\:border-red-300:has(:checked) {
  border-color: rgb(251 113 133 / .28);
}

html.dark .gt-panel .file\:text-blue-700::file-selector-button,
html.dark .gt-panel .hover\:text-blue-700:hover,
html.dark .gt-panel .hover\:text-blue-800:hover,
html.dark .gt-panel .text-blue-600,
html.dark .gt-panel .text-blue-700,
html.dark .gt-panel .text-blue-800,
html.dark .gt-panel .text-blue-900,
html.dark .gt-panel .text-sky-600 {
  color: #93c5fd;
}

html.dark .gt-panel .group:hover .group-hover\:text-gray-500,
html.dark .gt-panel .hover\:text-gray-500:hover,
html.dark .gt-panel .hover\:text-gray-600:hover,
html.dark .gt-panel .text-gray-500,
html.dark .gt-panel .text-gray-600,
html.dark .gt-panel .text-slate-500,
html.dark .gt-panel .text-slate-600 {
  color: var(--p-metin-2);
}

html.dark .gt-panel .group:hover .group-hover\:text-gray-800,
html.dark .gt-panel .hover\:text-gray-700:hover,
html.dark .gt-panel .hover\:text-gray-800:hover,
html.dark .gt-panel .text-gray-700,
html.dark .gt-panel .text-gray-800,
html.dark .gt-panel .text-gray-900,
html.dark .gt-panel .text-gray-950,
html.dark .gt-panel .text-slate-700,
html.dark .gt-panel .text-slate-800 {
  color: var(--p-metin);
}

html.dark .gt-panel .group:hover .group-hover\:text-indigo-700,
html.dark .gt-panel .hover\:text-indigo-800:hover,
html.dark .gt-panel .text-indigo-600,
html.dark .gt-panel .text-indigo-700,
html.dark .gt-panel .text-indigo-700\/80,
html.dark .gt-panel .text-indigo-800,
html.dark .gt-panel .text-indigo-900,
html.dark .gt-panel .text-purple-600,
html.dark .gt-panel .text-purple-700 {
  color: #c4b5fd;
}

html.dark .gt-panel .group:hover .group-hover\:text-red-600,
html.dark .gt-panel .hover\:text-red-600:hover,
html.dark .gt-panel .hover\:text-red-700:hover,
html.dark .gt-panel .text-red-600,
html.dark .gt-panel .text-red-700,
html.dark .gt-panel .text-red-800 {
  color: #fda4af;
}

html.dark .gt-panel .hover\:text-amber-700:hover,
html.dark .gt-panel .text-amber-600,
html.dark .gt-panel .text-amber-700,
html.dark .gt-panel .text-amber-800,
html.dark .gt-panel .text-amber-900 {
  color: #fcd34d;
}

html.dark .gt-panel .hover\:text-gray-300:hover,
html.dark .gt-panel .text-gray-300,
html.dark .gt-panel .text-gray-400,
html.dark .gt-panel .text-slate-300,
html.dark .gt-panel .text-slate-400 {
  color: var(--p-metin-3);
}

html.dark .gt-panel .text-emerald-600,
html.dark .gt-panel .text-emerald-700,
html.dark .gt-panel .text-emerald-800,
html.dark .gt-panel .text-emerald-900,
html.dark .gt-panel .text-green-600,
html.dark .gt-panel .text-green-700,
html.dark .gt-panel .text-teal-700,
html.dark .gt-panel .text-teal-700\/80,
html.dark .gt-panel .text-teal-800 {
  color: #6ee7b7;
}

html.dark .gt-panel .text-orange-600,
html.dark .gt-panel .text-orange-700 {
  color: #fdba74;
}

html.dark .gt-panel .text-pink-700 {
  color: #f9a8d4;
}
/* ⇧ ÜRETİLEN BLOK — BİTİŞ ⇧ */

/* ══════════════════════════════════════════════════════════════
   MÜŞTERİ VİTRİNİ  (.gt-vitrin — e/index.php, e/ilan-detay.php)
   ══════════════════════════════════════════════════════════════
   ─── NEDEN BU YÜZEY DİĞER ÜÇÜNDEN FARKLI ───
   Süper admin, satış vitrini ve emlakçı paneli koşulsuz god-tier
   oldu. Burası olamaz, çünkü ÖLÇÜLDÜ:
     · index.php'de 109, ilan-detay.php'de 63 adet `dark:` varyantı
     · ziyaretçiye görünen bir açık/koyu DÜĞMESİ var
       (index.php · temaDegistir(), localStorage 'tema')
   Yani panelin aksine burada karanlık mod GERÇEKTEN çalışıyor ve
   kullanıcının elinde. Koşulsuz OLED basmak o düğmeyi işlevsiz
   bırakırdı: çalışan bir özelliği geri almak olurdu.

   Üstelik burası KİRACININ halka açık sitesi. Her emlak ofisinin
   müşterisine siyah bir site göstermeye bizim karar vermemiz doğru
   değil; kararı ziyaretçi veriyor.

   ─── ÇÖZÜM ───
   God-tier, vitrinin KARANLIK TEMASI olur. Açık mod bit bit eskisi
   gibi kalır; düğme artık iki gerçekten farklı tasarım arasında
   geçiş yapar. Bu yüzden her kural `html.dark` altında.

   ─── NEDEN .gt DEĞİL, AYRI BİR KAPSAM ───
   `.gt`nin bileşen kütüphanesini (gt-ada, gt-dugme, gt-yan …) vitrin
   hiç kullanmıyor — o sınıflar god-tier'a göre YAZILMIŞ sayfalar
   için. Vitrinin ihtiyacı yalnızca yüzey: zemin, cam, neon, ayraç.
   Bu blok onu ~30 kuralda veriyor; 130 kuralı ikinci kez kapsam
   altına almak yerine.
   ══════════════════════════════════════════════════════════════ */

/* ── Zemin ────────────────────────────────────────────────────────
   Gövdede `dark:bg-[#12161f]` var; OLED ona göre bir basamak daha
   derin ve cam kenarları ancak bu derinlikte görünüyor. */
html.dark .gt-vitrin { background: var(--gt-zemin); }

/* Işık kuyuları — panelde/vitrinde olduğu gibi, çok yavaş nefes alır. */
html.dark .gt-vitrin::before {
  content: '';
  position: fixed;
  inset: -30vmax;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(38vmax 38vmax at 18% 8%,  rgb(var(--gt-marka-rgb) / .14), transparent 62%),
    radial-gradient(32vmax 32vmax at 86% 92%, rgb(var(--gt-neon-rgb) / .10), transparent 62%);
  animation: gt-nefes 22s var(--gt-egri) infinite alternate;
  will-change: transform;
}
/* Yerleşim kapsayıcıları ışık kuyusunun ÜSTÜNE çıkar.
   `.gt > *` YAZILMAZ (atlama bağlantısını görünür yapar) ve
   konumlandırılmış olanlar DIŞLANIR (fixed üst bar yerinden oynar). */
html.dark .gt-vitrin > :where(header, main, section, footer, nav):where(:not(.fixed):not(.absolute):not(.sticky)) {
  position: relative;
  z-index: 1;
}
html.dark .gt-vitrin > :where(header, main, section, footer, nav):where(.fixed, .absolute, .sticky) { z-index: 40; }

/* ── Yüzeyler ─────────────────────────────────────────────────────
   Vitrinin koyu sözlüğü zaten cam kalıbında: dark:bg-white/5 (23),
   dark:border-white/10 (22). Renk DEĞİŞMİYOR — eksik olan bulanıklık,
   iç parıltı ve derinlik; köprü onu ekliyor. */
html.dark .gt-vitrin :where([class*="dark:bg-white/5"], [class*="dark:bg-white/10"]):where(.rounded-xl, .rounded-2xl, .rounded-3xl) {
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 44px -30px rgba(0,0,0,.85);
}
/* Dolu koyu kartlar (#1e2531, 15 kullanım) → cam. */
html.dark .gt-vitrin [class*="dark:bg-[#1e2531]"] {
  background-color: var(--gt-yuzey);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-color: var(--gt-kenar);
}
html.dark .gt-vitrin :where([class*="dark:border-white/10"], [class*="dark:border-white/5"]) {
  border-color: var(--gt-kenar);
}

/* ── Ana eylem düğmeleri → neon ───────────────────────────────────
   Parlama hazır duran sözde-elemanın OPACITY'siyle açılır; box-shadow
   anime edilmez (her karede repaint ister). Konumlandırılmış rozetler
   dışlanır, yoksa yerlerinden oynarlar. */
html.dark .gt-vitrin :where(a, button).bg-accent:not(.absolute):not(.fixed):not(.sticky) {
  position: relative;
  isolation: isolate;
}
html.dark .gt-vitrin :where(a, button).bg-accent:not(.absolute):not(.fixed):not(.sticky)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .28s var(--gt-egri);
  box-shadow: 0 0 0 1px rgb(var(--gt-neon-rgb) / .5),
              0 10px 34px -8px rgb(var(--gt-neon-rgb) / .55);
}
html.dark .gt-vitrin :where(a, button).bg-accent:not(.absolute):not(.fixed):not(.sticky):hover::after,
html.dark .gt-vitrin :where(a, button).bg-accent:not(.absolute):not(.fixed):not(.sticky):focus-visible::after { opacity: 1; }

/* ── Bölüm ayraçları: düz çizgi yerine sönümlenen ışık ── */
html.dark .gt-vitrin > :where(section).border-t { border-top-color: transparent; }
html.dark .gt-vitrin > :where(section).border-t::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gt-kenar-2) 22%, var(--gt-kenar-2) 78%, transparent);
}

/* ── Tipografi: SERİF BAŞLIKLARA DOKUNULMAZ ───────────────────────
   h1/h2 Fraunces kalır (yukarıda anlatıldı). Space Grotesk yalnızca
   ARAYÜZ parçalarına gelir: etiket, rozet, düğme, sayı. Serif içerik
   sesi + geometrik sans arayüz — bilerek seçilmiş bir eşleşme. */
/* DİKKAT: [class*="tracking-"] ÖLÇÜLEREK ELENDİ — kahraman h1'de
   `tracking-tight` var ve kural serif başlığı Space Grotesk yapıyordu;
   tam korumak istediğim şeyi bozuyordu. Başlık etiketleri açıkça
   dışlanır ki ileride benzer bir utility yine sızmasın. */
html.dark .gt-vitrin :where(button, label, th, .rounded-full, [class*="uppercase"]):not(h1):not(h2):not(h3) {
  font-family: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
}
/* Fiyat ve metrikler tablo hizasında dursun. */
html.dark .gt-vitrin :where(.text-2xl, .text-3xl, .text-4xl, .text-5xl) { font-variant-numeric: tabular-nums; }

/* ── Form alanları ── */
html.dark .gt-vitrin :where(input, select, textarea):focus-visible {
  outline: 2px solid var(--gt-neon);
  outline-offset: 1px;
}

/* ── Hareket azaltma ve yazdırma: vitrin de kapsanır ── */
@media (prefers-reduced-motion: reduce) {
  html.dark .gt-vitrin::before { animation: none; }
}
@media print {
  html.dark .gt-vitrin { background: #fff; color: #000; }
  html.dark .gt-vitrin::before { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   DAVET ET, KAZAN — GOD-TIER KİTİ  (.dv-*)          2026-09-25
   ──────────────────────────────────────────────────────────────
   Kapsam: yalnız erp-davet.php. Sınıflar .dv- ön ekiyle ayrılır ki
   panelin ortak .pk-* kiti bu ekranın deneysel efektlerinden
   etkilenmesin.

   ⚠️ NEDEN "SADECE OLED SİYAH" DEĞİL: emlakçı paneli AÇIK temayla
   başlar ve bu bilinçli bir karardı (koyu panel "boğuk" bulundu —
   sayfa-kabuk.php'deki nota bakın). Tek temaya kilitli bir ekran,
   kullanıcıların çoğunda kırık görünürdü. Bu yüzden cam ve neon
   efektleri --p-* jetonlarından türetilir:
     • KOYU temada  → OLED siyah üstünde tam neon/glow,
     • AÇIK temada  → buzlu cam + yumuşak vurgu ışığı.
   İki temada da aynı bileşen, aynı sınıf adı.

   Renk kaynağı kiracının vurgu rengidir (--p-vurgu-rgb): sabit bir
   neon yeşili yazmak, beyaz etiketli her ofisin markasını bozardı.
   ══════════════════════════════════════════════════════════════ */

.gt-panel {
  /* Cam yüzey: koyuda daha şeffaf (arka plandaki ışık sızsın),
     açıkta daha opak (okunabilirlik önce gelir). */
  --dv-cam:       rgba(255, 255, 255, .72);
  --dv-cam-kenar: rgba(255, 255, 255, .9);
  --dv-parilti:   rgb(var(--p-vurgu-rgb) / .22);
  --dv-blur:      14px;
}
html.dark .gt-panel {
  --dv-cam:       rgba(22, 27, 39, .55);
  --dv-cam-kenar: rgba(255, 255, 255, .10);
  --dv-parilti:   rgb(var(--p-vurgu-rgb) / .45);
  --dv-blur:      18px;
}

/* ── Cam kart ─────────────────────────────────────────────────
   backdrop-filter DESTEKLENMEZSE: yarı saydam zemin yine durur,
   yalnız bulanıklık olmaz — okunabilirlik kaybı yok. */
.dv-cam {
  position: relative;
  overflow: hidden;
  background: var(--dv-cam);
  border: 1px solid var(--dv-cam-kenar);
  border-radius: 20px;
  box-shadow: var(--p-golge);
  -webkit-backdrop-filter: blur(var(--dv-blur)) saturate(140%);
  backdrop-filter: blur(var(--dv-blur)) saturate(140%);
  transition: transform .22s cubic-bezier(.22,.61,.36,1),
              box-shadow .22s ease, border-color .22s ease;
}
/* Üst kenarda ince ışık çizgisi — camın "kalınlığı" hissi. */
.dv-cam::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--p-vurgu-rgb) / .55), transparent);
  opacity: .7;
}
/* Alttan premium yansıma — hover'da açılır (istenen titanyum/neon glow). */
.dv-cam::after {
  content: '';
  position: absolute;
  inset: auto 12% -40% 12%;
  height: 70px;
  background: radial-gradient(ellipse at center, var(--dv-parilti), transparent 70%);
  opacity: 0;
  transition: opacity .28s ease, transform .28s ease;
  transform: translateY(8px);
  pointer-events: none;
}
.dv-cam:hover {
  transform: translateY(-2px);
  border-color: rgb(var(--p-vurgu-rgb) / .38);
  box-shadow: var(--p-golge-2), 0 18px 44px -26px rgb(var(--p-vurgu-rgb) / .7);
}
.dv-cam:hover::after { opacity: 1; transform: translateY(0); }

/* ── KPI karosu (cam) ── */
.dv-kpi { padding: 18px 20px; }
.dv-kpi-ad {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--p-metin-3);
}
.dv-kpi-deger {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 32px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em;
  color: var(--p-metin); margin-top: 6px; font-variant-numeric: tabular-nums;
}
.dv-kpi-deger small { font-size: 15px; font-weight: 600; color: var(--p-metin-2); margin-left: 3px; }
.dv-kpi-alt { font-size: 12px; color: var(--p-metin-2); margin-top: 4px; }
/* Firma kodu: tek başına bir kimlik — kopyalanabilir görünsün. */
.dv-kod {
  font-family: 'Space Grotesk', ui-monospace, monospace;
  font-size: 26px; font-weight: 700; letter-spacing: .22em;
  color: var(--p-vurgu-metin); margin-top: 6px;
}

/* ── Limit çubuğu: 9 hak, 9 hücre ──────────────────────────────
   Sürekli bir şerit yerine BÖLMELİ: "2/9" bilgisi sayıyı okumadan,
   dolu hücreleri saymadan görünsün. */
.dv-limit { padding: 18px 20px; }
.dv-limit-ust {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.dv-limit-ad {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 14px; font-weight: 700; color: var(--p-metin);
}
.dv-limit-sayi {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 13px; font-weight: 700; color: var(--p-metin-2); font-variant-numeric: tabular-nums;
}
.dv-limit-sayi b { color: var(--p-vurgu-metin); font-size: 17px; }
.dv-hucreler { display: flex; gap: 6px; }
.dv-hucre {
  position: relative;
  flex: 1 1 0; height: 10px; border-radius: 999px;
  background: var(--p-kart-2);
  border: 1px solid var(--p-kenar);
  overflow: hidden;
}
.dv-hucre.dolu {
  background: linear-gradient(180deg, rgb(var(--p-vurgu-rgb) / .95), rgb(var(--p-vurgu-rgb) / .72));
  border-color: rgb(var(--p-vurgu-rgb) / .7);
  box-shadow: 0 0 12px -2px rgb(var(--p-vurgu-rgb) / .8);
  /* Doluşma: soldan sağa, hücre hücre gecikmeli (aşağıda --g ile). */
  transform-origin: left center;
  animation: dv-dol .42s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: var(--g, 0ms);
}
/* Dolu hücrenin üstünden geçen ışık — canlı olduğunu söyler. */
.dv-hucre.dolu::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-100%);
  animation: dv-tara 2.6s ease-in-out infinite;
  animation-delay: var(--g, 0ms);
}
.dv-hucre.bekleyen {
  /* Beklemedeki davet: hak KULLANILMIŞ ama ödül henüz kesinleşmemiş.
     Kesikli dolgu, dolu ile boş arasındaki bu ara durumu anlatır. */
  background: repeating-linear-gradient(135deg,
      rgb(var(--p-vurgu-rgb) / .38) 0 4px, transparent 4px 8px);
  border-color: rgb(var(--p-vurgu-rgb) / .45);
}
@keyframes dv-dol  { from { transform: scaleX(0); opacity: .4; } to { transform: scaleX(1); opacity: 1; } }
@keyframes dv-tara { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.dv-limit-not { font-size: 12px; color: var(--p-metin-3); margin-top: 10px; }

/* ── Link alanı ── */
.dv-link-sar { position: relative; }
.dv-link-satir { display: flex; flex-wrap: wrap; gap: 10px; }
.dv-link-alan {
  flex: 1 1 260px; min-width: 0;
  background: var(--p-kart-2);
  border: 1px solid var(--p-kenar);
  border-radius: 14px;
  padding: 13px 16px;
  font-family: ui-monospace, 'Space Grotesk', monospace;
  font-size: 13px; color: var(--p-metin);
  outline: none;
}
.dv-link-alan:focus-visible { border-color: rgb(var(--p-vurgu-rgb) / .6); box-shadow: 0 0 0 4px var(--p-halka); }

/* ── Neon düğmeler ── */
.dv-dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px; border-radius: 14px; border: 1px solid transparent;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 14px; font-weight: 700; line-height: 1;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.dv-dugme svg { width: 16px; height: 16px; flex-shrink: 0; }
.dv-dugme:active { transform: translateY(1px); }
.dv-dugme:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--p-halka); }
.dv-neon {
  color: var(--p-vurgu-ust);
  background: linear-gradient(180deg, rgb(var(--p-vurgu-rgb)), rgb(var(--p-vurgu-rgb) / .85));
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset,
              0 10px 26px -12px rgb(var(--p-vurgu-rgb) / .95);
}
.dv-neon:hover { filter: brightness(1.07); transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 16px 34px -12px rgb(var(--p-vurgu-rgb)); }
.dv-wa {
  color: #fff;
  background: linear-gradient(180deg, #25D366, #1da851);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 26px -12px rgba(37, 211, 102, .9);
}
.dv-wa:hover { filter: brightness(1.06); transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 16px 34px -12px rgba(37, 211, 102, 1); }

/* ── KİLİT PERDESİ (son 90 gün / limit doldu) ──────────────────
   Altındaki link OKUNAMAZ olmalı: blur yalnız görsel bir süs değil,
   "bu link şu an çalışmıyor" mesajının kendisidir. Yine de sunucu
   tarafı asıl karardır (referans_durum) — perde tek başına koruma
   değildir, link zaten kopyalanmış olabilir. */
/* min-height: perde MUTLAK konumlu olduğu için yüksekliğini alttaki karttan
   alır; kısa bir kartta ikon+başlık+metin+düğme sıkışıyordu (ölçüldü: 46px
   ikon 24px'e eziliyordu). Sınıf yalnız kilitli hâlde basılır. */
.dv-kilit-sar { position: relative; border-radius: 20px; overflow: hidden; min-height: 230px; }
.dv-kilit-sar > .dv-kilit-icerik {
  filter: blur(6px) saturate(.5);
  opacity: .5;
  pointer-events: none;
  user-select: none;
}
.dv-kilit {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 26px; text-align: center;
  background: linear-gradient(180deg, rgb(190 18 60 / .14), rgb(190 18 60 / .22));
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1px solid rgb(244 63 94 / .38);
  border-radius: 20px;
}
html.dark .dv-kilit {
  background: linear-gradient(180deg, rgb(136 19 55 / .32), rgb(76 5 25 / .5));
  border-color: rgb(244 63 94 / .45);
}
.dv-kilit-ikon {
  width: 46px; height: 46px; border-radius: 14px;
  flex-shrink: 0;            /* dikey flex'te ezilmesin */
  display: grid; place-items: center;
  background: rgb(244 63 94 / .16);
  border: 1px solid rgb(244 63 94 / .4);
  box-shadow: 0 0 26px -6px rgb(244 63 94 / .75);
}
.dv-kilit-ikon svg { width: 22px; height: 22px; color: #e11d48; }
html.dark .dv-kilit-ikon svg { color: #fda4af; }
.dv-kilit-baslik {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 16px; font-weight: 700; color: #9f1239;
}
html.dark .dv-kilit-baslik { color: #fecdd3; }
.dv-kilit-metin { font-size: 13.5px; line-height: 1.55; max-width: 460px; color: #9f1239; }
html.dark .dv-kilit-metin { color: #fda4af; }

/* ── Parlayan rozetler (liste durumları) ───────────────────────
   Taban .pk-rozet; .dv-parla yalnızca ışığı ekler. Böylece renk
   sözlüğü (.pk-rz-*) tek kaynakta kalır. */
.dv-parla { box-shadow: 0 0 16px -4px var(--rz-m); }

/* ── Liste satırı ── */
.dv-satir {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 14px 20px;
  border-bottom: 1px solid var(--p-kenar);
  transition: background-color .16s ease;
}
.dv-satir:last-child { border-bottom: 0; }
.dv-satir:hover { background: var(--p-kart-2); }
.dv-satir-ad { font-weight: 700; color: var(--p-metin); font-size: 14px; }
.dv-satir-alt { font-size: 12px; color: var(--p-metin-3); margin-top: 2px; }
.dv-satir-sag { display: flex; align-items: center; gap: 12px; }
.dv-odul {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums;
  color: var(--p-metin-3);
}
.dv-odul.verildi { color: #047857; }
html.dark .dv-odul.verildi { color: #6ee7b7; }

/* ── Adım adım nasıl çalışır ── */
.dv-akis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.dv-akis-adim { display: flex; gap: 12px; align-items: flex-start; }
.dv-akis-no {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 10px;
  display: grid; place-items: center;
  font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700;
  color: var(--p-vurgu-ust); background: rgb(var(--p-vurgu-rgb));
  box-shadow: 0 6px 16px -8px rgb(var(--p-vurgu-rgb) / .9);
}
.dv-akis-ad { font-size: 13.5px; font-weight: 700; color: var(--p-metin); }
.dv-akis-ac { font-size: 12.5px; color: var(--p-metin-3); margin-top: 2px; line-height: 1.45; }

@media (max-width: 640px) {
  .dv-kpi-deger { font-size: 27px; }
  .dv-kod { font-size: 21px; letter-spacing: .16em; }
  .dv-hucreler { gap: 4px; }
  .dv-dugme { flex: 1 1 100%; }
}

/* Hareket azaltma: doluşma ve tarama ışığı kapanır, bilgi aynı kalır. */
@media (prefers-reduced-motion: reduce) {
  .dv-hucre.dolu { animation: none; }
  .dv-hucre.dolu::after { animation: none; display: none; }
  .dv-cam, .dv-dugme { transition: none; }
}
/* Yazdırma: cam ve ışık kâğıtta anlamsız; bilgi düz kalsın. */
@media print {
  .dv-cam { background: #fff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dv-cam::before, .dv-cam::after { display: none; }
  .dv-kilit-sar > .dv-kilit-icerik { filter: none; opacity: 1; }
}

/* ═══ SONRADAN DAVET KODU GİRME (dv-talep-*) ═══════════════════════════
   Davet kodu üç taşıyıcıyla gelir (adres satırı, localStorage, checkout'ta
   elle giriş); üçü de kaçtığında kullanıcı önerenini buradan kaydeder.
   Kart yalnız hak edildiğinde basılır, bu yüzden stil de dar tutuldu. */
.dv-talep-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.dv-talep-girdi {
  flex: 1 1 200px; min-width: 0;
  padding: 11px 14px; border-radius: 12px;
  font: 700 15px/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--p-metin); background: var(--p-kart-2);
  border: 1px solid var(--p-kenar);
  transition: border-color .15s, box-shadow .15s;
}
.dv-talep-girdi::placeholder { letter-spacing: .06em; opacity: .45; font-weight: 600; }
.dv-talep-girdi:focus {
  outline: none; border-color: rgb(var(--p-vurgu-rgb));
  box-shadow: 0 0 0 4px var(--p-halka);
}
.dv-talep-sonuc {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 14px; padding: 10px 13px; border-radius: 12px;
  font-size: 13px; font-weight: 600; line-height: 1.5;
}
/* Renk anlam taşır: kaydedildi mi, takıldı mı. Kenarlık da var — rengi
   ayırt edemeyen kullanıcıda tek sinyal dolgu tonu kalmasın. */
.dv-talep-ok   { color: #059669; background: rgba(16,185,129,.10); border: 1px solid rgba(16,185,129,.30); }
.dv-talep-hata { color: #dc2626; background: rgba(239,68,68,.09);  border: 1px solid rgba(239,68,68,.28); }
html.dark .dv-talep-ok   { color: #6ee7b7; background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.34); }
html.dark .dv-talep-hata { color: #fca5a5; background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.32); }

@media (max-width: 640px) {
  .dv-talep-girdi { flex: 1 1 100%; }
}