/* Reklam Şeffaflık Paneli
   Tasarım dili: "AYRI AMA BÜTÜN".

   PANEL ARTIK SİTENİN DİLİNİ KONUŞUYOR. Önceki palet gece mavisinden
   menekşeye giden soğuk bir aileydi ve kendi içinde tutarlıydı; ama bu
   panel ajansın sitesinde ürün olarak gösteriliyor ve sitenin yanında
   yabancı duruyordu. Renkler, yazı tipleri ve köşe yarıçapı sitenin
   tokenlarıyla BİREBİR aynı: kâğıt, mürekkep, tek vurgu altın.

   TEK RENK AİLESİ. Kapaktan grafiğe kadar her şey aynı ailenin farklı
   basamağı. Bölümleri renk değil yüzey ve boşluk ayırıyor.

   VERİ RENGİ TEK: harcama ve ciro AYRI çizimler, aynı çizimde yan yana
   değiller. Kimliği renk değil başlık taşıyor, ikisi de aynı rengi kullanır.

   ALTIN ÜZERİNE BEYAZ YAZI YOK: ölçtük, 3,87:1 kalıyor. Altın dolgunun
   üstüne koyu mürekkep gelir, o 4,85:1. Sitede de böyle.

   KOYU BLOKLAR DÜZ, GRADYAN DEĞİL. Eski kapakta üç duraklı bir gradyan
   vardı; sitede koyu bölümler net ve düz, panel de öyle.

   RENKLER GÖZLE SEÇİLMEDİ: `node scripts/renk_dogrula.js` her yazı/zemin
   çiftinin WCAG eşiğini, veri renginin yüzeye karşı 3:1'ini ve ton
   merdiveninin tek yönlü olduğunu ölçüyor. Renk değiştiren o betiği çalıştırır. */
@import url("/statik/yazitipi/hanken.css");
@import url("/statik/yazitipi/bricolage.css");

:root{
  /* kâğıt ailesi: hiçbiri saf beyaz değil, hepsi sıcak tarafta */
  --kagit:#FBFAF6; --kagit2:#F2F0E8; --yuzey:#FEFDFA;
  /* mürekkep: saf siyah değil, sıcak koyu */
  --ink:#12120F; --ink2:#3E3E38; --ink3:#71716A;
  --ciz:#E2E0D6; --ciz2:#EFEDE4;
  /* tek renk ailesi: koyudan açığa TEK YÖNLÜ merdiven.
     derin/derin2 koyu blok zeminleri, ana ailesi vurgu altını. */
  --derin:#12120F; --derin2:#1E1E19;
  --ana-koyu:#6F5119; --ana:#A8792A; --ana-acik:#D2A54A;
  --ana-yumusak:#F5F1E8; --ana-sis:#F0E9DB;
  /* durum: yalnız GERÇEKTEN durum bildirirken. Vurgu altını veri rengi
     olduğu için uyarı altın tonunda DEĞİL, yanık turuncuda. */
  --yes:#2C6B4A; --yzem:#E2E9E1;
  --sar:#8C4A17; --szem:#EEE5DB;
  --kir:#A33241; --kzem:#F0E2E0;
  --golge:0 1px 2px rgba(18,18,15,.05);
  --golge2:0 14px 38px rgba(18,18,15,.12);
  --r:14px;
  /* Sitedeki ikili: başlıklar ve rakamlar Bricolage, gövde Hanken. */
  --display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--kagit);color:var(--ink);line-height:1.6;font-size:15px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ana-koyu)}
.sayi{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.kap{max-width:1200px;margin:0 auto;padding:0 26px}

/* ---------- kapak ----------
   Eski kapağın altında 120px'lik bulanık bir erime bandı vardı. Amaç bölümleri
   birbirine bağlamaktı ama sonuç lekeli bir bulanıklıktı ve araç şeridi tam o
   bulanığın üstünde duruyordu. Şimdi kapak NET bitiyor; bağı özet kartı
   kuruyor, kartın üst yarısı kapağın içinde duruyor. */
.kapak{
  background:var(--derin);
  color:var(--kagit);padding:40px 0 96px;position:relative;
}
.kapak .kap{position:relative;z-index:1}
.kapak-satir{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;flex-wrap:wrap}
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(251,250,246,.55);margin-bottom:12px}
h1{font-family:var(--display);font-size:clamp(34px,4.2vw,56px);font-weight:600;
  line-height:.98;letter-spacing:-.025em}
.kapak-meta{margin-top:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  font-size:13.5px;color:rgba(251,250,246,.64)}
.ayrac{width:3px;height:3px;border-radius:50%;background:rgba(251,250,246,.3);flex:none}
.taze{display:inline-flex;align-items:center;gap:7px;background:rgba(251,250,246,.1);
  padding:4px 12px;border-radius:999px;font-size:12.5px;color:rgba(251,250,246,.8)}
/* Nokta bir DURUM ISIGI degil, sadece ayrac. Eskiden yesildi ve her
   zaman yesil yaniyordu; "canli" gibi okunup olmayan bir sey
   soyluyordu. Tazelik bilgisini yanindaki tarih tasiyor. */
.taze i{width:5px;height:5px;border-radius:50%;background:var(--ana-acik);flex:none}
.kapak-sag{display:flex;align-items:center;gap:10px;flex:none}
.kim{font-size:12.5px;text-align:right;line-height:1.4;color:rgba(251,250,246,.6)}

/* ---------- düğmeler ---------- */
.dugme{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:11px;
  padding:10px 18px;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;
  font-family:inherit;background:var(--ana);color:var(--ink);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,background .18s}
.dugme:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(18,18,15,.22)}
.dugme.ikincil{background:var(--yuzey);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ciz)}
.dugme.sade{background:rgba(251,250,246,.13);color:var(--kagit);
  box-shadow:inset 0 0 0 1px rgba(251,250,246,.16)}
.dugme.sade:hover{background:rgba(251,250,246,.2)}
.dugme.kucuk{padding:7px 13px;font-size:12.5px;border-radius:9px}
.dugme.tehlike{background:var(--kir);color:var(--kagit)}

/* ---------- araç şeridi: kapağın İÇİNDE ---------- */
.arac{display:flex;justify-content:space-between;align-items:flex-end;gap:18px 26px;
  flex-wrap:wrap;margin:30px 0 0;padding-top:22px;
  border-top:1px solid rgba(251,250,246,.12)}
