/* =============================================
   PRATIKEVRAK — "Soft Minimalist" v4.1
   Aesthetic: Light, Airy, Accessible, Premium
   ============================================= */

:root {
    /* ─── Renk Sistemi (Soft & Light) ─── */
    --bg-main:      #FAFAFA;       /* Sayfa arka plan (Kırık Beyaz) */
    --bg-panel:     #FFFFFF;       /* Panel arka planları (Saf Beyaz) */
    --bg-hover:     #F3F4F6;       /* Hafif gri hover */
    --c-border:     #E5E7EB;       /* Yumuşak kenarlıklar */
    
    --brand:        #2563EB;       /* Güven Mavisi */
    --brand-soft:   #EFF6FF;       /* Mavi arka plan */
    --gold:         #D97706;       /* Vurgu turuncu/altın (Amber) */
    
    --text-main:    #111827;       /* Ana Metin (Koyu Gri/Siyah) */
    --text-muted:   #6B7280;       /* Yardımcı Metin (Soft Gri) */

    /* ─── A4 Kağıdı ─── */
    --parchment:    #FFFFFF;

    /* ─── Tipografi ─── */
    --font-display: 'DM Serif Display', Georgia, serif;
    --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
    --font-doc:     'Crimson Pro', 'Times New Roman', serif;

    /* ─── Gölgeler (Çok daha soft) ─── */
    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-doc:   0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    
    /* ─── Radius ─── */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;
    --r-xl: 24px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: var(--bg-main);
    color: var(--text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* ─── Skip Link (Erişilebilirlik) ─── */
.pe-skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    background: var(--brand);
    color: white;
    padding: 8px 16px;
    border-radius: var(--r-sm);
    font-weight: 600;
    font-size: 0.9rem;
    z-index: 9999;
    text-decoration: none;
    transition: top 0.2s;
}
.pe-skip-link:focus {
    top: 8px;
}

/* ─── Global Focus Visible ─── */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: none;
}

/* ─── Touch Optimization ─── */
button, a, [role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(37, 99, 235, 0.1);
}

/* ============================================
   HEADER
   ============================================ */
.pe-header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--c-border);
    position: sticky; top: 0; z-index: 100;
}
.pe-header-inner {
    max-width: 1480px;
    margin: 0 auto;
    padding: 12px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.pe-logo {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none; color: var(--text-main);
}
.pe-logo-mark {
    width: 34px; height: 34px;
    background: var(--brand);
    border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
    flex-shrink: 0;
}
.pe-logo-mark svg { width: 18px; height: 18px; color: white; stroke: white; }
.pe-logo-text { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -0.3px; }
.pe-logo-text span { color: var(--brand); }

.pe-header-badge {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    font-size: 0.8rem; font-weight: 600;
    color: #059669; background: #D1FAE5;
    border-radius: var(--r-xl);
    white-space: nowrap; flex-shrink: 0;
}

/* ============================================
   PAGE HEADER / TITLE
   ============================================ */
.pe-page-header {
    padding: 48px 32px 32px;
    max-width: 1480px;
    margin: 0 auto;
    text-align: left;
}
.pe-page-header h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 400; color: var(--text-main);
    line-height: 1.15; letter-spacing: -0.5px;
    max-width: 700px; margin-bottom: 12px;
}
.pe-page-header p {
    font-size: 1.05rem; color: var(--text-muted);
    max-width: 600px;
}

/* ============================================
   MOBILE TABS (only on ≤1024px)
   ============================================ */
.pe-mobile-tabs { display: none; }
.pe-mobile-actions { display: none; }

