/*
Theme Name: Hagia Sophia
Theme URI: https://hagia.sophia.istanbul
Author: Sedat Bornovalı
Description: English satellite site for the book "Hagia Sophia: An Illustrated Story" by Sedat Bornovalı. Sibling of ayasofya.org.tr.
Version: 1.4.64
Text Domain: hagia-sophia
*/

/* --- 1. TEMEL AYARLAR --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

:root {
    --header-height: 54px;
    --header-height-mobile: 46px;
    --gold: #c5a059;
    /* Ortak belirteçler (assets/ortak/, 19 Ekim 2026): site aksanı, kapaktaki
       çini-mürekkep mavisi. Altın bilinçli olarak ortak altından ayrı kaldı. */
    --sb-aksan: #304a6d;
}

body {
    width: 100%;
    min-height: 100vh;
    background-color: #050505;
    font-family: 'Lato', 'SB Turkce Ek', sans-serif;
    color: #ffffff;
    margin: 0;
    /* clip = yatay taşmayı kes ama position:sticky'yi bozma (hidden bozuyor) */
    overflow-x: hidden; /* eski tarayıcı yedeği */
    overflow-x: clip;
}

/* --- TİPOGRAFİ --- */
h1, h2, h3, h4, .section-title {
    font-family: 'Cardo', Georgia, serif;
}

.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

a { text-decoration: none; color: inherit; transition: 0.3s ease; }

/* --- 2. HEADER --- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: var(--header-height);
    padding: 0 32px;
    background: transparent;
    border-bottom: none;
    display: flex;
    align-items: center;
}

.site-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(120px, 17vh, 210px);
    background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.header-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 36px;
    position: relative;
    z-index: 1;
}

.header-group-left {
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
}

.site-brand {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    font-family: 'Lato', 'SB Turkce Ek', sans-serif;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    white-space: nowrap;
}

.site-brand .brand-main {
    font-size: 26px;
    text-transform: none;
}

.site-brand .brand-sub {
    font-size: 20px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lang-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Lato', 'SB Turkce Ek', sans-serif;
    font-size: 15px;
    color: #d6d6d6;
    font-weight: 700;
    line-height: 1;
}

.lang-switch span { opacity: 0.8; }
.lang-switch a { color: #d6d6d6; }
.lang-switch a.active { color: #ffffff; font-weight: 900; }

.header-group-center { justify-self: center; }

.social-icons-row {
    display: flex;
    align-items: center;
    gap: 26px;
}

.social-icons-row a {
    color: #ededed;
    font-size: 24px;
    line-height: 1;
}

.social-icons-row a:hover { color: #c5a059; }
/* Satır içi SVG simge (19 Ekim 2026): eski yazı tipi simgesiyle aynı boy, 1em. */
.social-icons-row .sosyal-simge { display: block; width: auto; height: 1em; }

.header-group-right {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 16px;
}

.main-nav .nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 34px;
}

.main-nav a {
    font-family: 'Lato', 'SB Turkce Ek', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: #eaeaea;
    line-height: 1;
}

.main-nav a:hover { color: #c5a059; }

/* TS-5 (19 Ekim 2026): menü öğesi iki satıra kırılmasın ("About the Author",
   "Sedat Hakkında" 1025-1279 pikselde kırılıyordu). Bu aralıkta yazı 16 px ve
   aralık 20 px; 1280 ve üstünde ölçüler aynı. */
@media screen and (min-width: 1025px) {
    .main-nav a { white-space: nowrap; }
}
@media screen and (min-width: 1025px) and (max-width: 1279px) {
    .main-nav a { font-size: 16px; }
    .main-nav .nav-menu { gap: 20px; }
}
/* G01 (21 Ekim 2026, altıncı tur d-1): sol grup (künye + dil seçici) 1025-1290
   pikselde "1fr auto 1fr" ızgarasında kendi sütununa sığmıyor, sosyal simgelerin
   altına giriyordu; 1180'de dil bağına tıklama LinkedIn'e gidiyordu. Bu aralıkta
   sütunlar içeriğe göre bölünür; simgeler yalnız 1025-1239'da gizlenir (orada
   hiçbir ölçüde sığmıyor). 1440 ve üstü ile 1024 ve altı değişmez. */
@media screen and (min-width: 1025px) and (max-width: 1439px) {
    .header-container { grid-template-columns: auto 1fr auto; }
}
@media screen and (min-width: 1025px) and (max-width: 1239px) {
    .header-group-center { display: none; }
}

.sb-hamburger-menu {
    display: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    position: relative;
    z-index: 1300;
}

.sb-hamburger-menu .bar {
    width: 24px;
    height: 2px;
    background-color: #f2f2f2;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.mobile-extra-nav { display: none; }

.sb-hamburger-menu.toggle .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.sb-hamburger-menu.toggle .bar:nth-child(2) {
    opacity: 0;
}

.sb-hamburger-menu.toggle .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* --- 3. ANA YAPI (AKORDEON) --- */
.accordion-container {
    display: flex;
    width: 100%;
    height: 100vh;   /* eski tarayıcı fallback */
    height: 100svh;  /* STABİL küçük görünüm yüksekliği: mobil adres çubuğu kaydırmayla
                        "kavga" etmez, sayfa baştan kaydırılabilir (takılma/direnme biter). */
    margin-top: 0;
    background: #000;
}

/* --- 4. PANELLER --- */
.panel {
    position: relative; flex: 1; min-width: 0; height: 100%;
    border-right: 12px solid #000;
    background-size: cover; background-position: center top; background-repeat: no-repeat;
    transition: flex 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
    /* Kaydırma takılması düzeltmesi: paneli kendi GPU katmanına al → cover arka plan
       her karede yeniden boyanmaz, kompozit edilir (hem masaüstü hem mobil). */
    transform: translateZ(0);
    backface-visibility: hidden;
}
.panel:last-child { border-right: none; }

.panel.book-panel {
    background-color: #000;
    background-size: auto 100%, cover !important;
    background-position: center center, center center !important;
    background-repeat: no-repeat, no-repeat !important;
}

.panel.blog-panel {
    background-position: center center !important;
    background-size: cover !important;
}

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
    .panel:hover { flex: 3; }
}

/* --- 5. OVERLAY VE SABİT UFUK ÇİZGİSİ (%12) --- */
.panel-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%;
    height: 12vh; min-height: 120px; 
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 30%, rgba(0,0,0,0.8) 100%);
    padding: 0 2rem; display: block; opacity: 0.9; transition: opacity 0.4s; z-index: 2;
}
.panel:hover .panel-overlay { opacity: 1; }

.panel-overlay::before {
    content: ''; position: absolute; top: 0; left: 2rem; right: 0; height: 3px; background-color: #c5a059; z-index: 10;
}
.media-panel .panel-overlay::before { width: 50%; right: auto; }

/* --- 6. BAŞLIKLAR --- */
.section-title, .author-info h1, .author-info h2 {
    position: absolute; bottom: 100%; left: 2rem; margin-bottom: 15px;
    font-size: 3rem; color: #fff; line-height: 1; text-shadow: 0 2px 5px rgba(0,0,0,0.9);
    border-bottom: none !important; padding-bottom: 0; width: auto; z-index: 20;
}
.author-info h1, .author-info h2 { display: block; max-width: 90%; }

/* --- 7. MEDYA IZGARA --- */
.media-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; }
.media-cell {
    position: relative; height: 25%; flex: none; width: 100%;
    background-size: cover; background-position: center;
    border-bottom: 12px solid #000;
    text-decoration: none; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s;
}
.media-cell:last-child { border-bottom: none; }
.cell-overlay--video { display: none; } /* yalnız 1024 px ve altında görünür */
.media-cell:hover { box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.3); }

.cell-cat { display: block; color: var(--gold); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 5px; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.9); }
.cell-overlay h3 { color: #fff; font-family: 'Cardo', Georgia, serif; font-size: 2.5rem; line-height: 1; font-weight: 400; text-shadow: 0 4px 8px rgba(0,0,0,1); }

.media-panel .panel-overlay { pointer-events: none; }
.media-panel .section-title { display: block !important; opacity: 1 !important; }
.digital-project-info { position: absolute; top: 20px; left: 2rem; width: 50%; pointer-events: auto; }
.project-tag { display: block; color: #fff; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 5px; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.9); }
.digital-project-info h3 { color: #fff; font-family: 'Cardo', Georgia, serif; font-size: 2.5rem; line-height: 1; text-shadow: 0 4px 8px rgba(0,0,0,1); margin-bottom: 10px; }

/* --- 8. AKORDEON ALTI KİTAP VİTRİNİ --- */
.home-scroll-continuation {
    position: relative;
    background: #080807;
    color: #fff;
    border-top: 12px solid #000;
}

.ayasofya-showcase {
    position: relative;
    min-height: clamp(560px, 78vh, 780px);
    display: grid;
    align-items: center;
    padding: clamp(74px, 8vw, 120px) clamp(24px, 5vw, 80px);
    isolation: isolate;
    overflow: hidden;
}

.showcase-collage {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    z-index: -3;
}

.collage-panel {
    background-size: cover;
    background-position: center;
    filter: brightness(1.08) saturate(1.04) contrast(1);
    transform: scale(1.02);
}

.collage-panel + .collage-panel {
    border-left: 12px solid rgba(0,0,0,0.48);
}

.collage-left {
    background-position: center 58%;
    filter: brightness(1.18) saturate(1.02) contrast(1);
}

.collage-center {
    background-position: center;
    filter: brightness(1.04) saturate(0.9) sepia(0.04);
}

.collage-right {
    background-position: center;
    filter: brightness(0.98) saturate(1.08);
}

.ayasofya-showcase::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 48%, rgba(197,160,89,0.1), transparent 42%),
        linear-gradient(90deg, rgba(5,5,5,0.2), rgba(5,5,5,0.04) 44%, rgba(5,5,5,0.44)),
        linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0.5));
    z-index: -2;
}

.ayasofya-showcase::after {
    content: '';
    position: absolute;
    inset: clamp(18px, 3vw, 38px);
    border: 1px solid rgba(197,160,89,0.32);
    pointer-events: none;
    z-index: -1;
}

