/* Grid v4 — görünür kare resize handle'ları */

#dashboard {
    --grid-cols: 24;
    --grid-rows: 24;
    --dash-pad-x: clamp(6px, 1vw, 18px);
    --dash-pad-y: clamp(6px, 1vw, 18px);

    /* Boşluk, PENCEREYE değil HÜCRE ADIMINA orantılıdır.
       Eski hâli (`clamp(6px,.9vw,14px)`) hücre sayısından habersizdi: 37×28'lik
       ızgarada 1280×720'de boşluklar yatayda 414px (%32), dikeyde 311px (%43)
       yiyordu — satır yüksekliği 11px'e düşerken boşluk 11.5px'ti, yani boşluk
       hücreden büyüktü. Artık adımın ~%18'i: 720p'de satır 11px → 20px. */
    --cell-pitch-x: calc((100vw  - 2 * var(--dash-pad-x)) / var(--grid-cols));
    --cell-pitch-y: calc((100dvh - 2 * var(--dash-pad-y)) / var(--grid-rows));
    --grid-gap-x: clamp(2px, calc(var(--cell-pitch-x) * .18), 14px);
    --grid-gap-y: clamp(2px, calc(var(--cell-pitch-y) * .18), 14px);
    /* Geriye dönük: tek değerli --grid-gap'e bağlı eski kurallar bozulmasın */
    --grid-gap: var(--grid-gap-x);

    display: grid;
    /* minmax(0,1fr) — ŞART. Sade `1fr` = `minmax(auto,1fr)` demektir ve
       widget'ların px cinsinden min-width/min-height değerleri o `auto`
       tabanını besleyip TEK TEK İZLERİ ŞİŞİRİYORDU: 1280×720'de satırlar
       11.0px ile 21.2px arasında dağılıyordu (%93 sapma). Kaydedilmiş düzen
       eşit hücre varsayar; ızgara eşit değilse hiçbir widget kullanıcının
       bıraktığı yere denk gelmez. */
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    grid-template-rows:    repeat(var(--grid-rows), minmax(0, 1fr));
    gap: var(--grid-gap-y) var(--grid-gap-x);
    width: 100%; height: 100dvh;
    padding: var(--dash-pad-y) var(--dash-pad-x);
    box-sizing: border-box;
    position: relative;
    /* z-index kaldırıldı: stacking context oluşturmasın.
       Böylece içindeki .search-widget-v2.sv2-focused (z-index:50) body katmanında
       blur overlay'in (z-index:30) üstüne çıkabilir. */
}

body.edit-mode #dashboard {
    background-image:
        linear-gradient(to right,  rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size:
        calc((100% - (var(--grid-cols) - 1) * var(--grid-gap-x)) / var(--grid-cols) + var(--grid-gap-x)) 100%,
        100% calc((100% - (var(--grid-rows) - 1) * var(--grid-gap-y)) / var(--grid-rows) + var(--grid-gap-y));
}

.widget {
    position: relative;
    min-width: 0; min-height: 0;
    overflow: hidden;
    /* `size` (eski hâli: `inline-size`) — iki gerekçe:
       1) cqmin/cqb birimleri açılır, yani metin SADECE genişliğe göre değil
          iki eksene göre ölçeklenir. 570×147'lik bir saat kutusu artık
          yazı boyutunu 570'ten değil 147'den alır.
       2) Boyut kapsaması (size containment) widget içeriğinin ızgara izini
          şişirmesini kökten engeller — minmax(0,1fr) ile aynı hedefi
          ikinci bir katmandan güvenceye alır.
       Izgara alanı her iki eksende de kesin ölçülüdür, bu yüzden güvenlidir. */
    container-type: size;
    will-change: grid-column, grid-row;
}

body.edit-mode .widget {
    cursor: grab;
    outline: 2px dashed color-mix(in srgb, var(--accent) 50%, transparent);
    outline-offset: -2px;
    /* contain:paint ve overflow:hidden handle'ları kırpar — edit modda kaldır */
    overflow: visible !important;
    contain: layout style !important;
}
body.edit-mode .widget.edit-dragging {
    cursor: grabbing;
    opacity: .7;
    z-index: 100;
}

