/* ============================================================================
   base-v7.css : reset, tipografi, düğme/bağlantı sözlüğü, header, drawer,
   tema anahtarı, footer, ızgara yardımcıları, ürün fotoğrafı kartı (paylaşılan).
   Değerler yalnız token'lardan (tokens-v7.css + tokens-dark-v7.css); sert kodlu
   renk YOK, iki temada da çalışır. v7.2: --r yumuşak, --r-pill etkileşimli.
   ========================================================================= */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-padding-top:calc(var(--hdr-h) + var(--sp-3))}
body{margin:0;min-height:100dvh;background:var(--c-paper);color:var(--c-text);font-family:var(--f-body);font-size:var(--t-body);font-weight:var(--w-body);line-height:var(--lh-copy);overflow-x:clip}
h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[role="list"],ol[role="list"]{list-style:none;padding:0}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
address{font-style:normal}
main{display:block}
main:focus{outline:none}
[hidden]{display:none !important}

/* ---------- Tipografi ---------- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:var(--w-display);color:var(--c-ink);text-wrap:balance}
p,li,dd{text-wrap:pretty}
.t-display-xl{font-family:var(--f-display);font-weight:var(--w-display);font-size:var(--t-display-xl);line-height:var(--lh-tight);letter-spacing:var(--tr-display);color:var(--c-ink)}
.t-display-l{font-family:var(--f-display);font-weight:var(--w-display);font-size:var(--t-display-l);line-height:var(--lh-tight);letter-spacing:var(--tr-display);color:var(--c-ink)}
.t-heading-l{font-family:var(--f-display);font-weight:var(--w-display);font-size:var(--t-heading-l);line-height:var(--lh-snug);letter-spacing:var(--tr-heading);color:var(--c-ink)}
.t-heading-m{font-family:var(--f-display);font-weight:var(--w-display);font-size:var(--t-heading-m);line-height:var(--lh-snug);letter-spacing:var(--tr-heading);color:var(--c-ink)}
.t-lead{font-size:var(--t-lead);line-height:1.5;color:var(--c-text);max-width:var(--measure)}
.t-body-s{font-size:var(--t-body-s);line-height:1.55}
.t-caption{font-size:var(--t-caption);line-height:1.45;color:var(--c-text-2)}
.t-muted{color:var(--c-text-2)}
.eyebrow{font-family:var(--f-body);font-size:var(--t-label);font-weight:var(--w-ui);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--c-text-2)}
.num{font-variant-numeric:tabular-nums}

/* ---------- Erişilebilirlik ---------- */
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--sp-3);top:var(--sp-2);z-index:calc(var(--z-menu) + 1);padding:var(--sp-2) var(--sp-4);background:var(--c-action);color:var(--c-on-action);border-radius:var(--r-pill);font-weight:var(--w-ui);text-decoration:none;transform:translateY(-200%);transition:transform var(--du-micro) var(--ez-out)}
.skip-link:focus{transform:none;outline:none;box-shadow:var(--ring-focus)}
:focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:var(--r)}

/* ---------- Izgara / kap ---------- */
.wrap{width:100%;max-width:calc(var(--wrap-max) + 2 * var(--wrap-gutter));margin-inline:auto;padding-inline:var(--wrap-gutter)}
.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap)}
.section{padding-block:var(--sp-section)}
.section--tight{padding-block:var(--sp-section-tight)}
.measure{max-width:var(--measure)}
.stack-head > * + *{margin-top:var(--sp-3)}

/* ---------- Bağlantı ve düğme sözlüğü (§8.10) ---------- */
.tlink{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;color:var(--c-text);font-weight:var(--w-ui);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--c-hair-strong);transition:text-decoration-color var(--du-micro) var(--ez-out)}
.tlink .icon{flex:none;transition:transform var(--du-hover) var(--ez-out)}
.tlink--phone{text-decoration:none;font-variant-numeric:tabular-nums}
.tlink--phone span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--c-hair-strong)}
.tlink--arrow{text-decoration:none}
.tlink--arrow span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--c-hair-strong)}
@media (hover:hover) and (pointer:fine){
  .tlink:hover,.tlink:hover span{text-decoration-thickness:2px;text-decoration-color:currentColor}
  .tlink--arrow:hover .icon{transform:translateX(3px)}
}

