@charset "UTF-8";
/**
 * RGN Soft - Kurumsal Premium CSS Mimari (css/style.css)
 * Fikirden Yazılıma - www.rgnsoft.com
 * %100 Bağımsız, Yerel ve Tescilli Tasarım Standartları.
 * Dış sunucu (CDN), harici font veya kütüphane bağımlılığı içermez.
 * * Özellikler: GPU İvmeli Render, E-Kitap (Kindle) Sayfalaması, Dinamik Tema,
 * * 3D Yörüngesel Karusel, Katmanlı Z-Index Hiyerarşisi, Resim Boyutlandırma (Drag).
 */

/* ==========================================================================
   1. DİNAMİK TASARIM DEĞİŞKENLERİ VE TEMALAR
   ========================================================================== */
:root {
    /* GÜNDÜZ / MÜZE TEMASI (VARSAYILAN - LIGHT MODE) */
    /* DİKKAT: Bu değişkenler veritabanından gelen FSE ayarlarıyla dinamik olarak ezilir. */
    --bg-matte-black: #f8f5f0;       /* Ferah Kum / Fildişi Krem */
    --bg-card-dark: #ffffff;         /* Saf Beyaz Panel / Kağıt Hissi */
    --border-gold: #c2a878;          /* Antik Altın / Eskitilmiş Pirinç */
    --gold-bright: #b8905b;          /* Kurumsal Bronz Altın */
    --gold-dark: #8a6f27;            /* Gölgeli Altın */
    --text-pure: #1a1a1a;            /* Derin Antrasit / Mürekkep Siyahı */
    --text-dim: #6b6b6b;             /* Kurumsal Gri (Göz yormayan) */
    --error-red: #d9381e;            /* Mühür Kırmızısı */
    --success-green: #2e7d32;        /* Botanik Yeşili */
    --edit-blue: #1976d2;            /* Yönetim Mavisi */

    --header-bg: rgba(248, 245, 240, 0.96);
    --input-bg: #ffffff;
    --input-border: rgba(194, 168, 120, 0.4);
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    --scrollbar-bg: #eaddc5;
    --scrollbar-thumb: #b8905b;

    color-scheme: light;

    /* Yazı Tipleri (Telif riskini önlemek için yerel sistem fontları) */
    --font-tech: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-story: Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: "Consolas", "Courier New", monospace;

    /* Yumuşak Geçiş Süreleri (GPU İvmeli) */
    --transition-fast: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

    /* Sinematik Ekran Kısıtlaması */
    --max-screen-width: 1400px;
}

/* GECE / UZAY TEMASI (MİTOLOJİ SEKMESİNDE JS İLE AKTİF OLUR) */
body.theme-space {
    --bg-matte-black: #0b132b;       /* Derin Uzay Laciverti */
    --bg-card-dark: #1c2541;         /* Fütüristik Uzay İstasyonu Paneli */
    --border-gold: #3a506b;          /* Yıldız Tozu Gümüşü */
    --gold-bright: #00d4ff;          /* Neon Hologram Mavisi (Cyan) */
    --gold-dark: #0088cc;            /* Koyu Neon Mavi */
    --text-pure: #ffffff;            /* Yıldız Beyazı */
    --text-dim: #949cae;             /* Bulutsu Gri */

    --header-bg: rgba(11, 19, 43, 0.96);
    --input-bg: #050a18;
    --input-border: rgba(0, 212, 255, 0.3);
    --card-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
    --scrollbar-bg: #0b132b;
    --scrollbar-thumb: #3a506b;

    color-scheme: dark;
}

/* ==========================================================================
   2. TEMEL SIFIRLAMALAR VE GÖVDE STİLLERİ
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
}

html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    max-width: 100vw; /* MÜHENDİSLİK DETAYI: Yatay taşma ve beyaz boşluk zırhı */
    overflow-x: hidden;
}

/* Özel Scrollbar (Kaydırma Çubuğu) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-bg); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; border: 2px solid var(--scrollbar-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-bright); }

body {
    background-color: var(--bg-matte-black);
    color: var(--text-pure);
    font-family: var(--font-tech);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    max-width: 100vw; /* MÜHENDİSLİK DETAYI: Yatay taşma zırhı */
    overflow-x: hidden;
    position: relative;
    transition: background-color 0.8s ease, color 0.8s ease;
}

/* UZAY TEMASI BULUT EFEKTİ */
body.theme-space {
    background-image:
        radial-gradient(circle at 15% 50%, rgba(0, 212, 255, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 85% 30%, rgba(138, 43, 226, 0.05) 0%, transparent 40%);
    background-attachment: fixed;
}

img {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    max-width: 100%;
    height: auto;
}

/* Metin Taşma (Overflow) Zırhı */
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

::selection {
    background-color: var(--border-gold);
    color: var(--bg-matte-black);
}

/* ==========================================================================
   3. FORMLAR, A11Y ERİŞİLEBİLİRLİK VE AUTOFILL ZIRHI
   ========================================================================== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
    -webkit-text-fill-color: var(--text-pure) !important;
    transition: background-color 5000s ease-in-out 0s;
}

:focus-visible {
    outline: 2px dashed var(--gold-bright);
    outline-offset: 4px;
    border-radius: 2px;
}

/* ==========================================================================
   4. KURUMSAL DEVRE KARTI SVG ARKA PLAN DESENLERİ
   ========================================================================== */
.circuit-bg {
    position: absolute;
    width: 320px;
    height: 320px;
    opacity: 0.15;
    pointer-events: none;
    z-index: 1;
    transition: opacity var(--transition-slow);
}
.circuit-top-left { top: 0; left: 0; }
.circuit-bottom-right { bottom: 0; right: 0; transform: rotate(180deg); }

/* Tema Değişiminde Logo Uyumu */
body:not(.theme-space) .logo-image { filter: invert(1) hue-rotate(180deg) brightness(0.2); transition: filter 0.8s ease; }
body.theme-space .logo-image { filter: none; transition: filter 0.8s ease; }

.gold-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(194, 168, 120, 0.06) 0%, rgba(0,0,0,0) 70%);
    pointer-events: none;
    z-index: 0;
}
body.theme-space .gold-glow { display: none; }

/* ==========================================================================
   5. HEADER VE NAVİGASYON PANELİ (Z-INDEX: 100)
   ========================================================================== */
header {
    border-bottom: 1px solid rgba(194, 168, 120, 0.2);
    background-color: var(--header-bg);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background-color 0.8s ease, border-color 0.8s ease;
}

