/* =========================================================================
   Mutemet Kutusu — v4 "Sihirbaz Küpü" (tek tek dökülme koreografisi)
   Ana tema AÇIK; küp camsı/holografik, kendi ekseninde döner.

   Koreografi (gövde sınıfları + JS FLIP):
     durum-beklemede → küp döner, başlık ışıldar
     durum-acik      → giriş yumuşakça daralır (küp doğal yukarı süzülür),
                       küpün ALT YÜZÜ menteşeyle açılır; her seçenek düşmeden
                       önce küp minik sallanır (JS), seçenek küpten düşüp
                       büyüyerek yerine oturur (JS FLIP), yanında simge serpintisi
     durum-yerlesti  → küp küçülüp sol üstteki markaya uçar (JS FLIP),
                       başlık/boşluklar kapanır, seçenekler yukarı kayar

   ÖNEMLİ DERS: `filter` 3B öğenin preserve-3d'sini DÜZLEŞTİRİR.
   Gölge/filtre asla .kup veya .kup-tasiyici üzerine konmaz; yalnızca
   .sahne3d (perspektif sahibi) veya yaprak öğelere (.yuz) konur.

   Tüm ölçüler :root değişkenlerinden. İstisna: 720px breakpoint'i.
   ========================================================================= */

:root {
  /* --- Açık zemin/metin --- */
  --renk-metin:         #1b1a18;
  --renk-metin-yumusak: #5b564e;
  --renk-cizgi:         #e3dfd5;
  --renk-odak:          #b8531c;

  /* arka plan renk fazı (JS günceller; açık tonlar) */
  --bg-a: #f5f4ef;
  --bg-b: #eaf1ef;

  /* --- Holografik aksan paleti --- */
  --camgobegi:  #2bb6c4;
  --petrol:     #1c7d92;
  --menekse:    #7b6cc4;
  --kehribar:   #e8a13a;
  --cam-cizgi:  rgba(120,205,235,0.78);
  /* rozet/bildirim metni — açık teal zemin üzerinde kontrastlı koyu ton */
  --renk-rozet: #12414f;

  /* --- Tipografi --- */
  --font-serif: "IBM Plex Serif", Georgia, serif;
  --font-sans:  "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "Consolas", monospace;

  --fs-baslik: clamp(2.2rem, 7.5vw, 4.2rem);
  --fs-ust:    clamp(0.72rem, 1.8vw, 0.85rem);
  --fs-slogan: clamp(1rem, 2.4vw, 1.2rem);
  --fs-h2:     clamp(1.4rem, 4vw, 2rem);
  --fs-h3:     clamp(1.05rem, 2.6vw, 1.2rem);
  --fs-govde:  1.0625rem;
  --fs-mono:   0.8125rem;

  --satir-govde: 1.6;

  /* --- Boşluk --- */
  --bosluk-xs: 0.35rem; --bosluk-sm: 0.6rem; --bosluk-md: 1rem;
  --bosluk-lg: 1.75rem; --bosluk-xl: 3rem;  --bosluk-2xl: 5rem;

  /* --- Yerleşim --- */
  --olcum: 64rem;
  --kenar: clamp(1.15rem, 5vw, 2.5rem);
  --yuvarlak: 1.25rem;
  --gecis: 200ms ease;

  /* --- Küp --- */
  --kup-boyut: clamp(9rem, 32vw, 13rem);
  --kup-yari:  calc(var(--kup-boyut) / 2);

  /* --- Kareli defter zemini ---
     Tek ölçü kaynağı: aralara serpilen renkli hücreler de buna oturur.
     Çizgiler bilinçli olarak SOLUK: zeminin üstündeki metin 4.5:1
     kontrast eşiğini ızgara yüzünden kaybetmemeli. */
  --kare:      22px;
  --kare-ince: rgba(28,125,146,0.085);
  --kare-ana:  rgba(28,125,146,0.155);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--renk-metin);
  font-family: var(--font-sans);
  font-size: var(--fs-govde);
  line-height: var(--satir-govde);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  background: transparent;
}

h1, h2, h3 { line-height: 1.1; margin: 0; }
a { color: var(--petrol); text-underline-offset: 0.15em; transition: color var(--gecis); }
a:hover { color: var(--camgobegi); }

:focus-visible { outline: 2px solid var(--renk-odak); outline-offset: 3px; border-radius: 3px; }
.capa { position: absolute; top: 0; }

/* =========================================================================
   Kayan renkli arka plan
   ========================================================================= */
.arka-plan {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 50% -10%, #ffffff 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-a), var(--bg-b));
  transition: background 400ms linear;
}

/* =========================================================================
   KARELİ DEFTER ZEMİNİ
   Neden .arka-plan'a background-image olarak EKLENMEDİ: oradaki renk fazı
   kaydırma boyunca sürekli değişiyor (main.js --bg-a/--bg-b'yi günceller) ve
   her değişimde tüm background yığını yeniden çizilir. Izgara ayrı katmanda
   durursa hiç repaint almaz — kaydırma maliyeti sabit kalır.
   ========================================================================= */
.izgara {
  position: fixed;
  inset: 0;
  z-index: -1;                     /* .arka-plan ile aynı düzlem; DOM sırası üste koyar */
  pointer-events: none;
  background-image:
    /* ana çizgiler — her 5 karede bir */
    repeating-linear-gradient(to right,  var(--kare-ana) 0 1px, transparent 1px calc(var(--kare) * 5)),
    repeating-linear-gradient(to bottom, var(--kare-ana) 0 1px, transparent 1px calc(var(--kare) * 5)),
    /* ince kareler */
    repeating-linear-gradient(to right,  var(--kare-ince) 0 1px, transparent 1px var(--kare)),
    repeating-linear-gradient(to bottom, var(--kare-ince) 0 1px, transparent 1px var(--kare));
}

/* Aralara serpilen renkli hücreler — ızgaraya TAM oturur (konumlar --kare
   katları). Sol üstten sayılır; dar ekranda sağdakiler ekran dışında kalır,
   bu kabul edilmiş davranıştır (seyrek görünüm zaten amaç). */
