/* Sönmez portal v3: yüzey A ("pano modülleri") ve hareket. Kaynak: tasarim/v3/yuzey-a.css ve hareket.js'in CSS'i,
   uygulama sınıflarına uyarlanmış hâli. portal.css'ten sonra, alan dosyalarından (bugun.css …) önce bağlanır.
   Kapsam: body.yz-a (kabuk.js; yönetici, muhasebeci, müşteri). Mühendis ekranları kapsam dışında, Faz 1 görünümünde.
   Maket → uygulama: .pn → .kabuk[data-duzen="panel"]; .ph → .kabuk[data-duzen="telefon"]; .ph-tabs → .sekmeler;
   .scrim / .ph-dim → <dialog>::backdrop; .dlg / .sheet aynı adla (ui/pencere.js, ui/yeni.js).
   Kancalar: .kart .kart-ana .kart-bas .kartlar .satir .satir.late .num .pp .drm .st-live .rt (ui/liste.js sekmeler)
   .cq .chip .seg .amt .g2 .dlg .sheet. Hareket ui/hareket.js'te; "hareketi azalt" açıkken hiçbir şey oynamaz
   (tokens.css genel kuralı + aşağıdaki no-preference sınırları). İçerik hiçbir zaman betik gelene kadar gizlenmez. */
:root{
  --yz-zemin:#E8ECEF;          /* modüllerin takıldığı plaka: board ile base arası soğuk gri */
  --yz-kp:28px;                /* kart iç boşluğu (yatay); satırlar ve plaka bu kadar taşar */
  --yz-r:3px;                  /* sac köşe: keskin, ama kesmiyor */
  --yz-kenar:#CDD5DB;          /* ikincil modül kenarı */
  --yz-plaka-acik:#F0F3F5;     /* ikincil blok plakası */
  --yz-plaka-yazi:#A9B6BF;     /* koyu plakadaki ikincil yazı (ink üstünde 7.6:1) */
  --yz-kasa-yazi:#C3CDD4;      /* koyu yan menü bağlantıları */
  --yz-kasa-soluk:#8D9DA9;     /* koyu yan menüde rol, alt yazı */
  --yz-kasa-cizgi:rgba(255,255,255,.12);
  --yz-satir-bg:#F4F7F9;
  --yz-satir-golge:inset 3px 0 0 var(--ink);
  --scrim:rgba(20,33,43,.46);
  /* hareket: şalter ritmi */
  --hz-gir:cubic-bezier(.2,0,0,1);
  --hz-std:cubic-bezier(.4,0,.2,1);
  --hz-cik:cubic-bezier(.4,0,1,1);
}