.header-wrap {
    max-width: var(--max-screen-width);
    margin: 0 auto;
    padding: 0 24px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand { display: flex; align-items: center; text-decoration: none; cursor: pointer; height: 100%; }
.logo-image { height: 48px; width: auto; display: block; filter: drop-shadow(0 2px 10px rgba(194, 168, 120, 0.15)); }
.brand:hover .logo-image { transform: scale(1.02); }
.logo-fallback { height: 48px; width: auto; }

nav { display: flex; gap: 32px; align-items: center; }

.nav-btn {
    background: none; border: none; color: var(--text-dim); font-size: 11px;
    font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer; transition: color var(--transition-fast);
    position: relative; padding: 8px 0; user-select: none;
}
.nav-btn::after {
    content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px;
    background-color: var(--border-gold); transition: width var(--transition-fast); transform: translateX(-50%);
}
.nav-btn:hover { color: var(--text-pure); }
.nav-btn:hover::after, .nav-btn.active::after { width: 100%; }
.nav-btn.active { color: var(--border-gold); }

.nav-btn-special {
    font-family: var(--font-story); text-transform: none; font-size: 15px; font-style: italic; letter-spacing: 0;
}

/* ==========================================================================
   6. ANA GÖVDE VE SPA GÖRÜNÜM GEÇİŞLERİ
   ========================================================================== */
main { flex-grow: 1; position: relative; z-index: 10; width: 100%; }

.view-section {
    max-width: var(--max-screen-width);
    margin: 0 auto;
    padding: 80px 24px;
    animation: sectionEnter var(--transition-slow) forwards;
}

@keyframes sectionEnter {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.hidden { display: none !important; }

.fallback-warn {
    color: var(--text-dim); font-size: 13px; border: 1px dashed rgba(194, 168, 120, 0.4);
    padding: 24px; text-align: center; border-radius: 3px; text-transform: uppercase;
    letter-spacing: 2px; background-color: rgba(194, 168, 120, 0.05);
}

/* ==========================================================================
   7. GİRİŞ SAYFASI (HERO) TASARIMI
   ========================================================================== */
.hero-container { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 0 80px 0; position: relative; }
.hero-divider { width: 100%; max-width: 500px; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--border-gold) 50%, transparent 100%); position: relative; margin-top: 10px; margin-bottom: 24px; }
.hero-divider::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4px; height: 4px; background-color: var(--bg-card-dark); border: 2px solid var(--gold-bright); border-radius: 50%; box-shadow: 0 0 10px 3px rgba(194, 168, 120, 0.4); }
.hero-slogan { font-size: 13px; font-weight: 700; letter-spacing: 8px; color: var(--border-gold); text-transform: uppercase; margin-bottom: 40px; }
.hero-pitch { max-width: 680px; font-size: 16px; color: var(--text-dim); font-weight: 400; line-height: 1.8; margin-bottom: 48px; text-align: center; }

/* ==========================================================================
   8. YATAY KAYDIRMALI VİTRİN (HERO SLIDER) MOTORU
   ========================================================================== */
.hero-slider-wrapper { position: relative; width: 100%; margin-top: 20px; margin-bottom: 60px; }
.hero-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 24px; padding-bottom: 20px; scrollbar-width: none; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.hero-slider::-webkit-scrollbar { display: none; }
.hero-slide { flex: 0 0 100%; scroll-snap-align: center; border-radius: 4px; overflow: hidden; position: relative; aspect-ratio: 16 / 7; background-color: var(--bg-card-dark); border: 1px solid rgba(194, 168, 120, 0.3); cursor: pointer; box-shadow: var(--card-shadow); }

@media (min-width: 768px) { 
    .hero-slider { padding-left: 7.5%; padding-right: 7.5%; } 
    .hero-slide { flex: 0 0 85%; aspect-ratio: 16 / 6; } 
}

.hero-slide-bg { width: 100%; height: 100%; background-size: cover; background-position: center; background-color: var(--bg-matte-black); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.hero-slide:hover .hero-slide-bg { transform: scale(1.03); }
.hero-slide-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 80%; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.5) 50%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 40px 30px; }
.hero-slide-meta { font-family: var(--font-mono); font-size: 11px; color: var(--gold-bright); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.hero-slide-title { font-size: 32px; color: #fff; margin: 0; font-family: var(--font-story); font-style: italic; line-height: 1.2; }

.slider-nav-btn {
    position: absolute; top: calc(50% - 10px); transform: translateY(-50%); width: 44px; height: 44px;
    border-radius: 50%; background: rgba(255,255,255,0.9); border: 1px solid var(--border-gold);
    color: var(--text-pure); font-size: 18px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 10; transition: all var(--transition-fast); box-shadow: 0 4px 10px rgba(0,0,0,0.1); user-select: none;
}
body.theme-space .slider-nav-btn { background: rgba(0,0,0,0.6); color: var(--gold-bright); }
.slider-nav-btn:hover { background: var(--border-gold); color: #fff; transform: translateY(-50%) scale(1.1); }
.slider-nav-left { left: 15px; }
.slider-nav-right { right: 15px; }

/* ==========================================================================
   9. PRESTİJLİ KURUMSAL BUTONLAR VE İKONLAR
   ========================================================================== */
.btn-gold-filled {
    background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold-dark) 100%); color: #ffffff; border: none;
    padding: 16px 36px; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
    border-radius: 2px; cursor: pointer; transition: all var(--transition-fast); box-shadow: 0 4px 20px rgba(194, 168, 120, 0.3);
    display: inline-flex; align-items: center; justify-content: center; text-align: center; user-select: none;
}
.btn-gold-filled:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(194, 168, 120, 0.5); filter: brightness(1.08); }
.btn-gold-filled:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-gold-outline {
    background: transparent; color: var(--text-pure); border: 1px solid var(--border-gold); padding: 16px 36px; font-size: 11px;
    font-weight: 700; letter-spacing: 3px; text-transform: uppercase; border-radius: 2px; cursor: pointer;
    transition: all var(--transition-fast); display: inline-flex; align-items: center; justify-content: center; text-align: center; user-select: none;
}
.btn-gold-outline:hover { background-color: var(--gold-bright); border-color: var(--gold-bright); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(194, 168, 120, 0.2); }

/* ==========================================================================
   10. UYGULAMALAR (MASAÜSTÜ ÜRÜN PORTFÖYÜ) GRID SİSTEMİ
   ========================================================================== */
.apps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }

