/* ==========================================================================
   Bibliotheca Editorial — uygulama yüzey & tipografi katmanı
   Kaynak tasarım: tasarim/homapage  (kağıt + terrakota + zeytin)

   Bu dosya yalnızca *nitelik* (token) tanımlar; şablonlardaki mevcut
   `app-page` / `app-surface` / `app-input` / `app-primary-button` /
   `app-muted-text` sınıflarını korur. Renk rampaları için bkz. theme.js
   ========================================================================== */

:root {
    color-scheme: light;

    /* kağıt */
    --app-paper: #fbf9f6;
    --app-paper-soft: #f5f3f0;
    --app-surface: #ffffff;

    /* mürekkep */
    --app-ink: #1f1e1d;
    --app-muted: #635d57;
    --app-faint: #6f6a63;

    /* çerçeveler */
    --app-border: #e7e0da;
    --app-border-soft: #efe9e3;

    /* vurgu — LOGONUN TURUNCUSU (static/logo.svg: #C85A32).
       primary-fill butonların zemini, primary-strong hover/koyu ton.
       primary (#C85A32) beyaz yazıyla 4.2:1 verir: 14px etiketler AA'nın
       4.5:1 sınırının hemen altında. primary-strong (#B04E28) 5.3:1 ile
       güvenli taraf; gerekirse primary'yi strong'a çekmek tek satırlık iş. */
    --app-primary: #c85a32;
    --app-primary-strong: #b04e28;
    --app-primary-fill: #c85a32;
    --app-primary-on: #ffffff;
    --app-olive: #5a623e;
    --app-focus: rgb(200 90 50 / .22);

    /* gölge */
    --app-shadow: 0 1px 2px rgb(87 66 59 / .05), 0 16px 40px -24px rgb(87 66 59 / .38);
    --app-shadow-soft: 0 1px 2px rgb(87 66 59 / .05), 0 6px 18px -14px rgb(87 66 59 / .30);

    /* yazı */
    --app-font-display: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
    --app-font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html {
    color-scheme: light;
}

html.dark {
    color-scheme: dark;

    --app-paper: #141312;
    --app-paper-soft: #1c1a19;
    --app-surface: #211f1e;

    --app-ink: #f2f0ed;
    --app-muted: #9a938c;
    --app-faint: #75706a;

    --app-border: #35312e;
    --app-border-soft: #2b2826;

    --app-primary: #ed9977;
    --app-primary-strong: #f5b193;
    --app-primary-fill: #ed9977;
    --app-primary-on: #390c00;
    --app-olive: #a7ad8c;
    --app-focus: rgb(237 153 119 / .30);

    --app-shadow: 0 1px 2px rgb(0 0 0 / .35), 0 18px 44px -26px rgb(0 0 0 / .70);
    --app-shadow-soft: 0 1px 2px rgb(0 0 0 / .30), 0 6px 18px -14px rgb(0 0 0 / .60);
}

/* --------------------------------------------------------------------------
   Sayfa zemini
   -------------------------------------------------------------------------- */
.app-page {
    font-family: var(--app-font-body);
    background-color: var(--app-paper);
    /* landing ile aynı kağıt zemin + çok hafif terrakota/zeytin ışıma */
    background-image:
        radial-gradient(1100px 560px at 10% -10%, rgb(191 84 44 / .07), transparent 62%),
        radial-gradient(900px 520px at 96% 2%, rgb(90 98 62 / .05), transparent 60%);
    color: var(--app-ink);
}

html.dark .app-page {
    background-image:
        radial-gradient(1100px 560px at 10% -10%, rgb(200 90 50 / .14), transparent 62%),
        radial-gradient(900px 520px at 96% 2%, rgb(90 98 62 / .10), transparent 60%);
}

.app-page::selection {
    background: rgb(200 90 50 / .18);
}

/* --------------------------------------------------------------------------
   Tipografi — editoryal başlıklar Playfair Display, gövde Plus Jakarta Sans
   -------------------------------------------------------------------------- */
.app-page :is(h1, h2, h3) {
    font-family: var(--app-font-display);
    font-weight: 600;
    letter-spacing: -0.012em;
}

/* şablonlarda başlıklar `font-black`/`font-bold` ile gelir; editoryal
   ağırlığa (600) sabitle */
.app-page :is(h1, h2, h3):is(.font-black, .font-extrabold, .font-bold, .font-semibold) {
    font-weight: 600;
}

/* Plus Jakarta Sans 800'de biter — 900 sahte kalınlaşma üretiyordu */
.app-page .font-black {
    font-weight: 800;
}

/* büyük sayı/başlık blokları da editoryal display yazıya geçsin */
.app-page :is(.text-2xl, .text-3xl, .text-4xl, .text-5xl).font-black {
    font-family: var(--app-font-display);
    font-weight: 600;
    letter-spacing: -0.015em;
}

/* --------------------------------------------------------------------------
   Yüzeyler
   -------------------------------------------------------------------------- */
.app-surface {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    box-shadow: var(--app-shadow-soft);
}

html.dark .app-surface {
    background: var(--app-surface);
    border-color: var(--app-border);
}

/* --------------------------------------------------------------------------
   Form ögeleri
   -------------------------------------------------------------------------- */
.app-input {
    border: 1px solid var(--app-border);
    background: var(--app-paper-soft);
    color: var(--app-ink);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.app-input:focus {
    border-color: var(--app-primary-strong);
    background: var(--app-surface);
    box-shadow: 0 0 0 3px var(--app-focus);
    outline: none;
}

html.dark .app-input {
    border-color: var(--app-border);
    background: var(--app-paper-soft);
    color: var(--app-ink);
}

html.dark .app-input:focus {
    border-color: var(--app-primary);
    background: var(--app-surface);
}

.app-primary-button {
    background: var(--app-primary-fill);
    color: var(--app-primary-on);
    box-shadow: 0 10px 24px -12px rgb(200 90 50 / .55);
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.app-primary-button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -12px rgb(200 90 50 / .60);
}

.app-muted-text {
    color: var(--app-muted);
}

html.dark .app-muted-text {
    color: var(--app-muted);
}

/* --------------------------------------------------------------------------
   Ortak düzeltmeler
   -------------------------------------------------------------------------- */
.app-page a,
.app-page button,
.app-page input,
.app-page select,
.app-page textarea {
    font-family: inherit;
}

/* odak halkası — varsayılan mavi odaktan terrakotaya */
.app-page :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
}

/* dosya secici: secilen dosya adi seffaf kalmali, dugme okunur olmali.
   :where() sifir ozellik verdigimiz icin sayfadaki Tailwind `file:*`
   siniflari (renk, dolgu, yapisma, tipografi) ustte kalir. */
input[type="file"] {
    color: transparent;
}

:where(input[type="file"])::file-selector-button {
    color: #ffffff;
    background: #c85a32;
    border: 0;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

html.dark :where(input[type="file"])::file-selector-button {
    color: #390c00;
    background: #ed9977;
}

.app-page input::placeholder,
.app-page textarea::placeholder {
    color: var(--app-faint);
}

/* ince kaydırma çubuğu */
.app-page {
    scrollbar-color: rgb(138 114 106 / .45) transparent;
    scrollbar-width: thin;
}

.app-page ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.app-page ::-webkit-scrollbar-thumb {
    background: rgb(138 114 106 / .40);
    border-radius: 9999px;
    border: 3px solid transparent;
    background-clip: content-box;
}

.app-page ::-webkit-scrollbar-thumb:hover {
    background: rgb(138 114 106 / .65);
    background-clip: content-box;
}

html.dark .app-page {
    scrollbar-color: rgb(154 147 140 / .40) transparent;
}

html.dark .app-page ::-webkit-scrollbar-thumb {
    background: rgb(154 147 140 / .35);
    background-clip: content-box;
}

/* ==========================================================================
   Bibliotheca tokenlari — theme.js'teki `rgb(var(--bib-*) / <alpha-value>)`
   renklerinin kaynagi. Yeni sayfalarda (dashboard, hesap & profil) isaretleme
   uzerine `dark:` eklemeden acik/koyu gecisini saglar.

   Degerler tasarim/dasboard + tasarim/hesap ve profil code.html icindeki statik
   hexlerden alinmis, koyu mod karsiliklari DESIGN.md'nin "Dark Mode
   Adaptation" bolumundeki katmanlara gore olculmustur (#181716 zemin,
   #242220 kart, #2E2B28 yukseltilmis, #3B3834 cerceve, #EDE8E1 / #A8A29E metin).
   ========================================================================== */
:root {
    /* Material yuzeyler */
    --bib-surface: 251 249 246;
    --bib-surface-dim: 219 218 215;
    --bib-surface-bright: 251 249 246;
    --bib-surface-clowest: 255 255 255;
    --bib-surface-clow: 245 243 240;
    --bib-surface-c: 239 238 235;
    --bib-surface-chigh: 234 232 229;
    --bib-surface-chighest: 228 226 223;
    --bib-surface-variant: 228 226 223;
    --bib-background: 251 249 246;
    --bib-on-surface: 27 28 26;
    --bib-on-surface-variant: 87 66 59;
    --bib-on-background: 27 28 26;
    --bib-inverse-surface: 48 49 47;
    --bib-inverse-on-surface: 242 240 237;
    --bib-outline: 138 114 106;
    --bib-outline-variant: 222 192 183;
    --bib-surface-tint: 162 62 24;

    /* roller — primary = logonun turuncusu (static/logo.svg #C85A32).
       primary-container hem hover/aktif durum hem de "kutu" tonu: primary'den
       KOYU (176 78 40) tutuldu ki butonlarda hover görünür olsun ve beyaz
       yazı 5.3:1 ile AA'yı geçsin. */
    --bib-primary: 200 90 50;
    --bib-on-primary: 255 255 255;
    --bib-primary-container: 176 78 40;
    --bib-on-primary-container: 255 251 255;
    --bib-inverse-primary: 246 173 143;
    --bib-secondary: 90 98 62;
    --bib-on-secondary: 255 255 255;
    --bib-secondary-container: 222 231 185;
    --bib-on-secondary-container: 96 104 67;
    --bib-tertiary: 141 75 0;
    --bib-on-tertiary: 255 255 255;
    --bib-tertiary-container: 177 95 0;
    --bib-on-tertiary-container: 255 251 255;
    --bib-error: 186 26 26;
    --bib-on-error: 255 255 255;
    --bib-error-container: 255 218 214;
    --bib-on-error-container: 147 0 10;

    /* kagit yuzeyler */
    --bib-paper-base: 250 248 245;
    --bib-paper-muted: 244 239 234;
    --bib-paper-surface: 255 255 255;
    --bib-paper-white: 255 253 249;
    --bib-paper-cream: 247 242 235;
    --bib-paper-sand: 239 232 221;
    --bib-paper-inset: 250 247 242;
    --bib-paper-chip: 245 242 237;
    --bib-paper-line: 232 228 223;
    --bib-paper-line-soft: 240 235 228;
    --bib-paper-line-mid: 236 230 221;
    --bib-paper-line-strong: 220 214 204;
    --bib-paper-line-field: 226 221 213;
    --bib-paper-track: 234 229 222;
    --bib-paper-track-strong: 232 226 216;

    /* murekkep */
    --bib-ink-primary: 31 30 29;
    --bib-ink-secondary: 87 83 78;
    /* 8C857B kucuk metinde 3.3:1 kaliyordu — landing ile ayni koyulasma */
    --bib-ink-tertiary: 111 106 99;
    --bib-ink-body: 51 48 44;

    /* vurgu */
    --bib-terracotta: 217 101 59;
    --bib-olive: 126 133 99;
    --bib-amber: 217 119 6;
}

html.dark {
    --bib-surface: 24 23 22;
    --bib-surface-dim: 16 15 15;
    --bib-surface-bright: 24 23 22;
    --bib-surface-clowest: 36 34 32;
    --bib-surface-clow: 31 29 28;
    --bib-surface-c: 36 34 32;
    --bib-surface-chigh: 46 43 40;
    --bib-surface-chighest: 52 49 47;
    --bib-surface-variant: 52 49 47;
    --bib-background: 24 23 22;
    --bib-on-surface: 237 232 225;
    --bib-on-surface-variant: 168 162 158;
    --bib-on-background: 237 232 225;
    --bib-inverse-surface: 237 232 225;
    --bib-inverse-on-surface: 36 34 32;
    --bib-outline: 154 145 138;
    --bib-outline-variant: 59 56 52;
    --bib-surface-tint: 200 90 50;

    /* roller — koyu tema: buton zemini logonun turunculusunun AÇIK tonu
       (#ED9977), yazı koyu mürekkep (7.6:1). Koyu yüzeyde orta turuncu
       koyu yazıyla 3.9:1'e düşüp erişilebilirliği bozduğu için orta ton
       seçilmedi. primary-container koyu turuncu hover/kutu tonu. */
    --bib-primary: 237 153 119;
    --bib-on-primary: 57 12 0;
    --bib-primary-container: 148 62 26;
    --bib-on-primary-container: 255 219 207;
    --bib-inverse-primary: 200 90 50;
    --bib-secondary: 194 203 159;
    --bib-on-secondary: 24 30 3;
    --bib-secondary-container: 67 74 40;
    --bib-on-secondary-container: 222 231 185;
    --bib-tertiary: 255 183 125;
    --bib-on-tertiary: 47 21 0;
    --bib-tertiary-container: 110 57 0;
    --bib-on-tertiary-container: 255 220 195;
    --bib-error: 255 180 171;
    --bib-on-error: 105 0 5;
    --bib-error-container: 147 0 10;
    --bib-on-error-container: 255 218 214;

    --bib-paper-base: 24 23 22;
    --bib-paper-muted: 32 30 29;
    --bib-paper-surface: 36 34 32;
    --bib-paper-white: 38 35 31;
    --bib-paper-cream: 32 30 29;
    --bib-paper-sand: 27 26 24;
    --bib-paper-inset: 31 29 28;
    --bib-paper-chip: 36 34 32;
    --bib-paper-line: 51 48 45;
    --bib-paper-line-soft: 43 40 38;
    --bib-paper-line-mid: 47 44 41;
    --bib-paper-line-strong: 59 56 52;
    --bib-paper-line-field: 59 56 52;
    --bib-paper-track: 51 48 45;
    --bib-paper-track-strong: 51 48 45;

    --bib-ink-primary: 237 232 225;
    --bib-ink-secondary: 168 162 158;
    --bib-ink-tertiary: 154 147 140;
    --bib-ink-body: 226 221 214;

    --bib-terracotta: 239 138 99;
    --bib-olive: 167 173 140;
    --bib-amber: 245 165 36;
}

/* ==========================================================================
   Bibliotheca — durum stilleri (aria-pressed)
   Akis filtre pilleri ve "Gorunum Temasi" secimi JS ile aria-pressed ayarlar.
   ========================================================================== */
/* Akis sekmeleri: X usulu altı çizili sekme gostergesi */
/* Tasarim: aktif sekme hem terracotta metin hem alt cizgi tasiyor.
   Onceki surumde metin ink-primary idi; bu haliyle tasarimla ayni. */
[data-feed-filter][aria-pressed="true"] {
    background-color: transparent;
    border-color: transparent;
    color: rgb(var(--bib-primary));
    font-weight: 700;
    box-shadow: none;
}

[data-feed-filter][aria-pressed="true"]::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0;
    height: 2px;
    border-radius: 9999px;
    background-color: rgb(var(--bib-primary));
}

[data-feed-filter]:not([aria-pressed="true"]) {
    background-color: transparent;
    color: rgb(var(--bib-ink-secondary));
}

/* Pasif sekmede tasarim yalnizca metin rengini degistiriyor; zemin
   dolgusu eklenmiyor (cip hissi kurmamak icin). */
[data-feed-filter]:not([aria-pressed="true"]):hover {
    background-color: transparent;
    color: rgb(var(--bib-ink-primary));
}

[data-theme-choice][aria-pressed="true"] {
    background-color: rgb(var(--bib-primary-container));
    border-color: rgb(var(--bib-primary));
}

[data-theme-choice][aria-pressed="true"] span {
    color: rgb(var(--bib-on-primary-container));
}

/* Dekoratif birakim isareti: DOM metni degil CSS icerigi olsun ki
   ekran okuyucu/olcum araclari bunu metin olarak saymasin. */
.bib-deco-glyph::before {
    content: "\201D";
}

/* ---- Kitap Ekle / tarihce / lightbox modallari (tum sayfalarda ayni) ---- */
        .modal {
            display: none;
            position: fixed;
            z-index: 50;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            /* ornekteki gibi: ink-primary/55 + kuvvetli blur */
            background: rgba(31, 30, 29, 0.55);
            backdrop-filter: blur(6px);
            align-items: center;
            justify-content: center;
            overflow-y: auto;
            padding: 12px;
            box-sizing: border-box;
        }

        @media (min-width: 640px) {
            .modal {
                padding: 24px;
            }
        }

        .lightbox-modal {
            display: none;
            position: fixed;
            z-index: 100;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(6px);
            align-items: center;
            justify-content: center;
            padding: 16px;
            box-sizing: border-box;
        }


/* ---- Akis filtre seridi ----
   Dort tur + "Tumu" sekmesi dar ekrana sigmaz; serit yatay kaydirilir.
   Kaydirma cubugu gorunur olursa 10px dikey yer kaplar ve asagidaki
   akis karti bir kayar. Dokunma/mouse ile kaydirma aynen calisir. */
.feed-filter-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.feed-filter-scroll::-webkit-scrollbar {
    display: none;
    height: 0;
}


/* ---- Akis paylasim formu: dar <-> genis gecis ----
   Sayfa acildiginda kart tek satirlik bir alana daralir; alana tiklaninca
   eski tam form acilir. Bloklar display:none yerine opacity/translate ile
   belirir; kartin kendi yuksekligi ise JS ile olculur (auto height
   animasyonu yapilamaz) ve yumuşak bir egriyle buyurup ksalir. */
@keyframes compose-reveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.compose-reveal {
    animation: compose-reveal .28s cubic-bezier(.22, .61, .36, 1) both;
}

.compose-animating {
    transition: height .34s cubic-bezier(.22, .61, .36, 1);
}

/* Metin alani odaklandiginda yukaridaki genel ":focus-visible" kurali (globai
   odak halkasi) etrafina cerceve cizer. Metin alanlarinda odak her zaman
   gorunur kabul edildigi icin bu cerceve her tiklamada belirip karti bozuyor;
   genisleyen kart + imlec yeterli geri bildirim veriyor. */
#composeContent:focus,
#composeContent:focus-visible {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .compose-reveal,
    .compose-animating {
        animation: none;
        transition: none;
    }
}