/* ── Resize handle'ları — GÖRÜNÜR KARELER ──────────────────────────────── */
.edit-handle {
    position: absolute;
    background: var(--accent);
    border: 2px solid #fff;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,.5);
    opacity: 0;
    transition: opacity .2s, transform .15s;
    z-index: 50;
    touch-action: none;
    pointer-events: none;
}
body.edit-mode .edit-handle {
    opacity: 1;
    pointer-events: auto;
}
.edit-handle:hover {
    transform: scale(1.25);
    background: color-mix(in srgb, var(--accent) 80%, white);
}

/* Köşeler — 14px kare */
.edit-handle.corner { width: 14px; height: 14px; }
.edit-handle.nw { top: -7px;    left: -7px;    cursor: nwse-resize; }
.edit-handle.ne { top: -7px;    right: -7px;   cursor: nesw-resize; }
.edit-handle.sw { bottom: -7px; left: -7px;    cursor: nesw-resize; }
.edit-handle.se { bottom: -7px; right: -7px;   cursor: nwse-resize; }

/* Kenar orta noktaları — 10x14 dikdörtgen kare */
.edit-handle.edge { border-radius: 3px; }
.edit-handle.n {
    top: -7px;
    left: 50%; transform: translateX(-50%);
    width: 18px; height: 10px;
    cursor: ns-resize;
}
.edit-handle.s {
    bottom: -7px;
    left: 50%; transform: translateX(-50%);
    width: 18px; height: 10px;
    cursor: ns-resize;
}
.edit-handle.w {
    left: -7px;
    top: 50%; transform: translateY(-50%);
    width: 10px; height: 18px;
    cursor: ew-resize;
}
.edit-handle.e {
    right: -7px;
    top: 50%; transform: translateY(-50%);
    width: 10px; height: 18px;
    cursor: ew-resize;
}
.edit-handle.n:hover { transform: translateX(-50%) scale(1.25); }
.edit-handle.s:hover { transform: translateX(-50%) scale(1.25); }
.edit-handle.w:hover { transform: translateY(-50%) scale(1.25); }
.edit-handle.e:hover { transform: translateY(-50%) scale(1.25); }

body:not(.edit-mode) .edit-handle { display: none !important; }

/* ── Widget üst sağ overlay (kapat + ayar) ──────────────────────────── */
.edit-overlay {
    position: absolute;
    top: 6px; right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
    z-index: 40;
}
body.edit-mode .edit-overlay {
    opacity: 1;
    pointer-events: auto;
}
.edit-overlay-btn {
    /* Küçük widget'larda kutuyu yutmasın: kutunun kısa kenarına da bağlı */
    width: clamp(22px, 22cqmin, 30px); height: clamp(22px, 22cqmin, 30px);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(0,0,0,.75);
    backdrop-filter: blur(4px);
    color: #fff;
    cursor: pointer;
    display: grid; place-items: center;
    padding: 6px;
    transition: background .2s, transform .15s, border-color .2s;
}
.edit-overlay-btn:hover {
    background: rgba(0,0,0,.95);
    transform: scale(1.1);
    border-color: var(--accent);
}
.edit-overlay-btn.close:hover {
    background: rgba(248,113,113,.9);
    border-color: rgba(248,113,113,1);
}
.edit-overlay-btn svg { color: #fff; pointer-events: none; }

body:not(.edit-mode) .edit-overlay { display: none !important; }

/* ── Ghost ───────────────────────────────────────────────────────────── */
.edit-ghost {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border: 2px dashed var(--accent);
    border-radius: 14px;
    pointer-events: none;
    z-index: 2;
    box-shadow: inset 0 0 30px color-mix(in srgb, var(--accent) 20%, transparent);
}
.edit-ghost.blocked {
    background: rgba(248,113,113,.18);
    border-color: rgba(248,113,113,.85);
    box-shadow: inset 0 0 30px rgba(248,113,113,.2);
}

body:not(.edit-mode) .widget {
    outline: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   WIDGET EKLEME — hap ⇄ panel morph, yerleştirme hayaleti
   ══════════════════════════════════════════════════════════════════════ */

/* ── Yerleştirme hayaleti ────────────────────────────────────────────
   Sürükle/boyutlandır hayaletiyle aynı öğe; yerleştirme sırasında daha
   belirgin olsun diye ayrıca işaretlenir. */
.edit-ghost.placing {
    z-index: 60;
    border-style: solid;
    border-width: 2px;
    animation: wa-ghost-in .18s ease both;
}
@keyframes wa-ghost-in {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: none; }
}
/* Uygun olmayan yere tıklanınca kısa bir "hayır" sarsıntısı */
.edit-ghost.shake { animation: wa-shake .32s ease; }
@keyframes wa-shake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-6px); }
    40%     { transform: translateX(6px); }
    60%     { transform: translateX(-4px); }
    80%     { transform: translateX(4px); }
}

