/* =====================================================================
   Spor Toto Asistan — ortak tasarim (v6, 2026-10-06)
   Onaylanan onizleme: tasarim/tasarim_v6_onizleme.html
   Renk anlamlari: lacivert = marka/secim, sari = tek ana aksiyon,
   kirmizi = SADECE canli/hata, yesil = SADECE dogru/kazandi.
   Sayfa ~%90 notr. Acik + koyu tema (sistem ayarina gore).
   Eski degisken adlari (--kart, --cizgi, --metin ...) geriye donuk
   uyumluluk icin yeni tokenlara baglidir; yeni kodda yeni adlari kullan.
   ===================================================================== */
:root{
  --bg:#F2F3F5; --card:#FFFFFF; --soft:#F5F6F8; --line:#E3E6EB; --line-2:#D3D8DF;
  --fg:#16191F; --fg-2:#454C57; --muted:#7A828E;
  --navy:#0F1C2E; --navy-2:#1A2B42; --navy-fg:#E9EEF5; --navy-mut:#8D9AAD;
  --pick:#1B3A66; --pick-fg:#FFFFFF; --pick-soft:rgba(27,58,102,.08);
  --cta:#FFC629; --cta-fg:#1A1405;
  --live:#E0263C; --live-soft:#FFF1F3;
  --win:#14894A; --win-soft:#E7F5EC;
  --warn:#B4610E; --warn-soft:#FFF4E5;
  --gold:#B7861B; --violet:#6B4FD8; --blue:#2463D9;
  --shadow:0 1px 2px rgba(15,28,46,.05);
  --shadow-lg:0 12px 32px -14px rgba(15,28,46,.35);
  --f-head:"Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"Barlow","Segoe UI",system-ui,-apple-system,sans-serif;

  /* geriye donuk uyumluluk (eski sayfa/JS stilleri) */
  --kart:var(--card); --cizgi:var(--line); --metin:var(--fg);
  --soluk:var(--fg-2); --soluk2:var(--muted);
  --vurgu:var(--pick); --vurgu2:var(--pick); --mavi:var(--blue); --mavi-koyu:var(--pick);
  --mor:var(--violet); --turuncu:var(--warn); --sari:var(--cta); --hata:var(--live);
  --golge-sm:var(--shadow); --golge:var(--shadow-lg); --golge-lg:var(--shadow-lg);
  --radius:12px; --radius-sm:8px;
  /* Hazir Kolon "altin bilet" karti (--bl-*) ve Spor Toto sayac karti (--tt-*): acik temada acik renkli ama one cikan */
  --bl-zemin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220' fill='none' stroke='%23B7861B' stroke-opacity='.16' stroke-width='2'%3E%3Ccircle cx='220' cy='220' r='70'/%3E%3Ccircle cx='220' cy='220' r='4' fill='%23B7861B' fill-opacity='.2'/%3E%3Cpath d='M0 220h220M220 0v220'/%3E%3Crect x='150' y='-2' width='72' height='60'/%3E%3C/svg%3E") right bottom/210px no-repeat,
    radial-gradient(110% 80% at 100% 0%,rgba(255,198,41,.38),rgba(255,198,41,0) 55%),radial-gradient(80% 60% at 0% 100%,rgba(255,226,140,.35),rgba(255,226,140,0) 60%),
    linear-gradient(160deg,#FFFDF5 0%,#FFF5D8 60%,#FFE9B3 100%);
  --bl-yazi:#1A1405; --bl-soluk:#7A5B12; --bl-vurgu:#A8730A; --bl-not:#9A8550;
  --bl-em:linear-gradient(90deg,#B7861B,#E0A100,#F5B300,#E0A100,#B7861B);
  --bl-hucre:rgba(183,134,27,.09); --bl-hucre-c:rgba(183,134,27,.2); --bl-hucre-dolu:#FFFFFF; --bl-hucre-yazi:#3D2A00;
  --bl-tara:rgba(240,163,0,.35); --bl-tara-c:rgba(214,150,0,.85);
  --bl-butce:rgba(183,134,27,.1); --bl-butce-c:rgba(183,134,27,.22);
  --bl-cizgi:rgba(183,134,27,.45); --bl-centik:rgba(214,150,0,.85); --bl-iz:rgba(183,134,27,.16);
  --bl-cta:linear-gradient(135deg,#21365A 0%,#0F1C2E 100%); --bl-cta-yazi:#FFD24A;
  --bl-cta-golge:0 10px 22px -10px rgba(15,28,46,.7),inset 0 1px 0 rgba(255,255,255,.12);
  --bl-isik:rgba(255,255,255,.55); --bl-folyo:soft-light; --bl-toz:200,140,0;
  --tt-zemin:radial-gradient(120% 90% at 100% 0%,rgba(36,99,217,.14),rgba(36,99,217,0) 55%),linear-gradient(160deg,#FFFFFF 0%,#EEF3FB 60%,#E3EBF8 100%);
  --tt-cerceve:#C8D5EA; --tt-golge:0 14px 30px -18px rgba(27,58,102,.5); --tt-yazi:#16191F; --tt-soluk:#5B6B84;
  --tt-ikon:#FFFFFF; --tt-pill:#1B3A66; --tt-pill-yazi:#FFFFFF; --tt-hucre:#FFFFFF; --tt-hucre-c:#D3DDEC; --tt-rakam:#1B3A66; --tt-alt:#7A8BA6;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0D1117; --card:#151A22; --soft:#1B212B; --line:#232A35; --line-2:#2E3744;
  --fg:#E8ECF1; --fg-2:#B8C0CB; --muted:#808A97;
  --navy:#0A1422; --navy-2:#13233A; --navy-fg:#E9EEF5; --navy-mut:#8D9AAD;
  --pick:#3A6FC4; --pick-fg:#FFFFFF; --pick-soft:rgba(58,111,196,.14);
  --live:#FF4D61; --live-soft:#2A161A;
  --win:#3CC47A; --win-soft:#132A1E;
  --warn:#F0A04B; --warn-soft:#2A2012;
  --gold:#E0AE45; --violet:#9B85F5; --blue:#5B90F0;
  --shadow:0 1px 2px rgba(0,0,0,.3);
  --shadow-lg:0 14px 34px -14px rgba(0,0,0,.7);

  --bl-zemin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220' fill='none' stroke='%23FFFFFF' stroke-opacity='.055' stroke-width='2'%3E%3Ccircle cx='220' cy='220' r='70'/%3E%3Ccircle cx='220' cy='220' r='4' fill='%23FFFFFF' fill-opacity='.08'/%3E%3Cpath d='M0 220h220M220 0v220'/%3E%3Crect x='150' y='-2' width='72' height='60'/%3E%3C/svg%3E") right bottom/210px no-repeat,
    radial-gradient(110% 80% at 100% 0%,rgba(255,198,41,.28),rgba(255,198,41,0) 55%),radial-gradient(80% 60% at 0% 100%,rgba(58,111,196,.3),rgba(58,111,196,0) 60%),
    linear-gradient(160deg,#182D50 0%,#0F1C2E 58%,#0A1421 100%);
  --bl-yazi:#FFFFFF; --bl-soluk:#8D9AAD; --bl-vurgu:#FFE27A; --bl-not:rgba(141,154,173,.75);
  --bl-em:linear-gradient(90deg,#F0A300,#FFE27A,#FFF7DC,#FFE27A,#F0A300);
  --bl-hucre:rgba(255,255,255,.06); --bl-hucre-c:rgba(255,255,255,.07); --bl-hucre-dolu:rgba(255,255,255,.1); --bl-hucre-yazi:#E9EEF5;
  --bl-tara:rgba(255,226,122,.4); --bl-tara-c:rgba(255,226,122,.8);
  --bl-butce:rgba(0,0,0,.25); --bl-butce-c:rgba(255,255,255,.08);
  --bl-cizgi:rgba(255,226,122,.28); --bl-centik:rgba(255,214,90,.75); --bl-iz:rgba(255,255,255,.09);
  --bl-cta:linear-gradient(135deg,#FFE27A 0%,#FFC629 45%,#F0A300 100%); --bl-cta-yazi:#1A1405;
  --bl-cta-golge:0 10px 22px -10px rgba(255,198,41,.95),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(160,95,0,.35);
  --bl-isik:rgba(255,232,170,.16); --bl-folyo:color-dodge; --bl-toz:255,214,90;
  --tt-zemin:var(--navy); --tt-cerceve:var(--navy); --tt-golge:none; --tt-yazi:var(--navy-fg); --tt-soluk:var(--navy-mut);
  --tt-ikon:var(--navy-2); --tt-pill:var(--navy-2); --tt-pill-yazi:var(--navy-fg); --tt-hucre:var(--navy-2); --tt-hucre-c:transparent; --tt-rakam:var(--navy-fg); --tt-alt:var(--navy-mut);
  color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0D1117; --card:#151A22; --soft:#1B212B; --line:#232A35; --line-2:#2E3744;
  --fg:#E8ECF1; --fg-2:#B8C0CB; --muted:#808A97;
  --navy:#0A1422; --navy-2:#13233A; --navy-fg:#E9EEF5; --navy-mut:#8D9AAD;
  --pick:#3A6FC4; --pick-fg:#FFFFFF; --pick-soft:rgba(58,111,196,.14);
  --live:#FF4D61; --live-soft:#2A161A;
  --win:#3CC47A; --win-soft:#132A1E;
  --warn:#F0A04B; --warn-soft:#2A2012;
  --gold:#E0AE45; --violet:#9B85F5; --blue:#5B90F0;
  --shadow:0 1px 2px rgba(0,0,0,.3);
  --shadow-lg:0 14px 34px -14px rgba(0,0,0,.7);
  --bl-zemin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220' fill='none' stroke='%23FFFFFF' stroke-opacity='.055' stroke-width='2'%3E%3Ccircle cx='220' cy='220' r='70'/%3E%3Ccircle cx='220' cy='220' r='4' fill='%23FFFFFF' fill-opacity='.08'/%3E%3Cpath d='M0 220h220M220 0v220'/%3E%3Crect x='150' y='-2' width='72' height='60'/%3E%3C/svg%3E") right bottom/210px no-repeat,
    radial-gradient(110% 80% at 100% 0%,rgba(255,198,41,.28),rgba(255,198,41,0) 55%),radial-gradient(80% 60% at 0% 100%,rgba(58,111,196,.3),rgba(58,111,196,0) 60%),
    linear-gradient(160deg,#182D50 0%,#0F1C2E 58%,#0A1421 100%);
  --bl-yazi:#FFFFFF; --bl-soluk:#8D9AAD; --bl-vurgu:#FFE27A; --bl-not:rgba(141,154,173,.75);
  --bl-em:linear-gradient(90deg,#F0A300,#FFE27A,#FFF7DC,#FFE27A,#F0A300);
  --bl-hucre:rgba(255,255,255,.06); --bl-hucre-c:rgba(255,255,255,.07); --bl-hucre-dolu:rgba(255,255,255,.1); --bl-hucre-yazi:#E9EEF5;
  --bl-tara:rgba(255,226,122,.4); --bl-tara-c:rgba(255,226,122,.8);
  --bl-butce:rgba(0,0,0,.25); --bl-butce-c:rgba(255,255,255,.08);
  --bl-cizgi:rgba(255,226,122,.28); --bl-centik:rgba(255,214,90,.75); --bl-iz:rgba(255,255,255,.09);
  --bl-cta:linear-gradient(135deg,#FFE27A 0%,#FFC629 45%,#F0A300 100%); --bl-cta-yazi:#1A1405;
  --bl-cta-golge:0 10px 22px -10px rgba(255,198,41,.95),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(160,95,0,.35);
  --bl-isik:rgba(255,232,170,.16); --bl-folyo:color-dodge; --bl-toz:255,214,90;
  --tt-zemin:var(--navy); --tt-cerceve:var(--navy); --tt-golge:none; --tt-yazi:var(--navy-fg); --tt-soluk:var(--navy-mut);
  --tt-ikon:var(--navy-2); --tt-pill:var(--navy-2); --tt-pill-yazi:var(--navy-fg); --tt-hucre:var(--navy-2); --tt-hucre-c:transparent; --tt-rakam:var(--navy-fg); --tt-alt:var(--navy-mut);
  color-scheme:dark }

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font:400 15px/1.5 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:700;letter-spacing:.005em;text-wrap:balance}
.tn{font-variant-numeric:tabular-nums}
.gizli{display:none !important}
[id]{scroll-margin-top:76px}
@media (max-width:1100px){[id]{scroll-margin-top:120px}}

/* ---------- Ust bar (tum sayfalar) ---------- */
.st-top{background:var(--navy);color:var(--navy-fg);position:sticky;top:0;z-index:40}
.st-top-ic{max-width:1280px;margin:0 auto;padding:0 24px;min-height:60px;display:flex;align-items:center;gap:24px}
.st-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;border-radius:8px}
.st-logo img{display:block;border-radius:8px}
.st-logo b{font:700 21px/1 var(--f-head);letter-spacing:.01em;white-space:nowrap}
.st-logo b span{color:var(--cta)}
.st-nav{display:flex;align-self:stretch;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.st-nav::-webkit-scrollbar{display:none}
.st-nav .nav-oge{display:flex;align-items:center;gap:6px;padding:0 13px;font-weight:600;font-size:15px;color:var(--navy-mut);
  border:0;border-bottom:3px solid transparent;border-top:3px solid transparent;background:none;cursor:pointer;white-space:nowrap;font-family:var(--f-body)}
.st-nav .nav-oge:hover{color:var(--navy-fg)}
.st-nav .nav-oge.aktif{color:var(--navy-fg);border-bottom-color:var(--cta)}
.st-nav .nav-oge:focus-visible,.nav-daha-panel a:focus-visible{outline:2px solid var(--cta);outline-offset:-2px;border-radius:6px}
.st-nav .nav-daha svg{transition:transform .15s}
.st-nav .nav-daha[aria-expanded="true"]{color:var(--navy-fg)}
.st-nav .nav-daha[aria-expanded="true"] svg{transform:rotate(180deg)}
/* dar ekranda kaydirilabilir menunun kenar solmasi (ust-menu.js sinif verir) */
.st-nav.kayar-sag{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.st-nav.kayar-sol{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
.st-nav.kayar-sag.kayar-sol{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.nav-daha-panel{position:fixed;z-index:60;min-width:240px;padding:6px;border-radius:12px;background:var(--navy-2);
  border:1px solid rgba(255,255,255,.08);box-shadow:0 16px 36px -12px rgba(0,0,0,.55)}
.nav-daha-panel[hidden]{display:none}
.nav-daha-panel a{display:block;padding:10px 12px;border-radius:8px;color:var(--navy-fg);text-decoration:none}
.nav-daha-panel a:hover{background:rgba(255,255,255,.07)}
.nav-daha-panel a b{display:block;font:600 15px var(--f-body)}
.nav-daha-panel a span{display:block;font-size:12.5px;color:var(--navy-mut);margin-top:2px}
.st-sag{display:flex;align-items:center;gap:12px;flex-shrink:0;margin-left:auto}
.st-ikon-btn{width:38px;height:38px;border-radius:9px;background:var(--navy-2);color:var(--navy-fg);display:grid;place-items:center;cursor:pointer;border:0;font-size:16px}
.st-ikon-btn:hover{filter:brightness(1.2)}
@media (max-width:1100px){
  .st-top-ic{flex-wrap:wrap;gap:0 12px;padding:8px 16px 0}
  .st-sag{order:2}
  .st-nav{order:3;flex:1 1 100%;height:44px}
  .st-nav .nav-oge{padding:0 11px;font-size:14px}
}
@media (max-width:480px){
  .st-logo b{font-size:18px}
}
/* kucuk telefon (320-420px): logo + 3 buton tek satira sigsin */
@media (max-width:420px){
  .st-top-ic{padding:8px 12px 0;gap:0 8px}
  .st-logo{gap:8px}
  .st-logo img{width:28px;height:28px}
  .st-logo b{font-size:16px}
  .st-sag{gap:6px}
  .st-top .st-ikon-btn,.st-top .tema-anahtar{width:34px;height:34px}
  .st-top .hesap-rozet{padding:3px}
}

/* ---------- Temel bilesenler ---------- */
.st-sar{max-width:1280px;margin:0 auto;padding:24px 24px 56px}
@media (max-width:640px){.st-sar{padding:16px 16px 40px}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;min-width:0}
.panel-b{padding:16px 18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:8px;border:0;
  font-weight:700;font-size:14px;cursor:pointer;transition:filter .15s,transform .1s,border-color .15s;font-family:var(--f-body)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.05em;padding:3px 9px;border-radius:999px;text-transform:uppercase;background:var(--soft);color:var(--fg-2);white-space:nowrap}
.pill.canli{background:var(--live-soft);color:var(--live)}
.pill.kazandi{background:var(--win-soft);color:var(--win)}
.pill.secili{background:var(--pick-soft);color:var(--pick)}
.nokta{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;animation:st-yanip 1.6s infinite}
@keyframes st-yanip{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.nokta{animation:none}}
.st-footer{text-align:center;font-size:13px;color:var(--muted);padding:18px 16px 32px}
.st-footer a{color:var(--fg-2)}
.st-footer a:hover{text-decoration:underline}
.st-footer .yas{display:block;margin-top:6px;font-size:12px}
.st-sosyal{display:flex;justify-content:center;gap:10px;margin-bottom:12px}
.st-sosyal a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--soft);border:1px solid var(--line);color:var(--fg-2);transition:background .15s,color .15s}
.st-sosyal a:hover{text-decoration:none;color:#fff}
.st-sosyal a.yt:hover{background:#FF0000;border-color:#FF0000}
.st-sosyal a.tg:hover{background:#229ED9;border-color:#229ED9}
.st-sosyal a.x:hover{background:#000;border-color:#000}

/* Yuzen Telegram dugmesi (tum gorunumler). Kanal acilinca balon yerine kanala link olacak. */
.tg-yuzen{position:fixed;right:0;top:15%;z-index:35}
.tg-btn{display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:10px 0 0 10px;opacity:.85;background:#229ED9;color:#fff;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.tg-btn:hover{background:#1c8cc2;opacity:1}
.tg-btn svg{width:19px;height:19px}
.tg-balon{display:none;position:absolute;right:46px;top:50%;transform:translateY(-50%);width:220px;padding:10px 12px;border-radius:10px;background:var(--card);border:1px solid var(--line);box-shadow:0 4px 16px rgba(0,0,0,.14);font-size:12.5px;color:var(--muted)}
.tg-balon b{display:block;color:var(--fg);font-size:13.5px;margin-bottom:2px}
/* Telegram kanali acildi (2026-10-20): dugme artik link; balon fareyle uzerine gelince */
@media (hover:hover){.tg-yuzen:hover .tg-balon{display:block}}
/* dar ekranda ust kisimdaki seritlerin dugmesini kapatmasin: alta yakin */
@media (max-width:760px){.tg-yuzen{top:auto;bottom:22%}}

/* ===== Haftalik vitrin penceresi (js/vitrin.js, icerik static/img/vitrin/vitrin.json) ===== */
body.vt-kilit{overflow:hidden}
.vt-arka{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(8,12,20,.72);opacity:0;transition:opacity .2s ease}
.vt-arka.acik{opacity:1}
.vt-kutu{width:100%;max-width:560px;max-height:calc(100dvh - 32px);overflow:auto;border-radius:18px;
  background:var(--navy);color:var(--navy-fg);box-shadow:0 24px 60px -20px rgba(0,0,0,.7);
  transform:translateY(12px) scale(.98);transition:transform .25s ease}
.vt-arka.acik .vt-kutu{transform:none}
.vt-bas{display:flex;align-items:flex-start;gap:12px;padding:16px 16px 12px 20px}
.vt-baslik{flex:1;margin:0;font:700 20px/1.25 var(--f-head);color:#fff}
.vt-kapat{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);color:#fff;display:grid;place-items:center;cursor:pointer}
.vt-kapat:hover{background:rgba(255,255,255,.14)}
.vt-sahne{overflow:hidden;background:#000}
.vt-serit{display:flex;align-items:center;transition:transform .3s ease}
.vt-slayt{flex:0 0 100%;display:block}
.vt-slayt img{display:block;width:100%;height:auto;max-height:62dvh;object-fit:contain}
.vt-gez{display:flex;align-items:center;justify-content:center;gap:16px;padding:12px}
.vt-ok{width:44px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:transparent;
  color:#fff;font-size:24px;line-height:1;cursor:pointer}
.vt-noktalar{display:flex;gap:8px}
.vt-nokta{width:8px;height:8px;padding:0;border:0;border-radius:4px;background:var(--navy-mut);cursor:pointer;transition:width .2s}
.vt-nokta.aktif{width:24px;background:var(--cta)}
.vt-alt{padding:14px 20px 18px;border-top:1px solid rgba(255,255,255,.08)}
.vt-metin{margin:0 0 12px;font:500 15px/1.4 var(--f-body);color:var(--navy-fg)}
.vt-cta{display:block;text-align:center;padding:12px 16px;border-radius:12px;background:var(--cta);color:var(--cta-fg);
  font:700 16px/1.2 var(--f-head);text-decoration:none}
.vt-cta:hover{filter:brightness(1.05)}
.vt-not{margin:10px 0 0;font:400 12px/1.4 var(--f-body);color:var(--navy-mut)}
.vt-takip{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;font:600 13px var(--f-body);color:var(--navy-mut)}
.vt-takip a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff}
.vt-takip a:hover{background:rgba(255,255,255,.18)}
.vt-gizle{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:12px;font:500 14px var(--f-body);
  color:var(--navy-fg);cursor:pointer}
.vt-gizle input{width:18px;height:18px;accent-color:var(--cta)}
@media (prefers-reduced-motion: reduce){.vt-arka,.vt-kutu,.vt-serit{transition:none}}

/* ---- Hap dugme (.kisa-btn): ikonlu, animasyonlu ikincil dugme/baglanti. Turler:
   kb-tur (sari oynat + nabiz halkasi + parilti), kb-oz (yumusak ikon, hover'da doner; .kb-ok ziplar),
   kb-geri (geri oku sola itilir), kb-kucuk (metin icinde kucuk boy). Ornek: ana sayfa "Siteyi tani". ---- */
.kisa-btn { position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px 0 5px;
  border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--fg); font:600 13.5px var(--f-body);
  white-space:nowrap; cursor:pointer; box-shadow:0 1px 2px rgba(15,28,46,.06);
  transition:transform .18s cubic-bezier(.3,.7,.4,1.4), box-shadow .18s, border-color .18s; }
.kisa-btn:hover { transform:translateY(-2px); border-color:var(--pick); box-shadow:var(--shadow-lg); }
.kisa-btn:active { transform:translateY(0) scale(.97); }
.kisa-btn:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.kb-ikon { position:relative; flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; }
.kb-ikon svg { width:15px; height:15px; position:relative; z-index:1; }
/* Siteyi tani: sari daire, disinda yayilan nabiz halkasi */
.kb-tur .kb-ikon { background:var(--cta); color:var(--cta-fg); }
.kb-tur .kb-ikon svg { fill:currentColor; margin-left:2px; }
.kb-tur .kb-ikon::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--cta);
  animation:kb-nabiz 2.4s cubic-bezier(.2,.6,.3,1) infinite; }
.kb-rozet { padding:2px 7px; border-radius:999px; background:var(--pick-soft); color:var(--pick); font-size:11.5px; font-weight:700; }
/* gecerken parilti */
.kb-tur::before { content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-18deg); }
.kb-tur::before { animation:kb-parilti-bos 6s ease-in-out 2s infinite; }   /* arada bir kendiliginden parlar */
.kb-tur:hover::before { animation:kb-parilti .75s ease-out; }
.kb-tur:hover .kb-ikon { animation:kb-dur .5s ease-out; }
/* Diger ozellikler: yumusak ikon, ok asagi ziplar */
.kb-oz .kb-ikon { background:var(--pick-soft); color:var(--pick); transition:background .18s, color .18s, transform .3s; }
.kb-oz .kb-ikon svg { fill:none; stroke:currentColor; stroke-width:2; }
.kb-oz:hover .kb-ikon { background:var(--pick); color:var(--pick-fg); }
.kb-don:hover .kb-ikon { transform:rotate(90deg); }   /* simetrik ikonlar (izgara, arti) icin */
.kb-ok { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; color:var(--muted); }
.kb-oz:hover .kb-ok { color:var(--pick); animation:kb-zipla .8s ease-in-out infinite; }
@keyframes kb-nabiz { 0% { transform:scale(1); opacity:.75; } 70%,100% { transform:scale(1.75); opacity:0; } }
@keyframes kb-parilti { to { left:120%; } }
@keyframes kb-parilti-bos { 0%,82% { left:-60%; } 100% { left:120%; } }
@keyframes kb-dur { 0% { transform:scale(1); } 40% { transform:scale(1.18); } 100% { transform:scale(1); } }
@keyframes kb-zipla { 0%,100% { transform:translateY(0); } 50% { transform:translateY(3px); } }
@media (prefers-reduced-motion:reduce){
  .kisa-btn, .kb-ikon { transition:none; }
  .kb-tur .kb-ikon::after, .kb-tur::before, .kb-tur:hover::before, .kb-tur:hover .kb-ikon,
  .kb-oz:hover .kb-ok { animation:none; }
}
/* geri: ok sola kayar */
.kb-geri .kb-ikon { background:var(--soft); color:var(--fg-2); transition:background .18s, color .18s; }
.kb-geri .kb-ikon svg { fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.kb-geri:hover .kb-ikon { background:var(--pick); color:var(--pick-fg); }
.kb-geri:hover .kb-ikon svg { animation:kb-geri-it .8s ease-in-out infinite; }
@keyframes kb-geri-it { 0%,100% { transform:translateX(0); } 50% { transform:translateX(-3px); } }
/* metin icinde kucuk boy */
.kisa-btn.kb-kucuk { height:30px; gap:6px; padding:0 11px 0 3px; font-size:12.5px; vertical-align:middle; }
.kb-kucuk .kb-ikon { width:23px; height:23px; }
.kb-kucuk .kb-ikon svg { width:13px; height:13px; }
@media (prefers-reduced-motion:reduce){ .kb-geri:hover .kb-ikon svg { animation:none; } }

/* ---- Bildirim kutulari (tum gorunumler, 2026-10-22): .ok-kutu basari, .uyari-kutu dikkat, .hata-kutu hata,
   .bilgi-kutu notr bilgi. Solda renkli ikon rozeti, govde metni notr renkte; icerik serbest (p, b, a, dugme).
   Gorunum CSS'lerinde bu kutulari yeniden renklendirme -- sadece bosluk (margin) ayari yap. */
.ok-kutu, .uyari-kutu, .hata-kutu, .bilgi-kutu {
  --nt:var(--pick); position:relative; margin-top:10px; padding:11px 14px 11px 44px; border-radius:12px;
  font-size:13.5px; line-height:1.5; color:var(--fg); text-align:left;
  background:color-mix(in srgb,var(--nt) 7%,var(--card)); border:1px solid color-mix(in srgb,var(--nt) 24%,var(--line));
  box-shadow:0 1px 2px color-mix(in srgb,var(--nt) 10%,transparent); animation:nt-gir .22s ease-out;
}
.ok-kutu { --nt:var(--win); } .uyari-kutu { --nt:var(--warn); } .hata-kutu { --nt:var(--live); }
.ok-kutu::before, .uyari-kutu::before, .hata-kutu::before, .bilgi-kutu::before {
  content:""; position:absolute; left:12px; top:10px; width:22px; height:22px; border-radius:50%;
  background:color-mix(in srgb,var(--nt) 16%,transparent);
}
.ok-kutu::after, .uyari-kutu::after, .hata-kutu::after, .bilgi-kutu::after {
  content:""; position:absolute; left:16px; top:14px; width:14px; height:14px; background:var(--nt);
  -webkit-mask:var(--nt-ikon) center/contain no-repeat; mask:var(--nt-ikon) center/contain no-repeat;
}
.ok-kutu { --nt-ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.uyari-kutu { --nt-ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v9M12 19.5v.01'/%3E%3C/svg%3E"); }
.hata-kutu { --nt-ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }
.bilgi-kutu { --nt-ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 10.5V19M12 4.5v.01'/%3E%3C/svg%3E"); }
.ok-kutu b, .uyari-kutu b, .hata-kutu b, .bilgi-kutu b { color:var(--fg); font-weight:700; }
.ok-kutu a, .uyari-kutu a, .hata-kutu a, .bilgi-kutu a { color:var(--blue); font-weight:600; }
.ok-kutu:empty, .uyari-kutu:empty, .hata-kutu:empty, .bilgi-kutu:empty { display:none; }
td.ok-kutu, td.uyari-kutu, td.hata-kutu, td.bilgi-kutu { border-radius:0; box-shadow:none; animation:none; }
@keyframes nt-gir { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .ok-kutu, .uyari-kutu, .hata-kutu, .bilgi-kutu { animation:none; } }