/* BNT Ana Stiller — tema değişkenleri + global resetler */

:root {
    --accent: #6b6bff;
    --bg-base: #0e0e14;
    --text: #f3f3f5;
    --text-muted: rgba(243, 243, 245, 0.7);
    --bnt-current-bg: url('assets/backgrounds/default.jpg');
    --w-bg: rgba(255, 255, 255, 0.06);
    --w-border: rgba(255, 255, 255, 0.1);
    --w-blur: 18px;
    /* Pencerenin KISA kenarına orantılı. Salt `vw` yükseklikten habersizdi:
       1280×720'de 1080p'yle aynı yarıçap/dolgu çıkıyor, alçak kutularda
       içeriğe yer kalmıyordu. */
    --w-radius: clamp(10px, calc(min(100vw, 100dvh) * .016), 22px);
    --w-pad: clamp(6px, calc(min(100vw, 100dvh) * .014), 18px);
}

* {
    box-sizing: border-box;
}

/* ── Gelişmiş Seçenekler ─────────────────────────────────────────────
   Ayarlar > Hakkında > Gelişmiş Seçenekler anahtarı kapalıyken, uzman /
   hata ayıklama amaçlı arayüz parçaları gizlenir. Sınıf <html> üzerinde
   olduğu için sonradan JS ile üretilen içerik de otomatik doğru gelir.
   Yeni bir gelişmiş öğe eklemek için ona `advanced-only` sınıfını verin. */
html:not(.advanced-on) .advanced-only {
    display: none !important;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100dvh;
    color: var(--text);
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    overflow: hidden;
}

body {
    position: relative;
    /* `fixed` (background-attachment) KALDIRILDI: sayfa `overflow:hidden` — hiç
       kaymıyor, yani fixed bir işe yaramıyordu ama Linux'ta 4K arka planı GPU
       önbelleğine almayı engelleyip ana-iş parçacığında sürekli yeniden
       kompozite ettiriyordu. Görsel fark yok, CPU kazancı büyük. */
    background: var(--bnt-current-bg) center/cover no-repeat, var(--bg-base);
    min-height: 100dvh;
}

/* Arka plan kalıcılığı — body değişkeni reset oluyorsa pseudo-element ile garanti */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--bnt-current-bg) center/cover no-repeat;
    pointer-events: none;
}

#bg-dimmer {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
}

.bg-credit {
    position: fixed;
    left: 18px;
    bottom: 16px;
    z-index: 60;
    font-size: .78rem;
    opacity: .55;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    user-select: none;
}

.bg-credit a {
    color: inherit;
    text-decoration: none;
}

/* ── Tema varyantları ─────────────────────────────────────────────────── */
.w-theme-glass {
    --w-bg: rgba(255, 255, 255, 0.06);
    --w-border: rgba(255, 255, 255, 0.1);
    --w-blur: 18px;
}

.w-theme-glass .widget {
    background: var(--w-bg);
    backdrop-filter: blur(var(--w-blur));
    -webkit-backdrop-filter: blur(var(--w-blur));
    border: 1px solid var(--w-border);
}

.w-theme-matte {
    --w-bg: rgba(20, 20, 28, 0.85);
    --w-border: rgba(255, 255, 255, 0.06);
    --w-blur: 0;
}

.w-theme-matte .widget {
    background: var(--w-bg);
    border: 1px solid var(--w-border);
}

.w-theme-transparent {
    --w-bg: transparent;
    --w-border: rgba(255, 255, 255, 0.1);
    --w-blur: 0;
}

.w-theme-transparent .widget {
    background: transparent;
    border: 1px solid var(--w-border);
}

.w-theme-dark {
    --w-bg: rgba(0, 0, 0, 0.55);
    --w-border: rgba(255, 255, 255, 0.15);
    --w-blur: 0;
}

.w-theme-dark .widget {
    background: var(--w-bg);
    border: 2px solid var(--w-border);
}

.w-theme-light {
    --text: #1a1a1f;
    --text-muted: rgba(26, 26, 31, 0.7);
    --w-bg: rgba(255, 255, 255, 0.85);
    --w-border: rgba(0, 0, 0, 0.08);
    --w-blur: 12px;
}

.w-theme-light .widget {
    background: var(--w-bg);
    color: var(--text);
    border: 1px solid var(--w-border);
}

