/*
  A.T.G. PORTFOLYO - css/archive.css
  Açık kaynak arşivi (Tüm Projeler): yatay 3B raf, kitap sırtları, kapak önizleme.
  Kullanan sayfalar: pages/tum-projeler.html
  Bu dosyadaki bölümler: 5 (ortak buton: base.css §5b; ortak önizleme kutusu: base.css §15c)
  Sıra (HTML <link> sırası bozulmamalı): base → [sayfa dosyası] → utilities → print
  Bölüm numaraları eski tek-dosya düzeninden (style.css) korunmuştur; tam harita için css/base.css başına bakın.
*/

/* ==========================================================================
   5. AÇIK KAYNAK ARŞİVİ (TÜM PROJELER SAYFASI: YATAY 3B RAF)
   ========================================================================== */
.archive-hero { text-align: center; margin: 60px 0 40px 0; }
.archive-hero h1 { 
    font-size: 36px; 
    margin-bottom: 10px; 
    letter-spacing: 1px; 
    color: var(--text-color);
}
.archive-hero h2 { font-size: 16px; color: var(--accent-color); font-family: monospace; letter-spacing: 1px; margin-bottom: 20px;}
.archive-hero p { font-size: 16px; opacity: 0.8; max-width: 700px; margin: 0 auto; line-height: 1.6; }

/* --- 3B ARŞİV RAFI ---
   Her proje bir "kitap"tır. Üç katman vardır:
     .archive-card  = raf gözü (bağlantının kendisi; yerinde durur, tıklanan alan)
     .archive-spine = rafta görünen kitap sırtı (yalnızca yatay raf düzeninde)
     .archive-book  = raftan çıkan kitap kapağı (başlık, açıklama ve saydam sayfa önizlemesi)
   İKİ DÜZEN VAR (js/script.js §13 aynı koşulla seçer; ikisi de aşağıdaki medya sorgusunu kullanır):
     YATAY RAF (geniş ekran + fare): tek raf tahtası, 7 kitap sırtı "/ / /" gibi yan yana yaslanmıştır. Fare raf boyunca
       gezdikçe imlecin altındaki kitap raftan çıkıp aşağı iner ve kapağını gösterir; komşular yarım adım öne gelip boşluğa doğru yatar.
     DİKEY RAF (telefon, tablet, dar pencere): kapaklar alt alta dizilir; kaydırdıkça ekranın ortasına gelen kitap öne çıkar.
   js/script.js her kitaba --lift (0 = rafta, 1 = tamamen önde) ve --side yazar; kitabın kendisine .is-active ekler. */
.archive-shelf {
    position: relative;
    width: min(1040px, calc(100% - 24px)); margin: 0 auto 80px auto;
}
.archive-grid {
    counter-reset: shelf;
    position: relative;
    display: flex; flex-direction: column;
    padding: 6px 12px 0;
    border: 1px solid var(--border-color); border-radius: 12px;
    background: var(--card-bg);
    box-shadow: inset 0 0 60px var(--shelf-recess), var(--box-shadow);
    overflow-x: clip;   /* öne çıkan kitabın perspektifle taşan ucu sayfada yatay kaydırma çubuğu oluşturmasın */
}
.archive-card {
    --i: 3; --lift: 0; --side: 0;
    counter-increment: shelf;
    position: relative; display: block;
    text-decoration: none; color: inherit;
    -webkit-tap-highlight-color: transparent;
}
.archive-card:nth-child(1) { --i: 1; }
.archive-card:nth-child(2) { --i: 2; }
.archive-card:nth-child(3) { --i: 3; }
.archive-card:nth-child(4) { --i: 4; }
.archive-card:nth-child(5) { --i: 5; }
.archive-card:nth-child(6) { --i: 6; }
.archive-card:nth-child(7) { --i: 7; }
.archive-card:nth-child(8) { --i: 8; }
.archive-card:nth-child(9) { --i: 9; }
.archive-card:nth-child(10) { --i: 10; }
.archive-card:nth-child(11) { --i: 11; }
.archive-card:nth-child(12) { --i: 12; }
.archive-card:focus-visible { outline: 2px solid var(--accent-color); outline-offset: -3px; }
.archive-spine, .archive-hint { display: none; }

