/* ============================================================
   SANAL KÜTÜPHANE — okuma odası tasarım dili (tek kaynak)

   NEDEN VAR: landing ile /sanal-kutuphane aynı vitrini İKİ AYRI CSS ile
   çiziyordu (.library-* ve .vl-*). İki yüzey birbirinden kaydı, ikisi de
   jenerik SaaS diliyle (mor gradyan + beyaz kart + Inter 800) çizildiği
   için ortadaki piksel sahne yamalı duruyordu. Artık tek dosya, tek
   bileşen, tek palet.

   PALET UYDURULMADI: değerler static/library/salon-istanbul.png'den
   örneklendi — sahnede fiilen en çok geçen ve en doygun renkler.
   Markanın gece hâli: mor koyulaşıp patlıcana, turuncu solup pirince
   döner. Sayfa böylece içindeki görselle aynı dünyada durur.

   TİPOGRAFİ: başlıklarda Fraunces (kitap serifi), gövdede Inter.
   Kütüphanenin sesi kitap sesidir; her şeyin Inter 800 olması
   "biçimlendirilmemiş HTML" hissinin ana sebebiydi. WONK/SOFT eksenleri
   0'da: karakterli ama ciddi, süslü değil.
   ============================================================ */

:root {
    --lib-night:    #1C1128;   /* salonun gece zemini */
    --lib-night-2:  #0B0618;   /* en koyu köşeler */
    --lib-night-3:  #251731;   /* bir ton açık — kart zemini */
    --lib-oak:      #7A4F2D;   /* meşe masa */
    --lib-oak-dk:   #33200F;   /* raf gölgesi */
    --lib-brass:    #E4B676;   /* masa lambası pirinci — vurgu rengi */
    --lib-brass-dk: #B88F60;
    --lib-paper:    #F1E1C7;   /* sahnedeki kâğıt/sayfa rengi */
    --lib-wine:     #850816;   /* bayrak kırmızısı — yalnız uyarıda */

    /* Açık zeminli bölümler: kâğıdın gün ışığındaki hâli.
       --lib-day, landing'deki --pd-surface-light ile BİREBİR aynı olmak
       zorunda: iki kütüphane bölümü komşu açık bölümlerin yanına düşüyor
       ve bir tık farklı krem "renkler uymamış" hissinin kaynağıydı. */
    --lib-day:      #FBF7F0;
    --lib-day-2:    #F3EBDF;
    --lib-ink:      #241B2E;
    --lib-ink-soft: #5C5266;

    --lib-serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --lib-rule:  rgba(228, 182, 118, 0.28);   /* pirinç saç teli çizgi */
    --lib-rule-day: rgba(36, 27, 46, 0.14);
}

/* ============================================================
   1) TİPOGRAFİK İLKELER
   ============================================================ */

.lib-display {
    font-family: var(--lib-serif);
    font-variation-settings: 'SOFT' 0, 'WONK' 0;
    font-weight: 600;
    /* Serifte büyük punto negatif tracking ister; Inter'de olmayan bu
       ayar, başlıkların "oturaklı" durmasının yarısı. */
    letter-spacing: -0.015em;
    line-height: 1.1;
    text-wrap: balance;          /* satır sonları dengelensin */
    margin: 0;
}

/* Üst etiket: harfler seyrek, punto küçük — levha yazısı gibi */
.lib-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lib-brass);
    margin: 0 0 14px;
}

