/* ==========================================================================
   The Tactic Pad - duzen: uygulama kabugu, editor iskeleti, giris ekrani
   ========================================================================== */

/* ---------------------------------------------------------------- ust serit */
.ust-serit{
    position:sticky; top:0; z-index:60;
    display:flex; align-items:center; gap:16px;
    height:var(--ust-serit-h); padding:0 16px;
    background:var(--ust-serit-zemin); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--cizgi);
}

.marka{ display:flex; align-items:center; gap:10px; color:var(--yazi); font-weight:600; }
.marka:hover{ text-decoration:none; }
.marka-simge{
    display:flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:9px;
    background:linear-gradient(140deg,var(--vurgu),var(--vurgu-koyu));
    color:var(--vurgu-yazi); box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.marka-simge svg{ width:19px; height:19px; }
.marka-ad{ font-size:15px; letter-spacing:-.01em; }
.marka-ad span{ color:var(--vurgu); }
/* The Tactic Pad logosu (06.10.2026): amblem + yazi, saydam zeminli gorseller (varliklar/img/marka/).
   .marka-simge / .marka-ad eski cizim logodan kaldi; artik kullanilmiyor. */
.marka-amblem{ height:40px; width:auto; flex:none; display:block; }
.marka-yazi{ height:15px; width:auto; flex:none; display:block; }

.ust-menu{ display:flex; align-items:center; gap:2px; margin-left:12px; }
.ust-menu a{
    display:flex; align-items:center; gap:8px;
    height:36px; padding:0 12px; border-radius:var(--r);
    color:var(--yazi-soluk); font-size:14px; font-weight:500;
    transition:background var(--gecis), color var(--gecis);
}
.ust-menu a:hover{ background:var(--zemin-2); color:var(--yazi); text-decoration:none; }
.ust-menu a.secili{ background:var(--vurgu-yumusak); color:var(--vurgu); }
.ust-menu a svg{ width:17px; height:17px; }
/* Menu rozeti: yeni teslim edilen / acik talep sayisi (28.09.2026) */
.ust-menu a .menu-rozet{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:18px; height:18px; padding:0 5px; margin-left:-2px; border-radius:99px;
    background:var(--ikincil); color:#1A1204; font-size:11px; font-weight:750; font-variant-numeric:tabular-nums;
}

.kullanici-dugme{
    display:flex; align-items:center; gap:9px; height:38px; padding:0 10px 0 6px;
    background:var(--zemin-2); border:1px solid var(--cizgi);
    border-radius:99px; color:var(--yazi); font-size:13px; cursor:pointer;
}
.kullanici-dugme:hover{ background:var(--zemin-3); text-decoration:none; }
.avatar{
    display:flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:50%;
    background:var(--takim-biz); color:#fff; font-size:12px; font-weight:600;
}

/* ------------------------------------------------------------------- sayfa */
.sayfa{ max-width:1320px; margin:0 auto; padding:28px 20px 64px; }
.sayfa-basligi{
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:16px; flex-wrap:wrap; margin-bottom:22px;
}
.sayfa-basligi h1{ margin:0; }
.sayfa-basligi p{ margin:4px 0 0; color:var(--yazi-soluk); font-size:14px; }

.bolum{ margin-top:32px; }
.bolum-basligi{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; margin-bottom:14px;
}
.bolum-basligi h2{ margin:0; font-size:16px; }

/* --------------------------------------------------------- editor iskeleti */
/* Editor sayfalari sayfayi kaydirmaz; tuval kalan alani kaplar. */
body.editor{ overflow:hidden; height:100vh; }

.editor-kabuk{
    display:grid;
    grid-template-columns:var(--arac-serit-g) 1fr var(--ozellik-g);
    grid-template-rows:1fr var(--zaman-h);
    height:calc(100vh - var(--ust-serit-h));
    background:var(--zemin-0);
}
/* Arac seridi kaydirilmaz: araclar her zaman sigar. Ekran kisaysa iki sutuna gecer (asagida). */
.arac-serit{
    grid-row:1 / span 2;
    display:grid; grid-template-columns:40px; grid-auto-rows:40px;
    justify-content:center; align-content:start; gap:3px;
    padding:10px 0; overflow:hidden;
    background:var(--zemin-1); border-right:1px solid var(--cizgi);
}
.arac{
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px;
    background:transparent; border:1px solid transparent; border-radius:10px;
    color:var(--yazi-soluk); cursor:pointer;
    transition:background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.arac:hover{ background:var(--zemin-3); color:var(--yazi); }
.arac.secili{
    background:var(--vurgu-yumusak); border-color:var(--vurgu-kenar); color:var(--vurgu);
}
.arac svg{ width:20px; height:20px; }
.arac-serit .arac-ayrac{
    grid-column:1 / -1; align-self:center; justify-self:center;
    width:26px; height:1px; margin:0; background:var(--cizgi);
}
.tuval-alan{
    position:relative; overflow:hidden;
    background:
        radial-gradient(120% 120% at 50% 0%, var(--zemin-2) 0%, var(--zemin-0) 70%);
    display:flex; align-items:center; justify-content:center;
}
/* Sag panel: sikisik form, normal ekranda kaydirmadan sigar (cok uzun nesne panelinde ince serit yedek). */
.ozellik-panel{
    display:flex; flex-direction:column; gap:0; overflow-y:auto; overscroll-behavior:contain;
    scrollbar-width:thin; scrollbar-color:var(--cizgi-parlak) transparent;
    background:var(--zemin-1); border-left:1px solid var(--cizgi);
}
.ozellik-bolum{ padding:11px 14px 12px; border-bottom:1px solid var(--cizgi); }
.ozellik-bolum h4{
    margin:0 0 8px; font-size:11px; font-weight:600; letter-spacing:.06em;
    text-transform:uppercase; color:var(--yazi-cok-soluk);
}
.ozellik-bolum h4.b0{ margin:0; font-size:13px; letter-spacing:0; text-transform:none; color:var(--yazi); }
.ozellik-panel .alan{ margin-bottom:8px; }
.ozellik-panel .alan > span, .ozellik-panel .alan .etiket{
    display:block; margin-bottom:3px; font-size:12px; color:var(--yazi-soluk);
}
.ozellik-panel .girdi, .ozellik-panel .secim{
    min-height:32px; height:32px; padding:4px 10px; font-size:13px; border-radius:8px;
}
.ozellik-panel .secim{ padding-right:30px; background-position:right 8px center; }
.ozellik-panel .btn-kucuk{ min-height:28px; padding:0 9px; font-size:12px; }
.ozellik-panel .satir{ gap:6px; }
.ozellik-panel .ub8{ margin-top:6px; }
.ozellik-panel .anahtar{ gap:7px; font-size:12.5px; }
.ozellik-panel .anahtar-govde{ width:34px; height:20px; }
.ozellik-panel .anahtar-govde::after{ width:14px; height:14px; }
.ozellik-panel .anahtar input:checked + .anahtar-govde::after{ transform:translateX(14px); }
.ozellik-panel .renk-nokta{ width:21px; height:21px; }
.ozellik-bolum.nesne-baslik{ padding:7px 10px 7px 14px; }
.ozellik-panel .satir.sarmal{ flex-wrap:wrap; }
.ozellik-panel .satir .alan.tam{ flex:1 1 0; min-width:0; }
.ozellik-bilgi{
    display:flex; flex-wrap:wrap; gap:4px 12px; padding:9px 14px;
    font-size:12px; color:var(--yazi-cok-soluk);
}
.ozellik-bilgi b{ color:var(--yazi-soluk); font-weight:600; }

/* Dil secici (TR | EN) */
/* Dil secici (06.10.2026, 11 dil): bayrak + kod; tiklayinca tum diller bayrak + kendi adiyla acilir. */
.dil-sec{ position:relative; display:inline-block; margin-right:10px; }
.dil-sec > summary{
    display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 11px 0 9px; list-style:none;
    border:1px solid var(--cizgi); border-radius:99px; background:var(--zemin-2); cursor:pointer;
    color:var(--yazi); font:600 11.5px/1 var(--yazitipi); letter-spacing:.04em; user-select:none;
}
.dil-sec > summary::-webkit-details-marker{ display:none; }
.dil-sec > summary::after{ content:''; width:6px; height:6px; margin-left:1px; border:solid var(--yazi-soluk);
    border-width:0 1.5px 1.5px 0; transform:translateY(-2px) rotate(45deg); }
.dil-sec[open] > summary{ border-color:var(--vurgu); }
.dil-sec img{ width:21px; height:14px; border-radius:2px; object-fit:cover; box-shadow:0 0 0 1px rgba(0,0,0,.25); }
.dil-sec ul{
    position:absolute; right:0; top:calc(100% + 6px); z-index:60; min-width:212px; margin:0; padding:6px; list-style:none;
    border:1px solid var(--cizgi); border-radius:12px; background:var(--zemin-2); box-shadow:0 14px 34px rgba(0,0,0,.4);
}
.dil-sec li button{
    display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:0; border-radius:8px;
    background:transparent; color:var(--yazi); font:500 13.5px/1.2 var(--yazitipi); text-align:left; cursor:pointer;
}
.dil-sec li button:hover{ background:var(--zemin-3, rgba(255,255,255,.06)); }
.dil-sec li button.secili{ background:var(--vurgu); color:var(--vurgu-yazi); font-weight:700; }
.giris-kutu .dil-sec{ float:right; margin:0; }

/* Tam ekran: ust serit gizlenir, editor tum ekrani kaplar. */
body.tam-ekran .ust-serit{ display:none; }
body.tam-ekran .editor-kabuk{ height:100vh; }

.zaman-cizelge{
    grid-column:2 / span 2;
    display:flex; flex-direction:column;
    background:var(--zemin-1); border-top:1px solid var(--cizgi);
}
.zaman-ust{
    display:flex; align-items:center; gap:8px;
    padding:5px 12px; border-bottom:1px solid var(--cizgi);
}
.zaman-adimlar{
    display:flex; align-items:stretch; gap:8px;
    padding:8px 12px; overflow-x:auto; overflow-y:hidden; flex:1; min-height:0;
    scrollbar-width:thin; scrollbar-color:var(--cizgi-parlak) transparent;
}
.adim-kart{
    display:flex; flex-direction:column; gap:2px; flex:none;
    width:132px; height:100%; padding:8px 10px;
    background:var(--zemin-2); border:1px solid var(--cizgi); border-radius:var(--r);
    cursor:pointer; transition:border-color var(--gecis), background var(--gecis);
}
.adim-kart:hover{ border-color:var(--cizgi-parlak); }
.adim-kart.secili{ border-color:var(--vurgu); background:var(--vurgu-yumusak); }
.adim-kart .no{ font-size:11px; color:var(--yazi-cok-soluk); }
.adim-kart .ad{ font-size:13px; font-weight:500; }
.adim-kart .sure{ font-size:11px; color:var(--yazi-soluk); margin-top:auto; }

/* -------------------------------------------------------------- giris ekrani */
.giris-kabuk{
    display:grid; grid-template-columns:1fr 1fr; min-height:100vh;
}
.giris-gorsel{
    position:relative; overflow:hidden;
    background:linear-gradient(160deg, color-mix(in srgb, var(--vurgu) 13%, var(--zemin-0)) 0%, var(--zemin-0) 62%);
    color:var(--vurgu);                     /* saha deseninin cizgi rengi (currentColor) */
    display:flex; flex-direction:column; justify-content:flex-end; padding:48px;
}
.giris-gorsel svg.saha-desen{
    position:absolute; inset:0; width:100%; height:100%; opacity:.16;
}
.giris-gorsel .yazi{ position:relative; max-width:420px; color:var(--yazi); }
.giris-logo{ position:relative; flex:1 1 auto; display:flex; align-items:center; justify-content:center; min-height:0; }
.giris-logo img{ width:min(430px, 72%); height:auto; display:block; filter:drop-shadow(0 10px 28px rgba(0,0,0,.55)); }
.giris-gorsel h2{ font-size:28px; line-height:1.2; }
.giris-gorsel p{ color:var(--yazi-soluk); margin:0; }

.giris-form{
    display:flex; align-items:center; justify-content:center; padding:32px;
    background:var(--zemin-1);
}
.giris-kutu{ width:min(380px,100%); }
.giris-kutu .marka{ margin-bottom:28px; }
.giris-kutu .marka-amblem{ height:46px; }
.giris-kutu .marka-yazi{ height:17px; }

@media (max-width: 900px){
    .giris-kabuk{ grid-template-columns:1fr; }
    .giris-gorsel{ display:none; }
}

/* ------------------------------------------------------------------ duyarli */
@media (max-width: 1180px){
    :root{ --ozellik-g:260px; }
}
/* Kisa ekran: arac seridi iki sutun, yine kaydirmasiz. */
@media (max-height: 800px){
    :root{ --arac-serit-g:94px; }
    .arac-serit{ grid-template-columns:40px 40px; }
}
@media (max-height: 520px){
    :root{ --arac-serit-g:130px; }
    .arac-serit{ grid-template-columns:36px 36px 36px; grid-auto-rows:36px; }
    .arac{ width:36px; height:36px; }
}
@media (max-width: 980px){
    .ust-menu a span{ display:none; }
    .ust-menu a{ padding:0 10px; }
    .editor-kabuk{ grid-template-columns:var(--arac-serit-g) 1fr; }
    .ozellik-panel{ display:none; }
    .zaman-cizelge{ grid-column:2; }
}
@media (max-width: 640px){
    .sayfa{ padding:20px 14px 48px; }
    .marka-ad{ display:none; }
    .marka-yazi{ display:none; }
}

/* iki sutunlu icerik: genis + dar */
.izgara-2-1{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
@media (max-width: 900px){
    .izgara-2-1{ grid-template-columns:1fr; }
}

/* Tema secici (4 koyu tema) */
.tema-sec{ display:inline-flex; gap:6px; padding:5px 8px; border:1px solid var(--cizgi); border-radius:99px; background:var(--zemin-2); }
.tema-sec button{
    width:18px; height:18px; padding:0; border-radius:50%; cursor:pointer;
    border:2px solid var(--zemin-4);
    background:linear-gradient(135deg, var(--t-zemin) 0 50%, var(--t-vurgu) 50% 100%);
}
.tema-sec button:hover{ border-color:var(--yazi-soluk); }
.tema-sec button.secili{ border-color:var(--yazi); }
.ust-link{ color:var(--yazi-soluk); font-size:13.5px; font-weight:500; }
.ust-link:hover{ color:var(--yazi); text-decoration:none; }
.giris-ust{ display:flex; justify-content:flex-end; gap:8px; margin-bottom:6px; }
.giris-kutu .giris-ust .dil-sec{ float:none; }
.giris-paket{ display:block; margin-top:18px; text-align:center; font-size:13.5px; }
@media (max-width: 720px){ .tema-sec{ display:none; } }

/* 06.10.2026: antrenorde ad -> Hesabim; cikis ayri ikon dugmesi */
.kullanici-dugme.secili{ background:var(--zemin-3); }
.cikis-dugme{ margin-left:4px; }

/* ------------------------------------------------------------------ deneme hesabi (07.10.2026) */
.deneme-cip{ display:inline-flex; align-items:center; gap:8px; padding:5px 12px; border-radius:999px; font-size:12.5px;
    text-decoration:none; color:var(--yazi); background:var(--vurgu-yumusak); border:1px solid var(--vurgu-kenar); white-space:nowrap; }
.deneme-cip b{ color:var(--vurgu); text-transform:uppercase; letter-spacing:.08em; font-size:11px; }
.deneme-cip-hak{ padding-left:8px; border-left:1px solid var(--vurgu-kenar); color:var(--yazi-soluk); }
.deneme-cip.bitti{ background:var(--tehlike-yumusak); border-color:rgba(239,68,68,.45); }
.deneme-cip.bitti b{ color:#FCA5A5; }
.deneme-cip:hover{ border-color:var(--vurgu); }
/* ust serit dar ekranda tasmasin: logo ve "?" kuculmez, deneme cipi kisalir */
.ust-serit .marka, .rehber-dugme, .deneme-cip{ flex:none; }
@media (max-width: 1280px){ .deneme-cip-hak{ display:none; } }
@media (max-width: 1100px){ .deneme-cip b{ display:none; } .deneme-cip{ padding:5px 10px; } }
@media (max-width: 1180px){ .ust-serit .marka-yazi{ display:none; } }   /* amblem kalir, yazi dar ekranda sigmiyordu */
.deneme-tamamla{ border-color:var(--vurgu-kenar); color:var(--vurgu); }
.deneme-serit{ position:absolute; top:58px; left:50%; transform:translateX(-50%); z-index:30; display:flex; align-items:center;
    gap:10px; max-width:min(720px, calc(100% - 32px)); padding:10px 16px; border-radius:12px; font-size:13.5px;
    background:rgba(15,15,16,.92); border:1px solid var(--vurgu-kenar); color:var(--yazi); box-shadow:var(--golge); }
.deneme-serit svg{ color:var(--vurgu); flex:none; }
.deneme-serit.bitti{ border-color:rgba(239,68,68,.5); }
.deneme-serit.bitti svg{ color:#FCA5A5; }
.deneme-serit .btn{ margin-left:6px; flex:none; }
.deneme-perde{ z-index:200; }
.deneme-modal .panel-govde p{ margin:0; line-height:1.6; color:var(--yazi-soluk); }

/* ------------------------------------------------------------------ adim adim rehber (07.10.2026) */
.rehber-dugme{ width:34px; height:34px; border-radius:50%; font-weight:800; font-size:15px; color:var(--vurgu);
    border:1px solid var(--vurgu-kenar); }
.rehber{ position:fixed; inset:0; z-index:300; }
.rehber:has(.rehber-kart.orta){ background:rgba(0,0,0,.62); }
.rehber-isik{ position:fixed; border-radius:12px; box-shadow:0 0 0 9999px rgba(0,0,0,.62), 0 0 0 2px var(--vurgu);
    transition:left .25s, top .25s, width .25s, height .25s; pointer-events:none; }
.rehber-kart{ position:fixed; width:min(360px, calc(100vw - 24px)); padding:18px 20px 16px; border-radius:16px;
    background:#151516; border:1px solid var(--vurgu-kenar); box-shadow:0 18px 50px rgba(0,0,0,.55); color:var(--yazi); }
.rehber-kart.orta{ left:50% !important; top:50% !important; transform:translate(-50%, -50%); width:min(440px, calc(100vw - 24px)); }
.rehber-ust{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.rehber-sayac{ font-size:12px; color:var(--vurgu); font-weight:700; letter-spacing:.06em; }
.rehber-atla{ background:none; border:0; color:var(--yazi-cok-soluk); font-size:12.5px; cursor:pointer; padding:4px; }
.rehber-atla:hover{ color:var(--yazi); }
.rehber-kart h3{ margin:0 0 6px; font-size:17px; }
.rehber-kart p{ margin:0; color:var(--yazi-soluk); font-size:14px; line-height:1.6; }
.rehber-noktalar{ display:flex; gap:6px; margin:14px 0 12px; }
.rehber-noktalar i{ width:7px; height:7px; border-radius:50%; background:var(--cizgi-parlak); }
.rehber-noktalar i.secili{ background:var(--vurgu); width:20px; border-radius:4px; }
.rehber-alt{ display:flex; justify-content:space-between; gap:8px; }
.giris-demo{ margin-top:8px; font-weight:600; }