/* ===================== RÜZGAR GSM — tokens (beyaza yakın / lüks) =====================
   Ana his: sıcak beyaz zemin + grafit siyah + şampanya-altın aksan.
   Not: --blue* değişken adları korundu ama artık ALTIN tonlarını taşır. */
:root{
  color-scheme: light;
  --ink:#1b1e23;         /* grafit siyah — birincil butonlar, koyu öğeler */
  --ink-2:#2b2f36;
  --head:#14161a;        /* başlık metni (neredeyse siyah) */
  --text:#5c626b;        /* gövde metni */
  --muted:#9aa0a7;
  --blue:#b08b47;        /* ŞAMPANYA-ALTIN — tek aksan */
  --blue-dark:#977637;
  --blue-soft:#f7f2e8;   /* açık şampanya tint bant */
  --green:#1a9e63;       /* yalnızca WhatsApp */
  --green-dark:#157e50;
  --bg:#ffffff;
  --bg-alt:#f8f7f4;      /* sıcak beyaz-gri */
  --bg-soft:#f0efea;
  --line:#e9e7e1;
  --line-strong:#dcd9d0;
  --card:#ffffff;
  --footer-bg:#f8f7f4;
  --footer-head:#14161a;
  --footer-line:#e9e7e1;
  --radius:16px;
  --radius-sm:10px;
  --shadow-sm:0 4px 16px rgba(27,30,35,.05);
  --shadow:0 22px 50px -26px rgba(27,30,35,.20);
  --container:1240px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#e8e6e0; --ink-2:#d6d3cb; --head:#f4f2ec; --text:#a8aab0; --muted:#7d8087;
    --blue:#cfa661; --blue-dark:#bd9450; --blue-soft:#241f16; --green:#31b87c; --green-dark:#24a06a;
    --bg:#101013; --bg-alt:#16161a; --bg-soft:#1c1c21; --line:#26262b; --line-strong:#33333a;
    --card:#161619; --footer-bg:#16161a; --footer-head:#f4f2ec; --footer-line:#26262b;
    --shadow-sm:0 4px 16px rgba(0,0,0,.42); --shadow:0 22px 50px -24px rgba(0,0,0,.68);
  }
}
:root[data-theme="dark"]{
  --ink:#e8e6e0; --ink-2:#d6d3cb; --head:#f4f2ec; --text:#a8aab0; --muted:#7d8087;
  --blue:#cfa661; --blue-dark:#bd9450; --blue-soft:#241f16; --green:#31b87c; --green-dark:#24a06a;
  --bg:#101013; --bg-alt:#16161a; --bg-soft:#1c1c21; --line:#26262b; --line-strong:#33333a;
  --card:#161619; --footer-bg:#16161a; --footer-head:#f4f2ec; --footer-line:#26262b;
  --shadow-sm:0 4px 16px rgba(0,0,0,.42); --shadow:0 22px 50px -24px rgba(0,0,0,.68);
}

/* ===================== base ===================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:150px}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:16px; line-height:1.75; letter-spacing:.2px; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; font-family:"Poppins",sans-serif; color:var(--head); font-weight:600; line-height:1.22; letter-spacing:.3px; text-wrap:balance}
p{margin:0}
a{color:inherit; text-decoration:none}
img,svg{display:block; max-width:100%}
ul{margin:0; padding:0; list-style:none}
::selection{background:var(--blue); color:#fff}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:4px}

.wrap{max-width:var(--container); margin-inline:auto; padding-inline:clamp(18px,4vw,44px)}
.section{padding-block:clamp(56px,8vw,104px)}
.bg-alt{background:var(--bg-alt)}
.center{text-align:center}

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--blue-dark);
  margin-bottom:.9rem;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--blue)}
.center .eyebrow{justify-content:center}
.h2{font-size:clamp(1.7rem,3.6vw,2.55rem); font-weight:600}
.lead{margin-top:.9rem; font-size:1.05rem; color:var(--text); max-width:62ch}
.center .lead{margin-inline:auto}

/* ===================== buttons ===================== */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:"Poppins",sans-serif; font-weight:600; font-size:.92rem; letter-spacing:.3px;
  padding:.9em 1.6em; border-radius:999px; border:2px solid transparent; cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn svg{width:17px; height:17px}