.w-theme-neon {
    --w-bg: rgba(5, 5, 12, 0.78);
    --w-border: var(--accent);
    --w-blur: 8px;
}

.w-theme-neon .widget {
    background: var(--w-bg);
    border: 1px solid var(--w-border);
    box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ── Widget temel ─────────────────────────────────────────────────────── */
.widget {
    border-radius: var(--w-radius);
    padding: var(--w-pad);
    display: flex;
    flex-direction: column;
    color: inherit;
    overflow: hidden;
    font-family: var(--font-family, inherit);
}

/* Widget içindeki metin temel boyutu — widget'ın kendi container-type'ına göre.
   `min(...cqi, ...cqb)`: cqi yalnızca GENİŞLİĞİ bilir. Alçak-geniş kutularda
   (ör. 570×54 arama çubuğu) genişlikten hesaplanan punto kutu yüksekliğini
   aşıyordu. cqb terimi yalnızca kutu alçaldığında devreye girer; normal
   oranlı widget'larda sonuç değişmez. */
.widget .wm-body,
.widget .widget-module {
    font-size: clamp(0.7rem, min(3.5cqi, 8cqb), 1rem);
}

/* ── Widget başına minimum boyutlar (içerik okunabilirliği için taban) ──────
   Değerler `min(<taban>, 100%)` ile SARILIDIR ve bu şart:
   Bir grid öğesinin min-width'i, kendi ızgara alanından büyük olursa öğe
   alanını taşar (min-* , max-* ve alan genişliğini ezer). 720p'de hücreler
   22.7×11px'e indiğinde arama 220px, haberler 200px istiyordu — kutular
   birbirinin üstüne biniyordu. Yüzde, ızgara alanına göre çözülür; böylece
   yer varken taban korunur, yer yokken widget alanına sığar. */
#widget-clock {
    min-width: min(160px, 100%);
    min-height: min(140px, 100%);
}

#widget-weather {
    min-width: min(170px, 100%);
    min-height: min(130px, 100%);
}

#widget-search {
    min-width: min(220px, 100%);
    min-height: min(54px, 100%);
}

#widget-shortcuts {
    min-width: min(150px, 100%);
    min-height: min(130px, 100%);
}

#widget-news {
    min-width: min(170px, 100%);
    min-height: min(200px, 100%);
}

#widget-todo {
    min-width: min(170px, 100%);
    min-height: min(200px, 100%);
}

#widget-notes {
    min-width: min(150px, 100%);
    min-height: min(150px, 100%);
}

#widget-pomodoro {
    min-width: min(190px, 100%);
    min-height: min(190px, 100%);
}

#widget-crypto {
    min-width: min(170px, 100%);
    min-height: min(170px, 100%);
}

#widget-quotes {
    min-width: min(210px, 100%);
    min-height: min(120px, 100%);
}

/* ── Arama widget'ı — TEMA değişkenlerini kullanır (her temada FARKLI görünür) ── */
.search-widget {
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
}

.search-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: clamp(8px, 1vw, 14px) clamp(20px, 2vw, 28px);
    border-radius: 32px;
    background: var(--w-bg);
    backdrop-filter: blur(var(--w-blur));
    -webkit-backdrop-filter: blur(var(--w-blur));
    border: 1px solid var(--w-border);
    transition: border-color .25s, box-shadow .25s;
}

.w-theme-dark .search-container {
    background: rgba(0, 0, 0, 0.55);
}

.w-theme-light .search-container {
    background: rgba(255, 255, 255, 0.85);
}

.w-theme-neon .search-container {
    box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 30%, transparent);
}

.search-container:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

.search-container input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: inherit;
    font-size: clamp(.95rem, 1.1vw, 1.15rem);
    font-family: var(--font-family, inherit);
    padding: 4px 0;
}

.engine-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: clamp(22px, 1.8vw, 32px);
}

.engine-logo img {
    width: 100%;
    height: auto;
    max-height: clamp(20px, 1.6vw, 28px);
    object-fit: contain;
}

.search-suggestions {
    margin-top: 8px;
    background: rgba(20, 20, 28, 0.92);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    max-height: 360px;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.search-suggestions:empty {
    display: none;
}

.search-suggestion-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background .15s;
}

.search-suggestion-item:hover,
.search-suggestion-item.active {
    background: rgba(255, 255, 255, 0.08);
}