/* Kitap kapağı (iki düzende de aynı görünüm: sağda saydam önizleme, solda sırt etiketi, başlık ve açıklama) */
.archive-book {
    --ry: -16deg; --tz: -10px; --mx: 0deg; --my: 0deg;
    --persp: 1500px; --pull: 110px; --stair: 9px;
    position: relative; z-index: 1;
    display: flex; flex-direction: column; justify-content: center;
    background: var(--card-bg);   /* yedek: color-mix bilmeyen tarayıcılar (Safari < 16.2) */
    /* Sağ tarafta (önizlemenin geleceği yerde) çok soluk bir devre/blueprint ızgarası */
    background:
        repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent-color) 6%, transparent) 0 1px, transparent 1px 14px) right / 36% 100% no-repeat,
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent-color) 6%, transparent) 0 1px, transparent 1px 14px) right / 36% 100% no-repeat,
        var(--card-bg);
    border: 1px solid var(--border-color); border-radius: 6px 14px 14px 6px;
    box-shadow: var(--card-shadow-3d);
    transform-style: preserve-3d; transform-origin: 0 50%;
    will-change: transform;
}
/* Kapağın kalınlığı: arkasındaki koyu plaka (çapraz dururken kenarında görünür) */
.archive-book::after {
    content: ''; position: absolute; inset: -1px; border-radius: inherit;
    background: var(--border-color);
    transform: translateZ(-14px); pointer-events: none;
    transition: background 0.3s ease, opacity 0.3s ease;
}
/* Kapağın sol şeridi: arşiv numarası (ATG-01 ... ATG-07), dikey yazılı */
.archive-book::before {
    content: 'ATG-' counter(shelf, decimal-leading-zero);   /* yedek: alt metin söz dizimini bilmeyen tarayıcılar (Safari/iOS < 17.4) */
    content: 'ATG-' counter(shelf, decimal-leading-zero) / '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 52px;
    display: flex; align-items: center; justify-content: center;
    writing-mode: vertical-rl; transform: rotate(180deg) translateZ(2px);
    font-family: monospace; font-size: 13px; font-weight: 700; letter-spacing: 3px;
    color: var(--accent-color);
    background: var(--shelf-recess);
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent-color) 16%, transparent), color-mix(in srgb, var(--accent-color) 4%, transparent));
    border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color);
    border-radius: 0 6px 6px 0;
    padding-bottom: 30px;   /* şerit 180° döndüğü için bu boşluk görsel olarak üsttedir: yazı ikonun altında kalır */
    transition: background 0.3s ease, color 0.3s ease;
}
/* Açık temada numara etiketleri (ATG-01 ...) daha doygun: zemin beyaza yakın olduğu için koyu temadaki kadar
   belirgin durması adına yeşil dolgu güçlendirilir, yazı ve kenar çizgileri koyu yeşile çekilir */
body.light-mode .archive-book::before {
    color: color-mix(in srgb, var(--accent-color) 68%, #000);
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent-color) 42%, transparent), color-mix(in srgb, var(--accent-color) 22%, transparent));
    border-left-color: color-mix(in srgb, var(--accent-color) 65%, transparent);
    border-right-color: color-mix(in srgb, var(--accent-color) 65%, transparent);
}
/* Öndeki kitap: yeşil kenar ve parıltı */
.archive-card:hover .archive-book,
.archive-card:focus-visible .archive-book,
.archive-card.is-active .archive-book {
    --lift: 1;
    border-color: var(--accent-color);
    box-shadow: var(--card-shadow-3d), 0 0 18px rgba(0, 230, 118, 0.16);
}
.archive-card:hover .archive-book::after,
.archive-card:focus-visible .archive-book::after,
.archive-card.is-active .archive-book::after { background: var(--accent-color); opacity: 0.5; }
.archive-card:hover .archive-book::before,
.archive-card:focus-visible .archive-book::before,
.archive-card.is-active .archive-book::before { background: var(--accent-color); color: var(--bg-color); }

