/* ============================================================
   Dersmetre — pazarlama (halka acik) sayfalarinin ortak stili.
   Kaynak: Views/Welcome/Index.cshtml icindeki gomulu <style> blogu,
   birebir cikarilmistir (Razor'daki "@@media" burada "@media" olur).
   Uygulama ici Arc temasindan (arc.min.css) BAGIMSIZDIR; bu dosya
   Tailwind uretmez, elle yazilir — gulp build gerektirmez.
   Kullanan: Views/Shared/_LayoutPazarlama.cshtml
   ============================================================ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
    --brand:#1c2955; --brand-2:#2a3a6e; --on-brand:#ffffff;
    --bg:#f6f4ee; --surface:#fffdf8; --surface-2:#f0ede3;
    --ink:#22201b; --ink-soft:#6d6a62; --border:#e6e1d5;
    --ok:#2f8f5b; --warn:#b8860b; --accent:#1c2955;
    --font-d:'Fraunces',Georgia,serif; --font-b:'Inter',system-ui,sans-serif;
    --maxw:1180px;
}
html { scroll-behavior:smooth; }
body { font-family:var(--font-b); color:var(--ink); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
h1,h2,h3 { font-family:var(--font-d); font-weight:600; line-height:1.12; letter-spacing:-.01em; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); background:color-mix(in srgb,var(--brand) 8%,transparent); border:1px solid color-mix(in srgb,var(--brand) 18%,transparent); padding:6px 13px; border-radius:999px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 22px; border-radius:13px; font-size:14.5px; font-weight:700; border:0; cursor:pointer; transition:.15s; white-space:nowrap; }
.btn.primary { background:var(--brand); color:var(--on-brand); }
.btn.primary:hover { background:var(--brand-2); transform:translateY(-1px); box-shadow:0 12px 26px -12px color-mix(in srgb,var(--brand) 60%,transparent); }
.btn.ghost { background:var(--surface); color:var(--ink); border:1px solid var(--border); }
.btn.ghost:hover { border-color:var(--brand); color:var(--brand); }
.btn.lg { padding:15px 28px; font-size:15.5px; }
svg.ic { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

/* ---- navbar ---- */
header { position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:.2s; }
header.scrolled { border-bottom-color:var(--border); background:color-mix(in srgb,var(--bg) 94%,transparent); }
.nav { display:flex; align-items:center; gap:18px; height:68px; }
.brand { display:flex; align-items:center; gap:11px; font-family:var(--font-d); font-weight:700; font-size:20px; color:var(--ink); }
.brand .logo { width:38px; height:38px; border-radius:11px; background:var(--brand); color:var(--on-brand); display:grid; place-items:center; }
.brand .logo svg { width:21px; height:21px; }
.nav-links { display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav-links a { padding:9px 14px; border-radius:10px; font-size:14px; font-weight:600; color:var(--ink-soft); }
.nav-links a:hover { color:var(--ink); background:var(--surface-2); }
.nav-cta { display:flex; align-items:center; gap:10px; }
.burger { display:none; width:42px; height:42px; border-radius:11px; border:1px solid var(--border); background:var(--surface); color:var(--ink); place-items:center; cursor:pointer; }
/* Mobil menudeki giris satiri: masaustunde ustteki ghost buton zaten var, gizli durur. */
.nav-links .nav-giris-mobil { display:none; }
@media (max-width:960px){
    .nav-links { display:none; position:absolute; top:68px; left:0; right:0; flex-direction:column; align-items:stretch; gap:2px; background:var(--surface); border-bottom:1px solid var(--border); padding:12px 16px 16px; margin:0; box-shadow:0 20px 40px -20px rgba(0,0,0,.25); }
    body.menu-open .nav-links { display:flex; }
    .nav-links a { padding:12px 14px; font-size:15px; }
    .burger { display:grid; }
    .nav-cta .btn.ghost { display:none; }
    /* ghost buton gizlendigi icin giris yolunu menude acik tut */
    .nav-links .nav-giris-mobil { display:block; margin-top:8px; padding-top:14px; border-top:1px solid var(--border); color:var(--brand); font-weight:700; }
    .nav-links .nav-giris-mobil:hover { background:var(--surface-2); }
}

/* ---- hero ---- */
.hero { position:relative; padding:64px 0 40px; }
.hero::before { content:''; position:absolute; inset:0; z-index:-1; background:
    radial-gradient(680px 380px at 8% -10%, color-mix(in srgb,var(--brand) 12%,transparent), transparent 70%),
    radial-gradient(620px 360px at 100% 0%, color-mix(in srgb,var(--brand) 9%,transparent), transparent 70%); }
.hero-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:52px; align-items:center; }
.hero h1 { font-size:clamp(34px,4.6vw,56px); margin:18px 0 0; text-wrap:balance; }
.hero p.lead { font-size:clamp(16px,1.7vw,19px); color:var(--ink-soft); margin-top:18px; max-width:38ch; }
.hero-cta { display:flex; flex-wrap:wrap; gap:13px; margin-top:28px; }
/* Hero ve kapanis CTA'sinin altindaki ikincil giris satiri (mevcut musteri icin) */
.hero-giris { font-size:13.5px; color:var(--ink-soft); margin-top:13px; }
.hero-giris a { color:var(--brand); font-weight:600; text-decoration:underline; }
.cta-giris { position:relative; font-size:13.5px; margin-top:18px !important; color:color-mix(in srgb,var(--on-brand) 72%,transparent); }
.cta-giris a { color:var(--on-brand); font-weight:600; text-decoration:underline; }