/* ---------- Düğme sistemi (v7.2): birincil · ikincil · cam ----------
   Şekil: tam pill. Yapı (inc/components.php btn_parts()):
     .btn > .btn__label > .btn__txt + .btn__txt[aria-hidden]   etiket "roll" (yalnız transform)
          > .btn__orb > .btn__ico + .btn__ico--next              button-in-button ikon dairesi
   Katmanlar (isolation içinde, içerik altında): ::before ışık süpürmesi (hover girişinde bir kez),
   ::after pointer spotu (--mx/--my, site-v7.js tek pointermove; yalnız hover:hover + pointer:fine).
   Geçiş yalnız transform / opacity / background-color. transition:all YOK. */
.btn{--spot:var(--btn-spot);--shine:var(--btn-shine);--orb:var(--btn-orb-bg);position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3);min-height:var(--btn-h);padding:0 var(--sp-5);border:0;border-radius:var(--r-pill);font-family:var(--f-body);font-size:var(--t-body-s);font-weight:var(--w-ui);line-height:var(--lh-ui);letter-spacing:var(--tr-label);text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:background-color var(--du-micro) var(--ez-out),transform var(--du-micro) var(--ez-out)}
.btn::before,.btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none}
.btn::before{background:linear-gradient(105deg,transparent 30%,var(--shine) 50%,transparent 70%);transform:translateX(-120%)}
.btn::after{background:radial-gradient(150px circle at var(--mx,50%) var(--my,50%),var(--spot),transparent 72%);opacity:0;transition:opacity var(--du-hover) var(--ez-out)}
.btn:active{transform:scale(.97)}
.btn--orb{padding-right:6px;padding-left:var(--sp-4)}
.btn--orb .btn__label{padding-right:2px}

.btn__label{display:grid;overflow:hidden}
.btn__txt{grid-area:1 / 1;display:block;transition:transform var(--du-roll) var(--ez-out)}
.btn__txt + .btn__txt{transform:translateY(105%)}
.btn__orb{display:grid;place-items:center;width:var(--btn-orb);height:var(--btn-orb);flex:none;overflow:hidden;border-radius:var(--r-pill);background:var(--orb);transition:background-color var(--du-micro) var(--ez-out),transform var(--du-roll) var(--ez-out)}
.btn__ico{grid-area:1 / 1;display:grid;transition:transform var(--du-roll) var(--ez-out)}
.btn__ico .icon{width:18px;height:18px}
.btn__ico--next{transform:translate(-170%,170%)}
.btn__orb[data-dir="x"] .btn__ico--next{transform:translateX(-170%)}

@media (hover:hover) and (pointer:fine){
  .btn:hover::before{transform:translateX(120%);transition:transform var(--du-shine) var(--ez-out)}
  .btn:hover::after{opacity:1}
  .btn:hover .btn__orb{transform:translate(2px,-2px)}
  .btn:hover .btn__orb[data-dir="x"]{transform:translateX(3px)}
  .btn:hover .btn__txt{transform:translateY(-105%)}
  .btn:hover .btn__txt + .btn__txt{transform:none;transition-delay:30ms}
  .btn:hover .btn__ico{transform:translate(170%,-170%)}
  .btn:hover .btn__orb[data-dir="x"] .btn__ico{transform:translateX(170%)}
  .btn:hover .btn__ico--next,.btn:hover .btn__orb[data-dir="x"] .btn__ico--next{transform:none;transition-delay:40ms}
}
/* Klavye odağı hover ile aynı hareketi gösterir (fare yokken de canlı). */
.btn:focus-visible .btn__txt{transform:translateY(-105%)}
.btn:focus-visible .btn__txt + .btn__txt{transform:none}
.btn:focus-visible .btn__ico{transform:translate(170%,-170%)}
.btn:focus-visible .btn__orb[data-dir="x"] .btn__ico{transform:translateX(170%)}
.btn:focus-visible .btn__ico--next{transform:none}

