/* Beautiful, fast CSS focused on LCP/CLS, with subtle polish */
:root{
	--bg:#0b0f0e;--elev:#111614;--panel:#121714;--fg:#e9f2ec;--muted:#b5c3ba;--brand:#31c27c;--brand-2:#22a86a;--accent:#f7faf8;--border:rgba(255,255,255,.08);--max:1180px;
	--shadow:0 1px 2px rgba(0,0,0,.08),0 8px 28px rgba(0,0,0,.24)
}
@media (prefers-color-scheme: light){:root{--bg:#ffffff;--elev:#f7fbf9;--panel:#ffffff;--fg:#0f1311;--muted:#5e6a63;--accent:#0f1311;--border:#e8eeea;--shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px rgba(0,0,0,.08)}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{margin:0;font:16px/1.6 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;color:var(--fg);background:radial-gradient(1200px 600px at 20% -10%,rgba(49,194,124,.14),transparent 60%),var(--bg);background-repeat:no-repeat,no-repeat;background-attachment:fixed,scroll;background-position:0 0,0 0;text-rendering:optimizeLegibility}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
img{display:block;max-width:100%;height:auto}

/* Pleasant edge spacing for sub-desktop widths */
@media (max-width:1160px){
	.container{padding:0 28px}
	.site-header>.container{padding-left:28px;padding-right:28px}
	.site-footer.container{padding-left:28px;padding-right:28px}
}

/* Header */
.site-header{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--border);background:color-mix(in srgb, var(--panel) 92%, transparent);backdrop-filter:saturate(160%) blur(10px)}
.site-header>.container{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;font-weight:800;letter-spacing:.2px}
.brand img{width:36px;height:36px}
.nav-toggle{display:none;border:1px solid var(--border);background:var(--panel);color:var(--fg);border-radius:10px;padding:8px 10px;font-size:18px;line-height:1}
.nav-toggle{display:none;min-width:36px;height:36px;display:none;align-items:center;justify-content:center}
.site-nav{display:flex;gap:10px}
.nav-link{padding:9px 12px;border-radius:12px;color:var(--fg);text-decoration:none;border:1px solid transparent}
.nav-link:hover{border-color:var(--border);background:color-mix(in srgb, var(--panel) 88%, transparent)}
.nav-link.active{background:linear-gradient(180deg,rgba(49,194,124,.16),rgba(49,194,124,.08));border-color:color-mix(in srgb, var(--brand) 24%, var(--border));color:var(--fg)}

/* Hero */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:center;padding:54px 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(90deg,rgba(49,194,124,.18),rgba(49,194,124,.08));border:1px solid color-mix(in srgb, var(--brand) 20%, var(--border));color:var(--fg);padding:6px 10px;border-radius:999px;font-weight:700}
.hero h1{font-size:clamp(32px,3.6vw,56px);line-height:1.08;margin:10px 0 12px;letter-spacing:-.3px}
.subtitle{font-size:clamp(16px,1.4vw,18px);color:var(--muted);margin:0 0 16px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.btn{appearance:none;border:1px solid transparent;border-radius:14px;padding:13px 18px;font-weight:800;cursor:pointer;letter-spacing:.2px}
.btn-primary{background:linear-gradient(180deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 6px 20px rgba(49,194,124,.35)}
.btn-primary:hover{filter:saturate(110%)}
.btn-secondary{background:var(--panel);border-color:var(--border);color:var(--fg)}
.kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.kpi div{padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--panel)}
.kpi b{font-size:20px}

/* Sections */
.section{padding:44px 0;border-top:1px solid var(--border)}
.section h2{font-size:clamp(22px,2.2vw,28px);margin:0 0 14px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.card{border:1px solid var(--border);border-radius:16px;padding:18px;background:var(--panel);box-shadow:var(--shadow)}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--elev);padding:8px 10px;border-radius:12px;font-weight:700}
/* WhatsApp link */
.wa-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--fg);font-weight:800}
.wa-link img{width:18px;height:18px}

/* CTA banner */
.cta-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0;padding:16px 18px;border-radius:16px;border:1px solid color-mix(in srgb, var(--brand) 20%, var(--border));
	background:linear-gradient(180deg,rgba(49,194,124,.16),rgba(49,194,124,.08));box-shadow:var(--shadow)}
.cta-banner h3{margin:0;font-size:18px}
.cta-banner p{margin:0;color:var(--muted)}
.cta-banner .actions{display:flex;gap:10px;flex-wrap:wrap}

