/* ==========================================================================
   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; }

/* ------------------------------------------------------------------ uye bildirimleri: zil (07.10.2026 aksam) */
.zil-dugme{ position:relative; flex:none; }
.zil-dugme.yeni{ color:var(--vurgu); }
.zil-rozet{
    position:absolute; top:-3px; right:-4px; min-width:17px; height:17px; padding:0 4px; border-radius:999px;
    background:var(--vurgu); color:var(--vurgu-yazi); font-size:10.5px; font-weight:800; line-height:17px; text-align:center;
    box-shadow:0 0 0 2px var(--zemin-2);
}
.zil-panel{
    position:fixed; top:calc(var(--ust-serit-h) + 6px); right:12px; z-index:60; width:min(380px, calc(100vw - 24px));
    max-height:min(560px, calc(100dvh - var(--ust-serit-h) - 24px)); display:flex; flex-direction:column;
    background:var(--zemin-2); border:1px solid var(--cizgi-guclu, var(--cizgi)); border-radius:14px;
    box-shadow:var(--golge); overflow:hidden;
}
.zil-bas{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px;
    border-bottom:1px solid var(--cizgi); }
.zil-bas b{ font-size:14px; }
.zil-hepsi{ background:none; border:0; padding:4px 0; color:var(--vurgu); font:inherit; font-size:12.5px; cursor:pointer; }
.zil-hepsi:hover{ text-decoration:underline; }
.zil-liste{ overflow-y:auto; overscroll-behavior:contain; }
.zil-bos{ margin:0; padding:28px 16px; text-align:center; color:var(--yazi-soluk); font-size:13.5px; }
.zil-satir{ display:flex; gap:10px; padding:12px 14px; border-bottom:1px solid var(--cizgi); color:inherit;
    text-decoration:none; }
.zil-satir:last-child{ border-bottom:0; }
a.zil-satir:hover{ background:var(--zemin-3); text-decoration:none; }
.zil-nokta{ flex:none; width:8px; height:8px; margin-top:6px; border-radius:50%; background:transparent; }
.zil-satir.yeni .zil-nokta{ background:var(--vurgu); }
.zil-satir.yeni{ background:var(--vurgu-yumusak); }
.zil-yazi{ display:grid; gap:3px; min-width:0; }
.zil-yazi b{ font-size:13.5px; font-weight:650; }
.zil-yazi span{ font-size:13px; color:var(--yazi-soluk); white-space:pre-line; overflow-wrap:anywhere; }
.zil-yazi i{ font-style:normal; font-size:11.5px; color:var(--yazi-cok-soluk, var(--yazi-soluk)); }

/* ==========================================================================
   TABLET / TELEFON (07.10.2026 aksam). Kullanici: "uygulamayi hem tablete hem mobile uygun hale getireceksin."
   Ust serit: genis ekranda .ust-cekmece yok sayilir (display:contents) ve ogeler `order` ile eski sirasinda durur;
   900 px ve altinda cekmece, menu dugmesiyle acilan tam genislikte liste olur (etiketli menu, cip, tema, dil, hesap).
   Editor (tahta): 1100 px ve altinda ozellik paneli sagdan acilan cekmece; 700 px ve altinda araclar ustte yatay serit.
   ========================================================================== */
.ust-cekmece{ display:contents; }
.ust-serit > .marka{ order:0; }
.ust-menu{ order:1; }
.deneme-cip{ order:2; }
.ust-cekmece > .dolgu{ order:3; }
.rehber-dugme{ order:4; }
.zil-dugme{ order:5; }
.ust-link{ order:6; }
.tema-sec{ order:7; }
.dil-sec{ order:8; }
.kullanici-dugme{ order:9; }
.cikis-dugme, .ust-giris{ order:10; }
.ust-menu-dugme{ display:none; order:11; flex:none; }
.ust-menu-dugme .m-kapat{ display:none; }
.ust-serit.menu-acik .ust-menu-dugme .m-ac{ display:none; }
.ust-serit.menu-acik .ust-menu-dugme .m-kapat{ display:inline; }

