/* ALP tasarım sistemi v3: belirteçler + bileşenler.
   Site, müşteri paneli, ajans paneli ve yönetim paneli bu dosyayı aynen kullanır.
   Yeni bileşen yalnız buraya eklenerek ve TASARIM_SISTEMI.md'ye yazılarak doğar. */
/* Yazı tipleri (yerel, OFL) */
@font-face{font-family:"Funnel Display";src:url(fontlar/funnel-display-latin-wght-normal.woff2) format("woff2");font-weight:300 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Funnel Display";src:url(fontlar/funnel-display-latin-ext-wght-normal.woff2) format("woff2");font-weight:300 800;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Onest";src:url(fontlar/onest-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";src:url(fontlar/onest-latin-ext-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* RENK: yayın gecesi zemini + logodaki camgöbeği tek vurgu. Oranlar --gece üstünde. */
  --gece:#0C1220;        /* sayfa zemini */
  --gece-2:#111A2C;      /* ikinci bölüm zemini, yer tutucu */
  --panel:#16203A;       /* yüzey: kart, form, paket */
  --panel-2:#1C2846;     /* yüzey üstünde yüzey: tablo başlığı */
  --cizgi:#25314C;       /* ince ayraç */
  --cizgi-2:#34425F;     /* kenarlık, alan çerçevesi */
  --metin:#EAF0F7;       /* ana metin: 16.3:1 gece, 12.7:1 panel-2 */
  --metin-2:#A3AFC4;     /* ikincil: 8.45:1 gece, 6.58:1 panel-2 */
  --metin-3:#8592AA;     /* üçüncül, not: 5.96:1 gece, 4.64:1 panel-2; 13 px altı yok */
  --vurgu:#52D8F2;       /* tek vurgu: ana düğme, odak, seçili */
  --vurgu-acik:#7FE3F6;  /* ana düğme hover */
  --vurgu-koyu:#062330;  /* vurgu zemin üstündeki yazı */
  --vurgu-zemin:rgba(82,216,242,.09);
  --vurgu-cizgi:rgba(82,216,242,.38);
  /* DURUM renkleri yalnız durum bildirir (süs değildir) */
  --basari:#5FD3A0;  --uyari:#F2C062;  --hata:#FF9E8F;
  /* YAZI */
  --f-baslik:"Funnel Display",ui-sans-serif,system-ui,sans-serif;
  --f-govde:"Onest",ui-sans-serif,system-ui,sans-serif;
  --y-dev:clamp(44px,7.4vw,96px);   /* ilk ekran başlığı */
  --y-h2:clamp(34px,4.2vw,54px);    /* bölüm başlığı */
  --y-h3:clamp(26px,3vw,40px);      /* alt başlık */
  --y-h4:18px;                      /* kart/öğe başlığı (gövde ailesi, 600) */
  --y-giris:18px; --y-govde:17px; --y-kucuk:15px; --y-not:14px; --y-en-kucuk:13px;
  /* BOŞLUK (4 tabanlı) */
  --b-1:4px; --b-2:8px; --b-3:12px; --b-4:16px; --b-5:24px; --b-6:32px; --b-7:48px; --b-8:64px; --b-9:96px;
  --bolum:clamp(72px,9vw,128px);
  /* DÜZEN */
  --kap:1200px; --yan:clamp(20px,4vw,40px);
  /* KÖŞE: büyüklük hiyerarşiye göre */
  --r-kucuk:8px; --r-orta:12px; --r-buyuk:18px; --r-hap:999px;
  /* GÖLGE: yalnız kenarı taşan ekran görüntüsü ve açılır katman */
  --g-katman:0 24px 60px -24px rgba(0,0,0,.6);
  /* HAREKET */
  --h-hizli:.15s; --h-orta:.25s; --h-egri:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--gece);color:var(--metin);font-family:var(--f-govde);font-size:var(--y-govde);line-height:1.6;font-feature-settings:"ss01" 0;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3{font-family:var(--f-baslik);margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
.kap{max-width:calc(var(--kap) + 2*var(--yan));margin:0 auto;padding:0 var(--yan)}
.gizli{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--vurgu);outline-offset:3px;border-radius:6px}
.atla{position:absolute;left:12px;top:-60px;background:var(--vurgu);color:var(--vurgu-koyu);padding:10px 14px;border-radius:8px;z-index:50;font-weight:600}
.atla:focus{top:12px}

/* Düğmeler */
.dug{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:10px;font:600 16px/1 var(--f-govde);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,transform .15s}
.dug-ana{background:var(--vurgu);color:var(--vurgu-koyu)}
.dug-ana:hover{background:var(--vurgu-acik)}
.dug-ana:active{transform:translateY(1px)}
.dug-ikincil{background:transparent;color:var(--metin);border-color:var(--cizgi-2)}
.dug-ikincil:hover{border-color:var(--metin-3);background:rgba(255,255,255,.03)}
/* Pasif düğme: saydamlık yok; kesik çerçeve + okunur gri yazı (--metin-3 / --gece-2 = 5,6:1). Her türde aynı. */
.dug[disabled],.dug[aria-disabled="true"]{background:var(--gece-2);color:var(--metin-3);border:1px dashed var(--cizgi-2);cursor:not-allowed;pointer-events:none;transform:none}
.dug-kucuk{height:38px;padding:0 16px;font-size:15px;border-radius:9px}

/* Vizör çerçevesi: kayıt vizörünün köşe işaretleri. Bütün görsel ve yer tutucular bununla çerçevelenir. */
.vizor{position:relative;padding:10px}
.vizor::before,.vizor::after,.vizor>.k1,.vizor>.k2{content:"";position:absolute;width:18px;height:18px;border-color:var(--cizgi-2);border-style:solid;pointer-events:none}
.vizor::before{top:0;left:0;border-width:1.5px 0 0 1.5px}
.vizor::after{top:0;right:0;border-width:1.5px 1.5px 0 0}
.vizor>.k1{bottom:0;left:0;border-width:0 0 1.5px 1.5px}
.vizor>.k2{bottom:0;right:0;border-width:0 1.5px 1.5px 0}
.vizor .ic{border-radius:var(--r-kucuk);overflow:hidden;background:var(--gece-2);border:1px solid var(--cizgi)}
.vizor .ic img{width:100%}
.medya-f{margin:0}
.medya-f>figcaption{padding:0 10px}
.alt-yazi{margin-top:10px;font-size:14px;color:var(--metin-3);line-height:1.45}

/* Yer tutucu: henüz çekilmemiş görsel */
.yer{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-height:220px;padding:22px;background:
  repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 12px,transparent 12px 24px),var(--gece-2)}