.arac-oge{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.arac-et{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(251,250,246,.45)}
/* Koyu zeminde hap: beyaz kutu yerine saydam, seçili olan dolu. Beyaz haplar
   kapağın üstünde yamalı duruyordu. */
.aralik{display:inline-flex;background:rgba(251,250,246,.08);border-radius:11px;padding:3px;
  gap:2px;box-shadow:inset 0 0 0 1px rgba(251,250,246,.12)}
.aralik a{padding:7px 15px;font-size:12.5px;color:rgba(251,250,246,.72);text-decoration:none;
  font-weight:600;border-radius:8px;transition:background .18s,color .18s}
.aralik a:hover{background:rgba(251,250,246,.12);color:var(--kagit);text-decoration:none}
.aralik a.secili{background:var(--kagit);color:var(--ink)}

/* ---------- sonuç kartları: kenarlık yok, ton ve gölge ayırıyor ---------- */
.kartlar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin:26px 0 8px}
.kart{background:var(--yuzey);border-radius:var(--r);padding:19px 19px 18px;
  box-shadow:var(--golge);transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s}
.kart:hover{transform:translateY(-3px);box-shadow:var(--golge2)}
.kart .et{font-size:11.5px;color:var(--ink2);font-weight:600;letter-spacing:.02em}
.kart .dg{font-family:var(--display);font-size:clamp(21px,2.05vw,32px);font-weight:600;
  letter-spacing:-.03em;line-height:1.02;margin:10px 0 6px;white-space:nowrap}
.kart .not{font-size:11.5px;color:var(--ink3);line-height:1.45}
/* kahraman kart: aynı ailenin koyu ucu, zıt renk DEĞİL */
.kart.one{background:var(--derin);color:var(--kagit)}
.kart.one .et{color:rgba(251,250,246,.72)}
.kart.one .not{color:rgba(251,250,246,.74)}

/* ---------- bölüm başlığı ---------- */
h2{font-family:var(--display);font-size:clamp(21px,2.1vw,28px);font-weight:600;
  letter-spacing:-.025em;margin:46px 0 18px;display:flex;align-items:baseline;gap:12px}
h2 .say{font-family:'Hanken Grotesk',sans-serif;font-size:12px;font-weight:600;color:var(--ink3);
  letter-spacing:0}

/* ---------- grafikler ---------- */
.grafikler{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}
.gkart{background:var(--yuzey);border-radius:var(--r);padding:20px 20px 14px;box-shadow:var(--golge)}
.gbas{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.gbas .b{font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.015em}
.gbas .t{font-size:12px;color:var(--ink3)}
.gkart svg{width:100%;height:auto;display:block;overflow:visible}
.gkart .kilavuz{stroke:var(--ciz);stroke-width:1;shape-rendering:crispEdges}
.gkart .eksen{fill:var(--ink3);font-size:11px;font-weight:500}
/* TEK veri rengi: iki grafik de aynı aileden, ayrı çizim oldukları için
   farklı renge ihtiyaç yok. Vurgulanan gün koyu uçta. */
.gkart .sutun{fill:var(--ana);transition:fill .18s,opacity .18s}
.gkart .sutun.vurgu{fill:var(--ana-koyu)}
.gkart:hover .sutun{opacity:.4}
.gkart:hover .sutun:hover,.gkart .sutun.vurgu{opacity:1}
.ipucu{position:fixed;left:-9999px;top:-9999px;z-index:60;background:var(--derin);color:var(--kagit);
  border-radius:11px;padding:9px 12px;font-size:12.5px;pointer-events:none;opacity:0;
  transform:translate(-50%,-120%);transition:opacity .12s;white-space:nowrap;
  box-shadow:var(--golge2);font-variant-numeric:tabular-nums}
/* DURUM SINIFI `gorunur`, `acik` DEĞİL: aşağıdaki `.acik` rozet sınıfı (yeşil
   "Yayında" etiketi) ipucunun koyu zeminini eziyordu; kutu yeşile dönüyor,
   %55 opaklıktaki beyaz tarih açık zeminde okunmaz hale geliyordu. */
.ipucu.gorunur{opacity:1}
.ipucu b{display:block;font-size:11px;color:rgba(251,250,246,.62);font-weight:600;margin-bottom:2px}

/* ---------- gün listesi ---------- */
.gun{background:var(--yuzey);border-radius:var(--r);margin-bottom:11px;overflow:hidden;
  box-shadow:var(--golge);transition:box-shadow .22s}
.gun:hover{box-shadow:var(--golge2)}
.gun.notlu{background:linear-gradient(180deg,var(--ana-yumusak) 0%,var(--yuzey) 78px)}
.gun-bas{display:flex;justify-content:space-between;align-items:center;padding:17px 21px;
  gap:14px;flex-wrap:wrap}
.gun-sol{display:flex;align-items:center;gap:12px;min-width:0}
.gun-tar{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.02em;
  white-space:nowrap}
.gun-rz{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:7px;background:var(--ana);color:var(--ink)}
.gun-ozet{font-size:13px;color:var(--ink2);display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.gun-ozet b{color:var(--ink);font-weight:650}
.oran{height:3px;background:var(--ciz2)}
.oran i{display:block;height:100%;background:var(--ana)}
.metrik{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--ciz2)}
.metrik div{padding:14px 21px;border-right:1px solid var(--ciz2)}
.metrik div:last-child{border-right:0}
.metrik .e{font-size:11px;color:var(--ink3);font-weight:500}
.metrik .d{font-family:var(--display);font-size:19px;font-weight:600;margin-top:3px;
  letter-spacing:-.025em}
.islem{padding:15px 21px;border-top:1px solid var(--ciz2);display:flex;gap:16px;font-size:13.5px}
.islem .sa{color:var(--ink3);font-size:12px;white-space:nowrap;padding-top:1px;min-width:98px;
  font-variant-numeric:tabular-nums}
.islem .il{color:var(--ink2);font-size:12px;margin-top:3px}
.islem .ad{color:var(--ink3);font-size:11.5px;margin-top:2px}
/* NOTUMUZ: sayfanın ruhu. Sert şerit yerine aynı aileden yumuşak zemin. */
.not-satir{padding:17px 21px;border-top:1px solid var(--ciz2);
  background:linear-gradient(180deg,var(--ana-yumusak) 0%,var(--ana-sis) 100%);
  display:flex;gap:15px;line-height:1.65}
.not-satir .rz{color:var(--ana-koyu);font-weight:700;font-size:10px;letter-spacing:.1em;
  white-space:nowrap;padding-top:5px}
.not-satir div:last-child{font-size:14.5px;color:var(--ink)}
.yayin-yok{padding:18px 21px;font-size:13.5px;color:var(--ink3);border-top:1px solid var(--ciz2)}

/* ---------- tablo ---------- */
/* min-width:0 ŞART: kutu esnek/ızgara kutusunun içindeyken varsayılan
   `min-width:auto` onu tablonun tam genişliğine kadar büyütüyor ve sayfa
   yatay kayıyor. Kaydırma tablonun İÇİNDE kalmalı. */
.tablo-kutu{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);
  background:var(--yuzey);box-shadow:var(--golge);min-width:0;max-width:100%}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
