/* Haberpaketleri — efekt bolumu.
   site.css ten AYRILDI: yalnizca gerektigi sayfada yuklenir.
   Ortak belirtecler (--brand, --ink vb.) site.css te tanimlidir;
   bu dosya ondan SONRA yuklenmelidir. */

/* =====================================================================
 * Mevsimlik efektler
 *
 * Yalnizca transform ve opacity canlandirilir — ikisi de GPU'da isler ve
 * sayfa yerlesimini yeniden hesaplatmaz. Boyut/konum degisimi YOK.
 *
 * Katman tiklamayi engellemez (pointer-events:none) ve ekran okuyucuya
 * gorunmez (aria-hidden, HTML tarafinda).
 * ===================================================================== */
.efekt{
  position:fixed; inset:0; z-index:1;
  pointer-events:none; overflow:hidden;
  contain:strict;              /* efekt disariya yeniden cizim yaptirmaz */
}
.efekt i{
  position:absolute; top:-8vh; left:var(--x);
  display:block; opacity:0;
  animation-delay:var(--g); animation-duration:var(--s);
  animation-iteration-count:infinite; animation-timing-function:linear;
  will-change:transform, opacity;
}

/* ---------- Kar ----------
   ONEMLI: SVG bir MASKE DEGIL, ARKA PLAN GORUNTUSUDUR.

   Maske denendi ve calismadi: CSS'te filter, mask'ten ONCE uygulanir.
   Yani drop-shadow maskesiz beyaz kareye ciziliyor, ardindan maske o
   golgeyi de kesip atiyordu — golge hic gorunmuyordu.

   Arka plan goruntusunde ogenin alfasi dogrudan SVG'nin kendisidir;
   drop-shadow onu birebir izler. Ustelik koyu kontur SVG'nin ICINE
   gomulu oldugu icin golge hic olmasa bile tane beyaz zeminde ayirt
   edilir. */
.efekt__parcaciklar--kar i{
  width:calc(15px * var(--b)); height:calc(15px * var(--b));
  background:var(--kar-tanesi) center / contain no-repeat;
  filter:drop-shadow(0 1px 2px rgba(15, 30, 55, .38));
  animation-name:efekt-dus-donerek;   /* kristal donerek duser */
}