.app-card {
    background-color: var(--bg-card-dark); border: 1px solid rgba(194, 168, 120, 0.2); padding: 40px; position: relative;
    border-radius: 4px; transition: all var(--transition-smooth); display: flex; flex-direction: column; justify-content: space-between;
    overflow: hidden; box-shadow: var(--card-shadow);
}
.app-card::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 3px; background: linear-gradient(90deg, var(--gold-bright), transparent); transition: width var(--transition-smooth); }
.app-card:hover { transform: translateY(-5px); border-color: rgba(194, 168, 120, 0.5); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
body.theme-space .app-card:hover { box-shadow: 0 20px 50px rgba(0, 212, 255, 0.1); }
.app-card:hover::before { width: 100%; }

.app-category { font-size: 9px; letter-spacing: 2px; color: var(--border-gold); text-transform: uppercase; margin-bottom: 16px; display: inline-block; font-weight: 700; }
.app-name { font-size: 22px; font-weight: 700; color: var(--text-pure); margin-bottom: 12px; }
.app-desc { font-size: 14px; color: var(--text-dim); font-weight: 400; line-height: 1.7; margin-bottom: 24px; }
.app-spec-list { margin-bottom: 24px; border-top: 1px solid rgba(194, 168, 120, 0.15); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.app-spec-item { font-size: 12px; color: var(--text-dim); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px; }
.app-spec-label { color: var(--border-gold); font-weight: 700; }

.app-checksum-box { background-color: var(--bg-matte-black); border: 1px solid rgba(194, 168, 120, 0.2); padding: 8px 12px; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-radius: 2px; }
.app-checksum-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(194, 168, 120, 0.15); padding-top: 20px; flex-wrap: wrap; gap: 16px; }
.app-version { font-family: var(--font-mono); font-size: 12px; font-weight: bold; color: var(--text-dim); }

.front-media-preview, .app-media-preview { width: calc(100% + 80px); margin: -40px -40px 24px -40px; height: 240px; background-color: #000; background-size: cover; background-position: center; border-bottom: 1px solid rgba(194, 168, 120, 0.2); position: relative; border-top-left-radius: 3px; border-top-right-radius: 3px; }
.front-video-icon, .app-video-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: rgba(0,0,0,0.7); border: 2px solid var(--border-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold-bright); font-size: 22px; padding-left: 4px; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); cursor: pointer; }
.app-card:hover .front-video-icon, .app-media-preview:hover .app-video-icon { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 30px rgba(194, 168, 120, 0.5); background: rgba(0,0,0,0.9); }
.front-pinned-badge, .app-pinned-badge { position: absolute; top: 0; left: 0; background: linear-gradient(135deg, var(--gold-bright), var(--gold-dark)); color: #fff; font-size: 9px; font-weight: bold; padding: 6px 16px; text-transform: uppercase; letter-spacing: 2px; border-bottom-right-radius: 4px; z-index: 10; box-shadow: 2px 2px 10px rgba(0,0,0,0.2); }

/* ==========================================================================
   11. PLANETARIUM: UZAY VE YILDIZ SİSTEMİ (GPU İVMELİ)
   ========================================================================== */
.planetarium-container {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden;
    pointer-events: none; z-index: 0; display: none; opacity: 0; transition: opacity 1s ease;
    background: radial-gradient(circle at bottom, #0a0b10 0%, #030305 100%);
    will-change: opacity;
}
body.theme-space .planetarium-container { display: block; opacity: 1; }

.god-star {
    position: absolute; width: 4px; height: 4px; background: #ffffff; border-radius: 50%;
    box-shadow: 0 0 10px 2px #ffffff, 0 0 20px 4px var(--gold-bright); pointer-events: auto;
    cursor: crosshair; animation: twinkle 3s infinite alternate; transition: all 0.3s;
    will-change: transform, box-shadow;
}
.god-star:hover { transform: scale(1.8); box-shadow: 0 0 20px 4px #ffffff, 0 0 40px 8px var(--gold-bright); z-index: 50; }

.god-tooltip {
    position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%) translateY(10px);
    background: rgba(10, 11, 16, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border-gold); color: #ffffff; padding: 12px 20px; border-radius: 4px;
    width: max-content; max-width: 250px; text-align: center; opacity: 0; pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}
.god-star:hover .god-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }
.god-name { font-family: var(--font-story); font-size: 18px; color: var(--gold-bright); font-weight: bold; display: block; margin-bottom: 4px; letter-spacing: 1px; }
.god-title { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1.5px; }

@keyframes twinkle { 0% { opacity: 0.4; } 100% { opacity: 1; } }

/* ==========================================================================
   12. 3D KAVİSLİ KARUSEL MİMARİSİ
   ========================================================================== */
.myth-3d-scene, .app-3d-scene {
    width: 100%; height: 450px; perspective: 1200px; display: flex; align-items: center; justify-content: center;
    margin-bottom: 80px; position: relative; z-index: 10; overflow: hidden;
    transform-style: preserve-3d; transform: rotateX(-8deg);
}

.myth-3d-carousel, .app-3d-carousel {
    width: 280px; height: 380px; position: relative; transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}

.myth-3d-item, .app-3d-item {
    position: absolute; left: 0; top: 0; width: 280px; height: 380px;
    background: var(--bg-card-dark); border: 1px solid var(--border-gold); border-radius: 6px;
    overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.4); backface-visibility: hidden;
    cursor: pointer; transition: filter 0.3s, opacity 0.3s, transform 0.3s, box-shadow 0.3s;
    will-change: transform, opacity;
}
.myth-3d-item:hover, .app-3d-item:hover { box-shadow: 0 20px 50px var(--border-gold); }

.myth-3d-item-bg, .app-3d-item-bg { width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0.6; transition: opacity 0.3s; }
.myth-3d-item:hover .myth-3d-item-bg, .app-3d-item:hover .app-3d-item-bg { opacity: 0.9; }

.myth-3d-content, .app-3d-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 60%, transparent 100%); }
.myth-3d-title, .app-3d-title { color: #ffffff; font-size: 22px; margin-bottom: 6px; line-height: 1.2; font-weight: 700; }
.myth-3d-title { font-family: var(--font-story); font-style: italic; }
.app-3d-title { font-family: var(--font-tech); }
.myth-3d-culture, .app-3d-category { color: var(--gold-bright); font-size: 10px; text-transform: uppercase; letter-spacing: 2px; font-weight: bold; }

.hologram-base, .hologram-base-gold {
    position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%) rotateX(75deg);
    width: 500px; height: 500px; border-radius: 50%; pointer-events: none; z-index: 1;
}
.hologram-base { background: radial-gradient(circle, rgba(0, 212, 255, 0.3) 0%, rgba(0, 212, 255, 0.05) 40%, transparent 70%); box-shadow: 0 0 100px 30px rgba(0, 212, 255, 0.15); }
.hologram-base-gold { background: radial-gradient(circle, rgba(194, 168, 120, 0.3) 0%, rgba(194, 168, 120, 0.05) 40%, transparent 70%); box-shadow: 0 0 100px 30px rgba(194, 168, 120, 0.15); }