th{background:var(--kagit2);text-align:left;padding:13px 20px;font-size:10.5px;color:var(--ink2);
  font-weight:700;white-space:nowrap;letter-spacing:.09em;text-transform:uppercase}
td{padding:15px 20px;border-bottom:1px solid var(--ciz2);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .16s}
tbody tr:hover{background:var(--ana-yumusak)}
.kmp-ad{font-weight:600;display:block;margin-bottom:7px}
.kmp-cubuk{height:5px;background:var(--ciz2);border-radius:3px;max-width:200px;overflow:hidden}
.kmp-cubuk i{display:block;height:100%;background:var(--ana)}
.rozet{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  font-size:11.5px;font-weight:650}
.rozet:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.acik{background:var(--yzem);color:var(--yes)}
.kapali{background:var(--kagit2);color:var(--ink2)}
.dipnot{font-size:12px;color:var(--ink3);margin:13px 4px 0;line-height:1.6}

/* ---------- kapanış: kapağın eşi, NET başlar ----------
   Burada da 130px'lik bir erime bandı vardı; kapaktakiyle aynı lekeli görüntüyü
   üretiyordu. Kapak ile kapanış artık aynı dili konuşuyor: aynı gradyan açısı,
   aynı basamaklar, net kenar. Sayfayı bir bütün yapan bu. */
.kapanis{
  background:var(--derin);
  color:var(--kagit);margin-top:64px;padding:52px 0;
}
.kapanis h2{color:var(--kagit);margin:0 0 22px}
.plan{list-style:none;counter-reset:sira}
.plan li{padding:19px 0;border-bottom:1px solid rgba(251,250,246,.1);
  font-size:15px;display:flex;gap:18px;line-height:1.65;color:rgba(251,250,246,.86)}
.plan li:last-child{border-bottom:0}
.plan li:before{content:counter(sira,decimal-leading-zero);counter-increment:sira;
  font-family:var(--display);font-size:19px;color:var(--ana-acik);flex:none;font-weight:600;
  min-width:36px}
.kapanis footer{margin-top:28px;padding-top:22px;border-top:1px solid rgba(251,250,246,.1);
  font-size:12px;color:rgba(251,250,246,.44);line-height:1.8}

/* ---------- geçişler: bölümler görünürken yumuşakça yerine oturur ---------- */
/* KRITIK: gizleme yalniz JS calisiyorsa uygulanir (html.js).
   Once bunu kosulsuz yazmistim ve ekranin altindaki 29 gun karti hic
   gorunmuyordu; JS calismazsa rapor komple bos kalirdi. Icerigi JS'e
   bagimli kilmak yanlis: varsayilan GORUNUR, animasyon eklenti. */
.js .gecis{opacity:0;transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.js .gecis.acildi{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .gecis{opacity:1;transform:none;transition:none}
  .dugme,.kart,.gun,tbody tr{transition:none}
  .dugme:hover,.kart:hover{transform:none}
}

/* ---------- giriş ---------- */
.giris-kap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:var(--derin)}
.giris{background:var(--yuzey);border-radius:16px;padding:38px;width:100%;max-width:420px;
  box-shadow:0 24px 60px rgba(18,18,15,.30)}
.giris h1{font-size:31px;color:var(--ink)}
.giris .alt{color:var(--ink2);margin:9px 0 24px;display:block;font-size:14px}
label{display:block;font-size:12.5px;color:var(--ink2);font-weight:650;margin:16px 0 7px}
input[type=email],input[type=password],input[type=text],input[type=date],textarea,select{
  width:100%;padding:12px 15px;border:1px solid var(--ciz);border-radius:12px;
  font-size:15px;font-family:inherit;background:var(--yuzey);color:var(--ink)}
input:focus,textarea:focus,select:focus{outline:3px solid var(--ana);outline-offset:1px;border-color:var(--ana)}
textarea{min-height:86px;resize:vertical;line-height:1.6}
.giris .dugme{width:100%;margin-top:24px;padding:13px;justify-content:center}
.giris .ek{margin-top:18px;font-size:13px;text-align:center;color:var(--ink2)}
.uyari{background:var(--kzem);color:var(--kir);border-radius:12px;padding:12px 15px;
  font-size:13.5px;margin-top:16px}
.bilgi{background:var(--yzem);color:var(--yes);border-radius:12px;padding:12px 15px;
  font-size:13.5px;margin-top:16px}
.sari{background:var(--szem);color:var(--sar);border-radius:12px;padding:12px 15px;
  font-size:13.5px;margin-top:16px;line-height:1.65}

/* ---------- yönetim ----------
   BAŞLIK ŞERİDİ. `header`, `.bas-satir` ve `.bas-sag` şablonlarda
   kullanılıyordu ama CSS'te hiç karşılığı yoktu. Başlık sayfanın
   kâğıdı üstünde duruyor, koyu zemin için yazılmış `.kim` ve
   `.dugme.sade` orada görünmez kalıyordu: ölçüm 1:1 gösterdi, yani
   "Çıkış" düğmesi hiç okunmuyordu. Palet değişmeden önce de böyleydi,
   eski palette de beyazın üstüne beyaz düşüyordu.

   Yönetim artık raporun kapağıyla aynı dili konuşuyor: düz koyu blok. */