/* ---- Sayfalar arasi gecis (Akis/Kutuphane/Listeler <-> Kesfet/Ayarlar) ----
   Yeni sayfa hazir olana kadar eski sayfa ekranda doner; bosluk, beyazlama
   ve "dalgalanma" olmaz, gecis tek bir akici adimda gerceklesir.
   Desteklemeyen tarayicilar normal yuklemeye dusar (progressive). */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation-duration: 160ms;
}

::view-transition-new(root) {
    animation-duration: 160ms;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

/* --- DOKUNMA HEDEFI BUYUTLERI --------------------------------------------
   WCAG 2.5.5 (Target Size, AAA) dokunmatik hedefler icin 44x44 CSS px onerir.
   Uygulamada ikon dugmelerinin cogu 32-36 px idi; mobilde olcumde akis
   sayfasinda 73 hedefin 32 px'ten kucuk oldugu goruldu.

   Kural yalnizca `pointer: coarse` (gercek dokunmatik) cihazlarda gecerli;
   fare ile gezilen masaustunde butonlarin olculerine dokunulmaz.
   `:where()` sifir ozgulluk verir: Tailwind'in `h-8`, `w-8` gibi yardimci
   siniflari yine kazanabilir, yani bilerek kucultulmus bir oge kucuk kalir.
   Metin akisi icindeki baglantilar (p, li, dd icindeki <a>) haric tutulur;
   onlarin yuksekligi artirilirsa metin araligi bozulur. */
@media (pointer: coarse) {
    :where(button, [role="button"], summary, label:has(> input[type="checkbox"])) {
        min-height: 44px;
    }

    /* Yalnizca ikon tasiyan, metni olmayan butonlar: en az 44x44 kare.
       Sayfalama rakam dugmeleri haric: dokuz adet 44px'lik dugme 390px'lik
       ekrana sigmaz ve sayfalama cubugu yatay tasma yaratiyordu. Onlar icin
       40px yeterli. */
    :where(button, [role="button"]):not(:has(span:not(.material-symbols-outlined))):not([data-book-page]):not([data-wish-page]) {
        min-width: 44px;
    }

    :where(button[data-book-page], button[data-wish-page]) {
        min-width: 40px;
    }

    /* Metin akisi icindeki baglantilar haric: bunlar paragraf seklinde
       akmali, kutu haline gelmemeli. */
    :where(p, li, dd, blockquote, figcaption) :where(a):not([class*="rounded"]) {
        min-height: 0;
        min-width: 0;
    }
}

/* =====================================================================
   İstek listesi — "Yeni İstek Ekle" dar <-> geniş formu
   =====================================================================
   Akıştaki paylaşım kartıyla aynı davranış: dinlenmede tek satırlık bar,
   dokununca tam form. Görünümün tamamı burada; JS yalnızca
   #wishlistCard[data-state] değerini değiştirir, odak yönetir ve geçişin
   yüksekliğini ölçer (auto yükseklik CSS ile geçirilemez).

   Aynı #wishlist_title girdisi iki durumda da kullanılır (kopya yok), bu
   yüzden dar hâlde alanın kendisi bir "bar" gibi görünür: çerçeve ve dolgu
   kalkar, içerik kartın yüzeyinde olduğu gibi okunur. */
/* Akıştaki paylaşım kartı gibi düz şerit: sayfa kenarına yaslı, kart
   dolgusu yok; iç boşluk px-5 py-4 ile aynı. */
#wishlistCard,
#wishlistCard[data-state='expanded'] {
    padding: 1rem 1.25rem;
}