body.search-focused .search-widget {
    z-index: 20;
}

/* ── Edit mode toggle butonu — açıkken belirgin, kapalı iken silik ────── */
.edit-mode-toggle-btn {
    position: fixed;
    right: clamp(68px, calc(1.4vw + 56px), 76px);
    bottom: clamp(12px, 1.4vw, 22px);
    width: clamp(36px, 2.8vw, 44px);
    height: clamp(36px, 2.8vw, 44px);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: inherit;
    cursor: pointer;
    z-index: 49;
    display: grid;
    place-items: center;
    padding: 0;
    overflow: hidden;
    transition: background .25s, border-color .25s, opacity .25s;
    opacity: 0.45;
}

.edit-mode-toggle-btn img {
    width: 55%;
    height: 55%;
    filter: invert(1);
    pointer-events: none;
    opacity: 0.6;
}

.edit-mode-toggle-btn:hover {
    opacity: 0.7;
}

body.edit-mode .edit-mode-toggle-btn {
    background: rgba(0, 0, 0, 0.55);
    border-color: var(--accent);
    opacity: 1;
}

body.edit-mode .edit-mode-toggle-btn img {
    opacity: 1;
    filter: invert(1) drop-shadow(0 0 2px var(--accent));
}

/* ── Settings butonu — özel ikon, rotate KALDIRILDI ──────────────────── */
.open-settings-btn {
    position: fixed;
    right: clamp(12px, 1.4vw, 22px);
    bottom: clamp(12px, 1.4vw, 22px);
    width: clamp(36px, 2.8vw, 44px);
    height: clamp(36px, 2.8vw, 44px);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: inherit;
    cursor: pointer;
    z-index: 50;
    display: grid;
    place-items: center;
    transition: background .2s, border-color .2s;
    padding: 0;
    overflow: hidden;
}

.open-settings-btn:hover {
    background: rgba(0, 0, 0, 0.65);
    border-color: var(--accent);
    transform: rotate(60deg);
}

.open-settings-btn {
    transition: background .2s, border-color .2s, transform .35s ease;
}

.open-settings-btn img {
    width: 55%;
    height: 55%;
    filter: invert(1);
    pointer-events: none;
}

/* ── Toast ────────────────────────────────────────────────────────────── */
.toast-root {
    position: fixed;
    right: 20px;
    bottom: 80px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background: rgba(20, 20, 28, 0.95);
    backdrop-filter: blur(12px);
    color: white;
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    pointer-events: auto;
    animation: toast-in .3s cubic-bezier(.2, .8, .2, 1);
    max-width: 320px;
    font-size: .9rem;
}

.toast.error {
    border-color: rgba(248, 113, 113, 0.5);
}

.toast.success {
    border-color: rgba(74, 222, 128, 0.5);
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toast-out {
    to {
        opacity: 0;
        transform: translateX(40px);
    }
}

.toast.leaving {
    animation: toast-out .25s forwards;
}

/* ── Modal kutuları ──────────────────────────────────────────────────── */
.modal-box {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(320px, 92vw, 480px);
    max-height: 90dvh;
    overflow-y: auto;
    background: rgba(20, 20, 28, 0.96);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 24px;
    z-index: 400;
    /* settings-overlay z=200, modal-box ÜSTTE */
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    animation: wm-mount-in .3s cubic-bezier(.2, .8, .2, 1);
}

.modal-box[hidden] {
    display: none !important;
}

.modal-box h3 {
    margin: 0 0 18px;
    font-size: 1.05rem;
}

.modal-box .input-group {
    margin-bottom: 14px;
}

.modal-box .input-group label {
    display: block;
    margin-bottom: 6px;
    font-size: .82rem;
    opacity: .75;
}

.modal-box .input-group input {
    width: 100%;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: inherit;
    padding: 9px 12px;
    border-radius: 10px;
    outline: none;
    font-family: var(--font-family, inherit);
}

.modal-box .input-group input:focus {
    border-color: var(--accent);
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 18px;
}

/* ── Coin selector (kripto widget ayarları) ──────────────────────────── */
.coin-add-btn {
    flex-shrink: 0;
}

.coin-remove-btn:hover {
    opacity: 1 !important;
}

/* Modal arka plan dimmer (modaller açıldığında) */


/* ── Engine/RSS/Bang/Storage list satırları ──────────────────────────── */
.engine-list-item,
.rss-list-item,
.bang-list-item,
.storage-list-item,
.history-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background .15s;
}