.chips { display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }
.chip { font-size:12.5px; font-weight:600; color:var(--ink-soft); background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:6px 13px; }
.chip b { color:var(--brand); }

/* ---- browser frame (screenshot cerceve) ---- */
.frame { border-radius:16px; border:1px solid var(--border); background:var(--surface); box-shadow:0 30px 60px -28px rgba(28,41,85,.4), 0 8px 20px -12px rgba(0,0,0,.15); overflow:hidden; }
.frame .bar { display:flex; align-items:center; gap:7px; padding:11px 14px; background:var(--surface-2); border-bottom:1px solid var(--border); }
.frame .bar i { width:11px; height:11px; border-radius:50%; background:#d9d4c7; display:block; }
.frame .bar i:nth-child(1){ background:#e07a5f; } .frame .bar i:nth-child(2){ background:#e6b95c; } .frame .bar i:nth-child(3){ background:#6fae86; }
.frame img { display:block; width:100%; height:auto; }
.hero .frame { transform:perspective(1600px) rotateY(-6deg) rotateX(1.5deg); transform-origin:left center; }

/* ---- section ---- */
/* Sticky header 68px; capa hedefi onun altinda kalmasin (ozellikle diger
   sayfalardan gelen "/#bolum" linklerinde). */
section[id], a[id] { scroll-margin-top:84px; }
section.blk { padding:66px 0; }
section.blk.tint { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.sec-head { text-align:center; max-width:640px; margin:0 auto 44px; }
.sec-head h2 { font-size:clamp(26px,3.2vw,38px); }
.sec-head p { color:var(--ink-soft); font-size:16.5px; margin-top:12px; }

/* ---- neden (value props) ---- */
.props { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.prop { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:26px 24px; }
section.tint .prop { background:var(--bg); }
.prop .pic { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:color-mix(in srgb,var(--brand) 10%,transparent); color:var(--brand); margin-bottom:14px; }
.prop .pic svg { width:23px; height:23px; }
.prop h3 { font-size:18px; }
.prop p { color:var(--ink-soft); font-size:14.5px; margin-top:8px; }

/* ---- ozellik satirlari (screenshot + metin) ---- */
.feat { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.feat + .feat { margin-top:64px; }
.feat.rev .txt { order:2; }
.feat .kd { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--brand); }
.feat h3 { font-size:clamp(22px,2.5vw,29px); margin-top:12px; }
.feat p { color:var(--ink-soft); font-size:15.5px; margin-top:14px; }
.feat ul { list-style:none; margin-top:16px; display:grid; gap:10px; }
.feat li { display:flex; gap:11px; font-size:14.5px; color:var(--ink); }
.feat li svg { width:20px; height:20px; color:var(--ok); margin-top:1px; }

/* ---- ozellik izgarasi ---- */
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:15px; padding:22px; transition:.15s; }
section.tint .card { background:var(--bg); }
.card:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--brand) 35%,var(--border)); box-shadow:0 16px 34px -22px rgba(28,41,85,.4); }
.card .pic { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:color-mix(in srgb,var(--brand) 9%,transparent); color:var(--brand); margin-bottom:13px; }
.card .pic svg { width:21px; height:21px; }
.card h3 { font-size:16.5px; }
.card p { color:var(--ink-soft); font-size:13.8px; margin-top:6px; }

/* ---- kimler icin ---- */
.who { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:20px; }
.who .col { border-radius:18px; padding:28px 26px; border:1px solid var(--border); }
.who .col.koc { background:var(--brand); color:var(--on-brand); border-color:var(--brand); }
.who .col.alt { background:var(--surface); }
section.tint .who .col.alt { background:var(--bg); }
.who .badge { font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; opacity:.9; }
.who .col.koc .badge { color:color-mix(in srgb,var(--on-brand) 82%,transparent); }
.who .col.alt .badge { color:var(--brand); }
.who h3 { font-size:21px; margin-top:8px; }
.who .col.alt h3 { color:var(--ink); }
.who ul { list-style:none; margin-top:16px; display:grid; gap:11px; }
.who li { display:flex; gap:10px; font-size:14.5px; }
.who li svg { width:19px; height:19px; margin-top:1px; flex-shrink:0; }
.who .col.koc li svg { color:color-mix(in srgb,var(--on-brand) 80%,transparent); }
.who .col.alt li svg { color:var(--ok); }