header{background:var(--derin);color:var(--kagit);padding:26px 0 24px;margin-bottom:26px}
header h1{font-size:clamp(25px,3vw,36px);font-weight:600}
header .alt{color:rgba(251,250,246,.62);font-size:13.5px;margin-top:8px;display:block}
.bas-satir{display:flex;justify-content:space-between;align-items:flex-start;
  gap:20px;flex-wrap:wrap}
.bas-sag{display:flex;align-items:center;gap:10px;flex:none}
@media(max-width:640px){
  .bas-satir{flex-direction:column}
  .bas-sag{width:100%;justify-content:space-between}
  header .kim{text-align:left}
}

.yon-satir{display:flex;gap:13px;flex-wrap:wrap;align-items:flex-end}
.yon-satir > div{flex:1;min-width:170px}
.kutu{background:var(--yuzey);border-radius:var(--r);padding:24px;margin-bottom:15px;
  box-shadow:var(--golge)}
.kutu h3{font-family:var(--display);font-size:19px;margin-bottom:14px;font-weight:600}
.not-liste{margin-top:12px}
.not-kalem{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--ciz2)}
.not-kalem:last-child{border-bottom:0}
.not-kalem .tar{font-size:12px;color:var(--ink3);min-width:98px;padding-top:9px}

/* ---------- mobil ---------- */
@media(max-width:920px){
  .kartlar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grafikler{grid-template-columns:1fr}
  .metrik{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:640px){
  body{font-size:14.5px}
  .kap{padding:0 16px}
  .kapak{padding:32px 0 66px}
  .arac{margin-top:-34px}
  .kartlar{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:20px 0 4px}
  .kart{padding:16px}
  .metrik{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metrik div{border-right:0;border-top:1px solid var(--ciz2)}
  .metrik div:nth-child(2n){border-left:1px solid var(--ciz2)}
  .islem{flex-direction:column;gap:4px}
  .islem .sa{min-width:auto}
  .gun-bas{flex-direction:column;align-items:flex-start;gap:8px}
  .kapak-satir{flex-direction:column}
  .kapak-sag{width:100%;justify-content:space-between}
  .kim{text-align:left}
  .arac{flex-direction:column;align-items:stretch}
  .aralik{width:100%}
  .aralik a{flex:1;text-align:center}
  .gkart .eksen{font-size:14px}
  .kapanis{padding:42px 0 40px;margin-top:44px}
}

/* ---------- yazdırma ---------- */
@media print{
  @page{margin:13mm}
  body{background:#fff;font-size:11px}
  .kap{max-width:none;padding:0}
  .js .gecis{opacity:1 !important;transform:none !important}
  .kapak{background:#fff;color:var(--ink);padding:0 0 16px;border-bottom:3px solid var(--ana)}
  .kapak .eyebrow{color:var(--ana-koyu)}
  .kapak-meta,.kim{color:var(--ink2)}
  .taze{background:none;color:var(--ink2)}
  .arac{margin:0;border:0}
  /* Kart yazdırmada kapağın üstüne binmemeli. */
  .ozet{margin-top:16px;box-shadow:none;padding:0;border-radius:0}
  .degisim{background:none;padding:0}
  .kapanis{background:#fff;color:var(--ink);margin-top:22px;padding:18px 0 0;
    border-top:2px solid var(--ink)}
  .kapanis h2,.plan li{color:var(--ink)}
  .plan li{border-color:var(--ciz)}
  .plan li:before{color:var(--ana)}
  .kapanis footer{color:var(--ink2);border-color:var(--ciz)}
  .kart.one{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ana)}
  .kart.one .et,.kart.one .not{color:var(--ink2)}
  .kapak-sag,.arac,.yazdir,form{display:none !important}
  .kart,.gun,.gkart,.tablo-kutu{break-inside:avoid;box-shadow:none}
  .tablo-kutu{overflow:visible}
  table{min-width:0}
  .gkart:hover .sutun{opacity:1}
}

/* ================= YENİ YAPI =================
   Eski düzen (6 eşit kart + 2 grafik + 30 aynı gün kartı) bir veri dökümüydü.
   Yeni düzen soruyu cevaplıyor: önce cevap, sonra ne yaptığımız, sonra seyir. */

/* ---------- 1. CEVAP ---------- */
/* ÖZET KARTI: cümle + kahraman rakam + karşılaştırma TEK kartta.
   Üçü ayrı katman olunca üst kısım beş parçaya bölünüyordu. Kart kapağın alt
   kenarına biniyor: kapakla gövdeyi bulanık geçiş değil bu bağlıyor. */
.ozet{margin:-64px 0 0;position:relative;z-index:2;background:var(--yuzey);
  border-radius:18px;padding:34px 38px 32px;box-shadow:var(--golge2)}
.ozet-cumle{font-family:var(--display);font-size:clamp(22px,2.6vw,36px);font-weight:500;
  line-height:1.24;letter-spacing:-.025em;max-width:22ch;color:var(--ink)}
.ozet-alt{display:flex;gap:36px;align-items:flex-end;flex-wrap:wrap;margin-top:28px}
.ozet-rakam{flex:none}
.ozet-rakam .dg{font-family:var(--display);font-size:clamp(48px,7vw,92px);font-weight:600;
  line-height:.88;letter-spacing:-.045em;color:var(--ana)}
.ozet-rakam .et{font-size:13px;color:var(--ink2);margin-top:10px;max-width:28ch;line-height:1.5}
.degisim{flex:1;min-width:300px;background:var(--kagit);border-radius:12px;
  padding:16px 18px}
.degisim-bas{font-size:11px;color:var(--ink3);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;margin-bottom:12px}
.degisim-satir{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dg-oge .e{font-size:11.5px;color:var(--ink2)}
.dg-oge .d{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.025em;
  margin:3px 0 4px}
.ok{font-size:12px;font-weight:650;display:inline-flex;align-items:center;gap:4px}
.ok:before{content:"";width:0;height:0;border-left:4px solid transparent;
  border-right:4px solid transparent}
/* ÜÇGENİN YÖNÜ ile RENGİ AYRI İKİ ŞEY SÖYLER.
   Yön: ölçü arttı mı azaldı mı. Renk: bu iyi mi kötü mü.
   Eskiden ikisi de "iyi mi" bayrağından geliyordu; satış maliyeti
   %0,3 ARTTIĞI halde üçgen AŞAĞI bakıyordu, çünkü artış kötüydü.
   Yanındaki yazı "+0,3%" derken oku aşağı göstermek raporu kendi
   kendine yalanlatıyordu. */
.ok.yukari:before{border-bottom:5px solid currentColor}
.ok.asagi:before{border-top:5px solid currentColor}
.ok.iyi{color:var(--yes)}
.ok.kotu{color:var(--kir)}
/* Harcamada iyi/kötü YOK: az harcamak kötü, çok harcamak iyi değil.
   Ona renk vermek müşteriye yanlış yorum yaptırır. Yön yine görünür,
   çünkü yön bir yargı değil, olgu. */
.ok.notr{color:var(--ink3)}

/* ---------- 2. NE YAPTIK: zaman çizelgesi ---------- */
.zaman{list-style:none;position:relative;padding-left:26px}
.zaman:before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--ana-acik),var(--ciz))}
.zaman-oge{position:relative;margin-bottom:14px}
.zaman-nokta{position:absolute;left:-26px;top:20px;width:12px;height:12px;border-radius:50%;
  background:var(--kagit);box-shadow:0 0 0 3px var(--ana-acik)}
.zaman-oge.notlu .zaman-nokta{background:var(--ana);box-shadow:0 0 0 3px var(--ana-yumusak)}
.zaman-govde{background:var(--yuzey);border-radius:var(--r);padding:18px 21px;
  box-shadow:var(--golge)}
.zaman-bas{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  flex-wrap:wrap;margin-bottom:10px}
.zaman-tar{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.02em}
.zaman-ozet{font-size:12.5px;color:var(--ink3)}
.yaptik{display:flex;gap:12px;align-items:baseline;font-size:14px;padding:5px 0;
  flex-wrap:wrap;color:var(--ink)}
.yaptik .saat{font-size:11.5px;color:var(--ink3);min-width:92px;
  font-variant-numeric:tabular-nums}
.yaptik .ilgili{font-size:11.5px;color:var(--ink3);flex-basis:100%;padding-left:104px}
/* Gerekçe: sayfanın ruhu burası. Alıntı gibi dursun. */
.neden{margin:12px 0 0;padding:14px 18px;background:var(--ana-yumusak);
  border-radius:12px;font-size:14.5px;line-height:1.65;color:var(--ink);
  border-left:3px solid var(--ana)}
/* Etiket CSS content ile basiliyordu: DOM'da yoktu, ekran okuyucu okumuyordu
   ve test goremiyordu. Artik gercek bir oge. */
.neden-et{display:block;font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ana-koyu);margin-bottom:5px}