.archive-title {
    position: relative; z-index: 1; transform: translateZ(18px);
    margin-bottom: 9px; padding-bottom: 8px;
    font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--accent-color);
    border-bottom: 1px solid var(--border-color);
}
/* Öndeyken ayırıcı çizginin ucunda "aç" oku kayarak belirir (başlığı alt satıra itmesin diye mutlak konumlu) */
.archive-title::after {
    content: '►'; position: absolute; right: 0; bottom: -0.55em; padding-left: 8px;
    font-size: 11px; line-height: 1; background: var(--card-bg);
    opacity: 0; transform: translateX(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.archive-card:hover .archive-title::after,
.archive-card:focus-visible .archive-title::after,
.archive-card.is-active .archive-title::after { opacity: 1; transform: translateX(0); }
.archive-desc {
    position: relative; z-index: 1; transform: translateZ(18px);
    font-size: 14px; line-height: 1.6; opacity: 0.88; text-align: left;
    transition: opacity 0.4s ease;
}

/* Proje ikonu: sitedeki diğer neon ikonlar gibi dolu glif (yeşil + drop-shadow parlama).
   Sırtta ATG etiketinin altında, kapakta sol şeridin üstünde durur. Semboller sayfadaki sprite'tadır (pages/tum-projeler.html). */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.archive-icon {
    width: 22px; height: 22px; flex: 0 0 auto;
    fill: currentColor; color: var(--accent-color);
    filter: drop-shadow(0 0 4px var(--accent-color));
    pointer-events: none;
    transition: color 0.3s ease, filter 0.3s ease;
}
.archive-icon--cover { position: absolute; z-index: 2; left: 8px; top: 9px; transform: translateZ(3px); }
/* Kapak öndeyken şerit yeşile döner: ikon koyulaşır, parlaması kapanır */
.archive-card:hover .archive-icon--cover,
.archive-card:focus-visible .archive-icon--cover,
.archive-card.is-active .archive-icon--cover { color: var(--bg-color); filter: none; }

/* Kapağın iç yüzü: gittiği sayfanın girişi saydam görünür (iframe; js/script.js §13). Metin solda kalır,
   önizleme kapağın sağ yarısında belirir. Temel .card-preview kuralları css/base.css §15c'dedir (iframe 3 kat büyük çizilip 1/3 küçültülür). */
.archive-book .card-preview { top: 0; left: 62%; border-radius: 0 13px 13px 0; }
.archive-book .card-preview::after {
    background: linear-gradient(90deg, var(--card-bg) 0%, transparent 30%),
                linear-gradient(180deg, transparent 70%, var(--card-bg) 100%);
}
.archive-card.preview-ready:hover .card-preview iframe,
.archive-card.preview-ready:focus-visible .card-preview iframe,
.archive-card.preview-ready.is-active .card-preview iframe { opacity: 0.7; }

/* ---------- DİKEY RAF (telefon / tablet / dar pencere / dokunmatik) ----------
   Yatay raf koşulunun tam tersi: aşağıdaki sorgu ile yatay raf bloğundaki sorgu birbirinin değilidir. */
@media not all and (min-width: 961px) and (hover: hover) and (pointer: fine) {
    .archive-card {
        padding: 16px 1% 26px;
        background: linear-gradient(180deg, var(--shelf-recess), transparent 60%);
    }
    /* Raf tahtası: her gözün altında kalın bir tahta; kenarlara taşar, rafın yan duvarlarına oturur */
    .archive-card::after {
        content: ''; position: absolute; left: -12px; right: -12px; bottom: 0; height: 9px;
        background: linear-gradient(180deg, var(--shelf-plank-hi), var(--shelf-plank));
        border-top: 1px solid var(--border-color);
        transition: border-color 0.3s ease;
    }
    .archive-card:last-child::after { border-radius: 0 0 11px 11px; }
    /* Kitap öne çıkınca rafın zeminine düşen yumuşak gölge */
    .archive-card::before {
        content: ''; position: absolute; left: 12%; right: 12%; bottom: 8px; height: 18px;
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, transparent 70%);
        opacity: 0; transition: opacity 0.35s ease;
    }
    body.light-mode .archive-card::before { background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.3) 0%, transparent 70%); }
    .archive-card:hover, .archive-card:focus-visible, .archive-card.is-active { z-index: 3; }
    .archive-card:hover::before, .archive-card:focus-visible::before, .archive-card.is-active::before { opacity: 0.9; }
    .archive-card:hover::after, .archive-card:focus-visible::after, .archive-card.is-active::after { border-top-color: var(--accent-color); }

    .archive-book {
        --ry: -8deg; --persp: 1000px; --pull: 34px; --stair: 3px;
        width: 92%; min-height: 104px; margin: 0 auto;
        padding: 14px 16px 14px 56px;
        transform: perspective(var(--persp))
                   translateX(calc((var(--i) - 4) * var(--stair) * (1 - var(--lift))))
                   translateZ(calc(var(--tz) + var(--lift) * var(--pull)))
                   rotateX(var(--my))
                   rotateY(calc(var(--ry) * (1 - var(--lift)) + var(--mx)));
        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.4s ease;
        animation: shelf-in 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
        animation-delay: calc(var(--i) * 80ms);
    }
    /* İlk ziyarette ön yükleme ekranı kapanana kadar bekle (boot.js: oturumda ilk sayfa) */
    html:not(.no-preloader) .archive-book { animation-delay: calc(var(--i) * 80ms + 0.6s); }
    .archive-book::before { width: 38px; font-size: 11px; letter-spacing: 2px; }
    .archive-title { font-size: 15.5px; }
    .archive-desc { font-size: 13px; }
    /* Önizleme başlığın hemen altından başlar ve açıklamanın yerini alır (üst konum --preview-top: js/script.js §13) */
    .archive-book .card-preview { top: var(--preview-top, 52px); left: 38px; border-radius: 0 0 13px 0; }
    .archive-book .card-preview::after { background: linear-gradient(180deg, transparent 72%, var(--card-bg) 100%); }
    .archive-card.preview-ready:hover .card-preview iframe,
    .archive-card.preview-ready:focus-visible .card-preview iframe,
    .archive-card.preview-ready.is-active .card-preview iframe { opacity: 0.6; }
    .archive-card.preview-ready:hover .archive-desc,
    .archive-card.preview-ready:focus-visible .archive-desc,
    .archive-card.preview-ready.is-active .archive-desc { opacity: 0; }
}
/* Rafa dizili kitapların raftan çıkma girişi (dikey raf) */
@keyframes shelf-in {
    from { opacity: 0; transform: perspective(1500px) translateX(-70px) translateZ(-260px) rotateY(-48deg); }
}