/* Yerleştirme sırasında imleç nişangâh olur ve alttaki widget'lar
   tıklamayı yutmaz (tıklama capture ile zaten yakalanıyor). */
body.placing-widget { cursor: crosshair; }
body.placing-widget .widget { pointer-events: none; }
body.placing-widget #widgetAdder { pointer-events: auto; }

/* ── Kapsayıcı: hap ⇄ panel arasında MORPH eden tek öğe ─────────────── */
#widgetAdder {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 70;

    display: flex;
    flex-direction: column;
    overflow: hidden;

    background: rgba(20, 22, 30, 0.72);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);

    /* Morph'un kendisi: ölçü + köşe yarıçapı geçişi */
    transition:
        width        .38s cubic-bezier(.22, 1, .36, 1),
        height       .38s cubic-bezier(.22, 1, .36, 1),
        border-radius .38s cubic-bezier(.22, 1, .36, 1),
        opacity      .22s ease,
        transform    .32s cubic-bezier(.22, 1, .36, 1);

    /* Düzenleme modu kapalıyken tamamen yok */
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(16px) scale(.96);
}
body.edit-mode #widgetAdder {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
}

/* Boyut durumları
   Çubuk artık iki düğme taşıyor: hem daha geniş hem biraz daha yüksek.
   Yerleştirme sırasında tek parçaya döndüğü için tekrar daralır. */
#widgetAdder.is-collapsed { width: 330px; height: 56px;  border-radius: 28px; }
#widgetAdder.is-expanded  { width: min(420px, calc(100vw - 32px)); height: min(60vh, 430px); border-radius: 18px; }
#widgetAdder.is-placing   { width: 270px; }

/* ── İçerik katmanları: üst üste durup çapraz geçerler ──────────────── */
.wa-bar, .wa-panel {
    position: absolute;
    inset: 0;
    transition: opacity .2s ease, transform .28s cubic-bezier(.22,1,.36,1);
}

/* ── Bölünmüş çubuk ─────────────────────────────────────────────────── */
.wa-bar { display: flex; align-items: stretch; }

.wa-half {
    flex: 1 1 0; min-width: 0;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    background: none; border: none; color: inherit;
    font: inherit; font-weight: 600; font-size: .9rem;
    cursor: pointer; padding: 0 14px;
    white-space: nowrap;
    transition: background .16s ease, flex-grow .32s cubic-bezier(.22,1,.36,1);
}
.wa-half:hover { background: rgba(255,255,255,0.07); }
.wa-half:active { background: rgba(255,255,255,0.11); }
.wa-half-label { overflow: hidden; text-overflow: ellipsis; }

/* Ortadaki ayraç — iki düğmeyi görsel olarak ayıran ince çizgi */
.wa-divider {
    flex: 0 0 1px;
    align-self: center;
    width: 1px; height: 58%;
    background: rgba(255,255,255,0.18);
    transition: opacity .18s ease;
}

.wa-half-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
}
/* Arka plan yarısı ikincil eylem — ikonu daha sakin dursun */
.wa-half-bg .wa-half-icon {
    background: rgba(255,255,255,0.12);
    color: inherit;
}
.wa-half-bg:hover .wa-half-icon { background: rgba(255,255,255,0.2); }

/* Yerleştirme kipi: çubuk tek parçaya döner */
#widgetAdder.is-placing .wa-divider,
#widgetAdder.is-placing .wa-half-bg { opacity: 0; pointer-events: none; width: 0; flex: 0 0 0; padding: 0; }
#widgetAdder.is-placing .wa-half-add { flex-grow: 1; }
#widgetAdder.is-placing .wa-half-icon { animation: wa-pulse 1.1s ease-in-out infinite; }
@keyframes wa-pulse {
    0%,100% { transform: scale(1);   opacity: 1;   }
    50%     { transform: scale(1.16); opacity: .75; }
}

