/* ==========================================================================
   SHOW FUARCILIK — TASARIM SİSTEMİ
   Hem ön yüz (site.css) hem yönetim paneli (panel.css) bu dosyayı kullanır.
   Burada yalnızca temel katman bulunur: belirteçler, sıfırlama, tipografi,
   basılabilir ögeler, form denetimleri, yüzeyler ve hareket.

   Bileşene özel her şey site.css / panel.css içindedir.

   Hareket kararları iki ilkeye dayanır:
     1. Giren/çıkan öge → ease-out. Kullanıcı ilk kareyi izler; ease-in
        o anı geciktirdiği için aynı sürede DAHA YAVAŞ hissettirir.
     2. Basma geri bildirimi anında olmalı (100–160ms). Arayüzün kullanıcıyı
        duyduğunu gösteren tek şey budur.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BELİRTEÇLER
   -------------------------------------------------------------------------- */
:root {
  /* ---- Marka (logodan örneklendi) ---- */
  --marka-50:   #F2F2FB;
  --marka-100:  #E6E7F7;
  --marka-200:  #C9CAEE;
  --marka-300:  #A3A5E0;
  --marka-400:  #7376CE;
  --marka-500:  #4A4DC4;
  --marka:      #2D2F90;
  --marka-700:  #24266F;
  --marka-800:  #1B1D55;
  --marka-900:  #131540;

  /* Eski adlar — mevcut şablonlar kırılmasın diye korunuyor */
  --marka-koyu:  var(--marka-700);
  --marka-derin: var(--marka-900);
  --marka-acik:  var(--marka-500);
  --marka-sis:   var(--marka-50);
  --marka-cizgi: var(--marka-200);

  /* ---- Vurgu: altın ---- */
  --altin-50:   #FDF8EC;
  --altin-100:  #FAEFD3;
  --altin-300:  #E8BC5A;
  --altin:      #C8912B;
  --altin-700:  #9C6E1C;
  --altin-acik: var(--altin-300);
  --altin-sis:  var(--altin-50);

  /* ---- Nötr ---- */
  --murekkep:  #0E1020;
  --koyu:      #191C33;
  --gri-900:   #2B2F45;
  --gri-800:   #3A3F58;
  --gri-700:   #4D5369;
  --gri-600:   #616780;
  --gri-500:   #767C93;
  --gri-400:   #9BA1B4;
  --gri-300:   #C7CBD8;
  --gri-200:   #E4E7EF;
  --gri-150:   #EDEFF5;
  --gri-100:   #F1F3F8;
  --gri-50:    #F8F9FC;
  --beyaz:     #FFFFFF;

  /* ---- Anlamsal yüzey ve metin ----
     Bileşenler ham gri değil bu adları kullanır; tema değişimi tek yerden. */
  --yuzey:        var(--beyaz);
  --yuzey-2:      var(--gri-50);
  --yuzey-3:      var(--gri-100);
  --yuzey-ters:   var(--murekkep);
  --metin:        var(--gri-900);
  --metin-2:      var(--gri-700);
  --metin-3:      var(--gri-500);
  --metin-ters:   var(--beyaz);
  --cizgi:        var(--gri-200);
  --cizgi-yumusak:var(--gri-150);
  --cizgi-guclu:  var(--gri-300);

  /* ---- Durum ---- */
  --basari:     #127A5B;
  --basari-sis: #E4F5EF;
  --uyari:      #B4761C;
  --uyari-sis:  #FCF2E0;
  --hata:       #C22B3E;
  --hata-sis:   #FBE9EB;
  --bilgi:      var(--marka);
  --bilgi-sis:  var(--marka-50);

  /* ---- Malzeme (yarı saydam katmanlar) ----
     Apple'ın malzeme hiyerarşisi: ağır malzeme yapısal bölgeleri ayırır,
     hafif malzeme etkileşimli ögeyi öne çıkarır. Asla üst üste bindirilmez. */
  --cam-acik:  rgba(255,255,255,.72);
  --cam-orta:  rgba(255,255,255,.86);
  --cam-koyu:  rgba(14,16,32,.62);
  --cam-marka: rgba(45,47,144,.72);
  --bulanik-s: blur(10px) saturate(160%);
  --bulanik-m: blur(20px) saturate(180%);
  --bulanik-l: blur(32px) saturate(180%);

  /* ---- Ölçü ---- */
  --kap:     1240px;
  --kap-dar: 880px;

  /* Aralık — 4px tabanlı. Şablonlarda sihirli sayı kalmasın diye. */
  --a-1:  4px;   --a-2:  8px;   --a-3: 12px;  --a-4: 16px;
  --a-5: 20px;   --a-6: 24px;   --a-8: 32px;  --a-10: 40px;
  --a-12: 48px;  --a-16: 64px;  --a-20: 80px; --a-24: 96px;

  /* Köşe */
  --r-xs:  6px;
  --r-s:   8px;
  --r-m:  14px;
  --r-l:  22px;
  --r-xl: 30px;
  --r-tam: 999px;

  /* ---- Yükselti ----
     Büyük yüzey = daha kalın malzeme = daha derin gölge. */
  --g-1: 0 1px 2px rgba(14,16,32,.05), 0 1px 3px rgba(14,16,32,.06);
  --g-2: 0 4px 12px rgba(14,16,32,.06), 0 2px 4px rgba(14,16,32,.04);
  --g-3: 0 14px 34px rgba(14,16,32,.10), 0 4px 10px rgba(14,16,32,.05);
  --g-4: 0 26px 60px rgba(14,16,32,.16), 0 8px 20px rgba(14,16,32,.07);
  --g-marka: 0 14px 34px rgba(45,47,144,.28);
  --g-altin: 0 12px 28px rgba(200,145,43,.30);

  /* ---- Hareket ----
     Yerleşik CSS eğrileri zayıf; niyet hissi vermiyorlar. Bunlar güçlü
     karşılıkları. ease-in bilinçli olarak YOK: arayüzde asla kullanılmaz. */
  --e-cikis:      cubic-bezier(.23, 1, .32, 1);      /* giren/çıkan öge */
  --e-giris-cikis:cubic-bezier(.77, 0, .175, 1);     /* ekranda yer değiştiren */
  --e-cekmece:    cubic-bezier(.32, .72, 0, 1);      /* iOS çekmece hissi */
  --e-yumusak:    cubic-bezier(.4, 0, .2, 1);        /* renk/hover */

  --s-anlik: 100ms;   /* basma geri bildirimi */
  --s-hizli: 160ms;   /* ipucu, küçük açılır */
  --s-orta:  220ms;   /* açılır menü, seçim */
  --s-yavas: 320ms;   /* kip, çekmece */

  /* Eski adlar */
  --gecis:       var(--s-orta) var(--e-cikis);
  --gecis-yavas: var(--s-yavas) var(--e-cikis);

  /* ---- Tipografi ----
     Harf aralığı boyuta özeldir: büyük metin büyüdükçe harfler fazla ayrık
     görünür, negatif aralık ister; küçük metin okunurluk için hafif pozitif.
     Satır yüksekliği boyutla ters orantılıdır. */
  --yazi: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --yazi-rakam: "Outfit", ui-sans-serif, system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   2. SIFIRLAMA
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  font-family: var(--yazi);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--metin-2);
  background: var(--yuzey);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  /* clip, hidden'dan farklı olarak kaydırma bağlamı OLUŞTURMAZ. hidden ile
     yapışkan başlık kendi kaydırma kabına hapsoluyor ve Chromium sayfayı
     kaydırırken üst şeridi yeniden boyamıyordu. */
  overflow-x: clip;
}
@supports not (overflow: clip) { body { overflow-x: hidden; } }

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--marka); text-decoration: none; }
table { border-collapse: collapse; }