.kareler { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.kare {
  position: absolute;
  left: calc(var(--x) * var(--kare));
  top:  calc(var(--y) * var(--kare));
  width:  calc(var(--w, 1) * var(--kare));
  height: calc(var(--h, 1) * var(--kare));
}
/* Alfa değerleri düşük tutuldu: bir hücre metnin arkasına denk gelirse
   kontrastı eşiğin altına düşürmemeli. */
.kare--cam  { background: rgba(43,182,196,0.20); }
.kare--sari { background: rgba(232,161,58,0.22); }
.kare--mor  { background: rgba(123,108,196,0.18); }
.kare--acik { background: rgba(43,182,196,0.10); }

/* =========================================================================
   ÜST BAR — küpün uçarak yerleştiği marka
   ========================================================================= */
.tepe-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  padding: var(--bosluk-md) var(--kenar);
  pointer-events: none;
}
.marka {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-sm);
  text-decoration: none;
  color: var(--renk-metin);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-mono);
  letter-spacing: 0.02em;
  padding: 0.4rem 0.8rem 0.4rem 0.5rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--renk-cizgi);
  box-shadow: 0 6px 18px -12px rgba(28,125,146,0.6);
  pointer-events: auto;   /* .tepe-bar geçirgen; marka tıklanabilir kalır */
  transition: opacity 600ms ease, transform 600ms ease;
}
/* Marka yalnızca JS VARKEN gizli başlar — koreografinin sonunda belirir.
   Kural .js ile kapılanmazsa JS kapalı ziyaretçide marka sonsuza dek
   görünmez kalırdı (durum-yerlesti hiç eklenmez).
   visibility de kapatılır: yalnız opacity:0 olan bağlantı hâlâ Tab ile
   odaklanabilir — klavye kullanıcısı görünmez bir bağlantıya düşerdi. */
.js .marka {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-0.8rem);
  pointer-events: none;
}
.marka:hover { border-color: var(--camgobegi); }
.marka__ad { white-space: nowrap; }

/* mini holografik küp — TAM 6 YÜZ, döner + yavaşça renk değiştirir */
.marka__kup {
  position: relative;
  width: 1.15rem; height: 1.15rem;
  transform-style: preserve-3d;
  animation: mini-don 9s linear infinite;
}
.marka__kup span {
  position: absolute; inset: 0; border-radius: 3px;
  background: linear-gradient(140deg, rgba(255,255,255,0.65), rgba(190,235,255,0.4));
  border: 1px solid var(--cam-cizgi);
  /* renk döngüsü yaprak öğede — 3B'yi bozmaz */
  animation: renk-don 14s linear infinite;
}
.marka__kup span:nth-child(1){ transform: rotateY(0deg)   translateZ(0.575rem); }
.marka__kup span:nth-child(2){ transform: rotateY(180deg) translateZ(0.575rem); }
.marka__kup span:nth-child(3){ transform: rotateY(90deg)  translateZ(0.575rem); }
.marka__kup span:nth-child(4){ transform: rotateY(-90deg) translateZ(0.575rem); }
.marka__kup span:nth-child(5){ transform: rotateX(90deg)  translateZ(0.575rem); }
.marka__kup span:nth-child(6){ transform: rotateX(-90deg) translateZ(0.575rem); }

body.durum-yerlesti .marka {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

/* =========================================================================
   GİRİŞ SAHNESİ
   ========================================================================= */
.giris { position: relative; }
.giris__sabit {
  min-height: 100vh;    /* yedek: svh desteklemeyen tarayıcıda sahne çökmesin */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3.5vw, 2.5rem);
  padding: var(--bosluk-2xl) var(--kenar);
  text-align: center;
  transition: min-height 900ms ease, gap 700ms ease, padding 700ms ease;
}
/* açılış: giriş daralır → küp EN TEPEYE süzülür (tepesi ekran dışına taşabilir) */
body.durum-acik .giris__sabit {
  min-height: 0;
  padding-block: 0 var(--bosluk-sm);
}
/* yerleşme: üstte boş alan kalmaz — her şey kapanır */
body.durum-yerlesti .giris__sabit {
  min-height: 0;
  gap: 0;
  padding-block: calc(var(--bosluk-xl) + var(--bosluk-md)) 0;
}

