/* ==========================================================================
   OkulumTv — TV oynatici
   1rem = 10px @ 1920x1080. Tum olculer rem; ekran buyudukce orantili buyur.
   ========================================================================== */

:root{
  /* --------------------------------------------------------------------
     Yedek değerler. Tema motoru (inc/tema.php) sayfa başında bu
     değişkenleri kurumun seçtiği palete göre ezer.
     -------------------------------------------------------------------- */
  --zemin:#0A2C57; --zemin-2:#062038; --zemin-3:#0E3D6E; --govde:#061A33;
  --yuzey-1:rgba(255,255,255,.035); --yuzey-2:rgba(255,255,255,.055); --yuzey-3:rgba(255,255,255,.09);
  --cizgi:rgba(255,255,255,.09); --cizgi-guclu:rgba(255,255,255,.18);
  --yazi:#EDF2FB; --yazi-soluk:#93A3C2;
  --vurgu:#F58220; --vurgu-2:#FAA61A; --vurgu-metin:#FAA61A;
  --vurgu-uzeri:#1A1206; --vurgu-hafif:rgba(245,130,32,.16);
  --vurgu-cizgi:rgba(245,130,32,.42); --vurgu-isik:rgba(245,130,32,.4);
  --ikincil:#3D9BE9; --ikincil-hafif:rgba(61,155,233,.16);
  --iyi:#17BFA0; --iyi-hafif:rgba(23,191,160,.14); --iyi-cizgi:rgba(23,191,160,.32);
  --alarm:#F15B22; --alarm-hafif:rgba(241,91,34,.14); --alarm-cizgi:rgba(241,91,34,.38);
  --tarama:rgba(255,255,255,.018);

  /* Eski adlar yeni değişkenlere bağlanır */
  --gece:var(--zemin);
  --kat:var(--yuzey-1); --kat2:var(--yuzey-2); --kat3:var(--yuzey-3);
  --tebesir:var(--yazi); --sis:var(--yazi-soluk);
  --zil:var(--vurgu); --zil-sicak:var(--vurgu-2); --deniz:var(--iyi);

  --display:"Archivo","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",monospace;

  --yan-genislik:40rem;
  --ust-yukseklik:9rem;
  --bant-yukseklik:12.8rem;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html{
  font-size:min(0.5208vw, 0.9259vh); /* 1920x1080 -> 10px */
  background:var(--gece);
}

body{
  margin:0;
  height:100vh;
  overflow:hidden;
  font-family:var(--display);
  color:var(--tebesir);
  background:
    radial-gradient(120rem 80rem at 12% -10%, var(--zemin-3) 0%, transparent 62%),
    radial-gradient(90rem 70rem at 96% 8%, var(--zemin-2) 0%, transparent 60%),
    radial-gradient(120rem 60rem at 50% 118%, var(--zemin-2) 0%, transparent 65%),
    var(--zemin);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

/* Yayin dokusu: cok hafif tarama cizgileri, "canli yayin" hissi */
.doku{
  position:fixed; inset:0; pointer-events:none; z-index:60;
  background:repeating-linear-gradient(to bottom,var(--tarama) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
}

/* ==========================================================================
   Iskelet
   ========================================================================== */
.tv{
  position:relative;
  display:grid;
  height:100vh;
  grid-template-columns:1fr var(--yan-genislik);
  grid-template-rows:var(--ust-yukseklik) 1fr var(--bant-yukseklik);
  grid-template-areas:
    "ust   yan"
    "sahne yan"
    "bant  bant";
}

/* ---------- Ust serit ---------- */
.ust{
  grid-area:ust;
  display:flex; align-items:center; gap:3rem;
  padding:0 3.6rem 0 4rem;
  border-bottom:1px solid var(--cizgi);
  background:linear-gradient(180deg,var(--yuzey-1),transparent);
}

.marka{display:flex; align-items:center; gap:1.6rem; min-width:0}
.monogram{
  width:4.6rem; height:4.6rem; flex:0 0 auto; color:var(--zil);
  filter:drop-shadow(0 0 1.4rem var(--vurgu-isik));
}
.kurum-logo{
  height:5.6rem; width:auto; max-width:22rem; flex:0 0 auto;
  object-fit:contain; display:block;
}
.marka-yazi{display:flex; flex-direction:column; line-height:1.05; min-width:0}
.marka-yazi strong{
  font-size:2.5rem; font-weight:800; font-stretch:104%;
  letter-spacing:-.02em; white-space:nowrap;
}
.marka-yazi span{
  font-size:1.45rem; font-weight:500; color:var(--sis);
  letter-spacing:.16em; text-transform:uppercase; margin-top:.35rem;
}

.ust-orta{flex:1; display:flex; justify-content:center}
.kanal-rozet{
  display:inline-flex; align-items:center; gap:1rem;
  padding:.85rem 2rem; border:1px solid var(--cizgi-guclu); border-radius:999px;
  background:var(--yuzey-2);
  font-size:1.6rem; font-weight:800; letter-spacing:.3em; font-stretch:112%;
}
.nokta{
  width:.9rem; height:.9rem; border-radius:50%; background:var(--alarm);
  box-shadow:0 0 0 0 var(--alarm-cizgi); animation:canli 2.4s infinite;
}
@keyframes canli{
  0%{box-shadow:0 0 0 0 var(--alarm-cizgi)}
  70%{box-shadow:0 0 0 1.2rem transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

.ust-sag{display:flex; flex-direction:column; align-items:flex-end; gap:.9rem}
.sahne-adi{
  font-size:1.35rem; font-weight:700; letter-spacing:.26em;
  color:var(--sis); text-transform:uppercase;
}
.pipler{display:flex; gap:.55rem}
.pip{
  width:1.5rem; height:.35rem; border-radius:999px;
  background:var(--cizgi-guclu); transition:background .4s, width .4s;
}
.pip.aktif{background:var(--zil); width:3.4rem}

/* ---------- Ana sahne ---------- */
.sahne{
  grid-area:sahne; position:relative; overflow:hidden;
  border-right:1px solid var(--cizgi);
}
.sahne-katman{
  position:absolute; inset:0;
  padding:4.6rem 5.4rem 4rem;
  display:flex; flex-direction:column;
}
.sahne-katman.giris{animation:sahneGir .78s cubic-bezier(.16,1,.3,1) both}
.sahne-katman.cikis{animation:sahneCik .5s cubic-bezier(.4,0,1,1) both}
@keyframes sahneGir{
  from{opacity:0; transform:translateY(2.4rem) scale(.994)}
  to{opacity:1; transform:none}
}
@keyframes sahneCik{
  from{opacity:1} to{opacity:0; transform:translateY(-1.4rem)}
}

.supurge{
  position:absolute; left:0; right:0; top:0; height:.3rem; z-index:20;
  background:linear-gradient(90deg,transparent,var(--zil),var(--zil-sicak),var(--zil),transparent);
  animation:supur .78s cubic-bezier(.5,0,.2,1) both;
  pointer-events:none;
}
@keyframes supur{
  from{transform:translateY(0); opacity:0}
  25%{opacity:1}
  to{transform:translateY(calc(100vh - var(--ust-yukseklik) - var(--bant-yukseklik))); opacity:0}
}

.sahne-yukleniyor{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:1.2rem;
}
.sahne-yukleniyor span{
  width:1.1rem; height:1.1rem; border-radius:50%; background:var(--sis);
  animation:zipla 1.1s infinite ease-in-out;
}
.sahne-yukleniyor span:nth-child(2){animation-delay:.15s}
.sahne-yukleniyor span:nth-child(3){animation-delay:.3s}
@keyframes zipla{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-.9rem)}}

/* Sahne basligi — her sahnede ayni yapi */
.s-kafa{display:flex; align-items:center; gap:2rem; margin-bottom:3.4rem}
.s-etiket{
  font-size:1.7rem; font-weight:900; letter-spacing:.34em; font-stretch:110%;
  color:var(--zil); text-transform:uppercase; white-space:nowrap;
}
.s-kafa::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--cizgi-guclu),transparent)}
.s-kafa-sag{
  font-family:var(--mono); font-size:1.5rem; color:var(--sis); letter-spacing:.06em; white-space:nowrap;
}