.efekt__parcaciklar--kar{
  --kar-tanesi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%3Cg%20stroke%3D%22%2325405e%22%20stroke-width%3D%223.4%22%20opacity%3D%22.55%22%3E%3Cpath%20d%3D%22M12%201.6v20.8M3%206.8l18%2010.4M3%2017.2l18-10.4%22%2F%3E%3Cpath%20d%3D%22M12%205.6%209.3%203.3M12%205.6l2.7-2.3M12%2018.4l-2.7%202.3M12%2018.4l2.7%202.3%22%2F%3E%3Cpath%20d%3D%22m7.2%208.8-3.5-.4M7.2%208.8%205.9%205.5M16.8%2015.2l3.5.4M16.8%2015.2l1.3%203.3%22%2F%3E%3Cpath%20d%3D%22m7.2%2015.2-3.5.4M7.2%2015.2%205.9%2018.5M16.8%208.8l3.5-.4M16.8%208.8l1.3-3.3%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.7%22%3E%3Cpath%20d%3D%22M12%201.6v20.8M3%206.8l18%2010.4M3%2017.2l18-10.4%22%2F%3E%3Cpath%20d%3D%22M12%205.6%209.3%203.3M12%205.6l2.7-2.3M12%2018.4l-2.7%202.3M12%2018.4l2.7%202.3%22%2F%3E%3Cpath%20d%3D%22m7.2%208.8-3.5-.4M7.2%208.8%205.9%205.5M16.8%2015.2l3.5.4M16.8%2015.2l1.3%203.3%22%2F%3E%3Cpath%20d%3D%22m7.2%2015.2-3.5.4M7.2%2015.2%205.9%2018.5M16.8%208.8l3.5-.4M16.8%208.8l1.3-3.3%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221.5%22%20fill%3D%22%23fff%22%20stroke%3D%22%2325405e%22%20stroke-width%3D%22.8%22%20opacity%3D%22.95%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

/* ---------- Konfeti ---------- */
.efekt__parcaciklar--konfeti i{
  width:calc(7px * var(--b)); height:calc(11px * var(--b));
  border-radius:2px;
  animation-name:efekt-dus-donerek;
}
.efekt__parcaciklar--konfeti i:nth-child(4n)  {background:#e5484d}
.efekt__parcaciklar--konfeti i:nth-child(4n+1){background:#f5a524}
.efekt__parcaciklar--konfeti i:nth-child(4n+2){background:#3e63dd}
.efekt__parcaciklar--konfeti i:nth-child(4n+3){background:#30a46c}

/* ---------- Isik huzmesi ---------- */
.efekt__parcaciklar--isik i{
  top:-30vh; width:min(38vw, 420px); height:150vh;
  background:linear-gradient(180deg,
    rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 72%);
  transform:rotate(14deg); transform-origin:top center;
  animation-name:efekt-parla; animation-timing-function:ease-in-out;
}

@keyframes efekt-dus{
  0%   {opacity:0;   transform:translate3d(0, 0, 0)}
  10%  {opacity:.9}
  90%  {opacity:.9}
  100% {opacity:0;   transform:translate3d(6vw, 112vh, 0)}
}

@keyframes efekt-dus-donerek{
  0%   {opacity:0;   transform:translate3d(0, 0, 0) rotate(0deg)}
  10%  {opacity:1}
  90%  {opacity:1}
  100% {opacity:0;   transform:translate3d(-8vw, 112vh, 0) rotate(720deg)}
}

@keyframes efekt-parla{
  0%, 100% {opacity:0}
  50%      {opacity:1}
}

/* Mobilde varsayilan olarak kapali — panelden acilabilir.
   Kucuk ekranda animasyon pil harcar ve gorsel gurultu yapar. */
@media (max-width:760px){
  .efekt--masaustu{display:none}
}

/*
 * HAREKET DUYARLILIGI — pazarlik konusu degil.
 * Isletim sisteminde "hareketi azalt" acik olan kullanicida efekt
 * TAMAMEN kaldirilir; yavaslatilmaz, gizlenmez, hic basilmaz gibi olur.
 */
@media (prefers-reduced-motion:reduce){
  .efekt{display:none}
}

/* Yazdirmada dekorasyon olmaz */
@media print{
  .efekt{display:none}
}


/* =====================================================================
 * Tema ogeleri — serit, asili susler, zincir, yas ogeleri
 *
 * Hepsi .efekt katmaninin icindedir: tek bir kap, tek z-index, tek
 * pointer-events kurali.
 * ===================================================================== */

/*
 * UST OGELER basligin ALTINDA durur.
 *
 * .efekt katmani position:fixed ve viewport'un tepesinden baslar —
 * dusen parcaciklar icin dogru. Ama yapiskan menu (.nav, z-index:60)
 * opak ve efektin USTUNDE boyanir; serit, asili sus, zincir ve
 * gorsel oraya konursa menunun arkasinda kaybolur.
 *
 * Bu yuzden ust ogeler --efekt-ust kadar asagidan baslar. Deger ust
 * cubuk (38px) + menu yuksekligi kadardir.
 */
.efekt{--efekt-ust:104px}

/* Ust kenarda ince renk seridi */
.efekt__serit{
  position:absolute; top:var(--efekt-ust); left:0; right:0; height:3px;
  background:var(--c);
}

/* --- Arkadan dusen parcaciklar --- */
.efekt__parcaciklar{position:absolute; inset:0; display:block}

/* --- Ust kenardan sarkan ogeler ---
   Konumlar iki yana toplanir, orta bos birakilir: sayfanin ortasi
   basligin oldugu yerdir. */
/*
 * Asili ogeler sayfanin EN TEPESINDEN sarkar ve yapiskan menunun
 * USTUNDE cizilir (z-index:61 > .nav'in 60'i). Menunun altinda kalsalardi
 * ipin ust kismi gorunmez, kristaller havada duruyormus gibi olurdu.
 *
 * Ip 1.5px'lik ince bir cizgi; menu yazilarinin uzerinden gectigi yerde
 * okumayi engellemez. Katman pointer-events:none tasidigi icin menu
 * tiklamalari da etkilenmez.
 */
.efekt__asili{
  position:absolute; top:0; left:var(--x); z-index:61;
  width:44px; margin-left:-22px;
  padding-top:var(--h);
  filter:drop-shadow(0 2px 3px rgba(15,30,55,.25));
}
.efekt__asili::before{
  content:''; position:absolute; top:0; left:50%;
  width:1.5px; height:var(--h); margin-left:-.75px;
  background:linear-gradient(180deg, rgba(60,70,87,.5), rgba(60,70,87,.25));
}
.efekt__asili svg{display:block; width:100%; height:auto}

/* Isilti YALNIZCA kutlama tonunda. Saygi ve yas tonunda oge durur. */
.efekt--ton-kutlama .efekt__asili{
  animation:efekt-isilti 3.4s var(--g) infinite ease-in-out;
}
@keyframes efekt-isilti{
  0%, 100% {filter:drop-shadow(0 2px 3px rgba(15,30,55,.25)) drop-shadow(0 0 3px var(--c))}
  50%      {filter:drop-shadow(0 2px 3px rgba(15,30,55,.25)) drop-shadow(0 0 11px var(--c))}
}

/* Bayrak sallanmaz, isildamaz — sus degildir. Ipi de yoktur,
   direge takilidir. Sinif PHP'den gelir; :has() ile SVG icerigine
   bakmak denendi ve calismadi (kirilgan secici). */
.efekt__asili--bayrak{animation:none !important}
.efekt__asili--bayrak::before{display:none}
.efekt__asili--bayrak{padding-top:0 !important}

/* --- Ust kenarda zincir (mahya hissi) --- */
.efekt__zincir{position:absolute; top:var(--efekt-ust); left:0; right:0; height:100px}
.efekt__kablo{position:absolute; top:0; left:0; width:100%; height:60px}
.efekt__zincir-oge{
  position:absolute; top:var(--y); left:var(--x);
  width:14px; margin-left:-7px;
  filter:drop-shadow(0 0 7px var(--c));
}
.efekt--ton-kutlama .efekt__zincir-oge{
  animation:efekt-yanip-son 3.2s var(--g) infinite ease-in-out;
}
@keyframes efekt-yanip-son{
  0%, 100% {opacity:1}
  50%      {opacity:.55}
}
.efekt__zincir-oge svg{display:block; width:100%; height:auto}

/* --- 10 Kasim gorseli — LOGO ISARETININ KOSESINDE ---
   Efekt katmaninda degil, .brand-mark icinde durur; yapiskan menu
   efektin ustunde boyandigi icin oraya konsa gorunmezdi.
   pointer-events:none — logonun tiklama alanini bolmez. */
/* Gorsel marka blogunun SAGINDA durur ve headerdan asagi tasar.
   .brand konum baglami olur; .nav'da overflow:hidden yok, tasma
   kirpilmaz. */
.brand{position:relative}

.efekt__siluet{
  /*
   * MARKA BLOGUNUN SAGINDA, headerdan asagi tasarak sarkar.
   *
   * Onceki denemeler: isaretin sagi (marka yazisina biniyordu), kose
   * rozeti (cok kucuk ve yapisik), isaretin alti (kayboluyordu).
   * Sag tarafta bos alan var ve tasma dikkat cekiyor.
   *
   * Genislik verilir, yukseklik serbest kalir: dikey bir portre de
   * yatay bir imza da orani bozulmadan sigar.
   */
  position:absolute; left:100%; top:var(--siluet-ust, -2px);
  /* PNG'nin cevresinde saydam bosluk var (360x360 kutuda ortalanmis
     kurdele). Bu yuzden negatif kenar bosluguyla logoya yaklastirilir;
     0 verilse gorsel olarak ~20px uzakta duruyor. */
  margin-left:-16px;
  width:var(--siluet-en, 92px);
  pointer-events:none;
}
.efekt__siluet img{display:block; width:100%; height:auto}

@media (max-width:760px){
  .efekt__siluet{--siluet-en:58px; --siluet-ust:-2px; margin-left:-10px}
}

/* --- 10 Kasim ANMA BELIRTECI — gorsel yokken LOGO YANINDA ---
   Yonetici gorsel vermemisse: "10 Kasim" + olum yili + sonsuzluk.
   Figuratif degil, taninir ve saygili; hareketsiz, tek murekkep.
   .brand konum baglamidir (position:relative, yukarida); belirtec
   isaretin SAGINA, bos alana oturur. Yapiskan menuyle birlikte boyanir
   (efekt katmaninda DEGIL, .brand icinde), bu yuzden menunun arkasinda
   kaybolmaz. pointer-events:none — logonun tiklamasini bolmez. */
.efekt__anma{
  position:absolute; left:100%; top:50%;
  transform:translateY(-50%);
  margin-left:12px;
  display:inline-flex; flex-direction:column; align-items:center;
  gap:1px; padding:3px 10px;
  border:1px solid rgba(17, 22, 30, .55);
  border-radius:7px;
  background:rgba(255, 255, 255, .45);
  color:#11161e; line-height:1;
  white-space:nowrap; pointer-events:none;
}
.efekt__anma-ust{
  font-size:8.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; opacity:.8;
}
.efekt__anma-yil{
  display:inline-flex; align-items:baseline; gap:4px;
  font-size:15px; font-weight:800; letter-spacing:.03em;
}
.efekt__anma-sonsuz{
  font-style:normal; font-size:16px; font-weight:600;
  position:relative; top:1px;
}

/* Dar ekranda da kalir — yas bir dekor degil, bir tavirdir
   (gri tonlama gibi). Yalnizca olcu kucultulur. */
@media (max-width:760px){
  .efekt__anma{margin-left:8px; padding:2px 8px; border-radius:6px}
  .efekt__anma-ust{font-size:7.5px; letter-spacing:.13em}
  .efekt__anma-yil{font-size:13px}
  .efekt__anma-sonsuz{font-size:14px}
}

/* Cok dar ekranda baslikla cakismamasi icin gizlenir:
   gri tonlama ve ust serit tek baslarina dogru dili korur. */
@media (max-width:400px){
  .efekt__anma{display:none}
}

/*
 * YAS TONLAMASI — sayfanin tamami griye alinir.
 *
 * Turkiye'de 10 Kasim'da yerlesik bir dildir: siteler o gun renklerini
 * birakir. Filtre <body> uzerindedir; efekt katmani da onun icinde
 * oldugu icin gorsel de ayni tonlamayi paylasir.
 *
 * NOT: filter, position:fixed ogeler icin yeni bir kapsayici blok
 * olusturur — sabit ogeler goruntu penceresine degil o ogeye cakilir.
 * BU YUZDEN sinif <body>'de DEGIL <html>'dedir: belge kok ogesi bu
 * kuralin disindadir (CSS Filter Effects), dolayisiyla alt cubuk
 * (.altbar), haber seridi (.haberbar) ve sohbet widget'i tonlama
 * acikken de yerinde kalir. Sinifi body'ye geri tasimayin.
 */
:root.yas-tonlama{
  filter:grayscale(1) contrast(.94) brightness(.97);
}

/* Mobilde tema ogeleri gizlenir — dar alanda basligi bogar.
   Yas tonlamasi ise MOBILDE DE kalir: o bir dekor degil, bir tavirdir. */
@media (max-width:760px){
  .efekt--masaustu .efekt__asili,
  .efekt--masaustu .efekt__zincir,
  .efekt--masaustu .efekt__siluet{display:none}
}

@media (prefers-reduced-motion:reduce){
  .efekt__asili,
  .efekt__zincir-oge{animation:none !important}
}

@media print{
  .efekt{display:none}
  :root.yas-tonlama{filter:none}
}