.wa-panel {
    display: flex; flex-direction: column;
    opacity: 0; transform: scale(.97);
    pointer-events: none;
}

/* Durum geçişleri
   DİKKAT: `pointer-events: auto` veren satırlar `body.edit-mode` ile
   sınırlanmak ZORUNDA. Aksi hâlde `.wa-bar` (ID+sınıf, yüksek özgüllük)
   üstteki `#widgetAdder { pointer-events: none }` kuralından MİRAS ALDIĞI
   `none`'ı kendi başına `auto`'ya çeviriyordu — düzenleme modu kapalıyken
   çubuk görünmez ama "Widget Ekle"/"Arka Plan" düğmeleri hâlâ tıklanabilir
   kalıyordu (arka plan editörünü sessizce açan gerçek bir kullanıcı hatası). */
body.edit-mode #widgetAdder.is-collapsed .wa-bar   { opacity: 1; transform: scale(1); pointer-events: auto; }
body.edit-mode #widgetAdder.is-collapsed .wa-panel { opacity: 0; transform: scale(.97); pointer-events: none; }
body.edit-mode #widgetAdder.is-expanded  .wa-bar   { opacity: 0; transform: scale(1.04); pointer-events: none; }
body.edit-mode #widgetAdder.is-expanded  .wa-panel { opacity: 1; transform: scale(1); pointer-events: auto;
                                      transition-delay: .1s; }

/* ── Panel başlığı ──────────────────────────────────────────────────── */
.wa-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-shrink: 0;
    padding: 14px 14px 10px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.wa-title { font-weight: 700; font-size: .95rem; }
.wa-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; flex-shrink: 0;
    background: rgba(255,255,255,0.06); border: none; border-radius: 8px;
    color: inherit; cursor: pointer; opacity: .75;
    transition: background .15s, opacity .15s;
}
.wa-close:hover { background: rgba(255,255,255,0.14); opacity: 1; }

/* ── Liste ──────────────────────────────────────────────────────────── */
.wa-list {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 8px; display: flex; flex-direction: column; gap: 4px;
}
.wa-item {
    display: flex; align-items: center; gap: 11px;
    width: 100%; text-align: left;
    padding: 9px 11px;
    background: rgba(255,255,255,0.03);
    border: 1px solid transparent; border-radius: 11px;
    color: inherit; font: inherit; cursor: pointer;
    transition: background .14s, border-color .14s, transform .14s;
}
.wa-item:hover { background: rgba(255,255,255,0.09); transform: translateX(2px); }
.wa-item:active { transform: translateX(2px) scale(.99); }
.wa-item-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 9px;
    background: rgba(255,255,255,0.07);
    opacity: .8;
}
.wa-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wa-item-name { font-weight: 600; font-size: .86rem; }
.wa-item-desc {
    font-size: .72rem; opacity: .55; line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wa-item-size {
    flex-shrink: 0; font-size: .68rem; opacity: .4;
    font-variant-numeric: tabular-nums;
}
.wa-item-plus {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; flex-shrink: 0;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--accent);
    transition: background .14s, color .14s;
}
.wa-item:hover .wa-item-plus { background: var(--accent); color: #fff; }

/* Ekrana sığmayan widget — listede kalır ama nedeni belli olsun */
.wa-item.no-space { opacity: .45; }
.wa-item.no-space .wa-item-plus {
    background: rgba(248,113,113,.18); color: #fca5a5;
}
.wa-item.no-space:hover { background: rgba(248,113,113,.08); transform: none; }

.wa-empty {
    padding: 26px 16px; text-align: center;
    font-size: .82rem; opacity: .5;
}

/* Küçük ekran: panel neredeyse tam genişlik */
@media (max-width: 520px) {
    #widgetAdder.is-collapsed { width: calc(100vw - 32px); max-width: 330px; }
    #widgetAdder.is-expanded { width: calc(100vw - 24px); height: min(64vh, 420px); }
    #widgetAdder { bottom: 14px; }
    .wa-half { font-size: .84rem; gap: 7px; padding: 0 10px; }
}