.yer .tur{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--vurgu)}
.yer .tur svg{flex:none}
.yer .ne{font:500 19px/1.3 var(--f-baslik);color:var(--metin);max-width:34ch}
.yer .not{font-size:14px;color:var(--metin-3)}

/* Akordeon */
.sss-ic{display:grid;grid-template-columns:4fr 8fr;gap:48px}
.sss-grup+.sss-grup{margin-top:40px}
.sss-grup>h3{font:600 15px/1 var(--f-govde);color:var(--metin-3);margin-bottom:6px}
details{border-bottom:1px solid var(--cizgi)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0;font:500 18px/1.4 var(--f-govde);color:var(--metin);border-radius:6px}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--vurgu)}
summary .arti{flex:none;width:22px;height:22px;position:relative;color:var(--metin-3)}
summary .arti::before,summary .arti::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:transform .2s}
summary .arti::after{transform:translate(-50%,-50%) rotate(90deg)}
details[open] summary .arti::after{transform:translate(-50%,-50%) rotate(0deg)}
details .cevap{padding:0 40px 22px 0;color:var(--metin-2);max-width:64ch}

/* Formlar */
.form{border:1px solid var(--cizgi-2);border-radius:var(--r-buyuk);padding:clamp(24px,3vw,36px);background:var(--panel)}
.form h3{font:600 24px/1.2 var(--f-baslik);letter-spacing:-.015em}
.form .giris{margin-top:8px;color:var(--metin-2);font-size:16px}
.alanlar{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.alan{display:grid;gap:7px;align-content:start}
.alan.genis{grid-column:1/-1}
.alan label{font-size:14px;color:var(--metin-2)}
.alan label small{color:var(--metin-3);font-size:14px}
input[type=email],input[type=text],input[type=tel],select,textarea{width:100%;height:46px;padding:0 14px;border-radius:9px;border:1px solid var(--cizgi-2);background:var(--gece);color:var(--metin);font:400 16px/1.2 var(--f-govde);transition:border-color .15s,box-shadow .15s}
textarea{height:96px;padding:12px 14px;resize:vertical;line-height:1.5}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23A3AFC4' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
input::placeholder,textarea::placeholder{color:#7A87A0}
input:hover,select:hover,textarea:hover{border-color:var(--metin-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--vurgu);box-shadow:0 0 0 3px rgba(82,216,242,.18)}
.onay{display:flex;gap:12px;align-items:flex-start;margin-top:18px;font-size:14px;color:var(--metin-2);line-height:1.5;cursor:pointer}
.onay input{flex:none;appearance:none;width:20px;height:20px;margin:1px 0 0;border:1.5px solid var(--cizgi-2);border-radius:5px;background:var(--gece);cursor:pointer;display:grid;place-items:center;transition:background-color .15s,border-color .15s}
.onay input:checked{background:var(--vurgu);border-color:var(--vurgu)}
.onay input:checked::after{content:"";width:10px;height:6px;border:2px solid var(--vurgu-koyu);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.onay a{color:var(--metin);text-underline-offset:3px}
.form .dug{margin-top:22px}
.form .alt-not{margin-top:12px;font-size:14px;color:var(--metin-3)}
.tek-satir{display:flex;gap:10px;margin-top:24px}
.tek-satir input{flex:1}
.tek-satir .dug{margin-top:0}

/* Rozet: kısa durum/etiket. Tür: (düz), vurgu, basari, uyari, hata; nokta = canlı durum */
.rozet{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-hap);font:500 13px/1 var(--f-govde);border:1px solid var(--cizgi-2);color:var(--metin-2);white-space:nowrap;vertical-align:2px}
.rozet-vurgu{color:var(--vurgu);border-color:var(--vurgu-cizgi)}
.rozet-basari{color:var(--basari);border-color:rgba(95,211,160,.4)}
.rozet-uyari{color:var(--uyari);border-color:rgba(242,192,98,.4)}
.rozet-hata{color:var(--hata);border-color:rgba(255,158,143,.4)}
.rozet-nokta::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
/* Eksik bilgi işareti (yayından önce dolar) */
.doldur{display:inline-block;font-size:13px;color:var(--metin-3);border:1px dashed var(--cizgi-2);border-radius:6px;padding:1px 8px;vertical-align:1px}

/* Kart: içerik kümesi. Kart içinde kart yok; gölge yok, kenarlık var. */
.kart{background:var(--panel);border:1px solid var(--cizgi-2);border-radius:var(--r-buyuk);padding:clamp(20px,3vw,32px)}
.kart-bas{display:flex;justify-content:space-between;align-items:center;gap:var(--b-4);margin-bottom:var(--b-4)}
.kart-bas h3{font:600 var(--y-h4)/1.3 var(--f-govde);letter-spacing:-.005em}
.kart-bas p{font-size:var(--y-not);color:var(--metin-3)}
.kart-sayi{font:600 40px/1 var(--f-baslik);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kart-sayi small{font:400 var(--y-kucuk)/1 var(--f-govde);color:var(--metin-2);letter-spacing:0;margin-left:4px}
.kart-not{margin-top:10px;font-size:var(--y-not);color:var(--metin-2)}

/* Tablo: listeler (lisanslar, yayıncılar, ödemeler). Sayılar sağa, eşit genişlik rakam. */
.tablo-kap{border:1px solid var(--cizgi-2);border-radius:var(--r-orta);overflow-x:auto;background:var(--panel)}
.tablo{width:100%;border-collapse:collapse;font-size:var(--y-kucuk)}
.tablo th{text-align:left;font-weight:500;color:var(--metin-2);background:var(--panel-2);padding:12px 16px;border-bottom:1px solid var(--cizgi-2);white-space:nowrap}
.tablo td{padding:14px 16px;border-bottom:1px solid var(--cizgi);color:var(--metin);vertical-align:middle;white-space:nowrap}
.tablo tr:last-child td{border-bottom:0}
.tablo tbody tr:hover td{background:rgba(255,255,255,.02)}
.tablo .sayi{text-align:right;font-variant-numeric:tabular-nums}
.tablo .ikincil{color:var(--metin-2)}

/* Seçim anahtarı: 2 seçenek arası geçiş (aylık/yıllık, bu yayın/bu hafta) */
.gecis{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border-radius:11px;background:var(--gece);border:1px solid var(--cizgi);position:relative}
.gecis button{position:relative;z-index:1;height:36px;padding:0 20px;border:0;background:none;color:var(--metin-2);font:500 15px/1 var(--f-govde);cursor:pointer;border-radius:8px;transition:color .2s}
.gecis button:hover,.gecis button[aria-pressed="true"]{color:var(--metin)}
.gecis .kay{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:8px;background:var(--cizgi-2);transition:transform var(--h-orta) var(--h-egri)}
.gecis[data-secili="2"] .kay{transform:translateX(100%)}

/* İleti: formun ya da işlemin sonucu */
.sonuc{margin-top:14px;font-size:15px;min-height:22px}
.sonuc.iyi{color:var(--basari)}
.sonuc.hata{color:var(--hata)}
.alan .hata-yazi{font-size:14px;color:var(--hata)}
.alan.hatali input{border-color:var(--hata)}

/* Dar ekran (bileşen düzeyi) */
@media (max-width:560px){
  .alanlar{grid-template-columns:1fr}
  .tek-satir{flex-direction:column}
  .tek-satir input{flex:none}
  .kart{padding:20px}
}

/* ===================================================================
   PANEL BİLEŞENLERİ (yönetim paneli 2026-10-10; müşteri ve ajans paneli de kullanır)
   =================================================================== */

/* Gezinti: panel yan menüsü. Seçili bölüm aria-current="page". */
.gez{display:grid;gap:2px;list-style:none;margin:0;padding:0}
.gez a,.gez button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:42px;padding:0 12px;border:0;border-radius:9px;background:none;text-decoration:none;color:var(--metin-2);font:400 16px/1.2 var(--f-govde);cursor:pointer;transition:color var(--h-hizli),background-color var(--h-hizli)}
.gez a:hover,.gez button:hover{color:var(--metin);background:rgba(255,255,255,.04)}
.gez a[aria-current="page"]{color:var(--metin);background:var(--vurgu-zemin);box-shadow:inset 2px 0 0 var(--vurgu)}
.gez .ayrac{height:1px;background:var(--cizgi);margin:10px 4px}

/* Alt gezinti: telefonda ekranın altında sabit 5 bölüm; yalnız yazı, ikon yok. */
.alt-gez{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:var(--gece);border-top:1px solid var(--cizgi)}
.alt-gez a,.alt-gez button{position:relative;display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 2px;border:0;border-radius:9px;background:none;color:var(--metin-2);font:500 14px/1.1 var(--f-govde);text-decoration:none;text-align:center;cursor:pointer}
.alt-gez [aria-current="page"]{color:var(--metin);background:var(--vurgu-zemin)}
.alt-gez [aria-current="page"]::before{content:"";position:absolute;top:-7px;left:25%;right:25%;height:2px;border-radius:2px;background:var(--vurgu)}

/* Tuş: klavye kısayolu gösterimi (Ctrl K). */
.tus{display:inline-flex;align-items:center;height:24px;padding:0 7px;border:1px solid var(--cizgi-2);border-bottom-width:2px;border-radius:6px;font:500 14px/1 var(--f-govde);color:var(--metin-2);white-space:nowrap}

/* Bant: sayfanın üstünde işi durduran durum ya da kaydetmeden önceki özet. */
.bant{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;border:1px solid var(--cizgi-2);border-radius:var(--r-orta);padding:16px 20px;background:var(--panel)}
.bant-hata{border-color:rgba(255,158,143,.55);background:rgba(255,158,143,.07)}
.bant-uyari{border-color:rgba(242,192,98,.5);background:rgba(242,192,98,.06)}
.bant b{display:block;font-weight:600;font-size:17px;color:var(--metin)}
.bant-hata b{color:var(--hata)}
.bant-uyari b{color:var(--uyari)}
.bant p{font-size:15px;color:var(--metin-2);margin-top:4px;max-width:72ch}

/* Tehlikeli düğme: müşteriyi durduran eylem. Ana düğme sayılmaz. .dolu yalnız onay penceresinin son düğmesi (#2A0E0A / --hata 9,9:1). */
.dug-tehlike{background:transparent;color:var(--hata);border-color:rgba(255,158,143,.45)}
.dug-tehlike:hover{background:rgba(255,158,143,.08);border-color:var(--hata)}
.dug-tehlike.dolu{background:var(--hata);color:#2A0E0A;border-color:var(--hata)}

/* Pencere: onay, önizleme, arama paleti. <dialog> + showModal; gölge = --g-katman. */
.pencere{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:clamp(20px,3vw,32px);border:1px solid var(--cizgi-2);border-radius:var(--r-buyuk);background:var(--panel);color:var(--metin);box-shadow:var(--g-katman)}
.pencere::backdrop{background:rgba(6,10,18,.74)}
.pencere h2{font:600 24px/1.2 var(--f-baslik);letter-spacing:-.015em}
.pencere .giris{margin-top:8px;color:var(--metin-2);font-size:16px}
.pencere .alt{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:24px}
@media (max-width:560px){.pencere .alt{flex-direction:column-reverse}.pencere .alt .dug{width:100%}}

/* Arama paleti (Ctrl K): pencerenin üst hizalı türü; tek büyük alan + gruplu sonuç listesi. */
.pencere.palet{width:min(640px,calc(100vw - 24px));padding:0;margin-top:10vh;overflow:hidden}
.palet input[type=search]{height:60px;border:0;border-bottom:1px solid var(--cizgi-2);border-radius:0;background:transparent;font-size:18px;padding:0 20px}
.palet input[type=search]:focus{box-shadow:none}
.palet-grup{padding:12px 20px 4px;font-size:14px;color:var(--metin-3)}
.palet-sonuc{list-style:none;margin:0;padding:0 8px 8px;max-height:min(420px,56dvh);overflow:auto}
.palet-sonuc a{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:48px;padding:6px 12px;border-radius:9px;text-decoration:none;color:var(--metin);font-size:16px}
.palet-sonuc a small{display:block;font-size:14px;color:var(--metin-2)}
.palet-sonuc a[aria-selected="true"],.palet-sonuc a:hover{background:var(--vurgu-zemin)}
.palet-alt{display:flex;flex-wrap:wrap;gap:8px 16px;padding:12px 20px;border-top:1px solid var(--cizgi);font-size:14px;color:var(--metin-3)}

/* Tanım listesi: bir kaydın alanları. */
.tanim{display:grid;grid-template-columns:minmax(112px,max-content) minmax(0,1fr);gap:10px 20px;margin:0;font-size:15px}
.tanim dt{color:var(--metin-2)}
.tanim dd{margin:0;color:var(--metin);min-width:0;overflow-wrap:anywhere}

/* Tek seferlik değer: aktivasyon kodu bir kez, tek satırda, vizör çerçevesinde. */
.tek-kod{padding:18px 8px;text-align:center;white-space:nowrap;font:600 min(26px,calc((100vw - 102px)/16.8))/1.25 var(--f-govde);letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--metin)}

/* İş listesi: "Dikkat gerektirenler"; her satır = durum + cümle + tek çözüm düğmesi. */
.is-liste{list-style:none;margin:0;padding:0;border:1px solid var(--cizgi-2);border-radius:var(--r-orta);background:var(--panel)}
.is-liste li{display:grid;grid-template-columns:140px minmax(0,1fr) auto;gap:8px 20px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--cizgi)}
.is-liste li:last-child{border-bottom:0}
.is-liste b{display:block;font-weight:500;font-size:16px;color:var(--metin)}
.is-liste p{font-size:14px;color:var(--metin-2);margin-top:2px}
@media (max-width:560px){.is-liste li{grid-template-columns:minmax(0,1fr);padding:16px}.is-liste .dug{width:100%}}

/* Zaman çizelgesi: kayıtların insan diliyle sırası (en yeni üstte). .onemli vurgu, .kotu hata noktası. */
.zaman{list-style:none;margin:0;padding:0}
.zaman li{position:relative;margin-left:5px;padding:0 0 20px 22px;border-left:1px solid var(--cizgi-2);font-size:16px;color:var(--metin);line-height:1.45}
.zaman li:last-child{border-left-color:transparent;padding-bottom:0}
.zaman li::before{content:"";position:absolute;left:-5px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--cizgi-2);box-shadow:0 0 0 3px var(--panel)}
.zaman li.onemli::before{background:var(--vurgu)}
.zaman li.kotu::before{background:var(--hata)}
.zaman time,.zaman .kim{display:block;font-size:14px;color:var(--metin-3);line-height:1.4}
.zaman-gun{font:500 14px/1 var(--f-govde);color:var(--metin-3);margin:4px 0 14px}