.showcase-frame {
    width: min(100%, 1200px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.14fr) minmax(190px, 0.62fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(22px, 4vw, 62px);
}

.showcase-book {
    grid-column: 2;
    justify-self: center;
    perspective: 1100px;
}

.showcase-book img {
    display: block;
    width: min(21vw, 300px);
    min-width: 190px;
    border-radius: 4px;
    border: 1px solid rgba(197,160,89,0.38);
    box-shadow: 22px 34px 84px rgba(0,0,0,0.64);
    transform: rotateY(-7deg);
}

.showcase-copy {
    grid-column: 3;
    max-width: 540px;
    justify-self: start;
    text-shadow: 0 3px 16px rgba(0,0,0,0.72);
}

.scroll-kicker {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--gold);
    font-family: 'Lato', 'SB Turkce Ek', sans-serif;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.showcase-copy h2 {
    font-size: clamp(2.55rem, 5vw, 5.2rem);
    line-height: 0.98;
}

.showcase-copy p {
    max-width: 520px;
    margin-top: 22px;
    color: rgba(255,255,255,0.88);
    font-size: clamp(1.02rem, 1.45vw, 1.22rem);
    line-height: 1.6;
}

.showcase-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 32px;
}

/* --- 8. DAR EKRAN & TABLET (1024px Altı) --- */
@media screen and (max-width: 1024px) {
    body { height: auto; overflow-y: auto; }
    body.menu-open { overflow: hidden; }
    .site-header {
        height: var(--header-height-mobile);
        padding: 0 18px;
    }
    /* Mobil: sabit başlık şeffaf olduğundan, aşağı kaydırırken altından geçen
       içerik başlığı marka yazısıyla iç içe geçiyordu. Başlık bandında neredeyse
       opak başlayıp yumuşakça kaybolan daha güçlü bir perde → marka net okunur,
       alttan geçen içerik kararıp ayrışır (sert bar değil, zarif gradient). */
    .site-header::before {
        height: 132px;
        background: linear-gradient(to bottom,
            rgba(5,5,5,0.95) 0%,
            rgba(5,5,5,0.9) 34%,
            rgba(5,5,5,0.55) 66%,
            transparent 100%);
    }
    .header-container {
        grid-template-columns: 1fr;
        column-gap: 0;
        position: relative;
    }
    .header-group-center, .lang-switch { display: none; }
    .header-group-right {
        display: flex;
        position: static;
        justify-self: end;
        z-index: 1400;
    }
    .sb-hamburger-menu {
        display: inline-flex !important;
        position: fixed;
        top: 3px;
        right: 14px;
        background: rgba(0,0,0,0.28);
        border: 1px solid rgba(255,255,255,0.35);
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.32);
        backdrop-filter: blur(10px);
    }
    .main-nav {
        position: fixed;
        top: 0;
        right: -100vw;
        width: min(82vw, 360px);
        height: 100dvh;
        background:
            linear-gradient(90deg, rgba(5,5,5,0.54), rgba(5,5,5,0.86) 34%, rgba(5,5,5,0.93)),
            rgba(5,5,5,0.72);
        border-left: 1px solid rgba(197,160,89,0.22);
        box-shadow: -12px 0 32px rgba(0,0,0,0.52);
        backdrop-filter: blur(18px) saturate(125%);
        transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 1200;
        padding-top: 74px;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
    /* Keep a closed drawer out of keyboard and screen-reader navigation. */
    .main-nav { visibility: hidden; pointer-events: none; }
    .main-nav.nav-active { right: 0; visibility: visible; pointer-events: auto; }
    /* Generic link transitions must not delay keyboard focus when opening. */
    .main-nav a { transition-property: color, background-color, border-color; }
    .main-nav .nav-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 100%;
    }
    .main-nav .nav-menu li {
        width: 100%;
    }
    .main-nav a {
        display: block;
        width: 100%;
        font-size: clamp(1.25rem, 6vw, 1.8rem);
        font-weight: 800;
        padding: 1.15rem 1.55rem;
        border-top: 1px solid rgba(255,255,255,0.12);
        text-shadow: 0 2px 8px rgba(0,0,0,0.55);
    }
    .main-nav .nav-menu li:first-child a {
        border-top: none;
    }
    .mobile-extra-nav {
        display: flex;
        flex-direction: column;
        gap: 26px;
        margin-top: auto;
        padding: 28px 1.55rem 42px;
        border-top: 1px solid rgba(255,255,255,0.12);
    }
    .mobile-extra-nav .lang-switch {
        display: flex !important;
        justify-content: center;
        gap: 14px;
        width: 100%;
        font-size: clamp(1.15rem, 6vw, 1.55rem);
    }
    .mobile-extra-nav .lang-switch a,
    .mobile-extra-nav .lang-switch span {
        width: auto;
        padding: 0;
        border: 0;
        color: rgba(255,255,255,0.7);
    }
    .mobile-extra-nav .lang-switch a.active {
        color: #fff;
    }
    .mobile-extra-nav .social-icons-row {
        display: flex !important;
        justify-content: center;
        gap: 24px;
        width: 100%;
    }
    .mobile-extra-nav .social-icons-row a {
        width: auto;
        padding: 0;
        border: 0;
        font-size: clamp(1.3rem, 7vw, 1.7rem);
    }
    .site-brand { gap: 8px; }
    .site-brand { padding-right: 72px; }
    .site-brand .brand-main { font-size: 22px; }
    .site-brand .brand-sub { font-size: 17px; }
    .accordion-container {
        margin-top: 0;
        min-height: 100vh;
        flex-direction: column;
        height: auto;
    }
    .accordion-container.book-accordion { min-height: 0; height: auto; }
    .book-accordion-lead { padding-top: calc(var(--header-height-mobile) + 38px); }
    .book-compact-wrapper { padding-top: var(--header-height-mobile); }

    .panel { flex: none; width: 100%; border-right: none; border-bottom: 12px solid #000; background-position: right center !important; }
    /* Mobil vurgu ilk sütundadır: kitap sitesinde bu artık kitap paneli. */
    .panel.book-panel { height: 50vh; min-height: 400px; }
    .panel.author-panel { background-position: 70% 20% !important; }
    .panel:not(.book-panel):not(.media-panel) { height: 25vh; min-height: 250px; }
    .panel.book-panel {
        background-image: var(--mobile-cover), var(--mobile-base) !important;
        background-size: 88% auto, cover !important;
        background-position: center center, center center !important;
        background-repeat: no-repeat, no-repeat !important;
    }

    .panel-overlay {
        position: absolute; top: 0; left: 0; bottom: 0; width: 60%; height: 100%;
        background: linear-gradient(to right, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0) 100%);
        padding: 2rem; pointer-events: auto;
    }
    .panel-overlay::before { display: none; }
    
    .section-title, .author-info h1, .author-info h2 {
        position: relative; bottom: auto; left: auto;
        border-bottom: 1px solid #c5a059 !important;
        color: var(--gold); font-size: 2rem; margin-bottom: 10px; text-shadow: none; width: 100%;
    }
    
    .media-panel { height: auto !important; min-height: 60vh; display: block; padding: 0; }
    .media-panel > .panel-overlay { display: none; }
    
    .media-grid { position: relative; height: auto; flex-direction: row; flex-wrap: wrap; }
    .media-cell { flex: none; width: 50%; height: 30vh; border-right: 6px solid #000; border-bottom: 6px solid #000; padding: 1rem; }
    .media-cell:nth-child(even) { border-right: none; }
    .media-cell:nth-last-child(-n+2) { border-bottom: none; }
    /* Son karo (YouTube önizlemesi) masaüstünde etiketini panelin alt katmanından
       alır; o katman bu genişlikte gizli olduğu için karo etiketsiz boş bir kutu
       kalıyordu (3 Ekim denetimi D8). Video bağı korunur, karo kendi etiketini gösterir. */
    .cell-overlay--video { display: block; }
    
    .cell-overlay h3, .digital-project-info h3 { font-size: 1.3rem; text-shadow: 0 2px 4px rgba(0,0,0,1); }
    .cell-cat { font-size: 0.7rem; }

    .ayasofya-showcase {
        min-height: auto;
        padding: 88px 22px 96px;
    }
    .showcase-frame {
        grid-template-columns: minmax(180px, 0.62fr) minmax(0, 1fr);
        gap: clamp(24px, 5vw, 44px);
    }
    .showcase-book {
        grid-column: 1;
    }
    .showcase-book img {
        width: min(34vw, 300px);
        min-width: 190px;
        transform: none;
    }
    .showcase-copy {
        grid-column: 2;
    }
    .showcase-actions {
        justify-content: flex-start;
    }
}