/* Rakamlar tabloda ve sayaçta hizalı dursun */
.rakam, td.rakam, .sayi {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
   3. TİPOGRAFİ
   Hiyerarşi yalnızca boyuttan değil; ağırlık + boyut + satır yüksekliği
   birlikte kurulur.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--a-4);
  color: var(--metin);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;      /* başlık son satırında öksüz kelime kalmasın */
}

h1 { font-size: clamp(2rem, 1.35rem + 2.2vw, 3.15rem); line-height: 1.06; letter-spacing: -.032em; }
h2 { font-size: clamp(1.65rem, 1.25rem + 1.5vw, 2.4rem);  line-height: 1.12; letter-spacing: -.028em; }
h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);    line-height: 1.2;  letter-spacing: -.022em; }
h4 { font-size: 1.15rem; line-height: 1.35; letter-spacing: -.016em; }
h5 { font-size: 1rem;    line-height: 1.4;  letter-spacing: -.01em; }
h6 { font-size: .9rem;   line-height: 1.45; letter-spacing: 0; }

p { margin: 0 0 var(--a-4); }
p:last-child { margin-bottom: 0; }

/* Gövde metni ölçüsü — 65–75 karakter en okunur satır uzunluğu */
.metin-olcu { max-width: 68ch; }

/* Küçük metin okunurluk için hafif POZİTİF aralık ister */
small, .kucuk {
  font-size: .82rem;
  line-height: 1.55;
  letter-spacing: .012em;
}

