/* DİJİTAL PANO — TV ekranı stilleri (1920×1080 tabanlı, --olcek ile ölçeklenir) */
:root {
  --olcek: 1;          /* yazı ölçeği dahil (JS) */
  --olcek-yer: 1;      /* yalnız ekran ölçeği: boşluk, köşe */
  --renk: #1565c0;
  --renk-yazi: #7aa7e0;
  --baslik-yazi: #fff;
  --arka: #0b1220;
  --arka2: #1a2b4c;
  --kart: rgba(255, 255, 255, 0.06);
  --kenar: rgba(255, 255, 255, 0.10);
  --yazi: #f5f7fb;
  --isaret: #ffd54f;
  --ok: #69f0ae;
  --uyari: #ff5252;
  --simdi: rgba(255, 255, 255, 0.08);
  --kutu: rgba(0, 0, 0, 0.35);
  --desen-renk: rgba(255, 255, 255, 0.06);
  --bosluk-px: 12px;
  --kose-px: 16px;
  --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bosluk: calc(var(--bosluk-px) * var(--olcek-yer));
  --yuvarlak: calc(var(--kose-px) * var(--olcek-yer));
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: var(--arka); color: var(--yazi);
  font-family: var(--font);
  overflow: hidden; cursor: none;
}
#pano {
  display: grid;
  width: 100vw; height: 100vh;
  padding: var(--bosluk); gap: var(--bosluk);
}
/* Dikey ekran (telefon): pano 90° döndürülür, boyutları JS verir (genişlik = pencere yüksekliği) */
html.dondur #pano {
  position: absolute; top: 0; left: 0;
  transform-origin: 0 0;
  transform: rotate(90deg) translateY(-100%);
}
.bolme {
  display: flex; flex-direction: column;
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak);
  overflow: hidden; min-width: 0; min-height: 0;
}
.bolme.tur-bos { background: transparent; border-color: transparent; }
.bolme-baslik {
  flex: 0 0 auto;
  background: var(--renk); color: var(--baslik-yazi);
  font-size: calc(30px * var(--olcek)); font-weight: 700; letter-spacing: 0.02em;
  padding: calc(8px * var(--olcek)) calc(20px * var(--olcek));
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bolme-icerik {
  flex: 1 1 auto; min-height: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: calc(14px * var(--olcek));
}
.bolme-kayan .bolme-icerik, .tur-video .bolme-icerik, .tur-video_sirali .bolme-icerik, .tur-resim .bolme-icerik,
.tur-instagram .bolme-icerik, .tur-link .bolme-icerik { padding: 0; }
.bolme-kayan { border: none; background: transparent; }
.bos-mesaj { opacity: 0.6; text-align: center; font-size: calc(28px * var(--olcek)); }
.bos-mesaj small { font-size: 0.6em; }

/* Logo */
.logo-kutu { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; height: 100%; min-height: 0; }
.logo-img { flex: 1 1 0; min-height: 0; width: auto; max-width: 90%; object-fit: contain; margin-bottom: 0.25em; }
.logo-kutu.sadece-logo .logo-img { flex: 1 1 auto; max-height: 100%; margin: 0; }
.okul-ad { flex: 0 0 auto; max-width: 100%; overflow: hidden; }
.okul-slogan { flex: 0 0 auto; }
.okul-ad { font-weight: 800; line-height: 1.15; }
.okul-slogan { font-size: 0.55em; opacity: 0.8; margin-top: 0.3em; }

/* Tarih / Saat */
.tarih { width: 100%; text-align: center; font-weight: 600; line-height: 1.2; }
.saat { width: 100%; text-align: center; white-space: nowrap; font-weight: 800; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; line-height: 1; }

/* Dikey kaydırma: içerik sığmazsa yavaşça aşağı-yukarı kayar (JS --kay ve --sure verir) */
.kaydir { flex: 0 1 auto; min-height: 0; width: 100%; overflow: hidden; }
.kaydir.yatay { flex: 0 0 auto; white-space: nowrap; }
.kaydir.yatay .kaydir-ic { display: inline-block; white-space: nowrap; }
.kaydir .ayrac { opacity: 0.5; padding: 0 0.3em; }
.kaydir-ic.kayiyor { animation: dikey-kay var(--sure, 20s) ease-in-out infinite alternate; }
.kaydir-ic.kayiyor-x { animation: yatay-kay var(--sure, 20s) ease-in-out infinite alternate; }
@keyframes dikey-kay { 0%, 18% { transform: translateY(0); } 82%, 100% { transform: translateY(var(--kay, 0)); } }
@keyframes yatay-kay { 0%, 18% { transform: translateX(0); } 82%, 100% { transform: translateX(var(--kay, 0)); } }
.kaydir.akan { flex: 1 1 auto; }
.kaydir-ic.akiyor-yukari { animation: akan-yukari var(--sure, 30s) linear infinite; }
.kaydir-ic.akiyor-asagi { animation: akan-asagi var(--sure, 30s) linear infinite; }
@keyframes akan-yukari { from { transform: translateY(0); } to { transform: translateY(var(--kay, -100%)); } }
@keyframes akan-asagi { from { transform: translateY(var(--kay, -100%)); } to { transform: translateY(0); } }
.akan-satir { padding: 0.12em 0.3em; border-bottom: 1px solid var(--kenar); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akan-satir b { display: inline-block; min-width: 2.6em; color: var(--isaret); }

/* Nöbet */
.nobet { width: 100%; height: 100%; display: flex; flex-direction: column; }
.nobet-gun { font-weight: 800; color: var(--renk-yazi); margin-bottom: 0.3em; text-transform: uppercase; font-size: 0.8em; }
.nobet-tablo { width: 100%; border-collapse: collapse; }
.nobet-tablo td { padding: 0.18em 0.4em; border-bottom: 1px solid var(--kenar); vertical-align: top; line-height: 1.25; }
.nobet-yer { font-weight: 700; white-space: nowrap; width: 1%; opacity: 0.9; }
.nobet-ogr { font-weight: 500; }

/* Sınıf ders programı */
.ders { width: 100%; height: 100%; display: flex; flex-direction: column; }
.ders-ust { flex: 0 0 auto; font-size: 0.8em; color: var(--renk-yazi); margin-bottom: 0.3em; }
.ders-ust:empty { display: none; }
.ders-tablo { width: 100%; border-collapse: collapse; font-size: 0.85em; }
.ders-tablo th, .ders-tablo td { padding: 0.15em 0.35em; border-bottom: 1px solid var(--kenar); text-align: left; vertical-align: top; line-height: 1.2; }
.ders-tablo thead th { font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; border-bottom: 2px solid var(--kenar); }
.ders-tablo thead th small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; }
.ders-tablo tbody th { font-weight: 800; white-space: nowrap; width: 1%; }
.ders-tablo td { border-left: 1px solid var(--kenar); }
.ders-tablo .simdi { background: var(--simdi); }
.ders-tablo thead th.simdi { color: var(--isaret); opacity: 1; }
.ders-ad { display: block; font-weight: 600; }
.ders-ogr { display: block; font-size: 0.72em; opacity: 0.75; }
.ders-yok { opacity: 0.35; text-align: center; }
.simdi-gorunum .ders-ad { font-size: 1.05em; }

/* Zil: teneffüse / derse kalan süre */
.zil { width: 100%; text-align: center; line-height: 1.15; }
.zil-ust { font-size: 0.42em; font-weight: 600; opacity: 0.9; }
.zil-etiket { font-size: 0.48em; font-weight: 800; color: var(--vurgu, #ff5252); margin: 0.1em 0; }
.zil-etiket:empty { display: none; }
.zil-sure { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zil[data-durum="teneffus"] .zil-etiket { color: var(--ok); }
.zil[data-durum="bitti"] .zil-ust { font-size: 0.6em; }

/* Sınav tarihleri / belirli günler (ortak tablo) */
.sinav, .belirli { width: 100%; height: 100%; display: flex; flex-direction: column; }
.sinav-tablo { width: 100%; border-collapse: collapse; }
.sinav-tablo td { padding: 0.2em 0.4em; border-bottom: 1px solid var(--kenar); vertical-align: middle; line-height: 1.25; }
.sinav-tarih { white-space: nowrap; width: 1%; opacity: 0.85; font-size: 0.85em; }
.sinav-ad { font-weight: 600; }
.sinav-sinif { display: block; font-size: 0.7em; opacity: 0.7; font-weight: 400; }
.sinav-kalan { white-space: nowrap; width: 1%; text-align: right; font-weight: 800; font-size: 0.8em; color: var(--isaret); }
.sinav-tablo tr.bugun td { background: var(--simdi); }
.sinav-tablo tr.bugun .sinav-kalan { color: var(--uyari); }

/* RSS */
.rss { width: 100%; height: 100%; display: flex; flex-direction: column; }
.rss-liste { list-style: none; margin: 0; padding: 0; }
.rss-liste li { padding: 0.25em 0; border-bottom: 1px solid var(--kenar); line-height: 1.25; }
.rss-liste li:last-child { border-bottom: 0; }
.rss-liste .rss-tarih { display: block; font-size: 0.6em; opacity: 0.65; }
.rss-liste .rss-baslik { display: block; font-weight: 700; }
.rss-liste .rss-ozet { display: block; font-size: 0.7em; opacity: 0.8; margin-top: 0.1em; }
.rss-slayt { background: transparent; }
.rss-oge { display: flex; align-items: center; justify-content: center; padding: calc(24px * var(--olcek)); }
.rss-kart { text-align: center; max-width: 100%; }
.rss-kart .rss-tarih { font-size: 0.6em; opacity: 0.65; margin-bottom: 0.3em; }
.rss-kart .rss-baslik { font-weight: 800; font-size: 1.15em; line-height: 1.2; }
.rss-kart .rss-ozet { font-size: 0.75em; opacity: 0.85; margin-top: 0.5em; line-height: 1.35; }

/* Metin */
.metin { width: 100%; height: 100%; display: flex; flex-direction: column; line-height: 1.35; overflow: hidden; }
.metin .kaydir-ic { width: 100%; }
.metin p { margin: 0 0 0.5em; }
.metin ul, .metin ol { text-align: left; margin: 0.3em 0; padding-left: 1.3em; }

/* Slayt (resim / instagram) */
.slayt { position: absolute; inset: 0; background: transparent; }   /* boş kenarlarda tema ve arka plan görünür */
.slayt-oge { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; }
.slayt-oge.aktif { opacity: 1; }
.slayt-oge img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ig-cerceve { width: 100%; height: 100%; border: 0; background: #fff; }
.ig-oge img { object-fit: cover; }
.ig-aciklama {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  color: #fff; padding: calc(40px * var(--olcek)) calc(20px * var(--olcek)) calc(16px * var(--olcek));
  font-size: calc(24px * var(--olcek)); line-height: 1.3;
}

/* Video */
.video-cerceve, .video-dosya { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; }
.video-sira { position: absolute; inset: 0; background: #000; }

/* Link */
.link-sarici { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.link-cerceve { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; }

/* Kayan yazı */
.kayan {
  position: absolute; inset: 0; display: flex; align-items: center;
  overflow: hidden; white-space: nowrap; font-weight: 700; border-radius: var(--yuvarlak);
}
.kayan-ic { display: inline-block; will-change: transform; transform: translateX(100vw); }
.kayan-ic.akiyor { animation: kayan-hareket var(--sure, 20s) linear infinite; }
@keyframes kayan-hareket { from { transform: translateX(var(--bas, 100vw)); } to { transform: translateX(var(--son, -100%)); } }

/* Hava */
.hava { width: 100%; text-align: center; line-height: 1.2; }
.hava-yer { font-weight: 700; opacity: 0.85; margin-bottom: 0.2em; }
.hava-ana { display: inline-flex; align-items: center; justify-content: center; gap: 0.3em; white-space: nowrap; }
.hava-simge { font-size: 2.2em; line-height: 1; }
.hava-derece { font-size: 2.6em; font-weight: 800; line-height: 1; }
.hava-aciklama { font-size: 1em; margin-top: 0.2em; }
.hava-alt { font-size: 0.6em; opacity: 0.75; margin-top: 0.4em; }

/* Yemek */
.yemek { width: 100%; height: 100%; display: flex; flex-direction: column; }
.yemek-liste { list-style: none; margin: 0; padding: 0; }
.yemek-liste li { padding: 0.18em 0; border-bottom: 1px solid var(--kenar); line-height: 1.3; }
.yemek-liste li:last-child { border-bottom: 0; }
.yemek-liste li.yemek-toplam { font-weight: 800; color: var(--isaret); border-top: 2px solid var(--kenar); margin-top: 0.15em; }

/* Geri sayım */
.gerisayim { width: 100%; text-align: center; }
.gs-etiket { font-size: 0.5em; font-weight: 700; margin-bottom: 0.4em; opacity: 0.9; }
.gs-kutular { display: inline-flex; flex-wrap: nowrap; justify-content: center; gap: 0.3em; }
.gs-kutu { flex: 0 0 auto; background: var(--kutu); border-radius: 0.2em; padding: 0.2em 0.35em; min-width: 2.2em; }
.gs-sayi { display: block; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.gs-ad { display: block; font-size: 0.32em; text-transform: uppercase; opacity: 0.75; letter-spacing: 0.08em; }
.gs-bitti { font-size: 0.7em; font-weight: 800; color: var(--isaret); }
.gerisayim.doldu .gs-kutular { display: none; }

/* =========================================================
 *  GÖRÜNÜM / TEMA  (değişkenler index.php'de inc/tema.php ile basılır)
 * ========================================================= */
body.tema-kalin { font-weight: 600; }
body.tema-kalin .bolme { border-width: calc(2px * var(--olcek-yer)); }

/* Arka plan: desen */
body.arka-desen { background-color: var(--arka); }
body.desen-nokta { background-image: radial-gradient(var(--desen-renk) 0 calc(2px * var(--olcek-yer)), transparent calc(2.6px * var(--olcek-yer))); background-size: calc(30px * var(--olcek-yer)) calc(30px * var(--olcek-yer)); }
body.desen-cizgi { background-image: repeating-linear-gradient(45deg, var(--desen-renk) 0 calc(2px * var(--olcek-yer)), transparent calc(2px * var(--olcek-yer)) calc(24px * var(--olcek-yer))); }
body.desen-izgara { background-image: linear-gradient(var(--desen-renk) 1px, transparent 1px), linear-gradient(90deg, var(--desen-renk) 1px, transparent 1px); background-size: calc(44px * var(--olcek-yer)) calc(44px * var(--olcek-yer)); }

/* Arka plan: fotoğraf (bulanık + karartılmış, inc/tema.php adres ve filtreyi verir) */
body.arka-foto::before {
  content: ""; position: fixed; inset: calc(-60px * var(--olcek-yer)); z-index: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
#pano { position: relative; z-index: 1; }

/* Kart stilleri */
body.kart-cam .bolme:not(.tur-bos):not(.bolme-kayan) {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(calc(14px * var(--olcek-yer))) saturate(1.2);
  backdrop-filter: blur(calc(14px * var(--olcek-yer))) saturate(1.2);
}
body.kart-cam.tema-acik .bolme:not(.tur-bos):not(.bolme-kayan) { background: rgba(255, 255, 255, 0.55); border-color: rgba(255, 255, 255, 0.8); }
body.kart-cerceve .bolme:not(.tur-bos):not(.bolme-kayan) { border: calc(3px * var(--olcek-yer)) solid var(--renk); }
body.kart-golge .bolme:not(.tur-bos):not(.bolme-kayan) {
  border-color: transparent;
  box-shadow: 0 calc(10px * var(--olcek-yer)) calc(30px * var(--olcek-yer)) rgba(0, 0, 0, 0.45);
}
body.kart-golge:not(.tema-acik) .bolme:not(.tur-bos):not(.bolme-kayan) { background: rgba(255, 255, 255, 0.08); }
body.kart-golge.tema-acik .bolme:not(.tur-bos):not(.bolme-kayan) { box-shadow: 0 calc(8px * var(--olcek-yer)) calc(26px * var(--olcek-yer)) rgba(15, 23, 42, 0.16); }

/* ---- Özel gün efektleri ---- */
.efekt-filigran {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; opacity: 0.07;
}
.efekt-filigran svg { width: 62vmin; height: 62vmin; }
body.tema-acik .efekt-filigran { color: #e30a17; opacity: 0.08; }
.efekt-serit {
  position: fixed; left: 0; right: 0; top: 0; z-index: 3; pointer-events: none;
  height: calc(7px * var(--olcek-yer));
  background: repeating-linear-gradient(90deg, #e30a17 0 80px, #ffffff 80px 160px);
  background-size: 320px 100%;
  animation: serit-ak 8s linear infinite;
}
@keyframes serit-ak { from { background-position: 0 0; } to { background-position: 320px 0; } }
/* Uçuşan efektler (yağmur, kar, yaprak, konfeti, ışıltı, bayrak, sis): pano.js tuvale çizer */
#efekt-tuval { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#efekt-tuval.on { z-index: 4; }
#efekt-simsek { position: fixed; inset: 0; z-index: 5; pointer-events: none; background: #fff; opacity: 0; }
html.gece #efekt-tuval, html.gece #efekt-simsek { display: none; }

/* 10 Kasım saygı duruşu */
#saygi-durusu {
  position: fixed; inset: 0; z-index: 60; display: none;
  align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(circle at 50% 45%, #1c1c1c, #000 70%); color: #f0f0f0;
}
#saygi-durusu.goster { display: flex; animation: saygi-gel 1.2s ease; }
@keyframes saygi-gel { from { opacity: 0; } to { opacity: 1; } }
.saygi-ic { padding: 4vmin; }
.saygi-tarih { font-size: calc(40px * var(--olcek)); letter-spacing: 0.12em; opacity: 0.75; }
.saygi-ad { font-family: Georgia, "Times New Roman", serif; font-size: calc(110px * var(--olcek)); font-weight: 400; margin: 0.25em 0; letter-spacing: 0.02em; }
.saygi-metin { font-size: calc(46px * var(--olcek)); opacity: 0.85; }

/* Gece modu / ekran koruyucu */
#gece-ekran { position: fixed; inset: 0; z-index: 50; background: #000; display: none; }
html.gece #gece-ekran { display: block; }
.gece-saat {
  position: absolute; left: 40%; top: 45%;
  color: rgba(255, 255, 255, 0.45); font-weight: 300; white-space: nowrap;
  font-size: calc(64px * var(--olcek-yer)); font-variant-numeric: tabular-nums;
  transition: left 3s ease, top 3s ease;
}

/* =========================================================
 *  ÖĞRENCİ İÇERİKLERİ
 * ========================================================= */
.tur-nasa .bolme-icerik { padding: 0; }
.sigdir { width: 100%; max-height: 100%; }

/* Günün sorusu */
.soru { text-align: center; line-height: 1.3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35em; }
.soru-ust { font-size: 0.55em; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--renk-yazi); }
.soru-metin { font-weight: 700; }
.soru-ipucu { font-size: 0.6em; opacity: 0.75; }
.soru-cevap { display: none; font-size: 0.85em; font-weight: 700; color: var(--isaret); background: var(--simdi); border-radius: 0.4em; padding: 0.25em 0.6em; }
.soru.acik .soru-ipucu { display: none; }
.soru.acik .soru-cevap { display: block; animation: cevap-gel 0.8s ease; }
@keyframes cevap-gel { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
.soru-dun { font-size: 0.55em; opacity: 0.85; border-top: 1px solid var(--kenar); padding-top: 0.4em; margin-top: 0.2em; }
.soru-dun b { color: var(--isaret); }
/* Resimli soru: geniş bölmede resim solda, dar bölmede üstte */
.soru-resimli { flex-direction: row; height: 100%; gap: calc(16px * var(--olcek)); }
.soru-foto { flex: 0 0 46%; height: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; }
.soru-foto img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: calc(10px * var(--olcek)); }
.soru-govde { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35em; }
.soru-resimli.dikey { flex-direction: column; gap: calc(8px * var(--olcek)); }
.soru-resimli.dikey .soru-foto { flex: 1 1 0; width: 100%; height: auto; min-height: 45%; }
.soru-resimli.dikey .soru-foto img { height: 100%; }
.soru-resimli.dikey .soru-govde { flex: 0 1 auto; width: 100%; min-height: 0; }

/* Biliyor muydunuz / kelime / söz (slayt kartları) */
.bilgi-oge, .kelime-oge { display: flex; align-items: center; justify-content: center; padding: calc(14px * var(--olcek)) calc(20px * var(--olcek)); }
.bilgi-kart, .kelime-kart { text-align: center; line-height: 1.35; }
.bilgi-etiket, .kelime-ust { font-size: 0.55em; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--renk-yazi); margin-bottom: 0.4em; }
.bilgi-tarih .bilgi-etiket { color: var(--isaret); }
.bilgi-metin { font-weight: 600; }
.kelime-ana { font-size: 1.9em; font-weight: 800; line-height: 1.1; letter-spacing: 0.01em; }
.kelime-anlam { font-size: 0.95em; color: var(--isaret); font-weight: 700; margin: 0.1em 0 0.4em; }
.kelime-ornek { font-size: 0.7em; opacity: 0.9; }
.kelime-ornek i { display: block; opacity: 0.75; margin-top: 0.15em; }
.soz-metin { font-size: 1.2em; font-weight: 800; line-height: 1.25; }
.soz-anlam { font-size: 0.7em; opacity: 0.85; margin-top: 0.5em; }

/* NASA */
.nasa { position: absolute; inset: 0; background: #000; overflow: hidden; }
.nasa-resim { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nasa-alt {
  position: absolute; left: 0; right: 0; bottom: 0; color: #fff; line-height: 1.3;
  background: linear-gradient(transparent, rgba(0,0,0,0.88) 35%);
  padding: calc(50px * var(--olcek)) calc(20px * var(--olcek)) calc(14px * var(--olcek));
}
.nasa-baslik { font-weight: 800; }
.nasa-aciklama { font-size: 0.72em; opacity: 0.9; margin-top: 0.2em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nasa-kaynak { font-size: 0.5em; opacity: 0.6; margin-top: 0.35em; }

/* QR anket */
.anket { width: 100%; height: 100%; display: flex; align-items: center; gap: 0.8em; }
.anket-qr-kutu { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.3em; max-width: 42%; }
.anket-qr { background: #fff; padding: 0.3em; border-radius: 0.3em; line-height: 0; }
.anket-qr svg { display: block; width: var(--qr, 6em); height: var(--qr, 6em); }
.anket-qr-not { font-size: 0.55em; font-weight: 700; text-align: center; }
.anket-qr-adres { font-size: 0.4em; opacity: 0.7; word-break: break-all; text-align: center; }
.anket-sag { flex: 1 1 auto; min-width: 0; }
.anket-soru { font-weight: 800; line-height: 1.2; margin-bottom: 0.45em; }
.anket-sec { margin-bottom: 0.35em; }
.anket-sec-ust { display: flex; justify-content: space-between; gap: 0.5em; font-size: 0.75em; font-weight: 600; }
.anket-sec-oy { color: var(--isaret); font-weight: 800; }
.anket-cubuk { height: 0.42em; background: var(--simdi); border-radius: 0.21em; overflow: hidden; margin-top: 0.1em; }
.anket-cubuk i { display: block; height: 100%; background: var(--renk); border-radius: inherit; transition: width 1.2s ease; min-width: 0.21em; }
.anket-sec.onde .anket-cubuk i { background: var(--isaret); }
.anket-toplam { font-size: 0.55em; opacity: 0.7; margin-top: 0.3em; }

/* Doğum günü */
.dogum { width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; }
.dogum-ust { flex: 0 0 auto; font-weight: 800; color: var(--isaret); text-align: center; margin-bottom: 0.3em; }
.dogum .bos-mesaj { margin: auto; }
.dogum-liste { list-style: none; margin: 0; padding: 0; text-align: center; }
.dogum-liste li { padding: 0.15em 0; border-bottom: 1px solid var(--kenar); }
.dogum-liste li:last-child { border-bottom: 0; }
.dogum-ad { font-weight: 700; }
.dogum-sinif { font-size: 0.7em; background: var(--simdi); border-radius: 0.3em; padding: 0.05em 0.35em; margin-left: 0.2em; vertical-align: 0.1em; }
.dogum-liste small { font-size: 0.6em; opacity: 0.7; }
.dogum-balon { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dogum-balon span { position: absolute; bottom: -1.5em; font-size: 1.1em; opacity: 0.55; animation: balon-uc 14s linear infinite; }
.dogum-balon span:nth-child(1) { left: 6%; }
.dogum-balon span:nth-child(2) { left: 86%; animation-delay: -5s; animation-duration: 17s; }
.dogum-balon span:nth-child(3) { left: 48%; animation-delay: -10s; animation-duration: 20s; }
@keyframes balon-uc { from { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-60vh) rotate(8deg); } to { transform: translateY(-120vh) rotate(-8deg); } }

/* Başarılar duvarı */
.basari-oge { display: flex; align-items: stretch; }
.basari-kart { display: flex; width: 100%; height: 100%; align-items: center; gap: calc(18px * var(--olcek)); padding: calc(14px * var(--olcek)) calc(20px * var(--olcek)); }
.basari-foto { flex: 0 0 42%; height: 100%; display: flex; align-items: center; justify-content: center; }
.basari-foto img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: calc(12px * var(--olcek)); border: calc(4px * var(--olcek)) solid var(--isaret); box-shadow: 0 0 calc(24px * var(--olcek)) rgba(255, 213, 79, 0.35); }
.basari-metin { flex: 1 1 auto; min-width: 0; text-align: center; line-height: 1.25; }
.basari-rozet { font-size: 1.6em; line-height: 1; animation: rozet-parla 2.4s ease-in-out infinite; }
@keyframes rozet-parla { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.basari-baslik { font-size: 1.15em; font-weight: 800; color: var(--isaret); margin: 0.15em 0; }
.basari-kisi { font-weight: 700; }
.basari-kisi span { font-size: 0.7em; opacity: 0.8; }
.basari-aciklama { font-size: 0.7em; opacity: 0.88; margin-top: 0.35em; }
.basari-tebrik { font-size: 0.6em; font-weight: 700; opacity: 0.75; margin-top: 0.5em; }
.basari-kart.dikey { flex-direction: column; gap: calc(10px * var(--olcek)); }
.basari-kart.dikey .basari-foto { flex: 0 0 46%; width: 100%; height: auto; min-height: 0; }
.basari-kart.dikey .basari-metin { flex: 1 1 0; min-height: 0; }

/* =========================================================
 *  HAREKETLİ ARKA PLANLAR (aurora, uzay, okyanus, lav)
 * ========================================================= */
.arka-anim { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
html.gece .arka-anim { display: none; }
/* Aurora: yavaşça kayan, büyüyüp küçülen renk perdeleri */
.arka-aurora i {
  position: absolute; width: 90vw; height: 70vh; border-radius: 50%; opacity: 0.62;
  background: radial-gradient(ellipse at center, var(--au1) 0%, transparent 65%);
  animation: aurora-kay 26s ease-in-out infinite alternate;
}
.arka-aurora i:nth-child(1) { left: -20vw; top: -25vh; }
.arka-aurora i:nth-child(2) { right: -25vw; top: -10vh; background: radial-gradient(ellipse at center, var(--au2) 0%, transparent 65%); animation-duration: 32s; animation-delay: -8s; }
.arka-aurora i:nth-child(3) { left: 10vw; bottom: -35vh; background: radial-gradient(ellipse at center, var(--au3) 0%, transparent 65%); animation-duration: 38s; animation-delay: -16s; }
.arka-aurora i:nth-child(4) { right: 0; bottom: -20vh; width: 60vw; background: radial-gradient(ellipse at center, var(--au4) 0%, transparent 65%); animation-duration: 29s; animation-delay: -4s; }
@keyframes aurora-kay {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { transform: translate(12vw, 8vh) scale(1.25) rotate(12deg); }
  100% { transform: translate(-6vw, 14vh) scale(0.9) rotate(-8deg); }
}
body.tema-acik .arka-aurora i { opacity: 0.4; }
/* Uzay: yıldızlar tuvale çizilir */
.arka-uzay canvas { width: 100%; height: 100%; display: block; }
/* Okyanus: alt kenarda üç katman dalga */
.arka-okyanus .dalga { position: absolute; left: 0; bottom: 0; width: 200%; fill: var(--renk); }
.arka-okyanus .dalga1 { height: 38vh; opacity: 0.22; animation: dalga-kay 22s linear infinite; }
.arka-okyanus .dalga2 { height: 30vh; opacity: 0.28; animation: dalga-kay 15s linear infinite reverse; }
.arka-okyanus .dalga3 { height: 22vh; opacity: 0.36; animation: dalga-kay 10s linear infinite; }
@keyframes dalga-kay { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Lav lambası: yavaşça yükselip alçalan, şekil değiştiren kabarcıklar */
.arka-lav i {
  position: absolute; width: 26vmin; height: 26vmin; opacity: 0.4;
  background: radial-gradient(circle at 35% 35%, var(--au2), var(--au1) 70%);
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  animation: lav-yuksel 30s ease-in-out infinite alternate, lav-sekil 11s ease-in-out infinite alternate;
}
.arka-lav i:nth-child(1) { left: 6%; top: 70%; }
.arka-lav i:nth-child(2) { left: 28%; top: 85%; width: 34vmin; height: 34vmin; animation-duration: 38s, 13s; animation-delay: -12s, -3s; background: radial-gradient(circle at 35% 35%, var(--au3), var(--au1) 70%); }
.arka-lav i:nth-child(3) { left: 52%; top: 60%; width: 20vmin; height: 20vmin; animation-duration: 26s, 9s; animation-delay: -5s, -6s; }
.arka-lav i:nth-child(4) { left: 70%; top: 90%; width: 30vmin; height: 30vmin; animation-duration: 34s, 12s; animation-delay: -20s, -2s; background: radial-gradient(circle at 35% 35%, var(--au4), var(--au1) 70%); }
.arka-lav i:nth-child(5) { left: 86%; top: 65%; width: 18vmin; height: 18vmin; animation-duration: 24s, 10s; animation-delay: -9s, -7s; }
.arka-lav i:nth-child(6) { left: 40%; top: 75%; width: 14vmin; height: 14vmin; animation-duration: 21s, 8s; animation-delay: -15s, -4s; background: radial-gradient(circle at 35% 35%, var(--au3), var(--au2) 70%); }
@keyframes lav-yuksel { 0% { transform: translateY(0); } 100% { transform: translateY(-85vh); } }
@keyframes lav-sekil {
  0% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  50% { border-radius: 60% 40% 35% 65% / 55% 62% 38% 45%; }
  100% { border-radius: 35% 65% 50% 50% / 60% 35% 65% 40%; }
}

/* =========================================================
 *  ZİL ANI
 * ========================================================= */
/* Dans eden harfler: yazılar harf harf sarılır (pano.js), birkaç saniye sonra eski hâline döner */
.dh { display: inline-block; animation: dh1 0.5s ease-in-out infinite alternate; }
.dh.d2 { animation-name: dh2; animation-duration: 0.42s; }
.dh.d3 { animation-name: dh3; animation-duration: 0.58s; }
@keyframes dh1 { from { transform: translateY(0) rotate(0); } to { transform: translateY(-0.28em) rotate(-9deg); } }
@keyframes dh2 { from { transform: translateY(0.05em) rotate(4deg) scale(1); } to { transform: translateY(-0.18em) rotate(12deg) scale(1.18); } }
@keyframes dh3 { from { transform: translateY(-0.05em) scale(1); } to { transform: translateY(0.2em) scale(0.86) rotate(-5deg); } }
/* Ekran dalgası: bölmeler sırayla zıplar, üzerlerinden ışık geçer */
.bolme { position: relative; }
.bolme.zil-dalga { animation: zil-dalga 1s ease-in-out both; }
.bolme.zil-dalga::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.4) 50%, transparent 65%);
  background-size: 300% 100%; animation: isik-gec 1s ease-out both; animation-delay: inherit;
}
@keyframes zil-dalga { 0%, 100% { transform: none; } 35% { transform: translateY(-3%) scale(1.03); } 65% { transform: translateY(1%) scale(0.99); } }
@keyframes isik-gec { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* Büyük duyuru */
#zil-duyuru {
  position: fixed; inset: 0; z-index: 45; display: none; align-items: center; justify-content: center; pointer-events: none;
  background: radial-gradient(circle at center, rgba(0,0,0,0.45), rgba(0,0,0,0.15) 70%);
}
#zil-duyuru.goster { display: flex; animation: duyuru-zemin 4.2s ease both; }
#zil-duyuru span {
  font-size: calc(150px * var(--olcek)); font-weight: 900; color: #fff; text-align: center; line-height: 1.05; padding: 0 0.3em;
  text-shadow: 0 0.05em 0 var(--renk), 0 0.1em 0.3em rgba(0,0,0,0.5);
  animation: duyuru-yazi 4.2s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes duyuru-zemin { 0% { opacity: 0; } 8%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes duyuru-yazi { 0% { transform: scale(0.2) rotate(-8deg); } 12% { transform: scale(1.1) rotate(2deg); } 20%, 82% { transform: scale(1) rotate(0); } 100% { transform: scale(1.4); opacity: 0; } }
#zil-tuval { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 46; pointer-events: none; }
/* Son 10 saniye sayacı */
#zil-sayac {
  position: fixed; inset: 0; z-index: 44; display: none; flex-direction: column; align-items: center; justify-content: center; pointer-events: none;
  background: radial-gradient(circle at center, rgba(0,0,0,0.55), rgba(0,0,0,0.2) 70%);
}
#zil-sayac.goster { display: flex; }
#zil-sayac .zs-etiket { font-size: calc(48px * var(--olcek)); font-weight: 800; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.6); }
#zil-sayac .zs-sayi {
  font-size: calc(300px * var(--olcek)); font-weight: 900; line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 0.15em var(--renk), 0 0.04em 0 var(--renk);
}
#zil-sayac .zs-sayi.vur { animation: sayac-vur 0.9s ease-out; }
@keyframes sayac-vur { 0% { transform: scale(1.6); opacity: 0.2; } 30% { transform: scale(0.95); opacity: 1; } 100% { transform: scale(1); } }

/* =========================================================
 *  MASKOT
 * ========================================================= */
#maskot { position: fixed; z-index: 30; width: calc(170px * var(--olcek-yer)); pointer-events: none; transition: transform 0.9s cubic-bezier(.3,1.4,.5,1), opacity 0.6s; opacity: 0; }
#maskot.maskot-sag-alt { right: calc(18px * var(--olcek-yer)); bottom: 0; transform: translateY(110%); }
#maskot.maskot-sol-alt { left: calc(18px * var(--olcek-yer)); bottom: 0; transform: translateY(110%); }
#maskot.maskot-sag-ust { right: calc(18px * var(--olcek-yer)); top: calc(10px * var(--olcek-yer)); transform: translateY(-120%); }
#maskot.maskot-sol-ust { left: calc(18px * var(--olcek-yer)); top: calc(10px * var(--olcek-yer)); transform: translateY(-120%); }
#maskot.goster { transform: translateY(0); opacity: 1; }
html.gece #maskot { display: none; }
.maskot-govde svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35)); animation: maskot-sallan 3s ease-in-out infinite; }
.maskot-sol-alt .maskot-govde svg, .maskot-sol-ust .maskot-govde svg { transform: scaleX(-1); animation-name: maskot-sallan-ayna; }
@keyframes maskot-sallan { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4%) rotate(2deg); } }
@keyframes maskot-sallan-ayna { 0%, 100% { transform: scaleX(-1) translateY(0) rotate(-2deg); } 50% { transform: scaleX(-1) translateY(-4%) rotate(2deg); } }
#maskot .m-kol { transform-box: fill-box; transform-origin: 50% 0%; }
#maskot .m-kuyruk { transform-box: fill-box; transform-origin: 100% 100%; animation: kuyruk 2.4s ease-in-out infinite alternate; }
#maskot.salla .m-kol { animation: kol-salla 0.45s ease-in-out 6 alternate; }
@keyframes kol-salla { from { transform: rotate(10deg); } to { transform: rotate(-70deg); } }
/* Kedi patisini başının yanında kaldırır: omuzdan (82,98) dönerek sağa sola sallar */
#maskot.maskot-kedi .m-kol { transform-box: view-box; transform-origin: 82px 98px; }
#maskot.maskot-kedi.salla .m-kol { animation: kedi-salla 0.4s ease-in-out 8 alternate; }
@keyframes kedi-salla { from { transform: rotate(-5deg); } to { transform: rotate(26deg); } }
@keyframes kuyruk { from { transform: rotate(-6deg); } to { transform: rotate(10deg); } }
#maskot .m-kapak { transform-box: fill-box; transform-origin: 50% 0%; transform: scaleY(0); animation: goz-kirp 4.5s infinite; }
@keyframes goz-kirp { 0%, 90%, 100% { transform: scaleY(0); } 94% { transform: scaleY(1); } }
#maskot .m-isik { animation: isik-yan 1.4s steps(2) infinite; }
@keyframes isik-yan { 50% { fill: #ffeb3b; } }
.maskot-balon {
  position: absolute; bottom: 100%; margin-bottom: calc(8px * var(--olcek-yer));
  width: max-content; max-width: calc(440px * var(--olcek-yer));
  background: #fff; color: #172033; border-radius: calc(18px * var(--olcek-yer));
  padding: calc(12px * var(--olcek-yer)) calc(18px * var(--olcek-yer));
  font-size: calc(26px * var(--olcek)); font-weight: 700; line-height: 1.3;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35); opacity: 0; transform: scale(0.6); transition: opacity 0.4s, transform 0.4s cubic-bezier(.3,1.5,.5,1);
}
.maskot-sag-alt .maskot-balon, .maskot-sag-ust .maskot-balon { right: 30%; transform-origin: 90% 100%; }
.maskot-sol-alt .maskot-balon, .maskot-sol-ust .maskot-balon { left: 30%; transform-origin: 10% 100%; }
.maskot-sag-ust .maskot-balon, .maskot-sol-ust .maskot-balon { bottom: auto; top: 100%; margin: calc(8px * var(--olcek-yer)) 0 0; }
.maskot-balon::after { content: ""; position: absolute; top: 100%; border: calc(10px * var(--olcek-yer)) solid transparent; border-top-color: #fff; }
.maskot-sag-alt .maskot-balon::after { right: 18%; }
.maskot-sol-alt .maskot-balon::after { left: 18%; }
.maskot-sag-ust .maskot-balon::after, .maskot-sol-ust .maskot-balon::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #fff; }
.maskot-sag-ust .maskot-balon::after { right: 18%; }
.maskot-sol-ust .maskot-balon::after { left: 18%; }
#maskot.konus .maskot-balon { opacity: 1; transform: scale(1); }

/* =========================================================
 *  GİRİŞ / SAAT BAŞI / PARILTI
 * ========================================================= */
body.anim-giris .bolme.giris { animation: bolme-giris 0.8s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes bolme-giris { from { opacity: 0; transform: translateY(8%) scale(0.92); } to { opacity: 1; transform: none; } }
#pano { perspective: 1600px; }
.bolme.saat-don { animation: saat-don 1.2s ease-in-out both; }
@keyframes saat-don { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg) scale(0.92); opacity: 0.6; } 100% { transform: rotateY(0); } }
body.anim-parilti .bolme-baslik { position: relative; overflow: hidden; }
body.anim-parilti .bolme-baslik::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-20deg); animation: baslik-parilti 9s ease-in-out infinite; animation-delay: var(--pd, 0s);
}
@keyframes baslik-parilti { 0% { left: -40%; } 14%, 100% { left: 130%; } }

/* ---- Cam efektleri (yağmurda damla + buğu, karda kristal + köşe buzlanması); pano.js çizer ---- */
#cam-katman { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
#cam-katman:not(.cam-yagmur):not(.cam-kar), html.gece #cam-katman { display: none; }
#cam-katman .cam-tuval { position: absolute; inset: 0; width: 100%; height: 100%; }
#cam-katman .cam-bugu {
  position: absolute; inset: 0; display: none;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(225, 235, 245, 0.09) 80%, rgba(225, 235, 245, 0.2) 100%);
  animation: cam-gel 8s ease both;
}
body.tema-acik #cam-katman .cam-bugu { background: radial-gradient(ellipse at center, transparent 60%, rgba(130, 150, 180, 0.1) 80%, rgba(130, 150, 180, 0.22) 100%); }
#cam-katman.cam-yagmur.bugu .cam-bugu { display: block; }
#cam-katman .cam-buz { position: absolute; width: 21vmin; height: 21vmin; display: none; animation: buz-gel 25s ease both; }
#cam-katman.cam-kar.buz .cam-buz { display: block; }
#cam-katman .b1 { left: 0; top: 0; }
#cam-katman .b2 { right: 0; top: 0; transform: scaleX(-1); }
#cam-katman .b3 { left: 0; bottom: 0; transform: scaleY(-1); }
#cam-katman .b4 { right: 0; bottom: 0; transform: scale(-1, -1); }
@keyframes cam-gel { from { opacity: 0; } to { opacity: 1; } }
@keyframes buz-gel { from { opacity: 0; } to { opacity: 0.75; } }

/* =========================================================
 *  10 KASIM: yarıya inmiş bayrak, Anıtkabir, mum ışığı, 09.05 saati, saygı duruşu sahnesi
 * ========================================================= */
.k10-bayrak { position: fixed; right: calc(10px * var(--olcek-yer)); top: 0; z-index: 0; width: calc(130px * var(--olcek-yer)); pointer-events: none; opacity: 0.5; }   /* bölmelerin arkasında: yazıların üstüne binmez */
.k10-bayrak svg, .saygi-bayrak svg { display: block; width: 100%; height: auto; overflow: visible; }
.k10-dalga { transform-box: fill-box; transform-origin: 0% 50%; animation: k10-dalga 7s ease-in-out infinite alternate; }
@keyframes k10-dalga { 0% { transform: skewY(-3deg) scaleX(0.96); } 50% { transform: skewY(2.5deg) scaleX(1); } 100% { transform: skewY(-1.5deg) scaleX(0.93); } }
.k10-anitkabir { position: fixed; left: 8vw; right: 8vw; bottom: 0; z-index: 0; color: #fff; opacity: 0.13; pointer-events: none; }
.k10-anitkabir svg { display: block; width: 100%; height: auto; max-height: 34vh; }
.k10-saat { position: fixed; left: 2.5vmin; bottom: 2.5vmin; z-index: 0; width: 24vmin; color: #fff; opacity: 0.14; pointer-events: none; }
.k10-saat svg { display: block; width: 100%; height: auto; }
.k10-mum { position: fixed; left: 0; right: 0; bottom: 0; height: 34vh; z-index: 0; pointer-events: none; }
.k10-mum i { position: absolute; bottom: -8vh; width: 46vw; height: 42vh; background: radial-gradient(ellipse at 50% 100%, rgba(255, 170, 70, 0.3), rgba(255, 130, 40, 0.1) 45%, transparent 70%); animation: mum-titre 3.1s ease-in-out infinite alternate; }
.k10-mum i:nth-child(1) { left: -6vw; animation-duration: 2.7s; }
.k10-mum i:nth-child(2) { left: 27vw; animation-duration: 3.7s; animation-delay: -1.2s; }
.k10-mum i:nth-child(3) { right: -6vw; animation-delay: -2s; }
@keyframes mum-titre { 0% { opacity: 0.65; transform: scaleY(0.96); } 40% { opacity: 1; transform: scaleY(1.03); } 70% { opacity: 0.78; transform: scaleY(0.98); } 100% { opacity: 0.95; transform: scaleY(1.01); } }

/* Saygı duruşu sahnesi: bayrak yarıya iner, yazı belirir, çizgi 1 dakikayı gösterir */
#saygi-durusu { gap: 5vmin; padding: 0 5vmin; }
.saygi-bayrak { flex: 0 0 auto; width: 22vmin; }
.saygi-saat { flex: 0 0 auto; width: 20vmin; color: #cfcfcf; opacity: 0; }
.saygi-saat svg { display: block; width: 100%; height: auto; }
.saygi-ic { flex: 0 1 auto; opacity: 0; }
#saygi-durusu.goster .saygi-bayrak .k10-gonder { animation: bayrak-in 6s ease-in-out both; }
#saygi-durusu.goster .saygi-ic { animation: saygi-belir 2.5s ease 5s both; }
#saygi-durusu.goster .saygi-saat { animation: saygi-belir 2.5s ease 6s both; }
@keyframes bayrak-in { from { transform: translateY(-112px); } to { transform: none; } }
@keyframes saygi-belir { from { opacity: 0; } to { opacity: 0.9; } }
.saygi-cizgi { position: absolute; left: 12vw; right: 12vw; bottom: 7vh; height: 3px; background: rgba(255, 255, 255, 0.14); border-radius: 2px; overflow: hidden; }
.saygi-cizgi i { display: block; height: 100%; width: 0; background: #e6e6e6; }
#saygi-durusu.goster .saygi-cizgi i { animation: saygi-sure 60s linear both; }
@keyframes saygi-sure { from { width: 0; } to { width: 100%; } }