/* ==========================================================================
   The Tactic Pad - bilesenler
   Dokunma hedefi en az 44x44 px (docs/01-TASARIM.md)
   ========================================================================== */

/* ------------------------------------------------------------------ butonlar */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    min-height:40px; padding:0 16px;
    background:var(--zemin-3); color:var(--yazi);
    border:1px solid var(--cizgi-parlak); border-radius:var(--r);
    font:500 14px/1 var(--yazitipi); cursor:pointer;
    transition:background var(--gecis), border-color var(--gecis), transform var(--gecis);
    white-space:nowrap; user-select:none;
}
.btn:hover{ background:var(--zemin-4); border-color:var(--cizgi-ustunde); text-decoration:none; }
.btn:active{ transform:translateY(1px); }
.btn[disabled],.btn.pasif{ opacity:.45; pointer-events:none; }
.btn svg{ width:18px; height:18px; flex:none; }

.btn-birincil{
    background:var(--vurgu); border-color:var(--vurgu); color:var(--vurgu-yazi); font-weight:600;
}
.btn-birincil:hover{ background:var(--vurgu-acik); border-color:var(--vurgu-acik); }

.btn-hayalet{ background:transparent; border-color:transparent; color:var(--yazi-soluk); }
.btn-hayalet:hover{ background:var(--zemin-3); color:var(--yazi); }

.btn-tehlike{ background:transparent; border-color:rgba(239,68,68,.5); color:#FCA5A5; }
.btn-tehlike:hover{ background:var(--tehlike-yumusak); border-color:var(--tehlike); }

.btn-buyuk{ min-height:48px; padding:0 22px; font-size:15px; }
.btn-kucuk{ min-height:32px; padding:0 10px; font-size:13px; border-radius:var(--r-kucuk); }

.btn-ikon{
    width:40px; min-height:40px; padding:0; border-radius:var(--r);
}
.btn-ikon.btn-buyuk{ width:48px; min-height:48px; }

.btn-grup{ display:inline-flex; }
.btn-grup .btn{ border-radius:0; margin-left:-1px; }
.btn-grup .btn:first-child{ border-radius:var(--r) 0 0 var(--r); margin-left:0; }
.btn-grup .btn:last-child{ border-radius:0 var(--r) var(--r) 0; }
.btn-grup .btn.secili{ background:var(--vurgu-yumusak); border-color:var(--vurgu); color:var(--vurgu); }

/* -------------------------------------------------------------------- panel */
.panel{
    background:var(--zemin-2);
    border:1px solid var(--cizgi);
    border-radius:var(--r-buyuk);
    overflow:hidden;
}
.panel-baslik{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:14px 18px;
    background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);
    border-bottom:1px solid var(--cizgi);
    font-weight:600; font-size:14px;
}
.panel-baslik .kucuk{ font-weight:400; }
.panel-govde{ padding:18px; }
.panel-govde.sifir{ padding:0; }

/* --------------------------------------------------------------------- kart */
.kart{
    display:block;
    background:var(--zemin-2); border:1px solid var(--cizgi);
    border-radius:var(--r-buyuk); padding:18px;
    color:inherit; text-decoration:none;
    transition:border-color var(--gecis), background var(--gecis), transform var(--gecis);
}
a.kart:hover{
    border-color:var(--cizgi-parlak); background:var(--zemin-3);
    transform:translateY(-2px); text-decoration:none;
}
.kart-ikon{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:12px; margin-bottom:14px;
    background:var(--vurgu-yumusak); color:var(--vurgu);
}
.kart-ikon svg{ width:22px; height:22px; }
.kart-ikon.mavi{ background:var(--bilgi-yumusak); color:var(--bilgi); }
.kart-ikon.turuncu{ background:var(--ikincil-yumusak); color:var(--ikincil); }
.kart-ikon.mor{ background:rgba(167,139,250,.14); color:var(--mor); }
.kart h3{ margin-bottom:4px; }
.kart p{ margin:0; color:var(--yazi-soluk); font-size:13px; }