/* Büyük ekran metni — kahraman altı açıklama */
.giris-metni {
  font-size: clamp(1.02rem, .97rem + .35vw, 1.2rem);
  line-height: 1.65;
  letter-spacing: -.004em;
  color: var(--metin-2);
}

/* Üst etiket (eyebrow) */
.etiket {
  display: inline-flex;
  align-items: center;
  gap: var(--a-2);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;      /* çok küçük + büyük harf → geniş aralık şart */
  text-transform: uppercase;
  color: var(--marka);
}

/* --------------------------------------------------------------------------
   4. ODAK
   Klavye kullanıcısı için görünür, fare kullanıcısı için görünmez.
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--marka-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* --------------------------------------------------------------------------
   5. BASILABİLİR ÖGELER
   Her basılabilir öge basıldığında küçülür. Bu, arayüzün kullanıcıyı
   duyduğunu gösteren tek anlık geri bildirimdir ve 100ms'de tamamlanır.
   -------------------------------------------------------------------------- */
.btn, .d {
  --btn-yukselti: var(--g-1);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--a-2);
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-tam);
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: -.008em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* transform ve opacity yerleşim/boyama tetiklemez; GPU'da çalışır */
  transition:
    transform   var(--s-anlik) var(--e-cikis),
    box-shadow  var(--s-hizli) var(--e-yumusak),
    background  var(--s-hizli) var(--e-yumusak),
    border-color var(--s-hizli) var(--e-yumusak),
    color       var(--s-hizli) var(--e-yumusak);
}

/* Basma: anında ve her zaman. Dokunmatikte de çalışır. */
.btn:active, .d:active { transform: scale(.97); }

/* Hover yalnızca gerçek imleçte. Dokunmatik cihaz dokunuşu hover sayar,
   bu da parmağı kaldırdıktan sonra takılı kalan efektlere yol açar. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover, .d:hover { box-shadow: var(--btn-yukselti); }
}

.btn[disabled], .d[disabled], .btn[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
}

/* -- Varyantlar -- */
.btn-ana, .d-ana {
  background: var(--marka);
  border-color: var(--marka);
  color: var(--beyaz);
  --btn-yukselti: var(--g-marka);
}
@media (hover: hover) and (pointer: fine) {
  .btn-ana:hover, .d-ana:hover { background: var(--marka-700); border-color: var(--marka-700); }
}

.btn-altin {
  background: var(--altin);
  border-color: var(--altin);
  color: var(--beyaz);
  --btn-yukselti: var(--g-altin);
}
@media (hover: hover) and (pointer: fine) {
  .btn-altin:hover { background: var(--altin-700); border-color: var(--altin-700); }
}

.btn-cizgi, .d-cizgi {
  background: transparent;
  border-color: var(--cizgi-guclu);
  color: var(--metin);
}
@media (hover: hover) and (pointer: fine) {
  .btn-cizgi:hover, .d-cizgi:hover { border-color: var(--marka); color: var(--marka); background: var(--marka-50); }
}

/* Koyu zemin üstünde çizgili buton */
.btn-hayalet {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.28);
  color: var(--beyaz);
  backdrop-filter: var(--bulanik-s);
  -webkit-backdrop-filter: var(--bulanik-s);
}
@media (hover: hover) and (pointer: fine) {
  .btn-hayalet:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.45); }
}

.btn-sade, .d-sade {
  background: transparent;
  color: var(--metin-2);
  padding: 10px 14px;
}
@media (hover: hover) and (pointer: fine) {
  .btn-sade:hover, .d-sade:hover { background: var(--yuzey-3); color: var(--metin); box-shadow: none; }
}

.btn-s, .d-s { padding: 8px 15px; font-size: .84rem; }
.btn-l      { padding: 15px 30px; font-size: 1rem; }
.btn-blok, .d-blok { display: flex; width: 100%; }

/* İkon butonu — kare, yalnızca simge */
.btn-ikon {
  padding: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--r-m);
}

/* Buton içindeki ok, hover'da hareketi haber verir (§ yön ipucu) */
.btn .ok {
  transition: transform var(--s-orta) var(--e-cikis);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover .ok { transform: translateX(3px); }
}