.s-govde{flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center}

/* ==========================================================================
   Sahne: Gunun sozu  (imza tipografi)
   ========================================================================== */
.soz-metin{
  font-size:7.2rem; line-height:1.14; font-weight:600; font-stretch:96%;
  letter-spacing:-.024em; max-width:30ch; text-wrap:balance;
}
.soz-metin .tirnak{color:var(--zil); font-weight:800}
.soz-sahip{
  margin-top:4rem; display:flex; align-items:center; gap:1.8rem;
  font-size:2.6rem; font-weight:800; font-stretch:108%; letter-spacing:-.01em;
}
.soz-sahip::before{content:""; width:6rem; height:.3rem; background:var(--zil); border-radius:999px}

/* ==========================================================================
   Sahne: Duyuru
   ========================================================================== */
.duyuru-baslik{
  font-size:6.4rem; line-height:1.06; font-weight:800; font-stretch:108%;
  letter-spacing:-.03em; max-width:24ch; text-wrap:balance;
}
.duyuru-metin{
  margin-top:3rem; font-size:3.3rem; line-height:1.48; font-weight:400;
  color:var(--yazi-soluk); max-width:52ch;
}
.duyuru-onemli .duyuru-baslik{color:var(--zil-sicak)}
.duyuru-gorsel{
  margin-top:auto; align-self:flex-start; max-height:34rem; border-radius:var(--kose);
  border:1px solid var(--cizgi-guclu);
}

/* ==========================================================================
   Sahne: Ders programi
   ========================================================================== */
.prog-tablo{display:flex; flex-direction:column; gap:.45rem; overflow:hidden}
.prog-satir{
  display:grid; grid-template-columns:16rem 1fr 10rem; align-items:center;
  gap:2rem; padding:1.05rem 2.2rem; border-radius:var(--kose);
  background:var(--yuzey-1); border:1px solid transparent;
  font-size:2.2rem;
}
.prog-satir.tenef{padding:.5rem 2.2rem; font-size:1.7rem; background:transparent}
.prog-satir .saat{font-family:var(--mono); font-size:1.8rem; color:var(--sis); letter-spacing:-.03em}
.prog-satir.tenef .saat{font-size:1.5rem}
.prog-satir .ad{font-weight:700; font-stretch:104%}
.prog-satir .rozet{justify-self:end; font-size:1.4rem; letter-spacing:.2em; color:var(--sis)}
.prog-satir.tenef{opacity:.5}
.prog-satir.gecmis{opacity:.32}
.prog-satir.simdi{
  background:linear-gradient(90deg,var(--vurgu-hafif),transparent);
  border-color:var(--vurgu-cizgi);
}
.prog-satir.simdi .ad{color:var(--zil-sicak)}
.prog-satir.simdi .rozet{color:var(--zil); font-weight:800}
.prog-satir.simdi .saat{color:var(--zil-sicak)}