.btn--blue{background:var(--ink); color:#fff; box-shadow:0 14px 30px -16px rgba(27,30,35,.5)}
.btn--blue:hover{background:var(--blue); transform:translateY(-2px)}
.btn--green{background:var(--green); color:#fff; box-shadow:0 12px 26px -14px rgba(26,158,99,.7)}
.btn--green:hover{background:var(--green-dark); transform:translateY(-2px)}
.btn--dark{background:var(--ink); color:#fff}
.btn--dark:hover{background:var(--blue); transform:translateY(-2px)}
.btn--ghost{border-color:var(--line-strong); color:var(--head)}
.btn--ghost:hover{border-color:var(--blue); color:var(--blue); transform:translateY(-2px)}

/* ===================== announcement + header ===================== */
.topwrap{position:sticky; top:0; z-index:90}
.announce{background:var(--blue-soft); color:var(--head); font-size:.8rem; border-bottom:1px solid var(--line)}
.announce .wrap{display:flex; align-items:center; justify-content:center; gap:1rem; height:40px; text-align:center}
.announce b{color:var(--blue); font-weight:600}
.announce .dot{width:6px; height:6px; border-radius:50%; background:var(--blue); flex:none}
@media (max-width:720px){ .announce{font-size:.72rem} .announce .wrap{gap:.6rem} }

.header{background:var(--bg); border-bottom:1px solid var(--line); transition:box-shadow .25s}
.header.stuck{box-shadow:0 10px 30px -20px rgba(24,38,52,.28)}
.header .wrap{display:flex; align-items:center; gap:1.4rem; height:76px; transition:height .25s}
.header.stuck .wrap{height:62px}

.brand{display:flex; align-items:center; gap:.65em; margin-right:auto}
.brand .mk{width:42px; height:42px; flex:none; color:var(--blue)}
.brand .mk svg{width:100%; height:100%}
.brand b{font-family:"Poppins",sans-serif; font-weight:700; font-size:1.1rem; color:var(--head); letter-spacing:.4px; line-height:1}
.brand span{display:block; font-size:.56rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-top:3px}

.nav{display:flex; align-items:center; gap:.1rem}
.nav a{font-size:.85rem; font-weight:500; color:var(--head); padding:.6em .72em; border-radius:8px; white-space:nowrap}
.nav a:hover, .nav a.active{color:var(--blue); background:var(--bg-alt)}
.header-cta{display:flex; align-items:center; gap:.6rem}
.header-cta .btn{padding:.68em 1.2em; font-size:.83rem}
.icon-phone{display:inline-flex; align-items:center; gap:.5em; font-weight:600; color:var(--head); font-size:.88rem}
.icon-phone svg{width:18px; height:18px; color:var(--blue)}

.burger{display:none; width:44px; height:40px; border:2px solid var(--line-strong); border-radius:9px; background:transparent; cursor:pointer}
.burger i{display:block; width:18px; height:2px; background:var(--head); margin:3.5px auto; transition:transform .25s, opacity .2s}
.header.open .burger i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.header.open .burger i:nth-child(2){opacity:0}
.header.open .burger i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media (max-width:1100px){
  .burger{display:block; order:3}
  .header .wrap{gap:1rem}
  .header-cta .icon-phone{display:none}
  .nav{
    position:absolute; left:0; right:0; top:100%; background:var(--bg); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0; padding:.5rem clamp(18px,4vw,44px) 1.4rem;
    box-shadow:var(--shadow); transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .22s, transform .22s;
    max-height:78vh; overflow:auto;
  }
  .header.open .nav{transform:none; opacity:1; pointer-events:auto}
  .nav a{padding:1em .3em; border-bottom:1px solid var(--line); font-size:.95rem}
}
@media (max-width:560px){
  .header .wrap{gap:.6rem}
  .brand span{display:none}
  .brand b{font-size:1rem}
  .brand .mk{width:36px; height:36px}
  .header-cta .btn .btn-t{display:none}
  .header-cta .btn{padding:.62em; gap:0}
  .header-cta .btn svg{width:18px; height:18px}
}

/* ===================== intro film (açık) ===================== */
.intro{position:fixed; inset:0; z-index:200; background:var(--bg); display:grid; place-items:center; overflow:hidden;
  transition:transform .75s cubic-bezier(.7,0,.3,1), opacity .5s .35s ease}
.intro.done{transform:translateY(-101%); opacity:0; pointer-events:none}
.intro-in{display:grid; justify-items:center; gap:1.15rem; text-align:center; padding:24px}
.intro-mark{width:clamp(96px,18vw,138px); color:var(--blue)}
.intro-mark svg{width:100%; height:auto; display:block}
.intro-mark .draw{stroke-dasharray:1; stroke-dashoffset:1; animation:iDraw 1s .15s ease forwards}
.intro-mark .wind{opacity:0; transform:translateX(-16px); animation:iWind .55s ease forwards}
.intro-mark .wind.w1{animation-delay:.9s} .intro-mark .wind.w2{animation-delay:1.05s} .intro-mark .wind.w3{animation-delay:1.2s}
@keyframes iDraw{to{stroke-dashoffset:0}}
@keyframes iWind{to{opacity:1; transform:none}}
.intro-word{font-family:"Poppins",sans-serif; font-weight:700; font-size:clamp(1.5rem,4.6vw,2.3rem); letter-spacing:2px; color:var(--head);
  opacity:0; transform:translateY(14px); animation:iUp .55s 1.25s ease forwards}
.intro-word b{color:var(--blue)}
.intro-rule{width:0; height:2px; background:var(--blue); animation:iRule .7s 1.45s ease forwards}
.intro-sub{font-size:.72rem; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:var(--muted); opacity:0; animation:iFade .5s 1.7s ease forwards}
@keyframes iUp{to{opacity:1; transform:none}}
@keyframes iRule{to{width:clamp(120px,26vw,210px)}}
@keyframes iFade{to{opacity:1}}

/* ===================== home hero (slider) ===================== */
.hero{position:relative; overflow:hidden; background:linear-gradient(180deg,var(--bg) 0%,var(--bg-alt) 100%)}
.hero::before{
  content:""; position:absolute; right:-14%; top:-28%; width:62vw; max-width:800px; aspect-ratio:1; z-index:0;
  background:radial-gradient(circle at center, rgba(176,139,71,.14), transparent 62%);
}
.hero-slides{position:relative; z-index:1; display:grid}
.hslide{grid-area:1/1; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease}
.hslide.on{opacity:1; visibility:visible}
.hslide .row{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center;
  padding-block:clamp(44px,7vw,80px); min-height:clamp(470px,62vh,600px);
}
.hslide.on .htxt > *{animation:hUp .5s ease both}
.hslide.on .htxt > *:nth-child(1){animation-delay:.05s}
.hslide.on .htxt > *:nth-child(2){animation-delay:.14s}
.hslide.on .htxt > *:nth-child(3){animation-delay:.23s}
.hslide.on .htxt > *:nth-child(4){animation-delay:.32s}
.hslide.on .htxt > *:nth-child(5){animation-delay:.4s}
@keyframes hUp{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
.hero-chip{display:inline-flex; align-items:center; gap:.5em; padding:.42em .95em; border-radius:999px; background:var(--bg); border:1px solid var(--line-strong); font-size:.76rem; font-weight:600; color:var(--head)}
.hero-chip .dot{width:7px; height:7px; border-radius:50%; background:var(--green)}
.hslide h1{margin-top:1rem; font-size:clamp(1.9rem,4.7vw,3.1rem); font-weight:700; line-height:1.14; letter-spacing:.2px}
.hslide h1 em{color:var(--blue); font-style:normal}
.hslide p.sub{margin-top:1rem; font-size:1.05rem; color:var(--text); max-width:46ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.7rem}
.hero-trust{display:flex; flex-wrap:wrap; gap:.9rem 1.5rem; margin-top:1.6rem}
.hero-trust li{display:flex; align-items:center; gap:.5em; font-size:.84rem; font-weight:500; color:var(--head)}
.hero-trust svg{width:17px; height:17px; color:var(--blue); flex:none}

.hero-dots{display:flex; gap:.55rem; padding-bottom:1.8rem}
.hero-dots button{width:30px; height:4px; padding:0; border:0; border-radius:2px; cursor:pointer;
  background:var(--line-strong); transition:background .2s, width .2s}
.hero-dots button[aria-current="true"]{background:var(--blue); width:42px}

/* --- animated phone mockup --- */
.pm-stage{position:relative; display:grid; place-items:center; min-height:340px}
.pm{
  position:relative; width:clamp(190px,24vw,240px); aspect-ratio:1/2.04;
  background:linear-gradient(160deg,#2c2f36,#16171b); border-radius:34px;
  padding:11px; box-shadow:0 40px 70px -34px rgba(24,38,52,.45), inset 0 0 0 2px rgba(255,255,255,.06);
  animation:pmFloat 5s ease-in-out infinite;
}
.hslide.on .pm{animation:pmFloat 5s ease-in-out infinite, pmIn .6s .1s ease both}
@keyframes pmFloat{0%,100%{transform:translateY(-8px) rotate(-1deg)}50%{transform:translateY(8px) rotate(1deg)}}
@keyframes pmIn{from{opacity:0; transform:translateY(30px) scale(.94)}to{opacity:1}}
.pm::before{content:""; position:absolute; top:15px; left:50%; transform:translateX(-50%); width:46%; height:15px; background:#16171b; border-radius:0 0 12px 12px; z-index:3}
.pm .scr{position:relative; width:100%; height:100%; border-radius:24px; overflow:hidden; background:#1a1c21; display:grid; place-items:center}
.pm .scr::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.18) 50%,transparent 58%); transform:translateX(-120%); animation:pmShine 5.5s 1s ease-in-out infinite}
@keyframes pmShine{0%,55%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}}
.pm .g{width:100%; height:100%; display:grid; place-items:center}
.pm .g svg{width:62%; height:62%}
.pm-wind{position:absolute; inset:-6% -18%; z-index:-1; pointer-events:none}
.pm-wind span{position:absolute; height:3px; border-radius:2px; background:linear-gradient(90deg,transparent,var(--blue),transparent); opacity:.45}
.pm-wind span:nth-child(1){width:120px; top:22%; left:-6%; animation:pmw 3.4s ease-in-out infinite}
.pm-wind span:nth-child(2){width:90px; top:52%; right:-4%; background:linear-gradient(90deg,transparent,var(--green),transparent); animation:pmw 4.2s .6s ease-in-out infinite}
.pm-wind span:nth-child(3){width:70px; top:78%; left:0%; animation:pmw 3.8s 1.1s ease-in-out infinite}
@keyframes pmw{0%{transform:translateX(-24px); opacity:0}30%,60%{opacity:.5}100%{transform:translateX(40px); opacity:0}}
.pm .crack{position:absolute; inset:0; z-index:2}
.pm .crack path{stroke:#d9cbb0; stroke-width:2; fill:none; stroke-linecap:round; opacity:.9; animation:crackHeal 4s ease-in-out infinite}
@keyframes crackHeal{0%,25%{opacity:.9}55%{opacity:0}80%,100%{opacity:0}}
.pm .spark{position:absolute; right:16%; top:38%; width:16px; height:16px; z-index:2; color:var(--green); animation:sparkPop 4s ease-in-out infinite}
@keyframes sparkPop{0%,50%{opacity:0; transform:scale(.4)}62%{opacity:1; transform:scale(1.1)}78%{opacity:1}100%{opacity:0; transform:scale(.6)}}
.pm .tag{position:absolute; right:-14%; top:16%; z-index:4; background:var(--ink); color:#fff; font:600 .7rem/1 "Poppins",sans-serif; padding:.5em .7em; border-radius:8px; transform-origin:top center; animation:tagSwing 3.6s ease-in-out infinite; box-shadow:0 10px 20px -10px rgba(27,30,35,.4)}
.pm .tag::before{content:""; position:absolute; left:14px; top:-9px; width:2px; height:9px; background:var(--ink)}
@keyframes tagSwing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.pm .grade{position:absolute; left:8%; bottom:9%; z-index:4; background:#fff; color:var(--head); font:700 .66rem/1 "Poppins",sans-serif; letter-spacing:.04em; padding:.5em .7em; border-radius:7px; box-shadow:var(--shadow-sm)}
.pm-box{position:absolute; right:2%; bottom:4%; width:46%; z-index:4; color:var(--blue); animation:boxBob 3.4s ease-in-out infinite}
@keyframes boxBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}
.pm-route{position:absolute; left:-16%; top:30%; width:52%; z-index:1}
.pm-route path{stroke:var(--blue); stroke-width:3; stroke-dasharray:6 8; fill:none; stroke-linecap:round; animation:routeDash 1.4s linear infinite}
@keyframes routeDash{to{stroke-dashoffset:-28}}
.pm-pin{position:absolute; left:-14%; top:24%; z-index:2; color:var(--blue); width:26px; animation:pinPulse 2.4s ease-in-out infinite}
@keyframes pinPulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.08)}}

@media (max-width:900px){
  .hslide .row{grid-template-columns:1fr; gap:34px; text-align:center; min-height:0}
  .hero-cta,.hero-trust,.hero-dots{justify-content:center}
  .hero-trust{gap:.7rem 1.2rem}
  .pm-stage{min-height:0; order:-1}
  .pm{width:min(58vw,206px)}
  .pm .tag{right:-8%}
}

/* ===================== inner page hero ===================== */
.page-hero{background:linear-gradient(180deg,var(--bg),var(--bg-alt)); border-bottom:1px solid var(--line);
  padding-top:calc(clamp(44px,7vw,72px)); padding-bottom:clamp(44px,7vw,72px)}
.page-hero .wrap{max-width:940px}
.page-hero .eyebrow{margin-bottom:.8rem}
.page-hero h1{font-size:clamp(1.9rem,4.4vw,3rem); color:var(--head); font-weight:700; letter-spacing:.2px; line-height:1.14}
.page-hero p{margin-top:1rem; font-size:1.08rem; color:var(--text); max-width:62ch}
.breadcrumb{display:flex; flex-wrap:wrap; gap:.5em; font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:1.1rem}
.breadcrumb a:hover{color:var(--blue)}
.breadcrumb .sep{color:var(--line-strong)}

/* ===================== quick request band (açık) ===================== */
.quickband{background:var(--blue-soft); border-block:1px solid var(--line); position:relative; z-index:1}
.quickband .wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px,4vw,48px); align-items:center; padding-block:clamp(34px,5vw,52px)}
.quickband h3{color:var(--head); font-size:clamp(1.2rem,2.4vw,1.5rem); font-weight:600}
.quickband p{color:var(--text); margin-top:.4rem; font-size:.92rem}
.qb-form{display:grid; grid-template-columns:1.2fr 1fr 1fr auto; gap:.7rem; align-items:end}
.qb-form label{display:grid; gap:.3rem}
.qb-form label > span{font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.qb-form input,.qb-form select{font:inherit; font-size:.9rem; padding:.7em .85em; border:1.5px solid var(--line-strong); border-radius:10px; background:var(--bg); color:var(--head); width:100%}
.qb-form input:focus,.qb-form select:focus{border-color:var(--blue); outline:none}
.qb-form .btn{white-space:nowrap}
.qb-form .msg{grid-column:1/-1; display:none; font-size:.82rem; padding:.7rem .9rem; border:1.5px solid var(--blue); color:var(--blue); background:var(--bg); border-radius:10px}
.qb-form .msg.show{display:block}
@media (max-width:1000px){ .quickband .wrap{grid-template-columns:1fr} .qb-form{grid-template-columns:1fr 1fr} .qb-form .btn{grid-column:1/-1; justify-content:center} }
@media (max-width:560px){ .qb-form{grid-template-columns:1fr} }

/* ===================== steps ===================== */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-top:2.6rem}
.step{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.7rem 1.5rem; position:relative; transition:transform .2s, box-shadow .2s}
.step:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.step .n{font-family:"Poppins",sans-serif; font-weight:700; font-size:.85rem; color:#fff; background:var(--ink); width:34px; height:34px; border-radius:10px; display:grid; place-items:center; margin-bottom:1rem}
.step:nth-child(2) .n{background:var(--blue)}
.step:nth-child(3) .n{background:var(--ink-2)}
.step:nth-child(4) .n{background:var(--ink)}
.step h3{font-size:1.02rem; font-weight:600; margin-bottom:.4rem}
.step p{font-size:.88rem}
.step .line{position:absolute; right:-.7rem; top:2.4rem; width:1.4rem; height:2px; background:var(--line-strong)}
.step:last-child .line{display:none}
@media (max-width:900px){ .steps{grid-template-columns:1fr 1fr} .step .line{display:none} }
@media (max-width:520px){ .steps{grid-template-columns:1fr} }

/* ===================== services ===================== */
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2.6rem}
.svc{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem 1.4rem; transition:transform .2s, box-shadow .2s, border-color .2s}
.svc:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--blue)}
.svc .ic{width:48px; height:48px; border-radius:13px; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; margin-bottom:1rem}
.svc .ic svg{width:24px; height:24px}
.svc h3{font-size:1rem; font-weight:600; margin-bottom:.35rem}
.svc p{font-size:.85rem; margin-bottom:.8rem}
.svc .price{font-size:.8rem; font-weight:600; color:var(--head)}
.svc .price span{color:var(--blue)}
.svc .go{display:inline-flex; align-items:center; gap:.4em; margin-top:.7rem; font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--blue); transition:gap .2s}
.svc:hover .go{gap:.7em}
@media (max-width:1000px){ .svc-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .svc-grid{grid-template-columns:1fr} }