/* --- Başlık bloğu (küpün üstünde) --- */
.giris__yazi {
  position: relative;
  max-height: 60vh;
  transition: opacity 600ms ease, transform 600ms ease,
              max-height 700ms ease, margin 700ms ease;
}
.giris__baslik {
  font-family: var(--font-serif);
  font-size: var(--fs-baslik);
  letter-spacing: -0.01em;
  color: var(--petrol);   /* yedek: degrade-metin desteklenmezse okunur */
  background: linear-gradient(110deg,
    var(--petrol) 0%, var(--camgobegi) 22%, var(--menekse) 48%,
    var(--kehribar) 72%, var(--petrol) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: baslik-parilti 9s linear infinite;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .giris__baslik { color: transparent; }
}
/* başlığın çevresinde süzülen minik ışıltılar */
.giris__parilti {
  position: absolute;
  font-size: 1rem;
  color: var(--kehribar);
  text-shadow: 0 0 8px rgba(232,161,58,0.6);
  animation: parla 2.8s ease-in-out infinite;
  pointer-events: none;
}
/* ⚠ DAR EKRANDA SÜS YOK — sebebi ölçüm.
   Bu dosya mobile-first: taban kural her genişlikte geçerlidir. Süsler başlık
   bloğunun DIŞINA konumlanıyordu (`right: -1.6rem`) ve 360px'de sayfayı 365px
   yapıp yatay kaydırma doğuruyordu — § 5'teki "360px'de yatay kaydırma çıkmaz"
   çizgisinin ihlali.

   Önce süsleri içeri almak denendi (`right: .2rem`): taşma bitti ama ekran
   görüntüsünde ✧ sloganın "Ek" harfine bitişik durup madde işareti gibi
   okundu — dar ekranda bu süs için yer yok. İkisi de tamamen dekoratif
   (`aria-hidden`), gizlenmeleri hiçbir bilgi kaybettirmiyor.
   Ölçülen: 365px → 360px, yatay kaydırma yok. */
.giris__parilti { display: none; }
/* Renk/gölge burada kalıyor (gizli olsalar da): biri ileride dar ekranda
   yeniden açarsa görünümü eksik kalmasın. Konum ise taşmanın kaynağı olduğu
   için YALNIZ masaüstünde tanımlı. */
.giris__parilti.p2 { color: var(--camgobegi);
  text-shadow: 0 0 8px rgba(43,182,196,0.6); animation-delay: 1.2s; }

/* Masaüstünde yer var: süsler başlık bloğunun dışına taşar (özgün görünüm). */
@media (min-width: 720px) {
  .giris__parilti { display: block; }
  .giris__parilti.p1 { top: 22%; right: -1.6rem; }
  .giris__parilti.p2 { bottom: 28%; left: -1.4rem; }
}

.giris__slogan {
  margin: var(--bosluk-md) auto 0;
  max-width: 40ch;
  font-size: var(--fs-slogan);
  color: var(--renk-metin-yumusak);
}
/* açılışta başlık bloğu hemen yumuşakça kapanır (küp tepeye çıkarken) */
body.durum-acik .giris__yazi,
body.durum-yerlesti .giris__yazi {
  opacity: 0;
  transform: translateY(-1.2rem);
  max-height: 0;
  margin: 0;
  overflow: hidden;
}

/* =========================================================================
   3B SAHNE + CAMSI/HOLOGRAFİK KÜP
   ========================================================================= */
.sahne3d {
  position: relative;
  width: min(88vw, 26rem);
  height: min(52vh, 20rem);
  display: grid;
  place-items: center;
  perspective: 760px;
  /* gölge BURADA — .kup üzerinde olursa 3B düzleşir! */
  filter: drop-shadow(0 14px 26px rgba(80,170,210,0.30));
  transition: height 800ms ease;
}
/* açılış: sahne daralır → küp yukarı taşar, tepesi kesilir (bilinçli) */
body.durum-acik .sahne3d { height: calc(var(--kup-boyut) * 0.62); }
/* yerleşme: sahne kapanır, seçenekler yukarı kayar */
body.durum-yerlesti .sahne3d { height: 0; }

/* parçacık tuvali EKRANA SABİT ve her katmanın önünde (header hariç) —
   dökülenler nereye düşerse düşsün net görünür */
.parcaciklar {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

/* Taşıyıcı: eleme sallantısı + uçuş FLIP'i burada. FİLTRESİZ + preserve-3d. */
.kup-tasiyici {
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
  will-change: transform;
}
/* dökülme boyunca: elek gibi yumuşak, SÜREKLİ sallanma */
body.durum-dokuyor .kup-tasiyici {
  animation: elek-salla 0.9s ease-in-out infinite;
}

.kup {
  position: relative;
  width: var(--kup-boyut);
  height: var(--kup-boyut);
  transform-style: preserve-3d;
  animation: kup-don 16s linear infinite;
}
/* açılışta dönüş biraz canlanır */
body.durum-acik .kup { animation-duration: 10s; }

.yuz {
  position: absolute;
  width: var(--kup-boyut);
  height: var(--kup-boyut);
  border-radius: 16px;
  background: linear-gradient(140deg, rgba(255,255,255,0.55), rgba(190,235,255,0.20));
  border: 1.5px solid var(--cam-cizgi);
  box-shadow:
    inset 0 0 26px rgba(120,220,255,0.32),
    inset 0 2px 5px rgba(255,255,255,0.75);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  /* yüzlerde çok yavaş renk döngüsü (yaprak öğe — 3B'yi bozmaz) */
  animation: renk-don 22s linear infinite;
}
/* holografik renk oynaması */
.yuz::before {
  content: "";
  position: absolute; inset: 0; border-radius: 16px;
  background: conic-gradient(from 0deg,
    rgba(43,182,196,0.30), rgba(123,108,196,0.30),
    rgba(232,161,58,0.26), rgba(43,182,196,0.30));
  mix-blend-mode: screen;
  opacity: 0.8;
}
/* küçük ışıltı */
.yuz::after {
  content: "✦";
  position: absolute; top: 14%; left: 16%;
  font-size: 0.8rem; color: #fff;
  text-shadow: 0 0 6px #8fe3ff;
}

.on   { transform: rotateY(0deg)   translateZ(var(--kup-yari)); }
.arka { transform: rotateY(180deg) translateZ(var(--kup-yari)); }
.sag  { transform: rotateY(90deg)  translateZ(var(--kup-yari)); }
.sol  { transform: rotateY(-90deg) translateZ(var(--kup-yari)); }
.ust  { transform: rotateX(90deg)  translateZ(var(--kup-yari)); }

/* ALT YÜZ = İKİ KANATLI KAPAK — kanatlar karşılıklı kenarlara açılır */
.alt-yuva {
  position: absolute;
  width: var(--kup-boyut);
  height: var(--kup-boyut);
  transform: rotateX(-90deg) translateZ(var(--kup-yari));
  transform-style: preserve-3d;
}
.kanat {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  background: linear-gradient(140deg, rgba(255,255,255,0.55), rgba(190,235,255,0.20));
  border: 1.5px solid var(--cam-cizgi);
  box-shadow:
    inset 0 0 20px rgba(120,220,255,0.30),
    inset 0 2px 5px rgba(255,255,255,0.7);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: renk-don 22s linear infinite;
  transition: transform 950ms cubic-bezier(.3,.7,.25,1) 250ms;
}
.kanat-sol { left: 0;  transform-origin: 0 50%;    border-radius: 16px 0 0 16px; }
.kanat-sag { right: 0; transform-origin: 100% 50%; border-radius: 0 16px 16px 0; }
/* açılış: kanatlar karşılıklı kenarlardan aşağı sarkar (çift kapı) */
body.durum-acik .kanat-sol { transform: rotateY(108deg); }
body.durum-acik .kanat-sag { transform: rotateY(-108deg); }

/* =========================================================================
   ARAÇLAR — küpten tek tek dökülüp yerine oturan kartlar
   ========================================================================= */
.araclar {
  position: relative;
  z-index: 3;
  max-width: calc(var(--olcum) + var(--kenar) * 2);
  margin-inline: auto;
  padding: var(--bosluk-xl) var(--kenar);
  transform-origin: 50% 0;
  transition: transform 800ms cubic-bezier(.25,.8,.3,1);
}
/* dökülme sırasında bölüm KÜÇÜK durur — tüm seçenekler ekranda görünsün */
body.durum-acik .araclar { transform: scale(0.6); }
/* TELEFON: küçültme burada UYGULANMAZ. scale(0.6) tüm kartların aynı anda
   ekrana sığdığı varsayımına dayanır; telefonda kartlar alt alta dizildiği
   için gösteri ekran dışına taşardı — dar ekran bu yüzden yıllarca
   koreografiyi hiç görmedi. Kısa dikey gösteri (main.js mobilKoreografi)
   kartları gerçek boyutunda düşürür. */
body.durum-mobil.durum-acik .araclar { transform: none; }
/* küp yerine yerleşince seçenekler büyüyüp gerçek boyutlarını alır */
body.durum-yerlesti .araclar { transform: scale(1); }
.araclar__ust {
  text-align: center;
  margin-bottom: var(--bosluk-xl);
  transition: opacity 600ms ease, transform 600ms ease;
}
/* dökülme sırasında başlık gizli — küpün önünü kapatmasın */
body.durum-acik .araclar__ust { opacity: 0; transform: translateY(0.6rem); }
/* küp yerine gidince başlık belirir (kartlar büyürken, hafif gecikmeli) */
body.durum-yerlesti .araclar__ust {
  opacity: 1;
  transform: none;
  transition-delay: 450ms;
}
.araclar__ust h2 { font-family: var(--font-serif); font-size: var(--fs-h2); }
.araclar__alt {
  margin: var(--bosluk-md) auto 0; max-width: 46ch;
  color: var(--renk-metin-yumusak);
}

.kart-izgara {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--bosluk-lg);
}

/* =========================================================================
   İç bağlantı şeridi — araç alt sayfalarına metin bağlantıları
   Kartlar <button> olduğu için taranabilir bağlantı taşımıyor; alt sayfalar
   ana sayfadan yalnız buradan bağlanıyor.

   Belirme kalıbı .araclar__ust ile AYNI: dökülme sırasında gizli, küp markaya
   yerleşince görünür. Kendi kuralı olmasaydı şerit gösteri boyunca küçülen
   bölümün altında durup dikkat dağıtırdı.
   Kartların `.js .kart` yolu KULLANILMADI — o yolu FLIP animasyonu yönetiyor,
   şerit animasyona girmiyor.
   ========================================================================= */
.ic-baglantilar {
  margin-top: var(--bosluk-xl);
  padding-top: var(--bosluk-lg);
  border-top: 1px solid var(--renk-cizgi);
  text-align: center;
  transition: opacity 600ms ease;
}
.ic-baglantilar h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  color: var(--renk-metin-yumusak);
  margin-bottom: var(--bosluk-md);
}
.ic-baglantilar ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: var(--bosluk-sm) var(--bosluk-lg);
}
.ic-baglantilar a {
  color: var(--petrol);
  text-decoration-color: var(--renk-cizgi);
  text-underline-offset: 0.2em;
}
.ic-baglantilar a:hover { text-decoration-color: var(--camgobegi); }
/* Gösteri sürerken gizli (küpün ve dökülen kartların önünü açık tut).
   visibility de kapatılır — YALNIZ opacity:0 olan bağlantı hâlâ Tab ile
   odaklanabilir ve klavye kullanıcısı görünmez bağlantılarda gezinir
   (§ 3, madde 2'de marka için, `.js .kart`'ta kartlar için yaşanan hata).
   Yerleşmenin her yolu (masaüstü, telefon, atlama, azaltılmış hareket)
   durum-yerlesti ekliyor; şerit hiçbir yolda gizli kalmıyor. */