/* ==========================================================================
   Sahne: Yemek
   ========================================================================== */
.menu-liste{display:flex; flex-direction:column; gap:1.8rem}
.menu-satir{
  display:flex; align-items:baseline; gap:2.8rem;
  font-size:5.4rem; font-weight:700; font-stretch:102%; letter-spacing:-.024em;
}
.menu-satir .no{
  font-family:var(--mono); font-size:1.8rem; font-weight:700; color:var(--zil);
  min-width:3.4rem; letter-spacing:0;
}
.menu-kalori{
  margin-top:3.6rem; font-size:1.9rem; color:var(--sis); letter-spacing:.1em;
}

/* ==========================================================================
   Sahne: Doğum günü — her kişi için ayrı sayfa
   ========================================================================== */
.dg-sahne{
  flex-direction:row; align-items:center; gap:5rem;
  justify-content:space-between;
}
.dg-sol{flex:1; min-width:0}
.dg-sag{flex:0 0 auto; width:38rem; display:grid; place-items:center}

.dg-ustlik{
  font-size:2.4rem; color:var(--yazi-soluk); font-weight:500;
  letter-spacing:.02em; margin-bottom:2.6rem;
}
.dg-kisi{display:flex; align-items:center; gap:3rem}
.dg-avatar{
  width:14rem; height:14rem; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font-size:5rem; font-weight:800;
  background:linear-gradient(140deg,var(--vurgu-2),var(--vurgu)); color:var(--vurgu-uzeri);
  object-fit:cover; box-shadow:0 0 0 .8rem var(--vurgu-hafif);
}
.dg-ad{
  font-size:6.4rem; line-height:1.02; font-weight:800; font-stretch:106%;
  letter-spacing:-.03em; text-wrap:balance;
}
.dg-alt{
  font-size:2.6rem; color:var(--yazi-soluk); margin-top:.9rem; letter-spacing:.06em;
}
.dg-kutlama{
  margin-top:4rem; font-size:4rem; line-height:1.12; font-weight:700;
  font-stretch:104%; letter-spacing:-.025em;
}
.dg-kutlama em{font-style:normal; color:var(--vurgu-metin)}

.pasta{width:100%; height:auto; max-height:44rem; display:block}
.pasta .alev{transform-origin:center; animation:alevOyna 1.6s ease-in-out infinite}
@keyframes alevOyna{
  0%,100%{opacity:1; transform:scaleY(1)}
  50%{opacity:.78; transform:scaleY(.86)}
}
.pasta .konfeti{animation:konfetiSuzul 4s ease-in-out infinite}
@keyframes konfetiSuzul{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-1.2rem)}
}

/* ==========================================================================
   Sahne: Basari
   ========================================================================== */
.basari-derece{
  display:inline-flex; align-items:center; gap:1rem; align-self:flex-start;
  padding:.9rem 2rem; border-radius:999px; margin-bottom:2.4rem;
  background:var(--vurgu-hafif); border:1px solid var(--vurgu-cizgi);
  color:var(--vurgu-metin); font-size:1.7rem; font-weight:800; letter-spacing:.18em;
}
.basari-baslik{
  font-size:6rem; line-height:1.07; font-weight:800; font-stretch:106%;
  letter-spacing:-.03em; max-width:26ch; text-wrap:balance;
}
.basari-kisi{
  margin-top:2.6rem; font-size:3rem; font-weight:700; color:var(--deniz);
}
.basari-aciklama{
  margin-top:1.8rem; font-size:2.7rem; line-height:1.5; color:var(--yazi-soluk); max-width:54ch;
}

/* ==========================================================================
   Sahne: Nobet
   ========================================================================== */
.nobet-liste{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem}
.nobet-kart{
  padding:2.4rem 2.8rem; border-radius:var(--kose);
  background:var(--yuzey-1); border-left:.5rem solid var(--ikincil);
}
.nobet-ad{font-size:3.2rem; font-weight:800; font-stretch:104%; letter-spacing:-.02em}
.nobet-yer{margin-top:.7rem; font-size:2rem; color:var(--sis); letter-spacing:.06em}
.nobet-tur{
  display:inline-block; margin-top:1.2rem; font-size:1.3rem; letter-spacing:.24em;
  color:var(--ikincil); text-transform:uppercase; font-weight:700;
}

/* ==========================================================================
   Sahne: Geri sayim
   ========================================================================== */