/* ===================== brand strip ===================== */
.brands{display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin-top:2rem}
.brands li{padding:.55em 1.1em; border:1px solid var(--line-strong); border-radius:999px; font-size:.82rem; font-weight:600; color:var(--head); background:var(--bg)}

/* ===================== phones ===================== */
.pfilter{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.8rem}
.pfilter button{font:600 .8rem/1 "Poppins",sans-serif; padding:.55em 1em; border-radius:999px; border:1.5px solid var(--line-strong); background:var(--bg); color:var(--head); cursor:pointer; transition:all .18s}
.pfilter button:hover{border-color:var(--blue); color:var(--blue)}
.pfilter button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.phones{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:1.8rem}
.phone{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .2s, box-shadow .2s}
.phone:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.phone .ph{position:relative; aspect-ratio:1/1; background:linear-gradient(160deg,var(--bg-soft),var(--bg-alt)); display:grid; place-items:center}
.phone .ph svg{width:50%; height:50%; color:var(--ink); opacity:.8}
.phone .tag{position:absolute; left:12px; top:12px; background:var(--ink); color:#fff; font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:.4em .7em; border-radius:6px}
.phone .tag.b{background:var(--blue)}
.phone .pb{padding:1.15rem 1.2rem 1.3rem}
.phone .pb h3{font-size:.98rem; font-weight:600}
.phone .meta{font-size:.8rem; color:var(--muted); margin:.25rem 0 .7rem}
.phone .rowb{display:flex; align-items:center; justify-content:space-between; gap:.6rem}
.phone .amt{font-family:"Poppins",sans-serif; font-weight:700; font-size:1.05rem; color:var(--head)}
.phone .amt s{font-weight:400; font-size:.8rem; color:var(--muted); margin-right:.3em}
.phone .wa{display:inline-flex; align-items:center; gap:.35em; font-size:.76rem; font-weight:600; color:#fff; background:var(--green); padding:.5em .8em; border-radius:999px}
.phone .wa svg{width:14px; height:14px}
@media (max-width:1000px){ .phones{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .phones{grid-template-columns:1fr} }

/* ===================== counters (açık) ===================== */
.counters{background:var(--bg-alt); border-block:1px solid var(--line)}
.counters .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line)}
.counter{background:var(--bg-alt); padding:2rem 1.4rem; text-align:center}
.counter b{display:block; font-family:"Poppins",sans-serif; font-weight:700; font-size:2.1rem; color:var(--head); letter-spacing:.5px; font-variant-numeric:tabular-nums}
.counter span{font-size:.82rem; color:var(--muted)}
@media (max-width:720px){ .counters .wrap{grid-template-columns:1fr 1fr} }

/* ===================== why ===================== */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-top:2.6rem}
.why{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem 1.4rem}
.why .ic{width:46px; height:46px; border-radius:12px; background:var(--ink); color:#fff; display:grid; place-items:center; margin-bottom:1rem}
.why:nth-child(2) .ic{background:var(--blue)}
.why:nth-child(3) .ic{background:var(--ink-2)}
.why:nth-child(4) .ic{background:var(--ink)}
.why .ic svg{width:23px; height:23px}
.why h3{font-size:1rem; font-weight:600; margin-bottom:.35rem}
.why p{font-size:.85rem}
@media (max-width:900px){ .why-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .why-grid{grid-template-columns:1fr} }

/* ===================== testimonials ===================== */
.ts{position:relative; max-width:760px; margin:2.2rem auto 0; display:grid}
.t{grid-area:1/1; opacity:0; visibility:hidden; transition:opacity .5s; display:grid; gap:1.1rem; text-align:center}
.t.on{opacity:1; visibility:visible}
.t .stars{color:var(--blue); letter-spacing:3px; font-size:1rem}
.t p{font-size:1.1rem; line-height:1.7; color:var(--head); font-weight:500}
.t .who{font-size:.85rem; color:var(--muted)}
.t .who b{color:var(--blue); font-weight:600}
.ts-dots{grid-area:2/1; display:flex; justify-content:center; gap:.5rem; margin-top:1.8rem}
.ts-dots button{width:9px; height:9px; padding:0; border:0; border-radius:50%; background:var(--line-strong); cursor:pointer; transition:background .2s, transform .2s}
.ts-dots button[aria-current="true"]{background:var(--blue); transform:scale(1.3)}

/* ===================== blog ===================== */
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; margin-top:2.6rem}
.post{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .2s, box-shadow .2s}
.post:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.post .ph{aspect-ratio:16/10; background:linear-gradient(150deg,var(--bg-soft),var(--bg-alt)); position:relative}
.post .ph span{position:absolute; left:12px; top:12px; background:var(--blue); color:#fff; font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:.4em .7em; border-radius:5px}
.post .pb{padding:1.3rem 1.35rem 1.5rem}
.post .dt{font-size:.76rem; color:var(--muted)}
.post h3{font-size:1rem; font-weight:600; line-height:1.4; margin:.4rem 0 .5rem}
.post .go{font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--blue); display:inline-flex; gap:.4em}
@media (max-width:900px){ .posts{grid-template-columns:1fr} }