/* ---- nasil calisir ---- */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:st; }
.step { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:15px; padding:24px 22px; }
section.tint .step { background:var(--bg); }
.step .no { counter-increment:st; font-family:var(--font-d); font-weight:700; font-size:15px; width:36px; height:36px; border-radius:10px; background:var(--brand); color:var(--on-brand); display:grid; place-items:center; margin-bottom:14px; }
.step .no::before { content:counter(st); }
.step h3 { font-size:16.5px; }
.step p { color:var(--ink-soft); font-size:14px; margin-top:7px; }

/* ---- cta ---- */
.cta { background:var(--brand); color:var(--on-brand); border-radius:24px; padding:56px 40px; text-align:center; position:relative; overflow:hidden; }
.cta::before { content:''; position:absolute; inset:0; background:radial-gradient(500px 300px at 90% 10%, color-mix(in srgb,#fff 10%,transparent), transparent 70%); }
.cta h2 { font-size:clamp(26px,3.2vw,36px); position:relative; }
.cta p { position:relative; margin:14px auto 26px; max-width:52ch; font-size:16.5px; color:color-mix(in srgb,var(--on-brand) 85%,transparent); }
.cta .btn.primary { background:var(--on-brand); color:var(--brand); position:relative; }
.cta .btn.primary:hover { background:color-mix(in srgb,var(--on-brand) 88%,var(--brand)); }

/* ---- ic sayfalar: iki yol kartlari (or. /iletisim) ---- */
.yollar { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.yol { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:28px 26px; display:flex; flex-direction:column; }
.yol.vurgu { background:var(--brand); color:var(--on-brand); border-color:var(--brand); }
.yol .badge { font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--brand); }
.yol.vurgu .badge { color:color-mix(in srgb,var(--on-brand) 82%,transparent); }
.yol h2 { font-size:21px; margin-top:8px; }
.yol p { font-size:14.5px; margin-top:12px; color:var(--ink-soft); flex:1; }
.yol.vurgu p { color:color-mix(in srgb,var(--on-brand) 88%,transparent); }
.yol .btn { margin-top:22px; align-self:flex-start; }
.yol.vurgu .btn.primary { background:var(--on-brand); color:var(--brand); }
.yol.vurgu .btn.primary:hover { background:color-mix(in srgb,var(--on-brand) 88%,var(--brand)); }

/* ---- ic sayfalar: iletisim kanallari ---- */
.kanallar { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.kanal { background:var(--bg); border:1px solid var(--border); border-radius:15px; padding:22px; display:flex; flex-direction:column; align-items:flex-start; transition:.15s; }
a.kanal:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--brand) 35%,var(--border)); box-shadow:0 16px 34px -22px rgba(28,41,85,.4); }
.kanal .pic { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:color-mix(in srgb,var(--brand) 9%,transparent); color:var(--brand); margin-bottom:13px; }
.kanal .pic svg { width:21px; height:21px; }
.kanal-ad { font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); }
.kanal-deger { font-size:15.5px; font-weight:600; color:var(--ink); margin-top:4px; word-break:break-word; }
.kanal-not { text-align:center; font-size:14px; color:var(--ink-soft); margin-top:26px; }

@media (max-width:760px){
    .yollar { grid-template-columns:1fr; }
    .kanallar { grid-template-columns:1fr; }
}

/* ---- form (on basvuru) ---- */
/* Paletde hata rengi YOKTU (--ok / --warn vardi). Kagit zemin (#fffdf8) uzerinde ~6:1 → AA gecer.
   Hata metnini --ink-soft ile verme: gri "hata" gibi okunmaz. */