.gs-ad{
  font-size:5.4rem; font-weight:800; font-stretch:106%; letter-spacing:-.028em;
  max-width:24ch; text-wrap:balance;
}
.gs-sayac{display:flex; gap:2.6rem; margin-top:4rem}
.gs-kutu{
  min-width:22rem; padding:3rem 1.6rem 2.2rem; text-align:center;
  border-radius:var(--kose); background:var(--yuzey-2);
  border:1px solid var(--cizgi-guclu);
}
.gs-kutu b{
  display:block; font-family:var(--mono); font-size:9.2rem; font-weight:800;
  line-height:1; letter-spacing:-.04em; color:var(--zil);
}
.gs-kutu span{
  display:block; margin-top:1.2rem; font-size:1.5rem; letter-spacing:.28em;
  color:var(--sis); text-transform:uppercase;
}
.gs-yer{margin-top:3.4rem; font-size:2.2rem; color:var(--sis); letter-spacing:.08em}

/* ==========================================================================
   Sahne: Tarihte bugun
   ========================================================================== */
.tb-yil{
  font-family:var(--mono); font-size:11rem; font-weight:800; line-height:.9;
  letter-spacing:-.05em; color:var(--vurgu);
}
.tb-metin{
  margin-top:3rem; font-size:4.2rem; line-height:1.32; font-weight:500;
  max-width:36ch; text-wrap:balance;
}

/* ==========================================================================
   Sahne: Kadromuz — yatay kartlar, fotoğraf solda
   ========================================================================== */
.kadro-liste{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1.8rem 2.4rem; align-content:center;
}
.kadro-kart{
  margin:0; padding:1.6rem 2.4rem 1.6rem 1.6rem;
  display:flex; align-items:center; gap:2.2rem;
  border-radius:var(--kose); background:var(--yuzey-2);
  border:1px solid var(--cizgi);
  border-left:.5rem solid var(--vurgu);
}
.kadro-cerceve{
  width:11rem; height:11rem; flex:0 0 auto; border-radius:50%;
  overflow:hidden; display:grid; place-items:center;
  background:var(--yuzey-3); border:.3rem solid var(--cizgi-guclu);
}
.kadro-foto{width:100%; height:100%; object-fit:cover; display:block}
.kadro-harf{
  font-size:3.8rem; font-weight:800; letter-spacing:-.02em;
  color:var(--vurgu-metin);
}
.kadro-kart figcaption{display:flex; flex-direction:column; gap:.6rem; min-width:0}
.kadro-ad{
  font-size:3rem; font-weight:800; font-stretch:104%;
  letter-spacing:-.025em; line-height:1.1; text-wrap:balance;
}
.kadro-alt{display:flex; flex-direction:column; gap:.2rem}
.kadro-alt b{
  font-size:2rem; font-weight:700; color:var(--vurgu-metin); letter-spacing:.02em;
}
.kadro-alt i{font-style:normal; font-size:1.9rem; color:var(--yazi-soluk)}

/* ==========================================================================
   Sahne: Galeri / Video
   ========================================================================== */
.galeri-cerceve{
  position:relative; flex:1; min-height:0; border-radius:var(--kose); overflow:hidden;
  border:1px solid var(--cizgi-guclu); background:var(--govde);
}
.galeri-cerceve img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.1s ease;
}
.galeri-cerceve img.acik{opacity:1}
/* Görselin üzerinde duran açıklama bandı.
   Metin kadar genişler, alt bantlarla birleşmesin diye aralarında boşluk bırakır
   ve onlardan farklı bir renk (ikincil) kullanır. */
.galeri-bant{
  position:absolute; left:4rem; bottom:5.4rem; max-width:calc(100% - 8rem);
  display:inline-flex; align-items:center;
  /* Sağda metinden sonra bandın devam ettiği ve solduğu pay */
  padding:1.4rem 11rem 1.4rem 3rem;
  color:#FFFFFF;
  font-size:3.6rem; font-weight:800; font-stretch:106%; letter-spacing:-.02em;
  line-height:1.15;
  text-shadow:0 .2rem 1.4rem rgba(0,0,0,.35);

  /* Bant düz renkte başlar, metin bittikten sonra bir süre devam eder,
     sonra sert bir kenar yerine yumuşakça saydamlaşır. */
  background:var(--ikincil);                       /* çok eski tarayıcılar için */
  background:linear-gradient(
    90deg,
    var(--ikincil) 0%,
    var(--ikincil) calc(100% - 9.5rem),
    transparent 100%
  );
}
.galeri-bant.bos{display:none}
.galeri-bant.gir{animation:bantGir .6s cubic-bezier(.16,1,.3,1) both}
@keyframes bantGir{
  from{opacity:0; transform:translateX(-3rem)}
  to{opacity:1; transform:none}
}

/* Tam kanvas sahneler: görsel kenardan kenara */
.sahne-katman.tam-kanvas{padding:0}
.sahne-katman.tam-kanvas .s-kafa{
  position:absolute; top:0; left:0; right:0; z-index:3;
  margin:0; padding:2.6rem 4rem;
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent);
}
.sahne-katman.tam-kanvas .galeri-cerceve,
.sahne-katman.tam-kanvas .video-cerceve{
  border-radius:0; border:0; height:100%;
}
.video-cerceve{
  flex:1; min-height:0; border-radius:var(--kose);
  overflow:hidden; background:var(--govde); position:relative;
}
.video-cerceve video{width:100%; height:100%; object-fit:contain}
.video-cerceve iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ==========================================================================
   Yan panel
   ========================================================================== */