/* Birincil: açık temada Organic dolgu, koyu temada Ivory dolgu (token). */
.btn--primary{background-color:var(--c-action);color:var(--c-on-action)}
/* İkincil: dolgusuz, iç hairline (form çizgisi tonu, UI >= 3:1), hover'da sahne tonu. */
.btn--secondary{--spot:var(--btn-spot-2);--shine:var(--btn-shine-2);--orb:var(--btn-orb-bg-2);background-color:transparent;color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-field-line)}
.btn--secondary:focus-visible{box-shadow:inset 0 0 0 1px var(--c-field-line),var(--ring-focus)}
/* Cam (yalnız video/fotoğraf üstünde): yarı saydam Ivory dolgu + blur + gradient hairline kenar
   (.btn__edge, mask-composite) + üst kenar ışığı. Metin Ivory; daire dolu Ivory, ikon koyu. */
.btn--glass{--spot:rgb(245 230 197 / .2);--shine:rgb(245 230 197 / .32);--orb:var(--c-media-action);background-color:var(--glass-media-fill);color:var(--c-on-media);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));box-shadow:var(--glass-media-spec),var(--glass-shadow)}
.btn--glass .btn__orb{color:var(--c-on-media-action)}
.btn__edge{position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--glass-media-edge);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.btn--glass:focus-visible{box-shadow:var(--glass-media-spec),0 0 0 2px var(--c-scrim),0 0 0 4px var(--c-on-media)}
.btn--block{width:100%;justify-content:space-between}
.btn--block:not(.btn--orb){justify-content:center}
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{background-color:var(--c-action-hover)}
  .btn--secondary:hover{background-color:var(--c-stage)}
  .btn--glass:hover{background-color:var(--glass-media-hover)}
}

/* Mıknatıs sarmalayıcı (yalnız hero ve teklif bandı CTA'sı): transform'u JS rAF yazar,
   düğmenin kendi :active ölçeğiyle çakışmaz. Reduced-motion ve dokunmatikte hiç çalışmaz. */
.magnet{display:inline-flex;will-change:transform}
html:not(.js) .magnet{will-change:auto}

.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5)}

/* ---------- İkon ---------- */
.icon{width:var(--icon-l);height:var(--icon-l);flex:none}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--r-pill);background-color:transparent;color:var(--c-text);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--du-micro) var(--ez-out),transform var(--du-micro) var(--ez-out)}
.icon-btn:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){.icon-btn:hover{background-color:var(--c-stage)}}

/* ---------- Header (§8.1 + v7.2 cam) ----------
   Sayfa başında düz paper zemin. Kaydırınca (is-scrolled) cam: yarı saydam token zemin + blur +
   alt kenarda gradient hairline (::after, düz border değil). Altından sayfa içeriği akar. */
.hdr-sentinel{position:absolute;top:0;left:0;width:1px;height:8px;pointer-events:none}
.site-header{position:sticky;top:0;z-index:var(--z-header);height:var(--hdr-h);background-color:var(--c-paper);transition:background-color var(--du-hover) var(--ez-out)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--glass-hair);opacity:0;pointer-events:none;transition:opacity var(--du-hover) var(--ez-out)}
.site-header.is-scrolled{background-color:var(--glass-bar);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat))}
.site-header.is-scrolled::after{opacity:1}
.site-header__inner{display:flex;align-items:center;height:100%;gap:var(--sp-6)}
.wordmark{display:inline-flex;align-items:center;gap:0;min-height:44px;color:var(--c-text);text-decoration:none;font-family:var(--f-display);font-weight:var(--w-strong);font-size:1.375rem;letter-spacing:-0.02em;line-height:1}
.site-nav ul{display:flex;align-items:center;gap:var(--sp-5)}
.site-nav__link{position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--c-text);font-size:var(--t-body-s);font-weight:var(--w-ui);text-decoration:none}
.site-nav__link::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--c-accent-line);transform:scaleX(0);transform-origin:left;transition:transform var(--du-hover) var(--ez-out)}
.site-nav__link[aria-current="page"]{font-weight:var(--w-emph);color:var(--c-ink)}
.site-nav__link[aria-current="page"]::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){.site-nav__link:not([aria-current]):hover::after{transform:scaleX(.4)}}
.site-header__phone{margin-left:auto;text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap}
/* 768-1023: menü 5 öğe (Katalog eklendi); numara metni yer açmak için yalnız ikon kalır,
   erişilebilir ad korunur (metin ekran okuyucuda okunur). Min 44px hedef. */