.js .ic-baglantilar { opacity: 0; visibility: hidden; }
body.durum-yerlesti .ic-baglantilar {
  opacity: 1;
  visibility: visible;
  transition-delay: 600ms;
}

@media (prefers-reduced-motion: reduce) {
  .ic-baglantilar { transition: none; }
}

.kart {
  position: relative;
  display: flex; flex-direction: column; gap: var(--bosluk-sm);
  padding: var(--bosluk-lg);
  border-radius: var(--yuvarlak);
  background: linear-gradient(170deg, rgba(255,255,255,0.9), rgba(240,244,244,0.75));
  border: 1px solid var(--renk-cizgi);
  box-shadow: 0 10px 30px -22px rgba(28,125,146,0.6);
  text-align: left; color: inherit;
  font: inherit; cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}
/* JS varsa kartlar gizli başlar; düşüş animasyonunu JS (FLIP) yönetir.
   visibility de kapatılır: yalnız opacity:0 olan <button> hâlâ Tab ile
   odaklanabilir — klavye kullanıcısı görünmez düğmelerde gezinirdi. */
.js .kart { opacity: 0; visibility: hidden; }
.kart.goruntulendi { opacity: 1; visibility: visible; }
.kart:hover {
  border-color: var(--camgobegi);
  box-shadow: 0 16px 34px -20px rgba(28,125,146,0.7);
  transform: translateY(-3px);
}
.kart:hover .kart__ikon { transform: translateY(-2px) rotate(-5deg); }

.kart__ikon {
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border-radius: 0.85rem;
  background: linear-gradient(160deg, rgba(43,182,196,0.9), rgba(123,108,196,0.85));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 6px 14px -8px rgba(28,125,146,0.7);
  transition: transform var(--gecis);
}
.kart__ikon svg { width: 1.75rem; height: 1.75rem; display: block; }

/* Her araç kendi renginde — kartlar birbirinden bir bakışta ayrılsın.
   İkon dekoratiftir (aria-hidden); anlam RENKTEN değil, yanındaki addan
   gelir — renk körlüğü olan biri hiçbir şey kaybetmez. */