.yan{
  grid-area:yan; display:flex; flex-direction:column;
  padding:2.4rem 2.4rem 2.4rem; gap:2rem;
  background:linear-gradient(180deg,var(--yuzey-2),transparent);
  overflow:hidden;
}

.saat-blok{position:relative; text-align:center; padding:.2rem 0 1rem}
.saat{
  font-family:var(--mono); font-size:7.4rem; font-weight:800; line-height:.92;
  letter-spacing:-.05em; display:inline-block;
}
.saat-sn{
  font-family:var(--mono); font-size:2.4rem; font-weight:700; color:var(--vurgu);
  display:inline-block; vertical-align:top; margin-left:.6rem; margin-top:.6rem;
}
.tarih{
  margin-top:1rem; font-size:1.7rem; font-weight:600; color:var(--sis);
  letter-spacing:.16em; text-transform:uppercase;
}

/* --- Imza: zil halkasi --- */
.zil-blok{
  display:flex; flex-direction:column; align-items:center; gap:1.4rem;
  padding:2rem 2rem 2.2rem; border-radius:var(--kose-buyuk);
  background:var(--yuzey-2); border:1px solid var(--cizgi-guclu);
}
.zil-halka{position:relative; width:17.4rem; height:17.4rem}
.zil-svg{width:100%; height:100%; transform:rotate(-90deg)}
.zil-iz{fill:none; stroke:var(--cizgi); stroke-width:8}
.zil-yay{
  fill:none; stroke:var(--zil); stroke-width:8; stroke-linecap:round;
  stroke-dasharray:326.7; stroke-dashoffset:326.7;
  transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1), stroke .6s;
  filter:drop-shadow(0 0 1.2rem var(--vurgu-isik));
}
.zil-blok.teneffus .zil-yay{stroke:var(--iyi); filter:drop-shadow(0 0 1.2rem var(--iyi-cizgi))}
.zil-blok.bitiyor .zil-yay{stroke:var(--alarm); filter:drop-shadow(0 0 1.4rem var(--alarm-cizgi))}
.zil-blok.bitiyor .zil-kalan{animation:nabiz 1s infinite}
@keyframes nabiz{0%,100%{opacity:1}50%{opacity:.45}}

.zil-ic{
  position:absolute; inset:0; padding:0 2rem; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.3rem; text-align:center;
}
.zil-kalan{
  font-family:var(--mono); font-size:5.6rem; font-weight:800; line-height:1;
  letter-spacing:-.06em;
}
.zil-birim{font-size:1.25rem; letter-spacing:.16em; color:var(--sis); text-transform:uppercase; white-space:nowrap}
.zil-alt{text-align:center}
.zil-durum{font-size:2.3rem; font-weight:800; font-stretch:104%; letter-spacing:-.015em}
.zil-sonraki{margin-top:.6rem; font-size:1.6rem; color:var(--sis); letter-spacing:.06em}

/* --- Donen bilgi slotu --- */
.bilgi-blok{
  flex:1; min-height:0; position:relative;
  border-radius:var(--kose-buyuk); background:var(--yuzey-1);
  border:1px solid var(--cizgi); overflow:hidden;
}
.bilgi-kart{
  position:absolute; inset:0; padding:2rem 2.2rem;
  display:flex; flex-direction:column;
  animation:kartGir .6s cubic-bezier(.16,1,.3,1) both;
}
@keyframes kartGir{from{opacity:0;transform:translateX(1.6rem)}to{opacity:1;transform:none}}
.bilgi-baslik{
  font-size:1.4rem; font-weight:900; letter-spacing:.28em; color:var(--vurgu-metin);
  text-transform:uppercase; margin-bottom:1.4rem; display:flex; gap:1rem; align-items:center;
}
.bilgi-baslik::after{content:""; flex:1; height:1px; background:var(--cizgi-guclu)}
.bilgi-satir{
  display:flex; align-items:baseline; gap:1.2rem; padding:.7rem 0;
  border-bottom:1px dashed var(--cizgi);
}
.bilgi-satir:last-child{border-bottom:0}
.bilgi-satir b{font-size:1.95rem; font-weight:700; letter-spacing:-.01em}
.bilgi-satir span{font-size:1.5rem; color:var(--sis); margin-left:auto; text-align:right}
.bilgi-bos{color:var(--sis); font-size:1.8rem; margin:auto; text-align:center}

/* --- Hava --- */
.hava-blok{
  border-radius:var(--kose-buyuk); padding:2rem 2.2rem;
  background:linear-gradient(140deg,var(--ikincil-hafif),var(--yuzey-1));
  border:1px solid var(--cizgi-guclu);
}
.hava-ust{display:flex; align-items:center; gap:1.6rem}
.hava-ikon{width:6.4rem; height:6.4rem; flex:0 0 auto; color:var(--vurgu-2)}
.hava-derece{font-family:var(--mono); font-size:5.4rem; font-weight:800; line-height:1; letter-spacing:-.05em}
.hava-yazi{display:flex; flex-direction:column; margin-left:auto; text-align:right}
.hava-yazi b{font-size:1.8rem; font-weight:700}
.hava-yazi span{font-size:1.4rem; color:var(--sis); letter-spacing:.1em; text-transform:uppercase}
.hava-gunler{display:flex; gap:1rem; margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--cizgi)}
.hava-gun{flex:1; text-align:center}
.hava-gun i{display:block; font-style:normal; font-size:1.3rem; color:var(--sis); letter-spacing:.14em; text-transform:uppercase}
.hava-gun b{display:block; margin-top:.5rem; font-family:var(--mono); font-size:1.9rem; font-weight:700}
.hava-gun s{display:block; text-decoration:none; font-family:var(--mono); font-size:1.5rem; color:var(--sis)}