@media (max-width: 1024px) {
    /* hidden-panel — JS mobil sekme geçişi tarafından kontrol edilir */
    .hidden-panel { display: none !important; }

    .pe-mobile-tabs {
        display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
        margin: 0 16px 16px; padding: 6px;
        background: var(--bg-hover); border-radius: var(--r-lg);
    }
    .pe-mobile-tabs button {
        padding: 10px; border: none; background: transparent; cursor: pointer;
        border-radius: var(--r-md); font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
        color: var(--text-muted); display: flex; align-items: center; justify-content: center; gap: 8px;
        transition: 0.2s;
    }
    .pe-mobile-tabs button.active { background: white; color: var(--brand); box-shadow: var(--shadow-sm); }
}

/* ============================================
   LAYOUT — 3-Column (Form | Document | Rail)
   ============================================ */
.pe-workspace {
    display: grid;
    grid-template-columns: minmax(320px, 360px) 1fr 68px;
    align-items: start;
    gap: 32px;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 32px 48px;
}

/* ============================================
   LEFT PANEL — Form (Kompakt ve Kaydırmasız)
   ============================================ */
.pe-form-panel {
    background: var(--bg-panel);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    /* İç kaydırma (overflow-y) KASITLI OLARAK KALDIRILDI. 
       Sayfayla beraber doğal kayacak (sticky de değil) ki 
       insanlar okurken bunalmasın. */
}

.pe-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px; padding-bottom: 16px;
    border-bottom: 1px solid var(--c-border);
}
.pe-panel-head h3 { font-size: 0.9rem; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 8px; }
.pe-btn-clear {
    background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: 0.8rem; font-weight: 600;
    color: #EF4444; display: flex; align-items: center; gap: 4px;
}

