/* ==========================================================================
   Reachbotics — tasarım sistemi v0.1 (şablon / prototip)
   Koyu, minimal, teknik. Tek vurgu rengi: logo mavisi #1996E8.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:#0a0c0f; --bg-2:#101317; --bg-3:#161a1f;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  --fg:#f3f4f6; --fg-2:#b3b9c3; --fg-3:#7c8591;
  --accent:#1996e8; --accent-2:#5cbcff;
  --studio:#f4f5f7; --studio-fg:#0b0d10; --studio-fg-2:#5b6470;
  --radius:20px; --radius-sm:12px;
  --font-display:"Space Grotesk",Inter,system-ui,sans-serif;
  --font-body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --max:1200px; --pad:clamp(20px,4vw,48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:rgba(25,150,232,.35)}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* ---------- Üst menü ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:72px;display:flex;align-items:center;border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.nav.is-scrolled{background:rgba(10,12,15,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--line)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%}
.nav__logo{display:flex;align-items:center;gap:10px}
.nav__logo img{height:26px;width:auto}
.nav__links{display:flex;gap:28px;font-size:14px;color:var(--fg-2)}
.nav__links a{transition:color .2s}
.nav__links a:hover,.nav__links a.is-active{color:var(--fg)}
.nav__cta{display:flex;gap:14px;align-items:center}
.lang{font:500 12px var(--font-mono);color:var(--fg-3);letter-spacing:.08em;white-space:nowrap}
.lang b{color:var(--fg);font-weight:500}
.burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:none;color:var(--fg);cursor:pointer;font-size:16px}
.mobilemenu{position:fixed;top:72px;left:0;right:0;z-index:49;background:rgba(10,12,15,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:8px var(--pad) 22px;display:none}
.mobilemenu.is-open{display:block}
.mobilemenu a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font:500 17px var(--font-display);letter-spacing:-.01em}
.mobilemenu a:last-of-type{border:0}
.mobilemenu .lang{display:inline-block;margin-top:10px}

/* ---------- Butonlar ---------- */
.pill{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);background:transparent;font:500 12.5px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--fg);transition:.2s;white-space:nowrap;cursor:pointer}
.pill:hover{border-color:rgba(255,255,255,.4);transform:translateY(-1px)}
.pill--primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.pill--primary:hover{background:#fff;border-color:#fff}
.pill--accent{background:var(--accent);border-color:var(--accent);color:#fff}
.pill--accent:hover{background:#2aa3f2;border-color:#2aa3f2}
.pill--ghost{border-color:transparent;color:var(--fg-2)}
.pill--ghost:hover{color:var(--fg);border-color:transparent}
.pill--block{width:100%;justify-content:center;height:52px;font-size:13.5px}
.pill--sm{height:34px;padding:0 14px;font-size:11px}

/* ---------- Tipografi ---------- */
.eyebrow{font:500 11.5px/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.eyebrow--accent{color:var(--accent-2)}
.display{font-family:var(--font-display);font-weight:600;letter-spacing:-.035em;line-height:1.02;margin:0}
.display--xl{font-size:clamp(44px,6.2vw,84px)}
.display--l{font-size:clamp(34px,4.6vw,60px)}
.display--m{font-size:clamp(26px,3vw,40px)}
.lead{font-size:clamp(17px,1.35vw,19px);color:var(--fg-2);max-width:56ch;margin:0}
.muted{color:var(--fg-2)}
.small{font-size:14px}
.mono{font-family:var(--font-mono)}
.accent{color:var(--accent-2)}

/* ---------- Bölümler ---------- */
.section{padding:clamp(72px,10vw,140px) 0}
[id]{scroll-margin-top:88px}
.section--tight{padding:clamp(48px,6vw,80px) 0}
.section--flush-top{padding-top:0}
.section__head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,64px)}
@media(min-width:900px){.section__head{grid-template-columns:1.15fr .85fr;align-items:end}}
.section__head .lead{justify-self:start}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- Kaydırmalı kare dizisi (hero) ---------- */
.seq{position:relative;height:460vh}
.seq__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#080b0e}
.seq__canvas{position:absolute;inset:0;width:100%;height:100%}
.seq__vignette{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(8,11,14,.6) 100%),
  linear-gradient(180deg,rgba(8,11,14,.55) 0%,transparent 22%,transparent 80%,rgba(10,12,15,1) 100%)}
.seq__layer{position:absolute;inset:0;display:flex;align-items:center;opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease;pointer-events:none}
.seq__layer.is-on{opacity:1;transform:none;pointer-events:auto}
.seq__layer .container{width:100%;position:relative}
.seq__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,11,14,.92) 0%,rgba(8,11,14,.6) 38%,rgba(8,11,14,0) 70%)}
@media(max-width:760px){.seq__shade{background:linear-gradient(180deg,rgba(8,11,14,0) 30%,rgba(8,11,14,.75) 60%,rgba(8,11,14,.95) 100%)}}
.hero__copy{max-width:600px}
.hero__copy .display{margin:20px 0 22px}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.cap{max-width:400px}
.cap--right{margin-left:auto}
.cap h3{font:600 clamp(24px,2.6vw,34px)/1.1 var(--font-display);letter-spacing:-.025em;margin:14px 0 10px}
.cap p{color:var(--fg-2);margin:0}
.seq__progress{position:absolute;right:30px;top:50%;transform:translateY(-50%);width:2px;height:150px;background:var(--line-2);border-radius:2px;overflow:hidden}
.seq__progress i{display:block;width:100%;height:100%;background:var(--accent);transform-origin:top;transform:scaleY(0)}
.seq__hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);font:500 10.5px var(--font-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--fg-3);display:flex;flex-direction:column;align-items:center;gap:10px;transition:opacity .4s}
.seq__hint::after{content:"";width:1px;height:36px;background:linear-gradient(var(--fg-3),transparent);animation:hint 1.8s infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.seq__loader{position:absolute;left:var(--pad);bottom:30px;font:500 10.5px var(--font-mono);letter-spacing:.16em;color:var(--fg-3);text-transform:uppercase;display:flex;align-items:center;gap:10px;transition:opacity .6s}
.seq__loader i{width:80px;height:2px;background:var(--line-2);display:block;overflow:hidden}
.seq__loader i::before{content:"";display:block;height:100%;width:var(--w,0%);background:var(--accent);transition:width .25s}
.seq__loader.is-done{opacity:0}
.seq__frame{position:absolute;right:var(--pad);bottom:30px;font:500 10.5px var(--font-mono);letter-spacing:.16em;color:var(--fg-3)}
/* Dar ya da dikey ekran: nesne ortada kalır, metinler alta iner, alt gradyan okunurluğu sağlar */
@media(max-width:1000px),(orientation:portrait){
  .seq__layer{align-items:flex-end;padding-bottom:88px}
  .seq__layer::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,11,14,0) 28%,rgba(8,11,14,.78) 58%,rgba(8,11,14,.97) 100%)}
  .seq__shade{display:none}
  .seq__hint{display:none}
  .cap{max-width:560px}
  .hero__copy{max-width:640px}
  .seq__progress{display:none}
}