.kart__ikon[data-renk="cam"]     { background: linear-gradient(160deg, #3fd0c9, #17968f); }
.kart__ikon[data-renk="turuncu"] { background: linear-gradient(160deg, #f5a35c, #d97316); }
.kart__ikon[data-renk="mor"]     { background: linear-gradient(160deg, #9b8ce0, #6a55c4); }
.kart__ikon[data-renk="mercan"]  { background: linear-gradient(160deg, #ef7d8e, #cc3f56); }
.kart__ikon[data-renk="yesil"]   { background: linear-gradient(160deg, #6ecf8e, #2f9c58); }
.kart__ad { font-weight: 700; font-size: var(--fs-h3); }
.kart__aciklama { margin: 0; color: var(--renk-metin-yumusak); font-size: 0.95rem; }
.kart__durum {
  margin-top: auto; align-self: flex-start;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.2rem 0.55rem; border-radius: 999px;
}
.kart__durum[data-durum="sirada"] { color: var(--renk-rozet); background: rgba(43,182,196,0.18); }
.kart__durum[data-durum="oneri"]  { color: var(--renk-metin-yumusak); background: rgba(0,0,0,0.05); }
/* "hazir" = paneli çalışan araç. Diğerlerinden ayrışsın diye dolu yeşil rozet. */
.kart__durum[data-durum="hazir"]  { color: #0f5132; background: rgba(45,180,120,0.20); }

/* Öneri kartı diğerlerinden daha sakin durur — ama bu SOLUKLUK METİNDEN
   GELMEZ. Eski `opacity: 0.78` gövde metnini 3.95:1'e düşürüyordu (eşik 4.5).
   Fark artık yalnızca zeminden ve kesikli kenarlıktan geliyor; metin tam
   kontrastta kalır. Zırh: kontrast bir daha görsel efekte kurban gitmesin. */
.kart--oneri {
  background: linear-gradient(170deg, rgba(255,255,255,0.6), rgba(240,244,244,0.42));
  border-style: dashed;
  box-shadow: none;
}
.kart--oneri:hover {
  background: linear-gradient(170deg, rgba(255,255,255,0.9), rgba(240,244,244,0.75));
  box-shadow: 0 16px 34px -20px rgba(28,125,146,0.7);
}

/* =========================================================================
   HESAP PANELİ (<dialog>) — panel/*.js yalnız DOM üretir, görünüm burada
   Tüm ölçüler :root değişkenlerinden; açık tema; tek 720px kırılımı.
   ========================================================================= */
/* Panel bir KUTU değil, SAYFA: açılınca ekranı tümüyle devralır.
   <dialog> + showModal() korunuyor — odak tuzağı, Esc ve arka planın
   inertliği tarayıcıdan geliyor; tam ekran olması bunların hiçbirini
   bozmaz. Genişlik sınırı içerideki gövdeye taşındı ki metin satırları
   geniş ekranda okunmaz uzunluğa çıkmasın. */
.mk-panel {
  width: 100vw;
  max-width: 100vw;
  height: 100%;
  max-height: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background: linear-gradient(180deg, #ffffff, #f7f9f9);
  color: var(--renk-metin);
  overflow: hidden;
}
.mk-panel::backdrop {
  background: rgba(20,30,35,0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
/* Panel, tıklanan kartın durduğu yerden büyüyerek açılır — kartla panel
   arasında görsel bağ kurar. Başlangıç noktasını panel/ortak.js ölçüp bu üç
   değişkene yazar; yazamazsa aşağıdaki yedek değerler devreye girer ve panel
   ekranın ortasından açılır (geçiş yine yumuşak, yalnız bağ kaybolur). */
.mk-panel {
  --acilis-x: 0px;
  --acilis-y: 0px;
  --acilis-olcek: 0.55;
}
.mk-panel[open] { animation: mk-panel-gir 380ms cubic-bezier(.22,.9,.3,1); }
@keyframes mk-panel-gir {
  from {
    opacity: 0;
    transform: translate(var(--acilis-x), var(--acilis-y)) scale(var(--acilis-olcek));
  }
  to { opacity: 1; transform: none; }
}
/* Kapanış açılışın tersi — panel geldiği yere çekilir. Süre panel/ortak.js
   içindeki KAPANIS_SURESI ile aynı olmalı; ayrışırsa panel ya erken kaybolur
   ya da kapandıktan sonra bir an ekranda kalır.

   ÖZGÜLLÜK TUZAĞI: seçici `[open]` içermek ZORUNDA. Panel kapanırken close()
   henüz çağrılmadığı için `open` özniteliği duruyor; tek sınıflık bir seçici
   (0,1,0) `.mk-panel[open]`ı (0,2,0) ezemez ve kapanış boyunca AÇILIŞ
   animasyonu oynardı. */
.mk-panel[open].mk-panel--kapaniyor {
  animation: mk-panel-cik 260ms cubic-bezier(.4,.05,.6,1) forwards;
}
@keyframes mk-panel-cik {
  from { opacity: 1; transform: none; }
  to {
    opacity: 0;
    transform: translate(var(--acilis-x), var(--acilis-y)) scale(var(--acilis-olcek));
  }
}
/* Arka plan karartması panelle birlikte gelir/gider — sert geçiş olmasın. */
.mk-panel[open]::backdrop { animation: mk-backdrop-gir 380ms ease; }
@keyframes mk-backdrop-gir { from { opacity: 0; } to { opacity: 1; } }

.mk-panel__govde {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-lg);
  width: 100%;
  max-width: var(--olcum);      /* okunabilir satır uzunluğu; panel tam ekran kalır */
  height: 100%;
  margin: 0 auto;
  overflow-y: auto;
  padding: var(--bosluk-lg) var(--kenar);
}

.mk-panel__ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-md);
  position: sticky;
  /* Negatif margin gövdenin padding'ini geri alır — şerit kenardan kenara
     uzansın diye. Yatay değer gövdenin YATAY padding'iyle (--kenar) aynı
     olmalı; ikisi ayrışırsa şerit içeride kalıp kayar. */
  top: calc(var(--bosluk-lg) * -1);
  margin: calc(var(--bosluk-lg) * -1) calc(var(--kenar) * -1) 0;
  padding: var(--bosluk-md) var(--kenar);
  background: linear-gradient(180deg, #ffffff, rgba(255,255,255,0.85));
  border-bottom: 1px solid var(--renk-cizgi);
  z-index: 1;
}
.mk-panel__baslik { font-family: var(--font-serif); font-size: var(--fs-h2); color: var(--petrol); }
.mk-panel__kapat {
  flex: none;
  width: 2.2rem; height: 2.2rem;
  border-radius: 999px;
  border: 1px solid var(--renk-cizgi);
  background: #fff;
  color: var(--renk-metin-yumusak);
  font-size: 1rem; line-height: 1; cursor: pointer;
  transition: border-color var(--gecis), color var(--gecis);
}
.mk-panel__kapat:hover { border-color: var(--camgobegi); color: var(--renk-metin); }

/* --- Alanlar: iki sütun, dar ekranda tek --- */
.mk-alanlar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bosluk-md);
}
@media (min-width: 720px) {
  .mk-alanlar { grid-template-columns: 1fr 1fr; }
}
.mk-alan { display: flex; flex-direction: column; gap: var(--bosluk-xs); }
.mk-alan__etiket {
  font-size: 0.85rem; font-weight: 600; color: var(--renk-metin-yumusak);
}
.mk-alan__kontrol {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--renk-cizgi);
  border-radius: 0.6rem;
  background: #fff;
  color: var(--renk-metin);
  font-family: var(--font-sans);
  font-size: 1rem;
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.mk-alan__kontrol:focus-visible {
  outline: none;
  border-color: var(--camgobegi);
  box-shadow: 0 0 0 3px rgba(43,182,196,0.25);
}
.mk-alan--soluk { opacity: 0.5; }
/* Görev biçimine göre kapanan alan grupları: soluk değil TAMAMEN gizli —
   iki grup birbirinin alternatifi, ikisi birden dururken hangisinin geçerli
   olduğu belirsiz kalır. display:none aynı zamanda Tab sırasından da çıkarır. */
/* !important ŞART: bunlar yardımcı (utility) sınıflar ve gizledikleri öğelerin
   kendi kuralları stil dosyasında DAHA SONRA geliyor — örn. `.mk-onay
   { display: flex }` aynı özgüllükte olduğu için son yazılan kazanıyor ve
   satır gizlenmiyordu (emeklilikte "eş durumu" ekranda kalmıştı). */
.mk-alan--gizli,
.mk-gizli { display: none !important; }
.mk-alan__not { margin: 0; font-size: 0.78rem; color: var(--renk-metin-yumusak); }

/* --- Giriş tablosu (ek ders puantajı) ---
   Kullanıcı kitlesi (mutemetler, öğretmenler) gün boyu Excel'de tablo
   dolduruyor; 13 ayrı alan kutusu yerine satır satır tablo tanıdık geliyor.
   Saat sütunu yazılabilir, birim ücret ve tutar kendiliğinden dolar. */
.mk-tablo-kap { overflow-x: auto; }   /* dar ekranda TABLO kayar, sayfa değil */
.mk-giris {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.mk-giris th, .mk-giris td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--renk-cizgi);
  text-align: right;
  white-space: nowrap;
}
.mk-giris thead th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--renk-metin-yumusak);
  text-transform: uppercase;
  border-bottom-width: 2px;
}
/* ÖZGÜLLÜK: `.mk-giris th` (0,1,1) tek başına `.mk-giris__ad`'ı (0,1,0) ezer —
   satır başlıkları sağa yaslanıp sütun gibi görünüyordu. Eleman adı seçiciye
   dahil edilerek eşitlik bozulur. Aynı tuzak `.mk-gizli`'de de yaşanmıştı. */
.mk-giris thead th:first-child,
.mk-giris th.mk-giris__ad {
  text-align: left;
  font-weight: 500;
  color: var(--renk-metin);
  white-space: normal;      /* uzun tür adları sarsın, tabloyu genişletmesin */
}
.mk-giris__girdi { width: 6.5rem; }
.mk-giris__kutu {
  width: 100%;
  padding: 0.3rem 0.45rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Birim ücret ikincil bilgidir; tutar okunacak sayıdır. */
.mk-giris__birim {
  color: var(--renk-metin-yumusak);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.mk-giris__tutar {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--renk-metin-yumusak);
}
/* Dolu satır öne çıkar — boş satırlar geri çekilir ama okunur kalır. */
.mk-giris--dolu .mk-giris__ad { font-weight: 600; }
.mk-giris--dolu .mk-giris__tutar { color: var(--renk-metin); font-weight: 600; }
.mk-giris__ek {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.7rem;
  color: var(--kehribar);
  white-space: nowrap;
}
.mk-giris tfoot th, .mk-giris tfoot td {
  border-bottom: none;
  border-top: 2px solid var(--petrol);
  padding-top: 0.5rem;
  font-weight: 700;
  color: var(--petrol);
  font-family: var(--font-mono);
}
.mk-giris tfoot th.mk-giris__ad {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--petrol);
}
/* Toplam satırında adet sütunu da sayı gibi okunsun. */
.mk-giris tfoot .mk-giris__girdi { text-align: right; }

/* Sonucun başındaki düz Türkçe özet — tabloyu okumayan da cevabı alsın. */
.mk-sonuc__ozet {
  margin: 0 0 var(--bosluk-sm);
  padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--camgobegi);
  background: rgba(43, 182, 196, 0.08);
  border-radius: 0 0.4rem 0.4rem 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--renk-metin);
}

/* --- Bölümler: uzun formu okunur parçalara ayırır (ek ders paneli) ---
   Ders saatleri, sınav görevleri ve kesintiler ayrı kümeler halinde durur;
   tek uzun ızgarada hangi alanın neye ait olduğu kayboluyordu. */
.mk-bolum { margin-top: var(--bosluk-lg); }
.mk-bolum__baslik {
  margin: 0 0 var(--bosluk-sm);
  padding-bottom: var(--bosluk-xs);
  border-bottom: 1px solid var(--renk-cizgi);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--petrol);
}
.mk-km-durum--elle,
.mk-gece-durum--elle { color: var(--kehribar); font-weight: 600; }

/* İl + ilçe ikilisi: il biraz geniş, ilçe yanında */
.mk-yer-grup { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bosluk-sm); }

/* --- Aile fertleri --- */
.mk-aile {
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--yuvarlak);
  padding: var(--bosluk-md);
  margin: 0;
}
.mk-aile legend {
  padding: 0 0.4rem; font-size: 0.85rem; font-weight: 700; color: var(--petrol);
}
.mk-aile__liste { display: flex; flex-direction: column; gap: var(--bosluk-sm); margin-bottom: var(--bosluk-sm); }
.mk-ferd { display: flex; gap: var(--bosluk-sm); align-items: center; }
.mk-ferd__yakinlik { flex: 1; }

.mk-mini-btn {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--renk-cizgi);
  border-radius: 0.6rem;
  background: #fff;
  color: var(--petrol);
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600;
  cursor: pointer;
  transition: border-color var(--gecis), background var(--gecis);
}
.mk-mini-btn:hover { border-color: var(--camgobegi); background: rgba(43,182,196,0.08); }
.mk-mini-btn--sil { flex: none; color: var(--renk-metin-yumusak); }
.mk-mini-btn--sil:hover { border-color: #c0562f; color: #a2451f; background: rgba(192,86,47,0.06); }

/* --- Eş durumu onayı --- */
.mk-onay {
  display: flex; gap: var(--bosluk-sm); align-items: flex-start;
  font-size: 0.9rem; color: var(--renk-metin);
  cursor: pointer;
}
.mk-onay input { margin-top: 0.2rem; flex: none; width: 1.1rem; height: 1.1rem; accent-color: var(--petrol); }

/* --- Gündelik önizleme --- */
.mk-gundelik-onizleme {
  margin: 0;
  padding: 0.6rem 0.85rem;
  border-radius: 0.6rem;
  background: rgba(43,182,196,0.10);
  border: 1px solid rgba(43,182,196,0.28);
  font-family: var(--font-mono); font-size: 0.85rem; color: var(--renk-rozet);
}
.mk-gundelik-onizleme--hata {
  background: rgba(192,86,47,0.08); border-color: rgba(192,86,47,0.35); color: #a2451f;
}

/* --- Tarih + saat + dakika üçlüsü ---
   datetime-local tek kutuda tarih ve saati topluyordu; takvim gün seçilince
   kapanmıyordu çünkü saat kısmı hâlâ bekleniyordu. Üç ayrı kontrol bunu
   çözer: takvim gün tıklanınca kapanır, saat/dakika açılır listeden gelir. */
.mk-zaman {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--bosluk-xs);
  align-items: center;
}
/* Saat ve dakika iki haneli: kutuyu içeriğe göre daralt, tarihe yer kalsın. */
.mk-zaman__saat, .mk-zaman__dakika {
  width: auto;
  padding-right: 0.4rem; padding-left: 0.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --- Görev kartları (geçici görev) ---
   Aynı bütçe yılındaki her görev ayrı kart; hepsi tek bildirime iner. */
.mk-gorevler { display: flex; flex-direction: column; gap: var(--bosluk-md); }
.mk-gorev {
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--yuvarlak);
  padding: var(--bosluk-md);
  margin: 0;
  min-width: 0;             /* fieldset varsayılan min-width:min-content; ızgara taşardı */
}
.mk-gorev__ust {
  display: flex; align-items: center; gap: var(--bosluk-sm);
  width: 100%;
  padding: 0 0.4rem;
}
.mk-gorev__no {
  font-size: 0.85rem; font-weight: 700; color: var(--petrol); white-space: nowrap;
}
/* Kart başlığındaki canlı özet ("· Kızılcahamam · 23.06.2026 – 24.06.2026"):
   uzun görev adları düğmeyi ekrandan itmesin diye kırpılır. */
.mk-gorev__ozet {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.78rem;
  font-weight: 400; color: var(--renk-metin-yumusak);
}
.mk-gorev__sil {
  flex: none;
  width: 1.6rem; height: 1.6rem;
  border: 1px solid var(--renk-cizgi);
  border-radius: 50%;
  background: #fff;
  color: var(--renk-metin-yumusak);
  font-size: 0.8rem; line-height: 1; cursor: pointer;
  transition: border-color var(--gecis), color var(--gecis), background var(--gecis);
}
.mk-gorev__sil:hover {
  border-color: #c0562f; color: #a2451f; background: rgba(192,86,47,0.06);
}
.mk-gorev .mk-onay, .mk-gorev .mk-ozet { margin-top: var(--bosluk-md); }

.mk-gorev-ekle { display: flex; flex-direction: column; gap: var(--bosluk-xs); align-items: flex-start; }

/* Çok görevli sonuçta her görevin kendi tablosunu ayıran başlık. */
.mk-sonuc__gorev-baslik {
  margin: var(--bosluk-md) 0 var(--bosluk-xs);
  font-family: var(--font-sans);
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--petrol);
}

