/* ═══════════════════════════════════════════════════════════════════════
   ERPIN — `pr-` SAYFA TASARIM SİSTEMİ (paylaşılan)
   ───────────────────────────────────────────────────────────────────────
   Kaynak: pages/katalog-tasarimi.php ve pages/menu-tasarimi.php içindeki
   gömülü <style> bloklarının ORTAK çekirdeği. Elle yazıldı — otomatik
   ayıklama `.premium-sm-page` (font tabanı) ve bölüm dolgularını
   kaçırmıştı, sayfa fontsuz ve boşluksuz kalıyordu.

   NOT: katalog ve menü sayfaları kendi gömülü kopyalarıyla çalışmaya
   devam ediyor; onlara dokunulmadı. Bu dosya YENİ sayfalar içindir.
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ── Taban ─────────────────────────────────────────────────────────── */
.premium-sm-page {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    background: #f8fafc;
    color: #334155;
    line-height: 1.6;
    overflow-x: hidden;
}
.premium-sm-page h1,
.premium-sm-page h2,
.premium-sm-page h3,
.premium-sm-page h4 {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: #0b1d45;
    font-weight: 700;
    margin-top: 0;
}
.premium-sm-page a { text-decoration: none; }

.pr-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* ── Butonlar ──────────────────────────────────────────────────────── */
.pr-btn-primary {
    display: inline-flex; align-items: center; gap: 10px;
    background: #2563eb; color: #fff !important;
    padding: 16px 36px; border-radius: 12px;
    font-weight: 600; font-size: 16px;
    transition: all .3s; box-shadow: 0 10px 20px rgba(37, 99, 235, .25);
    border: 1px solid #3b82f6;
}
.pr-btn-primary:hover { background: #1d4ed8; transform: translateY(-2px); box-shadow: 0 15px 30px rgba(37, 99, 235, .35); }

.pr-btn-outline {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, .05); color: #fff !important;
    padding: 16px 36px; border-radius: 12px;
    font-weight: 600; font-size: 16px;
    border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(12px); transition: all .3s;
}
.pr-btn-outline:hover { background: rgba(255, 255, 255, .15); transform: translateY(-2px); }