@media (min-width:768px) and (max-width:1023px){
  .site-header__phone{min-width:44px;justify-content:center}
  .site-header__phone span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
.site-header__phone span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--c-hair-strong)}
.site-header__call,.site-header__menu{display:none}
/* Tema anahtarı: telefon bağlantısına 16px (header gap'i 48px'ten geri çekilir). */
.site-header__theme{margin-left:calc(var(--sp-3) - var(--sp-6))}

/* ---------- Tema anahtarı (koyu varsayılan; ikon temaya göre CSS'ten) ----------
   Koyu temada güneş (açığa geç), açık temada ay (koyuya geç). JS yoksa düğme gizli:
   tema sunucu varsayılanında (koyu) kalır, çalışmayan düğme gösterilmez. */
.theme-toggle{position:relative}
.theme-toggle__sun,.theme-toggle__moon{grid-area:1 / 1;display:inline-grid;place-items:center;transition:opacity var(--du-theme) var(--ez-out),transform var(--du-theme) var(--ez-out)}
:root[data-theme="dark"] .theme-toggle__moon{opacity:0;transform:rotate(-90deg) scale(.5)}
:root:not([data-theme="dark"]) .theme-toggle__sun{opacity:0;transform:rotate(90deg) scale(.5)}
html:not(.js) .theme-toggle,html:not(.js) .site-header__menu{display:none !important}

@media (max-width:767px){
  .site-header__inner{gap:var(--sp-2)}
  .site-nav,.site-header__phone,.site-header__theme{display:none}
  .site-header__call{display:inline-grid;margin-left:auto}
  .site-header__menu{display:inline-grid}
  .wordmark{font-size:1.25rem}
}

/* ---------- Mobil menü yaprağı ---------- */
.drawer{position:fixed;inset:0;z-index:var(--z-menu);display:flex;flex-direction:column;background:var(--c-raised);box-shadow:var(--sh-float);opacity:0;transform:translateY(-12px);transition:opacity var(--du-state) var(--ez-inout),transform var(--du-state) var(--ez-inout);overflow-y:auto;overscroll-behavior:contain}
.drawer.is-open{opacity:1;transform:none}
.drawer__top{display:flex;align-items:center;justify-content:space-between;min-height:var(--hdr-h)}
.drawer__tools{display:flex;align-items:center;gap:var(--sp-1)}
.drawer__nav{flex:1;padding-top:var(--sp-6)}
.drawer__nav ul{display:grid;gap:var(--sp-3)}
.drawer__link{display:inline-flex;align-items:center;min-height:48px;font-family:var(--f-display);font-weight:var(--w-display);font-size:2rem;letter-spacing:var(--tr-heading);color:var(--c-ink);text-decoration:none;opacity:0;transform:translateY(12px);transition:opacity var(--du-state) var(--ez-out),transform var(--du-state) var(--ez-out)}
.drawer.is-open .drawer__link{opacity:1;transform:none}
.drawer.is-open li:nth-child(2) .drawer__link{transition-delay:calc(var(--stagger) * 1)}
.drawer.is-open li:nth-child(3) .drawer__link{transition-delay:calc(var(--stagger) * 2)}
.drawer.is-open li:nth-child(4) .drawer__link{transition-delay:calc(var(--stagger) * 3)}
.drawer__link[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--c-accent-line);text-decoration-thickness:2px;text-underline-offset:8px}
.drawer__foot{display:grid;gap:var(--sp-2);padding-block:var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom))}
.drawer__phone{justify-self:start}
html.menu-open,html.menu-open body{overflow:hidden}