/* Tost: geri alınabilir işlemin ardından kısa ileti + "Geri al". Ekranın altında, gölgeli katman. */
.tost{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:12px 18px;width:max-content;max-width:calc(100vw - 24px);padding:10px 10px 10px 18px;border:1px solid var(--cizgi-2);border-radius:var(--r-orta);background:var(--panel-2);box-shadow:var(--g-katman);font-size:15px;color:var(--metin)}
.tost small{display:block;font-size:14px;color:var(--metin-2)}
.tost .dug{flex:none;white-space:nowrap}
@media (max-width:860px){.tost{left:12px;right:12px;bottom:80px;transform:none;width:auto}}

/* Tablo → kart: dar ekranda her satır bir kart; hücre etiketi data-e özniteliğinden. Kabı: .tablo-kap.kartlasir */
@media (max-width:560px){
  .tablo-kap.kartlasir{border:0;background:none;overflow:visible;border-radius:0}
  .kartlasir thead{display:none}
  .kartlasir .tablo,.kartlasir tbody,.kartlasir tr,.kartlasir td{display:block;width:100%}
  .kartlasir tr{border:1px solid var(--cizgi-2);border-radius:var(--r-orta);background:var(--panel);padding:8px 16px;margin-bottom:10px}
  .kartlasir .tablo td{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:7px 0;border:0;white-space:normal;text-align:right}
  .kartlasir .tablo td::before{content:attr(data-e);flex:none;color:var(--metin-2);text-align:left}
  .kartlasir .tablo td.bas{display:block;text-align:left;font-weight:600;font-size:16px;padding:6px 0 10px;margin-bottom:4px;border-bottom:1px solid var(--cizgi)}
  .kartlasir .tablo td.bas::before{content:none}
  .kartlasir .tablo tbody tr:hover td{background:none}
}

