/* ══════════════════════════════════════════════════════════════════════
   AJANS1 MATBAA — site stili

   Görsel dil baskı atölyesinden gelir: kesim işaretleri, kayıt (registration)
   işareti, CMYK kontrol şeridi, milimetrik cetvel, ince çizgiler. Renk
   yalnızca proses renkleridir; vurgu macentadır, diğerleri küçük işaretlerde.

   Katmanlar: tokens → base → layout → components → pages → utilities
   ══════════════════════════════════════════════════════════════════════ */

@layer tokens, base, layout, components, pages, utilities;

/* ── TOKENS ─────────────────────────────────────────────────────────── */
@layer tokens {
  :root{
    --paper:      #FFFFFF;
    --paper-2:    #F3F3F0;
    --paper-3:    #E8E8E4;
    --ink:        #111113;
    --ink-2:      #26262B;
    --mute:       #5F5F68;
    --mute-2:     #8A8A92;
    --line:       #E2E2DE;
    --line-2:     #CDCDC7;

    --c:          #009FE3;
    --m:          #E4007C;
    --y:          #FFE500;
    --k:          #111113;
    --accent:     var(--m);
    --accent-ink: #C2006A;          /* beyaz zeminde küçük metin için (AA) */
    --kraft:      #B8956A;

    --inv-bg:     #111113;          /* koyu bantlar */
    --inv-fg:     #F4F4F1;
    --inv-mute:   #9D9DA5;
    --inv-line:   #2B2B30;

    --f-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
    --f-serif:   'Instrument Serif', Georgia, serif;
    --f-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --f-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

    --fs-hero: clamp(3rem, 7.6vw, 8rem);
    --fs-h1:   clamp(2.5rem, 5.4vw, 5rem);
    --fs-h2:   clamp(2rem, 3.9vw, 3.5rem);
    --fs-h3:   clamp(1.3rem, 1.8vw, 1.6rem);
    --fs-lead: clamp(1.08rem, 1.3vw, 1.28rem);
    --fs-body: 1.0625rem;
    --fs-sm:   .9375rem;
    --fs-xs:   .8125rem;

    --wrap:   1440px;
    --gut:    clamp(18px, 4vw, 56px);
    --sec:    clamp(84px, 11vw, 168px);
    --head-h: 76px;

    --ease:     cubic-bezier(.22,.8,.24,1);
    --ease-out: cubic-bezier(.16,1,.3,1);
    --t-fast:   .25s;
    --t:        .5s;
  }

  :root[data-theme="koyu"]{
    --paper:   #0E0E10;
    --paper-2: #151518;
    --paper-3: #1D1D21;
    --ink:     #F2F2EF;
    --ink-2:   #D9D9D5;
    --mute:    #A4A4AC;
    --mute-2:  #7A7A82;
    --line:    #26262B;
    --line-2:  #34343A;
    --accent-ink: #FF3D9E;
    --inv-bg:  #F2F2EF;
    --inv-fg:  #111113;
    --inv-mute:#5F5F68;
    --inv-line:#D6D6D1;
  }
}

/* ── BASE ───────────────────────────────────────────────────────────── */
@layer base {
  *,*::before,*::after{ box-sizing:border-box }
  [hidden]{ display:none !important }
  html{ -webkit-text-size-adjust:100%; scroll-behavior:auto }
  html.lenis, html.lenis body{ height:auto }
  .lenis.lenis-smooth{ scroll-behavior:auto !important }

  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--f-body); font-size:var(--fs-body); line-height:1.62;
    font-feature-settings:"ss01","tnum" 0;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
    overflow-x:clip;
  }
  img,svg,video,canvas{ display:block; max-width:100% }
  img{ height:auto }
  a{ color:inherit; text-decoration:none }
  button{ font:inherit; color:inherit; cursor:pointer; background:none; border:0; padding:0 }
  input,select,textarea{ font:inherit; color:inherit }
  h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; line-height:1.02; letter-spacing:-.032em; margin:0; color:var(--ink) }
  h3,h4{ letter-spacing:-.018em; line-height:1.15 }
  p{ margin:0 }
  em{ font-style:italic }
  ::selection{ background:var(--m); color:#fff }
  :focus-visible{ outline:2px solid var(--m); outline-offset:3px }
  .ic{ width:1.25em; height:1.25em; flex:none }
  hr{ border:0; border-top:1px solid var(--line); margin:0 }
}

/* ── LAYOUT ─────────────────────────────────────────────────────────── */
@layer layout {
  .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }
  .sec{ padding-block:var(--sec) }
  .sec--tight{ padding-block:calc(var(--sec) * .62) }
  .band{ background:var(--paper-2) }
  .band--ink{ background:var(--inv-bg); color:var(--inv-fg) }
  .band--ink h1,.band--ink h2,.band--ink h3{ color:var(--inv-fg) }
  .grid{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:clamp(16px,2vw,32px) }
  .skip-link{ position:absolute; left:-999px; top:8px; z-index:200; background:var(--ink); color:var(--paper); padding:10px 16px }
  .skip-link:focus{ left:8px }
  main{ display:block; overflow-x:clip }
}