:root { --err:#b3261e; }

/* Ekran okuyucuya gorunur, goze gorunmez. Tailwind bundle'indan gelmesini BEKLEME —
   pazarlama sayfalari arc.min.css yuklemez. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.form-kart { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:32px 30px; }
.form-grup { margin-bottom:18px; }
.form-satir { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-etiket { display:block; font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:7px; }
.form-etiket .zorunlu { color:var(--err); margin-left:2px; }
.form-yardim { display:block; font-size:12.5px; color:var(--ink-soft); margin-top:6px; }

.form-alan { width:100%; padding:12px 14px; border-radius:11px; border:1px solid var(--border); background:var(--bg); color:var(--ink); font:inherit; font-size:14.5px; transition:.15s; }
.form-alan:hover { border-color:color-mix(in srgb,var(--brand) 30%,var(--border)); }
.form-alan:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent); }
.form-alan:disabled { opacity:.55; cursor:not-allowed; }
textarea.form-alan { resize:vertical; min-height:84px; }
.form-alan[aria-invalid="true"] { border-color:var(--err); }
.form-alan[aria-invalid="true"]:focus { box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 16%,transparent); }

.alan-hata { display:none; font-size:12.5px; color:var(--err); margin-top:6px; font-weight:600; }
.alan-hata.gorunur { display:block; }

/* Radio / secim cipleri — <fieldset> + <legend> ile sarilir (tek tek label yetmez) */
.secim-grup { border:0; padding:0; margin:0; }
.secim-grup legend { font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:9px; padding:0; }
.cipler { display:flex; flex-wrap:wrap; gap:9px; }
.cip { position:relative; }
.cip input { position:absolute; opacity:0; width:0; height:0; }
.cip span { display:inline-block; padding:9px 15px; border-radius:999px; border:1px solid var(--border); background:var(--bg); font-size:14px; font-weight:600; color:var(--ink-soft); cursor:pointer; transition:.15s; }
.cip input:checked + span { background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.cip input:focus-visible + span { outline:2px solid var(--brand); outline-offset:2px; }
.cip span:hover { border-color:color-mix(in srgb,var(--brand) 35%,var(--border)); }

.onay-satir { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--ink-soft); }
.onay-satir input { margin-top:3px; width:16px; height:16px; accent-color:var(--brand); flex-shrink:0; }
.onay-satir a { color:var(--brand); font-weight:600; text-decoration:underline; }

/* Honeypot: goz de ekran okuyucu da gormemeli, ama bot DOM'da gorur */
.tuzak { position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }

.form-uyari { border-radius:12px; padding:13px 15px; font-size:14px; font-weight:600; margin-bottom:20px; }
.form-uyari.hata { background:color-mix(in srgb,var(--err) 8%,transparent); border:1px solid color-mix(in srgb,var(--err) 30%,transparent); color:var(--err); }

/* Aydinlatma metni bilgilendirmesi — gonder butonunun HEMEN USTUNDE durmali ki
   kullanici gondermeden once gormus olsun (aydinlatma yukumlulugu). */
.form-kvkk { font-size:12.5px; color:var(--ink-soft); line-height:1.55; margin:4px 0 16px; padding-top:14px; border-top:1px solid var(--border); }
.form-kvkk a { color:var(--brand); font-weight:600; text-decoration:underline; }

.form-gonder { width:100%; margin-top:6px; }
.form-gonder[aria-busy="true"] { opacity:.7; cursor:progress; }

@media (max-width:640px){
    .form-satir { grid-template-columns:1fr; gap:0; }
    .form-kart { padding:24px 20px; }
}

/* ---- footer (4 sutun) ---- */
footer { padding:52px 0 36px; border-top:1px solid var(--border); margin-top:66px; }
.foot-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr 1.2fr; gap:30px; }
.foot .brand { font-size:18px; }
.foot .brand .logo { width:34px; height:34px; }
.foot-marka p { font-size:13.5px; color:var(--ink-soft); margin-top:14px; max-width:30ch; }
.foot-col h3 { font-family:var(--font-b); font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin-bottom:14px; }
.foot-col a, .foot-col span.satir { display:block; font-size:14px; color:var(--ink-soft); padding:5px 0; }
.foot-col a:hover { color:var(--brand); }
.cp { font-size:12.5px; color:var(--ink-soft); border-top:1px solid var(--border); padding-top:20px; margin-top:38px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }

@media (max-width:860px){
    .foot-grid { grid-template-columns:1fr 1fr; gap:28px; }
    .foot-marka { grid-column:1 / -1; }
}
@media (max-width:520px){
    .foot-grid { grid-template-columns:1fr; }
}

/* ---- scroll reveal (yalniz JS aktifken gizle; .js yoksa icerik HER ZAMAN gorunur) ---- */
.js .rv { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.js .rv.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .rv { opacity:1 !important; transform:none !important; transition:none; } html{scroll-behavior:auto;} }

@media (max-width:860px){
    .hero-grid, .feat, .feat.rev .txt { grid-template-columns:1fr; order:0; }
    .hero .frame { transform:none; }
    .hero-grid .frame { order:-1; }
    .props, .grid, .who, .steps { grid-template-columns:1fr; }
    .grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){ .grid { grid-template-columns:1fr; } .cta { padding:40px 22px; } }