/* Trust bar */
.trust{display:flex;gap:16px;flex-wrap:wrap;align-items:center;opacity:.9}
.trust .logo{height:28px;width:120px;border:1px dashed var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted)}

/* FAQ */
details{border:1px solid var(--border);background:var(--panel);border-radius:14px;padding:12px}
details+details{margin-top:10px}
summary{cursor:pointer;font-weight:700}
summary::-webkit-details-marker{display:none}

/* Footer */
.site-footer{margin-top:48px;padding:28px 0;border-top:1px solid var(--border);color:var(--muted)}
.site-footer .cols{display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap;margin-bottom:8px}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.reveal.visible{opacity:1;transform:none}

/* Floating WhatsApp button */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:20;display:inline-flex;align-items:center;gap:10px;background:linear-gradient(180deg,var(--brand),var(--brand-2));color:#fff;text-decoration:none;border-radius:999px;padding:10px 14px;box-shadow:0 8px 28px rgba(0,0,0,.28)}
.wa-float img{width:22px;height:22px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}
.wa-float .label{font-weight:800;letter-spacing:.2px}
.wa-float:hover{filter:saturate(110%)}

/* Modal */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:40;color:var(--fg)}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.modal__dialog{position:relative;max-width:720px;margin:10vh auto;background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:18px}
/* Constrain modal on small viewports */
.modal__dialog{max-height:85vh;overflow:auto}
.modal__close{position:absolute;top:8px;right:10px;border:1px solid var(--border);background:var(--panel);color:var(--fg);border-radius:8px;padding:4px 8px;font-size:18px}
.modal__dialog h2{margin:0 0 12px}
.modal__dialog button{color:var(--fg)}
.modal__grid .card{cursor:pointer;text-align:left;transition:background .2s ease, outline-color .2s ease, box-shadow .2s ease}
.modal__grid .card:hover{outline:2px solid color-mix(in srgb, var(--brand) 45%, transparent);background:linear-gradient(180deg,rgba(49,194,124,.08),rgba(49,194,124,.04))}
.modal__grid .card:focus-visible{outline:2px solid var(--brand);box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 25%, transparent)}
.modal__grid .card.is-selected{outline:2px solid color-mix(in srgb, var(--brand) 80%, transparent);background:linear-gradient(180deg,rgba(49,194,124,.18),rgba(49,194,124,.10));box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent) inset}

/* Hero media */
.hero img{border-radius:25px}

/* Modal options grid (ensure responsive layout) */
.modal__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

/* Responsive breakpoints */
@media (max-width:1200px){
	.grid-4{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1024px){
	.hero{grid-template-columns:1fr}
	.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
	.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
	.kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:920px){
	/* Mobile nav: hidden by default, toggled via JS to display:flex */
	.site-header>.container{flex-wrap:wrap;justify-content:flex-start}
	.site-nav{display:none;width:100%;order:2;flex-direction:column;gap:8px;border:1px solid var(--border);background:color-mix(in srgb, var(--panel) 92%, transparent);border-radius:12px;padding:10px}
	.nav-toggle{display:inline-block}
	/* Keep hamburger near the brand; push Başla to the far right */
	.brand{order:1}
	.nav-toggle{order:2;margin-left:10px}
	.site-header .cta-open{order:3;margin-left:auto}
}
@media (max-width:768px){
	/* More generous edge padding on mobile */
	.container{padding:0 24px}
	.grid-2{grid-template-columns:1fr}
	.cta-banner{flex-direction:column;align-items:flex-start}
	.cta-banner .actions{width:100%}
	.modal__dialog{max-width:720px;margin:8vh 16px;padding:16px;width:auto}
	.modal__grid{grid-template-columns:1fr}
}
@media (max-width:640px){
	.grid-4,.grid-3{grid-template-columns:1fr}
	.kpi{grid-template-columns:1fr}
	.hero{padding:30px 0}
	.section{padding:28px 0}
	.btn{padding:12px 16px}
	.brand img{width:30px;height:30px}
	.site-header>.container{padding-left:24px;padding-right:24px}
	.site-footer.container{padding-left:24px;padding-right:24px}
}
@supports (bottom: env(safe-area-inset-bottom)){
	.wa-float{bottom:calc(18px + env(safe-area-inset-bottom));right:calc(18px + env(safe-area-inset-right))}
}

/* Extra comfy header spacing specifically for 600px–1130px */
@media (min-width:600px) and (max-width:1130px){
	.site-header>.container{padding-left:36px;padding-right:36px}
}