.carousel-controls { display: flex; justify-content: center; gap: 24px; margin-top: 20px; position: relative; z-index: 15; }
.btn-carousel { background: rgba(10, 11, 16, 0.8); border: 1px solid var(--border-gold); color: var(--gold-bright); width: 44px; height: 44px; border-radius: 50%; font-size: 18px; cursor: pointer; transition: all var(--transition-fast); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.btn-carousel:hover { background: var(--gold-bright); color: #000000; transform: scale(1.1); box-shadow: 0 0 15px var(--gold-bright); }

/* Standart Arşiv Listesi */
.story-container { max-width: 800px; margin: 0 auto; position: relative; z-index: 10; }
.story-block { border-bottom: 1px dashed rgba(194, 168, 120, 0.3); padding-bottom: 60px; margin-bottom: 60px; position: relative; }
.story-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.myth-media-preview { width: 100%; height: 420px; background-color: #000; background-size: cover; background-position: center; border-radius: 4px; margin-bottom: 32px; border: 1px solid rgba(194, 168, 120, 0.3); position: relative; box-shadow: var(--card-shadow); }
.myth-video-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; background: rgba(0,0,0,0.7); border: 2px solid var(--border-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold-bright); font-size: 26px; padding-left: 6px; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); cursor: pointer; }
.myth-media-preview:hover .myth-video-icon { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 35px rgba(194, 168, 120, 0.5); background: rgba(0,0,0,0.9); }
.myth-pinned-tag { display: inline-block; background: linear-gradient(135deg, var(--gold-bright), var(--gold-dark)); color: #fff; font-family: var(--font-tech); font-size: 10px; font-weight: bold; padding: 4px 14px; border-radius: 2px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 24px; }
.story-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 11px; letter-spacing: 2px; color: var(--border-gold); text-transform: uppercase; margin-bottom: 16px; font-weight: 700; }
.story-title { font-family: var(--font-story); font-size: 38px; font-weight: 400; color: var(--text-pure); line-height: 1.3; margin-bottom: 24px; }
.story-content { font-family: var(--font-story); font-size: 18px; color: var(--text-dim); line-height: 1.9; font-style: italic; white-space: pre-line; margin-bottom: 32px; font-weight: 400; text-align: justify; }
.story-content::first-letter { font-size: 3.5em; float: left; margin-top: 0.1em; margin-right: 0.1em; line-height: 0.85; color: var(--gold-bright); font-weight: bold; font-style: normal; }
.story-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; font-size: 10px; letter-spacing: 1.5px; color: var(--text-dim); text-transform: uppercase; border-top: 1px solid rgba(194, 168, 120, 0.15); padding-top: 16px; }

/* ==========================================================================
   13. BLOG VE KURUMSAL HABER AKIŞI
   ========================================================================== */
.blog-row { border-bottom: 1px dashed rgba(194, 168, 120, 0.3); padding-bottom: 40px; margin-bottom: 40px; }
.blog-row:last-child { border: none; margin-bottom: 0; padding-bottom: 0; }
.blog-media-preview { width: 100%; height: 380px; background-color: #000; background-size: cover; background-position: center; border-radius: 4px; margin-bottom: 24px; border: 1px solid rgba(194, 168, 120, 0.2); position: relative; box-shadow: var(--card-shadow); }
.blog-video-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; background: rgba(0,0,0,0.7); border: 2px solid var(--border-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold-bright); font-size: 24px; padding-left: 6px; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); cursor: pointer; }
.blog-media-preview:hover .blog-video-icon { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 30px rgba(194, 168, 120, 0.5); background: rgba(0,0,0,0.9); }
.blog-pinned-tag { display: inline-block; background: linear-gradient(135deg, var(--gold-bright), var(--gold-dark)); color: #fff; font-size: 10px; font-weight: bold; padding: 4px 12px; border-radius: 2px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px; }
.blog-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--text-dim); margin-bottom: 12px; letter-spacing: 1px; font-weight: 700; }
.blog-title { font-size: 26px; font-weight: 700; color: var(--text-pure); margin-bottom: 12px; cursor: pointer; transition: color var(--transition-fast); }
.blog-title:hover { color: var(--border-gold); }
.blog-summary { font-size: 15px; color: var(--text-dim); font-weight: 400; line-height: 1.8; margin-bottom: 16px; }
.blog-link { font-size: 11px; color: var(--border-gold); text-transform: uppercase; letter-spacing: 2px; background: none; border: none; cursor: pointer; font-weight: 700; transition: color var(--transition-fast); }
.blog-link:hover { color: var(--text-pure); text-decoration: underline; }

/* ==========================================================================
   14. BEĞENİ (LIKE) MOTORU
   ========================================================================== */
.rgn-like-btn {
    background: var(--bg-card-dark); border: 1px solid rgba(194, 168, 120, 0.4); color: var(--text-dim);
    padding: 6px 12px; border-radius: 20px; display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 11px; font-weight: bold; cursor: pointer; transition: all 0.2s; user-select: none;
}
.rgn-like-btn:hover { border-color: var(--border-gold); color: var(--text-pure); }
.rgn-like-btn svg { width: 14px; height: 14px; transition: all 0.3s; fill: transparent; stroke: currentColor; }
.rgn-like-btn.liked { border-color: var(--gold-bright); color: var(--gold-bright); background: rgba(194, 168, 120, 0.1); }
.rgn-like-btn.liked svg { fill: var(--gold-bright); stroke: var(--gold-bright); transform: scale(1.1); }

/* ==========================================================================
   15. HAKKIMIZDA & İLETİŞİM VE ANTİKA SAAT
   ========================================================================== */
.about-layout { max-width: 800px; margin: 0 auto; font-size: 16px; color: var(--text-dim); font-weight: 400; line-height: 1.8; }
.about-layout p { margin-bottom: 24px; }
.quote-panel { border-left: 3px solid var(--border-gold); padding-left: 28px; margin: 40px 0; font-family: var(--font-story); font-style: italic; font-size: 22px; color: var(--text-pure); line-height: 1.6; }

.contact-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 80px; align-items: center; }

/* MÜHENDİSLİK DETAYI: ANTİKA ASTRONOMİK SAAT (USTURLAP) SİSTEMİ */
.antique-clock-wrapper {
    position: relative; width: 100%; max-width: 420px; margin: 0 auto;
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    flex-direction: column;
}
.clock-gears {
    position: absolute; width: 100%; height: 100%; top: 0; left: 0;
    z-index: 1; pointer-events: none;
}
.gear { position: absolute; transform-origin: center center; }
.gear-large { width: 80%; height: 80%; top: 10%; left: 10%; animation: spinGear 40s linear infinite; }
.gear-medium { width: 50%; height: 50%; animation: spinGearReverse 25s linear infinite; }
.gear-small { width: 30%; height: 30%; animation: spinGear 15s linear infinite; }

@keyframes spinGear { 100% { transform: rotate(360deg); } }
@keyframes spinGearReverse { 100% { transform: rotate(-360deg); } }