@media (max-width: 900px){
    .ust-serit{ gap:8px; padding:0 10px 0 12px; }
    .ust-serit > .marka{ margin-right:auto; }
    .ust-serit .marka-yazi{ display:block; height:13px; }
    .ust-menu-dugme{ display:inline-flex; }
    .ust-cekmece{
        display:none; position:fixed; top:var(--ust-serit-h); left:0; right:0; z-index:59;
        flex-direction:column; align-items:stretch; gap:10px;
        max-height:calc(100dvh - var(--ust-serit-h)); overflow-y:auto; overscroll-behavior:contain;
        padding:12px 14px calc(18px + env(safe-area-inset-bottom));
        background:var(--zemin-1); border-bottom:1px solid var(--cizgi); box-shadow:0 24px 40px rgba(0,0,0,.55);
    }
    .ust-serit.menu-acik .ust-cekmece{ display:flex; }
    .ust-cekmece > .dolgu{ display:none; }
    .ust-cekmece .ust-menu{ flex-direction:column; align-items:stretch; gap:2px; margin:0; }
    .ust-cekmece .ust-menu a{ height:48px; padding:0 12px; font-size:15.5px; }
    .ust-cekmece .ust-menu a span{ display:inline; }
    .ust-cekmece .ust-menu a .menu-rozet{ margin-left:auto; }
    .ust-cekmece .deneme-cip{ align-self:flex-start; padding:7px 14px; font-size:13px; }
    .ust-cekmece .deneme-cip b, .ust-cekmece .deneme-cip-hak{ display:inline; }
    .ust-cekmece .tema-sec{ display:inline-flex; align-self:flex-start; }
    .ust-cekmece .dil-sec{ align-self:flex-start; margin:0; }
    .ust-cekmece .dil-sec ul{ position:static; margin-top:6px; box-shadow:none; }
    .ust-cekmece .kullanici-dugme{ height:48px; padding:0 14px 0 8px; font-size:14.5px; border-radius:14px; }
    .ust-cekmece .cikis-dugme{ align-self:flex-start; width:auto; padding:0 14px; gap:8px; }
    .ust-cekmece .ust-link{ padding:10px 4px; font-size:15px; }
    .ust-cekmece .ust-giris{ align-self:flex-start; }
    .zil-panel{ right:8px; }
}
@media (max-width: 640px){
    .ust-serit .marka-yazi{ display:none; }
}
@media (max-width: 900px){
    .ust-cekmece .ust-menu a span{ display:inline; }      /* 980 px kurali etiketleri gizliyordu */
}

/* ---------------------------------------------------------------- editor: dar ekran */
.editor-kabuk{ grid-template-columns:var(--arac-serit-g) minmax(0, 1fr) var(--ozellik-g); height:calc(100dvh - var(--ust-serit-h)); }
.tuval-alan, .zaman-cizelge{ min-width:0; }
body.editor{ height:100dvh; }
body.tam-ekran .editor-kabuk{ height:100dvh; }
.panel-dugme{ display:none; }                 /* ozellik paneli cekmecesini acar (yalniz dar ekranda gorunur) */
.ozellik-sarmal{ display:contents; }          /* genis ekranda yok sayilir: .ozellik-panel izgaranin 3. sutunu */
.ozellik-kapat{ display:none; }