/* --- md. 39 canlı özeti (geçici görev): "3 gün tam + 1 gün 2/3" --- */
.mk-ozet { display: flex; flex-direction: column; gap: var(--bosluk-xs); }
.mk-ozet__satir {
  margin: 0;
  font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600;
  color: var(--petrol);
}
.mk-ozet__hata { margin: 0; font-size: 0.85rem; color: #a2451f; }
.mk-ozet__ayrinti > summary {
  cursor: pointer;
  font-size: 0.82rem; color: var(--renk-metin-yumusak);
  padding: 0.2rem 0;
}
.mk-ozet__ayrinti > summary:focus-visible {
  outline: 2px solid var(--camgobegi); outline-offset: 2px; border-radius: 0.3rem;
}
/* Gün dökümü: sayısal değil oran sütunu — sağa yapışık ama vurgusuz */
.mk-gun-tablo { font-size: 0.85rem; }
.mk-gun-tablo .mk-tablo__tutar { color: var(--petrol); font-weight: 600; }

/* --- Eylemler --- */
.mk-panel__eylem { display: flex; gap: var(--bosluk-sm); flex-wrap: wrap; }
/* ⚠ GRADYAN KONTRAST İÇİN KOYULAŞTIRILDI (29.07.2026) — açık uca dönülmez.
   Eski gradyan `camgobegi → petrol` idi; beyaz metin camgöbeği ucunda yalnız
   2,44:1 kontrast veriyordu ve § 5'teki 4,5:1 eşiğinin altındaydı. Ölçüm
   tarayıcıda yapıldı, site sahibi iki hali yan yana görüp koyusunu seçti.
   Şimdi: petrol ucunda 4,78:1, koyu uçta 11,08:1 — her noktası eşiğin üstünde.
   Renk ailesi korundu, yalnız açık uç atıldı. */
.mk-ana-btn {
  padding: 0.7rem 1.4rem;
  border: none;
  border-radius: 0.7rem;
  background: linear-gradient(160deg, var(--petrol), var(--renk-rozet));
  color: #fff;
  font-family: var(--font-sans); font-size: 1rem; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(28,125,146,0.9);
  transition: transform var(--gecis), box-shadow var(--gecis), opacity var(--gecis);
}
.mk-ana-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(28,125,146,1); }
.mk-ana-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.mk-ana-btn--ikincil {
  background: #fff; color: var(--petrol);
  border: 1px solid var(--renk-cizgi); box-shadow: none;
  margin-top: var(--bosluk-md);
}