.clock-face {
    position: relative; width: 85%; height: 85%; border-radius: 50%;
    background: radial-gradient(circle, var(--bg-card-dark) 0%, var(--bg-matte-black) 100%);
    border: 4px solid var(--border-gold);
    box-shadow: inset 0 0 40px rgba(194, 168, 120, 0.15), 0 20px 50px rgba(0,0,0,0.5);
    z-index: 5; display: flex; align-items: center; justify-content: center;
}
.clock-rim {
    position: absolute; width: 90%; height: 90%; border-radius: 50%;
    border: 2px dashed var(--gold-bright); opacity: 0.3; pointer-events: none;
    animation: spinGearReverse 120s linear infinite;
}
.clock-numerals { position: absolute; width: 100%; height: 100%; }
.numeral {
    position: absolute; font-family: var(--font-story); font-weight: bold;
    color: var(--border-gold); transform: translate(-50%, -50%);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); font-size: 20px;
}
.clock-center-pin {
    position: absolute; width: 20px; height: 20px; background: radial-gradient(circle, #fff, var(--gold-bright));
    border: 4px solid var(--bg-card-dark); border-radius: 50%; z-index: 20; box-shadow: 0 0 10px rgba(0,0,0,0.8);
}
.clock-hand {
    position: absolute; bottom: 50%; left: 50%; transform-origin: bottom center;
    border-radius: 4px; z-index: 10;
}
.clock-hand-hour { width: 6px; height: 25%; margin-left: -3px; background: var(--border-gold); box-shadow: 0 0 5px rgba(0,0,0,0.5); }
.clock-hand-minute { width: 4px; height: 35%; margin-left: -2px; background: var(--gold-bright); box-shadow: 0 0 5px rgba(0,0,0,0.5); }
.clock-hand-second { width: 2px; height: 40%; margin-left: -1px; background: var(--error-red); z-index: 15; box-shadow: 0 0 5px rgba(0,0,0,0.5); }

.clock-manifesto { position: absolute; bottom: -40px; width: 100%; text-align: center; z-index: 10; }
.clock-quote { font-family: var(--font-story); font-style: italic; font-size: 13px; color: var(--border-gold); letter-spacing: 1px; }


.contact-form-wrap { background-color: var(--bg-card-dark); border: 1px solid rgba(194, 168, 120, 0.2); padding: 40px; border-radius: 4px; box-shadow: var(--card-shadow); }
.form-row { margin-bottom: 24px; }
.form-row label { display: block; font-size: 11px; letter-spacing: 2px; color: var(--border-gold); text-transform: uppercase; margin-bottom: 8px; font-weight: 700; }
.form-input { width: 100%; background-color: var(--input-bg); border: 1px solid var(--input-border); padding: 14px 18px; color: var(--text-pure); font-family: var(--font-tech); font-size: 14px; border-radius: 3px; transition: all var(--transition-fast); }
.form-input:focus { outline: none; border-color: var(--gold-bright); box-shadow: 0 0 10px rgba(194, 168, 120, 0.2); }

.section-header { border-bottom: 1px solid rgba(194, 168, 120, 0.2); padding-bottom: 24px; margin-bottom: 60px; position: relative; }
.section-tag { font-size: 11px; letter-spacing: 4px; color: var(--border-gold); text-transform: uppercase; display: block; margin-bottom: 8px; font-weight: 700; }
.section-title { font-size: 36px; font-weight: 700; letter-spacing: 1px; color: var(--text-pure); line-height: 1.3; }

/* ==========================================================================
   16. MODALLAR (İNDİRME, KULLANICI, TOAST)
   ========================================================================== */
.terminal-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity var(--transition-smooth); }
.terminal-modal.active { opacity: 1; pointer-events: all; }
.terminal-box { width: 100%; max-width: 600px; background-color: #0a0b10; border: 1px solid var(--border-gold); border-radius: 4px; box-shadow: 0 25px 50px rgba(0,0,0,0.8); position: relative; overflow: hidden; }
.terminal-header { background-color: rgba(194, 168, 120, 0.1); border-bottom: 1px solid rgba(194, 168, 120, 0.3); padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; }
.terminal-title { font-size: 11px; color: var(--border-gold); text-transform: uppercase; letter-spacing: 2px; font-weight: 700; }
.terminal-body { padding: 24px; background-color: #000; height: 200px; overflow-y: auto; font-family: var(--font-mono); font-size: 13px; color: var(--success-green); line-height: 1.8; }
.terminal-log { margin-bottom: 6px; text-shadow: 0 0 5px rgba(46, 125, 50, 0.4); }
.progress-wrap { padding: 24px; border-top: 1px solid rgba(194, 168, 120, 0.2); background-color: #0a0b10; }
.progress-track { width: 100%; height: 8px; background-color: #000; border-radius: 4px; overflow: hidden; margin-bottom: 12px; border: 1px solid rgba(194, 168, 120, 0.3); }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold-dark), var(--gold-bright)); transition: width 0.2s linear; box-shadow: 0 0 10px var(--gold-bright); }
.progress-status { display: flex; justify-content: space-between; font-size: 11px; font-family: var(--font-mono); color: #fff; }

.rgn-profile-overlay, .auth-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 100000; opacity: 0; pointer-events: none; transition: opacity var(--transition-smooth); display: flex; align-items: center; justify-content: center; padding: 20px; }
.rgn-profile-overlay.active, .auth-overlay.active { opacity: 1; pointer-events: auto; }
.rgn-profile-box, .auth-container { background: var(--bg-card-dark); border: 1px solid rgba(194, 168, 120, 0.4); border-radius: 6px; width: 100%; max-width: 450px; box-shadow: 0 30px 60px rgba(0,0,0,0.8); transform: translateY(20px) scale(0.95); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; }
.rgn-profile-overlay.active .rgn-profile-box, .auth-overlay.active .auth-container { transform: translateY(0) scale(1); }
.profile-header, .auth-header { background: linear-gradient(to right, rgba(194, 168, 120, 0.1), transparent); padding: 30px; border-bottom: 1px solid rgba(194, 168, 120, 0.2); display: flex; justify-content: space-between; align-items: flex-start; }
.profile-body, .auth-body { padding: 30px; }
.profile-input { width: 100%; background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-pure); padding: 14px; font-family: var(--font-tech); font-size: 14px; border-radius: 3px; margin-bottom: 20px; transition: border-color 0.3s; }

.toast { position: fixed; bottom: 32px; right: 32px; background-color: #0a0b10; border: 1px solid var(--border-gold); padding: 16px 28px; border-radius: 4px; display: flex; align-items: center; gap: 12px; z-index: 10000; transform: translateY(100px); opacity: 0; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); box-shadow: 0 15px 40px rgba(0,0,0,0.6); }
.toast.show { transform: translateY(0); opacity: 1; }
.toast-bullet { color: var(--gold-bright); font-weight: bold; }
.toast-txt { font-size: 12px; letter-spacing: 1.5px; color: #fff; font-weight: bold; text-transform: uppercase; }
.toast-success { border-color: var(--success-green); }
.toast-success .toast-bullet { color: var(--success-green); content: "✓"; }
.toast-error { border-color: var(--error-red); }
.toast-error .toast-bullet { color: var(--error-red); content: "✖"; }

/* ==========================================================================
   17. SİNEMATİK OKUMA (READER), YORUM VE KAYNAKÇA MOTORU
   ========================================================================== */
.rgn-reader-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg-matte-black); z-index: 10000; opacity: 0;
    pointer-events: none; transition: opacity var(--transition-smooth), background-color 0.5s;
    overflow-y: auto; padding: 40px 20px;
}
.rgn-reader-overlay.active { opacity: 1; pointer-events: auto; }

.rgn-reader-container {
    max-width: 800px; margin: 0 auto; background: var(--bg-card-dark);
    border: 1px solid rgba(194, 168, 120, 0.3); border-radius: 4px; padding: 60px 50px;
    position: relative; box-shadow: var(--card-shadow);
    transform: translateY(30px);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.5s, color 0.5s;
}
.rgn-reader-overlay.active .rgn-reader-container { transform: translateY(0); }

.btn-close-reader {
    position: fixed; top: 30px; right: 40px; background: var(--bg-card-dark);
    border: 1px solid var(--border-gold); color: var(--gold-bright); width: 44px; height: 44px;
    border-radius: 50%; font-size: 18px; font-weight: bold; cursor: pointer;
    display: flex; align-items: center; justify-content: center; z-index: 10001;
    transition: all var(--transition-fast); user-select: none; box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.btn-close-reader:hover { background: var(--gold-bright); color: #fff; transform: scale(1.1); }

.reader-media { width: calc(100% + 100px); margin: -60px -50px 40px -50px; height: 400px; background-size: cover; background-position: center; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom: 1px solid rgba(194, 168, 120, 0.3); }
.reader-meta { font-family: var(--font-mono); font-size: 12px; font-weight: bold; color: var(--border-gold); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 24px; display: block; border-bottom: 1px dashed rgba(194, 168, 120, 0.3); padding-bottom: 16px; }

.reader-title {
    font-family: var(--font-story); font-size: 42px; color: var(--text-pure); margin-bottom: 40px;
    line-height: 1.3; font-style: italic; word-wrap: break-word; overflow-wrap: break-word; max-width: 100%;
}

.reader-content {
    font-size: 18px; color: var(--text-dim); line-height: 1.9; font-weight: 400; text-align: justify;
    word-wrap: break-word; overflow-wrap: break-word; max-width: 100%; overflow-x: hidden;
}

/* Clearfix (Resim Sağa/Sola Yaslandığında Metinlerin Taşmasını Engeller) */
.rgn-editor-canvas::after, .reader-content::after { content: ""; display: table; clear: both; }

/* Editör İçi Resimlerin Animasyonlu Boyutlanması ve Word Tarzı Akış (Wrapping) */
.rgn-editor-canvas img, .reader-content img {
    max-width: 100%; height: auto; border-radius: 4px; margin: 15px 0;
    border: 1px solid rgba(194, 168, 120, 0.3); box-shadow: var(--card-shadow);
    object-fit: cover; transition: width 0.2s ease, margin 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}
.rgn-editor-canvas img:hover { box-shadow: 0 0 15px var(--border-gold); }

/* MÜHENDİSLİK DETAYI: Editör İçindeki Boyutlandırma Tutamacı (Drag to Resize) */
.rgn-img-resizer-handle {
    position: absolute; width: 16px; height: 16px; background: var(--gold-bright);
    border: 2px solid #ffffff; border-radius: 50%; cursor: se-resize; z-index: 10005;
    box-shadow: 0 2px 8px rgba(0,0,0,0.6); display: none; transition: transform 0.2s;
}
.rgn-img-resizer-handle:hover { transform: scale(1.2); }

.reader-content iframe { max-width: 100%; margin: 24px 0; border: 1px solid var(--border-gold); border-radius: 4px; }
.reader-content h2, .reader-content h3 { color: var(--text-pure); margin-top: 40px; margin-bottom: 20px; font-family: var(--font-story); font-style: italic; word-wrap: break-word; overflow-wrap: break-word; }
.reader-content p { margin-bottom: 20px; word-wrap: break-word; overflow-wrap: break-word; }
.reader-content blockquote { border-left: 4px solid var(--gold-bright); padding-left: 20px; margin: 24px 0; font-style: italic; color: var(--text-pure); background: rgba(194, 168, 120, 0.05); padding: 16px 20px; border-radius: 0 4px 4px 0; }
.reader-content a { color: var(--gold-bright); text-decoration: none; border-bottom: 1px dashed var(--gold-bright); transition: color 0.2s, border-color 0.2s; }
.reader-content a:hover { color: var(--text-pure); border-bottom-style: solid; }
.reader-content ul, .reader-content ol { margin-bottom: 20px; padding-left: 24px; color: var(--text-dim); }
.reader-content li { margin-bottom: 8px; }
.reader-content del { opacity: 0.6; }

/* YENİ: Kaynakça (Citation) Kutusu Tasarımı */
.reader-reference-box {
    margin-top: 40px; padding: 20px 24px; background: rgba(194, 168, 120, 0.05);
    border-left: 3px solid var(--border-gold); border-radius: 0 4px 4px 0;
}
.reader-reference-title {
    font-size: 11px; font-weight: bold; color: var(--gold-bright); text-transform: uppercase;
    letter-spacing: 2px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
}
.reader-reference-content { font-size: 13px; color: var(--text-dim); font-style: italic; line-height: 1.6; word-wrap: break-word; }


/* ==========================================================================
   18. MÜHENDİSLİK ŞAHESERİ: YANIK FERMAN VE MOBİL E-KİTAP OKUMA MODU
   ========================================================================== */

@keyframes unrollFerman {
    0% { max-height: 80px; overflow: hidden; opacity: 0; transform: scaleY(0); }
    10% { opacity: 1; transform: scaleY(0.1); max-height: 150px; overflow: hidden; }
    100% { max-height: 50000px; transform: scaleY(1); opacity: 1; overflow: visible; }
}

.rgn-reader-container.parchment-mode {
    background-color: #fdf6e3;
    background-image:
        url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)" opacity="0.08"/></svg>'),
        linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(200, 160, 100, 0.1) 50%, rgba(255,255,255,0) 100%),
        radial-gradient(circle at center, #fdf6e3 20%, #ebdcb3 80%, #d4b882 100%);
    border: none;
    box-shadow: inset 0 0 40px 10px rgba(101, 67, 33, 0.4), inset 0 0 15px 3px rgba(0, 0, 0, 0.6), 0 30px 60px rgba(0,0,0,0.8);
    color: #3e2723; border-radius: 2px; padding-top: 80px; padding-bottom: 80px; max-width: 900px; 
    transform-origin: top center; animation: unrollFerman 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.rgn-reader-container.parchment-mode::before {
    content: ''; position: absolute; top: -15px; left: -2%; width: 104%; height: 40px;
    background: linear-gradient(to bottom, #5c3a21 0%, #8a5a30 40%, #3e2723 100%);
    border-radius: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.5), inset 0 0 5px #000; z-index: 10;
}
.rgn-reader-container.parchment-mode::after {
    content: ''; position: absolute; bottom: -15px; left: -2%; width: 104%; height: 40px;
    background: linear-gradient(to top, #5c3a21 0%, #8a5a30 40%, #3e2723 100%);
    border-radius: 20px; box-shadow: 0 -10px 20px rgba(0,0,0,0.5), inset 0 0 5px #000; z-index: 10;
}

/* MÜHENDİSLİK DETAYI: Serbest kaydırma (overflow-x: auto) iptal edildi. Kindle Navigation ile sayfa çevrilecek. */
.parchment-mode .reader-content {
    color: #3e2723; font-weight: 500; 
    column-width: calc(100% - 20px); 
    column-gap: 60px;
    column-rule: 1px dashed rgba(138, 90, 48, 0.3); height: 60vh; min-height: 400px;
    overflow-x: hidden; 
    overflow-y: hidden; padding-bottom: 20px;
}

.parchment-mode .reader-content > * { break-inside: avoid; page-break-inside: avoid; }

.parchment-mode .reader-title { color: #2c1a14; text-shadow: 1px 1px 0px rgba(255,255,255,0.4); font-weight: 700; text-align: center; }
.parchment-mode .reader-meta { color: #8a5a30; border-bottom-color: rgba(138, 90, 48, 0.2); text-align: center; }
.parchment-mode .reader-content h2, .parchment-mode .reader-content h3 { color: #2c1a14; }
.parchment-mode .reader-media { display: none; }
.parchment-mode .btn-close-reader { background: #3e2723; color: #fdf6e3; border-color: #3e2723; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.parchment-mode .btn-close-reader:hover { background: #8a5a30; color: #fff; }

.parchment-mode .reader-content blockquote { border-left-color: #8a5a30; color: #2c1a14; background: rgba(138, 90, 48, 0.05); }
.parchment-mode .reader-content a { color: #8a5a30; border-bottom-color: #8a5a30; }
.parchment-mode .reader-content a:hover { color: #3e2723; }

/* Parşömen Moduna Özel Kaynakça */
.parchment-mode .reader-reference-box { background: rgba(138, 90, 48, 0.05); border-left-color: #8a5a30; }
.parchment-mode .reader-reference-title { color: #5c3a21; }
.parchment-mode .reader-reference-content { color: #8a5a30; }

.parchment-mode .rgn-comments-title { color: #5c3a21; }
.parchment-mode .comment-item { background: rgba(138, 90, 48, 0.05); border-color: rgba(138, 90, 48, 0.2); box-shadow: none; }
.parchment-mode .comment-item.nested { background: rgba(0,0,0,0.03); border-left-color: #5c3a21; }
.parchment-mode .comment-text { color: #3e2723; }
.parchment-mode .comment-meta { border-bottom-color: rgba(138, 90, 48, 0.2); }
.parchment-mode .comment-author { color: #8a5a30; }
.parchment-mode .comment-textarea { background: rgba(138, 90, 48, 0.05); border-color: #c4ab82; color: #3e2723; font-weight: 500; }
.parchment-mode .comment-textarea:focus { border-color: #8a5a30; background: rgba(138, 90, 48, 0.1); }
.parchment-mode .rgn-like-btn { background: rgba(138, 90, 48, 0.1); border-color: rgba(138, 90, 48, 0.3); color: #5c3a21; }
.parchment-mode .rgn-like-btn.liked { background: rgba(138, 90, 48, 0.2); border-color: #8a5a30; color: #8a5a30; }
.parchment-mode .rgn-like-btn.liked svg { fill: #8a5a30; stroke: #8a5a30; }

/* YENİ: Masaüstü ve Mobilde E-Kitap (Kindle) Sayfalama Butonları */
.kindle-nav-container { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 15px; border-top: 1px dashed rgba(138, 90, 48, 0.3); }
.kindle-nav-btn { background: transparent; border: 1px solid #8a5a30; color: #5c3a21; padding: 10px 20px; border-radius: 3px; font-family: var(--font-tech); font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: all 0.3s ease; }
.kindle-nav-btn:hover { background: #8a5a30; color: #fdf6e3; }
.kindle-page-info { font-family: var(--font-mono); font-size: 12px; color: #8a5a30; font-weight: bold; }

/* ==========================================================================
   19. YORUM MOTORU STİLLERİ (Standart Mod ve Nested Tree)
   ========================================================================== */
.rgn-comments-wrapper { margin-top: 60px; padding-top: 40px; border-top: 1px solid rgba(194, 168, 120, 0.2); }
.rgn-comments-title { font-size: 16px; font-weight: bold; color: var(--gold-bright); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 24px; display: flex; align-items: center; gap: 8px; }
.rgn-comments-title::before { content: '⬥'; font-size: 20px; }

.rgn-comments-list { display: flex; flex-direction: column; gap: 16px; }

.comment-item { background: var(--input-bg); border: 1px solid var(--input-border); padding: 20px; border-radius: 4px; box-shadow: var(--card-shadow); }
.comment-meta { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px dashed rgba(194,168,120,0.3); padding-bottom: 8px; font-weight: bold; }
.comment-author { color: var(--border-gold); }
.comment-text { font-size: 15px; color: var(--text-pure); line-height: 1.6; font-weight: 400; word-wrap: break-word; overflow-wrap: break-word; }

.comment-item.nested {
    margin-left: 50px; margin-top: 12px; border-left: 3px solid var(--border-gold);
    background: rgba(0,0,0,0.015); position: relative; box-shadow: none;
}
.comment-item.nested::before {
    content: ''; position: absolute; top: -12px; left: -20px; width: 17px; height: 36px;
    border-bottom: 2px solid rgba(194, 168, 120, 0.4); border-left: 2px solid rgba(194, 168, 120, 0.4);
    border-bottom-left-radius: 8px; pointer-events: none;
}
body.theme-space .comment-item.nested { background: rgba(0, 212, 255, 0.02); border-left-color: var(--gold-bright); }
body.theme-space .comment-item.nested::before { border-color: rgba(0, 212, 255, 0.3); }

.comment-form-box { background: rgba(194,168,120,0.05); border: 1px solid rgba(194,168,120,0.2); padding: 24px; border-radius: 4px; margin-bottom: 32px; }
.comment-textarea { width: 100%; background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-pure); padding: 16px; font-family: var(--font-tech); font-size: 14px; border-radius: 3px; resize: vertical; min-height: 100px; margin-bottom: 16px; transition: border-color 0.2s; }
.comment-textarea:focus { border-color: var(--gold-bright); outline: none; }
.comment-auth-warning { font-size: 12px; color: var(--text-dim); padding: 20px; text-align: center; border: 1px dashed rgba(194,168,120,0.4); background: var(--input-bg); border-radius: 4px; letter-spacing: 1px; font-weight: bold; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   20. YAZILIM ÇIKTISI / YAZDIRMA (PRINT) OPTİMİZASYONU
   ========================================================================== */
@media print {
    body { background: #fff !important; color: #000 !important; }
    header, footer, .hero-container, .slider-nav-btn, .rgn-like-btn, .btn-gold-filled, .btn-gold-outline, .planetarium-container, .auth-overlay, .toast, .hologram-base, .hologram-base-gold { display: none !important; }
    .view-section { padding: 0 !important; margin: 0 !important; }
    .app-card, .story-block, .blog-row { border: 1px solid #ccc !important; box-shadow: none !important; break-inside: avoid; }
    .app-name, .story-title, .blog-title { color: #000 !important; }
    .story-content, .app-desc, .blog-summary, .reader-content { color: #333 !important; column-count: 1 !important; height: auto !important; }
    a { color: #000 !important; text-decoration: underline; }
}

/* ==========================================================================
   21. RESPONSIVE MİMARİ VE MOBİL İZOLASYON ZIRHI
   ========================================================================== */
@media (min-width: 1600px) {
    .section-title { font-size: 42px; }
    .hero-slogan { font-size: 16px; }
    .hero-pitch { font-size: 18px; max-width: 800px; }
    .app-name { font-size: 26px; }
    .story-content { font-size: 20px; }
}

@media (max-width: 1024px) {
    .admin-wrapper { grid-template-columns: 1fr; gap: 32px; }
    .contact-layout { grid-template-columns: 1fr; gap: 60px; }
}

@media (max-width: 768px) {
    /* MÜHENDİSLİK DETAYI: Kaydırılabilir Yatay Mobil Menü */
    .header-wrap { flex-direction: column; height: auto; padding: 16px 20px; gap: 16px; }
    nav { 
        width: 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; 
        scrollbar-width: none; -webkit-overflow-scrolling: touch; gap: 20px; padding-bottom: 5px; 
    }
    nav::-webkit-scrollbar { display: none; }
    .nav-btn { white-space: nowrap; flex-shrink: 0; font-size: 11px; }

    .view-section { padding: 50px 20px; }
    .section-title { font-size: 28px; }
    .story-title { font-size: 28px; }
    .story-content { font-size: 16px; line-height: 1.8; }
    .footer-wrap { flex-direction: column; text-align: center; gap: 24px; justify-content: center; }
    .footer-nav { justify-content: center; }
    .rgn-reader-container { padding: 40px 20px; }
    .reader-media { width: calc(100% + 40px); margin: -40px -20px 24px -20px; height: 220px; }
    .btn-close-reader { top: 16px; right: 16px; width: 36px; height: 36px; }
    .reader-title { font-size: 28px; }

    .comment-item.nested { margin-left: 20px; }

    /* MÜHENDİSLİK DETAYI: Mobil E-Kitap Sayfalaması Tam Ekran Kalibrasyonu */
    .parchment-mode .reader-content {
        column-width: 100vw;
        column-gap: 40px; 
        height: 65vh; 
        min-height: 400px;
        overflow-y: hidden;
        overflow-x: hidden;
    }

    /* MÜHENDİSLİK DETAYI: Mobil Resim Zırhı (Metinleri ezmesini kalıcı olarak engeller) */
    .rgn-editor-canvas img, .reader-content img {
        float: none !important;
        margin: 15px auto !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block;
    }

    /* 3D Karusel Mobil İptali (Yatay Kaydırmaya Dönüşür) */
    .myth-3d-scene, .app-3d-scene { height: auto; perspective: none; transform: none; }
    .myth-3d-carousel, .app-3d-carousel { width: 100%; transform-style: flat; transition: none; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-bottom: 20px; }
    .myth-3d-item, .app-3d-item { position: relative; flex: 0 0 85%; scroll-snap-align: center; left: auto; top: auto; transform: none !important; }
}

@media (max-width: 480px) {
    .apps-grid { grid-template-columns: 1fr; }
    .btn-gold-filled, .btn-gold-outline { width: 100%; padding: 14px 20px; }
    .hero-slogan { font-size: 11px; letter-spacing: 4px; }
    .toast { right: 16px; bottom: 16px; left: 16px; padding: 14px 20px; }
    .rgn-profile-box { margin: 10px; max-width: 100%; }
}

/* ==========================================================================
   22. FSE (CANLI DÜZENLEME) MOTORU VE YÖNETİM MODALLARI STİLLERİ
   ========================================================================== */
.live-admin-topbar { position: fixed; top: 0; left: 0; width: 100%; height: 40px; background: #08080a; border-bottom: 1px solid var(--border-gold); z-index: 10000; display: flex; align-items: center; padding: 0 20px; gap: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.live-topbar-title { color: var(--gold-bright); font-size: 11px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; margin-right: 20px; }
.live-btn { background: transparent; border: 1px solid rgba(194, 168, 120, 0.3); color: #fff; padding: 4px 12px; font-size: 11px; border-radius: 2px; cursor: pointer; transition: all 0.2s; font-weight: 600; }
.live-btn:hover { background: rgba(194, 168, 120, 0.1); border-color: var(--border-gold); color: var(--gold-bright); }
.live-btn-red { border-color: rgba(217, 56, 30, 0.3); color: var(--error-red); margin-left: auto; }
.live-btn-red:hover { background: rgba(217, 56, 30, 0.1); border-color: var(--error-red); color: #fff; }

.rgn-editable { position: relative; transition: all 0.2s; outline: 1px dashed transparent; outline-offset: 4px; border-radius: 2px; cursor: pointer; }
.rgn-editable:hover { outline-color: var(--gold-bright); background: rgba(194, 168, 120, 0.1); }
.rgn-editable::after { content: '✏️'; position: absolute; top: -12px; right: -12px; font-size: 10px; background: var(--bg-matte-black); border: 1px solid var(--border-gold); border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--transition-fast); pointer-events: none; z-index: 10; }
.rgn-editable:hover::after { opacity: 1; }

.live-editor-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 10001; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; padding: 20px; }
.live-editor-overlay.active { opacity: 1; pointer-events: all; }
.live-editor-container { background: var(--bg-card-dark); border: 1px solid var(--border-gold); width: 100%; max-width: 900px; max-height: 90vh; border-radius: 4px; box-shadow: 0 30px 60px rgba(0,0,0,0.8); display: flex; flex-direction: column; transform: translateY(20px); transition: transform 0.3s; }
.live-editor-overlay.active .live-editor-container { transform: translateY(0); }

.live-editor-header { padding: 16px 24px; border-bottom: 1px solid rgba(194,168,120,0.2); display: flex; justify-content: space-between; align-items: center; background: #08080a; }
.live-editor-title { color: var(--gold-bright); font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; }
.live-editor-close { background: none; border: none; color: var(--text-dim); font-size: 20px; cursor: pointer; transition: color 0.2s; }
.live-editor-close:hover { color: var(--error-red); }
.live-editor-body { padding: 24px; overflow-y: auto; flex-grow: 1; }
.live-editor-footer { padding: 16px 24px; border-top: 1px solid rgba(194,168,120,0.2); display: flex; justify-content: flex-end; gap: 12px; background: #08080a; }

.frontend-cms-bar { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; opacity: 0; transform: translateY(-10px); transition: all 0.2s; background: rgba(0,0,0,0.9); padding: 6px; border: 1px solid var(--border-gold); border-radius: 4px; z-index: 20; }
.app-card:hover .frontend-cms-bar, .story-block:hover .frontend-cms-bar, .blog-row:hover .frontend-cms-bar { opacity: 1; transform: translateY(0); }

/* Editör Altı Tasarımları (Footer İçin Ortak Bileşenler) */
footer { border-top: 1px solid rgba(194, 168, 120, 0.2); background-color: var(--bg-card-dark); padding: 48px 24px; position: relative; z-index: 10; margin-top: auto; }
.footer-wrap { max-width: var(--max-screen-width); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 12px; letter-spacing: 1.5px; color: var(--text-dim); flex-wrap: wrap; }
.footer-copyright span { color: var(--text-pure); font-weight: 700; }
.footer-nav { display: flex; gap: 32px; flex-wrap: wrap; }
.footer-nav-link { color: var(--text-dim); text-decoration: none; background: none; border: none; font-size: 12px; cursor: pointer; letter-spacing: 1.5px; font-weight: bold; transition: color var(--transition-fast); }
.footer-nav-link:hover { color: var(--border-gold); }