#wishlistCard[data-state='collapsed'] #wishlistHead,
#wishlistCard[data-state='collapsed'] #wishlistTitleLabel,
#wishlistCard[data-state='collapsed'] #wishlistExtra,
#wishlistCard[data-state='expanded'] #wishlistQuickSubmit {
    display: none;
}

/* Dar hâlde "bar" görünümü: akıştaki paylaşım çubuğuyla aynı zemin
   (paper-inset) ve alan kenarı (paper-line-field).

   DİKKAT: dolgu (padding) hover/focus'ta DEĞİŞMEZ. Önce padding 0' idi ve
   üzerine gelince 0.75rem'e çıkıyordu; metin 12px sağa zıplıyor, kutu
   "titriyor" gibi görünüyordu. Padding baştan sabit, yalnızca zemin ve
   kenarlık değişiyor: geçiş de yok, kayma da yok. */
#wishlistCard[data-state='collapsed'] #wishlist_title {
    background: rgb(var(--bib-paper-inset));
    border-color: rgb(var(--bib-paper-line-field));
    font-size: 1rem;
    line-height: 1.5rem;
    /* Avatar ve ekleme düğmesi 44px (h-11). Alan da tam 44px olsun ki üçü
       tek satırda birebir hizalansın; yoksa alan 42px kalıp 2px kayıyor. */
    height: 2.75rem;
}