/* ---------- çerçeve: koyu kasa + gri plaka ---------- */
html:has(>body.yz-a),body.yz-a,.yz-a .kabuk,.yz-a .pn-main{background:var(--yz-zemin)}
.yz-a [data-duzen="panel"] .pn-side{background:var(--ink);border-right:0;color:var(--white)}
.yz-a [data-duzen="panel"] .pn-side .wm-a,.yz-a [data-duzen="panel"] .pn-side .wm{color:var(--white)}
.yz-a [data-duzen="panel"] .pn-side .wm-sub{color:var(--yz-kasa-soluk)}
.yz-a [data-duzen="panel"] .pn-nav a{color:var(--yz-kasa-yazi);transition:background-color 140ms var(--hz-std),color 140ms var(--hz-std)}
.yz-a [data-duzen="panel"] .pn-nav a:hover{background:rgba(255,255,255,.07);color:var(--white)}
.yz-a [data-duzen="panel"] .pn-nav a[aria-current="page"]{background:var(--white);color:var(--ink);box-shadow:none}
.yz-a [data-duzen="panel"] .pn-nav .n{background:var(--white);color:var(--ink)}
.yz-a [data-duzen="panel"] .pn-nav a[aria-current="page"] .n{background:var(--ink);color:var(--white)}  /* beyaz seçili satırda rozet kaybolmasın */
.yz-a [data-duzen="panel"] .pn-nav hr{background:var(--yz-kasa-cizgi)}
.yz-a [data-duzen="panel"] .pn-user{border-top-color:var(--yz-kasa-cizgi);color:var(--white)}
.yz-a [data-duzen="panel"] .pn-user>span,.yz-a [data-duzen="panel"] .pn-demo{color:var(--yz-kasa-soluk)}
.yz-a [data-duzen="panel"] .pn-side .demo-tag{border-color:rgba(255,255,255,.55);color:var(--white)}
.yz-a [data-duzen="panel"] .pn-side .zil{color:var(--white)}
.yz-a [data-duzen="panel"] .pn-side .zil:hover,.yz-a [data-duzen="panel"] .pn-side .zil[aria-expanded="true"]{background:rgba(255,255,255,.1)}
.yz-a [data-duzen="panel"] .pn-side .zil[aria-expanded="true"]{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.yz-a [data-duzen="panel"] .pn-side .zil-n{background:var(--white);color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.yz-a [data-duzen="panel"] .pn-side :focus-visible,
.yz-a [data-duzen="panel"] .pn-nav a[aria-current="page"]:focus-visible{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--white)}
.yz-a [data-duzen="panel"] .pn-main{padding-left:32px;padding-right:32px}  /* modülün kendi iç boşluğu dış boşluğun bir kısmını devralır */
.yz-a .pn-head{padding-bottom:28px;border-bottom:0}

/* ---------- telefon: gri plaka, üst çubuk açık, alt çubukta kırmızı "Yeni" ---------- */
.yz-a [data-duzen="telefon"] .pn-side{background:var(--yz-zemin)}
.yz-a [data-duzen="telefon"] .zil-n{box-shadow:0 0 0 2px var(--yz-zemin)}
.yz-a [data-duzen="telefon"] .pn-head{padding-bottom:20px}
.yz-a .sk{font-size:12px;letter-spacing:-.005em}
.sk.sk-yeni{color:var(--ink);font-weight:600;gap:2px}
.sk.sk-yeni .ic{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-top:-14px;border-radius:50%;background:var(--red);color:var(--white);box-shadow:0 0 0 4px var(--white);transition:background-color 140ms var(--hz-std)}
.sk.sk-yeni .sim{width:22px;height:22px;stroke-width:2.2}
.sk.sk-yeni:hover .ic,.sk.sk-yeni[aria-expanded="true"] .ic{background:var(--red-d)}
.sk.sk-yeni:focus-visible{box-shadow:none}
.sk.sk-yeni:focus-visible .ic{box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--ink)}
.yz-a .cekmece{border-radius:6px 6px 0 0}

/* ---------- sayılar ---------- */
/* Schibsted'in tabular figürleri nokta ve virgülü de rakam genişliğine açıyor ("18 . 900"): rakamlar eşit genişlikte,
   basamak ayırıcı (.pp) orantılı; sütun hizası bozulmaz. Yalnız ayırıcısı .pp'ye sarılmış tutarlar (ui/liste.js tutar →
   .tut) tabular olur: Faz 1 ekranlarının düz metinli td.num hücreleri ("82.800 ₺") olduğu gibi kalır. */
.tut,.num:has(>.pp){font-variant-numeric:tabular-nums lining-nums}
.pp{font-variant-numeric:proportional-nums lining-nums}