/* ---------- Ürün fotoğrafı + kart (v7.1; paylaşılan: koleksiyon, ana sayfa, ürün rayı) ----------
   Fotoğraflar ORİJİNAL, kırpılmamış, kendi zemininde (2400x1792, 4:3). Çerçeve, sahne tonu,
   temas gölgesi, stüdyo/yaşam ayrımı YOK. Kutu fotoğrafın doğal oranında (--media-ratio),
   görsel kutuyu tam doldurur; contain yalnız güvence (oran farklı bir dosya gelirse kırpmaz,
   kenarda --c-stage görünür). Zoom yok. Koyu temada çevre zemini --c-stage, tek radius.
   .stage eski sınıf adıdır (ürün/atölye sayfaları); aynı kurala bağlıdır. */
/* v7.2: kutu overflow:hidden DEĞİL; radius görselin kendisinde (border-radius:inherit). Böylece
   hover gölgesi (::after) kutunun dışına düşer, fotoğraf yine hiç kırpılmaz (oran birebir). */
.media,.stage{position:relative;display:block;aspect-ratio:var(--media-ratio);background:transparent;border-radius:var(--r);transition:transform var(--du-hover) var(--ez-out)}
.media > img,.stage__img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.stage__empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:var(--sp-2);color:var(--c-natural);font-size:var(--t-caption)}
.stage__empty span{color:var(--c-text-2)}

.pcard{display:block;color:inherit;text-decoration:none;border-radius:var(--r)}
.pcard:focus-visible{box-shadow:none}
.pcard:focus-visible .media{box-shadow:var(--ring-focus)}
.pcard .media{isolation:isolate}
/* Kalkış gölgesi: yalnız hover/odakta, opacity ile (box-shadow geçişi yok). */
.pcard .media::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:var(--sh-lift);opacity:0;pointer-events:none;transition:opacity var(--du-hover) var(--ez-out)}
/* Kenar ışığı: pointer'ı izleyen ince halka (1px, mask-composite), düşük opaklık; fotoğrafı örtmez. */
.pcard .media::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;padding:1px;pointer-events:none;background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),var(--card-spot),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity var(--du-hover) var(--ez-out)}
.pcard__meta{display:grid;grid-template-columns:1fr auto;align-items:start;column-gap:var(--sp-2);row-gap:var(--sp-1);padding-top:var(--sp-3)}
.pcard__name{font-family:var(--f-display);font-weight:var(--w-display);font-size:var(--t-heading-s);line-height:var(--lh-snug);letter-spacing:-0.01em;color:var(--c-ink)}
.pcard__arrow{display:grid;place-items:center;width:32px;height:32px;margin:-4px -6px 0 0;border-radius:var(--r-pill);color:var(--c-text);transition:transform var(--du-hover) var(--ez-out),background-color var(--du-micro) var(--ez-out)}
.pcard__arrow .icon{width:20px;height:20px}
.pcard__tagline{grid-column:1 / -1;font-size:var(--t-body-s);line-height:1.5;color:var(--c-text-2)}
/* Cam "İncele" çipi: fotoğrafın ALT kenarında, sol köşede, küçük (32px); yalnız masaüstü hover ve
   klavye odağında aşağıdan kayarak gelir. blur yalnız görünürken (dinlenmede maliyet yok). */
