/**
 * kase-text-toolbar.css — FAZ 2
 * ────────────────────────────────────────────────────────────────────────
 * KONUM DEĞİŞİKLİĞİ (FAZ 1 → FAZ 2): .kase-tt-desktop artık position:absolute
 * DEĞİL. kase-text-engine.js tarafından #kase-canvas-wrapper'ın İÇİNE değil,
 * #kase-canvas-area'nın statik bir flex-child'ı olarak, canvas'tan HEMEN
 * ÖNCE ekleniyor. Böylece toolbar tuvalin DIŞINDA durur, hiçbir metni
 * kapatmaz ve nesneyi "takip etmez" — Canva'daki sabit üst çubuk mantığı.
 *
 * RESPONSIVE: data-viewmode attribute'u (desktop/tablet/mobileLandscape/
 * mobilePortrait) JS tarafından her bar'a yazılır; bu dosya o attribute'a
 * göre boyut/yerleşim ince ayarları yapar.
 * ────────────────────────────────────────────────────────────────────────
 */

:root {
    --kase-tt-accent: #2f6fed;
    --kase-tt-accent-bg: #eaf1ff;
    --kase-tt-border: #e2e5ea;
    --kase-tt-text: #22262b;
    --kase-tt-danger: #e5484d;
    --kase-tt-bar-bg: #ffffff;
    --kase-tt-btn-h: 34px;
}

.kase-text-toolbar {
    display: none; /* .visible eklenince görünür olur — ToolbarView kontrol eder */
    align-items: center;
    gap: 4px;
    background: var(--kase-tt-bar-bg);
    border: 1px solid var(--kase-tt-border);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(20, 20, 30, 0.08);
    padding: 5px 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    color: var(--kase-tt-text);
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}
.kase-text-toolbar.visible { display: flex; }

.kase-tt-group {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 1;  /* HATA DÜZELTMESİ: gerçek bir stacking context kurar, popover'ın sol sidebar'ın ALTINDA kalmasını önler */
}
.kase-tt-sep { width: 1px; height: 20px; background: var(--kase-tt-border); margin: 0 4px; flex: 0 0 auto; }