@media (max-width: 1100px){
    .editor-kabuk{ grid-template-columns:var(--arac-serit-g) minmax(0, 1fr); }
    .zaman-cizelge{ grid-column:2; }
    .panel-dugme{ display:inline-flex; }
    /* 980 px kurali paneli tumden gizliyordu: artik sagdan acilan cekmece */
    .ozellik-sarmal{
        display:flex; flex-direction:column; position:fixed; top:var(--ust-serit-h); right:0; bottom:0; z-index:40;
        width:min(320px, 88vw); transform:translateX(105%); transition:transform .22s ease; visibility:hidden;
        background:var(--zemin-1); border-left:1px solid var(--cizgi);
        box-shadow:-18px 0 40px rgba(0,0,0,.55); padding-bottom:env(safe-area-inset-bottom);
    }
    .t-t2 .ozellik-sarmal{ background:#0E0E10; border-left-color:#1E1E21; }
    body.panel-acik .ozellik-sarmal{ transform:none; visibility:visible; }
    .ozellik-sarmal .ozellik-panel{ display:flex; flex:1 1 auto; min-height:0; border-left:0; }
    .ozellik-kapat{
        display:flex; align-items:center; justify-content:space-between; gap:10px; flex:none;
        padding:6px 6px 6px 16px; border-bottom:1px solid var(--cizgi);
        font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--yazi-soluk);
    }
    .tuval-ust{ flex-wrap:wrap; row-gap:6px; }
    .tuval-ust > .dolgu{ display:none; }
    #sahne-adi-ust, .t-t2 #sahne-adi-ust{ min-width:0; width:clamp(120px, 26vw, 250px); }
    .tuval-ust .tuval-kutu:last-child{ margin-left:auto; }
    .zaman-ust{ overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
    .zaman-ust::-webkit-scrollbar{ display:none; }
    .zaman-ust > *{ flex:none; }
    .zaman-ust .anim-supurme{ width:clamp(110px, 24vw, 260px); }
    .zaman-ust > .dolgu{ display:none; }
    .ipucu::after, .ipucu::before{ display:none !important; }       /* dokunmatikte ipucu balonu takili kalmasin */
}
/* Dar ekranda eylem dugmeleri yalniz ikon (metin dugum oldugu icin yazi boyutu sifirlanir) */
@media (max-width: 860px){
    .tuval-ust .tuval-kutu:last-child .btn-kucuk{ font-size:0; gap:0; width:38px; height:38px; padding:0; justify-content:center; }
    .tuval-ust .tuval-kutu:last-child .btn-kucuk svg{ width:18px; height:18px; }
    .t-t2 .tuval-alan{ padding:66px 10px 10px; }
    .t-t2 .tuval-ust{ left:10px; right:10px; top:10px; }
    #kayit-durumu{ display:none; }
}
/* Telefon: araclar ustte yatay kayan serit, tuval altinda, zaman cizelgesi kisa */
@media (max-width: 700px){
    body.editor{ --zaman-h:176px; }          /* animasyon.css :root degerini ezer */
    .editor-kabuk{ grid-template-columns:minmax(0, 1fr); grid-template-rows:52px minmax(0, 1fr) var(--zaman-h); }
    .arac-serit, .t-t2 .arac-serit{
        grid-row:1; grid-column:1; display:flex; align-items:center; gap:4px; padding:0 8px;
        overflow-x:auto; overflow-y:hidden; border-right:0; border-bottom:1px solid var(--cizgi); scrollbar-width:none;
    }
    .arac-serit::-webkit-scrollbar{ display:none; }
    .arac{ flex:none; width:42px; height:42px; }
    .arac-serit .arac-ayrac{ flex:none; width:1px; height:24px; }
    .tuval-alan{ grid-row:2; grid-column:1; }
    .t-t2 .tuval-alan{ padding:112px 8px 8px; }                     /* ust kutular iki satir */
    .zaman-cizelge{ grid-row:3; grid-column:1; }
    #sahne-adi-ust, .t-t2 #sahne-adi-ust{ width:auto; flex:1 1 0; }
    .tuval-ust .tuval-kutu:first-child{ flex:1 1 0; min-width:0; }
    .t-t2 .tuval-alt{ display:none; }                               /* yakinlastirma: iki parmak */
    .malzeme-kutu{ max-width:calc(100vw - 16px); }
}
/* Yatay telefon / kisa ekran: zaman cizelgesi daha da kisa */
@media (max-height: 520px) and (max-width: 1100px){
    body.editor{ --zaman-h:128px; }
}

/* ---------------------------------------------------------------- genel: dar ekran */
@media (max-width: 700px){
    .modal-perde{ padding:10px; }
    .modal{ max-height:calc(100dvh - 20px); }
    .bildirimler{ left:10px; right:10px; top:10px; }
    table{ max-width:100%; }
}