.engine-list-item:hover,
.rss-list-item:hover,
.bang-list-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.engine-list-item.active {
    border-color: var(--accent);
}

.engine-info-block {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.engine-info-block img {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    object-fit: contain;
}

.engine-name,
.bang-trigger,
.storage-key {
    font-weight: 600;
    font-size: .88rem;
}

.engine-url,
.bang-url,
.storage-value {
    font-size: .74rem;
    opacity: .6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

/* ── Template grid ───────────────────────────────────────────────────── */
.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.template-card {
    padding: 16px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    transition: background .2s, border-color .2s;
}

.template-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent);
}

/* Widget settings modal body */
.widget-settings-body {
    max-height: 60dvh;
    overflow-y: auto;
    padding-right: 6px;
    margin-bottom: 8px;
}

.bnt-scroll {
    overflow-y: auto;
}

/* ── News item ───────────────────────────────────────────────────────── */
.news-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.16);
    color: inherit;
    text-decoration: none;
    transition: background .2s;
    font-size: .85rem;
    line-height: 1.4;
    font-family: var(--font-family, inherit);
}

.news-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.news-icon {
    flex-shrink: 0;
    font-size: 1rem;
}

.news-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ── Shortcut box — link reset (mavi alt çizgi gider, font düzelir) ─── */
.sc-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(4px, 9cqi, 10px) clamp(3px, 7cqi, 8px);
    gap: clamp(2px, 5cqi, 6px);
    border-radius: clamp(7px, 11cqi, 12px);
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    min-width: 0;
    color: inherit !important;
    text-decoration: none !important;
    font-family: var(--font-family, inherit);
    transition: background .2s, border-color .2s;
    /* Simge ve yazı, PENCEREYE değil kendi kutucuğuna orantılansın diye
       her kutucuk kendi sorgu kapsayıcısıdır. */
    container-type: inline-size;
}

.sc-box:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent);
}

