/* ==========================================================================
   Teknik Servis — Tasarım 4 "Hareketli"
   İndigo · mor · nane · şeftali   |   Space Grotesk + DM Sans
   Scroll ile çizilen, dönen, süzülen illüstrasyonlar.
   ========================================================================== */

/* ---------- 1) TOKEN ---------- */
:root{
  --ink:#141233;
  --ink-2:#272254;
  --mut:#5E5A86;
  --mut-2:#8D89AE;
  --bg:#F7F6FD;
  --bg-2:#ECE9FB;
  --card:#FFFFFF;
  --violet:#5B3DF5;
  --violet-d:#4628DF;
  --violet-t:#EDE9FE;
  --mint:#10BE99;
  --mint-t:#DFF7F1;
  --peach:#FF8A4C;
  --peach-t:#FFEEE3;
  --red:#E8324A;
  --red-d:#C61F36;
  --line:rgba(20,18,51,.12);
  --line-2:rgba(20,18,51,.07);

  --r-s:12px;
  --r:20px;
  --r-l:30px;
  --pill:999px;

  --wrap:1200px;
  --gut:22px;
  --nav-h:72px;
  --bar-h:60px;
  --ease:cubic-bezier(.22,.68,.32,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px)}
body{
  margin:0;font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.64;color:var(--ink-2);background:var(--bg);
  -webkit-font-smoothing:antialiased;padding-bottom:var(--bar-h);overflow-x:hidden
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul,ol{margin:0;padding:0}
li{list-style:none}
h1,h2,h3,h4,p{margin:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}
::selection{background:var(--violet);color:#fff}

.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}
.skip{position:absolute;left:50%;top:-60px;transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:12px 22px;border-radius:0 0 14px 14px;z-index:999;font-weight:700;transition:top .2s}
.skip:focus{top:0}

/* scroll ilerleme çizgisi */
.progress{position:fixed;left:0;top:0;height:3px;z-index:95;width:100%;transform-origin:0 50%;
  transform:scaleX(0);background:linear-gradient(90deg,var(--violet),var(--mint) 55%,var(--peach))}

/* ---------- 2) TİPOGRAFİ ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--n{max-width:840px}

h1,h2,h3,h4{font-family:"Space Grotesk","DM Sans",sans-serif;font-weight:700;
  line-height:1.04;letter-spacing:-.035em;color:var(--ink)}
h1{font-size:clamp(2.6rem,1.5rem + 4.4vw,4.8rem)}
h2{font-size:clamp(2rem,1.35rem + 2.6vw,3.3rem);line-height:1.06}
h3{font-size:clamp(1.2rem,1.08rem + .6vw,1.5rem);line-height:1.14}
h4{font-size:1.08rem}
.hl{color:var(--violet)}
.hl2{color:var(--mint)}
.hl3{color:var(--peach)}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.73rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--violet);margin-bottom:18px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.eyebrow--c::after{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.eyebrow--light{color:var(--mint)}

.sub{font-size:clamp(1rem,.95rem + .3vw,1.16rem);color:var(--mut);line-height:1.7}
.body{font-size:1.0625rem;line-height:1.74;color:var(--ink-2)}
p + p{margin-top:16px}

.shead{max-width:760px;margin-bottom:clamp(38px,4vw,62px)}
.shead .sub{margin-top:16px}
.shead--c{margin-inline:auto;text-align:center}
.shead--c .eyebrow{justify-content:center}

.uline{width:clamp(150px,22vw,240px);height:auto;color:var(--mint);margin-top:6px}

.section{padding:clamp(60px,6vw,110px) 0;position:relative}
.section--soft{background:var(--bg-2)}
.section--card{background:var(--card)}
.section--violet{background:var(--violet);color:#EDE9FE}
.section--violet h2,.section--violet h3{color:#fff}
.section--violet .sub{color:rgba(237,233,254,.85)}
.section--ink{background:var(--ink);color:#C9C5E8;overflow:hidden}
.section--ink h2,.section--ink h3{color:#fff}
.section--ink .sub{color:rgba(201,197,232,.82)}
.section--ink::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(640px 320px at 18% 0%,rgba(91,61,245,.42),transparent 62%),
             radial-gradient(520px 300px at 88% 100%,rgba(16,190,153,.26),transparent 64%)}
.section--ink > *{position:relative}

/* ---------- 3) BUTONLAR ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 28px;border-radius:var(--pill);
  font-weight:700;font-size:1rem;letter-spacing:-.01em;
  background:var(--violet);color:#fff;border:2px solid transparent;
  box-shadow:0 10px 24px -12px rgba(91,61,245,.9);
  transition:transform .18s var(--ease),box-shadow .22s,background .18s,color .18s,border-color .18s
}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 30px -14px rgba(91,61,245,.95)}
.btn--red{background:var(--red);box-shadow:0 10px 24px -12px rgba(232,50,74,.9)}
.btn--red:hover{background:var(--red-d)}
.btn--mint{background:var(--mint);color:#06281F;box-shadow:0 10px 24px -12px rgba(16,190,153,.8)}
.btn--line{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}
.btn--line:hover{border-color:var(--violet);color:var(--violet)}
.btn--light{background:#fff;color:var(--ink);box-shadow:0 10px 24px -14px rgba(20,18,51,.4)}
.btn--ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.35);box-shadow:none}
.btn--ghost:hover{background:#fff;color:var(--violet);border-color:#fff}
.btn--lg{min-height:60px;padding:0 34px;font-size:1.06rem}
.btn--block{width:100%}

.lnk{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--violet);transition:gap .2s var(--ease)}
.lnk svg{width:17px;height:17px}
.lnk:hover{gap:13px}
.lnk--light{color:var(--mint)}
.lnks{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:24px}

/* ---------- 4) MENÜ ---------- */
.nav{position:sticky;top:0;z-index:70;background:rgba(247,246,253,.86);
  backdrop-filter:saturate(170%) blur(16px);-webkit-backdrop-filter:saturate(170%) blur(16px);
  border-bottom:1px solid transparent;transition:border-color .22s,box-shadow .22s}
.nav.is-stuck{border-bottom-color:var(--line-2);box-shadow:0 8px 26px -22px rgba(20,18,51,.6)}
.nav__in{max-width:var(--wrap);margin-inline:auto;height:var(--nav-h);padding-inline:var(--gut);
  display:flex;align-items:center;gap:16px}

.logo{display:flex;align-items:center;gap:11px;margin-right:auto}
.logo__m{width:40px;height:40px;flex:0 0 auto;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--violet),var(--mint));color:#fff;
  font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:-.04em}