/* ── COMPONENTS ─────────────────────────────────────────────────────── */
@layer components {

  /* Tipografi parçaları */
  .h-hero{ font-size:var(--fs-hero); font-weight:800; letter-spacing:-.045em; line-height:.92 }
  .h1{ font-size:var(--fs-h1); letter-spacing:-.04em; line-height:.98 }
  .h2{ font-size:var(--fs-h2); letter-spacing:-.035em }
  .h3{ font-size:var(--fs-h3) }
  .h-hero em,.h1 em,.h2 em,.h3 em,.serif{ font-family:var(--f-serif); font-weight:400; font-style:italic; letter-spacing:-.01em }
  .lead{ font-size:var(--fs-lead); line-height:1.55; color:var(--mute); max-width:44ch }
  .band--ink .lead{ color:var(--inv-mute) }
  .mono{ font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.02em }
  .kicker{ font-family:var(--f-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute) }
  .muted{ color:var(--mute) }

  /* Bölüm başı: numara · kayıt işareti · çizgi · etiket · CMYK noktaları */
  .shead{ display:flex; align-items:center; gap:14px; font-family:var(--f-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-bottom:clamp(28px,4vw,56px) }
  .shead__no{ color:var(--ink); font-weight:500 }
  .shead__rule{ flex:1; height:1px; background:var(--line-2); transform-origin:left; }
  .shead .reg{ width:15px; height:15px; color:var(--ink) }
  .shead__cmyk{ display:flex; gap:4px }
  .shead__cmyk i{ width:7px; height:7px; border-radius:50% }
  .shead__cmyk i:nth-child(1){ background:var(--c) } .shead__cmyk i:nth-child(2){ background:var(--m) }
  .shead__cmyk i:nth-child(3){ background:var(--y) } .shead__cmyk i:nth-child(4){ background:var(--k); box-shadow:0 0 0 1px var(--line-2) }
  .band--ink .shead,.vitrin .shead{ color:var(--inv-mute) } .band--ink .shead__no,.band--ink .shead .reg,.vitrin .shead__no,.vitrin .shead .reg{ color:var(--inv-fg) } .band--ink .shead__rule,.vitrin .shead__rule{ background:var(--inv-line) }

  .sec-intro{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(24px,4vw,64px); align-items:end; margin-bottom:clamp(40px,5vw,80px) }
  .sec-intro .lead{ justify-self:end }
  @media (max-width:860px){ .sec-intro{ grid-template-columns:1fr } .sec-intro .lead{ justify-self:start } }

  /* Düğmeler — köşeli, mürekkep dolgulu; üzerine gelince macenta tabaka soldan akar */
  .btn{ --bg:var(--ink); --fg:var(--paper); --hov:var(--m); --hfg:#fff;
        position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; gap:12px;
        height:54px; padding:0 26px; background:var(--bg); color:var(--fg); font-weight:600; font-size:.98rem; letter-spacing:-.005em;
        border:1px solid var(--bg); white-space:nowrap; transition:color var(--t-fast) var(--ease) }
  .btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--hov); transform:scaleX(0); transform-origin:right; transition:transform .55s var(--ease-out) }
  .btn:hover{ color:var(--hfg) } .btn:hover::before{ transform:scaleX(1); transform-origin:left }
  .btn .ic{ width:18px; height:18px; transition:transform .45s var(--ease-out) }
  .btn:hover .ic{ transform:translateX(4px) }
  .btn--line{ --bg:transparent; --fg:var(--ink); border-color:var(--ink); --hov:var(--ink); --hfg:var(--paper) }
  .btn--paper{ --bg:var(--inv-fg); --fg:var(--inv-bg); --hov:var(--m); --hfg:#fff; border-color:var(--inv-fg) }
  .btn--ghost-inv{ --bg:transparent; --fg:var(--inv-fg); border-color:var(--inv-line); --hov:var(--inv-fg); --hfg:var(--inv-bg) }
  .btn--accent{ --bg:var(--m); --fg:#fff; --hov:var(--ink); border-color:var(--m) }
  .btn--sm{ height:42px; padding:0 18px; font-size:.9rem }
  .btn--block{ width:100%; justify-content:center }

  .link{ display:inline-flex; align-items:center; gap:8px; font-weight:600; background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size .5s var(--ease-out); padding-bottom:2px }
  .link:hover{ background-size:100% 1px }
  .link .ic{ width:16px; height:16px; transition:transform .4s var(--ease-out) }
  .link:hover .ic{ transform:translate(3px,-3px) }

  /* Kesim işaretleri: kartın dışında köşelerde ince L çizgileri */
  .crop{ position:absolute; inset:-11px; pointer-events:none; opacity:0; transition:opacity .35s var(--ease), inset .5s var(--ease-out) }
  .crop i{ position:absolute; width:10px; height:10px; border-color:var(--ink) }
  .crop i:nth-child(1){ top:0; left:0; border-top:1px solid; border-left:1px solid }
  .crop i:nth-child(2){ top:0; right:0; border-top:1px solid; border-right:1px solid }
  .crop i:nth-child(3){ bottom:0; left:0; border-bottom:1px solid; border-left:1px solid }
  .crop i:nth-child(4){ bottom:0; right:0; border-bottom:1px solid; border-right:1px solid }
  .has-crop{ position:relative }
  .has-crop:hover > .crop, .has-crop:focus-within > .crop{ opacity:1; inset:-7px }

  /* ── ÜST BİLGİ ───────────────────────────────────────────────────── */
  .cmyk-bar{ position:fixed; inset:0 0 auto 0; height:3px; z-index:120; display:grid; grid-template-columns:repeat(4,1fr) }
  .cmyk-bar i:nth-child(1){ background:var(--c) } .cmyk-bar i:nth-child(2){ background:var(--m) }
  .cmyk-bar i:nth-child(3){ background:var(--y) } .cmyk-bar i:nth-child(4){ background:var(--k) }

  .head{ position:fixed; inset:3px 0 auto 0; z-index:100; height:var(--head-h); background:color-mix(in srgb, var(--paper) 94%, transparent);
         border-bottom:1px solid transparent; transition:border-color .3s, background .3s, transform .45s var(--ease-out) }
  .head.is-scrolled{ border-bottom-color:var(--line) }
  .head.is-hidden{ transform:translateY(-110%) }
  .head__in{ height:100%; display:flex; align-items:center; gap:clamp(16px,2.6vw,44px) }
  .head__logo{ display:block; flex:none }
  .head__logo img,.head__logo svg{ height:38px; width:auto; color:var(--ink) }
  .logo{ display:block }
  .foot__brand .logo,.foot__brand img{ height:46px; width:auto }
  .nav{ display:flex; align-items:center; gap:clamp(14px,2vw,34px); margin-right:auto }
  .nav > li{ list-style:none; position:static }
  .nav,.nav ul{ margin:0; padding:0 }
  .nav__a{ position:relative; display:inline-flex; align-items:center; gap:6px; height:var(--head-h); font-weight:500; font-size:.97rem; color:var(--ink-2) }
  .nav__a::after{ content:""; position:absolute; left:0; right:0; bottom:22px; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease-out) }
  .nav__a:hover::after,.nav__a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left }
  .nav__a .ic{ width:14px; height:14px; transition:transform .3s }
  .nav > li:hover .nav__a .ic{ transform:rotate(180deg) }
  .head__tel{ display:flex; flex-direction:column; line-height:1.15; font-family:var(--f-mono); font-size:.82rem; color:var(--ink) }
  .head__tel small{ color:var(--mute); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase }
  .head__acts{ display:flex; align-items:center; gap:14px; margin-left:auto }
  .theme-btn{ width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line); color:var(--ink-2) }
  .theme-btn .ic{ width:18px; height:18px }
  :root[data-theme="koyu"] .theme-btn .ic--ay{ display:none } :root:not([data-theme="koyu"]) .theme-btn .ic--gunes{ display:none }
  .burger{ display:none; width:46px; height:46px; border:1px solid var(--line); position:relative }
  .burger span{ position:absolute; left:12px; right:12px; height:1.5px; background:var(--ink); transition:transform .4s var(--ease-out), opacity .2s }
  .burger span:nth-child(1){ top:16px } .burger span:nth-child(2){ top:22px } .burger span:nth-child(3){ top:28px }
  .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
  .burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
  .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

  /* Ürünler açılır paneli */
  .mega{ position:absolute; left:0; right:0; top:100%; background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
         opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .3s var(--ease), transform .45s var(--ease-out), visibility 0s .3s }
  .nav > li:hover > .mega, .nav > li:focus-within > .mega{ opacity:1; visibility:visible; transform:none; transition-delay:0s }
  .mega__in{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)) minmax(0,1.15fr); gap:clamp(20px,3vw,48px); padding-block:36px 40px }
  .mega__col h3{ display:flex; align-items:center; gap:10px; font-size:1rem; letter-spacing:-.01em; margin-bottom:14px }
  .mega__col h3 .tone{ width:8px; height:8px }
  .mega__col ul{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:7px }
  .mega__col a{ color:var(--mute); font-size:.95rem; transition:color .2s }
  .mega__col a:hover{ color:var(--ink) }
  .mega__card{ background:var(--paper-2); padding:26px; display:flex; flex-direction:column; justify-content:space-between; gap:20px }
  .mega__card p{ font-family:var(--f-display); font-size:1.45rem; font-weight:600; letter-spacing:-.02em; line-height:1.15 }

  .tone{ display:inline-block; width:10px; height:10px; flex:none }
  .tone--c{ background:var(--c) } .tone--m{ background:var(--m) } .tone--y{ background:var(--y) } .tone--k{ background:var(--k); outline:1px solid var(--line-2) }

  /* Mobil menü */
  .mnav{ position:fixed; inset:0; z-index:110; background:var(--paper); padding:calc(var(--head-h) + 30px) var(--gut) 40px; overflow-y:auto;
         clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease-out); visibility:hidden }
  .mnav.is-open{ clip-path:inset(0); visibility:visible }
  .mnav ul{ list-style:none; margin:0; padding:0 }
  .mnav > ul > li{ border-bottom:1px solid var(--line) }
  .mnav > ul > li > a{ display:flex; justify-content:space-between; align-items:center; padding:18px 0; font-family:var(--f-display); font-size:1.9rem; font-weight:600; letter-spacing:-.03em }
  .mnav__sub{ padding:0 0 18px; display:grid; grid-template-columns:1fr 1fr; gap:8px 18px }
  .mnav__sub a{ color:var(--mute) }
  .mnav__foot{ margin-top:30px; display:grid; gap:12px }

  @media (max-width:1100px){
    .nav,.head__tel{ display:none }
    .burger{ display:block }
    .head__acts .btn{ display:none }
  }
  @media (max-width:1100px){ .head__acts .theme-btn{ order:2 } }

  /* ── SAYFA BAŞI (iç sayfalar) ───────────────────────────────────── */
  .phero{ padding-top:calc(var(--head-h) + clamp(48px,7vw,110px)); padding-bottom:clamp(40px,5vw,72px); border-bottom:1px solid var(--line) }
  .crumbs{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-family:var(--f-mono); font-size:.75rem; letter-spacing:.06em; color:var(--mute); margin-bottom:clamp(26px,3vw,44px) }
  .crumbs a:hover{ color:var(--ink) }
  .crumbs span[aria-hidden]{ color:var(--line-2) }
  .phero__grid{ display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:clamp(24px,4vw,72px); align-items:end }
  .phero__grid .lead{ justify-self:end; margin-bottom:.4em }
  .phero .kicker{ display:flex; align-items:center; gap:10px; margin-bottom:22px }
  @media (max-width:860px){ .phero__grid{ grid-template-columns:1fr } .phero__grid .lead{ justify-self:start } }

  /* ── ÜRÜN KARTI ─────────────────────────────────────────────────── */
  .pcards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,290px),1fr)); gap:clamp(28px,3vw,44px) clamp(18px,2vw,32px) }
  .pcard{ display:flex; flex-direction:column; gap:16px }
  .pcard__media{ position:relative; display:block; aspect-ratio:4/3; background:var(--paper-3) }
  .pcard__media picture,.pcard__media img{ width:100%; height:100%; object-fit:cover }
  .pcard__media img{ transition:transform 1.1s var(--ease-out) }
  .pcard:hover .pcard__media img{ transform:scale(1.035) }
  .pcard__ph{ position:absolute; inset:0; display:grid; place-items:center; color:var(--mute-2) }
  .pcard__ph .ic{ width:56px; height:56px }
  .pcard__tag{ position:absolute; left:12px; top:12px; background:var(--paper); font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; padding:5px 9px }
  .pcard__body{ display:grid; gap:6px }
  .pcard__title{ font-size:1.32rem; letter-spacing:-.022em }
  .pcard__title a::after{ content:""; position:absolute; inset:0 }
  .pcard{ position:relative }
  .pcard__sum{ color:var(--mute); font-size:.95rem; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
  .pcard__meta{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; padding-top:12px; border-top:1px solid var(--line); margin-top:6px; font-size:.9rem }
  .price{ font-family:var(--f-display); font-weight:700; font-size:1.12rem; letter-spacing:-.02em }
  .price small{ font-family:var(--f-body); font-weight:400; font-size:.8rem; color:var(--mute); letter-spacing:0 }
  .pcard__meta .mono{ color:var(--mute) }

  /* ── SSS ─────────────────────────────────────────────────────────── */
  .faq{ border-top:1px solid var(--line) }
  .faq details{ border-bottom:1px solid var(--line) }
  .faq summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:44px 1fr 28px; gap:12px; align-items:start; padding:24px 0;
                font-family:var(--f-display); font-weight:600; font-size:clamp(1.08rem,1.4vw,1.28rem); letter-spacing:-.015em; line-height:1.3 }
  .faq summary::-webkit-details-marker{ display:none }
  .faq summary .mono{ padding-top:.35em; color:var(--mute-2) }
  .faq summary .pm{ position:relative; width:18px; height:18px; margin-top:.25em }
  .faq summary .pm::before,.faq summary .pm::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1.5px; background:var(--ink); transition:transform .4s var(--ease-out) }
  .faq summary .pm::after{ transform:rotate(90deg) }
  .faq details[open] summary .pm::after{ transform:rotate(0) }
  .faq .faq__a{ padding:0 40px 26px 56px; color:var(--mute); max-width:78ch }
  @media (max-width:640px){ .faq summary{ grid-template-columns:1fr 24px } .faq summary .mono{ display:none } .faq .faq__a{ padding-left:0 } }

  /* ── KAPANIŞ BANDI ───────────────────────────────────────────────── */
  .cta{ position:relative; background:var(--m); color:#fff; overflow:hidden }
  .cta h2{ color:#fff; font-size:clamp(2.6rem,6vw,5.6rem); letter-spacing:-.045em }
  .cta__in{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(28px,4vw,72px); align-items:end; padding-block:clamp(80px,10vw,150px) }
  .cta p{ font-size:var(--fs-lead); max-width:40ch; color:rgba(255,255,255,.86); margin-bottom:28px }
  .cta .btn{ --bg:#fff; --fg:var(--k); border-color:#fff; --hov:var(--k); --hfg:#fff }
  .cta__dots{ position:absolute; inset:0; opacity:.16; pointer-events:none;
              background-image:radial-gradient(circle at center, #fff 0 1.1px, transparent 1.6px); background-size:11px 11px;
              -webkit-mask-image:linear-gradient(110deg, transparent 35%, #000 95%); mask-image:linear-gradient(110deg, transparent 35%, #000 95%) }
  .cta__marks{ position:absolute; inset:18px; pointer-events:none }
  .cta__marks i{ position:absolute; width:22px; height:22px; border-color:rgba(255,255,255,.7) }
  .cta__marks i:nth-child(1){ top:0; left:0; border-top:1px solid; border-left:1px solid }
  .cta__marks i:nth-child(2){ top:0; right:0; border-top:1px solid; border-right:1px solid }
  .cta__marks i:nth-child(3){ bottom:0; left:0; border-bottom:1px solid; border-left:1px solid }
  .cta__marks i:nth-child(4){ bottom:0; right:0; border-bottom:1px solid; border-right:1px solid }
  @media (max-width:860px){ .cta__in{ grid-template-columns:1fr } }

  /* ── ALT BİLGİ ───────────────────────────────────────────────────── */
  .foot{ background:var(--inv-bg); color:var(--inv-mute); padding-top:clamp(70px,8vw,120px); font-size:.95rem }
  .foot a{ transition:color .2s } .foot a:hover{ color:var(--inv-fg) }
  .foot__top{ display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)) minmax(0,1.2fr); gap:clamp(24px,3vw,56px); padding-bottom:clamp(50px,6vw,90px) }
  .foot h3{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--inv-fg); font-weight:500; margin-bottom:20px }
  .foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
  .foot__brand img{ height:44px; width:auto; margin-bottom:22px }
  .foot__brand p{ max-width:34ch }
  .foot__contact{ display:grid; gap:14px }
  .foot__contact a,.foot__contact span{ display:flex; gap:10px; align-items:flex-start; color:var(--inv-fg) }
  .foot__contact .ic{ width:18px; height:18px; margin-top:3px; color:var(--inv-mute) }
  .foot__social{ display:flex; gap:8px; margin-top:20px }
  .foot__social a{ width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--inv-line) }
  .foot__social a:hover{ border-color:var(--inv-fg) }
  .foot__social .ic{ width:18px; height:18px }
  .foot__word{ font-family:var(--f-display); font-weight:800; font-size:clamp(4rem,17.5vw,17rem); letter-spacing:-.06em; line-height:.78; color:var(--inv-fg);
               white-space:nowrap; overflow:hidden; padding-top:.04em; user-select:none }
  .foot__word span{ color:var(--m) }
  .foot__strip{ display:grid; grid-template-columns:repeat(4,1fr) 3fr repeat(5,1fr); height:14px; margin-top:clamp(30px,4vw,60px) }
  .foot__strip i:nth-child(1){ background:var(--c) } .foot__strip i:nth-child(2){ background:var(--m) } .foot__strip i:nth-child(3){ background:var(--y) } .foot__strip i:nth-child(4){ background:#000 }
  .foot__strip i:nth-child(5){ background:transparent }
  .foot__strip i:nth-child(6){ background:#333 } .foot__strip i:nth-child(7){ background:#555 } .foot__strip i:nth-child(8){ background:#888 } .foot__strip i:nth-child(9){ background:#bbb } .foot__strip i:nth-child(10){ background:#e4e4e4 }
  .foot__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 30px; padding-block:26px 34px; border-top:1px solid var(--inv-line); font-size:.85rem }
  .foot__bottom nav{ display:flex; flex-wrap:wrap; gap:8px 22px }
  .foot__credit{ flex-basis:100%; display:flex; justify-content:flex-end; align-items:center; gap:8px; padding-top:14px; border-top:1px dashed var(--inv-line); font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--inv-mute); transition:color .25s }
  .foot__credit b{ font-weight:500; color:var(--inv-fg) }
  .foot__credit .ic{ width:12px; height:12px; transition:transform .25s }
  .foot__credit:hover b{ color:var(--m) }
  .foot__credit:hover .ic{ transform:translate(2px,-2px) }
  @media (max-width:640px){ .foot__credit{ justify-content:flex-start } }
  @media (max-width:1100px){ .foot__top{ grid-template-columns:1fr 1fr 1fr } .foot__brand{ grid-column:1/-1 } }
  @media (max-width:640px){ .foot__top{ grid-template-columns:1fr 1fr } .foot__contactcol{ grid-column:1/-1 } }

  /* WhatsApp + yukarı */
  .wa-float{ position:fixed; right:18px; bottom:18px; z-index:90; width:56px; height:56px; display:grid; place-items:center; background:#1f9d55; color:#fff; transition:transform .4s var(--ease-out) }
  .wa-float:hover{ transform:translateY(-3px) }
  .wa-float .ic{ width:28px; height:28px }

  /* Çerez bandı */
  .gdpr{ position:fixed; left:18px; bottom:18px; z-index:95; max-width:430px; background:var(--paper); color:var(--ink); border:1px solid var(--line-2); padding:20px; display:grid; gap:14px; font-size:.9rem;
         box-shadow:0 18px 40px -20px rgba(0,0,0,.25) }
  .gdpr a{ text-decoration:underline; text-underline-offset:3px }
  .gdpr__acts{ display:flex; gap:10px; flex-wrap:wrap }
  @media (max-width:560px){ .gdpr{ left:10px; right:10px; bottom:10px; max-width:none } }

  /* ── METİN GÖVDESİ (editörden gelen içerik) ──────────────────────── */
  .prose{ font-size:1.08rem; line-height:1.75; color:var(--ink-2); max-width:72ch }
  .prose > * + *{ margin-top:1.1em }
  .prose h2{ font-size:clamp(1.6rem,2.4vw,2.15rem); margin-top:2.1em; letter-spacing:-.03em; line-height:1.1; scroll-margin-top:110px }
  .prose h3{ font-size:1.28rem; margin-top:1.7em; scroll-margin-top:110px }
  .prose h2 + *,.prose h3 + *{ margin-top:.7em }
  .prose a{ color:var(--accent-ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px }
  .prose a:hover{ text-decoration-thickness:2px }
  .prose ul,.prose ol{ padding-left:1.25em }
  .prose li + li{ margin-top:.4em }
  .prose ul li::marker{ color:var(--m) }
  .prose ol li::marker{ font-family:var(--f-mono); font-size:.85em; color:var(--mute) }
  .prose strong{ color:var(--ink); font-weight:650 }
  .prose blockquote{ margin:1.6em 0; padding:18px 22px 18px 24px; border-left:3px solid var(--m); background:var(--paper-2); color:var(--ink) }
  .prose table{ width:100%; border-collapse:collapse; font-size:.95rem; margin:1.6em 0; display:block; overflow-x:auto }
  .prose th,.prose td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top }
  .prose th{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); font-weight:500; border-bottom-color:var(--ink) }
  .prose img{ margin-block:1.6em }
  .prose > :first-child{ margin-top:0 }

  /* Belirme animasyonları (JS yoksa görünür kalır) */
  .js .rv{ opacity:0; transform:translateY(28px) }
  .js .rv-line{ transform:scaleX(0) }
  .rv-done{ opacity:1 !important; transform:none !important }
}

/* ── SAYFALAR ───────────────────────────────────────────────────────── */
@layer pages {

  /* ══ ANA SAYFA · 3B BASKI SAHNESİ ═══════════════════════════════ */
  .hero{ position:relative; height:520vh; background:var(--paper) }
  .hero__stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden }
  .hero__canvas{ position:absolute; inset:0; width:100%; height:100% }
  .hero__fallback{ position:absolute; inset:0; display:none }
  .hero__fallback img,.hero__fallback picture{ width:100%; height:100%; object-fit:cover }
  .no-webgl .hero__fallback{ display:block }
  .no-webgl .hero{ height:auto }
  .no-webgl .hero__stage{ position:relative; height:100svh }
  .no-webgl .hero__ui{ background:linear-gradient(90deg, color-mix(in srgb, var(--paper) 88%, transparent) 0 55%, transparent) }
  .hero__canvas{ opacity:0; transition:opacity 1s var(--ease) }
  .hero.is-ready .hero__canvas{ opacity:1 }
  .hero__ui{ position:absolute; inset:0; pointer-events:none; padding:calc(var(--head-h) + 3px + clamp(22px,4vh,48px)) var(--gut) clamp(22px,4vh,40px);
             display:grid; grid-template-rows:auto 1fr auto; max-width:var(--wrap); margin-inline:auto }
  .hero__ui a,.hero__ui button{ pointer-events:auto }
  .hero__top{ display:flex; justify-content:space-between; gap:20px; align-items:flex-start }
  .hero__title{ font-size:clamp(2.8rem,6.2vw,6.8rem); font-weight:800; letter-spacing:-.05em; line-height:.92; color:var(--ink); text-wrap:balance }
  .hero__title em{ font-family:var(--f-serif); font-weight:400; letter-spacing:-.02em; color:var(--m) }
  .hero__title .ln{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em }
  .hero__title .ln > span{ display:inline-block }
  .hero__meta{ display:grid; gap:10px; justify-items:end; text-align:right; font-family:var(--f-mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mute) }
  .hero__meta b{ color:var(--ink); font-weight:500 }
  .hero__bottom{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(20px,4vw,60px); align-items:end }
  .hero__lead{ font-size:var(--fs-lead); color:var(--ink-2); max-width:34ch; margin-bottom:22px }
  .hero__intro{ transition:opacity .5s var(--ease), transform .7s var(--ease-out) }
  .hero__acts{ display:flex; flex-wrap:wrap; gap:10px }

  .hero__steps{ position:relative; justify-self:end; width:min(100%,460px); background:color-mix(in srgb, var(--paper) 88%, transparent); border:1px solid var(--line); padding:22px 24px 20px }
  .hero__steps .kicker{ display:flex; justify-content:space-between; margin-bottom:14px }
  .hstep{ display:none }
  .hstep.is-on{ display:block; animation:hstep .6s var(--ease-out) both }
  @keyframes hstep{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
  .hstep h3{ font-size:1.6rem; letter-spacing:-.03em; display:flex; gap:12px; align-items:baseline }
  .hstep h3 .mono{ color:var(--m); font-size:.8rem }
  .hstep p{ color:var(--mute); margin-top:8px; font-size:.97rem; line-height:1.5 }
  .hero__ruler{ margin-top:18px; position:relative; height:22px }
  .hero__ruler svg{ width:100%; height:100%; color:var(--mute-2) }
  .hero__ruler .fill{ position:absolute; left:0; top:0; bottom:0; width:0; border-right:1.5px solid var(--m); background:color-mix(in srgb, var(--m) 10%, transparent) }
  .hero__dots{ display:flex; gap:6px; margin-top:12px }
  .hero__dots i{ flex:1; height:3px; background:var(--line) ; transition:background .4s }
  .hero__dots i.is-on{ background:var(--ink) }
  .hero__scroll{ position:absolute; left:50%; bottom:clamp(18px,3vh,30px); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px;
                 font-family:var(--f-mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); transition:opacity .4s }
  .hero__scroll i{ width:1px; height:42px; background:linear-gradient(var(--ink) 50%, transparent 50%); background-size:1px 84px; animation:scrollcue 1.8s linear infinite }
  @keyframes scrollcue{ from{ background-position:0 -42px } to{ background-position:0 42px } }
  .hero.is-moving .hero__scroll{ opacity:0 }

  @media (max-width:860px){
    .hero{ height:460vh }
    .hero__bottom{ grid-template-columns:1fr }
    .hero__steps{ justify-self:stretch; width:100%; padding:16px 18px }
    .hero__meta{ display:none }
    .hero__lead{ display:none }
    .hero__intro{ display:none }
    .hstep h3{ font-size:1.3rem }
    .hero__scroll{ display:none }
  }
  /* Hareket azaltılmışsa: sahne sabit, uzun kaydırma yok */
  @media (prefers-reduced-motion: reduce){ .hero{ height:auto } .hero__stage{ position:relative; height:100svh } }

  /* ══ BEYAN ════════════════════════════════════════════════════════ */
  .manifesto{ padding-block:clamp(110px,14vw,220px) }
  .manifesto__txt{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.9rem,4.1vw,3.9rem); letter-spacing:-.035em; line-height:1.1; max-width:22ch }
  .manifesto__txt .w{ color:var(--line-2); transition:color .3s }
  .manifesto__txt .w.on{ color:var(--ink) }
  .manifesto__txt em .w.on{ color:var(--m) }
  .manifesto__txt em{ font-family:var(--f-serif); font-weight:400 }
  .manifesto__foot{ margin-top:clamp(36px,5vw,64px); display:flex; flex-wrap:wrap; gap:20px 40px; align-items:center; justify-content:space-between }

  /* ══ VİTRİN · 3B kayan kategori şeridi ══════════════════════════ */
  .vitrin{ position:relative; background:var(--inv-bg); color:var(--inv-fg); overflow:hidden }
  .vitrin__pin{ height:100vh; height:100svh; display:grid; grid-template-rows:auto 1fr auto; grid-template-columns:minmax(0,1fr); width:100%; overflow:hidden; padding-top:calc(var(--head-h) + 40px); padding-bottom:40px }
  .vitrin__view{ min-width:0 }
  .vitrin__head{ display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:clamp(20px,3vh,40px) }
  .vitrin__head h2{ color:var(--inv-fg); max-width:14ch }
  .vitrin__count{ font-family:var(--f-mono); font-size:.8rem; letter-spacing:.12em; color:var(--inv-mute); white-space:nowrap }
  .vitrin__count b{ color:var(--inv-fg); font-weight:500 }
  .vitrin__view{ perspective:1600px; perspective-origin:50% 40%; display:flex; align-items:center; min-height:0 }
  .vitrin__track{ display:flex; gap:clamp(18px,2.4vw,36px); padding-inline:var(--gut); transform-style:preserve-3d; will-change:transform }
  .vcard{ position:relative; flex:none; width:clamp(280px,30vw,440px); color:var(--inv-fg); transform-style:preserve-3d; transform-origin:50% 50%; will-change:transform }
  .vcard__media{ position:relative; aspect-ratio:4/3; background:#1c1c20; overflow:hidden }
  .vcard__media img{ width:100%; height:100%; object-fit:cover }
  .vcard__edge{ position:absolute; left:0; top:0; bottom:0; width:6px }
  .vcard__no{ position:absolute; right:14px; top:12px; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; color:#fff; mix-blend-mode:difference }
  .vcard__body{ padding-top:18px; display:grid; gap:10px }
  .vcard__body h3{ color:var(--inv-fg); font-size:clamp(1.35rem,1.9vw,1.75rem); letter-spacing:-.03em }
  .vcard__body h3 a::after{ content:""; position:absolute; inset:0 }
  .vcard__list{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.88rem; color:var(--inv-mute); list-style:none; margin:0; padding:0 }
  .vcard__list li::before{ content:"—"; margin-right:6px; color:var(--inv-line) }
  .vcard .crop i{ border-color:var(--inv-fg) }
  .vitrin__bar{ height:1px; background:var(--inv-line); margin:24px var(--gut) 0; position:relative }
  .vitrin__bar i{ position:absolute; left:0; top:-1px; height:3px; width:0; background:var(--m) }
  @media (max-width:860px){
    .vitrin__pin{ height:auto; padding-block:90px 70px }
    .vitrin__view{ perspective:none; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none }
    .vitrin__view::-webkit-scrollbar{ display:none }
    .vcard{ width:78vw; scroll-snap-align:start }
    .vitrin__track{ transform:none !important }
  }

  /* ══ ÖNE ÇIKAN ÜRÜNLER ══════════════════════════════════════════ */
  .featured .pcards{ grid-template-columns:repeat(4, minmax(0,1fr)) }
  .featured .pcard:nth-child(4n+2){ margin-top:clamp(0px,5vw,80px) }
  .featured .pcard:nth-child(4n+4){ margin-top:clamp(0px,2.5vw,40px) }
  @media (max-width:1100px){ .featured .pcards{ grid-template-columns:repeat(2,minmax(0,1fr)) } .featured .pcard:nth-child(n){ margin-top:0 } }
  @media (max-width:560px){ .featured .pcards{ grid-template-columns:1fr } }

  /* ══ RAKAMLAR ═══════════════════════════════════════════════════ */
  .stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
  .stat{ padding:clamp(26px,3vw,44px) clamp(14px,2vw,28px); border-left:1px solid var(--line) }
  .stat:first-child{ border-left:0; padding-left:0 }
  .stat b{ display:block; font-family:var(--f-display); font-size:clamp(2.4rem,4.4vw,4.2rem); font-weight:700; letter-spacing:-.05em; line-height:1 }
  .stat span{ display:block; margin-top:12px; color:var(--mute); font-size:.95rem; max-width:22ch }
  @media (max-width:860px){ .stats{ grid-template-columns:1fr 1fr } .stat:nth-child(3){ border-left:0; padding-left:0 } .stat:nth-child(n+3){ border-top:1px solid var(--line) } }

  /* ══ SÜREÇ — tabaka üzerine dizilmiş adımlar ═══════════════════ */
  .process{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(30px,5vw,90px) }
  .process__aside{ position:sticky; top:calc(var(--head-h) + 40px); align-self:start }
  .process__aside .lead{ margin-top:22px }
  .process__sheet{ position:relative; border:1px solid var(--line-2); background:var(--paper); padding:clamp(18px,3vw,40px) }
  .process__sheet::before{ content:""; position:absolute; inset:-14px; pointer-events:none;
     background:
      linear-gradient(var(--ink),var(--ink)) 0 13px/10px 1px no-repeat, linear-gradient(var(--ink),var(--ink)) 13px 0/1px 10px no-repeat,
      linear-gradient(var(--ink),var(--ink)) 100% 13px/10px 1px no-repeat, linear-gradient(var(--ink),var(--ink)) calc(100% - 13px) 0/1px 10px no-repeat,
      linear-gradient(var(--ink),var(--ink)) 0 calc(100% - 13px)/10px 1px no-repeat, linear-gradient(var(--ink),var(--ink)) 13px 100%/1px 10px no-repeat,
      linear-gradient(var(--ink),var(--ink)) 100% calc(100% - 13px)/10px 1px no-repeat, linear-gradient(var(--ink),var(--ink)) calc(100% - 13px) 100%/1px 10px no-repeat }
  .pstep{ display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:clamp(14px,2vw,28px); align-items:start; padding-block:clamp(22px,2.6vw,34px); border-bottom:1px solid var(--line) }
  .pstep:last-child{ border-bottom:0 }
  .pstep__no{ font-family:var(--f-display); font-weight:700; font-size:2.6rem; letter-spacing:-.05em; line-height:.9; color:var(--line-2); transition:color .5s }
  .pstep.is-on .pstep__no{ color:var(--m) }
  .pstep h3{ font-size:clamp(1.25rem,1.8vw,1.6rem); letter-spacing:-.025em }
  .pstep p{ color:var(--mute); margin-top:8px; max-width:52ch }
  .pstep .ic{ width:34px; height:34px; color:var(--mute-2) }
  @media (max-width:860px){ .process{ grid-template-columns:1fr } .process__aside{ position:static } .pstep{ grid-template-columns:54px 1fr } .pstep .ic{ display:none } }

  /* ══ KAĞIT YIĞINI (ana sayfa önizleme + kağıt rehberi) ══════════ */
  .paperx{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:clamp(30px,5vw,90px); align-items:center }
  .stack3d{ position:relative; aspect-ratio:1/1; perspective:1400px; display:grid; place-items:center }
  .stack3d__in{ position:relative; width:62%; aspect-ratio:1/1.414; transform-style:preserve-3d; transform:rotateX(58deg) rotateZ(-34deg); transition:transform 1.2s var(--ease-out) }
  .stack3d:hover .stack3d__in{ transform:rotateX(52deg) rotateZ(-28deg) }
  .sheet{ position:absolute; inset:0; background:var(--sw, #f6f6f3); transform:translateZ(calc(var(--i) * var(--gap, 9px))); box-shadow:0 0 0 1px rgba(0,0,0,.06), 0 1px 0 rgba(0,0,0,.05);
          transition:transform .9s var(--ease-out), background .4s }
  .sheet span{ position:absolute; left:10%; bottom:8%; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em; color:rgba(0,0,0,.55); transform:translateZ(1px) }
  .stack3d.is-open .sheet{ transform:translateZ(calc(var(--i) * 46px)) }
  .ptable{ display:grid; border-top:1px solid var(--line) }
  .ptable button{ display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:14px; align-items:center; text-align:left; padding:15px 0; border-bottom:1px solid var(--line); transition:padding .4s var(--ease-out) }
  .ptable button:hover,.ptable button[aria-pressed="true"]{ padding-left:10px }
  .ptable button[aria-pressed="true"] b{ color:var(--m) }
  .ptable i{ width:18px; height:18px; background:var(--sw); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12) }
  .ptable b{ font-family:var(--f-display); font-size:1.1rem; font-weight:600; letter-spacing:-.015em; transition:color .3s }
  .ptable span{ font-family:var(--f-mono); font-size:.78rem; color:var(--mute) }
  @media (max-width:860px){ .paperx{ grid-template-columns:1fr } .stack3d{ max-width:440px; margin-inline:auto; width:100% } }

  /* ══ HİZMET SATIRLARI ═══════════════════════════════════════════ */
  .srows{ border-top:1px solid var(--inv-line) }
  .srow{ position:relative; display:grid; grid-template-columns:70px minmax(0,4fr) minmax(0,5fr) 48px; gap:clamp(14px,2.4vw,40px); align-items:center;
         padding-block:clamp(22px,2.6vw,34px); border-bottom:1px solid var(--inv-line); transition:padding .5s var(--ease-out) }
  .srow:hover{ padding-inline:14px }
  .srow__no{ font-family:var(--f-mono); font-size:.8rem; color:var(--inv-mute) }
  .srow h3{ font-size:clamp(1.4rem,2.6vw,2.4rem); letter-spacing:-.035em; color:var(--inv-fg); display:flex; gap:16px; align-items:center }
  .srow h3 .ic{ width:30px; height:30px; color:var(--inv-mute); transition:color .3s }
  .srow:hover h3 .ic{ color:var(--m) }
  .srow p{ color:var(--inv-mute); font-size:.97rem }
  .srow__go{ width:48px; height:48px; display:grid; place-items:center; border:1px solid var(--inv-line); transition:background .3s, border-color .3s, color .3s }
  .srow:hover .srow__go{ background:var(--m); border-color:var(--m); color:#fff }
  .srow a::after{ content:""; position:absolute; inset:0 }
  .srow__img{ position:fixed; z-index:5; width:280px; aspect-ratio:4/3; pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.9); transition:opacity .3s, transform .4s var(--ease-out) }
  @media (max-width:860px){ .srow{ grid-template-columns:44px 1fr 40px } .srow p{ grid-column:2/3 } .srow__go{ grid-row:1; grid-column:3; width:40px; height:40px } }

  /* ══ PORTFOLYO KARTLARI ══════════════════════════════════════════ */
  .works{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(28px,3vw,48px) clamp(18px,2vw,32px) }
  .wcard{ position:relative; grid-column:span 6 }
  .wcard:nth-child(3n+1){ grid-column:span 7 } .wcard:nth-child(3n+2){ grid-column:span 5; margin-top:clamp(0px,8vw,140px) }
  .wcard:nth-child(3n){ grid-column:3 / span 7 }
  .wcard__media{ aspect-ratio:4/3; background:var(--paper-3); overflow:hidden }
  .wcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out) }
  .wcard:hover .wcard__media img{ transform:scale(1.04) }
  .wcard__body{ display:flex; justify-content:space-between; gap:20px; padding-top:16px }
  .wcard h3{ font-size:1.4rem; letter-spacing:-.025em }
  .wcard h3 a::after{ content:""; position:absolute; inset:0 }
  @media (max-width:860px){ .wcard,.wcard:nth-child(n){ grid-column:1/-1; margin-top:0 } }

  /* ══ BLOG KARTLARI ═══════════════════════════════════════════════ */
  .posts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,3vw,44px) clamp(18px,2vw,32px) }
  .post{ position:relative; display:grid; gap:14px; align-content:start }
  .post__media{ aspect-ratio:16/10; background:var(--paper-3); overflow:hidden }
  .post__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out) }
  .post:hover .post__media img{ transform:scale(1.04) }
  .post__meta{ display:flex; gap:14px; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mute) }
  .post h3{ font-size:1.32rem; letter-spacing:-.022em; line-height:1.2 }
  .post h3 a::after{ content:""; position:absolute; inset:0 }
  .post p{ color:var(--mute); font-size:.95rem; line-height:1.55 }
  .post--wide{ grid-column:1/-1; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(20px,3vw,48px); align-items:center }
  .post--wide h3{ font-size:clamp(1.6rem,2.6vw,2.4rem); letter-spacing:-.03em }
  @media (max-width:980px){ .posts{ grid-template-columns:1fr 1fr } .post--wide{ grid-template-columns:1fr } }
  @media (max-width:600px){ .posts{ grid-template-columns:1fr } }

  /* Müşteri görüşleri ve referans logoları */
  .quotes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2vw,32px) }
  .quote{ border-top:2px solid var(--ink); padding-top:22px; display:grid; gap:18px; align-content:start }
  .quote p{ font-family:var(--f-serif); font-size:1.5rem; line-height:1.3; letter-spacing:-.01em }
  .quote footer{ font-size:.9rem; color:var(--mute) } .quote footer b{ color:var(--ink); display:block }
  .logos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line) }
  .logos > *{ display:grid; place-items:center; aspect-ratio:3/2; border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px }
  .logos img{ max-height:46px; width:auto; filter:grayscale(1); opacity:.7; transition:filter .3s, opacity .3s }
  .logos > *:hover img{ filter:none; opacity:1 }
  @media (max-width:860px){ .quotes{ grid-template-columns:1fr } }

  /* ══ ÜRÜN LİSTESİ / KATEGORİ ═════════════════════════════════════ */
  .catnav{ position:sticky; top:calc(var(--head-h) + 3px); z-index:20; background:var(--paper); border-bottom:1px solid var(--line) }
  .catnav__in{ display:flex; gap:clamp(16px,2.4vw,34px); overflow-x:auto; scrollbar-width:none; height:58px; align-items:center }
  .catnav__in::-webkit-scrollbar{ display:none }
  .catnav a{ display:inline-flex; align-items:center; gap:9px; white-space:nowrap; color:var(--mute); font-weight:500; font-size:.95rem; height:100%; border-bottom:2px solid transparent; transition:color .2s, border-color .2s }
  .catnav a:hover,.catnav a[aria-current="true"]{ color:var(--ink); border-bottom-color:var(--ink) }
  .catblock{ padding-block:clamp(56px,7vw,110px); border-bottom:1px solid var(--line); scroll-margin-top:140px }
  .catblock__head{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(20px,4vw,64px); align-items:end; margin-bottom:clamp(32px,4vw,56px) }
  .catblock__head h2{ display:flex; gap:16px; align-items:center }
  .catblock__head h2 .tone{ width:14px; height:14px }
  @media (max-width:860px){ .catblock__head{ grid-template-columns:1fr } }
  .catintro{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(30px,5vw,90px); align-items:start }
  .catintro__media{ position:sticky; top:150px; aspect-ratio:4/3; background:var(--paper-3) }
  .catintro__media img{ width:100%; height:100%; object-fit:cover }
  .othercats{ display:flex; flex-wrap:wrap; gap:10px }
  .othercats a{ display:inline-flex; align-items:center; gap:10px; border:1px solid var(--line-2); padding:12px 16px; font-weight:500; transition:border-color .2s, background .2s }
  .othercats a:hover{ border-color:var(--ink); background:var(--paper-2) }
  @media (max-width:860px){ .catintro{ grid-template-columns:1fr } .catintro__media{ position:static } }

  /* ══ ÜRÜN SAYFASI ═════════════════════════════════════════════════ */
  .product{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(30px,4vw,80px); align-items:start;
            padding-top:calc(var(--head-h) + clamp(30px,4vw,60px)) }
  .gal{ display:grid; gap:12px }
  .gal__main{ position:relative; aspect-ratio:4/3; background:var(--paper-3); overflow:hidden; cursor:zoom-in }
  .gal__main img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-out); transform-origin:var(--zx,50%) var(--zy,50%) }
  .gal__main.is-zoom img{ transform:scale(1.9) }
  .gal__thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px }
  .gal__thumbs button{ aspect-ratio:4/3; background:var(--paper-3); overflow:hidden; outline:1px solid transparent; outline-offset:2px; transition:outline-color .2s }
  .gal__thumbs button[aria-pressed="true"]{ outline-color:var(--ink) }
  .gal__thumbs img{ width:100%; height:100%; object-fit:cover }
  .pinfo{ position:sticky; top:calc(var(--head-h) + 26px) }
  .pinfo h1{ font-size:clamp(2.2rem,4vw,3.6rem); letter-spacing:-.04em; margin:14px 0 18px }
  .pinfo .lead{ max-width:none; font-size:1.08rem }
  .pfacts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:26px 0 }
  .pfacts div{ padding:16px 14px 16px 0 } .pfacts div + div{ padding-left:14px; border-left:1px solid var(--line) }
  .pfacts dt{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mute) }
  .pfacts dd{ margin:6px 0 0; font-weight:600; font-size:.98rem }

  /* Fiyat hesaplayıcı */
  .calc{ border:1px solid var(--ink); background:var(--paper) }
  .calc__head{ display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line); font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase }
  .calc__head .ic{ width:18px; height:18px }
  .calc__body{ padding:18px; display:grid; gap:16px }
  .calc label{ display:block; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin-bottom:8px }
  .calc select{ width:100%; height:50px; padding:0 40px 0 14px; border:1px solid var(--line-2); background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/16px; appearance:none; border-radius:0; font-size:.97rem }
  .qty{ display:flex; flex-wrap:wrap; gap:8px }
  .qty button{ min-width:72px; height:44px; padding:0 14px; border:1px solid var(--line-2); font-family:var(--f-mono); font-size:.85rem; transition:border-color .2s, background .2s, color .2s }
  .qty button:hover{ border-color:var(--ink) }
  .qty button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
  .calc__out{ display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:end; padding:18px; background:var(--paper-2); border-top:1px solid var(--line) }
  .calc__total{ font-family:var(--f-display); font-weight:700; font-size:clamp(2rem,3vw,2.6rem); letter-spacing:-.045em; line-height:1 }
  .calc__sub{ grid-column:1/-1; font-size:.85rem; color:var(--mute) }
  .calc__unit{ font-family:var(--f-mono); font-size:.8rem; color:var(--mute); text-align:right }
  .calc__acts{ padding:0 18px 18px; background:var(--paper-2); display:grid; gap:8px }
  .calc__note{ font-size:.8rem; color:var(--mute); padding:12px 18px; border-top:1px solid var(--line) }

  .specs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(24px,4vw,64px) }
  .spec{ border-top:1px solid var(--ink); padding:18px 0 30px }
  .spec h3{ display:flex; align-items:center; gap:10px; font-size:1.1rem; margin-bottom:12px }
  .spec h3 .ic{ width:20px; height:20px; color:var(--m) }
  .spec ul{ list-style:none; margin:0; padding:0 }
  .spec li{ display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px dashed var(--line-2); font-size:.97rem }
  .spec li span{ color:var(--mute); text-align:right }
  @media (max-width:760px){ .specs{ grid-template-columns:1fr } }

  .filebox{ position:relative; border:1px dashed var(--line-2); padding:clamp(22px,3vw,36px); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:start; background:var(--paper) }
  .filebox ol{ margin:14px 0 0; padding-left:1.2em; display:grid; gap:8px; color:var(--ink-2) }
  .filebox ol li::marker{ font-family:var(--f-mono); color:var(--m) }
  .bleed-demo{ width:150px; aspect-ratio:91/61; position:relative; background:var(--m); color:#fff; font-family:var(--f-mono); font-size:.6rem }
  .bleed-demo::before{ content:""; position:absolute; inset:5%; border:1px solid #fff; background:var(--paper); }
  .bleed-demo::after{ content:""; position:absolute; inset:14%; border:1px dashed var(--c) }
  .bleed-demo span{ position:absolute; z-index:1; color:var(--ink) }
  @media (max-width:640px){ .filebox{ grid-template-columns:1fr } }

  .ptable-price{ width:100%; border-collapse:collapse; font-size:.95rem }
  .ptable-price th,.ptable-price td{ padding:12px 10px; border-bottom:1px solid var(--line); text-align:left }
  .ptable-price th{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); font-weight:500; border-bottom-color:var(--ink) }
  .ptable-price td:last-child,.ptable-price th:last-child{ text-align:right; font-weight:600; white-space:nowrap }
  .ptable-wrap{ overflow-x:auto }

  .two{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(30px,5vw,90px) }
  .two__aside{ position:sticky; top:calc(var(--head-h) + 40px); align-self:start }
  @media (max-width:980px){ .product{ grid-template-columns:1fr } .pinfo{ position:static } .two{ grid-template-columns:1fr } .two__aside{ position:static } }

  .mbar{ position:fixed; left:0; right:0; bottom:0; z-index:80; display:none; background:var(--paper); border-top:1px solid var(--line); padding:10px var(--gut); gap:10px; align-items:center; justify-content:space-between }
  .mbar .price{ font-size:1.05rem }
  @media (max-width:980px){ .mbar{ display:flex } body.has-mbar .wa-float{ bottom:84px } }

  /* ══ FORMLAR ══════════════════════════════════════════════════════ */
  .form{ display:grid; grid-template-columns:1fr 1fr; gap:22px 20px }
  .form .full{ grid-column:1/-1 }
  .fld label,.fld .lbl{ display:block; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin-bottom:9px }
  .fld input,.fld select,.fld textarea{ width:100%; border:0; border-bottom:1px solid var(--line-2); background:transparent; padding:12px 0; font-size:1.05rem; border-radius:0; transition:border-color .2s }
  .fld select{ appearance:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 2px center/16px; padding-right:28px }
  .fld textarea{ min-height:140px; resize:vertical; line-height:1.55 }
  .fld input:focus,.fld select:focus,.fld textarea:focus{ outline:0; border-bottom-color:var(--ink) }
  .fld--err input,.fld--err textarea,.fld--err select{ border-bottom-color:var(--m) }
  .fld__err{ color:var(--accent-ink); font-size:.85rem; margin-top:6px }
  .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
  .check{ display:flex; gap:12px; align-items:flex-start; font-size:.92rem; color:var(--mute); cursor:pointer }
  .check input{ width:20px; height:20px; accent-color:var(--m); margin-top:2px; flex:none }
  .check a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px }
  .drop{ position:relative; display:grid; place-items:center; text-align:center; gap:10px; padding:34px 20px; border:1.5px dashed var(--line-2); background:var(--paper-2); cursor:pointer; transition:border-color .2s, background .2s }
  .drop:hover,.drop.is-over{ border-color:var(--m); background:color-mix(in srgb, var(--m) 6%, var(--paper)) }
  .drop input{ position:absolute; inset:0; opacity:0; cursor:pointer }
  .drop .ic{ width:34px; height:34px; color:var(--m) }
  .drop b{ font-family:var(--f-display); font-size:1.15rem; letter-spacing:-.015em }
  .drop small{ color:var(--mute); font-size:.82rem }
  .drop__file{ font-family:var(--f-mono); font-size:.85rem; color:var(--ink) }
  .alert{ padding:16px 18px; border-left:3px solid var(--ink); background:var(--paper-2); margin-bottom:24px; font-size:.97rem }
  .alert--ok{ border-color:#1f9d55 } .alert--err{ border-color:var(--m) }
  .chips{ display:flex; flex-wrap:wrap; gap:8px }
  .chips label{ position:relative }
  .chips input{ position:absolute; opacity:0 }
  .chips span{ display:inline-flex; align-items:center; height:42px; padding:0 16px; border:1px solid var(--line-2); font-size:.92rem; cursor:pointer; transition:all .2s }
  .chips input:checked + span{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
  .chips input:focus-visible + span{ outline:2px solid var(--m); outline-offset:2px }
  @media (max-width:640px){ .form{ grid-template-columns:1fr } }

  .qwrap{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(30px,5vw,90px); align-items:start }
  .qside{ position:sticky; top:calc(var(--head-h) + 30px); display:grid; gap:26px }
  .qside__box{ border-top:1px solid var(--ink); padding-top:18px }
  .qside__box h3{ font-size:1.1rem; margin-bottom:12px }
  .qsteps{ list-style:none; margin:0; padding:0; display:grid; gap:16px; counter-reset:q }
  .qsteps li{ display:grid; grid-template-columns:34px 1fr; gap:10px; counter-increment:q }
  .qsteps li::before{ content:"0" counter(q); font-family:var(--f-mono); font-size:.8rem; color:var(--m); padding-top:3px }
  .qsteps b{ display:block } .qsteps span{ color:var(--mute); font-size:.92rem }
  .hours{ display:grid; gap:6px; font-size:.95rem } .hours div{ display:flex; justify-content:space-between; gap:12px; border-bottom:1px dashed var(--line); padding-bottom:6px }
  .hours span{ color:var(--mute) }
  @media (max-width:980px){ .qwrap{ grid-template-columns:1fr } .qside{ position:static } }

  /* İletişim */
  .cinfo{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line) }
  .cinfo > *{ padding:26px 24px 30px 0; border-bottom:1px solid var(--line) }
  .cinfo > * + *{ padding-left:24px; border-left:1px solid var(--line) }
  .cinfo .kicker{ display:block; margin-bottom:12px }
  .cinfo a,.cinfo p{ font-family:var(--f-display); font-size:clamp(1.15rem,1.8vw,1.6rem); font-weight:600; letter-spacing:-.025em; line-height:1.25 }
  @media (max-width:860px){ .cinfo{ grid-template-columns:1fr } .cinfo > * + *{ padding-left:0; border-left:0 } }

  /* ══ BASKI REHBERİ ════════════════════════════════════════════════ */
  .guide{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr); gap:clamp(30px,5vw,90px) }
  .toc{ position:sticky; top:calc(var(--head-h) + 40px); align-self:start; border-top:1px solid var(--ink); padding-top:16px }
  .toc ol{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:2px; counter-reset:t }
  .toc a{ display:grid; grid-template-columns:30px 1fr; padding:7px 0; color:var(--mute); font-size:.93rem; counter-increment:t; transition:color .2s }
  .toc a::before{ content:counter(t, decimal-leading-zero); font-family:var(--f-mono); font-size:.75rem; padding-top:2px }
  .toc a:hover,.toc a.is-on{ color:var(--ink) } .toc a.is-on::before{ color:var(--m) }
  .toc__bar{ height:2px; background:var(--line); margin-top:18px } .toc__bar i{ display:block; height:100%; width:0; background:var(--m) }
  @media (max-width:980px){ .guide{ grid-template-columns:1fr } .toc{ position:static } }

  /* Kağıt rehberi */
  .pfilter{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px }
  .pfilter button{ height:40px; padding:0 16px; border:1px solid var(--line-2); font-size:.92rem; transition:all .2s }
  .pfilter button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
  .papers{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:clamp(18px,2vw,30px) }
  .paper{ position:relative; border:1px solid var(--line); padding:0 0 22px; display:grid; gap:12px; align-content:start; scroll-margin-top:150px; background:var(--paper) }
  .paper[hidden]{ display:none }
  .paper__sw{ position:relative; height:150px; background:var(--sw); overflow:hidden; perspective:600px }
  .paper__sw i{ position:absolute; right:24px; bottom:-30px; width:120px; height:160px; background:var(--sw); box-shadow:-10px 10px 30px -12px rgba(0,0,0,.35); transform:rotateX(46deg) rotateZ(18deg); transition:transform .8s var(--ease-out) }
  .paper:hover .paper__sw i{ transform:rotateX(30deg) rotateZ(10deg) translateY(-10px) }
  .paper__fam{ position:absolute; left:16px; top:14px; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(0,0,0,.6) }
  .paper > :not(.paper__sw){ padding-inline:22px }
  .paper h2{ font-size:1.5rem; letter-spacing:-.025em }
  .paper p{ color:var(--mute); font-size:.95rem }
  .gsm{ display:flex; flex-wrap:wrap; gap:6px }
  .gsm span{ font-family:var(--f-mono); font-size:.78rem; padding:4px 8px; border:1px solid var(--line-2) }
  .paper ul{ margin:0; padding-left:1.1em; font-size:.92rem; color:var(--ink-2); display:grid; gap:4px }
  .gscale{ display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); align-items:end; gap:10px; height:220px; border-bottom:1px solid var(--ink); padding-top:20px }
  .gscale div{ display:grid; justify-items:center; gap:8px; align-self:end }
  .gscale i{ display:block; width:100%; background:repeating-linear-gradient(0deg, var(--paper) 0 2px, var(--line-2) 2px 3px); border:1px solid var(--line-2); border-bottom:0 }
  .gscale span{ font-family:var(--f-mono); font-size:.75rem } .gscale small{ font-size:.75rem; color:var(--mute); text-align:center; line-height:1.3 }
  @media (max-width:760px){ .gscale{ grid-template-columns:repeat(4,1fr); height:auto } }

  /* Blog yazısı */
  .article{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,8fr) minmax(0,1fr); gap:clamp(24px,4vw,64px) }
  .article__cover{ aspect-ratio:21/9; background:var(--paper-3); overflow:hidden; margin-bottom:clamp(40px,5vw,72px) }
  .article__cover img{ width:100%; height:100%; object-fit:cover }
  @media (max-width:980px){ .article{ grid-template-columns:1fr } }
  .pager{ display:flex; gap:8px; justify-content:center; margin-top:60px }
  .pager a,.pager span{ min-width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line-2); font-family:var(--f-mono); font-size:.85rem }
  .pager [aria-current]{ background:var(--ink); color:var(--paper); border-color:var(--ink) }

  /* 404 */
  .nf{ min-height:80vh; display:grid; place-items:center; text-align:center; padding-top:var(--head-h) }
  .nf__code{ font-family:var(--f-display); font-weight:800; font-size:clamp(7rem,24vw,20rem); letter-spacing:-.07em; line-height:.8; color:transparent; -webkit-text-stroke:1.5px var(--ink); position:relative }
  .nf__code span{ position:absolute; inset:0; color:var(--m); -webkit-text-stroke:0; mix-blend-mode:multiply; transform:translate(.04em,.03em); clip-path:inset(0 0 52% 0) }
}

/* ── UTILITIES ──────────────────────────────────────────────────────── */
@layer utilities {
  .mt-s{ margin-top:16px } .mt-m{ margin-top:32px } .mt-l{ margin-top:64px }
  .center{ text-align:center }
  .row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center }
  .between{ justify-content:space-between }
  .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important }
    .js .rv{ opacity:1; transform:none }
  }
}