:root{
  --bg:#FAFAF7; --ink:#18140F; --soft:#6B6459; --line:#ECE8DF; --card:#FFFFFF; --surface:#F3F1EA;
  --brand:#2E9148; --brand-strong:#227239; --brand-tint:#DCF0E1;
  --expiring:#D9932E; --risk:#E5484D; --risk-text:#B42328;
  --radius:22px; --shadow:0 10px 30px rgba(24,20,15,.08);
  --font: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.5}
a{color:var(--brand-strong)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

header{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo img{width:36px;height:36px;border-radius:10px}
.logo span{font-weight:800;font-size:22px;letter-spacing:-.4px}
.logo span b{color:var(--brand)}
.by{font-size:13px;color:var(--soft)}

.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:24px 0 56px}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--brand-tint);color:var(--brand-strong);font-weight:700;font-size:13px;padding:6px 12px;border-radius:999px}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--brand);display:inline-block;animation:nabiz 1.6s infinite}
@keyframes nabiz{50%{opacity:.35}}
h1{font-size:clamp(34px,5.4vw,56px);line-height:1.05;letter-spacing:-1.2px;margin:16px 0 14px;font-weight:800}
h1 em{font-style:normal;color:var(--brand)}
.lead{font-size:18px;color:var(--soft);max-width:520px;margin:0 0 26px}