/* ===================== CTA (açık) ===================== */
.cta{background:var(--blue-soft); border-block:1px solid var(--line)}
.cta .wrap{display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center; padding-block:clamp(40px,6vw,66px)}
.cta h2{color:var(--head); font-size:clamp(1.5rem,3vw,2.05rem); font-weight:600}
.cta p{color:var(--text); margin-top:.5rem}
.cta .badges{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem}
.cta .badges li{display:flex; align-items:center; gap:.45em; font-size:.8rem; font-weight:500; background:var(--bg); border:1px solid var(--line-strong); padding:.45em .9em; border-radius:999px; color:var(--head)}
.cta .badges svg{width:15px; height:15px; color:var(--blue)}
.cta .act{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:flex-end}
@media (max-width:820px){ .cta .wrap{grid-template-columns:1fr} .cta .act{justify-content:flex-start} }

/* ===================== contact ===================== */
.contact-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,56px); align-items:start; margin-top:2.4rem}
.frm{display:grid; gap:1rem}
.frm .two{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.frm label{display:grid; gap:.35rem}
.frm label > span{font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.frm input,.frm select,.frm textarea{font:inherit; font-size:.93rem; padding:.78em .9em; border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--bg); color:var(--head); width:100%}
.frm textarea{min-height:120px; resize:vertical}
.frm input:focus,.frm select:focus,.frm textarea:focus{border-color:var(--blue); outline:none}
.frm .consent{display:flex; gap:.55rem; align-items:flex-start; font-size:.78rem; color:var(--muted)}
.frm .consent input{width:auto; margin-top:.25rem; accent-color:var(--blue)}
.frm .msg{display:none; font-size:.85rem; padding:.85rem 1rem; border:1.5px solid var(--blue); color:var(--blue); background:var(--blue-soft); border-radius:var(--radius-sm)}
.frm .msg.show{display:block}
@media (max-width:560px){ .frm .two{grid-template-columns:1fr} }

.infocard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.7rem; box-shadow:var(--shadow-sm)}
.infocard .row{display:flex; gap:.85rem; padding:.95rem 0; border-top:1px solid var(--line); font-size:.9rem}
.infocard .row:first-child{border-top:0}
.infocard .row svg{width:18px; height:18px; color:var(--blue); flex:none; margin-top:3px}
.infocard .row b{color:var(--head); font-weight:600}
.map{margin-top:1.2rem; aspect-ratio:16/10; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:repeating-linear-gradient(45deg,var(--line) 0 1px,transparent 1px 16px), var(--bg-alt);
  display:grid; place-items:center; font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr} }

