/* Kurumsal site kabuğu: açık zemin, lacivert mürekkep, tek sinyal rengi.
   Düzen: tam genişlikte bantlar, her bandın kendi iç sarmalayıcısı. */
:root{
  --ink:#0A1E38;
  --ink-2:#143055;
  --paper:#FFFFFF;
  --paper-2:#F2F6FB;
  --paper-3:#E7EEF7;
  --line:#D3E0EE;
  --line-2:#BACBDE;
  --muted:#53708F;
  --signal:#1B6FD4;
  --signal-dk:#0F4E9C;
  --accent:#17A06B;

  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --data:'IBM Plex Mono',ui-monospace,Consolas,monospace;

  color-scheme:light;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#EAF1F9; --ink-2:#C7D8EA;
    --paper:#081524; --paper-2:#0D2135; --paper-3:#123048;
    --line:#1E3C5A; --line-2:#2A4E72;
    --muted:#92ACC6;
    --signal:#4F9BEE; --signal-dk:#7FB8F5; --accent:#3DC98C;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ink:#EAF1F9; --ink-2:#C7D8EA;
  --paper:#081524; --paper-2:#0D2135; --paper-3:#123048;
  --line:#1E3C5A; --line-2:#2A4E72;
  --muted:#92ACC6;
  --signal:#4F9BEE; --signal-dk:#7FB8F5; --accent:#3DC98C;
  color-scheme:dark;
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.12;margin:0;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
a{color:inherit}
img{max-width:100%}

.wrap{width:100%;max-width:1120px;margin-inline:auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px))}

.eyebrow{font-family:var(--data);font-size:.7rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--signal);display:block}

.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:3px;
  font-weight:600;font-size:.95rem;text-decoration:none;border:1.5px solid transparent;
  transition:background .15s,border-color .15s,color .15s}
.btn-primary{background:var(--signal);color:#fff}
.btn-primary:hover{background:var(--signal-dk)}
.btn-ghost{border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--signal);color:var(--signal)}
a:focus-visible,button:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* ---------- başlık ---------- */
header{border-bottom:1px solid var(--line);background:var(--paper);
  position:sticky;top:env(safe-area-inset-top,0px);z-index:20}
.bar{display:flex;align-items:center;gap:20px;padding-block:14px;flex-wrap:wrap}
.logo{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:.01em;
  text-decoration:none;margin-right:auto;white-space:nowrap}
.logo i{font-style:normal;color:var(--signal)}
.logo small{display:block;font-family:var(--data);font-size:.56rem;font-weight:400;
  letter-spacing:.2em;color:var(--muted);text-transform:uppercase;margin-top:3px}
nav.main{display:flex;gap:22px;font-size:.93rem;flex-wrap:wrap}
nav.main a{text-decoration:none;color:var(--ink-2);padding-block:4px}
nav.main a:hover{color:var(--signal)}
.lang{display:flex;gap:2px}
.lang a{font-family:var(--data);font-size:.7rem;letter-spacing:.06em;text-decoration:none;
  color:var(--muted);border:1px solid var(--line);padding:5px 9px}
.lang a[aria-current="true"]{background:var(--signal);border-color:var(--signal);color:#fff}

/* ---------- hero ---------- */
.hero{border-bottom:1px solid var(--line);background:var(--paper)}
.hero .wrap{padding-block:72px 60px}
.hero h1{font-size:clamp(2.2rem,5.4vw,3.6rem);margin-top:18px;max-width:17ch}
.hero .lede{color:var(--muted);font-size:1.1rem;max-width:44ch;margin-top:22px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* ---------- kanıt şeridi ---------- */
.proof{background:var(--paper-2);border-bottom:1px solid var(--line)}
.proof .wrap{padding-block:0}
.proof-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line)}
@media(min-width:860px){.proof-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pf{background:var(--paper-2);padding:22px 20px;min-width:0}
.pf b{display:block;font-family:var(--display);font-weight:700;font-size:1.45rem;
  font-variant-numeric:tabular-nums}
.pf span{display:block;color:var(--muted);font-size:.87rem;margin-top:4px;line-height:1.4}

/* ---------- bölüm ---------- */
section .wrap{padding-block:64px}
.sec-head{max-width:46ch;margin-bottom:34px}
.sec-head h2{font-size:clamp(1.6rem,3.4vw,2.2rem);margin-top:12px}
.sec-head p{color:var(--muted);margin-top:14px}

/* ---------- ürünler ---------- */
.prod{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;align-items:start}
@media(min-width:880px){.prod{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px}}
.prod h2{font-size:clamp(1.5rem,3.2vw,2.1rem);margin-top:12px}
.prod p{color:var(--muted);margin-top:14px}
.prod ul{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.prod li{position:relative;padding-left:26px;font-size:.96rem}
.prod li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:2px;background:var(--signal)}
.prod .cta{margin-top:28px}
.panel{background:var(--paper-2);border:1px solid var(--line);padding:26px;min-width:0}
.panel .k{font-family:var(--data);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);display:block}
.panel .v{font-family:var(--display);font-weight:700;font-size:1.9rem;margin-top:6px;
  font-variant-numeric:tabular-nums}