.form-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;max-width:520px;border:1px solid var(--line)}
.form-card h2{font-size:18px;margin:0 0 4px}
.form-card p.sub{margin:0 0 16px;color:var(--soft);font-size:14px}
.tabs{display:flex;gap:6px;background:var(--surface);padding:5px;border-radius:14px;margin-bottom:14px}
.tabs button{flex:1;border:0;background:transparent;font:inherit;font-weight:700;font-size:14px;padding:10px 6px;border-radius:10px;color:var(--soft);cursor:pointer}
.tabs button[aria-checked="true"]{background:var(--card);color:var(--ink);box-shadow:0 2px 6px rgba(24,20,15,.08)}
label.f{display:block;font-weight:700;font-size:14px;margin:0 0 6px}
.field{position:relative;margin-bottom:12px}
.field .on{position:absolute;left:14px;top:26px;line-height:1;transform:translateY(-50%);color:var(--soft);font-weight:700;pointer-events:none}
input[type=text],input[type=email],input[type=tel]{width:100%;font:inherit;font-size:16px;padding:14px;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);outline:none}
input.has-prefix{padding-left:40px}
input:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint)}
input[aria-invalid="true"]{border-color:var(--risk)}
.err{color:var(--risk-text);font-size:13px;margin:6px 2px 0;display:none}
.err.on-err{display:block}
.opt{color:var(--soft);font-weight:500}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--soft);margin:6px 0 16px}
.consent input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--brand-strong);flex:none}
.cta{width:100%;border:0;background:var(--brand-strong);color:#fff;font:inherit;font-weight:800;font-size:17px;padding:16px;border-radius:16px;cursor:pointer;transition:transform .1s, background .2s}
.cta:hover{background:#1c6230}
.cta:active{transform:scale(.98)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.basari{display:none;text-align:center;padding:8px 4px}
.basari img{width:140px;height:140px;object-fit:contain}
.basari h2{font-size:22px;margin:6px 0}
.basari p{color:var(--soft);margin:0 0 14px}
.paylas{display:inline-flex;gap:8px;align-items:center;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:10px 16px;font:inherit;font-weight:700;cursor:pointer;color:var(--ink)}
.form-card.tamam form{display:none}
.form-card.tamam .basari{display:block}

.telefon{position:relative;display:flex;justify-content:center}
.telefon .ekran{width:min(320px,80vw);border-radius:38px;border:10px solid #18140F;box-shadow:0 30px 60px rgba(24,20,15,.22);overflow:hidden;background:#fff;aspect-ratio:1/2}
.telefon .ekran img{width:100%;display:block}
.telefon .gasty{position:absolute;width:150px;right:max(0px,calc(50% - 230px));bottom:-24px;filter:drop-shadow(0 12px 18px rgba(24,20,15,.18));animation:salla 3.4s ease-in-out infinite}
@keyframes salla{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(-4deg) translateY(-6px)}}

section.ozellik{padding:56px 0;border-top:1px solid var(--line)}
.baslik{text-align:center;max-width:620px;margin:0 auto 36px}
.baslik h2{font-size:clamp(26px,3.6vw,36px);letter-spacing:-.6px;margin:0 0 8px}
.baslik p{color:var(--soft);margin:0;font-size:17px}
.kartlar{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.kart{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.kart .ikon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:22px;margin-bottom:12px}
.kart h3{margin:0 0 6px;font-size:18px}
.kart p{margin:0;color:var(--soft);font-size:15px}

.ekranlar{display:flex;gap:18px;justify-content:center;margin-top:36px;flex-wrap:wrap}
.ekranlar figure{margin:0;width:220px;text-align:center}
.ekranlar img{width:100%;border-radius:26px;border:7px solid #18140F;box-shadow:var(--shadow);display:block}
.ekranlar figcaption{font-size:14px;color:var(--soft);margin-top:10px;font-weight:600}

.son{background:var(--brand-strong);color:#fff;border-radius:28px;padding:40px 28px;text-align:center;margin:56px 0}
.son h2{font-size:clamp(24px,3.4vw,34px);margin:0 0 8px;letter-spacing:-.5px}
.son p{margin:0 0 20px;color:#D6EEDC}
.son a{display:inline-block;background:#fff;color:var(--brand-strong);font-weight:800;text-decoration:none;padding:14px 26px;border-radius:16px}

footer{padding:24px 0 40px;color:var(--soft);font-size:13px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line)}

/* --- Taslaktaki satır içi stiller (CSP: style-src 'self' için sınıfa taşındı) --- */
.kart .ikon.i-tazelik{background:var(--brand-tint)}
.kart .ikon.i-liste{background:#FBEBD3}
.kart .ikon.i-ev{background:#E6EEFB}
#riza-hata{margin:-8px 0 12px}
#form-hata{margin:-4px 0 12px}
.gizli{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --- Erişilebilirlik: yalnız klavye odağında görünen halka (fareyle tıklamada görünmez) --- */
.tabs button:focus-visible,.cta:focus-visible,.paylas:focus-visible,.son a:focus-visible,.logo:focus-visible,footer a:focus-visible,.consent input:focus-visible,.nojs-kanal input:focus-visible{outline:3px solid var(--brand-strong);outline-offset:2px}
.son a:focus-visible{outline-color:#fff}
.basari:focus{outline:none}

/* --- JS kapalıyken kanal seçimi (yalnız <noscript> içinde var; JS açıkken hiç oluşmaz) --- */
.nojs-kanal{border:0;margin:0 0 14px;padding:0}
.nojs-kanal legend{font-weight:700;font-size:14px;margin:0 0 6px;padding:0}
.nojs-kanal .secenekler{display:flex;gap:6px;background:var(--surface);padding:5px;border-radius:14px;flex-wrap:wrap}
.nojs-kanal label{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:14px;padding:10px 6px;border-radius:10px;color:var(--ink);cursor:pointer;min-width:90px}
.nojs-kanal input{accent-color:var(--brand-strong);margin:0}
.nojs-not{margin:0 0 6px;color:var(--soft);font-size:13px}

/* --- KVKK sayfası (taslağın renk ve yazı düzeniyle) --- */
.metin{max-width:720px;margin:0 auto;padding:8px 0 56px}
.metin .geri{margin:0 0 8px;font-size:14px}
.metin h1{font-size:clamp(28px,4.4vw,40px);letter-spacing:-.8px;margin:8px 0 6px}
.metin .surum{color:var(--soft);font-size:14px;margin:0 0 24px}
.metin h2{font-size:20px;letter-spacing:-.3px;margin:32px 0 8px}
.metin p,.metin li{font-size:16px;color:var(--ink)}
.metin ul{padding-left:22px;margin:0 0 12px}
.metin li{margin:0 0 6px}
.metin code{background:var(--surface);border-radius:6px;padding:1px 6px;font-size:14px}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:28px;padding-top:8px}
  .telefon .ekran{width:min(240px,62vw)}
  .telefon .gasty{width:110px;right:4%;bottom:-14px}
  .kartlar{grid-template-columns:1fr}
  .ekranlar figure{width:44%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}