/* ==========================================================================
   The Tactic Pad - temel katman: degiskenler, sifirlama, tipografi
   Sozlesme: docs/01-TASARIM.md
   ========================================================================== */

:root{
    /* zemin */
    --zemin-0:#080D18;
    --zemin-1:#0B1220;
    --zemin-2:#111A2B;
    --zemin-3:#18243A;
    --zemin-4:#1F2D46;
    --cizgi:#233149;
    --cizgi-parlak:#31435F;

    /* yazi */
    --yazi:#E8EEF7;
    --yazi-soluk:#9AAAC2;
    --yazi-cok-soluk:#6B7C96;

    /* vurgu */
    --vurgu:#19C37D;
    --vurgu-koyu:#12A268;
    --vurgu-acik:#1ED98C;        /* birincil dugmenin ustune gelince */
    --vurgu-yazi:#04140C;        /* vurgu zemininin ustundeki yazi */
    --cizgi-ustunde:#3F5578;     /* dugme / kart kenari, ustune gelince */
    --vurgu-yumusak:rgba(25,195,125,.14);
    --ikincil:#F59E0B;
    --ikincil-yumusak:rgba(245,158,11,.14);
    --tehlike:#EF4444;
    --tehlike-yumusak:rgba(239,68,68,.14);
    --bilgi:#38BDF8;
    --bilgi-yumusak:rgba(56,189,248,.14);
    --mor:#A78BFA;

    /* takim renkleri (tahta) */
    --takim-biz:#2F6FED;
    --takim-rakip:#EF4444;
    --takim-notr:#EAB308;
    --top:#FFFFFF;

    /* saha */
    --saha-cim:#4E9A5B;
    --saha-cim-2:#57A565;
    --saha-cizgi:rgba(255,255,255,.9);

    /* olcu */
    --r-kucuk:6px;
    --r:10px;
    --r-buyuk:16px;
    --golge:0 8px 24px rgba(0,0,0,.45);
    --golge-kucuk:0 2px 8px rgba(0,0,0,.35);
    --gecis:150ms ease;

    /* duzen */
    --ust-serit-h:56px;
    --arac-serit-g:64px;
    --ozellik-g:300px;
    --zaman-h:132px;

    --yazitipi:'Inter','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
    --yazitipi-sayi:'Inter','Segoe UI',system-ui,sans-serif;
}

/* Yazi tipi: Inter tercih edilir, yoksa Segoe UI kullanilir.
   Inter dosyalarini varliklar/fonts/ icine birakip asagidaki @font-face
   bloklarini acmak yeterlidir (bkz. varliklar/fonts/OKUBENI.md).
@font-face{ font-family:'Inter'; src:url('../fonts/Inter-Regular.woff2') format('woff2');
            font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('../fonts/Inter-Medium.woff2') format('woff2');
            font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('../fonts/Inter-SemiBold.woff2') format('woff2');
            font-weight:600; font-style:normal; font-display:swap; }
*/

/* ------------------------------------------------------------ sifirlama */
*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
    margin:0;
    background:var(--zemin-1);
    color:var(--yazi);
    font-family:var(--yazitipi);
    font-size:15px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overscroll-behavior:none;
}

h1,h2,h3,h4{ margin:0 0 12px; font-weight:600; letter-spacing:-.01em; line-height:1.25; }
h1{ font-size:24px; }
h2{ font-size:18px; }
h3{ font-size:15px; }
h4{ font-size:13px; color:var(--yazi-soluk); text-transform:uppercase; letter-spacing:.06em; }
p{ margin:0 0 12px; }

a{ color:var(--vurgu); text-decoration:none; }
a:hover{ text-decoration:underline; }

small,.kucuk{ font-size:13px; color:var(--yazi-soluk); }
.silik{ color:var(--yazi-cok-soluk); }
.sayi{ font-family:var(--yazitipi-sayi); font-variant-numeric:tabular-nums; }

code,kbd,pre{ font-family:'Cascadia Mono',Consolas,monospace; font-size:13px; }
kbd{
    display:inline-block; min-width:22px; padding:1px 6px;
    background:var(--zemin-3); border:1px solid var(--cizgi-parlak);
    border-bottom-width:2px; border-radius:var(--r-kucuk);
    font-size:12px; text-align:center; color:var(--yazi-soluk);
}

hr{ border:0; border-top:1px solid var(--cizgi); margin:16px 0; }

img,svg{ max-width:100%; }

/* --------------------------------------------------------------- odaklar */
:focus{ outline:none; }
:focus-visible{
    outline:2px solid var(--vurgu);
    outline-offset:2px;
    border-radius:var(--r-kucuk);
}

::selection{ background:var(--vurgu); color:var(--vurgu-yazi); }

/* ----------------------------------------------------------- kaydiricilar */
*{ scrollbar-width:thin; scrollbar-color:var(--cizgi-parlak) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
    background:var(--cizgi-parlak); border-radius:99px;
    border:3px solid transparent; background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ background:var(--cizgi-ustunde); background-clip:content-box; }