/* ===================== faq ===================== */
.faq{margin-top:2.2rem; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:1.25rem 2.4rem 1.25rem 0; position:relative; font-weight:600; color:var(--head); font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:.3rem; top:1rem; font-size:1.4rem; font-weight:400; color:var(--blue); transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 2.4rem 1.4rem 0; font-size:.92rem; max-width:74ch}

/* ===================== prose (text pages) ===================== */
.prose{max-width:760px; font-size:1.02rem; line-height:1.85; color:var(--text)}
.prose > * + *{margin-top:1.1rem}
.prose h2{font-size:1.4rem; margin-top:2.4rem; color:var(--head)}
.prose h3{font-size:1.1rem; margin-top:1.8rem; color:var(--head)}
.prose ul{list-style:none; display:grid; gap:.55rem}
.prose ul li{position:relative; padding-left:1.5rem}
.prose ul li::before{content:""; position:absolute; left:0; top:.65em; width:8px; height:8px; border-radius:2px; background:var(--blue)}
.prose strong{color:var(--head)}
.valuegrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:2.4rem}
.valuegrid .v{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem 1.4rem}
.valuegrid .v .ic{width:44px; height:44px; border-radius:11px; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; margin-bottom:.9rem}
.valuegrid .v .ic svg{width:22px; height:22px}
.valuegrid .v h3{font-size:1rem; font-weight:600; margin-bottom:.3rem}
.valuegrid .v p{font-size:.86rem}
@media (max-width:800px){ .valuegrid{grid-template-columns:1fr} }