.izgara{ display:grid; gap:16px; }
.izgara-2{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.izgara-3{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.izgara-4{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }

/* ------------------------------------------------------------- form ogeleri */
.alan{ display:block; margin-bottom:14px; }
.alan > label,.etiket{
    display:block; margin-bottom:6px;
    font-size:13px; font-weight:500; color:var(--yazi-soluk);
}

.girdi,.secim,textarea.girdi{
    width:100%; min-height:42px; padding:9px 12px;
    background:var(--zemin-3); color:var(--yazi);
    border:1px solid var(--cizgi-parlak); border-radius:var(--r);
    font:400 14px/1.4 var(--yazitipi);
    transition:border-color var(--gecis), box-shadow var(--gecis);
}
.girdi::placeholder{ color:var(--yazi-cok-soluk); }
.girdi:focus,.secim:focus{
    border-color:var(--vurgu);
    box-shadow:0 0 0 3px var(--vurgu-yumusak);
}
textarea.girdi{ min-height:96px; resize:vertical; line-height:1.55; }

.secim{
    appearance:none;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AAAC2' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 10px center; background-size:16px;
    padding-right:34px;
}

.girdi-grup{ position:relative; display:flex; align-items:center; }
.girdi-grup .girdi{ padding-left:38px; }
.girdi-grup svg{
    position:absolute; left:12px; width:18px; height:18px;
    color:var(--yazi-cok-soluk); pointer-events:none;
}

/* anahtar (toggle) */
.anahtar{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.anahtar input{ position:absolute; opacity:0; width:0; height:0; }
.anahtar-govde{
    position:relative; width:42px; height:24px; flex:none;
    background:var(--zemin-4); border:1px solid var(--cizgi-parlak); border-radius:99px;
    transition:background var(--gecis), border-color var(--gecis);
}
.anahtar-govde::after{
    content:''; position:absolute; top:2px; left:2px; width:18px; height:18px;
    background:var(--yazi-soluk); border-radius:50%; transition:transform var(--gecis), background var(--gecis);
}
.anahtar input:checked + .anahtar-govde{ background:var(--vurgu-yumusak); border-color:var(--vurgu); }
.anahtar input:checked + .anahtar-govde::after{ transform:translateX(18px); background:var(--vurgu); }

/* kaydirici */
.kaydirici{
    -webkit-appearance:none; appearance:none; width:100%; height:4px;
    background:var(--zemin-4); border-radius:99px; outline:none;
}
.kaydirici::-webkit-slider-thumb{
    -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
    background:var(--vurgu); border:2px solid var(--zemin-1); cursor:pointer;
}
.kaydirici::-moz-range-thumb{
    width:14px; height:14px; border-radius:50%; background:var(--vurgu);
    border:2px solid var(--zemin-1); cursor:pointer;
}

/* renk secici */
.renk-secici{
    width:38px; height:38px; padding:2px; border:1px solid var(--cizgi-parlak);
    border-radius:var(--r); background:var(--zemin-3); cursor:pointer;
}

/* -------------------------------------------------------------------- rozet */
.rozet{
    display:inline-flex; align-items:center; gap:6px;
    padding:3px 9px; border-radius:99px;
    background:var(--zemin-3); border:1px solid var(--cizgi-parlak);
    font-size:12px; font-weight:500; color:var(--yazi-soluk); white-space:nowrap;
}
.rozet.yesil{ background:var(--vurgu-yumusak); border-color:rgba(25,195,125,.4); color:#5EE6AE; }
.rozet.turuncu{ background:var(--ikincil-yumusak); border-color:rgba(245,158,11,.4); color:#FBBF24; }
.rozet.kirmizi{ background:var(--tehlike-yumusak); border-color:rgba(239,68,68,.4); color:#FCA5A5; }
.rozet.mavi{ background:var(--bilgi-yumusak); border-color:rgba(56,189,248,.4); color:#7DD3FC; }
.rozet .nokta{ width:6px; height:6px; border-radius:50%; background:currentColor; }

/* -------------------------------------------------------------------- tablo */
.tablo-sarmal{ width:100%; overflow-x:auto; border-radius:var(--r-buyuk); }

.tablo{
    width:100%; border-collapse:separate; border-spacing:0;
    background:var(--zemin-2); font-size:14px;
}
.tablo thead th{
    position:sticky; top:0; z-index:2;
    padding:12px 14px; text-align:left; white-space:nowrap;
    background:#0E1728; color:var(--yazi-soluk);
    font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
    border-bottom:1px solid var(--cizgi-parlak);
}
.tablo tbody td{
    padding:11px 14px; border-bottom:1px solid var(--cizgi); vertical-align:middle;
}
.tablo tbody tr:nth-child(even) td{ background:rgba(255,255,255,.018); }
.tablo tbody tr:hover td{ background:var(--vurgu-yumusak); }
.tablo tbody tr:last-child td{ border-bottom:0; }
.tablo .sag{ text-align:right; }
.tablo .daralt{ width:1%; white-space:nowrap; }

/* -------------------------------------------------------------------- sekme */
.sekmeler{
    display:flex; gap:4px; border-bottom:1px solid var(--cizgi); margin-bottom:18px;
}
.sekme{
    padding:10px 14px; background:none; border:0; border-bottom:2px solid transparent;
    color:var(--yazi-soluk); font:500 14px/1 var(--yazitipi); cursor:pointer;
    transition:color var(--gecis), border-color var(--gecis);
}
.sekme:hover{ color:var(--yazi); }
.sekme.secili{ color:var(--vurgu); border-bottom-color:var(--vurgu); }

/* ------------------------------------------------------------------- ipucu */
.ipucu{ position:relative; }
.ipucu::after{
    content:attr(data-ipucu);
    position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%) scale(.96);
    padding:5px 9px; background:var(--zemin-0); color:var(--yazi);
    border:1px solid var(--cizgi-parlak); border-radius:var(--r-kucuk);
    font-size:12px; white-space:nowrap; pointer-events:none;
    opacity:0; transition:opacity var(--gecis), transform var(--gecis);
    box-shadow:var(--golge-kucuk); z-index:50;
}
.ipucu:hover::after{ opacity:1; transform:translateX(-50%) scale(1); }
.ipucu.sag-ipucu::after{
    left:calc(100% + 8px); bottom:auto; top:50%; transform:translateY(-50%) scale(.96);
}
.ipucu.sag-ipucu:hover::after{ transform:translateY(-50%) scale(1); }

/* -------------------------------------------------------------------- modal */
.modal-perde{
    position:fixed; inset:0; z-index:100;
    background:rgba(4,8,16,.7); backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center; padding:24px;
}
.modal{
    width:min(560px,100%); max-height:86vh; overflow:auto;
    background:var(--zemin-2); border:1px solid var(--cizgi-parlak);
    border-radius:var(--r-buyuk); box-shadow:var(--golge);
}

/* ----------------------------------------------------------------- bildirim */
.bildirimler{
    position:fixed; top:16px; right:16px; z-index:200;
    display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.bildirim{
    display:flex; align-items:center; gap:10px;
    min-width:240px; padding:12px 14px;
    background:var(--zemin-2); border:1px solid var(--cizgi-parlak);
    border-left:3px solid var(--vurgu);
    border-radius:var(--r); box-shadow:var(--golge); font-size:14px;
    animation:bildirim-gir 200ms ease;
}
/* Bildirimdeki eylem dugmesi (orn. "Geri al"); kap tiklamayi gecirmez, dugme alir. */
.bildirim-eylem{ pointer-events:auto; margin-left:auto; color:var(--vurgu); font-weight:600; }
.bildirim.hata{ border-left-color:var(--tehlike); }
.bildirim.uyari{ border-left-color:var(--ikincil); }
@keyframes bildirim-gir{ from{ opacity:0; transform:translateX(12px); } }

/* ------------------------------------------------------------------ ilerleme */
.ilerleme{
    height:6px; background:var(--zemin-4); border-radius:99px; overflow:hidden;
}
.ilerleme > span{
    display:block; height:100%; background:var(--vurgu); border-radius:99px;
    transition:width 200ms ease;
}

/* --------------------------------------------------------------- bos durum */
.bos-durum{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; padding:48px 24px; text-align:center; color:var(--yazi-soluk);
}
.bos-durum svg{ width:40px; height:40px; color:var(--cizgi-parlak); }

/* -------------------------------------------------------------- istatistik */
.istatistik{
    display:flex; flex-direction:column; gap:2px;
    padding:16px 18px; background:var(--zemin-2);
    border:1px solid var(--cizgi); border-radius:var(--r-buyuk);
}
.istatistik .deger{
    font-size:26px; font-weight:600; letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;
}
.istatistik .baslik{ font-size:12px; color:var(--yazi-soluk); text-transform:uppercase;
    letter-spacing:.06em; }

/* ---------------------------------------------------------------- uyari kutusu */
.uyari{
    display:flex; gap:12px; align-items:flex-start;
    padding:12px 14px; border-radius:var(--r);
    background:var(--ikincil-yumusak); border:1px solid rgba(245,158,11,.35);
    color:#FCD34D; font-size:13px;
}
.uyari svg{ width:18px; height:18px; flex:none; margin-top:1px; }
.uyari.bilgi{ background:var(--bilgi-yumusak); border-color:rgba(56,189,248,.35); color:#7DD3FC; }
.uyari.hata{ background:var(--tehlike-yumusak); border-color:rgba(239,68,68,.35); color:#FCA5A5; }
.uyari a{ color:inherit; text-decoration:underline; }

/* ------------------------------------------------------- soru penceresi */
.modal-dar{ width:min(420px,100%); }
.modal-ayak{
    display:flex; justify-content:flex-end; gap:8px;
    padding:12px 18px 16px; border-top:1px solid var(--cizgi);
}

.yonga-siral{ display:flex; flex-wrap:wrap; gap:6px; }
.yonga{
    display:inline-flex; align-items:center; gap:6px;
    min-height:36px; padding:0 12px;
    background:var(--zemin-3); color:var(--yazi-soluk);
    border:1px solid var(--cizgi-parlak); border-radius:99px;
    font:500 13px/1 var(--yazitipi); cursor:pointer;
    transition:border-color var(--gecis), color var(--gecis), background var(--gecis);
}
.yonga:hover{ background:var(--zemin-4); color:var(--yazi); }
.yonga-nokta{
    width:8px; height:8px; border-radius:50%;
    background:var(--yonga-renk, var(--yazi-soluk));
}
.yonga.secili{
    border-color:var(--yonga-renk, var(--vurgu));
    color:var(--yazi);
    background:color-mix(in srgb, var(--yonga-renk, var(--vurgu)) 16%, transparent);
}

/* Gercekci stile ozel denetimler (yayin acisi): klasik stilde gizli — varliklar/js/tahta/stil.js */
html:not([data-gorsel-stil="gercekci"]) .yalniz-gercekci{ display:none !important; }