.logo__t{display:flex;flex-direction:column;line-height:1.14}
.logo__t b{font-family:"Space Grotesk",sans-serif;font-size:1.12rem;font-weight:700;letter-spacing:-.04em;color:var(--ink)}
.logo__t span{font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mut-2)}

.menu{display:flex;align-items:center;gap:2px}
.menu > li{position:relative}
.menu a,.menu button{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:12px;
  font-size:.94rem;font-weight:600;color:var(--ink-2);transition:color .16s,background .16s}
.menu a:hover,.menu button:hover{color:var(--violet);background:var(--violet-t)}
.menu [aria-current]{color:var(--violet)}
.menu button svg{width:12px;height:12px;transition:transform .2s}
.menu li.is-open > button svg{transform:rotate(180deg)}

.mega{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,8px);
  width:min(640px,86vw);padding:14px;background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--r);box-shadow:0 26px 60px -26px rgba(20,18,51,.5);
  display:grid;grid-template-columns:1fr 1fr;gap:3px;
  opacity:0;visibility:hidden;transition:opacity .2s,transform .22s var(--ease),visibility .2s}
.menu li.is-open .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:12px;font-size:.93rem;font-weight:600;width:100%}
.mega a:hover{background:var(--bg-2);color:var(--ink)}
.mega .art{width:40px;height:34px;flex:0 0 auto;color:var(--violet);stroke-width:4.5}

.nav__tel{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.94rem;color:var(--ink)}
.nav__tel svg{width:17px;height:17px;color:var(--violet)}
.nav .btn{min-height:44px;padding:0 20px;font-size:.92rem}

.burger{display:none;width:46px;height:46px;border-radius:14px;border:1px solid var(--line);
  background:var(--card);place-items:center}