/* ===================== footer (açık) ===================== */
.footer{background:var(--footer-bg); color:var(--text); border-top:1px solid var(--line)}
.footer .wrap{padding-block:clamp(48px,7vw,74px)}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.2rem}
.footer h4{color:var(--footer-head); font-size:.82rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1.1rem}
.footer .fb .bn{display:flex; align-items:center; gap:.6em}
.footer .fb .bn .mk{width:38px; height:38px; color:var(--blue)}
.footer .fb .bn .mk svg{width:100%; height:100%}
.footer .fb .bn b{color:var(--footer-head); font-family:"Poppins",sans-serif; font-weight:700; font-size:1.08rem; letter-spacing:.4px}
.footer .fb p{margin-top:1rem; font-size:.86rem; max-width:40ch}
.footer .socs{display:flex; gap:.55rem; margin-top:1.2rem}
.footer .socs a{width:36px; height:36px; border:1px solid var(--line-strong); border-radius:9px; display:grid; place-items:center; color:var(--head)}
.footer .socs a:hover{background:var(--blue); border-color:var(--blue); color:#fff}
.footer .socs svg{width:16px; height:16px}
.footer ul.lk{display:grid; gap:.6rem; font-size:.87rem}
.footer ul.lk a:hover{color:var(--blue)}
.footer .fc{display:grid; gap:.7rem; font-size:.87rem}
.footer .fc div{display:grid; grid-template-columns:auto 1fr; gap:.6rem}
.footer .fc svg{width:15px; height:15px; color:var(--blue); margin-top:4px}
.foot-bottom{border-top:1px solid var(--footer-line); margin-top:2.4rem; padding-top:1.5rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; font-size:.76rem}
.foot-bottom a:hover{color:var(--blue)}
.foot-bottom .credit b{color:var(--blue)}
.foot-note{margin-top:.9rem; font-size:.72rem; color:var(--muted); line-height:1.7; max-width:92ch}
@media (max-width:940px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:540px){ .footer-grid{grid-template-columns:1fr} }

/* ===================== whatsapp fab + totop ===================== */
.wa-fab{position:fixed; right:20px; bottom:20px; z-index:80; width:54px; height:54px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; box-shadow:0 14px 30px -12px rgba(26,158,99,.55); transition:transform .2s}
.wa-fab:hover{transform:translateY(-3px) scale(1.06)}
.wa-fab svg{width:28px; height:28px}
.totop{position:fixed; right:20px; bottom:84px; z-index:80; width:46px; height:46px; border-radius:50%; background:var(--ink); color:#fff; border:0; cursor:pointer; display:grid; place-items:center; opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .25s, transform .25s}
.totop.show{opacity:1; pointer-events:auto; transform:none}
.totop svg{width:18px; height:18px}

/* ===================== çerez bandı ===================== */
.cookie-bar{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:150; max-width:820px; margin-inline:auto;
  background:var(--card); border:1px solid var(--line-strong); border-radius:14px; box-shadow:var(--shadow);
  padding:1rem 1.15rem; display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.2rem;
  transform:translateY(140%); opacity:0; transition:transform .35s ease, opacity .35s ease;
}
.cookie-bar.in{transform:none; opacity:1}
.cookie-bar p{flex:1 1 340px; font-size:.82rem; color:var(--text); line-height:1.6}
.cookie-bar a{color:var(--blue-dark); font-weight:600; text-decoration:underline}
.cookie-bar .cb-act{display:flex; gap:.5rem; flex:0 0 auto}
.cookie-bar button{font:600 .82rem/1 "Poppins",sans-serif; padding:.7em 1.2em; border-radius:999px; cursor:pointer; border:2px solid transparent}
.cookie-bar .cb-no{background:transparent; border-color:var(--line-strong); color:var(--head)}
.cookie-bar .cb-no:hover{border-color:var(--ink)}
.cookie-bar .cb-yes{background:var(--ink); color:#fff}
.cookie-bar .cb-yes:hover{background:var(--blue)}
@media (max-width:560px){ .cookie-bar{flex-direction:column; align-items:stretch} .cookie-bar .cb-act{justify-content:flex-end} }

/* ===================== reveal ===================== */
[data-rv]{opacity:0; transform:translateY(16px)}
[data-rv].in{opacity:1; transform:none; transition:opacity .55s ease, transform .55s ease}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-rv]{opacity:1; transform:none}
  .intro{display:none !important}
  .pm{animation:none}
  .pm .scr::after,.pm-wind span,.pm .crack path,.pm .spark,.pm .tag,.pm-box,.pm-route path,.pm-pin{animation:none}
  .hslide.on .htxt > *,.hslide.on .pm{animation:none}
  *{transition-duration:.001s !important; animation-duration:.001s !important}
}