/* ---------- Sayı şeridi ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg-2)}
@media(min-width:820px){.stats{grid-template-columns:repeat(5,1fr)}}
.stat{padding:28px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat b{display:block;font:600 clamp(28px,2.6vw,38px)/1 var(--font-display);letter-spacing:-.03em;margin-bottom:10px}
.stat span{font:500 11px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}

/* ---------- Grid & kartlar ---------- */
.grid{display:grid;gap:20px}
.grid>*{min-width:0}
.grid--2,.grid--3{grid-template-columns:1fr}
@media(min-width:640px){.grid--2,.grid--3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid--3{grid-template-columns:repeat(3,1fr)}}
.card{display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:border-color .25s,transform .25s;position:relative}
.card:hover{border-color:var(--line-2);transform:translateY(-3px)}
.card--studio{background:var(--studio);color:var(--studio-fg);border-color:transparent}
.card--studio p,.card--studio .muted{color:var(--studio-fg-2)}
.card__media{border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:4/3;background:#0d1014;margin:-8px -8px 22px;display:grid;place-items:center;position:relative}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover .card__media img{transform:scale(1.04)}
.card__media svg{width:56%;height:auto;opacity:.85}
.card h3{font:600 22px/1.15 var(--font-display);letter-spacing:-.02em;margin:14px 0 8px}
.card p{margin:0;color:var(--fg-2);font-size:15px}
.card__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:24px;flex-wrap:wrap}
.price{font:600 20px/1 var(--font-display);letter-spacing:-.02em;white-space:nowrap}
.price small{font:500 10.5px var(--font-mono);color:var(--fg-3);letter-spacing:.1em;margin-left:6px;text-transform:uppercase}
.arrow{font:600 12.5px var(--font-display);letter-spacing:.08em;text-transform:uppercase;display:inline-flex;gap:8px;align-items:center;color:var(--fg);transition:color .2s,gap .2s;white-space:nowrap}
.arrow:hover{color:var(--accent-2);gap:12px}
.card--studio .arrow{color:var(--studio-fg)}
.badge{position:absolute;top:18px;left:18px;z-index:2}

/* ---------- İkili bölüm ---------- */
.split{display:grid;gap:32px;align-items:center}
@media(min-width:960px){.split{grid-template-columns:1fr 1fr;gap:72px}.split--rev>:first-child{order:2}}
.split__media{border-radius:var(--radius);overflow:hidden;background:var(--studio);aspect-ratio:5/4;position:relative}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__media--dark{background:#0d1014;border:1px solid var(--line)}
.split__media .tag{position:absolute;left:18px;bottom:18px}
.list{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:16px}
.list li{position:relative;padding-left:26px;color:var(--fg-2);font-size:15px}
.list li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(25,150,232,.15)}
.list li b{color:var(--fg);display:block;font-weight:600;margin-bottom:2px}
.split .display{margin:16px 0 18px}