.lib-eyebrow--day { color: #9A6B34; }

/* Gövde metni: ÖLÇÜ SINIRI. Eski sayfada satırlar 100+ karaktere
   uzuyordu; rahat okuma 60-72 karakterdir. */
.lib-lead {
    font-size: 1.06rem;
    line-height: 1.66;
    max-width: 60ch;
    margin: 0;
    text-wrap: pretty;   /* son satırda tek kelime kalmasın */
}

.lib-body { font-size: 0.97rem; line-height: 1.68; max-width: 62ch; margin: 0; }

/* ============================================================
   2) VİTRİN — üç salon + canlı nabız + kronometre
   Landing ve /sanal-kutuphane AYNI bileşeni kullanır.
   ============================================================ */

.lib-vitrin {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
}

/* Nabız: sahnenin ÜSTÜNDE durur. İçerideyken ekran görüntüsünün kendi
   sayacıyla yan yana düşüp iki farklı sayı gösteriyordu. */
.lib-pulse {
    display: flex;
    width: fit-content;
    margin: 0 auto 14px;
    align-items: center;
    gap: 9px;
    padding: 7px 16px 7px 13px;
    border-radius: 999px;
    background: rgba(122, 200, 158, 0.10);
    border: 1px solid rgba(122, 200, 158, 0.34);
    color: #8FD9B2;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.lib-pulse__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6FCF97;
    box-shadow: 0 0 0 0 rgba(111, 207, 151, 0.7);
    animation: lib-pulse 2.4s ease-out infinite;
}

@keyframes lib-pulse {
    70%  { box-shadow: 0 0 0 9px rgba(111, 207, 151, 0); }
    100% { box-shadow: 0 0 0 0 rgba(111, 207, 151, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .lib-pulse__dot { animation: none; }
}

/* Çerçeve: piksel sahne bir PENCERE gibi dursun — pirinç saç teli kenar,
   derin gölge, keskin olmayan köşe. Yuvarlaklık düşük tutuldu; 18px'te
   piksel ızgara kırpılıp bulanık görünüyordu. */
.lib-frame {
    position: relative;
    aspect-ratio: 2268 / 1278;
    border-radius: 10px;
    overflow: hidden;
    background: var(--lib-night-2);
    box-shadow:
        0 0 0 1px rgba(228, 182, 118, 0.22),
        0 30px 60px -20px rgba(0, 0, 0, 0.7);
}

.lib-frame img[data-shot] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 900ms ease;
}

.lib-frame img[data-shot].is-on { opacity: 1; }

/* Müze künyesi: çerçevenin altında, salon adı + künye.
   Sekme değişince JS burayı da günceller — kare ile yazı hiç ayrışmaz. */
.lib-plate {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--lib-rule);
}

.lib-plate__name {
    font-family: var(--lib-serif);
    font-variation-settings: 'SOFT' 0, 'WONK' 0;
    font-weight: 600;
    font-size: 1.06rem;
    letter-spacing: 0.01em;
    color: var(--lib-paper);
}

.lib-plate__meta {
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(241, 225, 199, 0.5);
    white-space: nowrap;
}

/* Sekmeler: hap değil, altı çizili başlık. Hap butonlar sahneden daha
   ağır duruyordu ve "form kontrolü" gibi okunuyordu. */
.lib-tabs {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.lib-tabs button {
    position: relative;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(241, 225, 199, 0.55);
    padding: 10px 14px;
    cursor: pointer;
    transition: color 200ms ease;
}

.lib-tabs button::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2px;
    background: var(--lib-brass);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lib-tabs button:hover { color: var(--lib-paper); }
.lib-tabs button.is-on { color: var(--lib-paper); }
.lib-tabs button.is-on::after { transform: scaleX(1); }

/* Kronometre: çerçeveden taşar — "otururken sayaç işliyor".
   İçeride dururken Neti'nin bankosunu kapatıyordu. */
/* DİKKAT — `bottom` künyeyi ve sekmeleri TEMİZLEMEK zorunda. Kart
   .lib-vitrin'e göre konumlanıyor, .lib-frame'e göre değil (çerçevede
   overflow:hidden var). 78px denendi: kartın alt kenarı künyenin
   "24 KOLTUK · İSTANBUL" satırının üstüne düştü. */
.lib-timer {
    position: absolute;
    right: -54px;
    bottom: 112px;
    z-index: 3;
    width: 210px;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow:
        0 0 0 1px rgba(228, 182, 118, 0.3),
        0 18px 36px -10px rgba(0, 0, 0, 0.6);
}

.lib-timer img { display: block; width: 100%; height: auto; }

.lib-timer figcaption {
    padding: 8px 11px 10px;
    font-size: 0.68rem;
    line-height: 1.4;
    color: #6B6474;
    text-align: center;
    background: #fff;
    border-top: 1px solid rgba(36, 27, 46, 0.08);
}

.lib-vitrin__note {
    margin: 12px 0 0;
    font-size: 0.8rem;
    color: rgba(241, 225, 199, 0.45);
}

/* Sahne kartı: AÇIK zeminli bölümlerde vitrini taşıyan koyu panel.
   Vitrinin künye/sekme yazıları kâğıt rengidir; açık zemine doğrudan
   konsaydı okunmazdı. Kart aynı zamanda "odaya açılan pencere" hissini
   kuruyor — landing'de bölümün ağırlığını zemin değil bu nesne taşır. */
.lib-stagecard {
    position: relative;
    max-width: 916px;
    margin: 0 auto;
    padding: 18px 18px 10px;
    border-radius: 16px;
    background: var(--lib-night);
    box-shadow:
        0 0 0 1px rgba(28, 17, 40, 0.08),
        0 34px 64px -30px rgba(28, 17, 40, 0.55);
}

.lib-stagecard .lib-vitrin { max-width: none; }

@media (max-width: 760px) {
    .lib-stagecard { padding: 12px 12px 6px; border-radius: 12px; }
}

/* ============================================================
   3) KURAL LEVHASI — üç kural, kutu yok
   Beyaz kutular "html gibi duruyor" hissinin en net kaynağıydı.
   Numara serifte ve pirinç; ayırıcı saç teli çizgi.
   ============================================================ */

.lib-rules {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lib-rules > li {
    padding: 22px 26px;
    border-left: 1px solid var(--lib-rule);
}

.lib-rules > li:first-child { border-left: 0; padding-left: 0; }

.lib-rules__no {
    display: block;
    font-family: var(--lib-serif);
    font-variation-settings: 'SOFT' 0, 'WONK' 0;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--lib-brass);
    margin-bottom: 12px;
}

.lib-rules__t {
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--lib-paper);
    margin-bottom: 7px;
}

.lib-rules__d {
    display: block;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(241, 225, 199, 0.62);
}

/* Açık zeminli sürüm */
.lib-rules--day > li { border-color: var(--lib-rule-day); }
.lib-rules--day .lib-rules__no { color: #B07B32; }
.lib-rules--day .lib-rules__t { color: var(--lib-ink); }
.lib-rules--day .lib-rules__d { color: var(--lib-ink-soft); }

@media (max-width: 760px) {
    .lib-rules { grid-template-columns: 1fr; }
    .lib-rules > li {
        border-left: 0;
        border-top: 1px solid var(--lib-rule);
        padding: 16px 0;
    }
    .lib-rules > li:first-child { border-top: 0; padding-top: 0; }
    .lib-rules--day > li { border-top-color: var(--lib-rule-day); }
    /* Yatayda dar: numara ve başlık aynı satıra gelsin, yer yemesin */
    .lib-rules__no {
        display: inline-block;
        font-size: 1.1rem;
        margin: 0 10px 0 0;
        vertical-align: baseline;
    }
    .lib-rules__t { display: inline; }
    .lib-rules__d { margin-top: 6px; }
}

/* ============================================================
   4) TELEFON — vitrin
   ============================================================ */

@media (max-width: 1140px) {
    .lib-timer { right: 12px; bottom: 116px; width: 178px; }
}

@media (max-width: 760px) {
    .lib-frame { border-radius: 8px; }
    /* Telefonda kart sahnenin içinde okunmuyor: altına iner */
    .lib-timer {
        position: static;
        width: 172px;
        margin: 14px auto 0;
        box-shadow: 0 0 0 1px rgba(228, 182, 118, 0.3), 0 10px 22px rgba(0, 0, 0, 0.3);
    }
    .lib-pulse { font-size: 0.78rem; padding: 6px 13px; }
    .lib-plate { flex-direction: column; gap: 4px; align-items: flex-start; }
    .lib-tabs button { padding: 9px 10px; font-size: 0.8rem; }
    .lib-tabs button::after { left: 10px; right: 10px; }
}