/* ---------- YATAY RAF (geniş ekran + fare) ----------
   Dikkat: bu sorgu js/script.js §13'teki rowQuery ile AYNI olmalı (ve yukarıdaki "not all" sorgusunun tersidir).
   --lean raf eğimidir; JS aynı değeri okuyup farenin hangi kitabın üzerinde olduğunu eğimi hesaba katarak bulur. */
@media (min-width: 961px) and (hover: hover) and (pointer: fine) {
    .archive-shelf {
        --stage: 320px;       /* rafın altında, kapağın ineceği boş alan (sayfa zıplamasın diye hep ayrılır) */
        --plank: 12px;        /* raf tahtası kalınlığı */
        width: min(1040px, calc(100% - 40px));
        padding-bottom: var(--stage);
    }
    .archive-grid {
        --n: 7; --lean: 11deg; --padl: 14px; --padr: 60px;
        --row-h: 284px; --spine-h: 240px; --spine-in: 10px;
        container-type: inline-size;        /* kapak genişliği/konumu rafın genişliğine göre (cqw) hesaplanır */
        z-index: 2;
        flex-direction: row; align-items: stretch;
        height: var(--row-h);
        padding: 0 var(--padr) var(--plank) var(--padl);
        border-radius: 14px;
        background: linear-gradient(180deg, var(--shelf-recess), transparent 78%), var(--card-bg);
    }
    /* Raf tahtası */
    .archive-grid::after {
        content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--plank);
        background: linear-gradient(180deg, var(--shelf-plank-hi), var(--shelf-plank));
        border-top: 1px solid var(--border-color); border-radius: 0 0 13px 13px;
    }

    /* Raf gözü: kitabın dar dikey yuvası. Kapak bunun altına iner (kapak bu kartın çocuğu olduğu için
       fare kapağın üzerindeyken de bağlantı bu kartın bağlantısıdır). */
    .archive-card { flex: 1 1 0; min-width: 0; padding: 0; }
    .archive-card.is-active { z-index: 3; }
    /* Kitap yuvadan çıkınca geride kalan boş yuva (kitapla aynı eğimde kesik çizgili) ve tahtadaki yeşil ışık */
    .archive-card::before {
        content: ''; position: absolute; left: var(--spine-in); right: var(--spine-in); bottom: 0; height: var(--spine-h);
        border: 1px dashed var(--accent-color); border-bottom: 0; border-radius: 4px 4px 0 0;
        border-color: color-mix(in srgb, var(--accent-color) 55%, transparent);
        background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--accent-color) 12%, transparent));
        transform-origin: 50% 100%; transform: rotate(var(--lean));
        opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
    }
    .archive-card::after {
        content: ''; position: absolute; left: 6px; right: 6px; bottom: -2px; height: 3px; border-radius: 2px;
        background: var(--accent-color); box-shadow: 0 0 16px var(--accent-color);
        opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
    }
    .archive-card.is-active::before, .archive-card.is-active::after,
    .archive-card:focus-visible::before, .archive-card:focus-visible::after { opacity: 1; }
    .archive-card:focus-visible { z-index: 3; outline-offset: -1px; }

    /* Kitap sırtı: rafta eğik duran dar yüz (üstte ATG numarası, altta dikey yazılı kısa ad) */
    .archive-spine {
        --ry: -14deg;
        position: absolute; left: var(--spine-in); right: var(--spine-in); bottom: 0; height: var(--spine-h);
        display: flex; flex-direction: column; align-items: center;
        padding: 0 0 14px;
        background: var(--card-bg);
        background: linear-gradient(90deg, color-mix(in srgb, var(--accent-color) 12%, var(--card-bg)), var(--card-bg) 70%);
        border: 1px solid var(--border-color); border-radius: 5px 5px 1px 1px;
        box-shadow: 10px 12px 16px -10px rgba(0, 0, 0, 0.6);
        pointer-events: none;   /* tıklama ve üzerine gelme raf gözünde (kart) ve js/script.js'te işlenir */
        transform-style: preserve-3d; transform-origin: 50% 100%;
        transform: perspective(1100px)
                   translateY(calc(var(--lift) * -18px))
                   translateZ(calc(var(--lift) * 26px))
                   rotateY(var(--ry))
                   rotate(calc(var(--lean) + var(--side) * var(--lift) * 5deg))
                   translateY(0) translateZ(0) rotateX(0deg);   /* son üç fonksiyon: çekilme (kitabın kendi ekseninde); liste aynı kalsın ki geçiş düzgün işlesin */
        transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease 0.16s;   /* opacity gecikmesi: kapak önce yuvasına girer, sonra sırt belirir */
        animation: spine-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
        animation-delay: calc(var(--i) * 70ms);
    }
    /* Giriş: kitaplar yukarıdan rafa yaslanır. Solma (opacity) sırtta değil kartta yapılır; çünkü opacity 3B'yi düzleştirir ve sırtın yan yüzü kaybolurdu */
    .archive-card { animation: card-in 0.5s ease backwards; animation-delay: calc(var(--i) * 70ms); }
    html:not(.no-preloader) .archive-card, html:not(.no-preloader) .archive-spine { animation-delay: calc(var(--i) * 70ms + 0.6s); }
    @keyframes card-in { from { opacity: 0; } }
    @keyframes spine-in {
        from { transform: perspective(1100px) translateY(-80px) translateZ(140px) rotateY(var(--ry)) rotate(calc(var(--lean) + 16deg)) translateY(0) translateZ(0) rotateX(0deg); }
    }
    body.light-mode .archive-spine { box-shadow: 10px 12px 16px -10px rgba(15, 23, 42, 0.4); }
    /* Sırtın yan yüzü (kitabın kalınlığı / sayfa kenarı): eğim yüzünden sağ kenarda görünür */
    .archive-spine::after {
        content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 18px;
        background: var(--border-color);
        background: repeating-linear-gradient(0deg, var(--border-color) 0 2px, color-mix(in srgb, var(--text-color) 22%, var(--card-bg)) 2px 4px);
        transform-origin: 100% 50%; transform: rotateY(-90deg);
    }
    .archive-spine::before {
        content: 'ATG-' counter(shelf, decimal-leading-zero);
        content: 'ATG-' counter(shelf, decimal-leading-zero) / '';
        align-self: stretch; padding: 8px 0 7px; margin-bottom: 12px;
        text-align: center; font-family: monospace; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 2px;
        color: var(--accent-color);
        background: var(--shelf-recess);
        background: linear-gradient(90deg, color-mix(in srgb, var(--accent-color) 18%, transparent), color-mix(in srgb, var(--accent-color) 6%, transparent));
        border-bottom: 1px solid var(--border-color);
        border-radius: 4px 4px 0 0;
    }
    /* Açık temada etiket daha doygun (kapak etiketiyle aynı kural) */
    body.light-mode .archive-spine::before {
        color: color-mix(in srgb, var(--accent-color) 68%, #000);
        background: linear-gradient(90deg, color-mix(in srgb, var(--accent-color) 42%, transparent), color-mix(in srgb, var(--accent-color) 22%, transparent));
        border-bottom-color: color-mix(in srgb, var(--accent-color) 65%, transparent);
    }
    .archive-spine-name {
        flex: 1; min-height: 0;
        writing-mode: vertical-rl; transform: rotate(180deg);
        font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0.5px; white-space: nowrap;
        color: var(--text-color); overflow: hidden; text-overflow: ellipsis;
    }
    /* Komşu kitaplar yalnızca hafifçe yükselir; yeşil kenar yalnızca sıradaki (yarım yükselmiş) kitapta belirir */
    .archive-card:not(.is-active) .archive-spine { border-color: color-mix(in srgb, var(--accent-color) calc(var(--lift) * 70%), var(--border-color)); }
    /* Seçilen kitabın sırtı anında söner; yerini AYNI kitap (kapak) alır: kapak, rafta yan duran kitap gibi yuvada dar bir şerit olarak belirir
       ve oradan çekilir (aşağıdaki @keyframes cover-drop). */
    .archive-card.is-active .archive-spine,
    .archive-card:focus-visible .archive-spine {
        opacity: 0;
        transition: opacity 0.05s linear;
    }
    .archive-spine .archive-icon { width: 24px; height: 24px; margin-bottom: 10px; }

    /* Kitap kapağı: HER ZAMAN rafın altında ve rafın ORTASINA açılır (hangi kitap seçilirse seçilsin aynı yer): kişi kitaplara göz gezdirir,
       açılanı ortadan tıklar. --shift = rafın ortası ile kitabın yuvasının ortası arasındaki yatay fark.
       Kapak, ortada nasıl duruyorsa AYNI boyutta ve yazılarıyla çıkar: rafta kitap gibi yan çevrilmiş (rotateY) ve eğik, yani yuvada dar bir 3B şerit
       olarak durur; çekilirken öne gelir, döner ve ortada düz kutuya dönüşür. Dönüş kapağın ortasından olur (transform-origin 50% 50%). */
    .archive-book {
        --cw: min(760px, 100cqw + var(--padl) + var(--padr));                  /* kapak genişliği */
        --c: calc((var(--i) - 0.5) * 100cqw / var(--n));                       /* bu kitabın yuvasının orta noktası */
        --shift: calc(50cqw + (var(--padr) - var(--padl)) / 2 - var(--c));     /* rafın ortası - yuvanın ortası */
        position: absolute; z-index: 2;
        top: calc(100% + var(--plank) + 18px);
        left: calc(50% + var(--shift));
        translate: -50% 0;
        width: var(--cw); min-height: 240px; margin: 0;
        padding: 18px 28px 18px 84px;
        transform-origin: 50% 50%;
        /* Kapalı hâl = yuvadaki şerit: tam boyut, sol kenarı (sırt şeridi) izleyiciye dönük, rafın eğimiyle yatık */
        transform: translate3d(calc(var(--shift) * -1 + 45px), -249px, 0)
                   perspective(1300px) translate3d(0, 0, -300px)
                   rotate(var(--lean)) rotateX(0deg) rotateY(79deg) scale(1, 1);
        opacity: 0; pointer-events: none;
        /* Bu geçiş yalnızca KAPANIRKEN işler (kapak hızla yuvasına çekilir, sonra söner); açılış @keyframes cover-drop ile yapılır */
        transition: transform 0.34s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.1s ease 0.24s, border-color 0.3s ease, box-shadow 0.4s ease;
        animation: none;
    }
    .archive-card.is-active .archive-book,
    .archive-card:focus-visible .archive-book {
        opacity: 1; pointer-events: auto;
        transform: translate3d(0, 0, 0)
                   perspective(1300px) translate3d(0, 0, calc(var(--lift) * 24px))
                   rotate(0deg) rotateX(var(--my)) rotateY(var(--mx)) scale(1, 1);
        transition: border-color 0.3s ease, box-shadow 0.4s ease;
        animation: cover-drop 0.9s linear backwards;
    }
    /* ÇEKİLİP ORTAYA ALINMA: (0-6%) şerit yuvada belirir (sırt söner); (6-26%) kitap yuvasından kendi eğim ekseni boyunca öne ve aşağı çekilir,
       şerit olarak büyür; (26-100%) dönerek ve eğimini bırakarak ortaya süzülür (52% ara karesi yatay yolu dönüşün önüne alır): yavaş başlar, yumuşakça durur. Boyut hep tam boyuttur; sıçrama yok. */
    @keyframes cover-drop {
        0% {
            opacity: 0;
            transform: translate3d(calc(var(--shift) * -1 + 45px), -249px, 0) perspective(1300px) translate3d(0, 0, -300px) rotate(var(--lean)) rotateX(0deg) rotateY(79deg) scale(1, 1);
            animation-timing-function: linear;
        }
        6% {
            opacity: 1;
            transform: translate3d(calc(var(--shift) * -1 + 45px), -249px, 0) perspective(1300px) translate3d(0, 0, -300px) rotate(var(--lean)) rotateX(0deg) rotateY(79deg) scale(1, 1);
            animation-timing-function: cubic-bezier(0.35, 0, 0.3, 1);
        }
        26% {
            opacity: 1;
            transform: translate3d(calc(var(--shift) * -1 + 42px), -139px, 0) perspective(1300px) translate3d(0, 0, -170px) rotate(var(--lean)) rotateX(0deg) rotateY(76deg) scale(1, 1);
            animation-timing-function: cubic-bezier(0.3, 0, 0.45, 1);
        }
        52% {   /* yatay yol dönüşün önünde: dönen kutunun dış kenarı ekran/raf dışına taşmasın */
            opacity: 1;
            transform: translate3d(calc(var(--shift) * -0.15 + 7px), -60px, 0) perspective(1300px) translate3d(0, 0, -40px) rotate(4deg) rotateX(0deg) rotateY(29deg) scale(1, 1);
            animation-timing-function: cubic-bezier(0.2, 0.55, 0.2, 1);
        }
        100% {
            opacity: 1;
            transform: translate3d(0, 0, 0) perspective(1300px) translate3d(0, 0, calc(var(--lift) * 24px)) rotate(0deg) rotateX(var(--my)) rotateY(var(--mx)) scale(1, 1);
        }
    }
    .archive-book::after { display: none; }   /* opacity geçişi sırasında preserve-3d düzleşir; plaka kapağın üstüne çıkıp yeşil perde gibi görünürdü */
    .archive-title, .archive-desc { max-width: calc(var(--cw) * 0.62 - 116px); }
    .archive-icon--cover { left: 15px; top: 16px; width: 24px; height: 24px; }

    /* Rafın altındaki boşlukta, hiçbir kitap seçili değilken görünen yönlendirme satırı */
    .archive-hint {
        display: block; position: absolute; left: 0; right: 0; bottom: calc(var(--stage) / 2 - 18px);
        margin: 0; padding: 0 20px; text-align: center;
        font-family: monospace; font-size: 14px; letter-spacing: 0.5px; line-height: 1.6;
        font-weight: 700; color: var(--accent-color); opacity: 1;
        text-shadow: 0 0 10px color-mix(in srgb, var(--accent-color) 55%, transparent), 0 0 2px color-mix(in srgb, var(--accent-color) 40%, transparent);
        transition: opacity 0.3s ease;
    }
    body.light-mode .archive-hint { color: color-mix(in srgb, var(--accent-color) 78%, #000); text-shadow: none; }
    .archive-hint::before { content: '▲'; display: block; margin-bottom: 6px; font-size: 12px; animation: hint-bob 1.8s ease-in-out infinite; }
    @keyframes hint-bob { 50% { transform: translateY(-5px); } }
    .archive-grid:has(.is-active) ~ .archive-hint,
    .archive-grid:has(:focus-visible) ~ .archive-hint { opacity: 0; }

    /* ---- AÇIK TEMA: neon etkisi orta seviyede, göz yormayan ----
       Açık zeminde yeşil koyu zemindeki kadar parlamaz, ama fazla kuvvetlendirilirse göz alıcı olur. Bu yüzden sırtta orta tonda yeşil dolgu ve
       sol kenarda ince bir neon çizgi, parlamalar (hale, boş yuva, raf ışığı, kapak) ise yumuşak tutulur. */
    body.light-mode .archive-grid {   /* raf zemini: parlak beyaz yerine hafif mat, soğuk gri */
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0.03) 78%),
                    color-mix(in srgb, var(--card-bg) 68%, var(--bg-color));
    }
    body.light-mode .archive-spine {
        background: linear-gradient(90deg, color-mix(in srgb, var(--accent-color) 20%, color-mix(in srgb, var(--card-bg) 72%, var(--bg-color))),
                                           color-mix(in srgb, var(--accent-color) 4%, color-mix(in srgb, var(--card-bg) 72%, var(--bg-color))) 82%);
        box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent-color) 55%, transparent),
                    10px 12px 16px -10px rgba(15, 23, 42, 0.38);
    }
    body.light-mode .archive-card:not(.is-active) .archive-spine {
        border-color: color-mix(in srgb, var(--accent-color) calc(28% + var(--lift) * 55%), var(--border-color));
    }
    body.light-mode .archive-icon { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent-color) 55%, transparent)); }
    body.light-mode .archive-spine .archive-icon { color: color-mix(in srgb, var(--accent-color) 82%, #000); }
    body.light-mode .archive-card::before {
        border-color: color-mix(in srgb, var(--accent-color) 65%, transparent);
        background: linear-gradient(180deg, transparent 25%, color-mix(in srgb, var(--accent-color) 15%, transparent));
    }
    body.light-mode .archive-card::after { box-shadow: 0 0 12px color-mix(in srgb, var(--accent-color) 75%, transparent); }
    @supports (color: color-mix(in srgb, red 50%, blue)) {
        body.light-mode .archive-book { --card-bg: var(--shelf-cover-bg); }   /* kapak ve içindeki önizleme solması aynı mat tonu kullanır */
    }
    body.light-mode .archive-card.is-active .archive-book,
    body.light-mode .archive-card:focus-visible .archive-book {
        box-shadow: var(--card-shadow-3d),
                    0 0 0 1px color-mix(in srgb, var(--accent-color) 55%, transparent),
                    0 0 16px color-mix(in srgb, var(--accent-color) 26%, transparent);
    }
}

/* ==========================================================================
   6. BLOGA GEÇİŞ KARTI (.archive-blog-card)
   Ana sayfadaki vitrin kartlarıyla (css/home.css §14) aynı davranış: kendi perspektifiyle eğik durur, altında kalınlık plakası vardır,
   üzerine gelince (telefonda ekranın ortasına gelince: .is-active) öne döner, fareyi hafifçe izler ve blogun girişi saydam biçimde belirir.
   Önizleme ve fare eğimi js/script.js setupCardPreviews()'tandır (aynı kod). Değişkenler: --ry/--rx duruş, --mx/--my fare, --tz öne çıkma.
   ========================================================================== */
.archive-blog { display: flex; justify-content: center; max-width: 1100px; margin: 10px auto 90px; padding: 0 20px; perspective: 1400px; }
.archive-blog-card {
    --ry: -6deg; --rx: 4deg; --tz: 0px; --mx: 0deg; --my: 0deg; --dx: 0; --dy: 0; --px: 50%; --py: 0%; --glow: 0;
    position: relative; display: flex; flex-direction: column; justify-content: flex-start;
    width: min(640px, 100%); min-height: 210px; padding: 28px 36px;
    color: var(--text-color); text-decoration: none;
    background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px;
    background-image: radial-gradient(360px circle at var(--px) var(--py), color-mix(in srgb, var(--accent-color) calc(var(--glow) * 14%), transparent), transparent 70%);
    box-shadow: var(--card-shadow-3d);
    transform-style: preserve-3d;
    transform: perspective(1100px) translateZ(var(--tz)) rotateX(calc(var(--rx) + var(--my))) rotateY(calc(var(--ry) + var(--mx)));
    transition: transform 0.7s cubic-bezier(0.22, 1.35, 0.36, 1), border-color 0.3s ease, box-shadow 0.45s ease, --glow 0.45s ease;
    will-change: transform;
}
@property --glow { syntax: '<number>'; inherits: true; initial-value: 0; }
.archive-blog-card::after {                                   /* kenarlıkta imleci izleyen ışık halkası */
    content: ''; position: absolute; inset: -1px; padding: 1px; border-radius: inherit;
    background: radial-gradient(260px circle at var(--px) var(--py), var(--accent-color), transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    opacity: 0; transition: opacity 0.35s ease; pointer-events: none;
}
.archive-blog-card::before {                                  /* kartın kalınlık plakası */
    content: ''; position: absolute; inset: -1px; border-radius: inherit; background: var(--border-color);
    transform: translateZ(-18px); pointer-events: none; transition: background 0.3s ease, opacity 0.3s ease;
}
.archive-blog-card h2 { color: var(--accent-color); font-size: 22px; margin: 0 0 15px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }
.archive-blog-card p { font-size: 15px; line-height: 1.65; opacity: 0.85; margin: 0; }
.archive-blog-card h2, .archive-blog-card p {
    transform: translateZ(26px); translate: calc(var(--dx) * -8px) calc(var(--dy) * -6px);
    transition: opacity 0.4s ease, translate 0.25s ease-out;
}
.archive-blog-card:hover, .archive-blog-card:focus-visible, .archive-blog-card.is-active {
    --ry: 0deg; --rx: 0deg; --tz: 52px; --glow: 1;
    border-color: var(--accent-color);
    box-shadow: var(--card-shadow-3d), 0 0 22px color-mix(in srgb, var(--accent-color) 26%, transparent);
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1), border-color 0.3s ease, box-shadow 0.45s ease, --glow 0.35s ease;
}
.archive-blog-card:hover::after, .archive-blog-card:focus-visible::after, .archive-blog-card.is-active::after { opacity: 1; }
.archive-blog-card:hover::before, .archive-blog-card:focus-visible::before, .archive-blog-card.is-active::before { background: var(--accent-color); opacity: 0.5; }
.archive-blog-card:active { --tz: 30px; }
.archive-blog-card:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 4px; }
.archive-blog-card.preview-ready:hover .card-preview iframe,
.archive-blog-card.preview-ready:focus-visible .card-preview iframe,
.archive-blog-card.preview-ready.is-active .card-preview iframe { opacity: 0.55; }
.archive-blog-card.preview-ready:hover p,
.archive-blog-card.preview-ready:focus-visible p,
.archive-blog-card.preview-ready.is-active p { opacity: 0; }
@media (min-width: 961px) and (hover: hover) and (pointer: fine) {
    .archive-blog { margin-top: -50px; }   /* yatay rafta: inen kitabın altında kalan boşluğa yaklaşır, yönlendirme yazısının hemen altına gelir */
}
@media (max-width: 640px) {
    .archive-blog { margin: 0 auto 60px; }
    .archive-blog-card { --ry: -3deg; --rx: 3deg; padding: 20px; min-height: 200px; }
    .archive-blog-card h2 { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    .archive-blog-card, .archive-blog-card::before, .archive-blog-card::after, .archive-blog-card h2, .archive-blog-card p { transition: none; }
    .archive-book, .archive-book::after, .archive-book::before, .archive-card::before, .archive-card::after,
    .archive-spine, .archive-title::after, .archive-hint, .archive-hint::before { transition: none; animation: none; }
    .archive-card { animation: none; }
    .archive-card.is-active .archive-spine, .archive-card:focus-visible .archive-spine { transition: none; }
    .archive-card.is-active .archive-book, .archive-card:focus-visible .archive-book,
    .archive-card.is-active .archive-book::before, .archive-card.is-active .archive-icon--cover,
    .archive-card.is-active .archive-title, .archive-card.is-active .archive-desc, .archive-card.is-active .card-preview,
    .archive-card:focus-visible .archive-book::before, .archive-card:focus-visible .archive-icon--cover,
    .archive-card:focus-visible .archive-title, .archive-card:focus-visible .archive-desc, .archive-card:focus-visible .card-preview { animation: none; transition: none; }
    .archive-icon { transition: none; }
}

/* Yazdırma: arşiv rafı (eskiden ana sayfa bölümündeydi; yalnızca bu sayfayı ilgilendirir) */
@media print {
    /* Arşiv rafı: kitaplar düz kart olarak, raf süslemesi, sırtlar, ipucu ve önizleme olmadan basılır */
    .archive-shelf { width: auto; margin: 0; padding: 0 !important; }
    .archive-grid { display: block !important; width: auto; height: auto !important; padding: 0 !important; border: 0; background: none; box-shadow: none; overflow: visible; }
    .archive-card { display: block; background: none; }
    .archive-card::before, .archive-card::after, .archive-grid::after, .archive-book::before, .archive-book::after, .archive-spine, .archive-hint, .archive-icon, .svg-sprite { display: none !important; }
    .archive-book { position: static !important; translate: none !important; transform: none !important; transition: none !important; animation: none !important; opacity: 1 !important; pointer-events: auto; width: 100% !important; min-height: 0; padding: 10px !important; border: 0; background: transparent; box-shadow: none; }
    .archive-title, .archive-desc { transform: none; max-width: none !important; }
    .archive-title::after { display: none; }
}