/* Çubuk grafik: aylık tutarlar; .bu = bu ay (vurgu), diğerleri çizgi rengi. Değer çubuğun üstünde yazılı. */
.cubuk{display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:clamp(6px,2vw,16px);align-items:end;height:220px}
.cubuk>div{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%;min-width:0}
.cubuk i{display:block;width:100%;max-width:64px;height:var(--h);min-height:4px;border-radius:6px 6px 2px 2px;background:var(--cizgi-2)}
.cubuk .bu i{background:var(--vurgu)}
.cubuk span{font-size:14px;color:var(--metin-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.cubuk em{font-style:normal;font-size:14px;color:var(--metin-3)}

/* Alan türü eki: tarih, sayı ve arama alanları metin alanıyla aynı görünür. */
input[type=date],input[type=datetime-local],input[type=number],input[type=search]{width:100%;height:46px;padding:0 14px;border-radius:9px;border:1px solid var(--cizgi-2);background:var(--gece);color:var(--metin);font:400 16px/1.2 var(--f-govde);color-scheme:dark}
input[type=date]:focus,input[type=datetime-local]:focus,input[type=number]:focus,input[type=search]:focus{outline:none;border-color:var(--vurgu);box-shadow:0 0 0 3px rgba(82,216,242,.18)}
/* Pasif düğme panel türlerinde de (tehlike/dolu) aynı görünsün: sonda, daha güçlü seçiciyle */
.dug.dug[disabled],.dug.dug[aria-disabled="true"]{background:var(--gece-2);color:var(--metin-3);border:1px dashed var(--cizgi-2)}