/* ---------- Belirme animasyonu ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.1s}.reveal[data-delay="2"]{transition-delay:.2s}.reveal[data-delay="3"]{transition-delay:.3s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.seq__hint::after{animation:none}}

/* ---------- Akan yazı ---------- */
.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;font:500 11.5px var(--font-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker__track{display:inline-flex;gap:64px;padding-right:64px;animation:ticker var(--ticker-sure,48s) linear infinite;will-change:transform}
@keyframes ticker{to{transform:translateX(calc(-1 * var(--ticker-genislik, 50%)))}}
@media(prefers-reduced-motion:reduce){.ticker__track{animation:none}}

/* ---------- CTA bandı ---------- */
.band{border:1px solid var(--line);border-radius:28px;padding:clamp(36px,5vw,64px);display:grid;gap:24px;background:linear-gradient(180deg,var(--bg-2),transparent);position:relative;overflow:hidden}
@media(min-width:900px){.band{grid-template-columns:1.2fr .8fr;align-items:center}}
.band::before{content:"";position:absolute;right:-12%;bottom:-70%;width:60%;aspect-ratio:1;background:radial-gradient(circle,rgba(25,150,232,.22),transparent 60%);pointer-events:none}
.band .display{margin:14px 0 12px}
.newsletter{display:flex;gap:8px;background:var(--bg);border:1px solid var(--line-2);border-radius:999px;padding:6px 6px 6px 20px;position:relative}
.newsletter input{flex:1;background:none;border:0;color:var(--fg);font:15px var(--font-body);outline:0;min-width:0}
.newsletter input::placeholder{color:var(--fg-3)}

/* ---------- Alt bilgi ---------- */
.footer{border-top:1px solid var(--line);padding:64px 0 32px;color:var(--fg-2);font-size:14px}
.footer__grid{display:grid;gap:36px;grid-template-columns:1fr 1fr}
@media(min-width:900px){.footer__grid{grid-template-columns:2fr 1fr 1fr 1fr 1fr}}
.footer__brand img{height:24px;width:auto;margin-bottom:16px}
.footer__brand p{max-width:34ch;margin:0;color:var(--fg-3)}
.footer h4{font:500 10.5px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);margin:0 0 18px}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.footer a{transition:color .2s}.footer a:hover{color:var(--fg)}
.footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font:500 11.5px var(--font-mono);letter-spacing:.06em;color:var(--fg-3)}

/* ---------- İç sayfa başlığı ---------- */
.page-hero{padding:150px 0 40px}
.page-hero .display{margin:18px 0 18px}
.crumbs{font:500 11px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);display:flex;gap:10px;flex-wrap:wrap}
.crumbs a:hover{color:var(--fg)}
.crumbs span{color:var(--fg-2)}

/* ---------- Mağaza ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:36px 0 32px}
.filters button{height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--fg-2);font:500 11px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:.2s}
.filters button:hover{border-color:var(--line-2);color:var(--fg)}
.filters button.is-active{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.product.is-hidden{display:none}
.trust{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:900px){.trust{grid-template-columns:repeat(3,1fr)}}
.trust div{padding:22px 24px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-2)}
.trust b{display:block;font:600 16px var(--font-display);margin:10px 0 6px}
.trust p{margin:0;color:var(--fg-2);font-size:14px}
.trust .ic{width:34px;height:34px;border-radius:10px;background:rgba(25,150,232,.12);border:1px solid rgba(25,150,232,.3);display:grid;place-items:center;color:var(--accent-2);padding:0}

/* ---------- Ürün sayfası ---------- */
.pdp{display:grid;gap:40px}
@media(min-width:960px){.pdp{grid-template-columns:1.15fr .85fr;gap:64px;align-items:start}}
.gallery{display:grid;gap:12px}
.gallery__main{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:#0d1014;border:1px solid var(--line)}
.gallery__main img{width:100%;height:100%;object-fit:cover}
.gallery__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery__thumbs button{border:1px solid var(--line);background:#0d1014;border-radius:12px;overflow:hidden;aspect-ratio:4/3;padding:0;cursor:pointer;opacity:.6;transition:.2s}
.gallery__thumbs button.is-active,.gallery__thumbs button:hover{opacity:1;border-color:var(--line-2)}
.gallery__thumbs img{width:100%;height:100%;object-fit:cover}
.buybox{position:sticky;top:96px}
.buybox .display{margin:14px 0 14px}
.buybox__price{display:flex;align-items:baseline;gap:12px;margin:26px 0 4px}
.buybox__price b{font:600 40px/1 var(--font-display);letter-spacing:-.03em}
.buybox__price s{color:var(--fg-3);font-size:18px}
.buybox__note{font:500 11px var(--font-mono);letter-spacing:.1em;color:var(--fg-3);text-transform:uppercase}
.buybox__actions{display:grid;gap:10px;margin:22px 0 8px}
.perks{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--fg-2);margin-top:14px}
.perks span::before{content:"✓";color:var(--accent-2);margin-right:6px}
.includes{border:1px solid var(--line);border-radius:var(--radius-sm);padding:4px 18px;margin-top:24px;background:var(--bg-2)}
.includes header{padding:12px 0 6px;font:500 10.5px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}
.includes div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.includes div:last-child{border:0}
.includes span{color:var(--fg-3);font-family:var(--font-mono);font-size:11.5px;white-space:nowrap}
.spec{width:100%;border-collapse:collapse;font-size:14.5px}
.spec td{padding:14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec td:first-child{color:var(--fg-3);width:38%;font:500 11px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;padding-top:17px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font:500 17px var(--font-display);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--fg-3);font-weight:300}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--fg-2);margin:12px 0 0;max-width:70ch;font-size:15px}
.tabs{display:flex;gap:28px;border-bottom:1px solid var(--line);margin:0 0 32px;font:500 11.5px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:0 0 14px;border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s}
.tabs a.is-active,.tabs a:hover{color:var(--fg)}
.tabs a.is-active{border-color:var(--fg)}
.prose{max-width:72ch;color:var(--fg-2);font-size:16px}
.prose h3{color:var(--fg);font:600 22px var(--font-display);letter-spacing:-.02em;margin:36px 0 12px}
.prose p{margin:0 0 16px}
.prose ul{padding-left:20px;margin:0 0 16px}