.burger span{display:block;width:18px;height:2.4px;background:var(--ink);border-radius:3px;position:relative;transition:transform .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2.4px;background:var(--ink);border-radius:3px;transition:transform .2s,opacity .16s}
.burger span::before{top:-6px}
.burger span::after{top:6px}
body.menu-open .burger span{transform:rotate(45deg)}
body.menu-open .burger span::before{transform:translateY(6px);opacity:0}
body.menu-open .burger span::after{transform:translateY(-6px) rotate(-90deg)}

.mnav{position:fixed;inset:0;z-index:66;background:var(--bg);
  padding:calc(var(--nav-h) + 30px) var(--gut) calc(var(--bar-h) + 30px);overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s,transform .24s var(--ease),visibility .22s}
body.menu-open .mnav{opacity:1;visibility:visible;transform:none}
.mnav > ul{max-width:640px;margin-inline:auto}
.mnav > ul > li > a,.mnav__sum{display:flex;align-items:center;justify-content:space-between;padding:15px 2px;
  font-family:"Space Grotesk",sans-serif;font-size:1.6rem;font-weight:700;letter-spacing:-.035em;
  color:var(--ink);border-bottom:1px solid var(--line-2);width:100%}
.mnav__sum{cursor:pointer;list-style:none}
.mnav__sum::-webkit-details-marker{display:none}
.mnav__sum::after{content:"";width:10px;height:10px;border-right:2.6px solid var(--violet);border-bottom:2.6px solid var(--violet);
  transform:rotate(45deg) translateY(-2px);transition:transform .22s}
.mnav details[open] .mnav__sum::after{transform:rotate(-135deg)}
.mnav__sub{padding:10px 0 18px;display:grid;gap:2px}
.mnav__sub a{display:flex;align-items:center;gap:13px;padding:10px 2px;font-size:1.02rem;font-weight:600;color:var(--mut)}
.mnav__sub .art{width:44px;height:36px;color:var(--violet);stroke-width:4.5}
.mnav__foot{max-width:640px;margin:26px auto 0;display:grid;gap:12px}

/* ---------- 5) ÇİZİM ANİMASYON TEMELLERİ ---------- */
.art{width:100%;height:auto;color:var(--violet)}
.js .art[data-draw] *{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000)}
.js .art[data-draw].is-drawn *{stroke-dashoffset:0;transition:stroke-dashoffset 1.15s var(--ease)}
.js .art[data-draw].is-drawn *:nth-child(2){transition-delay:.08s}
.js .art[data-draw].is-drawn *:nth-child(3){transition-delay:.16s}
.js .art[data-draw].is-drawn *:nth-child(4){transition-delay:.24s}
.js .art[data-draw].is-drawn *:nth-child(5){transition-delay:.32s}
.js .art[data-draw].is-drawn *:nth-child(n+6){transition-delay:.4s}

.art-wrap{position:relative;display:grid;place-items:center}
.art-wrap::before{content:"";position:absolute;width:76%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(91,61,245,.16),transparent 72%)}
.art-wrap--mint::before{background:radial-gradient(closest-side,rgba(16,190,153,.2),transparent 72%)}
.art-wrap--peach::before{background:radial-gradient(closest-side,rgba(255,138,76,.22),transparent 72%)}
.art-wrap > *{position:relative}

/* ---------- 6) HERO ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(40px,5vw,84px)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,62px);align-items:center}
.hero h1{max-width:13ch}
.hero .sub{margin-top:22px;max-width:45ch}
.hero__act{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--pill);
  background:var(--card);border:1px solid var(--line-2);font-size:.85rem;font-weight:600;color:var(--ink-2)}
.chip svg{width:15px;height:15px;color:var(--mint)}
.hero__hint{display:inline-flex;align-items:center;gap:10px;margin-top:28px;font-size:.84rem;
  font-weight:600;color:var(--mut-2)}
.hero__hint svg{width:19px;height:19px;color:var(--violet);animation:bob 1.9s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.hero__art .art{max-width:460px;margin-inline:auto}

/* sayfa içi başlık */
.phero{padding-block:clamp(34px,4vw,66px)}
.phero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.phero h1{max-width:17ch}
.phero .sub{margin-top:18px;max-width:56ch}
.phero__act{display:flex;flex-wrap:wrap;gap:13px;margin-top:28px}
.phero__art .art{max-width:280px;margin-left:auto}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:.8rem;font-weight:600;color:var(--mut-2);margin-bottom:14px}
.crumbs a:hover{color:var(--violet)}
.crumbs [aria-current]{color:var(--ink-2)}