#wishlistCard[data-state='collapsed']:hover #wishlist_title {
    background: rgb(var(--bib-paper-inset));
}

#wishlistCard[data-state='collapsed'] #wishlist_title:focus {
    background: rgb(var(--bib-paper-surface));
    border-color: rgb(var(--bib-primary));
    outline: none;
    box-shadow: 0 0 0 2px rgb(var(--bib-primary) / .2);
}

/* Öneri listesi alanın hemen altında açılır (`top-full`) ve `left-0 right-0`
   ile alanla aynı genişlikte olur; ayrı hizalama gerekmiyor. */

/* ---- Dar <-> geniş GEÇİŞ (yumuşak, akıştaki paylaşım kartıyla aynı) ----
   Önce bu geçiş yoktu: alana tıklanınca kart bir anda büyüyor, dışarı
   tıklanınca bir anda küçülüyordu. Akıştaki paylaşım kartı yumuşak geçişe
   sahip; aynı düzende duran bu bar da öyle olmalı.

   Süre ve eğri (.34s / .28s, cubic-bezier(.22,.61,.36,1)) bilerek
   paylaşım kartıyla AYNI tutuldu: iki kart yan yana durduğunda biri diğerinden
   farklı hızda hissettirmemek için. Kartın yüksekliği `auto` olduğu için
   geçişin kendisi JS'te ölçülür (bkz. wishlistWithHeight). */
@keyframes wishlist-reveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.wishlist-reveal {
    animation: wishlist-reveal .28s cubic-bezier(.22, .61, .36, 1) both;
}

/* Yalnızca geçiş anında takılır; JS bitince sınıfı kaldırır. */
.wishlist-animating {
    transition: height .34s cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .wishlist-reveal,
    .wishlist-animating {
        animation: none;
        transition: none;
    }
}

/* Öncelik rozetleri: üç ad da her zaman görünür. Öncelik bir "mod" değil,
   anlamsal bir tercih — kullanıcı seçeneklerin ne anlama geldiğini görmeli
   (akıştaki tür seçimi ikon-only idi, burada öyle olmamalı). */

/* Erişilebilirlik: klavye ile odaklanıldığında halka görünür kalmalı. */
#wishPriorityGroup input:focus-visible + label {
    outline: 2px solid rgb(var(--bib-primary) / .6);
    outline-offset: 2px;
}