/* ---------- Modal & toast (ödeme demo) ---------- */
.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;background:rgba(5,7,9,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:20px}
.modal.is-open{display:grid}
.modal__box{width:min(540px,100%);background:var(--bg-2);border:1px solid var(--line-2);border-radius:24px;padding:30px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.modal__box h3{font:600 24px var(--font-display);letter-spacing:-.02em;margin:10px 0 6px}
.modal__box p{color:var(--fg-2);margin:0;font-size:14.5px}
.modal__opts{display:grid;gap:10px;margin:22px 0}
.modal__opts button{text-align:left;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer;font:inherit;display:grid;gap:4px;transition:.2s}
.modal__opts button:hover{border-color:var(--accent);transform:translateY(-1px)}
.modal__opts b{font:600 15px var(--font-display)}
.modal__opts small{color:var(--fg-3);font:500 11px var(--font-mono);letter-spacing:.06em}
.modal__foot{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12.5px;color:var(--fg-3)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:var(--fg);color:var(--bg);padding:12px 18px;border-radius:999px;font:500 13px var(--font-display);letter-spacing:.03em;z-index:110;transition:.35s;pointer-events:none;white-space:nowrap;max-width:calc(100vw - 32px)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- Yardımcılar ---------- */
.mt-0{margin-top:0}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-40{margin-top:40px}.mt-64{margin-top:64px}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.center{text-align:center}
.flex{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.between{justify-content:space-between}
.note{font:500 11px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);border:1px dashed var(--line-2);border-radius:999px;padding:6px 12px;display:inline-flex;gap:8px;align-items:center}
.note::before{content:"";width:6px;height:6px;border-radius:50%;background:#f5a524}

@media(max-width:1024px){.nav__links,.nav .lang{display:none}.burger{display:inline-grid;place-items:center}}
@media(max-width:760px){
  .seq{height:380vh}.seq__progress,.seq__frame{display:none}
  .seq__layer{align-items:flex-end;padding-bottom:88px}
  .cap{max-width:100%}.cap--right{margin-left:0}
  .hero__copy .display{font-size:clamp(38px,11vw,56px)}
  .gallery__thumbs{grid-template-columns:repeat(4,1fr);gap:8px}
  .buybox{position:static}
}

/* ---------- Sepet (Sweep Dynamics esinli) ---------- */
.cartbtn{position:relative;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:none;color:var(--fg);cursor:pointer;display:inline-grid;place-items:center;transition:.2s}
.cartbtn:hover{border-color:rgba(255,255,255,.4)}
.cartbtn svg{width:18px;height:18px}
.cartbtn b{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font:600 10.5px/18px var(--font-mono);text-align:center}
.cartbtn b[data-zero]{display:none}
.scrim{position:fixed;inset:0;background:rgba(5,7,9,.55);z-index:90;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.is-on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--bg-2);border-left:1px solid var(--line-2);z-index:95;transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column}
.drawer.is-open{transform:none}
.drawer__head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line)}
.drawer__head h3{margin:0;font:600 20px var(--font-display)}
.drawer__list{flex:1;overflow:auto;padding:8px 24px}
.drawer__item{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.drawer__item img{width:56px;height:42px;object-fit:cover;border-radius:8px;background:#0d1014}
.drawer__item b{display:block;font:600 14px/1.3 var(--font-display)}
.drawer__item small{color:var(--fg-3);font:500 10.5px var(--font-mono);letter-spacing:.06em}
.drawer__item .amt{text-align:right;font:600 14px var(--font-display)}
.drawer__item button{background:none;border:0;color:var(--fg-3);cursor:pointer;font-size:20px;line-height:1;padding:0 0 0 8px}
.drawer__item button:hover{color:var(--fg)}
.drawer__empty{padding:48px 0;text-align:center;color:var(--fg-3)}
.drawer__foot{padding:18px 24px 24px;border-top:1px solid var(--line);display:grid;gap:10px}
.drawer__row{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--fg-2);padding:4px 0}
.drawer__row.total{color:var(--fg);font:600 18px var(--font-display);padding-top:10px}
.drawer__row .disc{color:var(--accent-2)}

/* ---------- Varyant seçici ---------- */
.kind{font:500 10px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);margin:12px 0 -6px;display:block}
.variants{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}
.variants button{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--fg-2);font:500 10.5px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.2s}
.variants button:hover{color:var(--fg)}
.variants button.is-active{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.variants__label{font:500 10px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);margin:18px 0 -8px}
.card__foot .btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* ---------- Karşılaştırma ---------- */
.cmp{border:1px solid var(--line);border-radius:28px;padding:clamp(24px,3vw,40px);background:linear-gradient(180deg,var(--bg-2),transparent)}
.cmp__tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 28px}
.cmp__tabs button{height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--fg-2);font:500 11px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:.2s}
.cmp__tabs button:hover{border-color:var(--line-2);color:var(--fg)}
.cmp__tabs button.is-active{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.cmp__grid{display:grid;gap:16px}
@media(min-width:860px){.cmp__grid{grid-template-columns:repeat(3,1fr)}}
.cmp__col{border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:var(--bg);display:flex;flex-direction:column}
.cmp__col h3{font:600 22px/1.15 var(--font-display);letter-spacing:-.02em;margin:14px 0 4px}
.cmp__col .tagline{color:var(--fg-3);font-size:14px;margin:0 0 14px}
.cmp__price{font:600 30px/1 var(--font-display);letter-spacing:-.03em;margin:6px 0 20px}
.cmp__price small{font:500 10.5px var(--font-mono);color:var(--fg-3);letter-spacing:.1em;margin-left:8px;text-transform:uppercase}
.kv{display:grid;margin:0 0 18px}
.kv div{display:flex;justify-content:space-between;gap:12px;font-size:14px;border-bottom:1px solid var(--line);padding:9px 0}
.kv span{color:var(--fg-3);font:500 10.5px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding-top:2px}
.cmp__col [data-panel]{display:none}
.cmp__col [data-panel].is-on{display:block}
.cmp__col .best{font-size:14.5px;color:var(--fg-2);margin:0 0 18px;line-height:1.55}
.cmp__col .best b{color:var(--fg);display:block;font:500 10.5px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.cmp__col .card__foot{margin-top:auto;padding-top:18px}

/* ---------- Paket yap ---------- */
.bundle{display:grid;gap:24px}
@media(min-width:960px){.bundle{grid-template-columns:1.3fr .7fr;align-items:start}}
.bundle__list{display:grid;gap:10px}
.bundle__item{display:grid;grid-template-columns:22px 1fr auto;gap:16px;align-items:center;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2);cursor:pointer;transition:.2s}
.bundle__item:hover{border-color:var(--line-2)}
.bundle__item.is-on{border-color:rgba(25,150,232,.5);background:rgba(25,150,232,.06)}
.bundle__item input{width:18px;height:18px;accent-color:var(--accent);margin:0;cursor:pointer}
.bundle__item b{display:block;font:600 15px var(--font-display)}
.bundle__item small{color:var(--fg-3);font-size:13px}
.bundle__item .p{text-align:right;font:600 15px var(--font-display)}
.bundle__item .p s{display:block;color:var(--accent-2);font:500 12px var(--font-body);text-decoration:none;min-height:16px}
.summary{border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:var(--bg-2);position:sticky;top:96px}
.summary h4{margin:0 0 6px;font:600 18px var(--font-display)}
.summary .hintline{font:500 11px var(--font-mono);letter-spacing:.08em;color:var(--fg-3);margin:0 0 14px;text-transform:uppercase}
.summary .hintline.ok{color:var(--accent-2)}
.summary .drawer__row{border-bottom:1px solid var(--line);padding:9px 0}
.summary .drawer__row.total{border:0}
.summary button[disabled]{opacity:.4;cursor:not-allowed;transform:none}

/* ---------- Neden dijital ---------- */
.benefits{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.benefits{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.benefits{grid-template-columns:repeat(3,1fr)}}
.benefit{padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);transition:border-color .25s}
.benefit:hover{border-color:var(--line-2)}
.benefit .ic{width:38px;height:38px;border-radius:10px;background:rgba(25,150,232,.12);border:1px solid rgba(25,150,232,.3);display:grid;place-items:center;color:var(--accent-2);font:600 12px var(--font-mono);letter-spacing:.06em}
.benefit b{display:block;font:600 17px var(--font-display);margin:16px 0 6px}
.benefit p{margin:0;color:var(--fg-2);font-size:14.5px}

/* ---------- Docs / legal layout (sidebar + body) ---------- */
.doc{display:grid;gap:36px}
@media(min-width:960px){.doc{grid-template-columns:230px minmax(0,1fr);gap:64px;align-items:start}}
.doc__nav{position:sticky;top:96px;display:grid;gap:2px;font-size:14px}
.doc__nav h4{font:500 10.5px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);margin:0 0 12px}
.doc__nav a{padding:9px 14px;border-radius:10px;color:var(--fg-2);border:1px solid transparent;transition:.2s}
.doc__nav a:hover{color:var(--fg)}
.doc__nav a.is-active{background:var(--bg-2);border-color:var(--line);color:var(--fg)}
@media(max-width:959px){
  .doc__nav{position:static;display:flex;flex-wrap:wrap;gap:6px}
  .doc__nav h4{width:100%;margin-bottom:4px}
  .doc__nav a{border-color:var(--line);border-radius:999px;padding:7px 14px;font-size:13px}
}
.doc__body{min-width:0}
.doc__body>section{padding-bottom:56px;margin-bottom:56px;border-bottom:1px solid var(--line)}
.doc__body>section:last-child{border:0;margin-bottom:0}
.doc__body h2{font:600 clamp(26px,3vw,36px)/1.1 var(--font-display);letter-spacing:-.025em;margin:12px 0 16px}
.doc__body .prose{max-width:none}
.doc__body .spec td:first-child{width:32%}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:12px}
.steps li{counter-increment:s;position:relative;padding:16px 18px 16px 60px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2);color:var(--fg-2);font-size:15px}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:20px;top:17px;font:600 12px var(--font-mono);color:var(--accent-2)}
.steps li b{color:var(--fg)}
.code{margin:0;background:#07090c;border:1px solid var(--line);border-radius:12px;padding:16px 18px;font:13px/1.8 var(--font-mono);overflow-x:auto;color:var(--fg);white-space:pre}
.callout{border:1px solid rgba(245,165,36,.32);background:rgba(245,165,36,.07);border-radius:14px;padding:14px 18px;color:var(--fg-2);font-size:14.5px}
.callout b{color:#f5c56b}
.prose .callout{margin-top:18px}
.prose a.accent,.faq a.accent,.spec a.accent{text-decoration:underline;text-decoration-color:rgba(92,188,255,.4);text-underline-offset:3px}

/* ---------- "Coming soon" items (links without a real target yet) ---------- */
.soon{color:var(--fg-3);cursor:default;display:inline-flex;align-items:center}
.soon em{font:500 9px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;font-style:normal;border:1px solid var(--line-2);border-radius:999px;padding:2px 7px;margin-left:8px}

/* ---------- Contact form ---------- */
.contact{display:grid;gap:28px}
@media(min-width:960px){.contact{grid-template-columns:1.25fr .75fr;align-items:start}}
.contact__info .trust{grid-template-columns:1fr}
.form{display:grid;gap:16px;padding:clamp(22px,3vw,32px);border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2)}
.form__row{display:grid;gap:16px}
@media(min-width:640px){.form__row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:8px}
.field span{font:500 10.5px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.field input,.field select,.field textarea{width:100%;background:var(--bg);border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;color:var(--fg);font:15px var(--font-body);outline:0;transition:border-color .2s}
.field textarea{resize:vertical;min-height:130px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field.is-error input,.field.is-error textarea{border-color:#e5484d}
.check{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;font-size:14px;color:var(--fg-2)}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent)}
.check.is-error span{color:#ff8a8d}
.form .pill{justify-self:start}
.modal .small{margin-top:-8px;margin-bottom:18px;color:var(--fg-3)}

/* ==========================================================================
   PDF / baski gorunumu
   docs.html?pdf=<bolum> ile tek bolum, ?pdf=all ile tum dokuman basilir.
   PDF'ler tools/build_pdfs.py ile Edge headless uzerinden uretilir.
   ========================================================================== */
.pdf-cover{display:none}
@media print{
  :root{
    --bg:#fff; --bg-2:#fff; --bg-3:#fff;
    --fg:#0b0d10; --fg-2:#333a42; --fg-3:#6b7480;
    --line:rgba(0,0,0,.14); --line-2:rgba(0,0,0,.24);
    --accent:#0f6fb5; --accent-2:#0f6fb5;
  }
  html,body{background:#fff!important;color:#0b0d10!important;font-size:10.5pt;line-height:1.55}
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .nav,.mobilemenu,.scrim,.drawer,.modal,.toast,.footer,.doc__nav,.crumbs,.page-hero,.ticker,.seq,.print-hide{display:none!important}
  .section,.section--tight{padding:0!important}
  .container{max-width:none;padding:0}
  .doc{display:block}
  .reveal{opacity:1!important;transform:none!important}
  a{color:#0f6fb5;text-decoration:none}
  h2,h3{break-after:avoid;page-break-after:avoid}
  .doc__body>section{border:0;padding:0 0 10mm;margin:0}
  .doc__body>section+section{break-before:page;page-break-before:always;padding-top:2mm}
  /* Tek bölüm basılıyorsa gizli kardeşler yüzünden boş sayfa oluşmasın */
  body.is-single .doc__body>section+section{break-before:auto!important;page-break-before:auto!important;padding-top:0}
  .doc__body>section>.eyebrow{color:#0f6fb5}
  .doc__body h2{font-size:20pt;margin:0 0 6mm}
  .prose h3{font-size:12.5pt;margin:6mm 0 2mm}
  .prose,.prose p{font-size:10.5pt}
  .spec,.steps,.callout,.code,.faq{break-inside:avoid;page-break-inside:avoid}
  .spec td{border-bottom:1px solid rgba(0,0,0,.12);padding:2.4mm 0}
  .spec td:first-child{color:#5b6470}
  .steps li{background:#f7f8f9;border:1px solid rgba(0,0,0,.12);color:#333a42}
  .steps li::before{color:#0f6fb5}
  .code{background:#f4f5f7;border:1px solid rgba(0,0,0,.12);color:#0b0d10;font-size:9.5pt}
  .callout{background:#fff8e8;border:1px solid #e0c27a;color:#4a3c14}
  .callout b{color:#7a5c10}
  .faq details{border-bottom:1px solid rgba(0,0,0,.12)}
  .faq summary::after{content:""}
  .faq details p{display:block}
  /* Kapak */
  .pdf-cover{display:block;border-bottom:1px solid rgba(0,0,0,.16);padding-bottom:5mm;margin-bottom:8mm}
  .pdf-cover img{height:9mm;width:auto;margin-bottom:5mm;filter:invert(1) hue-rotate(180deg)}
  .pdf-cover h1{font:600 26pt/1.1 var(--font-display);letter-spacing:-.02em;margin:0 0 3mm;color:#0b0d10}
  .pdf-cover p{margin:0;font:500 8.5pt var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#6b7480}
}
/* Ekranda PDF onizlemesi (aynı sayfa ?pdf= ile acildiginda) */
body.is-pdf .nav,body.is-pdf .mobilemenu,body.is-pdf .footer,body.is-pdf .doc__nav,
body.is-pdf .crumbs,body.is-pdf .page-hero,body.is-pdf .drawer,body.is-pdf .scrim{display:none!important}
body.is-pdf .pdf-cover{display:block}
body.is-pdf .faq details{border-bottom:1px solid var(--line)}
body.is-pdf .doc__section-hidden{display:none!important}

/* PDF indirme butonu (ekranda) */
.dl{display:inline-flex;align-items:center;gap:8px;margin-top:6px}
.dl::before{content:"↓";font:600 13px var(--font-mono);color:var(--accent-2)}

/* ==========================================================================
   v0.4 — Sadelestirme
   Kutu yerine ince cizgi, tekrar eden etiketleri kaldir, tek vurgu.
   ========================================================================== */

/* Satir listesi: kutulu "includes" yerine hairline satirlar */
.rows{display:grid;margin:0}
.rows>div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.rows>div:last-child{border-bottom:0}
.rows>div>span{color:var(--fg-3);font-size:13px;text-align:right;white-space:nowrap}
.rows__head{font:500 10.5px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);margin:0 0 4px}

/* Satin alma kutusu: daha az cizgi, daha cok bosluk */
.buybox__price{margin:22px 0 0;align-items:baseline}
.buybox__price b{font-size:38px}
.buybox__note{font:400 13px var(--font-body);letter-spacing:0;text-transform:none;color:var(--fg-3);margin-top:6px}
.buybox__actions{gap:8px;margin:24px 0 0}
.buybox__actions .pill--block{height:50px}
.variants__label{font-size:10px;letter-spacing:.18em;margin:20px 0 -10px}
.perks{gap:0;font-size:13px;color:var(--fg-3);margin-top:16px}
.perks span::before{content:""}
.perks span+span::before{content:"·";margin:0 8px;color:var(--fg-3)}
.pack{margin-top:28px;border-top:1px solid var(--line);padding-top:16px}
.pack .rows,.rows{display:grid!important}
.buybox .note-line{margin-top:14px;font-size:13px;color:var(--fg-3)}
.buybox .note-line a{color:var(--accent-2)}

/* Fayda listesi: kart degil, hairline satir */
.benefits{gap:0;grid-template-columns:1fr}
@media(min-width:760px){.benefits{grid-template-columns:1fr 1fr;column-gap:56px}}
.benefit{border:0!important;background:none!important;border-radius:0;padding:18px 0;border-bottom:1px solid var(--line)!important;display:grid;grid-template-columns:28px 1fr;column-gap:14px;align-items:baseline}
.benefit:hover{border-color:var(--line)!important}
.benefit .ic{width:auto;height:auto;border:0;background:none;border-radius:0;color:var(--fg-3);font:500 11px var(--font-mono);letter-spacing:.08em;display:block;padding:0}
.benefit b{margin:0 0 4px;font-size:15.5px}
.benefit p{font-size:14px;grid-column:2}

/* Guven satirlari: kutu degil */
.trust{gap:0;grid-template-columns:1fr}
@media(min-width:760px){.trust{grid-template-columns:repeat(3,1fr);column-gap:48px}}
.trust>div{border:0;background:none;border-radius:0;padding:18px 0;border-bottom:1px solid var(--line)}
.trust .ic{width:auto;height:auto;border:0;background:none;color:var(--fg-3);font:500 11px var(--font-mono);display:block;padding:0}
.trust b{font-size:15.5px;margin:8px 0 4px}
.trust p{font-size:14px}
.contact__info .trust>div:last-child{border-bottom:0}

/* Dokuman bolumleri: numarali etiket yok, PDF linki basligin yaninda */
.doc__body>section>.eyebrow{display:none}
.doc__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:0 0 16px}
.doc__head h2{margin:0}
.doc__body .steps li{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:14px 0 14px 44px}
.doc__body .steps li:last-child{border-bottom:0}
.steps li::before{left:2px;top:16px}
.doc__note{font-size:13.5px;color:var(--fg-3);border-left:2px solid var(--line-2);padding:2px 0 2px 14px;margin:0 0 28px}

/* Magaza kartlari: daha az etiket */
.card .kind{display:none}
.card__foot .btns .pill--ghost{padding-left:0}

@media print{
  .doc__head{display:block}
  .doc__body .steps li{border-bottom:1px solid rgba(0,0,0,.12)}
  .doc__note{color:#5b6470;border-left-color:rgba(0,0,0,.2)}
}

/* ---------- Para birimi secici (TR / EN) ---------- */
.lang{display:inline-flex;align-items:center;gap:2px}
.lang button{background:none;border:0;color:var(--fg-3);font:inherit;letter-spacing:inherit;cursor:pointer;padding:2px 3px;transition:color .2s}
.lang button:hover{color:var(--fg-2)}
.lang button.is-active{color:var(--fg)}
.mobilemenu .lang{margin-top:14px}
/* Dil bağlantısı (TR / EN): bulunulan dil <b>, öbürü <a> */
.lang a{color:var(--fg-3);padding:2px 3px;transition:color .2s}
.lang a:hover{color:var(--fg-2)}
.lang b{padding:2px 3px}
.mobilemenu .lang a{display:inline;padding:2px 3px;border:0;font:inherit;letter-spacing:inherit}

/* Yalnızca PDF çıktısında görünen blok (satın alanlara giden içerik) */
.pdf-only{display:none}
body.is-pdf .pdf-only{display:block}
@media print{.pdf-only{display:block}}

/* ---------- Belge listesi (dokümanlar sayfası) ---------- */
.belgeler{display:grid}
.belge{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.belge:last-child{border-bottom:0}
.belge b{display:block;font:600 18px/1.3 var(--font-display);letter-spacing:-.015em;margin-bottom:6px}
.belge p{margin:0;color:var(--fg-2);font-size:14.5px;max-width:62ch}
.belge__kilit{font:500 10.5px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);border:1px dashed var(--line-2);border-radius:999px;padding:8px 14px;white-space:nowrap}
.belge .pill{flex:0 0 auto}
@media(max-width:640px){.belge{flex-direction:column;align-items:flex-start;gap:14px}}
.pdf-gizli{display:none}
body.is-pdf .pdf-gizli{display:none}

/* ---------- Bento ızgarası (redüktör bölümü) ---------- */
.bento{display:grid;gap:14px;grid-template-columns:1fr}
.bento>*{min-width:0}
@media(min-width:640px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(212px,auto)}}

/* Kutu: düz, çerçevesiz yüzey; üstte küçük etiket, altta içerik.
   Üzerine gelince hiçbir şey değişmez (kullanıcı isteği, 2026-09-15). */
.kutu{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:190px;padding:32px 34px;border-radius:30px;background:#121519;overflow:hidden}
.kutu span{display:block;font:500 14px/1.3 var(--font-body);letter-spacing:-.005em;color:var(--fg-3)}
.kutu b{display:block;font:600 clamp(24px,2.1vw,30px)/1.1 var(--font-display);letter-spacing:-.03em;color:var(--fg)}
.kutu p{margin:10px 0 0;color:var(--fg-2);font-size:15px;line-height:1.55;max-width:44ch}

/* Sayı kutuları: büyük rakam, altında kısa açıklama */
.kutu--sayi b{font-size:clamp(50px,5vw,72px);line-height:.92;letter-spacing:-.055em;padding-bottom:.06em;
  background:linear-gradient(180deg,#fff 35%,#8d97a4);-webkit-background-clip:text;background-clip:text;color:transparent}
.kutu--sayi b small{font-size:.4em;letter-spacing:-.02em;margin-left:.2em}
.kutu--sayi em{display:block;margin-top:12px;font-style:normal;font-size:15px;line-height:1.4;color:var(--fg-2)}

@media(min-width:1000px){
  .kutu--genis{grid-column:span 2}
  .kutu--buyuk{grid-column:span 2;grid-row:span 3}
}
@media(min-width:640px) and (max-width:999px){.kutu--buyuk,.kutu--genis{grid-column:span 2}}

/* Çerçevesiz görsel kutusu: nesne sayfa zemininde durur */
.kutu--serbest{background:none;border-radius:0;padding:0;margin:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;overflow:visible;min-height:340px}
.kutu--serbest::before{content:"";position:absolute;left:50%;top:44%;width:86%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(25,150,232,.18),rgba(25,150,232,.06) 42%,transparent 70%);pointer-events:none}
.kutu--serbest::after{content:"";position:absolute;left:50%;bottom:52px;width:46%;height:26px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(0,0,0,.6),transparent 70%);filter:blur(10px);pointer-events:none}
.kutu--serbest img{position:relative;z-index:1;flex:1 1 auto;min-height:0;width:auto;max-width:84%;height:auto;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.kutu--serbest figcaption{position:relative;z-index:1;flex:0 0 auto;margin-top:26px;padding-top:18px;font:500 10px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);text-align:center;max-width:100%;line-height:1.7}
.kutu--serbest figcaption::before{content:"";position:absolute;left:50%;top:0;width:40px;height:1px;transform:translateX(-50%);background:var(--line-2)}
/* Geniş ekranda görsel satır yüksekliğini büyütmesin; boyu yan kutular belirler */
@media(min-width:1000px){.kutu--serbest{min-height:0;contain:size}}
@media(max-width:639px){
  .kutu{padding:26px 24px;min-height:170px;border-radius:24px;gap:22px}
  .kutu--sayi b{font-size:56px}
  .kutu--serbest{min-height:360px}
  .kutu--serbest img{max-width:74%}
  .kutu--serbest::after{bottom:56px;width:52%}
  .kutu--serbest figcaption{font-size:9.5px;letter-spacing:.14em;max-width:32ch;margin-top:22px}
}