.pcard__chip{position:absolute;left:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 14px;border-radius:var(--r-pill);background-color:var(--glass-chip-fill);color:var(--glass-chip-ink);box-shadow:var(--glass-spec),0 6px 18px -8px rgb(27 29 20 / .35);font-size:var(--t-label);font-weight:var(--w-ui);line-height:1;letter-spacing:var(--tr-label);white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(12px);transition:opacity var(--du-hover) var(--ez-out),transform var(--du-state) var(--ez-out)}
.pcard__chip .icon{width:14px;height:14px}
/* Hover/odak: fotoğraf kutusu bütün olarak 6px kalkar (zoom/ölçek YOK), gölge + kenar ışığı +
   cam çip belirir, ok çapraz kayar. */
@media (hover:hover) and (pointer:fine){
  .pcard:hover .media{transform:translateY(var(--stage-lift))}
  .pcard:hover .media::after,.pcard:hover .media::before{opacity:1}
  .pcard:hover .pcard__chip{opacity:1;transform:none;-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
  .pcard:hover .pcard__arrow{transform:translate(2px,-2px);background-color:var(--c-stage)}
  .pcard:focus-visible .pcard__chip{opacity:1;transform:none}
}
@media not ((hover:hover) and (pointer:fine)){.pcard__chip{display:none}}
.pcard:focus-visible .media{transform:translateY(var(--stage-lift))}
.pcard:focus-visible .media::after{opacity:1}
.pcard:focus-visible .pcard__arrow{transform:translate(2px,-2px)}
@media (max-width:767px){
  .pcard__name{font-size:1rem}
  /* Künye iki satıra kadar (ayak bilgisi sonda, kesilmez); 13px. */
  .pcard__tagline{font-size:var(--t-caption);line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
}

/* ---------- Bölüm girişi (IntersectionObserver; yalnız JS varken gizlenir) ----------
   v7.2: aynı anda ekrana giren öğeler sırayla (--rd = sıra x 70ms, site-v7.js) gelir; ızgara
   kartları satır satır akar. data-reveal="rise": başlık kelimeleri kendi maskesinden yükselir
   (.rw, inc/components.php rise()); kapsayıcı solmaz, yalnız kelimeler kayar (transform). */
html.js [data-reveal]{opacity:0;transform:translateY(var(--reveal-y));transition:opacity var(--du-reveal) var(--ez-out),transform var(--du-reveal) var(--ez-out);transition-delay:var(--rd,0ms)}
html.js [data-reveal].is-in{opacity:1;transform:none}
.rw{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .02em .14em;margin:-.1em -.02em -.14em}
.rw > span{display:inline-block}
html.js [data-reveal="rise"]{opacity:1;transform:none}
html.js [data-reveal="rise"] .rw > span{transform:translateY(var(--rise-y));transition:transform var(--du-hero) var(--ez-out);transition-delay:calc(var(--rd,0ms) + var(--wi,0) * 45ms)}
html.js [data-reveal="rise"].is-in .rw > span{transform:none}

/* ---------- Sayfa geçişleri (CSS cross-document View Transitions) ----------
   Destek yoksa sessizce düşer. Kök: ince crossfade. Ürün görseli: kartta ve detayda aynı
   view-transition-name (pimg-<slug>), yalnız o ürün için (site-v7.js pageswap + head.php pagereveal). */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:280ms;animation-timing-function:cubic-bezier(0.65, 0, 0.35, 1)}
::view-transition-group(*.pimg){animation-duration:460ms;animation-timing-function:cubic-bezier(0.22, 1, 0.36, 1)}
::view-transition-old(*.pimg),::view-transition-new(*.pimg){animation-duration:460ms}
html.vt-theme::view-transition-old(root),html.vt-theme::view-transition-new(root){animation-duration:var(--du-theme)}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}

/* ---------- Okuma ilerleme çizgisi (yalnız ürün / atölye / hakkımızda) ----------
   2px Apricot, sayfa üstünde. Scroll dinleyicisi YOK: animation-timeline:scroll() destekleniyorsa
   CSS ile çalışır, yoksa hiç gösterilmez. Reduced-motion'da kapalı. */