/* ---------- 7) YOL ŞERİDİ (araç scroll ile ilerler) ---------- */
.road{position:relative;padding:clamp(26px,3.4vw,50px) 0;overflow:hidden}
.road__svg{width:100%;height:clamp(110px,13vw,180px);display:block;overflow:visible}
.road__path{fill:none;stroke:var(--line);stroke-width:3;stroke-linecap:round;stroke-dasharray:2 14}
.road__done{fill:none;stroke:var(--violet);stroke-width:3.4;stroke-linecap:round}
.road__rider{color:var(--violet)}
.road__rider .van{width:clamp(110px,13vw,170px)}
.road__cap{text-align:center;margin-top:8px;font-size:.84rem;font-weight:600;color:var(--mut-2)}

/* ---------- 8) ŞERİT (sonsuz kayan cihaz dizisi) ---------- */
.strip{overflow:hidden;padding:clamp(26px,3vw,44px) 0;background:var(--ink);color:#C9C5E8}
.strip__row{display:flex;gap:clamp(32px,4vw,72px);width:max-content;will-change:transform}
.strip__i{display:inline-flex;align-items:center;gap:16px;white-space:nowrap;
  font-family:"Space Grotesk",sans-serif;font-size:clamp(1.3rem,1rem + 1.4vw,2.1rem);
  font-weight:700;letter-spacing:-.03em;color:rgba(255,255,255,.26)}
.strip__i .art{width:clamp(34px,3.6vw,52px);height:auto;color:var(--mint);stroke-width:5}
.strip__i:nth-child(even){color:rgba(255,255,255,.5)}

/* ---------- 9) KARTLAR ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px 24px 26px;
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-l);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .22s}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -26px rgba(20,18,51,.42);border-color:var(--violet-t)}
.card .art{max-width:150px;height:118px;margin:0 auto 4px;color:var(--violet)}
.card:nth-child(4n+2) .art{color:var(--mint)}
.card:nth-child(4n+3) .art{color:var(--peach)}
.card:nth-child(4n+4) .art{color:var(--red)}
.card h3{font-size:1.18rem;text-align:center}
.card p{font-size:.92rem;color:var(--mut);line-height:1.62;flex:1;text-align:center}
.card__go{display:flex;align-items:center;justify-content:center;gap:7px;font-size:.8rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--violet)}
.card__go svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.card:hover .card__go svg{transform:translateX(4px)}
.card__link{position:absolute;inset:0;border-radius:inherit}
.cards--3{grid-template-columns:repeat(3,1fr)}
.card--flat{border-style:dashed;background:transparent}
.card--flat:hover{transform:none;box-shadow:none}

/* ---------- 10) SABİTLENEN ADIM BÖLÜMÜ ---------- */
.pin{position:relative}
.pin__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,4vw,70px);align-items:start}
.pin__art{position:sticky;top:calc(var(--nav-h) + 40px);display:grid;place-items:center;min-height:320px}
.pin__art .art{max-width:330px}
.pin__badge{position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border-radius:var(--pill);
  background:var(--card);border:1px solid var(--line-2);font-size:.82rem;font-weight:700;color:var(--violet)}
.pin__steps{display:grid;gap:clamp(26px,4vw,64px);padding-block:clamp(20px,4vw,60px)}
.pin__step{display:flex;gap:20px;align-items:flex-start;opacity:.42;transition:opacity .4s var(--ease)}
.pin__step.is-on{opacity:1}
.pin__n{width:54px;height:54px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  background:var(--bg-2);color:var(--mut);font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.15rem;
  transition:background .4s,color .4s,transform .4s var(--ease)}