/* ---------- modüller ---------- */
.yz-a .kart{position:relative;isolation:isolate;margin:0;padding:0 var(--yz-kp) 6px;background:var(--white);border:1px solid var(--yz-kenar);border-radius:var(--yz-r)}
.yz-a .kart+.kart{margin-top:20px}
.yz-a .kart-bas{display:flex;align-items:center;gap:16px;min-height:50px;margin:0 calc(-1 * var(--yz-kp));padding:13px var(--yz-kp) 12px;background:var(--yz-plaka-acik);border-bottom:1px solid var(--hair);border-radius:calc(var(--yz-r) - 1px) calc(var(--yz-r) - 1px) 0 0}
.kart-bb{min-width:0}
.yz-a .kart-bas h2{font-size:17px;line-height:1.3;font-weight:600;letter-spacing:-.005em}
.yz-a .kart-bas p{margin-top:2px;font-size:14px;line-height:1.45;color:var(--steel)}
.yz-a .kart-bas .end{margin-left:auto;display:flex;align-items:center;gap:20px;font-size:14px}
/* plaka bağlantısı ("Teklifi aç", "İşler") başlık uzunken iki satıra bölünmez; başlık sarar (T18 denetimi, 390 px) */
.yz-a .kart-bas .end>.lnk{white-space:nowrap}
.yz-a .kart-n{margin-left:8px;font-weight:600;color:var(--steel)}
.yz-a .kartlar{display:grid;gap:20px;margin-top:20px;padding:0;border:0}
.yz-a .kartlar>.kart+.kart{margin-top:0}
/* ana modül: koyu isim plakası, plakadan bir adım önde */
.yz-a .kart-ana{border:0;box-shadow:0 0 0 1px rgba(20,33,43,.14),0 1px 2px rgba(20,33,43,.07),0 22px 40px -26px rgba(20,33,43,.55)}
.yz-a .kart-ana>.kart-bas{padding:20px var(--yz-kp) 16px;background:var(--ink);color:var(--white);border-bottom:0;border-radius:var(--yz-r) var(--yz-r) 0 0}
.yz-a .kart-ana>.kart-bas h2{font-size:24px;line-height:1.15;font-weight:700;letter-spacing:-.02em}
.yz-a .kart-ana>.kart-bas .kart-n{margin-left:10px;color:var(--yz-kasa-soluk)}
.yz-a .kart-ana>.kart-bas :is(p,small,.th,.meta){color:var(--yz-plaka-yazi)}
.yz-a .kart-ana>.kart-bas .lnk{color:var(--white)}
.yz-a .kart-ana>.kart-bas :focus-visible{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--white)}
.yz-a [data-duzen="telefon"] .kart{--yz-kp:16px}
.yz-a [data-duzen="telefon"] .kart+.kart{margin-top:16px}
.yz-a [data-duzen="telefon"] .kart-bas{padding-top:10px;padding-bottom:9px}
.yz-a [data-duzen="telefon"] .kart-ana>.kart-bas{padding:15px var(--yz-kp) 13px}
.yz-a [data-duzen="telefon"] .kart-ana>.kart-bas h2{font-size:20px;line-height:1.2;letter-spacing:-.015em}

/* ---------- satırlar ---------- */
/* Eylemli satır kartın kenarından kenarına şerit; vadesi geçen satırın (.late) kenarında 4 px kırmızı hat.
   Tablo satırında (<tr>) ::before fazladan hücre açıp sütunları kaydırır: hat ilk hücreden çizilir. */
.satir{position:relative}
.satir.late::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--fault);transform-origin:50% 0}
tr.satir.late::before{content:none}
tr.satir.late>:first-child{position:relative}
tr.satir.late>:first-child::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--fault);transform-origin:50% 0}
.yz-a .kart .satir{margin-left:calc(-1 * var(--yz-kp));margin-right:calc(-1 * var(--yz-kp));padding-left:var(--yz-kp);padding-right:var(--yz-kp)}
.yz-a .kart .satir:last-child{border-bottom:0}
.yz-a .kart .satir.late:has(+ .satir:not(.late)){border-bottom-color:var(--line)}  /* vadesi geçen grubun altı daha belirgin */
@media (hover:hover){
  .yz-a .satir{transition:background-color 160ms var(--hz-std),box-shadow 160ms var(--hz-std)}
  .yz-a .satir:hover{background-color:var(--yz-satir-bg);box-shadow:var(--yz-satir-golge)}
  .yz-a .satir:hover .btn-line{background:var(--ink);border-color:var(--ink);color:var(--white)}
  .yz-a .satir:hover .btn-ink{box-shadow:0 0 0 3px rgba(20,33,43,.16)}
}