.panel-rows{display:flex;flex-direction:column;gap:18px}
.panel-rows>div{padding-bottom:18px;border-bottom:1px solid var(--line)}
.panel-rows>div:last-child{padding-bottom:0;border-bottom:0}
.panel .note{color:var(--muted);font-size:.88rem;margin-top:5px}

.band-alt{background:var(--paper-2);border-block:1px solid var(--line)}

/* ---------- leistungen ---------- */
.serv{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
@media(min-width:680px){.serv{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sv{background:var(--paper);padding:24px;min-width:0}
.sv h3{font-family:var(--body);font-weight:600;font-size:1rem}
.sv p{color:var(--muted);font-size:.92rem;margin-top:8px}

/* ---------- referanslar ---------- */
.refs{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media(min-width:760px){.refs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ref{border:1px solid var(--line);border-top:3px solid var(--signal);padding:24px;
  background:var(--paper);min-width:0}
.ref .tag{font-family:var(--data);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:10px}
.ref h3{font-size:1.05rem}
.ref .big{font-family:var(--display);font-weight:700;font-size:1.6rem;margin-top:12px;
  font-variant-numeric:tabular-nums;color:var(--signal)}
.ref p{color:var(--muted);font-size:.91rem;margin-top:6px}

/* ---------- iletişim ---------- */
.contact{background:var(--ink);color:#EAF1F9}
.contact .wrap{padding-block:64px}
.contact h2{color:#fff;font-size:clamp(1.6rem,3.6vw,2.3rem);max-width:20ch}
.contact .lede{color:#A9C2DC;margin-top:16px;max-width:48ch}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:34px}
@media(min-width:760px){.contact-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px}}
.contact dl{margin:0;display:flex;flex-direction:column;gap:16px}
.contact dt{font-family:var(--data);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:#7E9CBC}
.contact dd{margin:4px 0 0;font-size:.96rem}
.contact dd a{color:#fff;text-decoration:none;border-bottom:1px solid #35587C}
.contact .btn-primary{background:var(--signal)}
.contact .btn-primary:hover{background:#2F86E8}

/* ---------- altbilgi ---------- */
footer{border-top:1px solid var(--line);background:var(--paper-2)}
footer .wrap{padding-block:34px}
.foot{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
@media(min-width:720px){.foot{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}}
.foot h4{font-family:var(--data);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;font-weight:500}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.92rem}
.foot a{text-decoration:none;color:var(--ink-2)}
.foot a:hover{color:var(--signal)}
.foot address{font-style:normal;color:var(--muted);font-size:.92rem;line-height:1.7}
.legal{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--data);font-size:.74rem;color:var(--muted)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* --- kabuk eklentileri --- */
.skip{position:absolute;left:-9999px;top:0;background:var(--signal);color:#fff;
  padding:10px 16px;z-index:50}
.skip:focus{left:8px;top:8px}
nav.main a[aria-current="page"]{color:var(--signal);font-weight:600}
main>section:first-child .wrap,main>div:first-child .wrap{padding-top:56px}

/* --- iç sayfa başlığı --- */
.page-head{border-bottom:1px solid var(--line)}
.page-head .wrap{padding-block:60px 48px}
.page-head h1{font-family:var(--display);font-weight:700;letter-spacing:-.025em;
  font-size:clamp(2rem,5vw,3.1rem);margin:16px 0 0;max-width:19ch;line-height:1.1}
.page-head .lede{color:var(--muted);font-size:1.08rem;max-width:52ch;margin-top:20px}
.page-head .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* --- metin blogu --- */
.prose{max-width:62ch}
.prose h2{font-size:clamp(1.4rem,3vw,1.9rem);margin-top:40px}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--body);font-weight:600;font-size:1.05rem;margin-top:26px}
.prose p{margin-top:14px;color:var(--ink-2)}
.prose ul{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.prose li{position:relative;padding-left:24px;color:var(--ink-2)}
.prose li::before{content:"";position:absolute;left:0;top:10px;width:10px;height:2px;background:var(--signal)}

/* --- sorun/çözüm --- */
.pains{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
@media(min-width:820px){.pains{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pain{background:var(--paper);padding:26px 24px;min-width:0}
.pain .q{font-family:var(--data);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--signal);display:block;margin-bottom:10px}
.pain h3{font-family:var(--display);font-weight:700;font-size:1.1rem;letter-spacing:-.01em}
.pain p{color:var(--muted);font-size:.94rem;margin-top:10px}

/* --- adımlar --- */
.steps{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
@media(min-width:760px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.step{background:var(--paper);padding:24px 22px;min-width:0}
.step .n{font-family:var(--data);font-size:.72rem;letter-spacing:.14em;color:var(--signal)}
.step h3{font-family:var(--display);font-weight:700;font-size:1.05rem;margin-top:10px;letter-spacing:-.01em}
.step p{color:var(--muted);font-size:.92rem;margin-top:8px}

/* --- fiyat --- */
.plans{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media(min-width:820px){.plans{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plan{border:1px solid var(--line);padding:26px 24px;background:var(--paper);min-width:0;
  display:flex;flex-direction:column}
.plan.featured{border-color:var(--signal);border-width:2px}
.plan .tag{font-family:var(--data);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);display:block}
.plan.featured .tag{color:var(--signal)}
.plan h3{font-family:var(--display);font-weight:700;font-size:1.25rem;margin-top:10px;letter-spacing:-.01em}
.plan .price{font-family:var(--display);font-weight:700;font-size:2rem;margin-top:14px;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.plan .price span{font-family:var(--body);font-weight:400;font-size:.9rem;color:var(--muted)}
.plan .desc{color:var(--muted);font-size:.93rem;margin-top:10px}
.plan ul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}
.plan li{position:relative;padding-left:22px;font-size:.92rem;color:var(--ink-2)}
.plan li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;
  border:1.5px solid var(--signal);border-radius:50%}
.plan .btn{margin-top:22px;justify-content:center}

/* --- SSS --- */
.faq{border-top:1px solid var(--line);max-width:68ch}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:18px 0;font-family:var(--display);font-weight:600;
  font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:16px;
  align-items:flex-start;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--data);color:var(--signal);flex:0 0 auto;
  font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);padding-bottom:18px;max-width:58ch}

/* --- iletişim formu --- */
.form{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:560px}
@media(min-width:620px){.form{grid-template-columns:repeat(2,minmax(0,1fr))}.form .full{grid-column:1/-1}}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:.88rem;font-weight:600}
.field input,.field select,.field textarea{font-family:var(--body);font-size:.95rem;
  color:var(--ink);background:var(--paper);border:1px solid var(--line-2);border-radius:3px;
  padding:11px 13px;width:100%;min-width:0}
.field textarea{resize:vertical;min-height:110px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--signal);outline-offset:1px}
.form .hint{color:var(--muted);font-size:.84rem}

/* --- ürün ekran görüntüsü --- */
.shot{margin:0;border:1px solid var(--line);background:var(--paper-2)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{font-family:var(--data);font-size:.72rem;color:var(--muted);
  padding:12px 16px;border-top:1px solid var(--line);letter-spacing:.03em}

/* --- hero: metin solda, video sağda --- */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;align-items:center}
@media(min-width:920px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:48px}
}
.hero-video{margin:0;position:relative;overflow:hidden;min-width:0;
  border:1px solid var(--line);background:var(--paper-2);
  aspect-ratio:1280/724;max-width:100%}
.hero-video video{display:block;width:100%;height:100%;object-fit:cover}