/* ---------- 3. SEYİR ---------- */
.seyir{background:var(--yuzey);border-radius:var(--r);padding:20px 22px 14px;
  box-shadow:var(--golge)}
.seyir-bas{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:12px}
.anahtar{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink2)}
.anahtar i{display:block;flex:none}
.a-sutun{width:11px;height:11px;border-radius:3px;background:var(--ana-acik)}
.a-cizgi{width:16px;height:2px;background:var(--ana-koyu);border-radius:2px}
.a-isaret{width:9px;height:9px;border-radius:50%;background:var(--ana)}
.seyir svg{width:100%;height:auto;display:block;overflow:visible}
.seyir .kilavuz{stroke:var(--ciz);stroke-width:1;shape-rendering:crispEdges}
.seyir .eksen{fill:var(--ink3);font-size:11px;font-weight:500}
.seyir .sutun{fill:var(--ana-acik);transition:opacity .16s}
.seyir .egri{stroke:var(--ana-koyu);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.seyir .isaret{stroke:var(--ana);stroke-width:1;stroke-dasharray:2 3;opacity:.55}
.seyir .isaret-nokta{fill:var(--ana)}
.seyir:hover .sutun{opacity:.42}
.seyir:hover .sutun:hover{opacity:1}

/* ---------- 4. KAMPANYALAR ---------- */
.kmp{display:grid;gap:9px}
.kmp-satir{display:flex;align-items:center;gap:18px;background:var(--yuzey);
  border-radius:var(--r);padding:16px 20px;box-shadow:var(--golge);
  transition:box-shadow .2s,transform .2s}
.kmp-satir:hover{box-shadow:var(--golge2);transform:translateY(-2px)}
.kmp-sira{font-family:var(--display);font-size:22px;font-weight:600;color:var(--ink3);
  min-width:26px;flex:none}
.kmp-satir:first-child .kmp-sira{color:var(--ana-koyu)}
.kmp-orta{flex:1;min-width:0}
.kmp-ad{font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:9px;
  flex-wrap:wrap}
.kmp-cubuk{height:5px;background:var(--ciz2);border-radius:3px;margin:8px 0 6px;
  max-width:340px;overflow:hidden}
.kmp-cubuk i{display:block;height:100%;background:var(--ana)}
.kmp-alt{font-size:12px;color:var(--ink3)}
.kmp-sonuc{display:flex;gap:24px;flex:none;text-align:right}
.kmp-hucre{min-width:74px}
.kmp-deger{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.025em}
.kmp-etiket{font-size:10.5px;color:var(--ink3);margin-top:2px}

/* ---------- 5. REKLAMLAR (yaratıcı düzeyi) ----------
   Kampanya satırının aynı iskeleti, başına görsel eklenmiş hali.
   Aynı sınıfları (kmp-cubuk, kmp-hucre) yeniden kullanıyor: iki bölüm
   aynı şeyi anlatıyor, farklı görünmemeli. */
.rek{display:grid;gap:9px}
.rek-satir{display:flex;align-items:flex-start;gap:18px;background:var(--yuzey);
  border-radius:var(--r);padding:16px 20px;box-shadow:var(--golge);
  transition:box-shadow .2s,transform .2s}
.rek-satir:hover{box-shadow:var(--golge2);transform:translateY(-2px)}

.rek-gorsel{flex:none;width:88px;text-align:center}
/* Görseller kare kırpılır: reklamlar 1:1, 4:5 ve 9:16 karışık geliyor,
   ham oranlarıyla dizilince satırlar birbirini tutmuyor. */
.rek-gorsel img{width:88px;height:88px;object-fit:cover;border-radius:10px;
  display:block;background:var(--kagit2)}
.rek-gorsel-yok{width:88px;height:88px;border-radius:10px;background:var(--kagit2);
  box-shadow:inset 0 0 0 1px var(--ciz)}
.rek-bicim{display:block;font-size:10px;color:var(--ink3);margin-top:6px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:700}

.rek-orta{flex:1;min-width:0}
.rek-ad{font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:9px;
  flex-wrap:wrap}
.rek-kampanya{font-size:11.5px;color:var(--ink3);margin-top:3px}
.rek-alt{font-size:12px;color:var(--ink3)}

.rek-notlar{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
/* Teşhis rozetleri. RENK TEK BAŞINA ANLAM TAŞIMAZ: her rozetin içinde
   ne olduğu yazılı, renk yalnız hızlı tarama için. */
.not-rozet{font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:7px;
  background:var(--kagit2);color:var(--ink2);white-space:nowrap}
.n-iyi{background:var(--yzem);color:var(--yes)}
.n-zayif{background:var(--szem);color:var(--sar)}
.n-kotu{background:var(--kzem);color:var(--kir)}
.n-notr,.n-yok{background:var(--kagit2);color:var(--ink2)}

.rek-sonuc{display:flex;gap:24px;flex:none;text-align:right}

@media(max-width:920px){
  .rek-sonuc{gap:16px}
}
@media(max-width:640px){
  /* Dar ekranda satır alt alta iner. Görsel küçülmez: reklamın kendisi
     bu bölümün konusu, ilk feda edilecek şey o değil. */
  .rek-satir{flex-wrap:wrap;gap:14px}
  .rek-orta{flex:1 1 100%;order:2}
  .rek-sonuc{flex:1 1 100%;order:3;text-align:left;flex-wrap:wrap;gap:14px 22px}
  .rek-gorsel{order:1}
}

/* ---------- KIRILIMLAR: kim, nerede gördü ----------
   Her kart: solda halka, sağda liste. Halka oranı bir bakışta verir,
   liste tam rakamı. Pasta tek başına "hangisi büyük" sorusunu cevaplar
   ama "ne kadar" sorusunu cevaplamaz; ikisi birlikte duruyor. */
.kir{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}
.kir-kart{background:var(--yuzey);border-radius:var(--r);padding:20px 22px 18px;
  box-shadow:var(--golge)}
.kir-bas{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.015em;
  margin-bottom:14px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.kir-alt{font-family:'Hanken Grotesk',sans-serif;font-size:11.5px;font-weight:400;
  color:var(--ink3);letter-spacing:0}
.kir-govde{display:flex;align-items:center;gap:20px}

/* HALKA. Yarıçap 38, çizgi kalınlığı 15: iç boşluk dilimlerden geniş
   kalsın, ortadaki rakam sıkışmasın. */
.halka{width:132px;height:132px;flex:none;transform:rotate(-90deg)}
.halka-zemin{fill:none;stroke:var(--ciz2);stroke-width:15}
.halka-dilim{fill:none;stroke-width:15}
/* Ortadaki yazı halkayla birlikte dönmesin diye geri çevriliyor. */
.halka text{transform:rotate(90deg);transform-origin:50px 50px;
  font-family:var(--display);fill:var(--ink)}
.halka-orta-buyuk{font-size:20px;font-weight:600;letter-spacing:-.03em}
.halka-orta-kucuk{font-family:'Hanken Grotesk',sans-serif;font-size:8px;
  fill:var(--ink3);font-weight:500}

.kir-liste{flex:1;min-width:0}
.kir-satir{display:grid;grid-template-columns:9px minmax(56px,1.25fr) 44px 76px 52px;
  align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--ciz2);font-size:12.5px}
.kir-satir:first-child{border-top:0}
/* Renk noktası dilimle listeyi bağlar. Renk TEK BAŞINA anlam taşımaz,
   yanında adı zaten yazılı. */
.kir-nokta{width:9px;height:9px;border-radius:3px;display:block}
.kir-ad{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kir-pay{text-align:right;color:var(--ink3);font-size:11.5px}
.kir-tutar{text-align:right;color:var(--ink2)}
.kir-sonuc{text-align:right;font-weight:600}
/* Payı düşük dilimde oran yazılmaz: birkaç yüz liralık bir dilimde tek
   satış, gerçeği yansıtmayan çok yüksek bir oran üretiyor. */
.kir-yetersiz{font-weight:400;font-size:10px;color:var(--ink3)}

@media(max-width:1080px){
  .kir-govde{flex-direction:column;align-items:stretch;gap:14px}
  .halka{align-self:center}
}
@media(max-width:920px){
  .kir{grid-template-columns:1fr}
  .kir-govde{flex-direction:row;align-items:center}
}
@media(max-width:640px){
  .kir-govde{flex-direction:column;align-items:stretch}
  .kir-satir{grid-template-columns:9px 1fr 44px 72px 48px}
}

/* ---------- 6. TÜM GÜNLER (katlanmış) ---------- */
.tum-gunler{margin-top:34px}
.tum-gunler summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink2);
  padding:14px 18px;background:var(--yuzey);border-radius:var(--r);box-shadow:var(--golge);
  list-style:none;display:flex;align-items:center;gap:9px}
.tum-gunler summary::-webkit-details-marker{display:none}
.tum-gunler summary:before{content:"";width:0;height:0;border-left:5px solid var(--ink3);
  border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .2s}
.tum-gunler[open] summary{border-radius:var(--r) var(--r) 0 0}
.tum-gunler[open] summary:before{transform:rotate(90deg)}
.tum-gunler .tablo-kutu{border-radius:0 0 var(--r) var(--r)}
.bos-gun{color:var(--ink3);font-style:italic}
.bos-kutu{background:var(--yuzey);border-radius:var(--r);padding:20px;color:var(--ink3);
  font-size:13.5px;box-shadow:var(--golge)}

@media(max-width:920px){
  .degisim-satir{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .ozet{margin-top:-46px;padding:24px 20px 22px;border-radius:20px}
  .ozet-cumle{max-width:none}
  /* ALT ALTA: yan yana kalınca `flex:1` kutusu 90px'e sıkışıyor, içindeki
     "1.196.187 TL" taşıyor ve SAYFA yatay kayıyordu. `flex-wrap` bunu
     çözmüyor, çünkü flex-basis 0 olan kutu her zaman daha da küçülebilir. */
  .ozet-alt{gap:22px;flex-direction:column;align-items:stretch}
  .ozet-rakam .dg{font-size:54px}
  .degisim{min-width:0;width:100%}
  .zaman{padding-left:22px}
  .yaptik .ilgili{padding-left:0}
  .yaptik .saat{min-width:auto}
  .kmp-satir{flex-wrap:wrap;gap:12px}
  .kmp-sonuc{width:100%;justify-content:flex-start;text-align:left;gap:26px}
}
@media print{
  .zaman-oge,.kmp-satir,.seyir{break-inside:avoid;box-shadow:none}
  .tum-gunler summary{display:none}
  .kmp-satir:hover{transform:none}
  .seyir:hover .sutun{opacity:1}
}

/* ================= ANALİZ BÖLÜMLERİ ================= */

/* ---------- araç şeridi: kısayol + serbest tarih + gruplama ---------- */
.arac{align-items:flex-start}
/* Tarih kutuları koyu zeminde: yerleşik takvim arayüzü koyu zeminde okunmuyor,
   o yüzden kutular açık kalıyor ama çerçeve saydam. */
.tarih{display:inline-flex;align-items:center;gap:6px;background:rgba(251,250,246,.08);
  border-radius:11px;padding:3px 4px 3px 8px;
  box-shadow:inset 0 0 0 1px rgba(251,250,246,.12)}
.tarih input[type=date]{width:auto;padding:5px 8px;font-size:12.5px;border-radius:7px;
  border:0;font-family:inherit;color:var(--ink);background:var(--yuzey)}
.tarih-ok{color:rgba(251,250,246,.45);font-size:13px}
.aralik.grup a{padding:7px 16px}

/* ---------- hacim şeridi ---------- */
.hacim{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:26px 0 4px}
.hacim-oge{background:var(--yuzey);border-radius:var(--r);padding:17px 19px;
  box-shadow:var(--golge)}
.hacim-oge .d{font-family:var(--display);font-size:clamp(22px,2.2vw,30px);font-weight:600;
  letter-spacing:-.03em;line-height:1.05}
.hacim-oge .e{font-size:12.5px;color:var(--ink2);font-weight:600;margin-top:6px}
.hacim-oge .a{font-size:11.5px;color:var(--ink3);margin-top:2px;line-height:1.45}

/* ---------- huni ---------- */
.huni{background:var(--yuzey);border-radius:var(--r);padding:22px 24px 10px;
  box-shadow:var(--golge)}
.huni-adim{margin-bottom:20px}
.huni-adim:last-child{margin-bottom:14px}
.huni-bas{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.huni-ad{font-size:13.5px;font-weight:600}
.huni-deger{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.025em}
/* Adımlar arası genişlik farkı gerçek oranı gösterir; en dar adım bile
   görünsün diye %0,6 taban var, yoksa satış çubuğu tamamen kayboluyor. */
.huni-cubuk{height:12px;background:var(--ciz2);border-radius:6px;margin:8px 0 6px;
  overflow:hidden}
.huni-cubuk i{display:block;height:100%;border-radius:6px;
  background:linear-gradient(90deg,var(--ana-acik),var(--ana))}
.huni-alt{font-size:11.5px;color:var(--ink3);display:flex;gap:10px;flex-wrap:wrap}
.huni-alt b{color:var(--ana-koyu);font-weight:650}
.huni-sag{display:flex;align-items:baseline;gap:9px}
/* Yüzde rozeti: adedin yanında, ondan daha sessiz. Adet "kaç kişi", yüzde
   "kaçta kaçı" sorusunu cevaplıyor; ikisi bir arada okunmalı. */
.huni-yuzde{font-size:12px;font-weight:650;color:var(--ana-koyu);
  background:var(--ana-yumusak);padding:3px 8px;border-radius:6px;
  font-variant-numeric:tabular-nums}
.huni-not{color:var(--ink3)}
/* Mağaza satırı huniden ÇİZGİYLE ayrılıyor: farklı kaynak, farklı blok. */
.huni-magaza{display:flex;justify-content:space-between;align-items:center;gap:14px;
  border-top:1px dashed var(--ciz);margin-top:4px;padding:15px 0 4px}
.hm-ad{display:block;font-size:13.5px;font-weight:600}
.hm-alt{display:block;font-size:11.5px;color:var(--ink3);margin-top:2px}
.hm-deger{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.025em;
  color:var(--ana-koyu)}

/* ---------- canlı seyir grafikleri ----------
   4 sütun ÇOK KÜÇÜKTÜ: çizgi okunmuyordu, tarih sığmıyordu. 2 sütun. */
.kucukler{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.kucuk-kart{background:var(--yuzey);border-radius:var(--r);padding:20px 22px 15px;
  box-shadow:var(--golge);margin:0}
.kucuk-bas{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin-bottom:6px;flex-wrap:wrap}
.kucuk-ad{font-size:13.5px;color:var(--ink2);font-weight:600}
.kucuk-deger{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.025em}
/* preserveAspectRatio serbest: dairelerin yumurtaya dönmemesi için ölçek
   iki eksende eşit kalmalı. */
.kucuk-kart svg{width:100%;height:auto;display:block;overflow:visible}
.kucuk-cizgi{stroke:var(--ana);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.kucuk-sutun{fill:var(--ana-acik)}
/* Müdahale ettiğimiz gün: sütun koyulaşır, üstüne de nokta konur. Yalnız
   renkle ayırmak yeterli değil (renk körlüğü + siyah beyaz çıktı). */
.kucuk-sutun.mudahaleli{fill:var(--ana)}
.mudahale-nokta{fill:var(--ana-koyu)}
/* Grafik başına tarih aralığı şeridi. JS kapalıysa gizli kalır: düğmeler
   hiçbir şey yapmazdı, bozuk görünürdü. */
.kucuk-aralik{display:none;gap:6px;flex-wrap:wrap;margin:2px 0 12px}
.js .kucuk-aralik{display:flex}
.kucuk-aralik button{font:inherit;font-size:11px;font-weight:600;color:var(--ink3);
  background:transparent;border:1px solid var(--ciz);border-radius:999px;
  padding:4px 11px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.kucuk-aralik button:hover{color:var(--ana-koyu);border-color:var(--ana-acik)}
.kucuk-aralik button.secili{background:var(--ana);border-color:var(--ana);color:var(--ink)}
.kucuk-aralik button:focus-visible{outline:2px solid var(--ana-koyu);outline-offset:2px}
/* ALAN DOLGUSU YOK. Dolgu tabanın sıfır olduğunu ima eder; bu grafiklerin
   tabanı en düşük değerdir ve o değer eksende YAZILI. */
.kizak{stroke:var(--ciz2);stroke-width:1}
.kizak.uc{stroke:var(--ciz)}
.kizak-yazi{fill:var(--ink3);font-size:11px;font-family:inherit;
  font-variant-numeric:tabular-nums}
.tarih-yazi{fill:var(--ink3);font-size:11px;font-family:inherit}
.kucuk-zirve{fill:var(--ana-koyu);stroke:var(--yuzey);stroke-width:2}
.kucuk-dip{fill:var(--yuzey);stroke:var(--ana);stroke-width:2.2}
.imlec{stroke:var(--ana-koyu);stroke-width:1;stroke-dasharray:3 3;opacity:0}
.imlec-nokta{fill:var(--ana-koyu);stroke:var(--yuzey);stroke-width:2.5;opacity:0}
.kucuk-kart svg.izleniyor .imlec,
.kucuk-kart svg.izleniyor .imlec-nokta{opacity:1}
.hedef{cursor:crosshair}
.kucuk-eksen{display:flex;justify-content:space-between;gap:10px;margin-top:10px;
  padding-top:9px;border-top:1px solid var(--ciz2);
  font-size:11.5px;color:var(--ink2);font-variant-numeric:tabular-nums}
.kucuk-eksen i{font-style:normal;color:var(--ink3)}

/* ---------- haftanın günleri ---------- */
.haftalik{background:var(--yuzey);border-radius:var(--r);padding:8px 22px;
  box-shadow:var(--golge)}
.hg-satir{display:grid;grid-template-columns:120px 1fr 90px 110px;gap:16px;
  align-items:center;padding:13px 0;border-bottom:1px solid var(--ciz2)}
.hg-satir:last-child{border-bottom:0}
.hg-ad{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.hg-rz{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--ana);color:var(--ink);padding:2px 7px;border-radius:5px}
.hg-cubuk{height:9px;background:var(--ciz2);border-radius:5px;overflow:hidden}
.hg-cubuk i{display:block;height:100%;background:var(--ana-acik);border-radius:5px}
.hg-satir.en-iyi .hg-cubuk i{background:var(--ana)}
.hg-sonuc{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.02em;
  text-align:right}
.hg-harcama{font-size:12.5px;color:var(--ink3);text-align:right}

@media(max-width:920px){
  .hacim{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kucukler{grid-template-columns:1fr}
}
@media(max-width:640px){
  .arac-sol,.arac-sag{width:100%}
  .tarih{width:100%;justify-content:space-between}
  .tarih input[type=date]{flex:1;min-width:0}
  .aralik.grup{width:100%}
  .aralik.grup a{flex:1;text-align:center}
  .hacim{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kucuk-kart{padding:16px 15px 12px}
  .huni{padding:18px 18px 6px}
  .hg-satir{grid-template-columns:1fr 1fr;gap:8px 14px}
  .hg-cubuk{grid-column:1 / -1;order:3}
  .hg-sonuc{text-align:left}
  .hg-harcama{text-align:right}
}
@media print{
  .tarih,.aralik.grup{display:none !important}
  .huni,.kucuk-kart,.haftalik,.hacim-oge{break-inside:avoid;box-shadow:none}
}

/* ---------- TALEPLER + VIDEOLAR ---------- */
.talep-liste{display:grid;gap:8px;margin-top:6px}
.talep-satir{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:13px 16px;background:var(--kagit);border-radius:12px;
  text-decoration:none;color:var(--ink);transition:background .15s}
a.talep-satir:hover{background:var(--ana-yumusak)}
.talep-baslik{font-weight:600;min-width:0}
.talep-musteri{font-size:12px;color:var(--ana-koyu);font-weight:600}
.talep-meta{margin-left:auto;font-size:12px;color:var(--ink2);white-space:nowrap}
.video-not{flex-basis:100%;font-size:12.5px;color:var(--ink2)}
.video-islem{display:flex;gap:8px;align-items:center}

/* Konusma akisi: musteri solda kagit, ajans sagda altin fisilti. Renk tek
   basina anlam tasimaz; kimin yazdigi her mesajin basliginda yazili. */
.talep-akis{display:grid;gap:10px;margin-top:20px}
.talep-mesaj{background:var(--yuzey);border-radius:var(--r);padding:15px 18px;
  box-shadow:var(--golge);max-width:76ch}
.talep-mesaj.ajanstan{background:var(--ana-yumusak);margin-left:auto}
.talep-kim{font-size:12px;font-weight:700;color:var(--ink2);margin-bottom:6px;
  display:flex;gap:10px;align-items:baseline}
.talep-kim .sayi{font-weight:400;color:var(--ink3)}
.talep-metin{white-space:pre-wrap;line-height:1.65;font-size:14.5px}

/* Yukleme cubugu */
.yukleme-cubugu{display:flex;align-items:center;gap:12px;margin-top:14px}
.yc-zemin{flex:1;height:8px;background:var(--ciz2);border-radius:5px;overflow:hidden}
.yc-zemin i{display:block;height:100%;width:0;background:var(--ana);
  transition:width .3s ease}
.yukleme-cubugu .sayi{font-size:12.5px;color:var(--ink2);min-width:86px}

/* Gunluk musteri girisi (mesaj kampanyasi) */
.gunluk-kutu{background:var(--yuzey);border-radius:var(--r);padding:20px 22px;
  box-shadow:var(--golge);margin-top:20px}
.gunluk-kutu h3{font-family:var(--display);font-size:17px;margin-bottom:4px}
.gunluk-kutu .gk-alt{font-size:12.5px;color:var(--ink3);margin-bottom:12px}
.gunluk-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.gunluk-form>div{display:flex;flex-direction:column}
.gunluk-form label{margin:0 0 5px}
.gunluk-form input[type=date]{width:170px}
.gunluk-form input[type=number]{width:120px}
.gunluk-form input[type=text]{width:260px}
.gunluk-gecmis{margin-top:14px;border-top:1px solid var(--ciz2);padding-top:10px;
  display:grid;gap:5px}
.gunluk-gecmis div{display:flex;gap:12px;font-size:13px}
.gunluk-gecmis b{min-width:96px}
.gunluk-gecmis span{color:var(--ink3)}