/* ---------- düğme basma ---------- */
.yz-a .btn{transition:background-color 140ms var(--hz-std),border-color 140ms var(--hz-std),color 140ms var(--hz-std),box-shadow 160ms var(--hz-std),transform 140ms var(--hz-std)}
.yz-a .btn:not([disabled]):active{transform:translateY(1px) scale(.985);transition-duration:60ms}

/* ---------- durum ---------- */
.st-live::before{background:var(--red)}
.drm{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px}
.drm small{padding-left:16px;font-size:14px;line-height:1.4;color:var(--steel)}
@media (prefers-reduced-motion:no-preference){
  .st-live::before{animation:hz-nabiz 2.4s var(--hz-std) infinite}
}
@keyframes hz-nabiz{0%{box-shadow:0 0 0 0 rgba(200,16,46,.4)}70%,100%{box-shadow:0 0 0 6px rgba(200,16,46,0)}}

/* ---------- alt çizgili sekmeler (ui/liste.js sekmeler) ---------- */
/* Seçili sekmenin altında kendi çizgisi (::after); betik çizgiyi yerleştirince (.rt-kayar) tek çizgi seçilene kayar.
   Dar ekranda sekmeler yatay kayar; sayfa taşmaz. */
.rt{position:relative;display:flex;align-items:flex-end;gap:28px;overflow-x:auto;scrollbar-width:none;box-shadow:inset 0 -1px 0 var(--hair)}
.rt::-webkit-scrollbar{display:none}
.rt>a,.rt>button{position:relative;flex:none;display:inline-flex;align-items:center;gap:8px;padding:12px 0;border:0;border-radius:0;background:none;font-size:15px;font-weight:600;line-height:1.3;color:var(--steel);text-decoration:none;white-space:nowrap;cursor:pointer}
.rt>a:hover,.rt>button:hover,.rt>[aria-current]{color:var(--ink)}
.rt>[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink)}
.rt>a:focus-visible,.rt>button:focus-visible{box-shadow:inset 0 0 0 2px var(--ink);border-radius:var(--r)}
.rt.rt-kayar>[aria-current]::after{visibility:hidden}
.rt-cizgi{position:absolute;left:0;bottom:0;width:1px;height:2px;background:var(--ink);transform-origin:0 50%;transition:transform 240ms var(--hz-std);pointer-events:none;visibility:hidden}
.rt.rt-kayar .rt-cizgi{visibility:visible}
.rt .c{font-weight:500;color:var(--steel)}
.rt .nb{height:22px;padding:0 9px;border-radius:11px;background:var(--ink);color:var(--white);font-size:13px;font-weight:600;line-height:22px}
.rt .hint{flex:none;margin-left:auto;padding:12px 0;font-size:14px;color:var(--steel);white-space:nowrap}
/* telefon: sekmeler kaydırıcıda değil, sığmayan alt satıra geçer; hiçbir sekme kenarda kesilmez (T18 fix 1: cari kartta
   "Tesisler", Ayarlar'da "Firma ve e-Fatura" kesik ve kaydırılabileceği belli değildi). Kayan çizgi tek satırı bilir: telefonda
   seçili sekmenin kendi alt çizgisi görünür. */
.kabuk[data-duzen="telefon"] .rt{flex-wrap:wrap;column-gap:20px;row-gap:0;overflow:visible}
.kabuk[data-duzen="telefon"] .rt .rt-cizgi{display:none}
.kabuk[data-duzen="telefon"] .rt.rt-kayar>[aria-current]::after{visibility:visible}
.kabuk[data-duzen="telefon"] .rt .hint{flex-basis:100%;margin-left:0;padding-top:0;white-space:normal}