.pin__step.is-on .pin__n{background:var(--violet);color:#fff;transform:scale(1.06)}
.pin__step h3{margin-bottom:9px}
.pin__step p{font-size:.98rem;color:var(--mut);line-height:1.68}

/* ---------- 11) DİĞER BİLEŞENLER ---------- */
.ticks{display:grid;gap:14px}
.ticks li{display:flex;gap:13px;align-items:flex-start;font-size:1.0625rem;line-height:1.6}
.ticks li svg{width:20px;height:20px;flex:0 0 auto;color:var(--mint);margin-top:4px}
.ticks--2{grid-template-columns:repeat(2,1fr);gap:14px 32px}
.ticks--light li{color:rgba(255,255,255,.88)}
.ticks--light li svg{color:var(--mint)}

.note{display:flex;gap:15px;align-items:flex-start;padding:22px 24px;border-radius:var(--r);
  background:var(--peach-t);border:1px solid rgba(255,138,76,.3);font-size:.96rem;line-height:1.64;color:#7A3F17}
.note svg{width:21px;height:21px;flex:0 0 auto;color:var(--peach);margin-top:3px}
.note strong{color:#5A2D0C;font-weight:700}

.faq{display:grid;gap:12px}
.faq details{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);
  transition:border-color .2s,box-shadow .2s}
.faq details[open]{border-color:var(--violet-t);box-shadow:0 18px 40px -26px rgba(20,18,51,.4)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 24px;
  font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.06rem;letter-spacing:-.02em;
  color:var(--ink);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--violet-t);
  position:relative;transition:transform .26s var(--ease);
  background-image:linear-gradient(var(--violet),var(--violet)),linear-gradient(var(--violet),var(--violet));
  background-size:11px 2.2px,2.2px 11px;background-position:center,center;background-repeat:no-repeat}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq__a{padding:0 24px 22px;font-size:.98rem;line-height:1.74;color:var(--mut)}

.callbox{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-l);
  padding:clamp(30px,3.4vw,54px);text-align:center;box-shadow:0 30px 60px -36px rgba(20,18,51,.5);position:relative;overflow:hidden}
.callbox::before{content:"";position:absolute;inset:-40% 40% 60% -20%;
  background:radial-gradient(closest-side,rgba(91,61,245,.14),transparent 70%)}
.callbox > *{position:relative}
.callbox .art{width:120px;height:96px;margin:0 auto 10px;color:var(--mint)}
.callbox__num{display:inline-flex;align-items:center;gap:14px;margin:16px 0 6px;
  font-family:"Space Grotesk",sans-serif;font-size:clamp(2rem,1.4rem + 2.4vw,3rem);
  font-weight:700;letter-spacing:-.045em;color:var(--ink);transition:color .18s}
.callbox__num:hover{color:var(--violet)}
.callbox__num svg{width:clamp(26px,2vw,34px);height:clamp(26px,2vw,34px);color:var(--violet)}
.callbox__h{font-size:.94rem;color:var(--mut)}
.callbox .btn{margin-top:24px}
.callbox__note{margin-top:20px;font-size:.82rem;color:var(--mut-2);max-width:46ch;margin-inline:auto;line-height:1.56}

.linkgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.linkgrid a{display:flex;align-items:center;gap:12px;padding:12px 18px;background:var(--card);
  border:1px solid var(--line-2);border-radius:var(--r);font-size:.93rem;font-weight:700;color:var(--ink);
  transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.linkgrid a:hover{transform:translateY(-4px);box-shadow:0 20px 36px -24px rgba(20,18,51,.45);border-color:var(--violet-t)}
.linkgrid .art{width:44px;height:36px;flex:0 0 auto;color:var(--violet);stroke-width:4.5}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,66px);align-items:center}
.split--wide{grid-template-columns:1.14fr .86fr}

