/**
 * İndrm — reklam ajansları için tanıtım (landing) sayfası stilleri.
 *
 * BİLEREK İZOLE: style.css'e (tüketici/QR akışı sayfalarının stili) hiç
 * dokunmuyoruz, oradan da hiçbir şey buraya import etmiyoruz. Bu dosya
 * sadece index.php tarafından kullanılır — /r/{slug}, /admin, /dogrula.php
 * bu dosyadan tamamen bağımsızdır.
 */

:root {
    --marine:      #0E5E5C;
    --marine-dark: #0A1F1E;
    --amber:       #C0631F;
    --amber-light: #E0955A;
    --foam:        #DCEEEC;
    --ink:         #13201F;
    --ink-soft:    #4E6260;
    --paper:       #F5F8F7;

    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body:    'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

    --radius: 10px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Üst bar ---------- */

.l-topbar {
    background: var(--marine-dark);
    color: var(--foam);
    padding: 20px 0;
}
.l-topbar .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.l-brand {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.01em;
    text-decoration: none;
}
.l-topbar-tag {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--foam);
    opacity: 0.75;
    text-transform: uppercase;
}

/* ---------- Hero ---------- */

.l-hero {
    background: var(--marine-dark);
    color: var(--foam);
    padding: 72px 0 88px;
}
.l-hero .wrap { max-width: 820px; }
.l-eyebrow {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--amber-light);
    margin: 0 0 18px;
}
.l-hero h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(34px, 5.4vw, 54px);
    line-height: 1.12;
    margin: 0 0 22px;
    color: #fff;
    max-width: 15ch;
}
.l-hero p {
    font-size: 18px;
    line-height: 1.6;
    color: var(--foam);
    opacity: 0.88;
    max-width: 46ch;
    margin: 0 0 34px;
}

.l-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    padding: 14px 26px;
    border-radius: var(--radius);
    text-decoration: none;
    border: none;
    cursor: pointer;
}
.l-btn-primary {
    background: var(--amber);
    color: #fff;
}
.l-btn-primary:hover { background: #a8551a; }
.l-btn-ghost {
    background: transparent;
    color: var(--foam);
    border: 1px solid rgba(220,238,236,0.35);
}
.l-btn-ghost:hover { border-color: rgba(220,238,236,0.6); }

.l-hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* ---------- Bölüm başlıkları ---------- */

.l-section { padding: 76px 0; }
.l-section-alt { background: var(--foam); }

.l-section-head { max-width: 640px; margin: 0 0 44px; }
.l-kicker {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--marine);
    margin: 0 0 14px;
}
.l-section-head h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(26px, 3.4vw, 34px);
    line-height: 1.22;
    color: var(--ink);
    margin: 0 0 14px;
}
.l-section-head p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-soft);
    margin: 0;
}

/* ---------- Nasıl çalışır (ekran görüntülü adımlar) ---------- */

.l-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
@media (max-width: 820px) {
    .l-steps { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
}
.l-step-num {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--marine);
    margin: 0 0 12px;
}
.l-step-shot {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid #CBD9D6;
    box-shadow: 0 12px 28px -14px rgba(10,31,30,0.28);
    margin: 0 0 18px;
}
.l-step-shot img { width: 100%; }
.l-step p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0;
}

/* ---------- Neden İndrm ---------- */

.l-why {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
@media (max-width: 820px) {
    .l-why { grid-template-columns: 1fr; }
}
.l-why-card {
    background: #fff;
    border: 1px solid #E1EAE8;
    border-radius: var(--radius);
    padding: 28px 26px;
}
.l-why-card h3 {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 10px;
}
.l-why-card p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0;
}

/* ---------- Gerçek akışı deneyin (opsiyonel, ikincil) ---------- */

.l-try {
    border-top: 1px solid #CBD9D6;
    padding-top: 28px;
    margin-top: 8px;
}
.l-try p {
    font-size: 14px;
    color: var(--ink-soft);
    margin: 0;
}
.l-try a { color: var(--marine); font-weight: 600; text-decoration: none; }
.l-try a:hover { text-decoration: underline; }

/* ---------- İletişim ---------- */

.l-contact {
    background: var(--marine-dark);
    color: var(--foam);
    padding: 76px 0;
    text-align: center;
}
.l-contact .wrap { max-width: 620px; }
.l-contact h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(24px, 3.2vw, 30px);
    color: #fff;
    margin: 0 0 16px;
}
.l-contact p {
    font-size: 16px;
    color: var(--foam);
    opacity: 0.85;
    margin: 0 0 30px;
}
.l-contact-ctas {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.l-contact-detail {
    margin-top: 26px;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--foam);
    opacity: 0.7;
}

/* ---------- Footer ---------- */

.l-footer {
    padding: 28px 0 40px;
    text-align: center;
}
.l-footer p {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink-soft);
    margin: 0;
}