.read-progress{display:none}
@supports (animation-timeline: scroll()){
  .read-progress{position:fixed;top:0;left:0;right:0;z-index:calc(var(--z-header) + 1);display:block;height:2px;background:var(--c-apricot);transform-origin:0 50%;transform:scaleX(0);pointer-events:none;animation:read-grow linear both;animation-timeline:scroll(root block)}
}
@keyframes read-grow{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.read-progress{display:none}}

/* ---------- Footer (§8.8; sitenin TEK koyu bandı) ---------- */
.site-footer{background:var(--c-dark);color:var(--c-on-dark);padding-top:var(--sp-8);padding-bottom:calc(var(--sp-5) + env(safe-area-inset-bottom));border-radius:var(--r-none)}
.site-footer a{color:var(--c-on-dark);text-decoration:none}
.site-footer :focus-visible{box-shadow:0 0 0 2px var(--c-dark),0 0 0 4px var(--c-on-dark)}
.site-footer__lead{padding-bottom:var(--sp-6)}
.site-footer__line{font-family:var(--f-display);font-weight:var(--w-display);font-size:var(--t-heading-l);line-height:var(--lh-snug);letter-spacing:var(--tr-heading);color:var(--c-on-dark);max-width:18ch;text-wrap:balance}
.site-footer__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--grid-gap);border-top:1px solid var(--c-on-dark-hair)}
.site-footer__col{padding-top:var(--sp-5);padding-bottom:var(--sp-5)}
.site-footer__col + .site-footer__col{border-left:1px solid var(--c-on-dark-hair);padding-left:var(--grid-gap)}
.site-footer__title{font-family:var(--f-body);font-size:var(--t-label);font-weight:var(--w-ui);letter-spacing:var(--tr-label);color:var(--c-on-dark-2);margin-bottom:var(--sp-2)}
.site-footer__col ul{display:grid;gap:0}
.site-footer__col .site-footer__pages{grid-template-columns:repeat(2,max-content);column-gap:var(--sp-6)}
.site-footer__tel span{font-variant-numeric:tabular-nums;white-space:nowrap}
.site-footer__col li a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:var(--t-body-s)}
.site-footer__col li a span,.site-footer__col nav a{text-decoration:none}
.site-footer__col a .icon,.site-footer__address .icon{width:20px;height:20px;color:var(--c-on-dark-accent)}
@media (hover:hover) and (pointer:fine){
  .site-footer__col li a:hover{text-decoration:underline;text-decoration-color:var(--c-on-dark-accent);text-underline-offset:4px;text-decoration-thickness:1px}
}
.site-footer__address{display:grid;gap:var(--sp-3);font-size:var(--t-body-s);line-height:1.55}
.site-footer__addr-row{display:flex;gap:10px;align-items:flex-start}
.site-footer__addr-row .icon{margin-top:2px}
.site-footer__person{color:var(--c-on-dark-2);padding-left:30px}
.site-footer__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-2) var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--c-on-dark-hair);font-size:var(--t-caption);color:var(--c-on-dark-2)}

@media (max-width:767px){
  .site-footer{padding-top:var(--sp-6)}
  .site-footer__grid{grid-template-columns:1fr;row-gap:0}
  .site-footer__col{padding-top:var(--sp-4);padding-bottom:var(--sp-3)}
  .site-footer__col + .site-footer__col{border-left:0;padding-left:0;border-top:1px solid var(--c-on-dark-hair)}
  .site-footer__col .site-footer__pages{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-3)}
  .site-footer__lead{padding-bottom:var(--sp-5)}
}

/* ---------- Teklif bandı (§11.1 #5, koleksiyon şeridi; paylaşılan) ----------
   Sol 1-6: başlık · metin · Teklif Al. Sağ 8-12: sayfanın TEK büyük numarası, tabanı
   Teklif Al düğmesinin tabanıyla aynı hizada. Zemin --c-band (açık: Ivory, koyu: stage);
   bantta Apricot yok. */