.cinfo{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cbox{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-l);padding:30px 26px;display:grid;gap:12px}
.cbox__i{width:50px;height:50px;display:grid;place-items:center;border-radius:16px;background:var(--violet-t);color:var(--violet)}
.cbox:nth-child(2) .cbox__i{background:var(--mint-t);color:var(--mint)}
.cbox:nth-child(3) .cbox__i{background:var(--peach-t);color:var(--peach)}
.cbox__i svg{width:23px;height:23px}
.cbox h3{font-size:1.08rem}
.cbox p{font-size:.94rem;color:var(--mut);line-height:1.6}
.cbox a.big,.cbox span.big{font-family:"Space Grotesk",sans-serif;font-size:1.2rem;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.cbox a.big:hover{color:var(--violet)}
.cbox dl{display:grid;gap:9px;font-size:.92rem}
.cbox dl div{display:flex;justify-content:space-between;gap:14px;padding-bottom:9px;border-bottom:1px solid var(--line-2)}
.cbox dl div:last-child{border-bottom:0;padding-bottom:0}
.cbox dt{font-weight:700;color:var(--ink-2)}
.cbox dd{margin:0;color:var(--mut);text-align:right}

/* ---------- 12) FOOTER ---------- */
.ftr{background:var(--ink);color:rgba(201,197,232,.74);font-size:.95rem;padding-top:clamp(48px,4.4vw,78px);position:relative;overflow:hidden}
.ftr::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 300px at 12% 0%,rgba(91,61,245,.3),transparent 62%)}
.ftr > *{position:relative}
.ftr__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(26px,3vw,50px)}
.ftr .logo__t b{color:#fff}
.ftr .logo__t span{color:rgba(201,197,232,.5)}
.ftr h4{color:#fff;font-size:.76rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}
.ftr__about{margin-top:18px;line-height:1.74;max-width:40ch}
.ftr ul{display:grid;gap:11px}
.ftr ul a:hover{color:var(--mint)}
.ftr__c{display:grid;gap:14px}
.ftr__c > div{display:flex;gap:12px;align-items:flex-start}
.ftr__c svg{width:19px;height:19px;color:var(--mint);flex:0 0 auto;margin-top:3px}
.ftr__c b{display:block;color:#fff;font-size:1rem}
.ftr__c small{display:block;font-size:.82rem;color:rgba(201,197,232,.5);margin-top:2px}

.disc{margin-top:clamp(34px,3vw,54px);padding:26px 28px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);border-left:4px solid var(--mint);border-radius:var(--r);
  display:flex;gap:16px;align-items:flex-start}
.disc svg{width:23px;height:23px;color:var(--mint);flex:0 0 auto;margin-top:3px}
.disc b{display:block;font-family:"Space Grotesk",sans-serif;color:#fff;font-size:1.1rem;margin-bottom:11px}
.disc p{font-size:.88rem;line-height:1.78;color:rgba(201,197,232,.7)}
.disc p + p{margin-top:9px}
.disc strong{color:#fff}

.ftr__bot{margin-top:28px;padding:20px 0 28px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  font-size:.84rem;color:rgba(201,197,232,.5)}
.ftr__bot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.ftr__bot nav a:hover{color:var(--mint)}

/* ---------- 13) SABİT ARAMA ŞERİDİ ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--red);
  box-shadow:0 -10px 30px -14px rgba(0,0,0,.5);padding-bottom:env(safe-area-inset-bottom)}
.callbar a{display:flex;align-items:center;justify-content:center;gap:13px;min-height:var(--bar-h);
  padding:0 20px;color:#fff;transition:background .18s}
.callbar a:hover,.callbar a:focus-visible{background:var(--red-d)}
.callbar svg{width:20px;height:20px;flex:0 0 auto}
.callbar small{font-size:.78rem;font-weight:600;opacity:.9}
.callbar b{font-family:"Space Grotesk",sans-serif;font-size:1.16rem;font-weight:700;letter-spacing:-.03em}

.cookie{position:fixed;left:var(--gut);bottom:calc(var(--bar-h) + 16px);z-index:85;
  width:min(430px,calc(100vw - var(--gut)*2));background:var(--card);
  border:1px solid var(--line-2);border-top:4px solid var(--violet);border-radius:var(--r);
  box-shadow:0 30px 60px -26px rgba(20,18,51,.6);padding:22px 24px;
  opacity:0;visibility:hidden;transform:translateY(16px);
  transition:opacity .3s,transform .3s var(--ease),visibility .3s}
.cookie.is-on{opacity:1;visibility:visible;transform:none}
.cookie b{display:block;font-family:"Space Grotesk",sans-serif;font-size:1.06rem;color:var(--ink);margin-bottom:8px}
.cookie p{font-size:.87rem;color:var(--mut);line-height:1.6}
.cookie p a{color:var(--violet);font-weight:700}
.cookie__act{display:flex;gap:10px;margin-top:18px}
.cookie__act .btn{min-height:42px;padding:0 18px;font-size:.88rem;flex:1}

/* ---------- 14) YASAL ---------- */
.legal{display:grid;grid-template-columns:252px 1fr;gap:clamp(28px,3.4vw,58px);align-items:start}
.toc{position:sticky;top:calc(var(--nav-h) + 24px);background:var(--card);border:1px solid var(--line-2);
  border-top:3px solid var(--violet);border-radius:var(--r);padding:24px}
.toc b{display:block;font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--violet);margin-bottom:16px}
.toc ol{display:grid;gap:3px}
.toc a{display:block;padding:8px 10px;border-radius:10px;font-size:.89rem;font-weight:600;color:var(--ink-2);transition:background .16s}
.toc a:hover{background:var(--bg-2);color:var(--violet)}

.prose{max-width:72ch}
.prose h2{font-size:clamp(1.4rem,1.2rem + .7vw,1.85rem);margin:46px 0 16px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.14rem;margin:28px 0 12px}
.prose p{color:var(--mut);line-height:1.8;margin-bottom:17px}
.prose strong{color:var(--ink-2);font-weight:700}
.prose ul,.prose ol{display:grid;gap:11px;margin:0 0 22px}
.prose ul li{position:relative;padding-left:26px;color:var(--mut);line-height:1.74}
.prose ul li::before{content:"";position:absolute;left:4px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--mint)}
.prose ol{counter-reset:p}
.prose ol li{position:relative;padding-left:34px;color:var(--mut);line-height:1.74;counter-increment:p}
.prose ol li::before{content:counter(p);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;
  background:var(--violet-t);color:var(--violet);font-size:.74rem;font-weight:700;display:grid;place-items:center}
.prose a{color:var(--violet);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.prose table{margin:0 0 22px;font-size:.93rem;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.prose th,.prose td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:top}
.prose th{background:var(--bg-2);font-weight:700;font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
.prose td{color:var(--mut)}
.prose tr:last-child td{border-bottom:0}
.prose__meta{font-size:.85rem;color:var(--mut-2);padding-bottom:22px;margin-bottom:30px;border-bottom:1px solid var(--line-2)}

.nf{text-align:center;padding:clamp(60px,7vw,120px) 0;display:grid;gap:20px;justify-items:center}
.nf .art{width:200px;height:auto;color:var(--violet)}
.nf b{font-family:"Space Grotesk",sans-serif;font-size:clamp(3.4rem,8vw,5.6rem);font-weight:700;
  letter-spacing:-.05em;color:var(--violet);line-height:1}

/* ---------- 15) YARDIMCI & RESPONSIVE ---------- */
.mt-s{margin-top:16px}.mt-m{margin-top:28px}.mt-l{margin-top:48px}
.center{text-align:center}

.js .reveal{opacity:0;transform:translateY(24px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .75s var(--ease),transform .75s var(--ease)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
  .js .reveal{opacity:1;transform:none}
  .js .art[data-draw] *{stroke-dasharray:none;stroke-dashoffset:0}
  .pin__step{opacity:1}
  .progress{display:none}
}

@media (max-width:1080px){
  .cards,.linkgrid{grid-template-columns:repeat(2,1fr)}
  .cards--3{grid-template-columns:1fr}
  .cinfo{grid-template-columns:1fr}
  .legal{grid-template-columns:1fr}
  .toc{position:static}
  .toc ol{grid-template-columns:1fr 1fr}
  .pin__grid{grid-template-columns:1fr}
  .pin__art{position:static;min-height:0;margin-bottom:30px}
  .pin__step{opacity:1}
}
@media (max-width:960px){
  .menu,.nav__tel{display:none}
  .burger{display:grid}
  .hero .wrap,.phero .wrap,.split,.split--wide{grid-template-columns:1fr;gap:34px}
  .hero__art{order:-1}
  .phero__art{display:none}
}
@media (max-width:680px){
  :root{--gut:18px}
  .cards,.linkgrid,.ticks--2{grid-template-columns:1fr}
  .ftr__top{grid-template-columns:1fr;gap:32px}
  .toc ol{grid-template-columns:1fr}
  .hero__act .btn{width:100%}
  .ftr__bot{flex-direction:column;align-items:flex-start}
  .cookie{left:12px;right:12px;width:auto;padding:20px}
  .callbar small{display:none}
}
@media (max-width:620px){
  .nav__call span{display:none}
  .nav__call{width:46px;min-height:46px;padding:0}
  .logo__t span{display:none}
}

@media print{
  .nav,.callbar,.cookie,.mnav,.burger,.road,.strip,.progress{display:none!important}
  body{padding-bottom:0;background:#fff}
}