/* --- Sonuç tablosu --- */
.mk-sonuc { display: flex; flex-direction: column; gap: var(--bosluk-sm); }
.mk-tablo { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.mk-tablo td { padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--renk-cizgi); vertical-align: top; }
.mk-tablo__ad { font-weight: 600; }
.mk-tablo__aciklama { color: var(--renk-metin-yumusak); font-size: 0.82rem; font-family: var(--font-mono); }
.mk-tablo__tutar { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.mk-tablo__toplam td { border-top: 2px solid var(--petrol); border-bottom: none; font-weight: 700; padding-top: 0.7rem; }
.mk-tablo__toplam .mk-tablo__tutar { color: var(--petrol); font-size: 1.05rem; }

/* Kesinti satırı (damga vergisi): eksi işaretli, vurgusuz ama okunur.
   Soluk his zeminden gelir — opacity metni de zayıflatırdı (kontrast kuralı). */
.mk-tablo__kesinti td {
  border-bottom: 1px dashed var(--renk-cizgi);
  color: var(--renk-metin-yumusak);
  font-weight: 600;
}

.mk-sonuc__uyari {
  margin: 0; padding: 0.55rem 0.8rem; border-radius: 0.5rem;
  background: rgba(232,161,58,0.12); border: 1px solid rgba(232,161,58,0.4);
  font-size: 0.85rem; color: #8a5a12;
}
.mk-sonuc__hata {
  margin: 0; padding: 0.6rem 0.85rem; border-radius: 0.5rem;
  background: rgba(192,86,47,0.08); border: 1px solid rgba(192,86,47,0.35);
  color: #a2451f; font-size: 0.9rem;
}

/* =========================================================================
   Bildirim (toast) — tools.js yalnızca sınıf ekler/çıkarır
   ========================================================================= */
.mk-toast {
  position: fixed;
  left: 50%;
  bottom: var(--bosluk-lg);
  z-index: 50;
  max-width: 90vw;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(43,182,196,0.5);
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 30px -12px rgba(28,125,146,0.6);
  color: var(--renk-rozet);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  opacity: 0;
  transform: translateX(-50%) translateY(1rem);
  pointer-events: none;
  transition: opacity var(--gecis), transform var(--gecis);
}
.mk-toast--gorunur { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =========================================================================
   Alt bilgi
   ========================================================================= */
.site-footer {
  border-top: 1px solid var(--renk-cizgi);
  padding: var(--bosluk-lg) var(--kenar);
  text-align: center;
}
.site-footer p {
  margin: 0; font-family: var(--font-mono);
  font-size: var(--fs-mono); color: var(--renk-metin-yumusak);
}

/* =========================================================================
   Animasyonlar
   ========================================================================= */
@keyframes kup-don {
  0%   { transform: rotateX(-18deg) rotateY(0deg); }
  100% { transform: rotateX(-18deg) rotateY(360deg); }
}
@keyframes mini-don {
  0%   { transform: rotateX(-20deg) rotateY(0deg); }
  100% { transform: rotateX(-20deg) rotateY(360deg); }
}
/* yavaş renk döngüsü — yalnızca yaprak öğelerde kullanılır */
@keyframes renk-don {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
/* başlık degradesi akar */
@keyframes baslik-parilti {
  0%   { background-position: 0% 0; }
  100% { background-position: 250% 0; }
}
@keyframes parla {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
/* elek gibi yumuşak, sürekli sallanma (dökülme boyunca) */
@keyframes elek-salla {
  0%, 100% { transform: translateX(0)    rotate(0deg); }
  25%      { transform: translateX(-6px) rotate(-1.1deg); }
  50%      { transform: translateX(5px)  rotate(0.9deg); }
  75%      { transform: translateX(-4px) rotate(-0.7deg); }
}

/* =========================================================================
   Geniş ekran
   ========================================================================= */
@media (min-width: 720px) {
  .kart-izgara { gap: var(--bosluk-xl); }
}

/* =========================================================================
   Hareket azaltma — dönme/dökülme yok; her şey açık ve okunur
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kup, .marka__kup, .yuz, .kanat, .marka__kup span, .kup-tasiyici,
  .giris__baslik, .giris__parilti { animation: none !important; }
  .kup-tasiyici, .giris__yazi, .kart, .marka, .kanat, .araclar,
  .araclar__ust, .giris__sabit, .sahne3d, .arka-plan,
  .mk-toast { transition-duration: 0.001ms !important; }
  /* panel animasyonsuz açılır ve kapanır; geçişler anında */
  .mk-panel[open] { animation: none !important; }
  .mk-panel[open].mk-panel--kapaniyor { animation: none !important; }
  .mk-panel[open]::backdrop { animation: none !important; }
  .mk-ana-btn, .mk-mini-btn, .mk-panel__kapat,
  .mk-alan__kontrol { transition-duration: 0.001ms !important; }
}