/* --- 9. MOBİL (768px Altı) --- */
@media screen and (max-width: 768px) {
    .header-group-right { display: flex; }
    .header-container { grid-template-columns: 1fr; }
    .site-brand {
        white-space: normal;
        line-height: 1.1;
    }
    .site-brand .brand-main { font-size: 19px; }
    .site-brand .brand-sub {
        font-size: 15px;
        letter-spacing: 0.05em;
    }
    .sb-hamburger-menu {
        top: 4px;
        right: 12px;
    }

    .panel-overlay {
        width: 100%; top: auto; bottom: 0; height: auto;
        background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0) 100%);
        padding-top: 60px; justify-content: flex-end;
    }
    .panel.author-panel { background-position: center top !important; }
    .section-title { border-bottom: 1px solid #c5a059; font-size: 2.5rem; }
    .media-cell { width: 100%; height: 25vh; border-right: none; border-bottom: 6px solid #000; }

    .ayasofya-showcase {
        padding: 72px 20px 84px;
    }
    .showcase-collage {
        grid-template-columns: 0.9fr 1.2fr 0.9fr;
    }
    .collage-panel + .collage-panel {
        border-left-width: 5px;
    }
    .showcase-frame {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .showcase-book,
    .showcase-copy {
        grid-column: 1;
    }
    .showcase-book img {
        width: min(66vw, 280px);
        min-width: 180px;
        margin: 0 auto;
    }
    .showcase-copy {
        max-width: 540px;
        justify-self: center;
    }
    .showcase-copy h2 {
        font-size: clamp(2.35rem, 12vw, 3.9rem);
    }
    .showcase-actions {
        justify-content: center;
    }
    .showcase-actions .btn-gold,
    .showcase-actions .btn-outline {
        width: 100%;
        text-align: center;
    }
}

/* --- 10. ALT SAYFALAR (Arşiv, Sayfalar vb.) --- */
body.archive, body.single, body.page {
    height: auto !important; overflow-y: auto !important; background: #080808;
}

.archive-container {
    padding-top: 120px; padding-left: 5%; padding-right: 5%; padding-bottom: 80px;
    max-width: 1400px; margin: 0 auto; min-height: 100vh;
}
.archive-header { margin-bottom: 60px; padding-bottom: 20px; border-bottom: 1px solid #333; }
.archive-title { font-size: 3rem; color: #fff; margin-bottom: 10px; }
.archive-subtitle { font-family: 'Lato', 'SB Turkce Ek', sans-serif; color: #c5a059; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 2px; }

.archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 40px; }
.post-card { background: #111; border: 1px solid #222; transition: all 0.3s ease; display: flex; flex-direction: column; }
.post-card:hover { transform: translateY(-10px); border-color: #c5a059; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.card-image { width: 100%; aspect-ratio: 16/9; background-size: cover; background-position: center; border-bottom: 1px solid #222; }
.card-content { padding: 25px; display: flex; flex-direction: column; flex-grow: 1; }
.card-cat { font-size: 0.7rem; color: #c5a059; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; font-weight: 700; }
.card-title { font-size: 1.5rem; color: #fff; margin-bottom: 15px; line-height: 1.3; }
.card-excerpt { font-size: 0.95rem; color: #aaa; line-height: 1.6; margin-bottom: 20px; }
.card-btn { margin-top: auto; color: #fff; font-size: 0.8rem; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; border-bottom: 1px solid #c5a059; display: inline-block; width: fit-content; padding-bottom: 3px; }

.remote-media-page {
    min-height: 100vh;
    background: #f4f4f2;
    color: #2e2e2e;
}

.remote-media-hero {
    min-height: auto;
    padding: calc(var(--header-height) + 70px) clamp(24px, 6vw, 80px) 54px;
    background: #f4f4f2;
    color: #333;
    text-align: center;
    border-bottom: 0;
}

.remote-media-hero::after {
    content: '';
    display: block;
    width: min(100%, 1320px);
    height: 2px;
    margin: 38px auto 0;
    background: rgba(33, 61, 96, 0.95);
}

.remote-media-hero h1 {
    max-width: 980px;
    margin: 0 auto;
    color: #333;
    font-size: clamp(3.2rem, 6vw, 5.4rem);
    line-height: 1;
    text-shadow: none;
}

.remote-media-hero p {
    max-width: 760px;
    margin: 18px auto 0;
    color: #666;
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: 1.68;
}

.remote-media-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 3vw, 44px);
    width: min(100%, 1320px);
    margin: 0 auto;
    background: #f4f4f2;
    padding: clamp(42px, 5vw, 70px) clamp(22px, 4vw, 52px) clamp(70px, 7vw, 110px);
}

.remote-media-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 8px 24px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.remote-media-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(0,0,0,0.1);
}

.remote-media-image {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #e8e8e8;
}

.remote-media-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease, filter 0.45s ease;
}

.remote-media-card:hover .remote-media-image img {
    transform: scale(1.045);
}

.remote-media-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 190px;
    padding: clamp(24px, 2.2vw, 30px);
}

.remote-media-meta {
    display: flex;
    flex-wrap: wrap;
    /* Ayıraç yalnız iki öğe aynı satırdayken görünsün; satır başına düşen
       tarih ayıracı sol kenarda kırpılır. Renk açık zeminde okunur gri
       (#8b8b8b beyazda 3,4:1 idi). 22 Ekim 2026, hub kartlarıyla aynı. */
    gap: 8px 20px;
    clip-path: inset(-6px);
    order: -1;
    margin-bottom: 18px;
    color: var(--sb-gri, #6b6b6b);
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.remote-media-meta time {
    margin-left: -20px;
}

/* Tek başına duran tarihin ayıracı ortak katmanda zaten yok; kaydırma da olmasın. */
.remote-media-meta time:first-child {
    margin-left: 0;
}

/* Büyütülmüş yazıda (telefonda %200) kendi içinde satır kıran tarih de hizalı
   kalsın: ayıraç ayrı öğe olur, ikinci satır kırpılmaz (22 Ekim 2026). */
.remote-media-meta time {
    display: flex;
}

.remote-media-meta time::before {
    flex: none;
}

.remote-media-meta time::before {
    content: '|';
    content: '|' / ''; /* ekran okuyucu ayıracı okumasın */
    display: inline-block;
    width: 20px;
    text-align: center;
    color: #888;
}

.remote-media-content h2 {
    margin: 0;
    color: #333;
    font-size: clamp(1.45rem, 1.8vw, 1.85rem);
    line-height: 1.16;
}

.remote-media-content h2 a:hover {
    color: var(--gold);
}

.remote-media-empty {
    grid-column: 1 / -1;
    padding: clamp(32px, 5vw, 72px);
    background: #fff;
    text-align: center;
}

.remote-media-empty h2 {
    margin-bottom: 14px;
    font-size: clamp(2rem, 4vw, 4rem);
}

/* --- 12. KİTAP DETAY SAYFASI ÖZEL TASARIMI (V2 - 3D) --- */
.book-landing-container {
    padding-top: 140px; min-height: 100vh; background-color: #0c0c0c; color: #fff;
    padding-bottom: 80px; font-family: 'Lato', 'SB Turkce Ek', sans-serif;
}

.book-hero {
    display: flex; max-width: 1200px; margin: 0 auto; padding: 2rem; align-items: center; gap: 60px;
}

/* Kapak Resmi Efekti */
.hero-book-cover {
    max-width: 350px; width: 100%; box-shadow: 0 30px 60px rgba(0,0,0,0.8);
    border: 1px solid #333; transform: perspective(1000px) rotateY(-15deg); transition: 0.5s ease;
}
.hero-book-cover:hover { transform: perspective(1000px) rotateY(0deg); }

.hero-right h1 {
    font-size: 3.5rem; font-family: 'Cardo', Georgia, serif; margin-bottom: 25px; line-height: 1.1; color: #fff;
}

.sub-headline {
    color: #c5a059; letter-spacing: 3px; font-size: 0.9rem; font-weight: 700; display: block; margin-bottom: 15px; text-transform: uppercase;
}

.intro-text {
    font-size: 1.2rem; color: #ccc; line-height: 1.6; margin-bottom: 40px; max-width: 600px;
    border-left: 3px solid #c5a059; padding-left: 20px;
}

/* Butonlar */
.purchase-actions { display: flex; gap: 15px; flex-wrap: wrap; }
.btn-primary, .btn-secondary {
    padding: 15px 35px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold;
    text-decoration: none; transition: 0.3s; font-size: 0.9rem;
}
.btn-primary { background-color: #c5a059; color: #000; }
.btn-primary:hover { background-color: #fff; }
.btn-secondary { border: 1px solid #555; color: #fff; }
.btn-secondary:hover { border-color: #fff; }

/* Alt Detaylar */
.book-details {
    max-width: 1200px; margin: 60px auto 0; display: flex; gap: 60px; padding: 40px 2rem; border-top: 1px solid #222;
}
.detail-column { flex: 1; }
.detail-column h3 { color: #fff; margin-bottom: 25px; font-family: 'Cardo', Georgia, serif; font-size: 1.8rem; }
.detail-column p { line-height: 1.7; color: #bbb; }
.feature-list { list-style: none; }
.feature-list li { margin-bottom: 15px; color: #bbb; display: flex; align-items: center; }
.feature-list li i { color: #c5a059; margin-right: 15px; font-size: 0.8rem; }

/* Mobil Uyumluluk (Kitap Sayfası) */
@media (max-width: 768px) {
    .book-hero, .book-details { flex-direction: column; text-align: center; }
    .hero-right h1 { font-size: 2.2rem; }
    .hero-book-cover { max-width: 200px; margin-bottom: 30px; transform: none; }
    .intro-text { border-left: none; padding-left: 0; }
    .purchase-actions { justify-content: center; }
    .book-details { gap: 40px; }
    .feature-list li { justify-content: center; }
}
/* --- KOMPAKT KİTAP SAYFASI (Tek Ekran) --- */
.book-compact-wrapper {
    display: flex;
    height: 100vh; /* Ekranı tam doldur */
    width: 100%;
    background-color: #0b0b0b;
    padding-top: var(--header-height); /* Header payı */
    overflow: hidden; /* Kaydırmayı engelle (Sığdır) */
}

/* SOL TARA (Görsel) */
.book-visual-side {
    flex: 4; /* %40 Genişlik */
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #111 0%, #050505 100%);
    position: relative;
}

.book-3d-container {
    position: relative;
    perspective: 1000px;
}

.compact-book-cover {
    max-height: 60vh; /* Ekranın %60'ı kadar yükseklik (Asla taşmaz) */
    width: auto;
    box-shadow: 20px 20px 60px rgba(0,0,0,0.8);
    transform: rotateY(-20deg);
    transition: 0.5s;
    border-radius: 4px;
}

.compact-book-cover:hover {
    transform: rotateY(0deg) scale(1.05);
    cursor: pointer;
}

.visual-badge {
    position: absolute; top: -20px; right: -20px;
    background: #c5a059; color: #000; padding: 5px 15px;
    font-weight: bold; font-size: 0.8rem; letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

/* SAĞ TARAF (Bilgi) */
.book-info-side {
    flex: 6; /* %60 Genişlik */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 5%;
    color: #fff;
}

.compact-sub { color: #c5a059; letter-spacing: 3px; font-size: 0.8rem; font-weight: 700; display: block; margin-bottom: 10px; opacity: 0.8; }

.compact-title {
    font-size: 3rem; /* Daha dengeli başlık */
    font-family: 'Cardo', Georgia, serif;
    line-height: 1.1; margin-bottom: 20px;
    background: -webkit-linear-gradient(#fff, #aaa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.compact-desc {
    font-size: 1rem; color: #ccc; line-height: 1.6; margin-bottom: 25px;
    max-width: 650px; border-left: 2px solid #333; padding-left: 15px;
}

.compact-list {
    display: grid; grid-template-columns: 1fr 1fr; /* İki sütunlu liste */
    gap: 10px; margin-bottom: 30px; list-style: none;
}
.compact-list li { font-size: 0.9rem; color: #aaa; display: flex; align-items: center; }
.compact-list li i { color: #c5a059; margin-right: 8px; font-size: 0.7rem; }

.compact-actions { display: flex; gap: 15px; }

.btn-gold {
    display: inline-flex; align-items: center; justify-content: center;
    background-color: #c5a059; color: #000; padding: 12px 30px;
    font-weight: bold; text-transform: uppercase; letter-spacing: 1px; font-size: 0.8rem;
}
.btn-outline {
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #555; color: #fff; padding: 12px 30px;
    font-weight: bold; text-transform: uppercase; letter-spacing: 1px; font-size: 0.8rem;
}
.btn-gold:hover { background-color: #fff; }
.btn-outline:hover { border-color: #fff; }
/* "Yakında" gibi pasif etiketler: zarif altın çerçeveli, tıklanamaz görünüm */
.btn-soft {
    border-color: rgba(197,160,89,0.5);
    color: var(--gold);
    background: rgba(197,160,89,0.06);
    cursor: default;
}
.btn-soft:hover { border-color: rgba(197,160,89,0.55); }

.book-pilot-page {
    background: #070706;
    color: #fff;
    /* DİKKAT: overflow-x:hidden gizli bir kaydırma bağlamı yaratıp aşağıdaki
       scrollytelling'in position:sticky görselini bozuyordu (sabitlenmeyip
       kayıp gidiyor, geriye dev siyah sütun kalıyordu). clip yatay taşmayı yine
       keser AMA kaydırma bağlamı yaratmaz → sticky tekrar çalışır. */
    overflow-x: hidden; /* clip desteklemeyen eski tarayıcılar için yedek */
    overflow-x: clip;
}

.book-pilot-hero {
    min-height: 100vh;
    padding: calc(var(--header-height) + 64px) clamp(24px, 6vw, 96px) 82px;
    display: grid;
    grid-template-columns: minmax(260px, 0.84fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(36px, 7vw, 112px);
    background:
        linear-gradient(90deg, rgba(5,5,5,0.92), rgba(5,5,5,0.58) 46%, rgba(5,5,5,0.84)),
        url('images/cornelius-loos-ayasofya-kubbe.jpg') center center / cover no-repeat;
}

.book-pilot-visual {
    position: relative;
    justify-self: end;
    width: min(100%, 430px);
}

.book-pilot-cover {
    display: block;
    width: 100%;
    border: 1px solid rgba(197,160,89,0.34);
    box-shadow: 24px 38px 90px rgba(0,0,0,0.62);
}

.book-pilot-intro {
    max-width: 720px;
}

.book-pilot-intro h1 {
    margin: 0 0 26px;
    font-size: clamp(3.1rem, 7.2vw, 6.8rem);
    line-height: 0.94;
    text-shadow: 0 4px 28px rgba(0,0,0,0.72);
}

.book-pilot-intro p {
    max-width: 640px;
    color: rgba(255,255,255,0.84);
    font-size: clamp(1.05rem, 1.55vw, 1.3rem);
    line-height: 1.72;
}

.pilot-actions,
.purchase-panel,
.sample-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.pilot-actions {
    margin-top: 34px;
}

.book-promise,
.book-quote,
.sample-pages,
.book-thanks-bridge,
.purchase-panel {
    padding: clamp(58px, 8vw, 110px) clamp(24px, 6vw, 96px);
}

.book-promise {
    background: #f0ece1;
    color: #171512;
}

.book-promise .scroll-kicker,
.sample-pages .scroll-kicker,
.book-thanks-bridge .scroll-kicker,
.purchase-panel .scroll-kicker {
    color: var(--gold);
}

.book-promise h2,
.sample-pages h2,
.book-thanks-bridge h2,
.purchase-panel h2 {
    max-width: 980px;
    font-size: clamp(2.25rem, 5vw, 4.7rem);
    line-height: 1;
}

.promise-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 44px;
    background: rgba(23,21,18,0.18);
}

.promise-grid article {
    min-height: 230px;
    padding: clamp(24px, 3vw, 38px);
    background: #f8f4ea;
}

.promise-grid h3,
.theme-card h3 {
    font-size: clamp(1.45rem, 2.4vw, 2.2rem);
    line-height: 1.08;
    margin-bottom: 18px;
}

.promise-grid p,
.sample-pages p,
.purchase-panel p {
    color: rgba(23,21,18,0.72);
    font-size: 1.04rem;
    line-height: 1.75;
}

.book-themes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 12px solid #000;
    border-bottom: 12px solid #000;
}

.book-themes-opening {
    padding-top: var(--header-height);
    background: #000;
}

.theme-card {
    min-height: clamp(360px, 48vw, 560px);
    padding: clamp(24px, 4vw, 48px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 -260px 180px rgba(0,0,0,0.74), inset 0 0 0 1000px rgba(0,0,0,0.12);
}

.theme-card + .theme-card {
    border-left: 12px solid #000;
}

.theme-card span {
    margin-bottom: 14px;
    color: var(--gold);
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.book-quote {
    min-height: clamp(520px, 48vw, 760px);
    background-color: #050505;
}

.book-quote.bg-gorunur {
    background:
        linear-gradient(90deg, rgba(5,5,5,0.72) 0%, rgba(5,5,5,0.58) 42%, rgba(5,5,5,0.28) 72%, rgba(5,5,5,0.44) 100%),
        linear-gradient(180deg, rgba(5,5,5,0.1) 0%, rgba(5,5,5,0.34) 100%),
        url('images/Ayasofya kubbe yatay.jpg') center 72% / cover no-repeat;
}

.book-quote blockquote {
    max-width: 980px;
    font-family: 'Cardo', Georgia, serif;
    font-size: clamp(2.4rem, 5.2vw, 5.6rem);
    line-height: 1.03;
}

.book-quote p {
    max-width: 720px;
    margin-top: 28px;
    color: rgba(255,255,255,0.72);
    font-size: 1.06rem;
    line-height: 1.75;
}

.sample-pages {
    justify-content: space-between;
    background-color: #070706;
}

.sample-pages.bg-gorunur {
    background:
        linear-gradient(90deg, rgba(7,7,6,0.86) 0%, rgba(7,7,6,0.62) 50%, rgba(7,7,6,0.28) 100%),
        url('images/Ayasofya dikey kahveli.jpg') center 30% / cover no-repeat;
}

.sample-pages > div,
.purchase-panel > div {
    max-width: 820px;
}

/* Örnek sayfalar artık görselli koyu bir bant → paragraf açık renk olmalı (eskiden koyu=görünmezdi) */
.sample-pages p {
    color: rgba(255,255,255,0.82);
}

.book-thanks-bridge {
    background-color: #070706;
    border-top: 1px solid rgba(197,160,89,0.22);
    border-bottom: 1px solid rgba(197,160,89,0.22);
}

.book-thanks-bridge.bg-gorunur {
    background:
        linear-gradient(180deg, rgba(7,7,6,0.74) 0%, rgba(7,7,6,0.5) 100%),
        url('images/mozaik fon AYASOFYA_07c.jpg') center center / cover no-repeat;
}

.book-thanks-bridge h2 {
    margin-bottom: 30px;
}

.purchase-panel {
    justify-content: space-between;
    background: #efe8d8;
    color: #15130f;
}

/* --- KİTAP SAYFASI: "bölüm şeridi" akordeon (home akordeonundan ayrı) --- */
.book-accordion-lead {
    padding: calc(var(--header-height) + 54px) clamp(24px, 6vw, 96px) 28px;
    background: #070706;
    text-align: center;
}
.book-accordion-lead h2 {
    font-size: clamp(2.1rem, 4.4vw, 3.8rem);
    line-height: 1.04;
    margin: 8px 0 12px;
}
.book-accordion-lead p {
    max-width: 600px;
    margin: 0 auto;
    color: rgba(255,255,255,0.72);
    font-size: 1.05rem;
    line-height: 1.7;
}
.accordion-container.book-accordion {
    height: 64vh;
    min-height: 440px;
}
.book-accordion .panel-overlay {
    top: 0; left: 0; width: 100%;
    height: auto; min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0 1.8rem 1.7rem;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 42%, rgba(0,0,0,0.84) 100%);
    opacity: 1;
}
.book-accordion .panel-overlay::before { display: none; }
.book-accordion .panel-no {
    color: var(--gold);
    font-family: 'Cardo', Georgia, serif;
    font-size: clamp(1.5rem, 2.3vw, 2.3rem);
    line-height: 1;
}
.book-accordion .section-title {
    position: static;
    bottom: auto; left: auto;
    margin: 8px 0 0;
    padding-top: 9px;
    border-top: 2px solid var(--gold) !important;
    color: #fff;
    font-size: clamp(1.45rem, 2.3vw, 2.2rem);
    text-shadow: 0 2px 6px rgba(0,0,0,0.85);
}

/* --- KİTAP SAYFASI: hafif katman anlatısı ---
   Tek bir sticky sahne dört mevcut görsel arasında geçiş yapar; metin adımları
   doğal sayfa akışında kalır. Yeni medya veya animasyon kütüphanesi kullanılmaz. */
.book-layers {
    background: #070706;
    border-top: 12px solid #000;
    padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 76px) clamp(24px, 4vw, 52px);
}
.layers-lead {
    max-width: 1180px;
    margin: 0 auto clamp(30px, 4vw, 56px);
    text-align: center;
}
.layers-lead h2 {
    font-size: clamp(2.1rem, 4.4vw, 4rem);
    line-height: 1.04;
    margin-top: 8px;
}
.layer-story {
    width: min(100%, 1240px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.72fr);
    gap: clamp(34px, 5vw, 76px);
    position: relative;
}
.layer-stage {
    position: sticky;
    top: calc(var(--header-height) + 24px);
    align-self: start;
    height: calc(100vh - var(--header-height) - 48px);
    height: calc(100svh - var(--header-height) - 48px);
    min-height: 520px;
    overflow: hidden;
    border-radius: 3px;
    background: #111;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.58);
}
.layer-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0.04) 55%, rgba(0,0,0,0.58) 100%);
}
.layer-stage-media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.035);
    transition: opacity 700ms ease, transform 1400ms cubic-bezier(.2,.7,.2,1);
}
.layer-stage-media.is-active {
    opacity: 1;
    transform: scale(1);
}
.layer-stage-status {
    position: absolute;
    right: clamp(18px, 2.4vw, 34px);
    bottom: clamp(18px, 2.4vw, 30px);
    z-index: 3;
    display: flex;
    gap: 7px;
    align-items: baseline;
    color: rgba(255,255,255,0.62);
    font: 800 0.72rem/1 'Lato', 'SB Turkce Ek', sans-serif;
    letter-spacing: 0.14em;
}
.layer-stage-status [data-layer-current] {
    color: var(--gold);
    font: 400 clamp(2rem, 3.2vw, 3.2rem)/0.9 'Cardo', Georgia, serif;
    letter-spacing: 0;
}
.layer-step {
    min-height: 78svh;
    display: flex;
    align-items: center;
    scroll-margin-top: calc(var(--header-height) + 12vh);
}
.layer-text {
    width: 100%;
    padding: clamp(22px, 2.8vw, 34px);
    border-left: 2px solid rgba(197, 160, 89, 0.34);
    background: rgba(255,255,255,0.035);
    opacity: 0.48;
    transform: translateY(12px);
    transition: opacity 420ms ease, transform 520ms ease, border-color 420ms ease, background-color 420ms ease;
}
.layer-step.is-active .layer-text {
    opacity: 1;
    transform: none;
    border-color: var(--gold);
    background: rgba(255,255,255,0.065);
}
.layer-text .scroll-kicker { color: var(--gold); }
.layer-text h3 {
    font-size: clamp(1.7rem, 3vw, 2.7rem);
    line-height: 1.06;
    margin: 12px 0 18px;
}
.layer-text p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.08rem;
    line-height: 1.78;
}

/* Kitap sayfasında dört mimari durak ve derin-zoom, aynı sticky
   sahnenin tek zaman çizgisidir. İlk dört durakta görsel solda/metin sağda
   kalır; beşinci durak başlayınca mozaik aynı çerçevenin tamamına açılır. */
.book-layers--continuum {
    padding-inline: clamp(18px, 3vw, 48px);
    padding-bottom: clamp(34px, 5vw, 68px);
}
.book-layers--continuum .layer-story {
    --tunnel-progress: 0;
    --tunnel-view-opacity: 1;
    --tunnel-tessera-opacity: 0;
    --tunnel-tessera-scale: 0.65;
    --tunnel-tessera-turn: 0deg;
    width: min(100%, 1480px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}
.book-layers--continuum .layer-stage,
.book-layers--continuum .layer-steps {
    grid-area: 1 / 1;
}
.book-layers--continuum .layer-stage {
    width: 100%;
    background: #050505;
    transition: background-color 600ms ease;
}
.book-layers--continuum .layer-stage-media {
    right: auto;
    width: 64%;
}
.book-layers--continuum .layer-stage::after {
    background:
        linear-gradient(90deg, transparent 0 50%, rgba(0,0,0,0.18) 61%, rgba(0,0,0,0.82) 74%, #050505 100%),
        linear-gradient(180deg, rgba(0,0,0,0.02) 55%, rgba(0,0,0,0.58) 100%);
    transition: opacity 520ms ease;
}
.book-layers--continuum .layer-steps {
    position: relative;
    z-index: 4;
    width: 36%;
    margin-left: auto;
    padding: 0 clamp(18px, 2.4vw, 38px);
    transition: opacity 360ms ease;
}
.book-layers--continuum .layer-story.is-deesis-active .layer-steps {
    opacity: 0;
}
.book-layers--continuum .layer-step {
    min-height: calc(100svh - var(--header-height) - 48px);
}
.book-layers--continuum .layer-step--deesis {
    display: none;
    width: 1px;
    min-height: 520svh;
    margin-left: auto;
    padding: 0;
    pointer-events: none;
}
html.js .book-layers--continuum .layer-step--deesis {
    display: flex;
}
.layer-deesis-stage {
    position: absolute;
    inset: 0;
    z-index: 8;
    overflow: hidden;
    background: #080706;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.008);
    pointer-events: none;
    transition:
        opacity 700ms cubic-bezier(.2,.7,.2,1),
        transform 1100ms cubic-bezier(.2,.7,.2,1),
        visibility 0s linear 700ms;
}
.book-layers--continuum .layer-story.is-deesis-active .layer-deesis-stage {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}
.book-layers--continuum .layer-stage-status {
    transition: opacity 260ms ease;
}
.book-layers--continuum .layer-story.is-deesis-active .layer-stage-status {
    opacity: 0;
}
.book-layers--continuum .layer-deesis-stage .mosaic-tunnel-view {
    opacity: var(--tunnel-view-opacity);
}

/* Beliriş animasyonu KAPALI (26 Haz 2026): her bölüm kaydırırken aşağıdan yukarı
   "kayarak belirince" sayfa ayrı-ayrı-sayfa gibi hissettiriyor ve geçişlerde takılma
   yaratıyordu (ana sayfada reveal yok → orası pürüzsüz; /kitap'ta 6 reveal vardı).
   Kullanıcı bu hissi istemiyor → bölümler artık doğal/kesintisiz görünür. */
html.js .reveal {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .layer-stage-media,
    .layer-text {
        transition: none !important;
        transform: none !important;
    }
    html.js .reveal {
        transition: none !important;
        animation: none !important;
        opacity: 1; transform: none;
    }
}

/* --- KİTAP SAYFASI: GÖRÜNÜM SEÇİCİ VE METİN GÖRÜNÜMÜ (D11 / K8, 31 Ekim 2026) ---
   "Visual journey" ile "Read as text" gerçek bağlardır (aria-current="page");
   düz görünüm /book/?view=text sunucuda basılır, JavaScript gerekmez. Orada
   sabitleme, kaydırma durağı ve canlandırma yoktur; her bölüm görseli (küçük),
   açıklaması, metni ve kalıcı bağıyla alt alta akar. Renkler sayfanın kendi
   koyu zemini ve altını (sabit şeffaf başlık açık zeminde okunmazdı). */
.book-view-switch {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 22px auto 0;
}
.book-view-switch a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--sb-dokunma, 44px);
    padding: 0.55rem 1.15rem;
    border: 1px solid rgba(197, 160, 89, 0.6);
    border-radius: var(--sb-kose-cip, 999px);
    color: #fff;
    font-family: 'Lato', 'SB Turkce Ek', sans-serif;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.book-view-switch a:hover {
    border-color: #fff;
}
.book-view-switch a[aria-current="page"] {
    border-color: var(--gold);
    background: var(--gold);
    color: #070706;
}
/* Dar telefonda (320-374 px) iki bağ tek satıra sığsın: alt alta dizilince
   açılış 54 px uzuyordu. Yükseklik (44 px dokunma hedefi) değişmez. */
@media (max-width: 374px) {
    .book-view-switch {
        gap: 8px;
    }
    .book-view-switch a {
        padding-inline: 0.7rem;
        letter-spacing: 0.06em;
    }
}
/* Masaüstünde (1025 px ve üstü) seçici, başlığın üstündeki 54 px'lik boşluğa
   oturur ve açılışa yükseklik eklemez: akordeon ile bölüm adları ilk ekranda
   eski yerinde kalır (alt satırda durunca her şey 66 px aşağı iniyordu).
   Seçici 44 px; üstünde 2, altında 8 px pay kalır (toplam 54 px). Yazı büyütülüp
   seçici uzarsa üst boşluk da onunla büyür, seçici künye satırının üstüne binmez.
   Başlığın üstten koyulaşan gölgesi düğmenin üst kenarını hafifçe karartır.
   DOM sırası aynıdır; açılışta odaklanan tek öğe seçici olduğu için odak sırası
   (menü, seçici, akordeon) görünen sırayla örtüşür. Telefon ve tablet değişmez. */
@media screen and (min-width: 1025px) {
    .book-accordion-lead {
        position: relative;
        padding-top: max(
            calc(var(--header-height) + 54px),
            calc(var(--header-height) + 10px + max(var(--sb-dokunma, 44px), calc(0.76rem * 1.3 + 1.1rem + 2px)))
        );
    }
    .book-accordion-lead .book-view-switch {
        position: absolute;
        top: calc(var(--header-height) + 2px);
        right: clamp(24px, 6vw, 96px);
        left: clamp(24px, 6vw, 96px);
        margin: 0;
    }
}
/* Hareketi azalt seçiliyse metin görünümü ayrıca önerilir; değilse görünmez. */
.book-view-switch-hint {
    display: none;
}
@media (prefers-reduced-motion: reduce) {
    .book-accordion-lead .book-view-switch-hint {
        display: block;
        margin-top: 12px;
        font-size: 0.92rem;
    }
}
.book-text {
    background: #070706;
    border-top: 12px solid #000;
    padding: clamp(44px, 6vw, 88px) clamp(16px, 5vw, 76px) clamp(36px, 5vw, 72px);
}
.book-text-inner {
    width: min(100%, 1080px);
    margin: 0 auto;
}
.book-text-toc ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 24px;
    margin: 0 0 clamp(28px, 4vw, 52px);
    padding: 0;
    list-style: none;
}
.book-text-toc a {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(197, 160, 89, 0.35);
    color: rgba(245, 241, 232, 0.88);
    font-size: 0.98rem;
}
.book-text-toc a:hover {
    border-color: var(--gold);
    color: #fff;
}
.book-text-toc-no {
    color: var(--gold);
    font-family: 'Cardo', Georgia, serif;
}
.book-text-entry {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(20px, 3.4vw, 48px);
    align-items: start;
    padding: clamp(28px, 4vw, 48px) 0;
    border-top: 1px solid rgba(197, 160, 89, 0.22);
    scroll-margin-top: calc(var(--header-height) + 16px);
}
.book-text-body:only-child {
    grid-column: 1 / -1;
}
.book-text-figure {
    --book-text-max-h: 420px;
    margin: 0;
}
.book-text-figure picture {
    display: block;
}
/* Genişlik kendi oranından: sütunu, görselin kendi genişliğini ve en çok
   --book-text-max-h yüksekliği aşmaz (oranlar page-kitap.php'de basılır). */
.book-text-figure img {
    display: block;
    width: min(100%, var(--book-text-w, 100%), calc(var(--book-text-max-h) * var(--book-text-ratio, 1.5)));
    height: auto;
    border: 1px solid rgba(197, 160, 89, 0.28);
    background: #111;
}
.book-text-figure figcaption {
    margin-top: 10px;
    color: var(--sb-gri-koyu-zemin, rgba(245, 241, 232, 0.72));
    font-size: 0.88rem;
    line-height: 1.55;
}
.book-text-body .scroll-kicker {
    margin-bottom: 10px;
}
.book-text-body h3,
.book-text-body h4 {
    margin: 0 0 14px;
    font-size: clamp(1.55rem, 2.6vw, 2.25rem);
    line-height: 1.08;
}
.book-text-entry--deesis .book-text-body h4 {
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
}
.book-text-body p,
.book-text-group-lead p {
    max-width: 62ch;
    color: rgba(255, 255, 255, 0.84);
    font-size: 1.06rem;
    line-height: 1.75;
}
.book-text-permalink {
    display: inline-block;
    margin-top: 14px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(197, 160, 89, 0.4);
    color: var(--gold);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.book-text-permalink:hover {
    color: #fff;
}
.book-text-group {
    scroll-margin-top: calc(var(--header-height) + 16px);
}
.book-text-group-lead {
    padding: clamp(32px, 4.5vw, 56px) 0 clamp(8px, 1.5vw, 16px);
    border-top: 1px solid rgba(197, 160, 89, 0.5);
}
.book-text-group-lead h3 {
    margin: 0 0 14px;
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    line-height: 1.04;
}
@media (max-width: 760px) {
    .book-text-toc ol {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .book-text-entry {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .book-text-entry,
    .book-text-group {
        scroll-margin-top: calc(var(--header-height-mobile) + 12px);
    }
    .book-text-figure {
        --book-text-max-h: 360px;
    }
}

.thanks-page {
    min-height: 100vh;
    padding: calc(var(--header-height) + 76px) clamp(22px, 6vw, 96px) 88px;
    background:
        linear-gradient(90deg, rgba(5,5,5,0.84), rgba(5,5,5,0.58)),
        url('images/cornelius-loos-ayasofya-kubbe.jpg') center center / cover no-repeat;
    color: #fff;
}

.thanks-hero,
.thanks-content {
    width: min(100%, 820px);
}

.thanks-kicker {
    display: inline-block;
    margin-bottom: 16px;
    color: #c5a059;
    font-family: 'Lato', 'SB Turkce Ek', sans-serif;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.thanks-hero h1 {
    font-family: 'Cardo', Georgia, serif;
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 0.95;
    margin-bottom: 24px;
}

.thanks-hero p,
.thanks-content {
    color: rgba(255,255,255,0.84);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.8;
}

.thanks-content {
    margin-top: 42px;
    padding: clamp(22px, 3vw, 34px);
    border-left: 3px solid #c5a059;
    background: rgba(0,0,0,0.36);
    backdrop-filter: blur(4px);
}

.thanks-content p + p {
    margin-top: 1.1rem;
}

.thanks-photo-credit {
    margin-top: 1.8rem !important;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(197, 160, 89, 0.48);
    color: rgba(255,255,255,0.94);
    font-family: 'Cardo', Georgia, serif;
    font-size: clamp(1.08rem, 1.8vw, 1.34rem);
}

.thanks-photo-credit strong {
    color: #fff;
}

/* MOBİL (Dikey Hale Getir ama Sıkıştır) */
@media (max-width: 900px) {
    .book-compact-wrapper { flex-direction: column; height: auto; overflow-y: auto; padding-bottom: 40px; }
    .book-visual-side { padding: 40px 0; flex: none; }
    .compact-book-cover { max-height: 40vh; transform: rotateY(0); }
    .book-info-side { padding: 30px; text-align: center; }
    .compact-list { grid-template-columns: 1fr; text-align: left; }
    .compact-desc { border-left: none; padding-left: 0; }
    .compact-actions { justify-content: center; flex-wrap: wrap; }
    .thanks-page { padding-top: calc(var(--header-height-mobile) + 58px); }
    .thanks-hero h1 {
        font-size: clamp(1.95rem, 10vw, 3rem);
        overflow-wrap: anywhere;
    }
    .book-pilot-hero {
        min-height: auto;
        grid-template-columns: 1fr;
        padding: calc(var(--header-height-mobile) + 44px) 22px 62px;
        text-align: center;
    }
    .book-pilot-visual {
        width: min(78vw, 340px);
        justify-self: center;
    }
    .book-pilot-intro {
        justify-self: center;
    }
    .pilot-actions,
    .sample-pages,
    .purchase-panel {
        justify-content: center;
        text-align: center;
    }
    .promise-grid,
    .book-themes {
        grid-template-columns: 1fr;
    }
    .book-themes-opening {
        padding-top: var(--header-height-mobile);
    }
    .theme-card + .theme-card {
        border-left: 0;
        border-top: 8px solid #000;
    }
    .theme-card {
        min-height: 360px;
    }
    .book-promise,
    .book-quote,
    .sample-pages,
    .book-thanks-bridge,
    .purchase-panel {
        padding: 56px 22px;
    }
    .book-layers { padding: 48px 0 24px; }
    .layers-lead { padding-inline: 22px; }
    .layer-story { display: block; }
    .layer-stage {
        top: var(--header-height-mobile);
        height: 44vh;
        height: 44svh;
        min-height: 270px;
        border-radius: 0;
        box-shadow: 0 18px 48px rgba(0,0,0,0.58);
        z-index: 2;
    }
    .layer-steps { padding: 0 22px; }
    .layer-step {
        min-height: 62svh;
        scroll-margin-top: calc(var(--header-height-mobile) + 46svh);
    }
    .layer-text { max-width: none; }
    .book-layers--continuum {
        padding-inline: 0;
        padding-bottom: 0;
    }
    .book-layers--continuum .layer-story {
        display: grid;
    }
    .book-layers--continuum .layer-stage {
        top: var(--header-height-mobile);
        height: calc(100svh - var(--header-height-mobile));
        min-height: 430px;
    }
    .book-layers--continuum .layer-stage-media {
        width: 100%;
    }
    .book-layers--continuum .layer-stage::after {
        background:
            linear-gradient(180deg, transparent 0 34%, rgba(0,0,0,0.48) 55%, #050505 82%, #050505 100%);
    }
    .book-layers--continuum .layer-steps {
        width: 100%;
        padding: 0 22px;
    }
    .book-layers--continuum .layer-step {
        min-height: calc(100svh - var(--header-height-mobile));
        align-items: flex-end;
        padding-bottom: clamp(42px, 8svh, 76px);
    }
    .book-layers--continuum .layer-text {
        background: rgba(8,7,6,0.78);
        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);
    }
    .book-layers--continuum .layer-step--deesis {
        min-height: 440svh;
        padding: 0;
    }
    .remote-media-hero {
        padding: calc(var(--header-height-mobile) + 48px) 22px 38px;
    }
    .remote-media-list {
        gap: 26px;
        padding: 30px 22px 62px;
    }
    .remote-media-content {
        min-height: 160px;
    }
}

/* --- SİTE FOOTER (HUB'A DÖNÜŞ) --- */
.site-footer {
    background-color: #050505;
    border-top: 1px solid var(--gold);
    text-align: center;
    padding: 52px 24px 40px;
}
.footer-hub-link {
    display: inline-block;
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 13px 34px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
}
.footer-hub-link:hover {
    background-color: var(--gold);
    color: #000;
}
.footer-meta {
    margin-top: 20px;
    font-size: 0.85rem;
    line-height: 1.7; /* alt çizgili bağ alt satıra yapışmasın (22 Ekim 2026) */
    color: rgba(255, 255, 255, 0.65);
}
/* İletişim ve davet bağı (20 Ekim 2026; H3) yazar bağıyla aynı görünür.
   Bağlar çevre metinden yalnız renkle ayrılmasın diye hep alt çizgili (21 Ekim 2026, G16). */
.footer-meta .footer-author-link,
.footer-meta .footer-contact-link {
    color: var(--gold);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.footer-meta .footer-author-link:hover,
.footer-meta .footer-contact-link:hover {
    text-decoration-thickness: 2px;
}

/* Blog kart özeti (remote-media kartlarını yeniden kullanır) */
.remote-media-excerpt {
    margin-top: 8px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #5a5048;
}

/* Kayıt sayfanın dilinden farklıysa başlık yanındaki dil/altyazı etiketi. */
.remote-media-lang {
    color: var(--sb-gri, #6b6b6b);
    font-size: 0.82em;
    font-weight: 400;
    white-space: normal; /* uzun not ("Turkish, with English subtitles") kart kenarından taşmasın */
}

/* Medya tür filtresi sekmeleri */
.remote-media-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 0 auto 2rem;
    padding: 0 1rem;
}
/* Açık zeminde okunur çipler (18 Ekim 2026): beyaz zemin, koyu yazı; üzerine
   gelince ve klavye odağında koyu altın (#866827, beyaz üstünde 5,2:1). */
.remote-media-filter-link {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    border: 1px solid rgba(197,160,89,0.6);
    border-radius: 999px;
    background: #fff;
    color: #2b2b2b;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: all 0.25s ease;
}
.remote-media-filter-link:hover,
.remote-media-filter-link:focus-visible {
    border-color: #866827;
    color: #866827;
}
.remote-media-filter-link:focus-visible {
    outline: 2px solid #866827;
    outline-offset: 2px;
}
.remote-media-filter-link.active {
    background: var(--gold);
    border-color: var(--gold);
    color: #1a1a1a;
}

/* ============================================================
   DEËSIS KAYDIRMA TÜNELİ — beşinci durağın derin-zoom katmanları
   Eski bağımsız tünel kuralları geriye dönük/no-JS düzenini de korur.
   ============================================================ */
.mosaic-tunnel {
    --tunnel-progress: 0;
    --tunnel-view-opacity: 1;
    --tunnel-tessera-opacity: 0;
    --tunnel-tessera-scale: 0.65;
    --tunnel-tessera-turn: 0deg;
    position: relative;
    background: #030303;
    color: #fff;
}
html.js .mosaic-tunnel {
    height: 520vh;
    height: 520svh;
}
.mosaic-tunnel-stage {
    position: relative;
    min-height: 78vh;
    overflow: hidden;
    background: #080706;
}
html.js .mosaic-tunnel-stage {
    position: sticky;
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    height: calc(100svh - var(--header-height));
    min-height: 520px;
}
.mosaic-tunnel-view {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.32)),
        url('images/deesis-mozaik.jpg') center 20% / cover no-repeat;
    opacity: var(--tunnel-view-opacity);
    transition: opacity 120ms linear;
}
.deesis-osd {
    position: absolute;
    inset: -2%;
    width: 104%;
    height: 104%;
    background: #090806;
    pointer-events: none;
}
.deesis-osd:empty {
    background: transparent;
}
.mosaic-tunnel-error {
    position: absolute;
    inset: 50% auto auto 50%;
    width: min(420px, calc(100% - 44px));
    margin: 0;
    color: rgba(255,255,255,0.78);
    text-align: center;
    transform: translate(-50%, -50%);
}
.deesis-osd .openseadragon-canvas {
    pointer-events: none !important;
    touch-action: pan-y !important;
}
.mosaic-tunnel-vignette {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 45%, transparent 24%, rgba(0,0,0,0.08) 55%, rgba(0,0,0,0.72) 112%),
        linear-gradient(180deg, rgba(0,0,0,0.13) 0%, transparent 24%, transparent 62%, rgba(0,0,0,0.72) 100%);
}
.mosaic-tunnel-tessera-field {
    position: absolute;
    inset: -34%;
    z-index: 2;
    pointer-events: none;
    opacity: var(--tunnel-tessera-opacity);
    transform: scale(var(--tunnel-tessera-scale)) rotate(var(--tunnel-tessera-turn));
    transform-origin: 50% 47%;
    background:
        repeating-linear-gradient(90deg, transparent 0 42px, rgba(3,3,3,0.82) 43px 47px),
        repeating-linear-gradient(0deg, transparent 0 42px, rgba(3,3,3,0.82) 43px 47px),
        radial-gradient(circle at 50% 47%, #d8bc6d 0%, #9e7135 24%, #394157 52%, #10131c 78%);
    -webkit-mask-image: radial-gradient(circle at 50% 47%, transparent 0 7%, rgba(0,0,0,0.35) 22%, #000 44%);
    mask-image: radial-gradient(circle at 50% 47%, transparent 0 7%, rgba(0,0,0,0.35) 22%, #000 44%);
    transition: opacity 100ms linear;
}
.mosaic-tunnel-copy {
    position: absolute;
    left: clamp(24px, 6vw, 92px);
    bottom: clamp(54px, 9vh, 104px);
    z-index: 5;
    width: min(620px, calc(100% - 150px));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
}
/* Duraklar kendi izgara yiginlarinda ust uste biner; kutunun yuksekligi EN UZUN
   duraga gore olusur. Boylece baslik ekranla buyudugunde eyebrow'un uzerine
   tasmaz (sabit min-height ile yasanan cakisma). Yalniz JS varken yiginlanir;
   JS yoksa duraklar alt alta akar ve hepsi okunur kalir. */
html.js .mosaic-tunnel-phases {
    display: grid;
    align-items: end;
}
html.js .mosaic-tunnel-phases > .mosaic-tunnel-phase {
    grid-area: 1 / 1;
}
.mosaic-tunnel-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--gold);
    font-family: 'Lato', 'SB Turkce Ek', sans-serif;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.mosaic-tunnel-phase {
    max-width: 590px;
}
html.js .mosaic-tunnel-phase {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 420ms ease, transform 520ms cubic-bezier(.2,.7,.2,1);
}
html.js .mosaic-tunnel-phase.is-active {
    opacity: 1;
    transform: none;
}
.mosaic-tunnel-count {
    color: rgba(255,255,255,0.58);
    font: 800 0.7rem/1 'Lato', 'SB Turkce Ek', sans-serif;
    letter-spacing: 0.14em;
}
.mosaic-tunnel-phase h2 {
    margin: 10px 0 12px;
    color: #fff;
    font-size: clamp(2.7rem, 7vw, 6.6rem);
    line-height: 0.9;
    text-shadow: 0 3px 22px rgba(0,0,0,0.6);
}
.mosaic-tunnel-phase p {
    max-width: 560px;
    margin: 0;
    color: rgba(255,255,255,0.82);
    font-size: clamp(0.98rem, 1.45vw, 1.14rem);
    line-height: 1.64;
    text-shadow: 0 2px 12px rgba(0,0,0,0.85);
}
.mosaic-tunnel-index {
    position: absolute;
    top: 50%;
    right: clamp(22px, 3.4vw, 54px);
    z-index: 6;
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    transform: translateY(-50%);
}
.mosaic-tunnel-index li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 18px;
    color: rgba(255,255,255,0.42);
    font: 800 0.64rem/1 'Lato', 'SB Turkce Ek', sans-serif;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    transition: color 260ms ease;
}
.mosaic-tunnel-index li::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: 12px;
    border: 1px solid rgba(255,255,255,0.54);
    border-radius: 50%;
    transition: background 260ms ease, border-color 260ms ease, transform 260ms ease;
}
.mosaic-tunnel-index li.is-active {
    color: #fff;
}
.mosaic-tunnel-index li.is-active::after {
    border-color: var(--gold);
    background: var(--gold);
    transform: scale(1.45);
}
.mosaic-tunnel-progress {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 7;
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.12);
}
.mosaic-tunnel-progress span {
    display: block;
    width: calc(var(--tunnel-progress) * 100%);
    height: 100%;
    transform-origin: left center;
    background: var(--gold);
}
.mosaic-tunnel-instruction {
    position: absolute;
    left: 50%;
    bottom: 24px;
    z-index: 6;
    margin: 0;
    color: rgba(255,255,255,0.74);
    font: 800 0.66rem/1 'Lato', 'SB Turkce Ek', sans-serif;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transform: translateX(-50%);
    opacity: 1;
}
.mosaic-tunnel-instruction span {
    display: inline-block;
    margin-left: 8px;
    color: var(--gold);
    animation: mosaic-tunnel-nudge 1.4s ease-in-out infinite;
}
.mosaic-tunnel-skip {
    position: absolute;
    top: 14px;
    left: -9999px;
    z-index: 10;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--gold);
    border-radius: 999px;
    background: rgba(0,0,0,0.86);
    color: #fff;
    font-size: 0.78rem;
    text-decoration: none;
}
.mosaic-tunnel-skip:focus {
    left: 16px;
}
.mosaic-tunnel-fallback {
    margin: 0;
    padding: 32px;
    text-align: center;
}
.mosaic-tunnel-fallback img {
    width: min(100%, 960px);
    height: auto;
}
.mosaic-tunnel-fallback figcaption {
    margin-top: 12px;
    color: rgba(255,255,255,0.72);
}
@keyframes mosaic-tunnel-nudge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}
@media (max-width: 768px) {
    html.js .mosaic-tunnel {
        height: 440vh;
        height: 440svh;
    }
    html.js .mosaic-tunnel-stage {
        top: var(--header-height-mobile);
        height: calc(100vh - var(--header-height-mobile));
        height: calc(100svh - var(--header-height-mobile));
        min-height: 430px;
    }
    .mosaic-tunnel-copy {
        left: 22px;
        bottom: 72px;
        width: calc(100% - 44px);
        padding-right: 0;
    }
    .mosaic-tunnel-phase h2 {
        font-size: clamp(2.65rem, 15vw, 4.5rem);
    }
    .mosaic-tunnel-phase p {
        font-size: 0.95rem;
        line-height: 1.56;
    }
    .mosaic-tunnel-index {
        top: auto;
        right: 22px;
        bottom: 28px;
        left: 22px;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        transform: none;
    }
    .mosaic-tunnel-index li {
        justify-content: center;
        font-size: 0;
    }
    .mosaic-tunnel-index li::after {
        width: 6px;
        height: 6px;
        margin: 0;
    }
    .mosaic-tunnel-instruction {
        top: 22px;
        bottom: auto;
        white-space: nowrap;
    }
    .mosaic-tunnel-tessera-field {
        inset: -18%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .mosaic-tunnel-phase,
    .mosaic-tunnel-view,
    .mosaic-tunnel-tessera-field,
    .mosaic-tunnel-index li,
    .mosaic-tunnel-index li::after {
        transition: none !important;
        transform: none !important;
    }
    .mosaic-tunnel-instruction span {
        animation: none !important;
    }
}
/* --- KİTAP SAYFASI: YAZDIRMA (D11, 31 Ekim 2026) ---
   /book/ kâğıda basılınca Deësis'in dört evre metni hiç çıkmıyordu (sabit
   sahne, opaklık 0) ve kaydırma durakları boş sayfa üretiyordu (A4'te 13
   sayfa). Kâğıtta sabitleme, kaydırma durağı, derin-zoom ve arka plan görseli
   yoktur: dört bölüm, ardından Deësis'in dört evresi düz akar. Metin rengini
   ortak duzeltmeler.css siyaha çevirir. Ekranda hiçbir şey değişmez. */
@media print {
    .book-pilot-page *,
    .book-pilot-page *::before,
    .book-pilot-page *::after {
        animation: none !important;
        transition: none !important;
    }
    .book-pilot-page,
    .book-pilot-page > header,
    .book-pilot-page > section,
    .book-pilot-page .layer-text {
        background-image: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .book-pilot-page .book-accordion,
    .book-pilot-page .book-view-switch,
    .book-pilot-page .book-view-switch-hint,
    .book-pilot-page .book-text-toc,
    .book-pilot-page .book-text-permalink,
    .book-pilot-page .layer-stage-media,
    .book-pilot-page .layer-stage-status,
    .book-pilot-page .layer-step--deesis,
    .book-pilot-page .mosaic-tunnel-view,
    .book-pilot-page .mosaic-tunnel-index,
    .book-pilot-page .mosaic-tunnel-progress,
    .book-pilot-page .mosaic-tunnel-instruction,
    .book-pilot-page .mosaic-tunnel-skip {
        display: none !important;
    }
    .book-pilot-page .book-accordion-lead,
    .book-pilot-page .book-layers,
    .book-pilot-page .book-text,
    .book-pilot-page .book-promise,
    .book-pilot-page .book-quote,
    .book-pilot-page .sample-pages,
    .book-pilot-page .book-thanks-bridge,
    .book-pilot-page .purchase-panel {
        min-height: 0 !important;
        padding: 12pt 0 !important;
        border: 0 !important;
    }
    .book-pilot-page .book-accordion-lead {
        padding-top: 0 !important;
    }
    /* Sabit sahne ile durak çizelgesi düz akışa açılır; DOM'da sahne (Deësis)
       önce geldiği için sıra çevrilir: önce dört bölüm, sonra beşinci durak. */
    .book-pilot-page .layer-story {
        display: flex !important;
        flex-direction: column !important;
        width: auto !important;
        gap: 0 !important;
    }
    .book-pilot-page .layer-steps {
        order: 1;
    }
    .book-pilot-page .layer-stage {
        order: 2;
    }
    .book-pilot-page .layer-stage,
    .book-pilot-page .layer-steps,
    .book-pilot-page .layer-step,
    .book-pilot-page .layer-deesis-stage,
    .book-pilot-page .mosaic-tunnel-copy,
    html.js .book-pilot-page .mosaic-tunnel-phases {
        position: static !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    .book-pilot-page .layer-stage::after {
        content: none !important;
    }
    .book-pilot-page .layer-text,
    html.js .book-pilot-page .mosaic-tunnel-phase {
        max-width: none !important;
        margin: 0 0 12pt !important;
        padding: 0 0 0 10pt !important;
        border-left: 2px solid #999 !important;
        opacity: 1 !important;
        transform: none !important;
        break-inside: avoid;
    }
    .book-pilot-page .mosaic-tunnel-eyebrow {
        margin: 6pt 0 8pt !important;
    }
    .book-pilot-page h2 {
        font-size: 20pt !important;
        line-height: 1.15 !important;
    }
    .book-pilot-page h3,
    .book-pilot-page h4,
    .book-pilot-page .mosaic-tunnel-phase h2 {
        margin: 4pt 0 6pt !important;
        font-size: 14pt !important;
        line-height: 1.2 !important;
    }
    .book-pilot-page p {
        font-size: 10.5pt !important;
        line-height: 1.5 !important;
    }
    .book-pilot-page .promise-grid {
        display: block !important;
        margin-top: 8pt !important;
    }
    .book-pilot-page .promise-grid article {
        min-height: 0 !important;
        padding: 4pt 0 !important;
    }
    /* Metin görünümü: görsel küçük ve metnin yanında; kayıt sayfada bölünmez. */
    .book-pilot-page .book-text-entry {
        grid-template-columns: 34% minmax(0, 1fr) !important;
        gap: 12pt !important;
        padding: 10pt 0 !important;
        border-top: 1px solid #bbb !important;
        break-inside: avoid;
    }
    .book-pilot-page .book-text-figure {
        --book-text-max-h: 6cm;
    }
    .book-pilot-page .book-text-figure img {
        border-color: #bbb !important;
    }
    .book-pilot-page .book-text-group-lead {
        padding: 12pt 0 4pt !important;
        border-top: 1px solid #999 !important;
    }
}

/* Erişilebilirlik: "İçeriğe geç" atlama bağlantısı — yalnız klavye odağında görünür. */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:100000;}
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;padding:.6rem 1rem;background:#003366;color:#f5f1e8;border:2px solid #d1ad60;border-radius:4px;text-decoration:none;font-weight:700;}

/* Klavye erişilebilirliği: yalnız klavye odağında görünür altın odak halkası */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--gold, #c5a059);
    outline-offset: 2px;
}

/* Modern tarayıcılarda sayfalar arası yumuşak çapraz-geçiş; desteklemeyen
   tarayıcılar ve hareket azaltma tercihi olan kullanıcılar etkilenmez. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

/* --- 404 SAYFASI --- */
.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--header-height) + 70px) clamp(22px, 6vw, 80px) 70px;
    background: #050505;
    text-align: center;
}
.error-hero { width: min(100%, 640px); margin: 0 auto; }
.error-hero h1 {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    line-height: 1.05;
    margin-bottom: 0.5em;
}
.error-hero p {
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.7;
    margin-bottom: 2.4rem;
}
.error-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.error-link {
    display: block;
    padding: 1.1rem 1rem;
    border: 1px solid rgba(197, 160, 89, 0.35);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.02);
    transition: 0.3s ease;
}
.error-link:hover {
    border-color: var(--gold);
    background: rgba(197, 160, 89, 0.08);
}
.error-link-label {
    font-family: 'Cardo', Georgia, serif;
    font-size: 1.05rem;
}
@media (max-width: 640px) {
    .error-page { padding: calc(var(--header-height-mobile) + 48px) 22px 60px; }
    .error-links { grid-template-columns: 1fr; }
}

/* =========================================================================
   DOKUNMA HEDEFI GENISLETMESI (WCAG 2.2 SC 2.5.8 — en az 24x24 piksel)
   Basliktaki dil secici (15-18 piksel punto, dolgusuz), ana menu baglantilari
   ve sosyal ikonlarin tiklama kutusu bu olcunun altinda kaliyordu.
   Gorunmez bir ::after katmani hedefi buyutur; display, yerlesim ve mobil
   menudeki mevcut genis dolgular DEGISMEZ. Mobil menude baglantilar zaten
   1.2rem dolguya sahip oldugu icin orada bu katman etkisiz kalir.
   ========================================================================= */
.lang-switch a,
.social-icons-row a,
.main-nav a {
    position: relative;
}
.lang-switch a::after,
.social-icons-row a::after,
.main-nav a::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 24px);
    height: max(100%, 24px);
    transform: translate(-50%, -50%);
}

/* =========================================================================
   PANEL ZEMIN TONLARI — gorsel inene kadar gorunen renk
   Akordeon panelleri ve medya hucreleri arka planlarini CSS background-image
   ile alir. Bunlar tarayici tarafindan GEC kesfedilir (once stil dosyasi inmeli,
   sonra yerlesim hesaplanmali); loading/fetchpriority nitelikleri de bunlara
   uygulanamaz. Kurallarda kendi background-color'lari olmadigi icin gorsel
   gelene kadar konteynerin siyahi goruluyordu: "yuklenmedi" hali bos degil
   BOZUK gorunuyordu. Asagidaki tonlar her gorselin kendi ortalama renginden
   hesaplandi; panel artik once dogru tonda bir zemin, sonra gorsel gosterir.
   ========================================================================= */
.panel.book-panel   { background-color: #3e3c3d; }
.panel.author-panel { background-color: #575958; }
.panel.blog-panel   { background-color: #7f7668; }
.panel.media-panel  { background-color: #2b2622; }
.media-cell         { background-color: #504430; }

/* 19 Ekim 2026 (H4): AVIF için <picture>; kutu davranışı img'de kalır. */
.showcase-book picture { display: contents; }

/* TS-5 (19 Ekim 2026): telefonda künye dört satıra bölünüyordu (başlık ve alt
   başlık ayrı ayrı kırılıyordu). Artık ikisi de bütün kalır; sığmazsa alt
   başlık ikinci satıra iner. */
@media screen and (max-width: 768px) {
    .site-brand { flex-wrap: wrap; row-gap: 3px; }
    .site-brand .brand-main,
    .site-brand .brand-sub { white-space: nowrap; }
}


/* Uydu kart ızgarası hub ile aynı kırılımda (22 Ekim 2026): 1001 px ve
   üstünde üç, 721-1000 px iki, 720 px ve altında tek sütun. */
@media screen and (max-width: 1000px) {
    .remote-media-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 720px) {
    .remote-media-list {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   HAREKET DİLİ (10 Kasım 2026; Sedat onayladı) - ana sitenin 5.279'daki dilinin bu
   siteye uyarlaması: ilk ekranın yazıları sırayla belirir; telefon menüsü
   bugün kayarak açılıyor ama kapanırken o anda kayboluyordu, artık kapanırken
   de kayarak çekilir. Yalnız CSS, yeni betik yok. Beliriş bittiğinde öğe kendi
   bugünkü hâline döner (yalnız başlangıç karesi tanımlı, "backwards").
   Hareketi azaltma tercihinde hiçbiri çalışmaz. Ölçek ortak/belirtecler.css
   sürüm 2'de (--sb-sure-*, --sb-egri-*, --sb-mesafe, --sb-kademe, --sb-bulanik).
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
    @keyframes sb-belir {
        from { opacity: 0; translate: 0 var(--sb-mesafe); filter: blur(var(--sb-bulanik)); }
    }
    /* İlk ekran: dört panelin başlıkları soldan sağa, ardından medya hücreleri. */
    .accordion-container > .panel > .panel-overlay,
    .media-grid > .media-cell > .cell-overlay {
        animation: sb-belir var(--sb-sure-yavas) var(--sb-egri-yumusak) backwards;
    }

    .accordion-container > .panel:nth-child(2) > .panel-overlay { animation-delay: calc(var(--sb-kademe) * 1); }
    .accordion-container > .panel:nth-child(3) > .panel-overlay { animation-delay: calc(var(--sb-kademe) * 2); }
    .accordion-container > .panel:nth-child(4) > .panel-overlay { animation-delay: calc(var(--sb-kademe) * 3); }
    .media-grid > .media-cell:nth-child(1) > .cell-overlay { animation-delay: calc(var(--sb-kademe) * 4); }
    .media-grid > .media-cell:nth-child(2) > .cell-overlay { animation-delay: calc(var(--sb-kademe) * 5); }
    .media-grid > .media-cell:nth-child(3) > .cell-overlay { animation-delay: calc(var(--sb-kademe) * 6); }
    .media-grid > .media-cell:nth-child(4) > .cell-overlay { animation-delay: calc(var(--sb-kademe) * 7); }
}

/* Telefon menüsü: açılış 320 ms, kapanış 200 ms, ikisi de aynı yumuşak eğriyle. */
@media screen and (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .main-nav {
        transition:
            right var(--sb-sure-hizli) var(--sb-egri-yumusak),
            visibility 0s linear var(--sb-sure-hizli);
    }

    .main-nav.nav-active {
        transition:
            right var(--sb-sure-orta) var(--sb-egri-yumusak),
            visibility 0s linear 0s;
    }
}

@media screen and (max-width: 1024px) and (prefers-reduced-motion: reduce) {
    .main-nav {
        transition: none;
    }
}