/* ---------- süzgeç çipi, sonuç cümlesi ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:1px solid var(--field);border-radius:var(--r);background:var(--white);font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap;cursor:pointer}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip span{font-weight:500;color:var(--steel)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.chip[aria-pressed="true"] span{color:var(--yz-plaka-yazi)}
.cq{padding:12px 16px;background:var(--base);border-left:3px solid var(--ink);font-size:15px;line-height:1.5;color:var(--ink)}
.cq:empty{padding:0;border:0}

/* ---------- pencere alanları (tutar, yöntem segmenti, iki sütun) ---------- */
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.inp.amt{display:flex;align-items:center;gap:8px}
.inp.amt:focus-within{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.amt input{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;text-align:right;font-size:20px;font-weight:600;letter-spacing:-.01em}
.amt input:focus,.amt input:focus-visible{outline:none;box-shadow:none}
.amt>span{font-size:16px;font-weight:500;color:var(--steel)}
/* yöntem segmenti: her seçenek yazısı kadar, artan yer eşit paylaşılır; sığmazsa satır kırılır ve her satır dolar.
   Ayırıcı çizgiler seçeneğin sol ve üst gölgesi: ilk sütunun ve ilk satırın çizgisi kutunun kenarında kırpılır. */
.seg{display:flex;flex-wrap:wrap;border:1px solid var(--field);border-radius:var(--r);background:var(--white);overflow:hidden}
.seg label{position:relative;display:block;flex:1 1 auto}
.seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;height:42px;padding:0 10px;box-shadow:-1px -1px 0 var(--line);font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap;cursor:pointer}
.seg input:checked+span{background:var(--ink);color:var(--white)}
.seg input:focus-visible+span{box-shadow:inset 0 0 0 2px var(--white),inset 0 0 0 4px var(--ink)}
@media (max-width:480px){
  .g2{grid-template-columns:minmax(0,1fr)}
}

/* ---------- pencere (.dlg) ve alt sayfa (.sheet): <dialog>, ui/pencere.js ---------- */
.dlg,.sheet{padding:0;border:0;background:var(--white);color:var(--ink)}
.dlg{width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 64px);margin:max(32px,8vh) auto auto;border-radius:4px;box-shadow:0 0 0 1px rgba(20,33,43,.14),0 28px 72px rgba(20,33,43,.34);overflow:hidden}
.dlg.dlg-genis{width:min(720px,calc(100vw - 32px))}
.dlg[open]{display:flex;flex-direction:column}
:is(.dlg,.sheet)::backdrop{background:var(--scrim)}
.dlg-ic{display:flex;flex:1;flex-direction:column;min-height:0}
.dlg-h{flex:none;display:flex;align-items:flex-start;gap:16px;padding:22px 28px 20px;border-bottom:1px solid var(--hair)}
.dlg-hb{min-width:0}
.dlg-h h2{font-size:24px;line-height:1.2;font-weight:700;letter-spacing:-.02em}
.dlg-h p{margin-top:4px;font-size:15px;line-height:1.45;color:var(--steel)}
.x{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin:-4px -8px 0 auto;padding:0;border:0;border-radius:var(--r);background:none;color:var(--ink);cursor:pointer}
.x:hover{background:var(--base)}
.x .sim{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.dlg-b{display:grid;gap:18px;min-height:0;overflow-y:auto;padding:22px 28px 24px}
.dlg-b .fld,.dlg-b .form-hata{margin-top:0}
.dlg-b .form-hata:empty{margin-top:-18px}
.dlg-f{flex:none;display:flex;align-items:center;gap:12px;padding:16px 28px 18px;border-top:1px solid var(--hair)}
.dlg-f p{flex:0 1 auto;min-width:0;max-width:24em;font-size:14px;line-height:1.45;color:var(--steel)}
.dlg-f .btn{flex:none}
.dlg-f .btn:first-of-type{margin-left:auto}
.dlg .btn[aria-disabled="true"]{opacity:.72}
.yz-a .dlg{border-radius:var(--yz-r);box-shadow:0 0 0 1px rgba(20,33,43,.2),0 30px 70px -20px rgba(20,33,43,.5)}
.yz-a .dlg:not(.sheet) .dlg-h{background:var(--ink);color:var(--white);border-bottom:0}
.yz-a .dlg:not(.sheet) .dlg-h p{color:var(--yz-plaka-yazi)}
.yz-a .dlg-h .x{color:var(--white)}
.yz-a .dlg-h .x:hover{background:rgba(255,255,255,.1)}
.yz-a .dlg-h .x:focus-visible{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--white)}
.yz-a .dlg:not(.sheet) .dlg-f{background:var(--yz-plaka-acik)}