.pr-btn-ghost {
    display: inline-flex; align-items: center; gap: 10px;
    background: #fff; color: #0b1d45 !important;
    padding: 16px 36px; border-radius: 12px;
    font-weight: 600; font-size: 16px;
    border: 1px solid #e2e8f0; transition: all .3s;
}
.pr-btn-ghost:hover { border-color: #2563eb; color: #2563eb !important; transform: translateY(-2px); }

/* ── Hero ──────────────────────────────────────────────────────────── */
.pr-hero {
    position: relative;
    padding: 180px 0 140px;
    background: linear-gradient(135deg, rgba(11, 29, 69, .88) 0%, rgba(15, 23, 42, .92) 100%);
    color: #fff;
    overflow: hidden;
}
.pr-hero--img { background-size: cover; background-position: center; }
.pr-hero-content { position: relative; z-index: 2; max-width: 820px; }
.pr-hero h1 { font-size: 54px; line-height: 1.15; letter-spacing: -1.5px; color: #fff !important; margin-bottom: 24px; }
.pr-hero h1 span { color: #60a5fa; }
.pr-hero p { font-size: 19px; color: rgba(255, 255, 255, .82); max-width: 660px; margin: 0 0 34px; line-height: 1.7; }
.pr-hero-btns { display: flex; flex-wrap: wrap; gap: 14px; }

.pr-badge {
    display: inline-flex; align-items: center;
    background: rgba(96, 165, 250, .15); color: #93c5fd;
    border: 1px solid rgba(96, 165, 250, .35);
    padding: 8px 18px; border-radius: 50px;
    font-size: 13.5px; font-weight: 700; letter-spacing: .04em;
    margin-bottom: 24px;
}

/* ── Bölümler ──────────────────────────────────────────────────────── */
.pr-section     { padding: 110px 0; background: #fff; }
.pr-section-alt { padding: 110px 0; background: #f8fafc; }
.pr-section-tight { padding: 80px 0; }

.pr-section-header { text-align: center; max-width: 760px; margin: 0 auto 60px; }
.pr-section-header--left { text-align: left; margin-left: 0; }
.pr-subtitle {
    display: block; color: #2563eb; font-weight: 800; font-size: 14px;
    text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px;
}
.pr-section-header h2 { font-size: 40px; margin-bottom: 20px; letter-spacing: -1px; line-height: 1.2; }
.pr-section-header p { font-size: 18px; color: #64748b; margin: 0; line-height: 1.7; }

/* Bölüm içi serbest metin */
.pr-prose { max-width: 760px; margin: 0 auto; color: #475569; font-size: 17px; line-height: 1.8; }
.pr-prose--left { margin-left: 0; }
.pr-prose p + p { margin-top: 18px; }
.pr-prose strong { color: #0b1d45; font-weight: 700; }
.pr-prose a { color: #2563eb; font-weight: 700; }

/* ── SSS ───────────────────────────────────────────────────────────── */
.pr-faq { max-width: 880px; margin: 0 auto; display: grid; gap: 14px; }
.pr-faq details {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
    padding: 0 24px; transition: border-color .25s, box-shadow .25s;
}
.pr-section-alt .pr-faq details { background: #fff; }
.pr-faq details[open] { border-color: #2563eb; box-shadow: 0 10px 30px -12px rgba(37, 99, 235, .28); }
.pr-faq summary {
    list-style: none; cursor: pointer; position: relative;
    padding: 22px 44px 22px 0; font-weight: 700; font-size: 17.5px; color: #0b1d45;
}
.pr-faq summary::-webkit-details-marker { display: none; }
.pr-faq summary::after {
    content: "+"; position: absolute; right: 4px; top: 17px;
    font-size: 26px; font-weight: 400; color: #2563eb; transition: transform .25s;
}
.pr-faq details[open] summary::after { content: "–"; }
.pr-faq-a {
    padding: 0 0 22px; color: #64748b; font-size: 16px; line-height: 1.8;
    border-top: 1px solid #eef2f7; padding-top: 18px; margin-top: 2px;
}

/* ── CTA kutusu ────────────────────────────────────────────────────── */
.pr-cta-box {
    background: linear-gradient(135deg, #0b1d45 0%, #13315c 100%);
    border-radius: 24px; padding: 64px 48px; text-align: center; color: #fff;
}
.pr-cta-box h2 { color: #fff !important; font-size: 36px; letter-spacing: -.8px; margin-bottom: 16px; }
.pr-cta-box p { color: rgba(255, 255, 255, .8); font-size: 18px; max-width: 620px; margin: 0 auto 32px; line-height: 1.7; }

/* ── APPLE TARZI KAYDIRMA BELİRME ──────────────────────────────────
   Öğeler görünür alana girince yumuşakça yükselerek belirir.
   JS yoksa ya da kullanıcı hareket azaltma istiyorsa içerik NORMAL
   görünür — erişilebilirlik ve "JS çökerse sayfa boş kalır" riski için. */
/* GÜVENLİ VARSAYILAN: içerik görünür. Gizleme yalnızca JS <html>'e
   `js-anim` eklediğinde devreye girer; JS çalışmazsa hiçbir şey kaybolmaz. */
.js-anim .pr-reveal { opacity: 0; transform: translateY(26px); }
.pr-reveal { transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.js-anim .pr-reveal.pr-in { opacity: 1; transform: none; }
.pr-reveal-d1 { transition-delay: .08s; }
.pr-reveal-d2 { transition-delay: .16s; }
.pr-reveal-d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
    .js-anim .pr-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── MOBİL ─────────────────────────────────────────────────────────
   assets/css/mobile-optimization.css 768px altında h1/h2/h3 ve p'yi
   !important ile eziyor. Aşağısı bu sistemi kullanan sayfalarda geri alır. */
@media (max-width: 991px) {
    .pr-hero { padding: 140px 0 90px; }
    .pr-hero h1 { font-size: 40px; letter-spacing: -1px; }
    .pr-hero p { font-size: 17px; }
    .pr-section, .pr-section-alt { padding: 80px 0; }
    .pr-section-header { margin-bottom: 44px; }
    .pr-section-header h2 { font-size: 32px; }
    .pr-cta-box { padding: 48px 28px; }
    .pr-cta-box h2 { font-size: 28px; }
}
@media (max-width: 768px) {
    .pr-hero h1 { font-size: 34px !important; line-height: 1.2 !important; }
    .pr-hero p { font-size: 16.5px !important; }
    .pr-section-header h2 { font-size: 27px !important; }
    .pr-section-header p { font-size: 16.5px !important; }
    .pr-prose { font-size: 16px !important; }
    .pr-faq summary { font-size: 16.5px !important; padding-right: 38px; }
    .pr-faq-a { font-size: 15.5px !important; }
    .pr-btn-primary, .pr-btn-outline, .pr-btn-ghost { font-size: 15px !important; padding: 15px 28px; width: 100%; justify-content: center; }
    .pr-hero-btns { gap: 10px; }
    .pr-cta-box p { font-size: 16px !important; }
}