.sc-box span {
    /* Ayarlardan gelen değer TAVAN'dır; kutucuk daralınca yazı da küçülür. */
    font-size: min(var(--sc-font-size, .75rem), 17cqi);
    color: inherit !important;
    text-decoration: none !important;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.sc-box * {
    color: inherit !important;
    text-decoration: none !important;
}

/* "Kısayol Ekle" özel rengi */
.sc-add {
    color: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.sc-add:hover {
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* Widget içeriği köşelerden taşmasın */
.widget {
    contain: paint;
    overflow: hidden;
}

.widget>* {
    min-width: 0;
    max-width: 100%;
    min-height: 0;
}

.widget .wm-body {
    padding: 0 !important;
    overflow: hidden;
    min-height: 0;
    flex: 1;
}

.widget .widget-module {
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Modal arka plan dimmer template SEÇİMİNDE de temizlenir */


/* ═══ BNT Blur Layer — TEK kaynak ═════════════════════════════════════════ */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

body.bnt-blur-active::after {
    opacity: 1;
    visibility: visible;
}

/* Body'nin kendi background'unu blur'lamamak için pseudo'yu kullanıyoruz.
   Settings/modaller z-index 200+ — blur'un üstünde kalır. */


/* ═══ Search Widget v2 ═══════════════════════════════════════════════════ */
#widget-search.search-widget-v2 {
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    overflow: visible !important;
    contain: none !important;
    /* contain:paint kliplemeyi kaldır — dropdown taşsın */
    z-index: 10;
    position: relative;
    /* ZORUNLU: animations.css'teki `.widget.widget-module { transition: outline-color .2s }`
       kuralı (specificity 0-2-0) salt `.search-widget-v2` (0-1-0) kuralını ezip
       transform geçişini ortadan kaldırıyordu — widget "ışınlanıyordu".
       #widget-search ID'siyle specificity 1-1-0'a çıkarıldı; artık morph
       animasyonu smooth çalışır. */
    transition: transform .45s cubic-bezier(.34, 1.56, .64, 1),
        filter .45s cubic-bezier(.34, 1.56, .64, 1),
        outline-color .2s;
}

/* Focus aktifken tüm katmanların üstüne çık */
.search-widget-v2.sv2-focused {
    z-index: 999;
}

/* Focus olduğu anda ekranın TAM ORTASINA morph — bkz. search-focus.js.
   `--sf-dx`/`--sf-dy`, widget'ın grid'deki GERÇEK konumundan merkeze olan
   pikselsel farkı taşır; `.widget`in grid-column/row'u DOKUNULMAZ (görsel
   kayma yalnızca transform ile), bu yüzden focus bitince anında eski yerine
   döner ve grid akışı hiç bozulmaz.
   Ölçek bilerek büyük (1.32) — widget zaten ekran merkezine yakın bir
   varsayılan konumda durduğundan (bkz. widget.json), salt konum kayması
   çoğu düzende göz ile ayırt edilemiyordu; belirgin olan asıl sinyal bu
   büyüme + gölge olsun diye konumdan bağımsız güçlü tutuldu. */
body.search-morphed #widget-search.search-widget-v2 {
    transform: translate(var(--sf-dx, 0px), var(--sf-dy, 0px)) scale(1.32);
    z-index: 999;
    filter: drop-shadow(0 25px 70px rgba(0, 0, 0, .55));
}

body.search-morphed #widget-search.search-widget-v2 .sv2-container {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent),
        0 12px 40px rgba(0, 0, 0, .4);
    border-color: var(--accent);
}

/* Arama çubuğu tamamı sabit px'ti (52px taban + 14px dolgu + 44px simge);
   720p'de widget 45px'e indiğinde 7px taşıyordu. Artık her ölçü widget'ın
   BOYUNA (cqb) bağlı bir tavanla sınırlı — geniş ekranda eski görünüm birebir
   korunur, dar ekranda orantılı küçülür. */
.sv2-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(3px, 1.5cqi, 6px);
    padding-block: clamp(4px, 18cqb, 14px);
    padding-inline: clamp(11px, 4cqi, 22px) clamp(10px, 3.5cqi, 20px);
    border-radius: 999px;
    background: var(--w-bg, rgba(255, 255, 255, .06));
    backdrop-filter: blur(var(--w-blur, 18px));
    -webkit-backdrop-filter: blur(var(--w-blur, 18px));
    border: 1px solid var(--w-border, rgba(255, 255, 255, .1));
    transition: transform .35s cubic-bezier(.2, .8, .2, 1),
        box-shadow .3s, border-color .25s, background .25s;
    height: 100%;
    min-height: min(52px, 100%);
    box-sizing: border-box;
}

.search-widget-v2.sv2-focused .sv2-container {
    transform: scale(1.02);
    border-color: var(--accent);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .4),
        0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

.w-theme-light .sv2-container {
    background: rgba(255, 255, 255, .85);
    border-color: rgba(0, 0, 0, .1);
    color: #1a1a1f;
}

.w-theme-dark .sv2-container {
    background: rgba(0, 0, 0, .6);
}

.w-theme-matte .sv2-container {
    background: rgba(20, 20, 28, .85);
}

.w-theme-transparent .sv2-container {
    background: transparent;
}

.w-theme-neon .sv2-container {
    box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 30%, transparent);
}

.sv2-engine-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(36px, 58cqb);
    height: min(36px, 58cqb);
    border: none;
    background: transparent;
    border-radius: 50%;
    /* Default to pill shape */
    cursor: pointer;
    padding: 4px;
    transition: background .2s;
    flex-shrink: 0;
    opacity: 0.85;
}

.sv2-container.shape-soft .sv2-engine-btn {
    border-radius: 10px;
}

.sv2-container.shape-pill .sv2-engine-btn {
    border-radius: 50%;
}

.sv2-engine-btn:hover,
.sv2-engine-btn.open {
    background: rgba(255, 255, 255, .1);
    opacity: 1;
}

.w-theme-light .sv2-engine-btn:hover {
    background: rgba(0, 0, 0, .06);
}

.sv2-engine-icon {
    width: min(22px, 34cqb);
    height: min(22px, 34cqb);
    border-radius: 5px;
    object-fit: contain;
    pointer-events: none;
}

.sv2-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: inherit;
    /* vw yerine kutunun kendi ölçüsü — çubuk alçaldığında yazı da alçalır */
    font-size: clamp(.8rem, min(3cqi, 30cqb), 1.1rem);
    font-family: var(--font-family, inherit);
    padding: clamp(1px, 4cqb, 4px) 0;
}

