/*
 * SimpleHero — açık zeminli, ekran yüksekliğine uyan sade giriş bölümü. Bağımlılıksız; JS olmadan da çalışır.
 * Görünüm yalnızca aşağıdaki değişkenlerle ayarlanır: projeye taşırken kendi token'larına bağla (README.md).
 */
.simple-hero {
    --simple-hero-bg: #f7f7f4;
    --simple-hero-ink: #262510;
    --simple-hero-muted: #7a7974;
    --simple-hero-line: #cdcdc9;
    --simple-hero-accent: #f54e00;
    --simple-hero-font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --simple-hero-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    --simple-hero-radius: 4px;
    --simple-hero-width: 860px;
    /* Üstte sabit/yapışkan bir başlık varsa yüksekliği (simple-hero.js ölçer ya da elle verilir). */
    --simple-hero-offset: 0px;

    position: relative; isolation: isolate; overflow: hidden;
    display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    min-height: calc(100vh - var(--simple-hero-offset));
    min-height: calc(100svh - var(--simple-hero-offset));
    padding: clamp(40px, 9svh, 112px) 24px;
    background: var(--simple-hero-bg); color: var(--simple-hero-ink);
    font-family: var(--simple-hero-font);
}
.simple-hero *, .simple-hero *::before, .simple-hero *::after { box-sizing: border-box; }

/* İsteğe bağlı arka plan katmanı (animasyon, görsel, desen…): bölümün tamamını kaplar, içeriğin altında kalır. */
.simple-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.simple-hero__inner {
    position: relative; z-index: 1; width: 100%; max-width: var(--simple-hero-width); margin: 0 auto; text-align: center;
    animation: simple-hero-in 0.6s ease-out both;
}

.simple-hero__eyebrow {
    margin: 0 0 clamp(16px, 3svh, 28px); font-family: var(--simple-hero-mono); font-size: 12px; line-height: 1.4;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--simple-hero-muted);
}

/* Başlık ekranın hem genişliğine hem yüksekliğine göre ölçeklenir: alçak/geniş ekranda da tek bakışta sığar. */
.simple-hero__title {
    margin: 0; font-family: inherit; font-weight: 400; font-size: clamp(38px, min(7.2vw, 10svh), 84px);
    line-height: 1.02; letter-spacing: -0.035em; color: var(--simple-hero-ink); text-wrap: balance;
}
.simple-hero__title em { font-style: normal; color: var(--simple-hero-muted); }

.simple-hero__lead {
    max-width: 620px; margin: clamp(16px, 3svh, 28px) auto 0; font-size: clamp(16px, 1.1vw + 10px, 19px); line-height: 1.55;
    color: var(--simple-hero-muted); text-wrap: pretty;
}
.simple-hero__lead strong { font-weight: 600; color: var(--simple-hero-ink); }

/* Projeye özgü içerik (arama kutusu, form, görsel…) için serbest alan. */
.simple-hero__slot { margin-top: clamp(24px, 5svh, 44px); }

.simple-hero__actions {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px;
    margin-top: clamp(20px, 4svh, 36px);
}
.simple-hero__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 18px;
    /* Zemin rengi dolgusu: düz zeminde saydam görünür, arka plan katmanı varsa düğme okunaklı kalır. */
    border: 1px solid var(--simple-hero-line); border-radius: var(--simple-hero-radius); background: var(--simple-hero-bg);
    font: 600 14px/1 var(--simple-hero-font); color: var(--simple-hero-ink); text-decoration: none; cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}
.simple-hero__btn:hover { border-color: var(--simple-hero-ink); text-decoration: none; }
.simple-hero__btn--accent { border-color: var(--simple-hero-accent); color: var(--simple-hero-accent); }
.simple-hero__btn--accent:hover { border-color: var(--simple-hero-accent); background: color-mix(in srgb, var(--simple-hero-accent) 8%, var(--simple-hero-bg)); }
.simple-hero__btn:focus-visible { outline: 2px solid var(--simple-hero-ink); outline-offset: 2px; }

@keyframes simple-hero-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 560px) {
    .simple-hero { padding-inline: 16px; }
    .simple-hero__actions { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
    .simple-hero__inner { animation: none; }
}