/* --------------------------------------------------------------------------
   6. FORM DENETİMLERİ
   -------------------------------------------------------------------------- */
.girdi, .secim, .alan-metin, .metin {
  display: block;
  width: 100%;
  padding: 12px 15px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--r-m);
  font-size: .95rem;
  line-height: 1.5;
  color: var(--metin);
  transition:
    border-color var(--s-hizli) var(--e-yumusak),
    box-shadow   var(--s-hizli) var(--e-yumusak),
    background   var(--s-hizli) var(--e-yumusak);
  -webkit-appearance: none;
  appearance: none;
}
.girdi::placeholder, .alan-metin::placeholder, .metin::placeholder { color: var(--metin-3); }

.girdi:hover, .secim:hover, .alan-metin:hover, .metin:hover { border-color: var(--gri-400); }

.girdi:focus, .secim:focus, .alan-metin:focus, .metin:focus {
  outline: none;
  border-color: var(--marka);
  box-shadow: 0 0 0 4px var(--marka-100);
}

.alan-metin, .metin { min-height: 130px; resize: vertical; }

.secim {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23767C93' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

/* Hatalı alan — kırmızı çerçeve tek başına yeterli değil, metin de gerekir */
.girdi[aria-invalid="true"], .alan-metin[aria-invalid="true"], .secim[aria-invalid="true"] {
  border-color: var(--hata);
  background: var(--hata-sis);
}
.alan-hata {
  display: block;
  margin-top: var(--a-2);
  font-size: .82rem;
  font-weight: 500;
  color: var(--hata);
}

label {
  display: block;
  margin-bottom: var(--a-2);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: -.004em;
  color: var(--metin);
}
.alan-ipucu {
  margin-top: var(--a-2);
  font-size: .8rem;
  color: var(--metin-3);
}

/* Onay kutusu / radyo */
.onay {
  display: flex;
  align-items: flex-start;
  gap: var(--a-3);
  font-size: .88rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--metin-2);
  cursor: pointer;
}
.onay input[type="checkbox"], .onay input[type="radio"] {
  flex: none;
  width: 19px;
  height: 19px;
  margin: 2px 0 0;
  accent-color: var(--marka);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   7. YÜZEYLER
   -------------------------------------------------------------------------- */
.kart {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-l);
  transition:
    transform  var(--s-orta) var(--e-cikis),
    box-shadow var(--s-orta) var(--e-cikis),
    border-color var(--s-orta) var(--e-yumusak);
}
@media (hover: hover) and (pointer: fine) {
  .kart-etkilesimli:hover {
    transform: translateY(-3px);
    box-shadow: var(--g-3);
    border-color: var(--marka-200);
  }
}
.kart-etkilesimli:active { transform: translateY(-1px) scale(.995); }

/* Rozet / çip */
.rozet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-tam);
  background: var(--yuzey-3);
  color: var(--metin-2);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .006em;
  white-space: nowrap;
}
.rozet-marka  { background: var(--marka-50);  color: var(--marka); }
.rozet-altin  { background: var(--altin-50);  color: var(--altin-700); }
.rozet-basari { background: var(--basari-sis);color: var(--basari); }
.rozet-uyari  { background: var(--uyari-sis); color: var(--uyari); }
.rozet-hata   { background: var(--hata-sis);  color: var(--hata); }

/* Yayında/canlı göstergesi — nabız yalnızca gerçekten süren şey için */
.nokta-canli {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: nabiz 2.4s var(--e-yumusak) infinite;
}
@keyframes nabiz {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}

/* --------------------------------------------------------------------------
   8. HAREKET YARDIMCILARI
   -------------------------------------------------------------------------- */

/* Görünüre girince beliren öge. Hiçbir şey gerçek dünyada yokluktan
   doğmaz — bu yüzden scale(0) değil scale(.98) + opacity. */
/* DİKKAT: seçici `.js` ile başlar. JavaScript çalışmazsa bu kural hiç
   uygulanmaz ve içerik normal görünür — animasyon uğruna içeriği
   kaybetmemek için. Sınıfı <head> içindeki tek satırlık betik ekler. */