.sv2-input::placeholder {
    color: rgba(255, 255, 255, .45);
}

.w-theme-light .sv2-input::placeholder {
    color: rgba(0, 0, 0, .45);
}

.sv2-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(44px, 62cqb);
    height: min(44px, 62cqb);
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    color: inherit;
    opacity: 0.85;
    transition: background .2s, opacity .2s;
    flex-shrink: 0;
}

.sv2-container.shape-soft .sv2-search-icon {
    border-radius: 10px;
}

.sv2-container.shape-pill .sv2-search-icon {
    border-radius: 50%;
}

.sv2-search-icon:hover {
    background: rgba(255, 255, 255, .1);
    opacity: 1;
}

.search-widget-v2.sv2-focused .sv2-search-icon {
    background: var(--accent);
    color: #fff;
    opacity: 1;
}

.w-theme-light .sv2-search-icon:hover {
    background: rgba(0, 0, 0, .06);
}


.sv2-engine-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    min-width: 280px;
    background: rgba(20, 20, 28, .97);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .5);
    z-index: 60;
    color: #f3f3f5;
    animation: sv2-menu-in .2s ease;
}

.sv2-engine-menu[hidden] {
    display: none;
}

@keyframes sv2-menu-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sv2-menu-title {
    padding: 6px 12px;
    font-size: .78rem;
    color: rgba(255, 255, 255, .55);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    margin-bottom: 6px;
}

.sv2-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: inherit;
    font-size: .92rem;
    font-family: var(--font-family, inherit);
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    transition: background .15s;
}

.sv2-menu-item:hover {
    background: rgba(255, 255, 255, .08);
}

.sv2-menu-item.active {
    background: color-mix(in srgb, var(--accent) 25%, transparent);
}

.sv2-menu-item img {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: contain;
}

.sv2-customize {
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    padding-top: 12px;
    border-radius: 0;
    color: rgba(255, 255, 255, .7);
}

.sv2-menu-cog {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: .7;
}

.sv2-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    background: var(--w-bg, rgba(255, 255, 255, .06));
    backdrop-filter: blur(var(--w-blur, 18px));
    -webkit-backdrop-filter: blur(var(--w-blur, 18px));
    border: 1px solid var(--w-border, rgba(255, 255, 255, .1));
    border-radius: 20px;
    overflow: hidden;
    /* 720p'de 280px sabit yükseklik ekranın %39'u — dvh tavanı alçak
       pencerelerde panelin ekranı yutmasını engeller. */
    max-height: min(280px, 38dvh);
    overflow-y: auto;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .5);
    color: inherit;
    z-index: 1;
    padding: 4px;
}

.w-theme-light .sv2-suggestions {
    background: rgba(255, 255, 255, .9);
    border-color: rgba(0, 0, 0, .1);
    color: #1a1a1f;
}

.w-theme-dark .sv2-suggestions {
    background: rgba(0, 0, 0, .75);
}

.w-theme-matte .sv2-suggestions {
    background: rgba(20, 20, 28, .9);
}

.w-theme-transparent .sv2-suggestions {
    background: rgba(20, 20, 28, .6);
}

.w-theme-neon .sv2-suggestions {
    box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 20%, transparent),
        0 16px 48px rgba(0, 0, 0, .5);
}

.sv2-suggestions:empty {
    display: none;
}

.sv2-suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background .15s, border-radius .15s;
    border-radius: 12px;
    margin: 4px;
}

.sv2-suggest-item:hover {
    background: rgba(255, 255, 255, .08);
    border-radius: 12px;
}

.w-theme-light .sv2-suggest-item:hover {
    background: rgba(0, 0, 0, .08);
}

.sv2-suggest-active {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
}

.sv2-suggest-count {
    opacity: .55;
    font-size: .75rem;
}

.sv2-suggest-del {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, .45);
    font-size: .75rem;
    padding: 4px 6px;
    border-radius: 6px;
    line-height: 1;
    flex-shrink: 0;
    transition: color .15s, background .15s;
}

.sv2-suggest-item:hover .sv2-suggest-del {
    display: block;
}

.sv2-suggest-del:hover {
    color: #f87171;
    background: rgba(248, 113, 113, .12);
}