/* ==========================================================================
   Alt bantlar
   ========================================================================== */
.bant{
  grid-area:bant; display:flex; flex-direction:column;
  border-top:1px solid var(--cizgi-guclu); background:var(--govde);
}
.bant-satir{display:flex; align-items:stretch; overflow:hidden}
.bant-duyuru{flex:1.55; background:linear-gradient(90deg,var(--vurgu-hafif),transparent 60%)}
.bant-haber{flex:1; border-top:1px solid var(--cizgi); background:var(--haber-bant, transparent)}

.bant-etiket{
  display:flex; align-items:center; padding:0 2.6rem; flex:0 0 auto;
  background:var(--vurgu); color:var(--vurgu-uzeri);
  font-size:1.7rem; font-weight:900; letter-spacing:.26em; font-stretch:110%;
}
.bant-etiket-ikincil{background:transparent; color:var(--yazi-soluk); border-right:1px solid var(--cizgi)}

.bant-pencere{flex:1; overflow:hidden; display:flex; align-items:center; position:relative}
.bant-akis{
  display:inline-flex; white-space:nowrap; will-change:transform;
  animation:kay linear infinite;
}
.bant-akis .oge{padding:0 4rem; display:inline-flex; align-items:center; gap:2.6rem}
.bant-akis .ayrac{width:.7rem; height:.7rem; border-radius:50%; background:var(--vurgu); opacity:.75}
.bant-duyuru .bant-akis{font-size:2.6rem; font-weight:700; font-stretch:102%; letter-spacing:-.01em}
.bant-haber .bant-akis{font-size:1.95rem; font-weight:500; color:var(--yazi-soluk)}
.bant-haber .ayrac{background:var(--ikincil)}
@keyframes kay{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================================
   Acil yayin
   ========================================================================== */
.acil{
  position:fixed; inset:0; z-index:70; display:grid; place-items:center;
  padding:10rem; text-align:center;
  background:#7A1408;
  background:radial-gradient(80rem 60rem at 50% 40%,var(--alarm),#2A0603 72%);
  animation:acilGir .5s ease both;
}
@keyframes acilGir{from{opacity:0}to{opacity:1}}
.acil-etiket{
  display:inline-block; padding:1rem 3rem; border-radius:999px; background:#FFFFFF;
  color:var(--alarm); font-size:2rem; font-weight:900; letter-spacing:.4em; margin-bottom:3.6rem;
  animation:nabiz 1.6s infinite;
}
.acil h1{
  margin:0; font-size:9rem; line-height:1.05; font-weight:900; font-stretch:110%;
  letter-spacing:-.03em; text-wrap:balance;
}
.acil h1{color:#FFFFFF}
.acil p{margin:3.4rem auto 0; font-size:3.4rem; line-height:1.4; max-width:34ch; color:rgba(255,255,255,.88)}

/* ==========================================================================
   Cevrimdisi rozeti
   ========================================================================== */
.cevrimdisi{
  position:fixed; z-index:65; left:50%; bottom:calc(var(--bant-yukseklik) + 2.4rem);
  transform:translateX(-50%);
  padding:1rem 2.4rem; border-radius:999px;
  background:var(--alarm-hafif); border:1px solid var(--alarm-cizgi);
  font-size:1.6rem; font-weight:600; letter-spacing:.1em; color:var(--alarm);
}

/* ==========================================================================
   Tam ekran düğmesi
   Kioskta ekranda durmasın diye normalde gizli; ilk açılışta ve fare
   kıpırdayınca belirir. Açılışta yazılı etiketle gelir ki fark edilsin.
   ========================================================================== */
body{cursor:none}
body.imlec-acik{cursor:default}

.tam-ekran{
  position:fixed; right:2.4rem; bottom:calc(var(--bant-yukseklik) + 2.4rem); z-index:66;
  display:flex; align-items:center; gap:1.2rem;
  height:6.6rem; padding:0 1.6rem; border-radius:var(--kose);
  cursor:pointer; font:inherit;
  border:1px solid var(--cizgi-guclu); background:var(--yuzey-3);
  color:var(--yazi); backdrop-filter:blur(8px);
  box-shadow:0 1.2rem 3.2rem rgba(0,0,0,.28);
  opacity:0; transform:translateY(1rem); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, background .2s, color .2s;
}
body.imlec-acik .tam-ekran{opacity:1; transform:none; pointer-events:auto}
.tam-ekran:hover{background:var(--vurgu); color:var(--vurgu-uzeri); border-color:var(--vurgu)}
.tam-ekran:focus-visible{
  opacity:1; transform:none; pointer-events:auto;
  outline:.3rem solid var(--vurgu); outline-offset:.3rem;
}

.te-ikon{width:3.4rem; height:3.4rem; flex:0 0 auto; display:block}
.te-ikon svg{width:100%; height:100%; display:block}
.tam-ekran .ikon-kapa{display:none}
.tam-ekran.acik .ikon-ac{display:none}
.tam-ekran.acik .ikon-kapa{display:block}

.te-yazi{
  font-size:1.9rem; font-weight:700; letter-spacing:.02em; white-space:nowrap;
  max-width:0; overflow:hidden; opacity:0;
  transition:max-width .3s ease, opacity .25s ease;
}
/* Açılışta ve fareyle üstüne gelince yazı açılır */
.tam-ekran.etiketli .te-yazi,
.tam-ekran:hover .te-yazi,
.tam-ekran:focus-visible .te-yazi{max-width:24rem; opacity:1}

/* ==========================================================================
   Eşleştirme ekranı
   ========================================================================== */
.esles{
  position:fixed; inset:0; z-index:75; display:grid; place-items:center;
  padding:8rem; text-align:center;
  background:radial-gradient(90rem 60rem at 50% 40%,var(--zemin-3),var(--zemin) 72%);
}
.esles-etiket{
  display:inline-block; padding:.9rem 2.6rem; border-radius:999px;
  border:1px solid var(--cizgi-guclu); background:var(--yuzey-2);
  font-size:1.6rem; font-weight:800; letter-spacing:.34em;
  text-transform:uppercase; color:var(--sis); margin-bottom:3.4rem;
}
.esles h1{
  margin:0; font-size:4.6rem; font-weight:700; font-stretch:102%;
  letter-spacing:-.025em; color:var(--yazi);
}
.esles-kod{
  margin:4rem 0; font-family:var(--mono); font-size:16rem; font-weight:800;
  line-height:1; letter-spacing:.12em; color:var(--vurgu);
  text-shadow:0 0 6rem var(--vurgu-isik);
}
.esles p{
  margin:0 auto; max-width:52ch; font-size:2.4rem; line-height:1.5; color:var(--sis);
}
.esles-sure{
  display:block; margin-top:3.4rem; font-family:var(--mono);
  font-size:1.8rem; color:var(--sis); letter-spacing:.1em;
}

/* ==========================================================================
   Dikey ekran (9:16)
   ========================================================================== */
@media (max-aspect-ratio:1/1){
  html{font-size:min(0.925vw, 0.52vh)}
  .tv{
    grid-template-columns:1fr;
    grid-template-rows:var(--ust-yukseklik) 1fr auto var(--bant-yukseklik);
    grid-template-areas:"ust" "sahne" "yan" "bant";
  }
  .sahne{border-right:0; border-bottom:1px solid var(--cizgi)}
  .yan{flex-direction:row; align-items:stretch; gap:1.6rem}
  .saat-blok{flex:0 0 auto; align-self:center}
  .zil-blok{flex:0 0 auto}
  .hava-blok{flex:1}
  .bilgi-blok{flex:1.2}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ==========================================================================
   BLOK YERLEŞİMİ  (Ayarlar › Görünüm › Yerleşim: "Keskin blok")
   Klasik okul panosu düzeni: sıfır köşe, dolgu renkli başlık şeritleri,
   kutucuklara ayrılmış yan panel, yüksek kontrastlı alt bantlar.
   ========================================================================== */
body.yerlesim-blok{
  --kose:0rem; --kose-buyuk:0rem;
}

/* --- üst şerit --- */
body.yerlesim-blok .ust{
  background:var(--govde);
  border-bottom:.4rem solid var(--vurgu);
}
body.yerlesim-blok .kanal-rozet{
  border-radius:0; background:var(--vurgu); color:var(--vurgu-uzeri);
  border-color:var(--vurgu);
}
body.yerlesim-blok .kanal-rozet .nokta{background:var(--vurgu-uzeri)}
body.yerlesim-blok .pip{border-radius:0}

/* --- sahne başlığı dolgu şerit olur --- */
body.yerlesim-blok .s-kafa{
  margin-bottom:2.8rem; gap:0;
}
body.yerlesim-blok .s-etiket{
  background:var(--vurgu); color:var(--vurgu-uzeri);
  padding:1rem 2.4rem; letter-spacing:.24em;
}
body.yerlesim-blok .s-kafa::after{
  height:.4rem; background:var(--vurgu); opacity:.32;
}
body.yerlesim-blok .s-kafa-sag{
  background:var(--yuzey-3); padding:1rem 2rem; color:var(--yazi);
}

/* --- yan panel: her kutu başlık şeridiyle --- */
body.yerlesim-blok .yan{gap:1.2rem; padding:1.2rem}
body.yerlesim-blok .saat-blok{
  background:var(--govde); border:1px solid var(--cizgi-guclu); padding:1.4rem 0 1.2rem;
}
body.yerlesim-blok .zil-blok,
body.yerlesim-blok .bilgi-blok,
body.yerlesim-blok .hava-blok{
  border-radius:0; border:1px solid var(--cizgi-guclu); background:var(--govde);
}
body.yerlesim-blok .bilgi-kart{padding:0}
body.yerlesim-blok .bilgi-baslik{
  background:var(--vurgu); color:var(--vurgu-uzeri);
  margin:0 0 1.4rem; padding:1rem 1.6rem; font-size:1.5rem; letter-spacing:.16em;
  justify-content:center; text-align:center;
}
body.yerlesim-blok .bilgi-baslik::after{display:none}
body.yerlesim-blok .bilgi-satir{padding:.7rem 2rem; justify-content:center; text-align:center}
body.yerlesim-blok .bilgi-satir span{margin-left:0}
body.yerlesim-blok .zil-durum{
  background:var(--yuzey-3); padding:.8rem 1.6rem; width:100%; text-align:center;
}

/* --- içerik blokları --- */
body.yerlesim-blok .dg-kart,
body.yerlesim-blok .nobet-kart,
body.yerlesim-blok .gs-kutu,
body.yerlesim-blok .kadro-kart,
body.yerlesim-blok .prog-satir,
body.yerlesim-blok .basari-derece{border-radius:0}
body.yerlesim-blok .prog-satir.simdi{
  background:var(--vurgu); border-color:var(--vurgu);
}
body.yerlesim-blok .prog-satir.simdi .ad,
body.yerlesim-blok .prog-satir.simdi .saat,
body.yerlesim-blok .prog-satir.simdi .rozet{color:var(--vurgu-uzeri)}
body.yerlesim-blok .dg-avatar,
body.yerlesim-blok .kadro-avatar{border-radius:0}
body.yerlesim-blok .basari-derece{
  background:var(--vurgu); color:var(--vurgu-uzeri); border-color:var(--vurgu);
}

/* --- alt bantlar: dolu renk, sert kenar --- */
body.yerlesim-blok .bant{border-top:.4rem solid var(--vurgu)}
body.yerlesim-blok .bant-duyuru{
  background:var(--vurgu-2);
  color:#1A1206;
}
body.yerlesim-blok .bant-duyuru .bant-akis{color:#1A1206}
body.yerlesim-blok .bant-duyuru .ayrac{background:#1A1206}
body.yerlesim-blok .bant-etiket{background:var(--vurgu); color:var(--vurgu-uzeri)}
body.yerlesim-blok .bant-haber{background:var(--haber-bant, var(--alarm))}
body.yerlesim-blok .bant-haber .bant-akis{color:#FFFFFF; font-weight:600}
body.yerlesim-blok .bant-haber .ayrac{background:rgba(255,255,255,.8)}
body.yerlesim-blok .bant-etiket-ikincil{
  background:rgba(0,0,0,.28); color:#FFFFFF; border-right:0;
}

/* --- galeri bandı tam dolgu --- */
body.yerlesim-blok .galeri-bant{
  border-left:.6rem solid #FFFFFF;
}
body.yerlesim-blok .tam-ekran{border-radius:0}

/* ==========================================================================
   Sahne: Ders dağılımı — o anki derste hangi sınıfta ne var
   ========================================================================== */
.dd-tablo{width:100%; border-collapse:collapse; table-layout:fixed}
.dd-tablo th{
  text-align:left; padding:1.2rem 2rem;
  font-size:1.6rem; font-weight:900; letter-spacing:.24em; text-transform:uppercase;
  color:var(--vurgu-metin); border-bottom:.3rem solid var(--vurgu-cizgi);
}
.dd-tablo td{
  padding:1.5rem 2rem; border-bottom:1px solid var(--cizgi);
  font-size:2.8rem; font-weight:600; letter-spacing:-.015em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dd-tablo tbody tr:nth-child(odd){background:var(--yuzey-1)}
.dd-tablo tbody tr:last-child td{border-bottom:0}
.dd-tablo .dd-sinif{
  width:18%; font-family:var(--mono); font-weight:800;
  color:var(--vurgu-metin); letter-spacing:-.03em;
}
.dd-tablo .dd-ders{
  width:42%; font-weight:800; color:var(--yazi);
  white-space:normal; line-height:1.2;      /* uzun ders adları kesilmesin */
}
.dd-tablo .dd-ogretmen{width:26%; color:var(--yazi-soluk); font-size:2.4rem}
.dd-tablo .dd-derslik{
  width:16%; text-align:right; font-family:var(--mono);
  font-size:2.2rem; color:var(--ikincil);
}
body.yerlesim-blok .dd-tablo th{
  background:var(--vurgu); color:var(--vurgu-uzeri); border-bottom:0;
}

/* ==========================================================================
   Abonelik süresi doldu uyarısı
   ========================================================================== */
.abonelik-uyari{
  position:fixed; inset:0; z-index:80; display:grid; place-items:center;
  padding:10rem; text-align:center;
  background:radial-gradient(80rem 60rem at 50% 40%,var(--zemin-3),var(--zemin) 72%);
}
.abonelik-etiket{
  display:inline-block; padding:1rem 3rem; border-radius:var(--kose);
  background:var(--alarm); color:#FFFFFF;
  font-size:1.8rem; font-weight:900; letter-spacing:.34em;
  text-transform:uppercase; margin-bottom:3.4rem;
}
.abonelik-uyari h1{
  margin:0; font-size:7.2rem; line-height:1.08; font-weight:900;
  font-stretch:108%; letter-spacing:-.03em; text-wrap:balance;
}
.abonelik-uyari p{
  margin:3rem auto 0; font-size:3.4rem; line-height:1.4;
  max-width:38ch; color:var(--yazi-soluk);
}
.abonelik-temsilci{
  display:block; margin-top:4rem; font-size:2.6rem; font-weight:700;
  color:var(--vurgu-metin); letter-spacing:.02em;
}