/* alt sayfa: telefonda alttan açılır, alt çubuğun hemen üstünde durur (karartma alt çubuğu da örter; dokununca kapanır).
   Pencere kutusunun kendisinde iç boşluk YOK: boşluk ve tutamak içteki sarmalayıcıda (.sheet-ic; form alt sayfasında
   .dlg-ic). ui/pencere.js "dışarı"yı kutunun sınırına göre ölçer; kenar boşluğuna dokunmak sayfayı kapatmaz. */
.sheet{position:fixed;inset:auto 0 0;width:100%;max-width:560px;max-height:calc(100dvh - 48px);margin:0 auto;padding:0;border-radius:16px 16px 0 0;overflow-y:auto;overscroll-behavior:contain}
body:has(.kabuk[data-duzen="telefon"]) .sheet{bottom:calc(var(--tab-h) + env(safe-area-inset-bottom));max-height:calc(100dvh - var(--tab-h) - env(safe-area-inset-bottom) - 48px)}
.yz-a .sheet{border-radius:6px 6px 0 0}
.sheet-ic,.dlg.sheet .dlg-ic{padding:10px 20px calc(18px + env(safe-area-inset-bottom))}
body:has(.kabuk[data-duzen="telefon"]) :is(.sheet-ic,.dlg.sheet .dlg-ic){padding-bottom:18px}
:is(.sheet-ic,.dlg.sheet .dlg-ic)::before{content:"";flex:none;display:block;width:40px;height:4px;margin:0 auto 14px;border-radius:2px;background:var(--line)}
.sheet h2{font-size:18px;line-height:1.3;font-weight:700;letter-spacing:-.01em}
.sheet h2+p{margin-top:2px;font-size:14px;line-height:1.45;color:var(--steel)}
.sheet-acts{display:grid;gap:10px;margin-top:16px}
.sheet-acts .btn{height:52px;border-radius:4px;font-size:16px}
.sheet-x{display:block;width:100%;height:44px;margin-top:6px;padding:0;border:0;border-radius:var(--r);background:none;font-size:15px;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;cursor:pointer}
.sheet-x:hover{text-decoration-thickness:2px}
/* form alt sayfası: .dlg yapısı, plakasız; birincil düğme tam genişlikte, altında Vazgeç */
.dlg.sheet{width:100%;max-width:560px;margin:0 auto;border-radius:16px 16px 0 0;box-shadow:none;overflow:hidden}
.yz-a .dlg.sheet{border-radius:6px 6px 0 0}
.dlg.sheet .dlg-h{padding:0;border:0}
.dlg.sheet .dlg-h h2{font-size:18px;line-height:1.3;letter-spacing:-.01em}
.dlg.sheet .dlg-h p{margin-top:2px;font-size:14px}
.dlg.sheet .dlg-b{gap:14px;padding:14px 0 4px}
.dlg.sheet .dlg-b .form-hata:empty{margin-top:-14px}
.dlg.sheet .dlg-f{display:block;padding:12px 0 0;border:0}
.dlg.sheet .dlg-f p{margin-bottom:10px;font-size:13px;color:var(--ink-2)}
.dlg.sheet .dlg-f .btn{height:52px;margin:0;border-radius:4px;font-size:16px}
.dlg.sheet .dlg-f .sheet-x{margin-top:4px}