.js .belir, .js .beliren {
  opacity: 0;
  transform: translateY(14px) scale(.985);
  transition:
    opacity   var(--s-yavas) var(--e-cikis),
    transform var(--s-yavas) var(--e-cikis);
  will-change: transform, opacity;
}
.js .belir.gorundu, .js .beliren.gorundu {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Kademeli giriş. Gecikme 45ms'te tutuldu; uzun gecikme arayüzü yavaş
   hissettirir. Yalnızca ilk 10 öge kademelenir, gerisi hemen gelir. */
.kademeli > *  { transition-delay: 0ms; }
.kademeli > *:nth-child(2)  { transition-delay:  45ms; }
.kademeli > *:nth-child(3)  { transition-delay:  90ms; }
.kademeli > *:nth-child(4)  { transition-delay: 135ms; }
.kademeli > *:nth-child(5)  { transition-delay: 180ms; }
.kademeli > *:nth-child(6)  { transition-delay: 225ms; }
.kademeli > *:nth-child(7)  { transition-delay: 270ms; }
.kademeli > *:nth-child(8)  { transition-delay: 315ms; }
.kademeli > *:nth-child(9)  { transition-delay: 360ms; }
.kademeli > *:nth-child(n+10) { transition-delay: 400ms; }

/* Açılır katman — tetikleyicisinden büyür, ortadan değil.
   Kip (modal) bunun istisnasıdır: ekranda ortalanır, ortadan büyür. */
.acilir {
  transform-origin: var(--acilir-kaynak, top center);
  transition:
    opacity   var(--s-orta) var(--e-cikis),
    transform var(--s-orta) var(--e-cikis),
    visibility var(--s-orta);
}
.acilir[hidden], .acilir:not(.acik) {
  opacity: 0;
  transform: scale(.97) translateY(-6px);
  visibility: hidden;
  pointer-events: none;
}
.acilir.acik {
  opacity: 1;
  transform: none;
  visibility: visible;
}

/* İskelet yükleme — sabit gri kutu yerine hareket, bekleyişi kısaltır */
.iskelet {
  background: linear-gradient(90deg, var(--gri-100) 25%, var(--gri-150) 37%, var(--gri-100) 63%);
  background-size: 400% 100%;
  animation: iskelet-kay 1.3s linear infinite;
  border-radius: var(--r-s);
}
@keyframes iskelet-kay {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}

/* --------------------------------------------------------------------------
   9. KAYDIRMA KENAR ETKİSİ
   Yapışkan başlığın altına 1px çizgi koymak yerine, içeriğin çipe/başlığa
   girdiği yerde yumuşak bir maske. Çizgi keser; maske katman hissi verir.
   -------------------------------------------------------------------------- */
.kenar-maske {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}

/* Yatay kaydırılan şerit — mobilde çip listeleri */
.yatay-kaydir {
  display: flex;
  gap: var(--a-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.yatay-kaydir::-webkit-scrollbar { display: none; }
.yatay-kaydir > * { scroll-snap-align: start; flex: none; }

/* --------------------------------------------------------------------------
   10. ERİŞİLEBİLİRLİK
   -------------------------------------------------------------------------- */

/* Az hareket = HİÇ hareket değil. Anlamayı kolaylaştıran opaklık ve renk
   geçişleri kalır; yer değiştiren, döndüren, zıplayan her şey gider. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .12s !important;
    scroll-behavior: auto !important;
  }
  .js .belir, .js .beliren { transform: none; opacity: 1; }
  .belir, .beliren, .kademeli > * { transition-delay: 0ms !important; }
  .btn:active, .d:active, .kart-etkilesimli:hover { transform: none; }
  .acilir:not(.acik) { transform: none; }
  .nokta-canli, .iskelet { animation: none; }
}

/* Saydamlık azaltma — cam yüzeyler katılaşır */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --cam-acik: rgba(255,255,255,.97);
    --cam-orta: rgba(255,255,255,.99);
    --cam-koyu: rgba(14,16,32,.96);
    --cam-marka: rgba(45,47,144,.97);
    --bulanik-s: none;
    --bulanik-m: none;
    --bulanik-l: none;
  }
}

/* Yüksek karşıtlık — sınırlar belirginleşir */
@media (prefers-contrast: more) {
  :root {
    --cizgi:       var(--gri-400);
    --cizgi-guclu: var(--gri-500);
    --metin-2:     var(--gri-900);
    --metin-3:     var(--gri-700);
  }
  .kart { border-width: 2px; }
}

/* Ekran okuyucu metni */
.gizli-metin {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* İçeriğe atla */
.atla {
  position: absolute;
  top: -100px;
  left: var(--a-4);
  z-index: 200;
  padding: 12px 20px;
  background: var(--marka);
  color: var(--beyaz);
  border-radius: 0 0 var(--r-m) var(--r-m);
  font-weight: 600;
  transition: top var(--s-hizli) var(--e-cikis);
}
.atla:focus { top: 0; }