/* --------------------------------------------------------------- yardimci */
.gizli{ display:none !important; }
.yalniz-okuyucu{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.sag{ text-align:right; }
.orta{ text-align:center; }
.dolgu{ flex:1 1 auto; }
.satir{ display:flex; align-items:center; gap:12px; }
.satir-arali{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sutun{ display:flex; flex-direction:column; gap:12px; }
.sarmal{ flex-wrap:wrap; }

.b0{ margin:0 !important; }
.ub4{ margin-top:4px; } .ub8{ margin-top:8px; } .ub16{ margin-top:16px; } .ub24{ margin-top:24px; }

/* ------------------------------------------------------------- hareketsiz */
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
        animation-duration:.001ms !important;
        transition-duration:.001ms !important;
    }
}

/* ------------------------------------------------------------------ ikonlar */
.ikon{ width:20px; height:20px; flex:none; }
.ikon-kucuk{ width:15px; height:15px; flex:none; opacity:.6; }
.ikon-buyuk{ width:26px; height:26px; flex:none; }
.tam{ width:100%; }

/* ------------------------------------------------------------------ temalar
   <html data-tema="..."> (lib/dil.php TEMALAR, tt_tema cerezi). "gece" = yukaridaki :root.
   Varsayilan tema "altin" (06.10.2026, The Tactic Pad): logonun mat siyahi, altini ve gumusu.
   Hepsi koyu tonlu; vurgu rengi uzerine koyu yazi (#04140C) okunur kalacak kadar acik secildi. */
:root{
    --ust-serit-zemin:rgba(11,18,32,.86);
    --vurgu-kenar:rgba(25,195,125,.45);
}
:root[data-tema="mavi"]{
    --zemin-0:#06101F; --zemin-1:#0A1830; --zemin-2:#0F2140; --zemin-3:#152B50; --zemin-4:#1B355F;
    --cizgi:#223C66; --cizgi-parlak:#2E4D7F;
    --yazi:#EEF3FB; --yazi-soluk:#A5B6D2; --yazi-cok-soluk:#7185A6;
    --vurgu:#6CB2FF; --vurgu-koyu:#3D8FE8; --vurgu-acik:#8CC4FF; --cizgi-ustunde:#3D639E; --vurgu-yumusak:rgba(108,178,255,.16); --vurgu-kenar:rgba(108,178,255,.45);
    --ust-serit-zemin:rgba(10,24,48,.88);
}
:root[data-tema="antrasit"]{
    --zemin-0:#101114; --zemin-1:#16181C; --zemin-2:#1D2025; --zemin-3:#252930; --zemin-4:#2E333B;
    --cizgi:#353A43; --cizgi-parlak:#454B56;
    --yazi:#F1F3F5; --yazi-soluk:#A9AFB9; --yazi-cok-soluk:#7A818D;
    --vurgu:#EDEFF2; --vurgu-koyu:#C9CED6; --vurgu-acik:#FFFFFF; --cizgi-ustunde:#5A616E; --vurgu-yumusak:rgba(237,239,242,.12); --vurgu-kenar:rgba(237,239,242,.4);
    --ust-serit-zemin:rgba(22,24,28,.9);
}
:root[data-tema="yesil"]{
    --zemin-0:#07130E; --zemin-1:#0B1B14; --zemin-2:#10251B; --zemin-3:#163023; --zemin-4:#1C3B2B;
    --cizgi:#234632; --cizgi-parlak:#2F5A41;
    --yazi:#ECF6F0; --yazi-soluk:#A2BDAE; --yazi-cok-soluk:#6F8C7C;
    --vurgu:#3DDC8F; --vurgu-koyu:#22B472; --vurgu-acik:#5FE8A6; --cizgi-ustunde:#3D7354; --vurgu-yumusak:rgba(61,220,143,.15); --vurgu-kenar:rgba(61,220,143,.45);
    --ust-serit-zemin:rgba(11,27,20,.88);
}

/* The Tactic Pad (06.10.2026): logonun renkleri. Mat siyah zemin, altin vurgu, gumuse calan acik yazi.
   Altin, zemin ustunde vurgu olarak; ustundeki yazi koyu kahve-siyah (--vurgu-yazi). Yesil "tamam" rozetleri
   (.rozet.yesil) ve tehlike kirmizisi anlam tasidigi icin ayni kalir. */
:root[data-tema="altin"]{
    --zemin-0:#09090A; --zemin-1:#0F0F10; --zemin-2:#161618; --zemin-3:#1E1E21; --zemin-4:#27272B;
    --cizgi:#2C2C31; --cizgi-parlak:#414148; --cizgi-ustunde:#5C5C66;
    --yazi:#F1EFEA; --yazi-soluk:#B3AFA6; --yazi-cok-soluk:#7E7A72;
    --vurgu:#D6B36E; --vurgu-koyu:#B38D49; --vurgu-acik:#E8CF96; --vurgu-yazi:#171006;
    --vurgu-yumusak:rgba(214,179,110,.13); --vurgu-kenar:rgba(214,179,110,.45);
    --gumus:#D5D6D8;
    --ust-serit-zemin:rgba(15,15,16,.9);
}
/* logodaki fircalanmis altin: birincil dugmelerde hafif dikey gecis (parlama / neon yok) */
:root[data-tema="altin"] .btn-birincil{
    background:linear-gradient(180deg,#E7CD92 0%,#D3AE66 52%,#B8934F 100%); border-color:#B38D49;
}
:root[data-tema="altin"] .btn-birincil:hover{
    background:linear-gradient(180deg,#F0DBA8 0%,#DDBB76 52%,#C39D58 100%); border-color:#C39D58;
}
:root[data-tema="altin"] .ust-serit{ border-bottom-color:rgba(214,179,110,.24); }