.kase-tt-btn {
    height: var(--kase-tt-btn-h);
    min-width: var(--kase-tt-btn-h);
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: none;
    background: transparent;
    border-radius: 7px;
    cursor: pointer;
    color: var(--kase-tt-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    transition: background 0.12s ease, color 0.12s ease;
}
.kase-tt-btn:hover { background: #f1f3f6; }
.kase-tt-btn.kase-tt-active,
.kase-tt-btn[aria-pressed="true"] { background: var(--kase-tt-accent-bg); color: var(--kase-tt-accent); }
.kase-tt-btn.kase-tt-danger { color: var(--kase-tt-danger); }
.kase-tt-btn.kase-tt-danger:hover { background: #fdecec; }
.kase-tt-caret { font-size: 9px; opacity: 0.6; }

/* ── Popover (Font / Punto / Satır-Harf Aralığı / Döndür) ─────────────── */
/* HATA DÜZELTMESİ (Sorun 3 — masaüstünde font popover'ı sol sidebar'ın
   ALTINDA kalıyordu): z-index 20 → 100000'e çıkarıldı (sayfadaki en yüksek
   bilinen z-index — mobil panel arka planı 9998, unified paneller 9999 —
   değerinden bile yüksek, ihtimal dışı bırakmak için). Ayrıca merkezi
   hizalama (left:50%+translateX(-50%)) araç çubuğunun SOL ucundaki dar
   butonlarda (ör. Font) popover'ı sola, sidebar'ın alanına taşırıyordu;
   artık butonun SOL kenarına hizalanıyor (left:0, transform yok). */
.kase-tt-popover {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #fff;
    border: 1px solid var(--kase-tt-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(20, 20, 30, 0.16);
    padding: 10px;
    z-index: 100000;
    min-width: 160px;
}
.kase-tt-popover.open { display: block; }

.kase-tt-font-pop { min-width: 220px; max-height: 320px; display: none; flex-direction: column; }
.kase-tt-font-pop.open { display: flex; }
.kase-tt-font-search {
    width: 100%; box-sizing: border-box; padding: 7px 9px; margin-bottom: 8px;
    border: 1px solid var(--kase-tt-border); border-radius: 7px; font-size: 13px;
}
.kase-tt-font-list { overflow-y: auto; max-height: 240px; display: flex; flex-direction: column; gap: 1px; }
.kase-tt-font-item {
    text-align: left; padding: 7px 9px; border: none; background: transparent;
    border-radius: 6px; cursor: pointer; font-size: 14px; color: var(--kase-tt-text);
}
.kase-tt-font-item:hover { background: var(--kase-tt-accent-bg); }

.kase-tt-size-pop { display: none; flex-direction: column; gap: 8px; min-width: 190px; }
.kase-tt-size-pop.open { display: flex; }
.kase-tt-size-slider { width: 100%; }
/* İSTEK: punto girişine +/- stepper eklendi — hem tıklamalı hem elle yazılabilir */
.kase-tt-size-stepper {
    display: flex;
    align-items: center;
    gap: 6px;
}
.kase-tt-size-dec, .kase-tt-size-inc, .kase-tt-rot-dec, .kase-tt-rot-inc {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 1px solid var(--kase-tt-border);
    border-radius: 7px;
    background: #f7f8fc;
    color: var(--kase-tt-text);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.kase-tt-size-dec:hover, .kase-tt-size-inc:hover,
.kase-tt-rot-dec:hover, .kase-tt-rot-inc:hover { background: var(--kase-tt-accent-bg); color: var(--kase-tt-accent); border-color: var(--kase-tt-accent); }
.kase-tt-size-dec:active, .kase-tt-size-inc:active,
.kase-tt-rot-dec:active, .kase-tt-rot-inc:active { transform: scale(0.94); }
.kase-tt-size-num, .kase-tt-rot-num {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    box-sizing: border-box; padding: 6px 4px;
    border: 1px solid var(--kase-tt-border); border-radius: 7px; font-size: 14px; font-weight: 600;
}
.kase-tt-rot-slider { width: 100%; }
.kase-tt-slider-pop { min-width: 170px; }
.kase-tt-lh-slider, .kase-tt-ls-slider { width: 100%; }
.kase-tt-rot-num {
    width: 100%; box-sizing: border-box; padding: 6px 8px;
    border: 1px solid var(--kase-tt-border); border-radius: 7px; font-size: 13px;
}

/* ══════════════════════════════════════════════════════════════════════
   DESKTOP (>1024px) & TABLET (769–1024px) — üstte, tuval dışında, statik
   ══════════════════════════════════════════════════════════════════════ */
.kase-tt-desktop {
    position: static;      /* FAZ 1'deki position:absolute KALDIRILDI */
    /* JS artık bu bar'ı #kase-canvas-area'nın SONUNA ekliyor (appendChild) —
       mobildeki positional (:first-child / :nth-child(3)) CSS kurallarının
       kaymasını önlemek için. Görsel olarak yine de EN ÜSTTE görünmesi
       order:-1 (flex sırası) ile sağlanıyor; DOM sırası hiç değişmiyor. */
    order: -1;
    margin: 0 0 10px 0;
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
    align-self: center;    /* #kase-canvas-area zaten align-items:center */
}
.kase-tt-desktop[data-viewmode="tablet"] {
    gap: 2px;
    padding: 4px 6px;
}
.kase-tt-desktop[data-viewmode="tablet"] .kase-tt-btn { padding: 0 7px; font-size: 12px; }
.kase-tt-desktop[data-viewmode="tablet"] .kase-tt-sep { margin: 0 2px; }

/* ══════════════════════════════════════════════════════════════════════
   MOBİL (≤768px) — tuvalin altında, yatay kaydırmalı, sabit
   ══════════════════════════════════════════════════════════════════════ */
.kase-tt-mobile {
    width: 100%;
    box-sizing: border-box;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 -2px 10px rgba(20, 20, 30, 0.08);
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    flex-wrap: nowrap;
}
.kase-tt-mobile::-webkit-scrollbar { display: none; }
.kase-tt-mobile .kase-tt-btn {
    min-width: 40px;
    height: 40px;      /* Madde 4: büyük dokunmatik butonlar */
    flex: 0 0 auto;
}
.kase-tt-mobile .kase-tt-popover {
    position: fixed;
    left: 50%;
    top: auto;
    bottom: 62px;
    transform: translateX(-50%);
    max-width: calc(100vw - 24px);
}

/* Mobil Dikey: dar genişlik — popover'lar ekrana daha geniş yayılır */
.kase-tt-mobile[data-viewmode="mobilePortrait"] .kase-tt-popover {
    width: min(320px, calc(100vw - 24px));
}

/* Mobil Yatay: kısıtlı yükseklik — popover'lar daha kompakt, taşma önlenir */
.kase-tt-mobile[data-viewmode="mobileLandscape"] .kase-tt-btn { height: 36px; min-width: 36px; }
.kase-tt-mobile[data-viewmode="mobileLandscape"] .kase-tt-popover {
    bottom: 54px;
    max-height: 40vh;
    overflow-y: auto;
}
.kase-tt-mobile[data-viewmode="mobileLandscape"] .kase-tt-font-pop { max-height: 40vh; }
.kase-tt-mobile[data-viewmode="mobileLandscape"] .kase-tt-font-list { max-height: 140px; }

@media (max-width: 480px) {
    .kase-tt-mobile .kase-tt-btn { min-width: 42px; }
}

/* ══════════════════════════════════════════════════════════════════════
   "METİN EKLE" AÇILIR PANELİ (sidebar) — kase-text-engine.js injectMenu()
   ──────────────────────────────────────────────────────────────────────
   HATA DÜZELTMESİ: Bu kural daha önce eksikti; panel hiçbir zaman
   display:none olmadığı için "Metin Ekle" ve "Dairesel Metin Ekle"
   seçenekleri her zaman açık görünüyordu (masaüstü ve mobilde). Diğer
   sidebar alt panelleriyle (#kase-logo-panel vb.) aynı görsel dile
   uyumlu, varsayılan KAPALI durum burada tanımlanıyor.
   ══════════════════════════════════════════════════════════════════════ */
.kase-text-menu-panel {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: #f7f8fc;
    border: 1px solid #e2e4ef;
    border-top: none;
    border-radius: 0 0 10px 10px;
    box-sizing: border-box;
}
.kase-text-menu-panel.open { display: flex; }
.kase-text-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
}

/* İSTEK: Mobilde bu panel artık ".kase-tool-group" akışının İÇİNDE bir
   satır olarak yer kaplamıyor (bu, hem yatay kaydırmalı araç şeridini
   yukarı itiyor hem de kötü görünüyordu). position:fixed ile akıştan
   TAMAMEN çıkarılıp, JS ile butonun ÜZERİNDE (yukarı doğru) konumlandırılan
   kompakt, gölgeli bir dropdown haline getirildi.
   NOT: position:absolute değil position:fixed kullanılıyor — çünkü
   #kase-tool-buttons "overflow-x:auto" olduğunda tarayıcılar genelde
   "overflow-y:visible"i de örtük olarak clip'e çevirir (bilinen bir CSS
   davranışı); position:fixed bu kırpılma riskini tamamen ortadan kaldırır
   ve zaten bu dosyadaki diğer tüm mobil alt paneller (kase-v320-panels-
   unified bloğu) de aynı position:fixed desenini kullanıyor. */
@media (max-width: 768px) {
    .kase-text-menu-panel {
        position: fixed;
        left: 12px;
        bottom: 70px; /* JS (positionMobileTextMenu) açılışta gerçek değerle günceller */
        top: auto;
        min-width: 200px;
        max-width: calc(100vw - 24px);
        z-index: 100001;
        box-shadow: 0 8px 24px rgba(20, 20, 30, 0.18);
        border-radius: 12px;
    }
}