/* ---------- iletiler: yüzey A'da koyu, ikinci satırlı (ui/ileti.js alt) ---------- */
.ileti-m b{display:block;font-weight:600}
.ileti-m small{display:block;margin-top:1px;font-size:14px;color:var(--steel)}
.yz-a .ileti{background:var(--ink);border-color:var(--ink);color:var(--white);box-shadow:0 18px 40px -12px rgba(20,33,43,.6)}
.yz-a .ileti p{align-items:center}
.yz-a .ileti p::before{width:8px;height:8px;background:var(--yz-plaka-yazi);transform:none}
.yz-a .ileti-tamam p::before{width:22px;height:22px;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.8 8.3l2.7 2.7 5.7-6' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/14px no-repeat}
.yz-a .ileti-hata p::before{background:var(--red)}
.yz-a .ileti-bekliyor p::before{background:var(--wait)}
.yz-a .ileti-m small{color:var(--yz-plaka-yazi)}
.yz-a .ileti-x{background:rgba(255,255,255,.1);color:var(--white)}
.yz-a .ileti-x:hover{background:rgba(255,255,255,.18);color:var(--white)}
.yz-a .ileti-x:focus-visible{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--white)}

/* ---------- hareket ---------- */
/* Açılış (hareket.girisOynat): öğe yalnız kendi gecikmesi boyunca ilk karede durur (fill-mode backwards); betik hiç
   çalışmazsa .hz-o sınıfı yoktur ve her şey baştan görünür. */
@media (prefers-reduced-motion:no-preference){
  [data-hz="oyna"] .hz-o{animation:hz-otur var(--hz-s,240ms) var(--hz-gir) backwards;animation-delay:var(--hz-d,0ms)}
  [data-hz="oyna"] .satir.late.hz-o::before,
  [data-hz="oyna"] tr.satir.late.hz-o>:first-child::before{animation:hz-hat 240ms var(--hz-gir) backwards;animation-delay:calc(var(--hz-d,0ms) + 170ms)}
  /* pencere: açılış oturarak, kapanış (ui/pencere.js .hz-kapan) hızlanarak */
  :is(.dlg,.pencere)[open]{animation:hz-dlg-ac 240ms var(--hz-gir)}
  .sheet[open]{animation:hz-sheet-ac 240ms var(--hz-gir)}
  :is(.dlg,.sheet,.pencere)[open]::backdrop{animation:hz-perde-ac 180ms var(--hz-std)}
  :is(.dlg,.pencere)[open].hz-kapan{animation:hz-dlg-kapan 150ms var(--hz-cik) forwards}
  .sheet[open].hz-kapan{animation:hz-sheet-kapan 150ms var(--hz-cik) forwards}
  :is(.dlg,.sheet,.pencere)[open].hz-kapan::backdrop{animation:hz-perde-kapan 150ms var(--hz-cik) forwards}
}
@keyframes hz-otur{from{opacity:0;transform:translateY(var(--hz-y,8px))}}
@keyframes hz-hat{from{transform:scaleY(0)}}
@keyframes hz-dlg-ac{from{opacity:0;transform:translateY(10px) scale(.985)}}
@keyframes hz-sheet-ac{from{opacity:0;transform:translateY(28px)}}
@keyframes hz-perde-ac{from{opacity:0}}
@keyframes hz-dlg-kapan{to{opacity:0;transform:translateY(10px) scale(.985)}}
@keyframes hz-sheet-kapan{to{opacity:0;transform:translateY(28px)}}
@keyframes hz-perde-kapan{to{opacity:0}}
@media print{[data-hz] .hz-o,[data-hz] .hz-o::before{animation:none!important}}