.quote-band{background:var(--c-band);padding-block:var(--sp-8)}
.quote-band--soft{background:var(--c-ivory-soft);padding-block:var(--sp-7)}
.quote-band__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);row-gap:var(--sp-6);align-items:end}
.quote-band__copy{grid-column:1 / span 6}
.quote-band__title{font-size:var(--t-heading-l);line-height:var(--lh-snug);letter-spacing:var(--tr-heading);max-width:22ch}
.quote-band__text{margin-top:var(--sp-3);max-width:48ch;color:var(--c-text)}
.quote-band__act{display:flex;margin-top:var(--sp-5)}
.quote-band__call{grid-column:8 / -1;justify-self:end;display:grid;justify-items:start}
.quote-band__call-label,.quote-band__call-note{font-size:var(--t-body-s);line-height:1.5;color:var(--c-text-2)}
.quote-band__phone{display:inline-flex;align-items:center;gap:var(--sp-3);min-height:52px;margin-block:var(--sp-2);color:var(--c-ink);text-decoration:none}
.quote-band__phone-icon{display:inline-flex;color:var(--c-text)}
.quote-band__phone-icon .icon{width:28px;height:28px}
.quote-band__phone-num{font-family:var(--f-display);font-weight:var(--w-strong);font-size:var(--t-display-l);line-height:1;letter-spacing:-0.025em;font-variant-numeric:tabular-nums;white-space:nowrap;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px;text-decoration-color:transparent;transition:text-decoration-color var(--du-hover) var(--ez-out)}
@media (hover:hover) and (pointer:fine){.quote-band__phone:hover .quote-band__phone-num{text-decoration-color:currentColor}}
@media (max-width:1023px){
  .quote-band__copy,.quote-band__call{grid-column:1 / -1}
  .quote-band__call{justify-self:start}
}
@media (max-width:767px){
  .quote-band{padding-block:var(--sp-7)}
  .quote-band--soft{padding-block:var(--sp-6)}
  .quote-band__grid{row-gap:var(--sp-5)}
  .quote-band__phone-num{font-size:2.25rem}
  .quote-band__phone-icon .icon{width:24px;height:24px}
}

/* Paylaşılan ürün görseli geçiş sınıfı (ad yalnız geçiş anında atanır). */
[data-pimg]{view-transition-class:pimg}

/* ---------- Cam fallback'leri (ZORUNLU; liquid-glass §2) ----------
   1) backdrop-filter yok: opak token yüzey. 2) Şeffaflık azaltma: opak, blur yok.
   3) Zorunlu renkler: Canvas/CanvasText, efekt katmanları kapalı. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header.is-scrolled{background-color:var(--glass-bar-solid)}
  .btn--glass{background-color:var(--glass-media-solid)}
  .pcard__chip{background-color:var(--glass-chip-solid)}
}
@media (prefers-reduced-transparency:reduce){
  .site-header.is-scrolled{background-color:var(--glass-bar-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
  .btn--glass,.btn--glass:hover{background-color:var(--glass-media-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
  .pcard__chip,.pcard:hover .pcard__chip{background-color:var(--glass-chip-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---------- Azaltılmış hareket: efekt katmanları ve basma ölçeği kapalı ---------- */
@media (prefers-reduced-motion:reduce){
  .btn::before{display:none}
  .btn:active,.icon-btn:active{transform:none}
  .magnet{will-change:auto}
}

/* ---------- Yüksek kontrast ---------- */
@media (forced-colors:active){
  .btn,.icon-btn,.chip{border:1px solid ButtonText}
  .btn::before,.btn::after,.btn__edge,.pcard .media::before,.pcard .media::after{display:none}
  .btn--glass,.site-header.is-scrolled,.pcard__chip{background:Canvas;color:CanvasText;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  .btn__orb{background:Canvas;border:1px solid ButtonText}
  .site-header.is-scrolled{border-bottom:1px solid CanvasText}
  .site-nav__link[aria-current="page"]::after{background:Highlight}
  .read-progress{background:Highlight}
}