/* Kompakt Form Girdileri */
.pe-form-group { margin-bottom: 16px; }
.pe-label {
    display: block; font-size: 0.85rem; font-weight: 600;
    color: var(--text-main); margin-bottom: 6px;
}
.pe-input {
    width: 100%;
    padding: 10px 14px; /* Daha kompakt padding */
    font-family: var(--font-body); font-size: 0.95rem;
    color: var(--text-main); background: #F9FAFB;
    border: 1px solid #D1D5DB; border-radius: var(--r-sm);
    transition: all 0.2s; outline: none;
}
.pe-input:focus {
    background: white; border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
textarea.pe-input { min-height: 80px; resize: vertical; }

/* ============================================
   DOWNLOAD STRIP (Formun altında duran)
   ============================================ */
.pe-download-strip {
    margin-top: 32px; padding: 20px;
    background: #F8FAFC; border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
}
.pe-download-strip h4 {
    font-size: 0.8rem; font-weight: 700; color: var(--text-muted);
    margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
}
.pe-dl-btns { display: grid; gap: 10px; }
.pe-dl-btn {
    width: 100%; padding: 12px 16px;
    border: 1px solid var(--c-border); border-radius: var(--r-sm);
    background: white; color: var(--text-main);
    font-family: var(--font-body); font-size: 0.9rem; font-weight: 600;
    cursor: pointer; display: flex; align-items: center; gap: 10px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: var(--shadow-sm);
}
.pe-dl-btn:hover { background: var(--bg-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pe-dl-btn .badge { margin-left: auto; font-size: 0.7rem; padding: 2px 8px; border-radius: 99px; }

/* Yazdır Butonu */
.pe-print-btn {
    width: 100%; margin-top: 10px;
    padding: 11px 16px;
    background: white; color: var(--text-muted);
    border: 1px dashed #D1D5DB; border-radius: var(--r-sm);
    font-family: var(--font-body); font-size: 0.9rem; font-weight: 600;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all 0.2s;
}
.pe-print-btn:hover {
    background: var(--bg-hover); color: var(--text-main);
    border-color: #9CA3AF;
}
.pe-print-btn svg { width: 16px; height: 16px; }

/* Adsense Alanı */
.ad-slot-form { margin-top: 24px; padding: 16px; background: #F3F4F6; border: 1px dashed #D1D5DB; border-radius: var(--r-md); text-align: center; color: #9CA3AF; font-size: 0.8rem; font-weight: 600; }

/* ============================================
   MOBİL İNDİRME BUTONLARI
   ============================================ */
.pe-btn {
    padding: 11px 16px;
    border-radius: var(--r-sm);
    font-family: var(--font-body); font-size: 0.9rem; font-weight: 600;
    cursor: pointer; border: none; transition: 0.2s;
    display: inline-flex; align-items: center; gap: 8px;
}
.pe-btn.outline {
    background: white; color: var(--text-main);
    border: 1px solid var(--c-border); box-shadow: var(--shadow-sm);
}
.pe-btn.outline:hover { background: var(--bg-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.pe-btn.outline svg { width: 16px; height: 16px; }

/* ============================================
   CENTER — Document Preview
   ============================================ */
.pe-preview-panel {
    background: #F0F4F8;           /* Biraz daha koyu arka plan ki A4 kağıt gibi durun */
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    display: flex; flex-direction: column; align-items: center;
    padding: 32px 24px;
    box-shadow: var(--shadow-sm);
    min-height: 700px;
    overflow-x: auto;              /* A4 mobilden taşıyorsa scroll açılsın */
}

.pe-doc-label {
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.5px;
    color: var(--text-muted); text-transform: uppercase;
    margin-bottom: 24px; align-self: flex-start;
}

/* A4 Kağıdı */
.pe-a4 {
    width: 210mm;
    min-height: 297mm;
    background: white;
    padding: 22mm 20mm;
    box-shadow: var(--shadow-doc);
    font-family: var(--font-doc); font-size: 11pt; line-height: 1.65; color: #111;
    transform-origin: top center;
    outline: none;              /* contenteditable mavi kenarlığı gizle */
    caret-color: var(--brand);  /* imleç rengi mavi */
    cursor: text;
    /* CLS önleme: içerik yüklenmeden alan ayır */
    contain: layout style;
}
/* Düzenleme yapılabilir olduğunu hafifçe hatırlat */
.pe-a4:focus {
    box-shadow: var(--shadow-doc), 0 0 0 3px rgba(37,99,235,0.08);
}

/* Doldurulabilir Alanlar (pe-var) — Sadece bu span'lar düzenlenebilir */
.pe-var {
    position: relative; color: #000; font-weight: 700;
    padding: 2px 4px; transition: 0.2s; border-radius: 3px;
    cursor: text;
    outline: none;
}
.pe-var[contenteditable]:hover {
    background: rgba(37, 99, 235, 0.07);
}
.pe-var[contenteditable]:focus {
    background: rgba(37, 99, 235, 0.1);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}
.pe-var.empty { color: #9CA3AF; font-weight: normal; }
.pe-var.empty::after {
    content: ''; display: inline-block; width: 2px; height: 1em;
    background: #9CA3AF; vertical-align: middle; margin-left: 4px;
    animation: blink 1.2s step-end infinite;
}

/* Tarih span'ı — tıklanabilir, pointer cursor */
.pe-var-date {
    cursor: pointer !important;
}
.pe-var-date:hover {
    background: rgba(217, 119, 6, 0.08) !important;
}
@media screen {
    .pe-var-date::after {
        content: ' 📅'; font-size: 0.9em; opacity: 0.8;
    }
}
@media print {
    .pe-var-date::after {
        display: none !important;
        content: none !important;
    }
}

@keyframes blink {
    50% { opacity: 0; }
}

/* ============================================
   RIGHT RAIL — Download Actions (Açık Tema)
   ============================================ */
.pe-action-rail {
    background: var(--bg-panel); border: 1px solid var(--c-border);
    border-radius: var(--r-xl); display: flex; flex-direction: column; align-items: center;
    padding: 24px 12px; gap: 12px; position: sticky; top: 80px; box-shadow: var(--shadow-sm);
}
.pe-rail-label {
    writing-mode: vertical-rl; font-size: 0.7rem; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
}
.pe-rail-divider { width: 24px; height: 1px; background: var(--c-border); margin: 4px 0; }
.pe-rail-btn {
    width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid transparent;
    background: transparent; color: var(--text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: 0.2s; position: relative;
}
.pe-rail-btn:hover { background: var(--bg-hover); color: var(--text-main); }
.pe-rail-btn::before {
    content: attr(data-tip); position: absolute; right: calc(100% + 10px);
    background: var(--text-main); color: white; padding: 4px 10px; border-radius: var(--r-sm);
    font-size: 0.75rem; font-weight: 600; white-space: nowrap; pointer-events: none;
    opacity: 0; transition: 0.15s ease;
}
.pe-rail-btn:hover::before { opacity: 1; }

/* ============================================
   FAQ (BELGEYE ÖZEL VURGUSU İLE)
   ============================================ */
.pe-faq { max-width: 1480px; margin: 40px auto; padding: 0 32px; }
.pe-faq-header { margin-bottom: 32px; border-bottom: 2px solid var(--bg-hover); padding-bottom: 16px; }
.pe-faq-tag { font-size: 0.8rem; font-weight: 700; color: var(--brand); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; display:block;}
.pe-faq-header h2 { font-family: var(--font-display); font-size: 2rem; color: var(--text-main); }

.pe-faq-list { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.pe-faq-item {
    background: var(--bg-panel); padding: 24px;
    border-radius: var(--r-lg); border: 1px solid var(--c-border); box-shadow: var(--shadow-sm);
}
.pe-faq-item h4 { font-size: 1.05rem; font-weight: 700; color: var(--text-main); margin-bottom: 8px; }
.pe-faq-item p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1280px) {
    .pe-workspace { grid-template-columns: 320px 1fr 56px; gap: 24px; }
}

@media (max-width: 1024px) {
    .pe-workspace { grid-template-columns: 1fr; padding: 0 16px 32px; gap: 16px; }
    .pe-preview-panel {
        padding: 20px 12px;
        min-height: auto;
        overflow-x: auto;
        display: block; /* Align items center breaks scaling */
    }
    .pe-a4 {
        zoom: normal; /* Reset zoom */
        transform: scale(0.56);
        transform-origin: top center;
        margin-bottom: -44%; /* Compensate for scaled height */
        width: 210mm;
    }
    .pe-action-rail { display: none; }
    .pe-page-header { padding: 24px 16px; }
    .pe-faq { padding: 0 16px; }
    .pe-faq-list { grid-template-columns: 1fr; }

    .pe-mobile-actions {
        display: flex; gap: 10px;
        width: 100%; margin-top: 24px; padding: 0 16px;
        justify-content: center;
    }
    .pe-mobile-actions .pe-btn {
        flex: 1; justify-content: center;
        display: flex; align-items: center; gap: 6px;
    }
}

@media (max-width: 768px) {
    /* Header kompakt */
    .pe-header-inner { padding: 8px 16px; }
    .pe-logo-mark { width: 28px; height: 28px; }
    .pe-logo-mark svg { width: 14px; height: 14px; }
    .pe-logo-text { font-size: 1.1rem; }
    .pe-header-badge { font-size: 0.68rem; padding: 3px 8px; gap: 4px; }

    /* Sayfa basligini kucult */
    .pe-page-header { padding: 14px 16px 10px; }
    .pe-page-header h1 { font-size: 1.3rem; margin-bottom: 6px; line-height: 1.2; }
    .pe-page-header p { font-size: 0.82rem; }

    /* A4’yi telefon genişliğine tam oturacak şekilde ölçekle */
    /* 390px viewport, 16px padding her yanda = ~358px kullanılabilir alan */
    /* 210mm ≈ 794px → zoom = 358/794 ≈ 0.45 */
    .pe-preview-panel {
        padding: 16px 8px;
        overflow: hidden;
    }
    .pe-a4 {
        zoom: 0.45;
        transform: none;
        margin-bottom: 0;
        width: 210mm;
    }

    .pe-mobile-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .pe-mobile-actions .pe-btn { min-width: 100px; }
}

/* ─────────────────────────────────
   YAZDIR / PRINT
   ─────────────────────────────────
   @page margin:0 → Tarayıcının tarih/URL/header'larını TAMAMEN kapatır
   ───────────────────────────────── */
@media print {
    @page {
        margin: 0;          /* Tarayıcı başlık/altlık (tarih, URL) yok */
        size: A4 portrait;
    }

    /* Her şeyi gizle */
    html, body {
        background: white !important;
        margin: 0 !important; padding: 0 !important;
    }
    body * { visibility: hidden !important; }

    /* Sadece A4 içeriği görünsün */
    #pe-a4-document,
    #pe-a4-document * {
        visibility: visible !important;
    }

    #pe-a4-document {
        position: fixed !important;
        top: 0 !important; left: 0 !important;
        width: 210mm !important;
        min-height: auto !important;
        padding: 15mm 18mm !important;
        margin: 0 !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    /* contenteditable odak kenarlığını baskıda gizle */
    .pe-var { outline: none !important; box-shadow: none !important; background: none !important; }
    .pe-var.empty::after { display: none !important; }
}

/* ============================================
   GLOBAL UI ELEMENTS (Loader, Toast, A11y Focus)
   ============================================ */

/* A11y Focus Ring (Görsel Odak) */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* Tam Ekran Yükleme (Overlay) */
.pe-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.pe-overlay.active { opacity: 1; pointer-events: all; }

/* Spinner Animasyonu */
.pe-spinner {
    width: 40px; height: 40px;
    border: 3px solid rgba(37, 99, 235, 0.2); border-radius: 50%;
    border-top-color: var(--brand); animation: spin 1s ease-in-out infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Toast Bildirimi (Başarı mesajı) */
.pe-toast {
    position: fixed; bottom: -80px; left: 50%; transform: translateX(-50%); z-index: 9998;
    background: white; color: var(--text-main); font-weight: 600; font-size: 0.95rem;
    padding: 12px 24px; border-radius: var(--r-xl);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); border: 1px solid var(--c-border);
    display: flex; align-items: center; gap: 8px;
    opacity: 0; transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.pe-toast.show { bottom: 32px; opacity: 1; }

/* Custom Modal */
.pe-modal-box {
    background: white; border-radius: var(--r-xl); padding: 32px;
    max-width: 400px; width: 90%; text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    transform: scale(0.95); opacity: 0; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overscroll-behavior: contain;
}
.pe-overlay.active .pe-modal-box { transform: scale(1); opacity: 1; }
.pe-modal-icon { width: 44px; height: 44px; color: #EF4444; margin-bottom: 16px; }
.pe-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pe-modal-btn {
    padding: 10px; border-radius: var(--r-sm); font-family: inherit; font-size: 0.95rem; font-weight: 600;
    cursor: pointer; transition: 0.2s; border: 1px solid transparent;
}
.pe-modal-btn.cancel { background: white; color: var(--text-main); border-color: var(--c-border); }
.pe-modal-btn.cancel:hover { background: var(--bg-hover); }
.pe-modal-btn.confirm { background: #EF4444; color: white; }
.pe-modal-btn.confirm:hover { background: #DC2626; box-shadow: 0 4px 12px rgba(239,68,68,0.2); }

/* ─── prefers-reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .pe-toast { transition: none; }
    .pe-modal-box { transition: none; }
    .pe-spinner { animation: none; }
}

/* ============================================
   TOOLTIPS
   ============================================ */
.pe-tooltip {
    position: relative;
    display: inline-flex;
    margin-left: 6px;
    cursor: help;
}
.pe-tooltip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 8px;
    background: var(--text-main);
    color: var(--bg-main);
    padding: 6px 12px;
    border-radius: var(--r-sm);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: var(--shadow-md);
    pointer-events: none;
    z-index: 10;
}
.pe-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */
.pe-theme-toggle {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: all 0.3s;
}
.pe-theme-toggle:hover {
    background: var(--bg-hover);
    color: var(--brand);
}
html.dark .pe-theme-toggle .moon-icon { display: none; }
html.dark .pe-theme-toggle .sun-icon { display: block; }
html:not(.dark) .pe-theme-toggle .moon-icon { display: block; }
html:not(.dark) .pe-theme-toggle .sun-icon { display: none; }

/* ============================================
   DARK MODE (Gece Modu)
   ============================================ */

/* CSS değişkenlerini html.dark üzerinde tanımla (nested :root çalışmaz) */
html.dark {
    --bg-main:      #111827;
    --bg-panel:     #1F2937;
    --bg-hover:     #374151;
    --c-border:     #374151;
    --brand:        #3B82F6;
    --brand-soft:   rgba(59, 130, 246, 0.1);
    --text-main:    #F9FAFB;
    --text-muted:   #9CA3AF;
    --parchment:    #FFFFFF;
}

/* Dark mode — flat selectors */
html.dark body { background: var(--bg-main); color: var(--text-main); }

html.dark .pe-header { background: rgba(31,41,55,0.92); border-bottom-color: var(--c-border); }
html.dark .pe-header-inner { background: transparent; }
html.dark .pe-form-panel { background: var(--bg-panel); border-color: var(--c-border); }
html.dark .pe-panel-head { border-bottom-color: var(--c-border); }
html.dark .pe-input { background: var(--bg-main); color: var(--text-main); border-color: var(--c-border); }
html.dark .pe-input:focus { border-color: var(--brand); background: var(--bg-panel); }
html.dark .pe-input::placeholder { color: #6B7280; }
html.dark .pe-download-strip { background: var(--bg-main); border-color: var(--c-border); }

html.dark .pe-action-rail { background: var(--bg-panel); border-color: var(--c-border); }
html.dark .pe-rail-btn { background: var(--bg-main); border-color: var(--c-border); color: var(--text-main); }
html.dark .pe-rail-btn:hover { background: var(--bg-hover); }

html.dark .pe-doc-card { background: var(--bg-panel); border-color: var(--c-border); }
html.dark .pe-doc-card:hover { border-color: var(--brand); background: #273142; }

html.dark .pe-search-input { background: var(--bg-panel); color: var(--text-main); border-color: var(--c-border); }
html.dark .pe-search-input:focus { background: var(--bg-main); border-color: var(--brand); }
html.dark .pe-filter-btn { background: var(--bg-panel); border-color: var(--c-border); color: var(--text-main); }
html.dark .pe-filter-btn:hover { background: var(--bg-hover); }
html.dark .pe-filter-btn.active { background: var(--brand); color: white; border-color: var(--brand); }

html.dark .pe-faq-item { background: var(--bg-panel); border-color: var(--c-border); }
html.dark .pe-related-grid a { background: var(--bg-panel) !important; border-color: var(--c-border) !important; }
html.dark .pe-related-grid a:hover { border-color: var(--brand) !important; }

html.dark .pe-modal-box { background: var(--bg-panel); color: var(--text-main); }
html.dark .pe-modal-btn.cancel { background: var(--bg-main); color: var(--text-main); border-color: var(--c-border); }

html.dark .pe-mobile-tabs button { background: var(--bg-panel); color: var(--text-main); border-color: var(--c-border); }
html.dark .pe-mobile-tabs button.active { background: var(--brand); color: white; border-color: var(--brand); }

html.dark footer { background: var(--bg-panel) !important; border-top-color: var(--c-border) !important; }
html.dark footer > div { background: transparent !important; border-color: var(--c-border) !important; }

html.dark .pe-overlay { background: rgba(17, 24, 39, 0.8) !important; }

html.dark .pe-a4 { background: #FFF; color: #000; }