/* ============================================================
   ERATOS, shared stylesheet for every page.

   DESIGN SYSTEM v2 (2026-08-25 full redesign). Supersedes the
   2026-08-22 system below only in surface (palette balance,
   typography weighting, card/hero construction); the commerce
   architecture, i18n, cart, and placeholder discipline it was
   built on are unchanged. See ERATOS-SOURCE-OF-TRUTH.md for the
   full record of what changed and why. The old dark
   scroll-scrubbed hero (oil through glass) remains preserved,
   untouched, at assets/phase2-hero-scrub-reference.html.txt.

   Central idea: ERATOS is a real tools-and-objects brand whose
   only current evidence is (a) its real, working products, most
   of them raw marketplace photography, and (b) a handful of
   genuinely recurring materials (bristle, wood, loofah, silk,
   copper). Rather than invent a mood, the system is built to let
   real product photography read as large, calm, and coherent
   (the actual differentiator available today), with copper —
   the single most visually distinct, recurring real material in
   the catalogue (~24 SKUs) — as the one warm accent, replacing
   the old placeholder oxblood/mauve that had no product behind
   it. Serif is reduced to two genuine display moments (hero
   headline, PDP product name); everything else is a clean
   contemporary sans, so the commerce layer stops reading as an
   editorial magazine.
   ============================================================ */
:root{
  /* ============================================================
     V3 PALETTE — PALE NUDE / MINERAL. No chromatic master accent.

     ERATOS does not use nature as a colour palette. Nature arrives through
     LIGHT, WATER, TEXTURE, TRANSFORMATION and TOUCH — that is, through the
     photography — never through tinted UI. So the interface is a graded set
     of warm near-neutrals and one graphite. Natural colour belongs to the
     product.

     Rejected and gone: petrol/teal dominance, copper as master accent,
     green/loofah, generic beige luxury, spa blue.

     The plate ground is deliberately close to white (--chalk) so that real
     product photos with a baked-in white background do not cut a visible
     rectangle out of the page. That is the honest fix available today: it
     does not pretend the image is transparent, it just stops the seam.
     ============================================================ */
  --milk:#FAF9F7;          /* warm near-white: the dominant page ground */
  --chalk:#F2F0EC;         /* bone: the Plate ground, where product images sit */
  --mineral:#E7E5E0;       /* cool mineral neutral: panels, dividers, fills */
  --linen:#DCD7CF;         /* linen/nude: the warmest neutral, used sparingly */
  --graphite:#1B1A18;      /* warm near-black: text AND every primary commerce fill */
  /* THE ONE STONE. Measured, not picked: the edge tone of ERATOS's own scene
     photographs (60 covers sampled at the frame edge, plus the four discovery
     photographs at #C6BEB3 / #CBC1B1 / #D2CCC3 / #CEC8BF). Every square a
     cut-out stands on — product plate, discovery circle — uses this, so a
     cut-out and a scene photograph read as the same room. */
  --plate-stone:#CCC5BA;

  --canvas:var(--milk);
  --canvas-soft:var(--chalk);
  --stone:var(--chalk);    /* the Plate ground */
  --mist:rgba(255,255,255,.6);

  --ink:var(--graphite);   /* ALL normal reading text */
  --ink-soft:#63605A;
  --ink-faint:#6E6A63;   /* 30 Eylül 2026: #96928A süt zeminde 2,95:1 idi; bu süt zeminde 5,11:1, tebeşirde 4,73:1 (AA) */

  --line:rgba(27,26,24,.09);
  --line-strong:rgba(27,26,24,.18);

  /* ERATOS BUZ MAVİSİ — sahibin kararı, 9 Eylül 2026.
     Bu, paletin en üstündeki "hiçbir kromatik ana vurgu yok / spa mavisi
     reddedildi" notunu bilerek geri alır: marka rengi sahibin kararıdır,
     benim tercihim değil. Tek bir yerde tanımlı, çünkü ticari eylem rengi
     (sitedeki her "sepete ekle") ikinci bir hex'e asla dallanmamalı.

     Metin buzun ÜSTÜNDE koyu mürekkeple yazılır, beyazla değil: açık bir
     zemine beyaz metin okunmaz. Ölçüldü, kontrast 10,6:1 (WCAG AA 4,5). */
  /* ERATOS MAVİSİ #B8CEDD (sahip, 15 Eylül 2026): renk kodunu sahip verdi.
     Önce denenenler: etiket #9BD0E8, Gemlik #267F90, suluboya #A3BFD4, buz
     #A8CBD8, gökyüzü #86B9D8, #0292B7. Üzerindeki yazı mürekkep (10,6:1). */
  /* Sahibin verdiği ayrı tonlar (15 Eylül 2026): duyuru çubuğu #B8CEDD, ana
     buton #A6C0D2, buton yazısı #263843 (6,4:1), hover #95B3C8 (5,6:1).
     "Diğer renkleri ve tasarımı koru." */
  --announce:#B8CEDD;
  /* Bir ton daha canlı (sahip, 19 Eylül 2026: "butonun rengi de bir ton daha canlı
     olsun"). Aynı mavi (ton 204°), doygunluk %33 → %45. Yazı bir ton koyu: okunurluk
     7,0:1. Önceki: #A6C0D2 / #263843 / #95B3C8. */
  /* BUTON SİSTEMİ (2 Ekim 2026, demo; sahip belgesi "Bölüm 1 · madde 7"): ana aksiyon artık
     mürekkep (buz mavisi değil). Buğu (--announce #B8CEDD) yalnız duyuru şeridinde kalır.
     --accent-warm (kil) butonlarda KULLANILMAZ: favori kalbi, isme özel seçili çerçeve,
     "Sepette ✓" onayı ve ücretsiz kargo çubuğu için. */
  --btn-bg:var(--btn-cart);
  --btn-ink:var(--btn-cart-text);
  --btn-hover:var(--btn-cart-hover);
  --accent-warm:#B98E80;
  --space-section:clamp(64px,9vh,116px);
  /* SEPETE EKLE BUTONLARI - "Kuru erik" (3 Ekim 2026, sahip). Kartlardaki yuvarlak ikon ve ürün
     sayfasındaki yazılı düğmeler yalnız bu değişkenleri kullanır; sabit hex yazılmaz. */
  --btn-cart:#DCE8F3;
  --btn-cart-hover:#CFDFEE;
  --btn-cart-active:#C2D6E9;
  --btn-cart-text:#24476B;
  --btn-cart-tint:#EEF3F8;
  --btn-cart-tint-text:#24476B;
  /* TASARIM 9 Ekim 2026 (beyaz · siyah · sis mavisi): sis mavisi dolgu, derin mavi yazı/ikon/çerçeve */
  --fog:#DCE8F3;
  --fog-line:#A9C4DD;
  --ink-blue:#24476B;
  --ring-focus:rgba(36,71,107,.18);

  /* state colours only — never brand colours, never used for decoration */
  --success:#3F6B4A; --warning:#8A6018; --error:#A23B2E; --disabled:#CBC7C0;

  /* Eski yönlerin (petrol, sinyal, sahne, bakır, su, buz) takma adları 30 Eylül 2026'da silindi. */
  --accent:var(--graphite);
  --accent-hover:var(--graphite);
  --accent-muted:var(--line);

  /* NO SERIF ANYWHERE. The literary serif (Newsreader) was the last of the
     newspaper/editorial language and is gone from the whole site. Display is now a
     WIDE grotesque: width, not serifs, is what reads as contemporary retail, and an
     expanded face sits beside a handwritten script wordmark without competing with it. */
  /* TEK YAZI TİPİ (3 Ekim 2026, sahip): Plus Jakarta Sans. Başlık, gövde, düğme, menü, form, fiyat,
     sepet ve ödeme dahil her yerde aynı; el yazısı logo (PNG) ve isme özel önizleme (Gabriola) hariç. */
  --font-sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:var(--font-sans);
  --ui:var(--font-sans);
  --body:var(--font-sans);
  --mono:var(--font-sans);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.33,.02,.18,1);

  /* motion hierarchy (redesign brief §24): utility=immediate, commerce=quick,
     content=smooth, atmosphere=slow. Basic UI never waits on cinematic motion. */
  --dur-utility:120ms;
  --dur-commerce:220ms;
  --dur-content:480ms;
  --dur-cinematic:1400ms;

  --tshadow:0 1px 2px rgba(10,14,8,.55),0 3px 14px rgba(10,14,8,.28);
  --shadow-card:0 24px 54px -32px rgba(20,20,17,.34);

  --gut:clamp(20px,5vw,72px);
  --maxw:1320px;
  --navh:76px;
  --navh-compact:62px;

  /* STANDART YAZI ÖLÇEĞİ (3 Ekim 2026, sahip). Sitedeki TÜM yazı bu 10 stilden birini kullanır:
     font-size / font-weight / line-height / letter-spacing yalnız bu değişkenlerden gelir.
     Mobil değerler 768 px ve altında geçerli (aşağıdaki @media bloğu). Kalınlıklar: 400, 500, 600. */
  --fw-400:400;
  --fw-500:500;
  --fw-600:600;
  --t-display-size:44px;
  --t-display-weight:600;
  --t-display-lh:1.15;
  --t-display-ls:-0.02em;
  --t-h1-size:34px;
  --t-h1-weight:600;
  --t-h1-lh:1.2;
  --t-h1-ls:-0.015em;
  --t-h2-size:26px;
  --t-h2-weight:600;
  --t-h2-lh:1.25;
  --t-h2-ls:-0.01em;
  --t-h3-size:20px;
  --t-h3-weight:600;
  --t-h3-lh:1.3;
  --t-h3-ls:-0.005em;
  --t-body-lg-size:17px;
  --t-body-lg-weight:400;
  --t-body-lg-lh:1.6;
  --t-body-lg-ls:0;
  --t-body-size:15px;
  --t-body-weight:400;
  --t-body-lh:1.6;
  --t-body-ls:0;
  --t-small-size:13px;
  --t-small-weight:400;
  --t-small-lh:1.5;
  --t-small-ls:0;
  --t-label-size:12px;
  --t-label-weight:500;
  --t-label-lh:1.4;
  --t-label-ls:0.06em;
  --t-price-size:17px;
  --t-price-weight:600;
  --t-price-lh:1.3;
  --t-price-ls:0;
  --t-button-size:15px;
  --t-button-weight:500;
  --t-button-lh:1;
  --t-button-ls:0.01em;
}

/* Yazı ölçeği, mobil (768 px ve altı) */
@media (max-width:768px){
  :root{
    --t-display-size:30px;
    --t-h1-size:26px;
    --t-h2-size:22px;
    --t-h3-size:18px;
    --t-body-lg-size:16px;
    --t-body-size:15px;
    --t-small-size:13px;
    --t-label-size:12px;
    --t-price-size:16px;
    --t-button-size:15px;
  }
}

/* backward-compatible aliases: older markup in this file still references
   --text-primary / --text-secondary / --canvas-deep / --panel */
:root{
  --text-primary:var(--ink);
  --text-secondary:var(--ink-soft);
  --canvas-deep:var(--canvas-soft);
  --panel:var(--stone);
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--text-primary);font-family:var(--body);-webkit-font-smoothing:antialiased;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls);line-height:var(--t-body-lh)}
img,svg,video{display:block;max-width:100%}
/* Display type = the wide grotesque, tightened. Used for hero, section headlines and
   the gesture verbs. Product names and UI stay in the neutral sans (see .pcard h3). */
h1,h2,h3,h4{margin:0;font-family:var(--ui)}
/* Başlık varsayılanları ölçekten gelir (tarayıcının 2em/1.5em değerleri değil) */
h1{font-size:var(--t-h1-size);font-weight:var(--t-h1-weight);line-height:var(--t-h1-lh);letter-spacing:var(--t-h1-ls)}
h2{font-size:var(--t-h2-size);font-weight:var(--t-h2-weight);line-height:var(--t-h2-lh);letter-spacing:var(--t-h2-ls)}
h3,h4,h5,h6{font-size:var(--t-h3-size);font-weight:var(--t-h3-weight);line-height:var(--t-h3-lh);letter-spacing:var(--t-h3-ls)}
h1,h2,h3{text-wrap:balance}
.dsp{font-family:var(--display);line-height:1.02;text-transform:none;font-weight:var(--fw-600)}
/* one shared measurement style: real dimensions only (45 cm, 75x180 cm) */
.meas{font-family:var(--mono);color:var(--ink-soft);font-variant-numeric:tabular-nums;font-size:var(--t-label-size);font-weight:var(--t-label-weight);letter-spacing:var(--t-label-ls)}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--accent);color:#F8F4EE}
/* KALDIRILDI: img[loading="lazy"]{background:var(--stone)}
   Yükleme sırasında gri bir yer tutucu olsun diye konmuştu, ama görselin
   kendi kutusunu boyuyor ve .plate img{padding:11%} yüzünden yüklendikten
   SONRA da o dolgu halkası gri kalıyordu. Sonuç: tabak beyaz, görselin
   kutusu gri, kapağın kendi zemini beyaz — tek bir üründe üç katman.
   Sahip haklı olarak "çok katmanlı, yorucu" dedi. Yer tutucuya gerek yok:
   arkasındaki tabağın kendi zemini zaten var. */

.skip{position:absolute;left:var(--gut);top:-100px;z-index:300;background:var(--text-primary);color:var(--canvas);padding:12px 18px;border-radius:2px;font-family:var(--ui);transition:top .28s var(--ease);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.skip:focus{top:14px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* placeholder marking: every slot awaiting real ERATOS content carries .ph.
   Kept everywhere it is honestly needed (this is the invent-nothing mechanism,
   not decoration), but quieted down per visual-direction.md §1 and §3: a
   thinner, lower-contrast line, so a page of placeholders reads as "content
   pending" rather than "unfinished site." */
.ph{position:relative}
.ph::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:repeating-linear-gradient(90deg,var(--line-strong) 0 4px,transparent 4px 9px);
  pointer-events:none;
}
.sec-ink .ph::after,.on-ink .ph::after{background:repeating-linear-gradient(90deg,var(--line-strong) 0 4px,transparent 4px 9px)}
.phtag{display:inline-block;font-family:var(--ui);color:var(--ink-soft);border:1px solid var(--line-strong);border-radius:2px;padding:3px 7px;margin-bottom:14px;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.sec-ink .phtag,.on-ink .phtag{color:var(--ink-soft);border-color:var(--line-strong)}

.protobar{position:fixed;left:var(--gut);bottom:16px;z-index:170;max-width:min(420px,calc(100vw - 2 * var(--gut)));display:flex;align-items:flex-start;gap:12px;background:rgba(16,21,18,.94);color:#DDE3DB;backdrop-filter:blur(10px);border:1px solid rgba(233,237,230,.22);border-radius:3px;padding:12px 14px;font-family:var(--ui);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
.protobar[hidden]{display:none}
/* ilk ekrandan sonra cekilir: ayni bilgi footer'da kalici duruyor */
.protobar{transition:opacity .24s var(--ease),transform .24s var(--ease)}
.protobar.tucked{opacity:0;transform:translateY(10px);pointer-events:none}
.protobar button{background:none;border:0;cursor:pointer;color:inherit;padding:2px 4px;line-height:1;opacity:.7}
.protobar button:hover{opacity:1}
.protobar.mini{cursor:pointer;padding:9px 13px}
.protobar.mini > span,.protobar.mini > button{display:none}
.protobar.mini::before{content:attr(data-mini)}
@media (max-width:560px){.protobar{left:12px;right:12px;max-width:none}}

/* ambient environment layer, brand-neutral */
.env{position:fixed;inset:0;z-index:0;pointer-events:none}
.env::before{
  content:"";position:absolute;inset:-10%;
  background:
    radial-gradient(60% 44% at 18% 12%,rgba(255,255,255,.55),transparent 62%),
    radial-gradient(52% 40% at 86% 74%,rgba(110,39,50,.055),transparent 66%),
    radial-gradient(70% 50% at 50% 108%,rgba(23,28,24,.07),transparent 70%);
  animation:envdrift 96s var(--ease-soft) -22s infinite alternate;
}
@keyframes envdrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-2.4%,1.8%,0) scale(1.06)}}
.page{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto}

/* ============================================================
   Nav + mega menu
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:150;height:var(--navh);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 var(--gut);background:rgba(250,249,246,.86);backdrop-filter:blur(14px) saturate(1.15);
  border-bottom:1px solid var(--line);color:var(--text-primary);
  transition:height var(--dur-content) var(--ease),background var(--dur-content) var(--ease);
}
/* compact after scroll: a small, deliberate density change, not a redesign of the bar */
.nav.compact{height:var(--navh-compact);background:rgba(250,249,246,.96);box-shadow:0 1px 0 var(--line)}
/* ERATOS LOGOSU (3 Ekim 2026, sahip): Dancing Script 700 ile yazılan "Eratos",
   VEKTÖR YOLA çevrilmiş. assets/brand/eratos-logo.svg — yazı tipine bağımlı değil,
   her ölçekte net. Beyaz (koyu zemin) ve Kuru erik sürümleri aynı klasörde; 200 ve
   600 px PNG karşılıkları da var. Eski el yazısı PNG (eratos-wordmark-web.png)
   silinmedi, arayüzde kullanılmıyor. Yükseklik burada verilir, genişlik daima auto. */
.brand{display:flex;align-items:center;text-decoration:none}
/* A handwritten script needs SIZE. At 20px tall this mark measured alpha 77/255
   with zero opaque pixels — a grey smudge, not a signature. Hairline scripts lose
   their strokes to downscale averaging, so the header gives it real height.
   CODE-07: the owner judged 34px slightly too large — it was reading as a
   headline rather than a signature next to a 12.5px nav. Reduced ~18% to 28px
   (compact 24px, mobile 24px, footer 32px), tested by eye at 1280 and 375. The
   ASSET IS UNTOUCHED: only the rendered height changes, width stays auto, so no
   stroke or proportion is altered. Density was re-measured before committing to
   the smaller size, because that is exactly what went wrong before: mean ink
   alpha 111 at 34px vs 100 at 28px, peak 254 vs 232 — a ~10% softening, not the
   77/255 collapse of the old corrupt asset. Do not go below 28px without
   re-measuring; a hairline script dies quietly at small sizes. */
.brand .wm{height:52px;width:auto;display:block;
  transition:opacity var(--dur-utility) var(--ease)}
.brand:hover .wm{opacity:.72}
.nav.compact .brand .wm{height:40px}
/* on the dark petrol footer the black ink is inverted to white. The artwork is
   unchanged; only its rendered colour flips, which a one-colour mark permits. */
.foot .wm{height:52px;width:auto;display:block;filter:invert(1);margin-bottom:10px}
@media (max-width:560px){.brand .wm{height:36px}}
/* LOGO HİÇBİR GENİŞLİKTE EZİLMEZ (§4). 19 Eylül 2026'da ölçüldü: 360 px'te
   (en yaygın Android) logo 84×24 çiziliyordu — oran 3,5, olması gereken 5,0;
   320 px'te 1,8. Sebep: menü ızgarasında sağdaki ikon aralıkları logonun
   sütununu daraltıyor, tarayıcı da görseli yatayda sıkıştırıyordu.
   (1) object-fit:contain — yer darsa logo KÜÇÜLÜR, ezilmez.
   (2) ≤400 px'te sütun ve ikon aralığı daralır; 360 px'te logo yine tam
   boyunda (121×24) sığar. Dokunma alanları (44 px) değişmez. */
.brand .wm{object-fit:contain}
@media (max-width:400px){.nav{column-gap:6px}.nav-right{gap:0}}

.nav-links{display:flex;align-items:center;gap:clamp(10px,1.6vw,26px);font-family:var(--ui);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.nav-links > a,.nav-links > button.navtop{
  text-decoration:none;background:none;border:0;cursor:pointer;color:inherit;font:inherit;letter-spacing:inherit;
  opacity:.82;position:relative;padding:20px 0;transition:opacity .3s var(--ease)
}
.nav-links > a::after,.nav-links > button.navtop::after{content:"";position:absolute;left:0;right:0;bottom:16px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .42s var(--ease)}
.nav-links > a:hover,.nav-links > button.navtop:hover{opacity:1}
.nav-links > a:hover::after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;gap:10px}
@media (max-width:980px){.nav-links{display:none}}

.iconbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;background:none;border:0;
  cursor:pointer;color:inherit;padding:9px;border-radius:2px;position:relative;min-width:44px;min-height:44px;
}
.iconbtn svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.4;fill:none}
.cartcount{position:absolute;top:4px;right:2px;background:var(--accent);color:#F4F1EC;font-family:var(--ui);min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;font-variant-numeric:tabular-nums;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
.cartcount[data-zero="true"]{display:none}

/* ---- MOTION THAT ANSWERS AN ACTION ----------------------------------------
   Movement here is never decoration. Each of these fires only because the
   customer did something, and each answers the one question they are asking at
   that moment: "did that work?". A shop that stays perfectly still after a tap
   feels broken, and the customer taps again or leaves.
   Everything below is switched off under prefers-reduced-motion by the global
   rule further down the file. */

/* the bag icon takes the hit and the count lands after it — the eye follows
   the movement up to the header and finds the new number already there */
.iconbtn.bump svg{animation:bagbump .52s var(--ease-soft)}
@keyframes bagbump{
  0%{transform:translateY(0) scale(1)}
  28%{transform:translateY(-4px) scale(1.1)}
  55%{transform:translateY(1px) scale(.97)}
  100%{transform:translateY(0) scale(1)}
}
.cartcount{transition:transform .34s var(--ease-soft)}
.iconbtn.bump .cartcount{animation:countpop .46s var(--ease-soft) .1s}
@keyframes countpop{
  0%{transform:scale(.4);opacity:.2}
  60%{transform:scale(1.28);opacity:1}
  100%{transform:scale(1);opacity:1}
}

/* a favourite is a small private yes; it should feel like one */
.fav.pop svg{animation:favpop .44s var(--ease-soft)}
@keyframes favpop{
  0%{transform:scale(1)}
  35%{transform:scale(1.32)}
  62%{transform:scale(.92)}
  100%{transform:scale(1)}
}

/* Kutulu TR|EN kaldırıldı (sahip, 15 Eylül 2026): üst çubukta kutusuz
   "TR ▾"; ok aşağı açılan bir dil listesi açar. Çekmecedeki seçici (.langs)
   kendi hap görünümünü .dr-foot kurallarından alır. */
.langdrop{position:relative;display:flex;align-items:center}
.langdrop-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;padding:8px 6px;min-height:44px;font-family:var(--ui);color:var(--ink);transition:opacity .3s var(--ease);font-size:var(--t-button-size);font-weight:var(--t-button-weight);letter-spacing:var(--t-button-ls)}
.langdrop-btn:hover{opacity:.7}
.langdrop-caret{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-commerce) var(--ease)}
.langdrop-btn[aria-expanded="true"] .langdrop-caret{transform:rotate(180deg)}
.langdrop-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:80;min-width:156px;margin:0;padding:6px;
  list-style:none;background:var(--canvas);border:1px solid var(--line);border-radius:6px;
  box-shadow:0 14px 34px rgba(27,26,24,.10)}
.langdrop-menu button{display:flex;align-items:center;gap:12px;width:100%;min-height:40px;padding:9px 12px;background:none;border:0;border-radius:4px;cursor:pointer;text-align:left;font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-button-size);font-weight:var(--t-button-weight);letter-spacing:var(--t-button-ls)}
.langdrop-menu button:hover,.langdrop-menu button:focus-visible{background:var(--chalk);color:var(--ink)}
.langdrop-menu .ld-code{width:22px;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.langdrop-menu button[aria-checked="true"]{color:var(--ink)}
.langdrop-menu button[aria-checked="true"]::after{content:"";margin-left:auto;width:6px;height:6px;
  border-radius:50%;background:var(--ink)}
@media (prefers-reduced-motion:reduce){.langdrop-caret{transition:none}}
.langs{display:flex;align-items:center;gap:1px}
.langs button{background:none;border:0;cursor:pointer;padding:8px 9px;font-family:var(--ui);min-height:44px;font-size:var(--t-button-size);font-weight:var(--t-button-weight);letter-spacing:var(--t-button-ls)}
/* the mobile sheet carries its own language control (#langsMobile), so the
   top-bar switcher steps aside on narrow screens rather than crowding the
   search/cart/menu icons into a 375px row */
@media (max-width:560px){ .nav-right > .langdrop{display:none} }

/* ============================================================
   Shop menu: a full-screen immersive takeover, not a dropdown
   panel, per visual-direction.md §6. The real nav bar stays
   visible above it (z-index) so search, cart, and closing the
   menu are always reachable.
   ============================================================ */
.megawrap{position:static}
.mega{
  position:fixed;inset:0;z-index:140;background:var(--canvas);overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-14px);
  transition:opacity .38s var(--ease),transform .38s var(--ease),visibility .38s;
}
.mega.open{opacity:1;visibility:visible;transform:none}
.mega-wrap{max-width:var(--maxw);margin:0 auto;padding:calc(var(--navh) + 64px) var(--gut) 64px;
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(32px,5vw,80px)}
.mega h4{font-family:var(--ui);color:var(--text-secondary);margin-bottom:20px;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.mega-cats{display:flex;flex-direction:column;gap:2px}
/* category links carry the largest sans weight on the site: still the "wow" surface
   of the navigation, but contemporary retail scale, not editorial serif (redesign brief) */
/* NOTE: .mega a below sets .98rem at the same specificity and later in the file,
   which silently flattened this to body size — the full-screen takeover was
   rendering as a small dropdown list. Scoped tighter so the intent survives. */
.mega .mega-cats a{font-family:var(--ui);text-decoration:none;display:block;padding:10px 0;opacity:.92;transition:opacity var(--dur-commerce) var(--ease),color var(--dur-commerce) var(--ease);font-size:var(--t-h1-size);font-weight:var(--t-h1-weight);letter-spacing:var(--t-h1-ls);line-height:var(--t-h1-lh)}
/* color/opacity only: a hover state must never move the clickable target itself */
.mega .mega-cats a:hover{opacity:1;color:var(--accent)}
.mega a{text-decoration:none;display:block;padding:7px 0;opacity:.85;transition:opacity .2s var(--ease),color .2s var(--ease);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.mega a:hover{opacity:1;color:var(--accent)}
.mega-side a{font-family:var(--ui);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.mega-all{margin-top:14px;font-family:var(--ui);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
/* CODE-07: the six care destinations, offered wherever the customer already is */
.mega-care{display:flex;flex-wrap:wrap;gap:6px 16px}
.mega-care a{font-family:var(--ui);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
@media (max-width:980px){.mega{display:none}}
@media (max-width:640px){.mega-wrap{grid-template-columns:1fr}}
body.mega-open{overflow:hidden}

/* mobile nav sheet */
.mobilenav-btn{display:none}
@media (max-width:980px){
  .mobilenav-btn{display:inline-flex}
  .mega{display:none !important}
}
.mnav-scrim{position:fixed;inset:0;z-index:195;background:rgba(9,13,10,.5);opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),visibility .4s}
.mnav-scrim.open{opacity:1;visibility:visible}
.mnav{position:fixed;top:0;right:0;bottom:0;z-index:200;width:min(360px,88vw);background:var(--canvas);
  transform:translateX(101%);transition:transform .45s var(--ease);display:flex;flex-direction:column;
  border-left:1px solid var(--line)}
.mnav.open{transform:none}
.mnav header{display:flex;align-items:center;justify-content:space-between;padding:16px var(--gut);
  border-bottom:1px solid var(--line)}
.mnav .body{flex:1;overflow-y:auto;padding:8px var(--gut) 24px}
.mnav h4{font-family:var(--ui);color:var(--text-secondary);margin:22px 0 10px;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
/* legacy .mnav a rule removed: it out-specified the CODE-10 drawer classes */
.mnav .chips{display:flex;flex-wrap:wrap;gap:8px}
.mnav .chips a{border:1px solid var(--line-strong);border-radius:20px;padding:8px 14px;font-family:var(--ui);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}

/* ============================================================
   Buttons, chips
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;/* 30 Eylül 2026 (marka dili turu): --fs-btn, 600, büyük harf yok, harf aralığı 0,
     en az 44 px yükseklik, tek satır. Önceden 11-14 px, BÜYÜK HARF, .1em aralıklıydı. */
  font-family:var(--ui);text-transform:none;min-height:46px;white-space:nowrap;/* KENARLAR YUVARLAK. Sahibin isteği: "butonların kenarlarını yuvarlak
     yaparak tüm butonlar öyle olsun, feminen hale getir." 999px hap biçimi,
     boy ne olursa olsun aynı yumuşaklığı verir — sabit bir px değeri küçük
     ve büyük butonda iki farklı karakter üretirdi. */
  padding:15px 26px;border-radius:999px;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background .38s var(--ease),color .38s var(--ease),border-color .38s var(--ease),transform .38s var(--ease);font-size:var(--t-button-size);font-weight:var(--t-button-weight);letter-spacing:var(--t-button-ls);line-height:var(--t-button-lh)}
/* PRIMARY = BUZ MAVİSİ. Yukarıdaki eski not "onaylanmış bir ERATOS marka
   kararı olmadığı için" mürekkep kullanıyordu; o karar 9 Eylül 2026'da
   sahibi tarafından verildi, gerekçe ortadan kalktı.
   Metin koyu mürekkep: açık zemine beyaz yazı okunmaz. */
.btn-primary{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)}
.btn-primary:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
/* İKİNCİL = SÜT + ÇİZGİ + MÜREKKEP (30 Eylül 2026). Buz mavisi (--btn-bg) yalnız
   birincil eylemde: Sepete ekle, Ödemeye geç, bülten kaydı, hero'nun ana butonu.
   "Ürünü incele", "İsme özel setler →", gezinme ve sorgu butonları ikincildir. */
.btn-ghost{background:var(--milk);border-color:var(--line-strong);color:var(--ink)}
.btn-lg{padding:16px 32px}
.btn-sm{padding:9px 16px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none !important}
/* Bir sayfada yuvarlak ve köşeli butonlar bir arada durursa yuvarlaklık
   kaza gibi görünür. Kart üstündeki hızlı ekleme, sepetteki adet düğmeleri
   ve seçim kutusu da aynı dile geçer. */
/* Bir sayfada yuvarlak ve köşeli butonlar bir arada durursa yuvarlaklık kaza
   gibi görünür. Kart üstündeki hızlı ekleme, sepetteki adet düğmeleri ve
   sıralama kutusu da aynı dile geçti — kuralları kendi yerlerinde değişti,
   burada ikinci bir kopya bırakılmadı. */
@media (pointer:coarse){.btn,.iconbtn,.langs button{min-height:44px}}

.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);border-radius:20px;padding:8px 14px;font-family:var(--ui);background:none;cursor:pointer;color:var(--text-primary);transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);font-size:var(--t-button-size);font-weight:var(--t-button-weight);letter-spacing:var(--t-button-ls)}
.chip:hover{border-color:var(--text-primary)}
.chip[aria-pressed="true"]{background:var(--text-primary);color:var(--canvas);border-color:var(--text-primary)}
.sec-ink .chip,.on-ink .chip{color:var(--ink);border-color:var(--line-strong)}
.sec-ink .chip:hover,.on-ink .chip:hover{border-color:var(--ink);background:var(--mineral)}

/* ============================================================
   Hero framework, redesigned. Full-bleed, immersive, still
   structured to receive a real looping cinematic video later (a
   model using a real product, in a premium spa environment)
   without rebuilding: .hero-media holds a dormant <video> plus
   the fallback layer that now carries V1 honestly with REAL
   product photography instead of an abstract gradient — a mosaic
   of actual catalogue images, the only real visual evidence this
   brand has today. Text sits in one reserved safe zone either
   way, so swapping in real footage later is an asset change, not
   a rebuild.
   ============================================================ */
/* THE HERO IS NOW A FULL-BLEED BANNER, not a two-column catalogue row.
   The ritual still-life fills the whole section and the copy sits ON it in the
   calm left third, which is where the banner is deliberately left empty. */
.hero-banner{
  position:relative;min-height:78vh;min-height:78svh;display:flex;align-items:center;
  padding:calc(var(--navh) + 40px) var(--gut) clamp(44px,6vh,76px);
  background:var(--canvas);color:var(--ink);overflow:hidden;isolation:isolate;
}
/* the banner image is the section background layer */
.hero-media{position:absolute;inset:0;z-index:0;order:0;pointer-events:none}
.hero-banner-img{position:absolute;inset:0;display:block}
.hero-banner-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
/* the moving layer sits exactly on the still and is framed identically, so the
   fade-in is invisible: the photograph simply starts breathing */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:right center;opacity:0;transition:opacity 1.4s var(--ease)}
.hero-video.on{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}}
/* (Hero durdur/oynat düğmesinin stilleri 4 Ekim 2026'da sahibin isteğiyle silindi.) */
/* a soft veil so the headline stays readable over the stone without the image
   looking dimmed: opaque on the left, fully clear over the products */
/* PERDE, YAZI SÜTUNUNUN BİTTİĞİ YERE KADAR TUTULUR (20 Eylül 2026).
   Ölçüldü: yazı sütunu hero genişliğinin %5,1–%31,4'ü arasında. Eski gradyan
   %28'de incelmeye başlıyordu, yani son satırların altında perde ~%79'a
   düşüyordu; oradaki en koyu pikselde alt başlık ve değerlendirme satırı
   4,21:1 veriyordu — WCAG 1.4.3 (AA) küçük metin için 4,5:1 ister.
   Tutma noktası artık yüzde değil, yazı sütununun KENDİ ölçüsü:
   calc(var(--gut) + 38ch) — sütunun max-width'i 36ch, yani perde her zaman
   yazının iki karakter ötesinde biter. Yüzdeyle yazıldığında 870 pikselde
   sütun genişliğin %44'üne çıkıyor ve perdenin dışında kalıyordu (ölçüldü:
   alt başlık 3,19). Sağdaki ürün alanının durakları (%52 ve %68) aynı kaldı,
   yani fotoğrafın açık kaldığı yer değişmedi. */
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(250,248,245,.95) 0,
    rgba(250,248,245,.92) calc(var(--gut) + 38ch),
    rgba(250,248,245,.35) 52%,
    rgba(250,248,245,0) 68%)}
/* KIRILMA NOKTASI 760 -> 860 (20 Eylul 2026). Duzen 860 pikselde tek sutuna
   iniyordu ama perde 760 pikselde dikeye geciyordu; aradaki 100 piksellik
   bantta yazi sutunu genisliyor (olculdu: %69) ve fotografin acik kalan
   yerine tasiyordu. Olculen kontrast: baslik 2,17 alt baslik 1,44 kanit 1,89.
   Iki kural artik ayni esikte. */
@media(max-width:860px){
  .hero-banner-img img,.hero-video{object-position:70% center}
  /* on a phone the copy stacks over the image, so the veil has to carry more:
     near-opaque behind the headline and buttons, clearing only at the bottom
     where the still-life is allowed to show. */
  /* PERDE YAZI BLOĞUNUN ALTINA KADAR (20 Eylül 2026). Ölçüldü: 390 pikselde
     değerlendirme satırı hero yüksekliğinin %88,8'inde bitiyor, yani eski
     gradyanın açıldığı %74–%100 bandının tam içinde kalıyordu; oradaki en koyu
     pikselde kontrast 1,54:1 idi. Perde %86'ya kadar taşındı, fotoğraf son
     dilimde yine açılıyor. */
  .hero-media::after{background:linear-gradient(180deg,rgba(250,248,245,.97) 0%,rgba(250,248,245,.95) 66%,rgba(250,248,245,.90) 92%,rgba(250,248,245,.12) 100%)}
}
/* THE INTERIM HERO: exactly ONE vetted real ERATOS object, presented on the plate,
   never a mosaic of marketplace collateral and never a fabricated lifestyle scene.
   The object is selected through assets/image-policy.js, which only admits images
   that pass the automated collateral screen AND human review. If no vetted image
   exists at all, JS drops the media entirely and the hero becomes type-only —
   a confident empty hero rather than a dishonest full one. */
.hero-object{
  display:block;   /* it is an <a>: without this, width:100% does nothing and it collapses */
  position:relative;aspect-ratio:1/1;background:var(--chalk);border-radius:6px;overflow:hidden;
  margin-left:auto;width:100%;max-width:520px;
}
.hero-object img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8%}
/* one restrained light pass across the object: the only atmosphere on the site */
.hero-object::after{
  content:"";position:absolute;inset:-20%;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(42% 38% at 26% 22%,rgba(255,255,255,.85),transparent 66%);
  animation:heroatmos 54s var(--ease-soft) -9s infinite alternate;
}
@keyframes heroatmos{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-2%,1.4%,0) scale(1.05)}}
.hero-banner .inner{position:relative;z-index:2;order:1;max-width:34ch}
@media(min-width:761px){.hero-banner .inner{max-width:36ch}}
/* KONTRAST DÜZELTMESİ (20 Eylül 2026) — WCAG 1.4.3 (AA), EN 301 549 üzerinden
   AB Erişilebilirlik Yasası. --ink-faint (#96928A) hareketli fotoğrafın üstünde
   ölçüldü: en kötü yerde 2,57:1. 10,5 piksel "küçük metin" sayılır, kuralı 4,5:1.
   Aynı paletten bir ton koyusu (--ink-soft, hemen altındaki alt başlığın rengi)
   aynı noktada 5,2:1 veriyor; tipografi ve yerleşim değişmedi. */
.hero-banner .eyebrow{font-family:var(--ui);color:var(--ink-soft);margin-bottom:18px;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
/* CODE-08: reduced from a 4.2rem ceiling — the hero is still the one
   deliberately larger moment on the page, but it no longer reads as a
   fashion-poster headline competing with the product photo beside it. */
.hero-banner h1{font-family:var(--display);color:var(--ink);font-size:var(--t-display-size);font-weight:var(--t-display-weight);letter-spacing:var(--t-display-ls);line-height:var(--t-display-lh)}
.hero-banner p{margin-top:18px;max-width:38ch;color:var(--ink-soft);font-size:var(--t-body-lg-size);font-weight:var(--t-body-lg-weight);letter-spacing:var(--t-body-lg-ls);line-height:var(--t-body-lg-lh)}
.hero-banner .cta-row{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
/* hero ve bantlardaki butonlar temel .btn-primary / .btn-ghost kurallarını kullanır
   (30 Eylül 2026: bölgeye özel renk zorlamaları kaldırıldı). */
/* the hero object's own caption: real name, real price. The hero sells. */
.hero-cap{margin-top:16px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;color:var(--ink-soft);font-family:var(--ui);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.hero-cap .p{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:var(--fw-600)}
.hero-cap a{color:inherit}
@media (max-width:860px){
  .hero-banner{grid-template-columns:1fr;align-items:start;min-height:0;
    padding-top:calc(var(--navh) + 28px)}
  .hero-media{order:2}
  .hero-object{max-height:none;max-width:none;margin:0}
  .hero-banner .inner{order:1;max-width:none}
}
@media (max-width:560px){
  .hero-banner .cta-row{flex-direction:column;align-items:stretch}
  .hero-banner .cta-row .btn{width:auto;max-width:100%}
}

/* ============================================================
   Sections
   ============================================================ */
.sec{position:relative;padding:var(--space-section) var(--gut)}
.wrap{max-width:var(--maxw);margin:0 auto}
/* GENİŞ DÜZEN (2 Ekim 2026, sahip: "tam ekranda sağ ve sol boşluklar akışı bozuyor,
   sayfaya tam doldur"). Liste sayfaları (ana sayfa, mağaza, kategori, bakır) içeriği
   header ile AYNI kenarlara kadar açar; 1320 px sınırı yalnız okuma sayfalarında
   (ürün, sepet, ödeme, yasal) kalır. 1600 px ve üstünde ızgaralar ve raflar 5 sütun:
   yoksa 4 sütunda kart 430 px'e çıkıp ürün fotoğrafı ekranı tek başına dolduruyordu. */
body.genis{--maxw:1800px}
@media (min-width:1600px){
  body.genis .pgrid,body.genis .pgrid.row-4,body.genis .pgrid.tam-4{grid-template-columns:repeat(5,minmax(0,1fr))}
  body.genis .rail-track{grid-auto-columns:calc((100% - 4 * var(--rail-gap)) / 5)}
  body.genis #reels .reel-media{aspect-ratio:1/1}
}
/* Çok satanlar 10 ürün taşır; 4 sütunda 8'i (iki tam satır), 5 sütunda 10'u görünür. */
#bestGrid > .pcard:nth-child(n+9){display:none}
@media (min-width:1600px){ body.genis #bestGrid > .pcard:nth-child(n+9){display:flex} }
.sec-deep{background:var(--chalk)}
.sec-ink{background:var(--chalk);color:var(--ink)}
.sec-ink .kicker{color:var(--ink-faint)}.sec-ink .lede{color:var(--ink-soft)}

.kicker{font-family:var(--ui);color:var(--ink-faint);display:flex;align-items:baseline;gap:12px;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.kicker::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6;flex:none;transform:translateY(-4px)}
/* ÜST ETİKETLER GİZLENDİ (27 Eylül 2026, sahip: "isme özel yazısından önce
   gereksiz silik gri bir yazı var, kişiye özel diye; mağazadaki tüm bu tarz
   gereksiz duran gri yazıları kaldır").

   Tek kural, tek yer: etiketler sayfalarda ve üreticilerde (site.js) hâlâ
   duruyor, yalnız çizilmiyorlar. display:none olduğu için ekran okuyucu da
   okumuyor, yani ziyaretçiye iki kez aynı şey söylenmiyor. Geri istenirse
   bu iki satır silinir, başka hiçbir dosyaya dokunmak gerekmez.

   Kapsam: bölüm başlıklarının üstündeki küçük gri satırların hepsi —
   "KİŞİYE ÖZEL", "DEĞERLENDİRMELER", "BANYO RİTÜELİ" (hero), bakır
   sayfasındaki iki etiket, sepetteki "son bakılanlar", kategori sayfası,
   404 ve ödeme sonucu. Kartların üstündeki 01/02/03 sıra numarası bu
   kuralın dışında: o bir etiket değil, üç videonun sırası. */
.kicker,.hero-banner .eyebrow{display:none}
/* YAYIN ÖNCESİ İBARELERİ KALKTI (29 Eylül 2026). Site canlı ödemeye geçti
   (test_mode 0, Kerem) ve kargo ücreti 59,99 olarak girildi; sipariş alımı
   AÇIK. İki metin bunun tersini söylüyordu: sol alttaki rozet (#protobar,
   "sipariş alımı henüz açık değil") ve her sayfanın altındaki not
   (.protonote, "Sipariş alımı ve ödeme henüz açık değildir"). Gerçek parayla
   çalışan bir mağazada bunları göstermek müşteriyi yanıltır. Markup ve i18n
   anahtarları yerinde duruyor; geri istenirse bu satır silinir. */
#protobar,.protonote{display:none}
/* section headlines: the wide grotesque, tight and large */
h2.big{font-family:var(--display);max-width:19ch;margin-top:14px;font-size:var(--t-h2-size);font-weight:var(--t-h2-weight);letter-spacing:var(--t-h2-ls);line-height:var(--t-h2-lh)}
.lede{margin-top:14px;max-width:54ch;color:var(--ink-soft);font-size:var(--t-body-lg-size);font-weight:var(--t-body-lg-weight);letter-spacing:var(--t-body-lg-ls)}

.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.head-row .btn{flex:none}

/* breadcrumb */
.crumb{font-family:var(--ui);color:var(--text-secondary);display:flex;gap:8px;flex-wrap:wrap;padding:calc(var(--navh) + 22px) var(--gut) 0;max-width:var(--maxw);margin:0 auto;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.crumb a{text-decoration:none;opacity:.8}
.crumb a:hover{opacity:1;color:var(--accent)}
.crumb span{opacity:.5}

/* --- the ledger: the signature element, now specifying materials --- */
/* the ledger keeps mono for its one real measurement (the percentage);
   the row name is UI sans, per the typography brief demoting mono to
   actual numbers rather than the site's general voice */
.ledger{font-family:var(--ui);width:100%;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.ledger .row{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line)}
.ledger .row:last-child{border-bottom:0}
.ledger .nm{}
.ledger .pc{font-family:var(--mono);font-variant-numeric:tabular-nums;opacity:.72}
.ledger .bar{grid-column:1 / -1;height:2px;background:var(--line);position:relative;margin-top:5px;overflow:hidden}
.ledger .bar i{position:absolute;inset:0;background:var(--accent);transform-origin:0 50%;
  transform:scaleX(0);transition:transform 1.05s var(--ease)}
.ledger.in .bar i{transform:scaleX(var(--p,0))}
.sec-ink .ledger .row,.on-ink .ledger .row{border-bottom-color:rgba(233,237,230,.16)}
.sec-ink .ledger .bar,.on-ink .ledger .bar{background:rgba(233,237,230,.16)}
.sec-ink .ledger .bar i,.on-ink .ledger .bar i{background:var(--accent)}

/* ============================================================
   Category tiles (home)
   ============================================================ */
.cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.4vw,18px);margin-top:34px}
@media (max-width:900px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
/* category tiles use the Plate too: brand-safe image only (image-policy.js),
   object contained, label BELOW the plate rather than a scrim over the photo —
   a scrim over a contained object on a light ground reads as a mistake. */
.cat-tile{
  position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;
}
.cat-tile .frame{aspect-ratio:1/1;position:relative;background:transparent;border-radius:5px;overflow:hidden}
.cat-tile .frame svg{position:absolute;inset:36%;width:28%;height:28%;stroke:var(--line-strong);
  fill:none;stroke-width:1.1;color:var(--ink-faint)}
.cat-tile .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:13%;
  transition:transform var(--dur-content) var(--ease)}
.cat-tile:hover .frame img{transform:scale(1.04)}
.cat-tile .lbl{padding:12px 2px 0}
.cat-tile h3{font-family:var(--ui);color:var(--ink);font-size:var(--t-h3-size);font-weight:var(--t-h3-weight);letter-spacing:var(--t-h3-ls);line-height:var(--t-h3-lh)}
.cat-tile .cnt{margin-top:2px;font-family:var(--ui);color:var(--ink-faint);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}

/* ============================================================
   THE GESTURE INDEX — the signature discovery system.
   Eight verbs describing what the hand actually does with the
   object. One of only three petrol moments on the whole site.
   WORKING HYPOTHESIS: mappings live in assets/gesture-map.js
   and are not confirmed brand fact.
   ============================================================ */
.gindex{background:var(--chalk);color:var(--ink)}
.gindex .kicker{color:var(--ink-faint)}
.gindex .kicker::before{background:var(--ink-faint)}
.gindex .lede{color:var(--ink-soft)}
.gverbs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:38px;
  background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden;
}
@media (max-width:860px){.gverbs{grid-template-columns:repeat(2,1fr)}}
.gverb{
  background:var(--milk);color:inherit;text-decoration:none;padding:20px 18px 18px;
  display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;
  transition:background var(--dur-commerce) var(--ease);
}
.gverb:hover,.gverb:focus-visible{background:var(--mineral)}
.gverb .v{font-family:var(--display);font-size:var(--t-h2-size);font-weight:var(--t-h2-weight);letter-spacing:var(--t-h2-ls);line-height:var(--t-h2-lh)}
.gverb .n{font-family:var(--ui);color:var(--ink-faint);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
/* THE STROKE: a hairline that travels the verb's own axis on hover. It moves
   inside the tile only — the tile, the link and the hit target never move. */
.gverb::after{
  content:"";position:absolute;left:18px;right:18px;bottom:12px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:0 50%;transition:transform var(--dur-content) var(--ease);
}
.gverb:hover::after,.gverb:focus-visible::after{transform:scaleX(1)}
/* mobile: the index becomes a thumb-reachable horizontal rail of chips */
.grail{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.grail::-webkit-scrollbar{display:none}
.grail a{flex:none;text-decoration:none}

/* ============================================================
   THE STROKE — the site's one motion signature.
   Content arrives by a directional wipe along an axis, never a
   fade. Utility and commerce UI never use it (see §24 budget).
   ============================================================ */
/* THE STROKE is deliberately NOT implemented as a scroll-triggered clip that
   hides content until an observer fires. That pattern was built and then
   removed here on purpose: if the observer does not fire — reduced motion, a
   restored scroll position, a pane that does not scroll, a JS error earlier on
   the page — the section stays clipped to zero width and the customer sees a
   large blank band. Content must never depend on an animation to be visible.

   The stroke survives where it cannot hide anything: as the directional
   hairline that travels the verb's own axis on .gverb hover, and as the light
   sweep across real material photography on .matcard hover. Both are additive.
   .stroke / .stroke-up remain as inert hooks for a future pass that can
   animate opacity or transform (which degrade safely) instead of clipping. */
.stroke,.stroke-up{clip-path:none}

/* ============================================================
   PERSONAL, BY ERATOS — the personalization commerce moment.
   Built only on products the catalogue actually proves support
   engraving ("İsme Özel (LAZER MARKALAMA)"). The engraving
   preview is a real live preview of the customer's own input;
   it does NOT claim a typeface, a symbol set, a character limit
   or a placement that ERATOS has not confirmed.
   ============================================================ */
.personal{background:var(--canvas-soft)}
.personal-wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;margin-top:34px}
@media (max-width:860px){.personal-wrap{grid-template-columns:1fr;gap:26px}}
.personal-media{position:relative}
/* Kazima onizlemesinin plakasi seffafti: fotografin kendi acik gri zemini
   krem sayfanin ustunde ayri bir kare olarak duruyordu. Zemin, fotografin
   KENDI kenar tonundan olculdu (#EDEBE9), boylece %11'lik bosluk fotografin
   icine karisiyor ve plaka tek parca okunuyor. Geometriye dokunulmadi:
   object-fit ve padding aynen duruyor, cunku kazinan ismin konumu (§34.6/34.7)
   bu olculere bagli. */
.personal-media .plate{background:#EDEBE9;border-radius:6px}
/* ============================================================
   ANASAYFA KAZIMA ALANI — "çok boş" (sahip, 14 Eylül 2026)

   ÖLÇÜLDÜ: fotoğraf 1:1 ve %11 iç boşluklu; fırça karenin genişliğini
   dolduruyor ama yüksekliğinin yalnız ~%35'ini. Yani plakanın üçte ikisi
   boş gri zemindi.

   ÇÖZÜM, fotoğrafı değiştirmeden ÇERÇEVESİNİ değiştirmek: plaka 3:2 ve
   fotoğraf boşluksuz, cover. Üst ve alttaki boş gri kırpılır (her birinden
   kaynağın 1/6'sı); fırça 1:1 karede aynen kalır ve 1,28 kat büyür.
   Fırçanın dikey sınırı kaynağın %31–%65'i, kırpma %16,7–%83,3'ü tutar —
   üründen tek piksel gitmez.

   KAZIMA KONUMU YENİDEN HESAPLANDI, göz kararı değil. Eski değerler kutu
   koordinatındaydı (fotoğraf %11 boşlukla içeride). Önce fotoğraf
   koordinatına çevrildi: P = (kutu − 11) / 0,78; sonra yeni çerçeveye:
     yatay  : kırpma yok, kutu = P
              sol  (54,7 − 11)/0,78 = 56,03      sağ kenar (82,7 − 11)/0,78 = 91,92
     dikey  : kutu = (P − 16,667) / 0,6667
              merkez (45 − 11)/0,78 = 43,59 → 40,38
              yükseklik 18/0,78 = 23,08 → 34,62
     yazı   : 0,082 plakaya göreydi, fotoğrafa göre 0,082/0,78 = 0,1051
   Ürün sayfası bu kuralların HİÇBİRİNİ almaz (#personal kapsamı);
   orada --engrave-scale tanımsız kalır ve 0,082 aynen geçerlidir.
   ============================================================ */
#personal .personal-wrap{align-items:start}
#personal .personal-media{--engrave-scale:0.1051}
#personal .personal-media .plate{aspect-ratio:3/2;background:#EDEBE9}
#personal .personal-media .plate img{padding:0;object-fit:cover;object-position:center}
/* dikey merkez ölçülen %46,38'den: (46,38 − 16,667) / 0,6667 = %44,57 */
#personal .personal-media .engrave{left:56.03%;right:8.08%;top:44.57%;height:34.62%}
/* TARAKLI KARE (2'li set, 19 Eylül 2026). Kare 1600x1200: fırça fotoğrafının y=400'den
   itibaren 4:3 kırpımı + altına ağaç bebek tarağı. Konumlar ölçüldü, göz kararı değil:
   fırça  — merkez fotoğrafta y=742 → (742−400)/1200 = %28,51; yükseklik 369/1200 = %30,78;
            yatay kırpma yok, sol/sağ aynı (%56,03 / %8,08).
   tarak  — 20 Eylül 2026: ilan fotoğrafından (set1) kesilen GERÇEK tarak; önceki
            kaynak hem turuncuydu hem 1,98 orana basıktı. Kesim 860x480, yani ilan
            panosundaki 9x5 cm'in tam oranı; karede x=370, y=688. Üretimi:
            tools/tarak-kare.sh. Sırt bandı KOYULUKLA ölçüldü (yarıkların üstü fotoğrafta
            gölgeli ahşap tonunda, saydam değil): ahşabın tepesi x=300'de y=25, yarıkların
            en yükseği x=500 dolayında y=121. Bant yerel x 300–700, y 33–111 (üstte 8,
            altta 10 piksel pay) → karede x 670–1070, merkez y 760
            → %41,88 / %33,13 / %63,33 / %6,50.
   Yazı ölçeği aynı (%10,51): fotoğraf yine plakanın genişliğini dolduruyor.

   21 EYLÜL 2026 — KARE DEĞİŞTİ, KUTULAR YENİDEN ÖLÇÜLDÜ. Yukarıdaki birleştirme
   kare kalktı; yerine sahibin gönderdiği 1448x1086 (4:3) fotoğraf geldi — fırça ve
   tarak aynı çekimde, tarak DÜZ. Eski tarak 13,02° eğikti (diş uçları çizgisi,
   29 noktada en büyük sapma 2,8 px); sahip: "alttaki tarak yamuk görünüyor".
   Ölçüm yöntemi: ahşap maskesi (R−B>75 ve R−G>38 — köşelerdeki keten ≤36, örgü
   kumaş 60 olduğu için eşik bunların üstünde), fırçanın/tarağın üstündeki bir
   noktadan taşırılarak doldurulan BAĞLANTILI bileşen (kumaş fırçaya değmediği
   için kendiliğinden dışarıda kalır). Aynı yöntem eski karede de çalıştırıldı ve
   eski kutuların yerini doğruladı (baş merkezi 332,4 ↔ kutu merkezi 342,1).
   fırça — kutu, sahibin onayladığı eski yerleşimin ORANLARIYLA taşındı; ölçüt
            baş açıklığı (boyun → sağ uç) ve başın kalınlığı:
              eski: boyun 537, sağ 1519, baş merkezi 332,4, kalınlık 465
                    → sol boyundan %36,6; sağ uca %4,9 pay; merkez +%2,1; yük. %79,4
              yeni: boyun 533, sağ 1287, baş merkezi 350,8, kalınlık 392
                    → x 809–1250, merkez 359, yükseklik 311
                    → %55,87 / %13,68 / %33,06 / %28,67
   tarak  — sırt bandı ~110 px kalınlığında, kemer boyunca SABİT; üst kenardaki
            açık parlama çizgisi ahşap sayılmadığı için kök taraması kenarın 20 px
            içinden başladı. Kutu eskisi gibi kanvasın %25'i genişlikte, tarağın
            merkezine (x=726) ortalı → x 545–907. Yatay kutu kavisli bandın içinde
            kalmalı: bu aralıkta en alçak tepe 614, en yüksek kök 696; paylar eskisi
            gibi 8/10 px (1448/1600 ile ölçeklendi) → y 621,2–687,0, merkez 654,1
            → %37,64 / %37,36 / %60,23 / %6,05. Eskisi (41,88/33,13) tarak eğik
            olduğu için yamuktu; bu simetrik. */
#personal .personal-media.tarakli .plate{aspect-ratio:4/3}
#personal .personal-media.tarakli .engrave{left:55.87%;right:13.68%;top:33.06%;height:28.67%}
#personal .personal-media.tarakli .engrave-tarak{left:37.64%;right:37.36%;top:60.23%;height:6.05%}

/* yan sütun: fotoğrafın altındaki boşluğu doğrulanmış bilgiyle doldurur */
.personal-left{display:flex;flex-direction:column;gap:18px;min-width:0}
.personal-aside{display:flex;flex-direction:column;gap:14px}
.personal-aside .tyr{margin-top:0;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.personal-aside .tyr-n{font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.personal-facts{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;
}
.personal-facts li{font-family:var(--ui);color:var(--ink);padding:6px 12px;border:1px solid var(--line-strong);border-radius:999px;background:var(--milk);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.personal-others{padding-top:14px;border-top:1px solid var(--line)}
.personal-others-h{margin:0 0 10px;font-family:var(--ui);color:var(--ink);font-size:var(--t-h3-size);font-weight:var(--t-h3-weight);letter-spacing:var(--t-h3-ls);line-height:var(--t-h3-lh)}
.personal-others-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.personal-other{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;min-width:0}
.personal-other-img{
  aspect-ratio:1/1;border-radius:4px;overflow:hidden;position:relative;background:transparent;display:block;
}
.personal-other-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8%;
  transition:transform var(--dur-content) var(--ease)}
.personal-other:hover .personal-other-img img{transform:scale(1.05)}
.personal-other-n{font-family:var(--ui);color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
.personal-seeall{display:inline-block;margin-top:12px;font-family:var(--ui);color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.personal-seeall:hover{text-decoration-thickness:2px}
/* the live engraving preview: sits over the plate, in the lower third, where the
   real laser mark sits on the real product */
/* The engraving preview sits ON the oval head of the brush.
   MEASURED against assets/banners/personalize-base.jpg (1400x1400), not
   guessed — the old numbers put the name across the handle, which is why the
   owner saw it as crooked. Method: mask the beech by warmth and lightness
   (R-B > 58 AND R > 185, which separates it from both the cream knit and the
   darker bristles), then take the longest CONTIGUOUS wood run per column so
   warm patches in the blanket cannot widen the result. That gives:
     - the oval's flat face spans x 730-1080, its centre 64.6% across, 48.2% down
     - the face is 25% of the image wide; the text box takes 80% of that, so
       the name never runs to the edge of the wood
     - the brush's long axis rises to the right at 4 degrees
   The rotation follows that axis, which is also the axis ERATOS lasers along,
   left to right, handle first.
   If the base image is ever replaced, re-measure. Do not nudge these by eye. */
/* The box is the OVAL BACK OF THE BRUSH HEAD in personalize-base.jpg.

   The old base photo had the brush lying at an angle on a knitted throw, so
   both the tilt and the centre of the oval had to be GUESSED, and every guess
   was slightly off — the name drifted onto the knit and the symbol overhung
   the rim. The base photo is now a level, dead-on shot on a plain ground, so
   the oval is measured instead: the head runs 53.3%–86.9% across and its
   centre sits at 57% down (eratos/tools measurement, not an estimate).

   Measured off the file by isolating the WOOD — warm pixels (R noticeably
   above B, and G below R so pale bristle is excluded too). The contact shadow
   is neutral grey and the bristles are cream, so a plain "not background"
   test counted both as product.

   Corrected 2026-09-08 after drawing the box onto the photograph and LOOKING:
   the earlier scan found only the widest slice of the oval and reported
   59.5%–83.8%, so the box used barely half the face and sat below its centre —
   a small word marooned on a large empty oval. The full head is
   52.5%–91.5% across and 30%–65.8% down, centre 47.9%.

   top + translateY(-50%) anchors the box on the oval's CENTRE rather than its
   top edge, so a symbol set above the name (wings, crown) grows the block
   upwards and downwards evenly instead of pushing the name off the wood. */
/* THE ENGRAVING AREA, measured off the photograph rather than guessed.
   The wooden paddle in assets/banners/personalize-base.jpg occupies
   x 56.5%-89.3% and y 30%-60% of the frame (measured by sampling the image
   on a canvas: warm, bright pixels only, so the contact shadow and the
   bristles are excluded). The box below sits inside that with a margin, and
   its centre (73% / 45%) is the paddle's own centre (72.9% / 45.0%).

   It now has a real HEIGHT and centres its content, for two reasons: the fit
   can finally check whether the group is too TALL for the wood — a name with
   the wings above it used to grow past the paddle with nothing noticing —
   and a symbol above the name grows the block evenly instead of pushing the
   name downwards off centre. */
.engrave{
  /* DÜZELTME (10 Eylül 2026): kutu %4,3 sağdaydı. Önceki ölçüm küreği
     "dikey ahşabı uzun olan sütunlar" diye bulmuştu ve boynu da küreğe
     katıyordu. Doğru yöntem: boynun en dar noktasını bul (x=564), ondan
     sağdaki ahşabı ahşap yüksekliğine göre ağırlıklandırıp merkezini al.
     Sonuç %68,7 / %45,1 — sahibin "geniş kısma ortala" dediği yer. */
  /* DİKEY DÜZELTME (14 Eylül 2026, sahip: "isim fırçanın üst kısmında
     kalıyor"). Yatay ölçüm doğruydu, dikey değildi: %45 kutu koordinatı
     fotoğrafta %43,6'ya denk geliyordu. Fırça başının dikey merkezi
     personalize-base.jpg üzerinde ÖLÇÜLDÜ — ahşap maskesi, boyundan sağdaki
     alanın ağırlık merkezi %46,32, en geniş sütunun ortası %46,44 → %46,38.
     Kutuya çevrildi: 11 + 0,78 × 46,38 = %47,18. İkinci kaynak (Gabriola
     harflerinin satır kutusunda yukarıda durması) fitEngraving() adım 4'te. */
  position:absolute;left:54.7%;right:17.3%;top:47.18%;height:18%;z-index:2;
  display:flex;align-items:center;justify-content:center;
  text-align:center;pointer-events:none;
  transform:translateY(-50%);transform-origin:center center;
}
.engrave .val{
  /* Gabriola is the face ERATOS actually lasers, so the preview uses it and
     offers no alternative — the customer does not pick a typeface. It ships
     with Windows and is NOT present on macOS, iOS or Android, where the stack
     below falls back to another script face. Embedding Gabriola as a webfont
     would make it correct everywhere but needs a licence check first; see
     font.webfontPending in engrave-options.json. */
  font-family:Gabriola,"Brush Script MT","Segoe Script",var(--display),cursive;
  font-weight:500;font-size:clamp(.78125rem,1.6vw,1.15rem);
  /* TEK MÜREKKEP RENGİ (21 Eylül 2026, sahip: "semboller çok belirgin fakat
     isimler silik duruyor"). İsim #6B5138 idi ve ağacın üstünde soluk
     kalıyordu; sembol siyahtı. İkisi artık aynı koyu, yanık kahverengide:
     sembol bu rengi currentColor ile alır (aşağıda .sym.tint), ayrı tanımı yok.
     İnce el yazısı çizgileri dolu bir sembolün yanında zayıf kalmasın diye
     harflere çok ince bir kontur eklenir (yalnız görünümü kalınlaştırır). */
  letter-spacing:.01em;color:#4A3322;opacity:.92;
  -webkit-text-stroke:.012em currentColor;
  min-height:1.1em;line-height:1.1;
  white-space:nowrap;
  /* No ellipsis: a customer's own name must never be shown chopped. A long
     name is scaled down onto the wood instead — see fitEngraving(). */
  transform-origin:center center;
  text-shadow:0 1px 0 rgba(255,255,255,.26);
  transition:opacity var(--dur-commerce) var(--ease);
}
.engrave .val:empty{opacity:0}
/* the hint belongs under the whole plate, never across the product */
.engrave .hint{
  position:absolute;left:-64%;right:-13%;top:calc(100% + 38px);
  font-family:var(--ui);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);
  color:var(--ink-faint);
}
.engrave .val:not(:empty) + .hint{opacity:0}
/* THE SIX ENGRAVING SYMBOLS.
   Laid out as a radio group, because it is one choice and the customer must
   see all six at once — a dropdown would hide the very thing that makes this
   product worth paying for. 'No symbol' is a button of its own rather than an
   absence, so choosing nothing is an explicit decision the customer can see
   they made. */
.symrow{display:flex;flex-direction:column;gap:9px}
.symlbl{font-family:var(--ui);color:var(--ink-faint);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.symopts{display:flex;flex-wrap:wrap;gap:10px}
.symsel{margin:0;min-height:1.4em;font-family:var(--ui);font-size:var(--t-small-size);font-weight:var(--fw-500);color:var(--ink)}
.symopts .sym{
  position:relative;width:48px;height:48px;padding:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--milk);border:1px solid var(--line);border-radius:999px;
  transition:border-color var(--dur-commerce) var(--ease),background var(--dur-commerce) var(--ease),
             transform var(--dur-commerce) var(--ease);
}
.symopts .sym img{width:100%;height:100%;object-fit:contain;opacity:.8;transform-origin:center;
  transition:opacity var(--dur-commerce) var(--ease)}
/* "no symbol" was an empty-looking box with a dash in it, which read as a
   missing icon rather than a deliberate choice. A slashed circle says
   "deliberately nothing" the way a dash cannot. */
.symopts .sym .none{
  display:block;width:17px;height:17px;border-radius:50%;
  border:1px solid var(--ink-faint);position:relative;font-size:0;line-height:0;
}
.symopts .sym .none::after{
  content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;
  background:var(--ink-faint);transform:rotate(45deg);
}
.symopts .sym.is-on .none{border-color:var(--ink)}
.symopts .sym.is-on .none::after{background:var(--ink)}
.symopts .sym:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.symopts .sym:hover img{opacity:1}
.symopts .sym:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* ad: üzerine gelince ve klavyeyle odakta (dokunmatikte "Seçili: …" satırı) */
.symopts .sym[data-name]:hover::after,.symopts .sym[data-name]:focus-visible::after{
  content:attr(data-name);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);
  white-space:nowrap;padding:5px 10px;border-radius:8px;background:var(--btn-bg);color:var(--btn-ink);
  font-family:var(--ui);font-size:var(--t-small-size);font-weight:var(--fw-500);pointer-events:none;z-index:5}
.symopts .sym.is-on{border-color:var(--ink);background:var(--mineral)}
.symopts .sym.is-on img{opacity:1}
.symopts .sym.is-on .none{color:var(--ink)}
/* screen-reader label: the icon alone is not a name */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* the preview line: name, then the symbol after it, exactly as it is lasered */
/* The preview mirrors how the piece is actually engraved: the wings and the
   crown sit ABOVE the name, the heart, butterfly, moon and star sit to its
   RIGHT. Both layouts stay centred on the same point of the oval, so switching
   symbol never shifts the name off the wood. */
/* gap is 0 here on purpose: fitEngraving() sets the real ink-to-ink distance
   as a margin on the symbol, after subtracting that file's own transparent
   border. A CSS gap on top would put the empty air straight back. */
.engrave .val{display:flex;align-items:center;justify-content:center;gap:0}
.engrave .val.sym-right{flex-direction:row}
.engrave .val.sym-above{flex-direction:column-reverse;gap:0}
/* SYMBOL SIZE IS NORMALISED BY INK, NOT BY BOX.

   Every symbol file is 512x512, but the MARK inside occupies a different share
   of that square in each one. Measured from the files themselves:

       kanat 35.4%   taç 55.7%   kelebek 58.0%   (taç 21 Eylül 2026 yenilendi: sahibin temiz dosyası)
       yıldız 81.4%   ay 83.8%   kalp 84.0%

   One shared box height therefore drew the heart 2.4x larger than the wings.
   The old rule did exactly that (1.05em for everything) and then patched the
   worst case by hand — kanat at 1.45em — which fixed one symbol and left the
   cause in place. That is why the heart looked oversized next to a name.

   The name's own ink measures 0.58-0.68 of the font size in Gabriola
   ("Kerem" 0.58, "kerem" 0.68). So every symbol is now sized to land on the
   SAME ink height, 0.58em, and each box height is simply 0.58 divided by that
   file's measured ink share. The ink sits dead-centre in all six files
   (measured 0.494-0.499), so no vertical nudge is needed.

   If a symbol file is ever re-exported, re-measure it and update its line —
   the number here is a fact about the file, not a taste setting. */
.engrave .val .sym{width:auto;opacity:.9;height:1em;position:relative}
/* seçilmemiş sembol yer kaplamaz (src boş GIF, bkz. BOS_GORSEL) */
.engrave .val .sym[hidden]{display:none}
/* Sembolün kendi siyah pikselleri gösterilmez: dosya maske olur, içini ismin
   rengi doldurur (engraveSymSet, site.js). object-position asıl resmi kutunun
   dışına iter; resim kutusu içeriğini kırptığı için geriye yalnız maskeyle
   şekillenmiş renk kalır. Opaklık da ismin opaklığıyla aynı: ikisi tek ton. */
.engrave .val .sym.tint{
  opacity:1;background-color:currentColor;object-position:-99999px 0;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.engrave .val .sym[src*="1-kanat"]  {height:1.64em}
.engrave .val .sym[src*="2-kalp"]   {height:.69em}
.engrave .val .sym[src*="3-kelebek"]{height:1.00em}
.engrave .val .sym[src*="4-ay"]     {height:.69em}
.engrave .val .sym[src*="5-tac"]    {height:1.04em}
.engrave .val .sym[src*="6-yildiz"] {height:.54em}   /* 0,44 / 0,814 (22 Eylül 2026: yıldız küçüldü) */
/* Above the name it reads as a small crest, tucked close so the pair still
   sits on the oval as one mark rather than two stacked things. Same ink
   normalisation, one step smaller: 0.50em of ink instead of 0.58em. */
.engrave .val.sym-above .sym[src*="1-kanat"]  {height:1.41em}
.engrave .val.sym-above .sym[src*="2-kalp"]   {height:.60em}
.engrave .val.sym-above .sym[src*="3-kelebek"]{height:.86em}
.engrave .val.sym-above .sym[src*="4-ay"]     {height:.60em}
.engrave .val.sym-above .sym[src*="5-tac"]    {height:.90em}
.engrave .val.sym-above .sym[src*="6-yildiz"] {height:.61em}

/* ---- CART: a personalized line must announce itself ---- */
.personalized{
  margin-top:6px;padding:6px 8px;border-radius:3px;
  background:var(--milk);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:2px;
}
.personalized .pz-head{display:flex;align-items:center;gap:5px;font-family:var(--ui);color:var(--ink);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.personalized .pz-head svg{flex:0 0 auto;color:var(--ink)}
.personalized .pz-row{font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.personalized .pz-row b{color:var(--ink);font-weight:var(--fw-600)}
.personal-form{display:flex;flex-direction:column;gap:14px;max-width:44ch}
.personal-form label{font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.personal-form input[type="text"]{font-family:var(--ui);padding:14px 16px;border:1px solid var(--line-strong);border-radius:3px;background:var(--canvas);color:var(--ink);width:100%;transition:border-color var(--dur-utility) var(--ease);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.personal-form input[type="text"]:focus{outline:none;border-color:var(--ink)}
/* an empty name is refused on Add to Cart rather than silently creating an
   unlabeled engraving order — a brief shake calls attention to the field
   without blocking the page or popping an alert */
.personal-form input[type="text"].shake{animation:pshake .4s var(--ease)}
@keyframes pshake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)} 40%{transform:translateX(5px)}
  60%{transform:translateX(-3px)} 80%{transform:translateX(2px)}
}
.personal-form .count{font-family:var(--mono);color:var(--ink-faint);font-variant-numeric:tabular-nums;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
/* ---- KAZIMA ONAYI ----------------------------------------------------
   Yasal olarak zorunlu adım (bkz. site.js personalizeHTML). Sepete ekle
   düğmesinin hemen ÜSTÜNDE duruyor: onay, eylemden önce okunmalı.
   Sessiz bir kutu değil — kenar çizgisi ve zemin onu formun geri kalanından
   ayırıyor, çünkü müşterinin atlamadan okuması gereken tek satır bu. */
.engrave-ok{margin-top:14px;padding:12px 14px;border:1px solid var(--line-strong);
  border-radius:8px;background:var(--milk)}
/* `.personal-form label` alan başlıkları için 10.5px, .16em harf aralıklı ve
   BÜYÜK HARF. "İŞLENECEK İSİM" için doğru, iki satırlık bir hukuki cümle için
   değil: büyük harf okumayı belirgin biçimde yavaşlatır ve bu, sayfadaki
   atlanmaması gereken tek cümle. Üç özellik de burada geri alınıyor. */
.engrave-ok label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-family:var(--ui);color:var(--ink);text-transform:none;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
/* Kutunun kendisi küçülmesin: flex içinde onay kutuları ezilir. */
.engrave-ok input[type="checkbox"]{flex:0 0 auto;width:17px;height:17px;margin-top:1px;
  accent-color:var(--ink);cursor:pointer}
.engrave-ok input[type="checkbox"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.engrave-ok input[type="checkbox"].shake{animation:pshake .4s var(--ease)}
/* Bağlantı etiketin DIŞINDA: içinde olsaydı tıklayınca kutuyu işaretlerdi. */
.engrave-ok-link{display:inline-block;margin-top:8px;margin-left:27px;font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.engrave-ok-link:hover{color:var(--ink)}
/* Dokunma hedefi: telefonda kutu rahat basılabilir olmalı. Etiketin tamamı
   zaten tıklanabilir, ama kutunun kendisi de 44px'lik bir alan kazanıyor. */
@media (pointer:coarse){
  .engrave-ok label{padding:6px 0}
  .engrave-ok input[type="checkbox"]{width:22px;height:22px}
}
/* Hata satırı. Titreme yalnız görsel vurgu; asıl bilgi bu yazı, çünkü
   titremeyi ekran okuyucu okumaz (role="alert" bunu okutuyor). */
.engrave-err{margin-top:10px;font-family:var(--ui);color:var(--hata,#8E2F2F);max-width:46ch;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
.engrave-err[hidden]{display:none}

.personal-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:4px}
.personal-row .price{font-family:var(--ui);font-variant-numeric:tabular-nums;color:var(--ink);font-size:var(--t-price-size);font-weight:var(--t-price-weight);letter-spacing:var(--t-price-ls)}
.personal-note{font-family:var(--ui);color:var(--ink-soft);border-left:2px solid var(--line-strong);padding-left:12px;margin-top:6px;max-width:46ch;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
.personal-note>summary{
  cursor:pointer;list-style:none;color:var(--ink-soft);
}
.personal-note>summary::-webkit-details-marker{display:none}
.personal-note>summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.personal-note-more{
  color:var(--ink);text-decoration:underline;text-underline-offset:2px;white-space:nowrap;
}
.personal-note[open]>summary .personal-note-more{opacity:.5}
.personal-note>p{margin:8px 0 0}
.personal .pname{font-family:var(--ui);color:var(--ink);font-size:var(--t-body-lg-size);font-weight:var(--t-body-lg-weight);letter-spacing:var(--t-body-lg-ls);line-height:var(--t-body-lg-lh)}

/* ============================================================
   Product grid (shared by home, shop, category)
   ============================================================ */
.grid-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:36px 0 22px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.grid-count{font-family:var(--ui);color:var(--text-secondary);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
/* sıralama ikonu (sahip, 19 Eylül 2026): çip filtreleri kalktı, sağda yalnız ikon + "Önerilen" */
.toolbar-controls{display:flex;align-items:center;gap:8px}
.sort-lbl{display:inline-flex;align-items:center;color:var(--ink);cursor:pointer}
.sort-ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.toolbar-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.select{appearance:none;background:var(--canvas);border:1px solid var(--line-strong);border-radius:999px;padding:9px 30px 9px 12px;font-family:var(--ui);cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2359605A' stroke-width='1.2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;background-size:10px 6px;min-height:44px;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.filterbtn{display:none}
.filter-panel{display:flex;gap:28px;flex-wrap:wrap;padding:18px 0 4px}
.filter-group h5{font-family:var(--ui);color:var(--text-secondary);margin-bottom:10px;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.filter-group .chips{display:flex;flex-wrap:wrap;gap:8px;max-width:520px}
/* mobile: the filter panel becomes a bottom sheet, not just a hidden block,
   per the redesign brief's "drawer/bottom sheet, not a dropdown" instruction */
@media (max-width:760px){
  .filterbtn{display:inline-flex}
  .filter-panel{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:220;flex-wrap:nowrap;flex-direction:column;gap:0;
    background:var(--canvas);border-radius:14px 14px 0 0;padding:20px var(--gut) calc(20px + env(safe-area-inset-bottom));
    max-height:76vh;overflow-y:auto;transform:translateY(101%);transition:transform var(--dur-content) var(--ease);
    box-shadow:0 -20px 50px -20px rgba(20,20,17,.35);
  }
  .filter-panel.open{transform:none}
  .filter-panel .filter-group{margin-bottom:22px}
  .filter-sheet-scrim{position:fixed;inset:0;z-index:215;background:rgba(9,13,10,.4);opacity:0;visibility:hidden;
    transition:opacity var(--dur-content) var(--ease),visibility var(--dur-content)}
  .filter-sheet-scrim.open{opacity:1;visibility:visible}
  .filter-sheet-apply{display:block;width:100%}
}
@media (min-width:761px){.filter-sheet-scrim,.filter-sheet-apply{display:none}}

/* stays 2-up down to real phone widths, per the approved commerce brief
   ("desktop 3-4 per row, mobile 2 per row"); a 1-column mobile grid was
   the earlier default and it under-filled the screen */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,20px)}
/* Izgara ogesi icerigi kadar genislemesin (19 Eylul 2026 olculdu): 360 px telefonda iki
   kolon 235+147 px = 382 px'e cikiyor, sag kolon ekrandan tasip kesiliyordu. */
.pgrid>*{min-width:0}
@media (max-width:1080px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.pgrid{grid-template-columns:repeat(2,1fr);gap:10px}}
/* SATIRIN YANINDA BOŞLUK KALMAZ (sahip, 14 Eylül 2026). Anasayfa vitrinleri
   sabit sayıda kart taşır; sütun sayısı o sayıyı her ekranda TAM satıra böler.
   4 kart: 4 sütun ya da 2x2 (eskiden 761-1080px arasında 3+1 kalıyordu).
   6 kart: 3x2 ya da 2x3. */
.pgrid.tam-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.pgrid.tam-4{grid-template-columns:repeat(2,1fr)}}
.pgrid.tam-6{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.pgrid.tam-6{grid-template-columns:repeat(2,1fr)}}

/* .pcard is an <article>, not a link: the add-to-cart button (and the favorite
   heart) must never sit inside the same <a> as the rest of the card (invalid
   HTML, unreliable hit-testing). .pcard-link wraps only the parts that
   navigate; .pfoot and .fav sit outside it as siblings.
   Redesigned per the brief: the product photo dominates, borders are gone,
   the card is closer to plain photography-plus-caption than a boxed template. */
.pcard{
  background:none;border:0;border-radius:0;padding:0;
  display:flex;flex-direction:column;position:relative;
}
.pcard-link{display:flex;flex-direction:column;text-decoration:none;color:inherit}

/* ---------------- THE PLATE ----------------
   The single most important decision in this redesign. ERATOS cannot own its
   photography yet: of 514 real catalogue images, 88 are clean product shots and the
   rest are marketplace collateral in five conflicting aesthetics. So the site owns
   the FRAME instead.

   Every product image sits in an identical square plate, on one continuous mineral
   ground, CONTAINED (object-fit:contain) with generous uniform padding — never
   cropped to fill. Contain is not a compromise here, it is the mechanism: a
   destructive crop of an infographic produces an unreadable fragment, while a
   contained one is simply a small whole picture inside a calm, consistent field.
   Coherence comes from the repetition of the plate, not from the pictures.
   -------------------------------------------- */
/* TABAK ZEMİNİ BEYAZ. 134 kapağın 72’si düz beyaz zeminde kesilmiş ürün;
   tabak bundan bir ton sıcak olduğu için her birinin içinde görünür bir beyaz
   dikdörtgen kalıyordu ve kesimler tabağa yapıştırılmış gibi duruyordu.
   Beyaz zemin o dikişi kapatır; sahne fotoğrafları zaten kareyi doldurduğu
   için onlar bu değişimden etkilenmez. */
/* SADECE ÜRÜN GÖRSELİ, ARKASINDA KATMAN YOK (sahip, 9 Eylül 2026).
   Tabak artık hiçbir şey boyamıyor; ürün doğrudan sayfanın üstünde duruyor.
   Bunun işe yaraması için kapakların kendi beyaz zeminlerinin de saydama
   çevrilmesi gerekti — bkz. tools/kapak-seffaf.ps1. */
/* GERİ ALINDI (14 Eylül 2026, sahip: "ürünler kesik kesik duruyor, normal
   görselleri getir"). 11 Eylül'de plakanın arkasına taş rengi (#CCC5BA)
   konmuştu. Kesim kapakların kenarlarında eski beyaz zemin kalıntıları var
   (topuz fırçasında kumaş parçası, kabak lifinde beyaz dilim); sayfanın açık
   zemininde görünmüyorlardı, taş renginin üstünde ortaya çıktılar. Plaka
   yeniden şeffaf, görseller eski düzeninde. */
.plate{
  aspect-ratio:1/1;position:relative;background:transparent;border-radius:0;
  overflow:hidden;display:block;
}
.plate img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center;
  padding:11%;                       /* the uniform negative space around every object */
  transition:transform var(--dur-content) var(--ease);
  /* ORTALA VE EŞİTLE (21 Eylül 2026): kesim kapakta --kx/--ky/--ks
     plateHTML'den gelir (ölçü: tools/kapak-olcu.mjs); ölçüsü olmayan
     görselde üçü de yoktur ve görsel yerinden oynamaz. */
  transform:translate(var(--kx,0%),var(--ky,0%)) scale(var(--ks,1));
  /* Alt metin (ürün adı) yalnız arama motoru için. Görsel yüklenirken ya da
     yüklenemezse Chrome onu kutu içinde yazı olarak basıyordu; sahip bunu
     kartın üstünde gördü. Görsel etkilenmez, yalnız o yazı görünmez. */
  color:transparent;
}
/* A SCENE photograph owns its square. It used to sit contained inside an 11%
   transparent margin, which printed a hard-edged beige BLOCK on the page ground
   while the cut-out next to it floated on white — one grid, two languages.
   Filling is lossless here: every scene cover is a 1:1 source in a 1:1 plate,
   so cover crops nothing. The photograph's own wall becomes the plate ground,
   and the cut-out beside it stands on the same tone. */
/* .plate.is-scene kuralı geri alındı: sahne fotoğrafları da eski düzeninde */
.plate svg{position:absolute;inset:34%;width:32%;height:32%;color:var(--ink-faint)}
.pcard .frame{margin-bottom:13px}
/* the only hover motion permitted on a card image: a contained scale *inside* the
   plate. The card, the link and the button never move. */
/* KALDIRILDI (21 Eylül 2026, sahip: "ürünü küçültme, büyütme"): üstüne
   gelince görsel %4 büyüyordu. Ürün artık kartında sabit durur. */
.pcard .badge{position:absolute;top:9px;left:9px;z-index:2;background:var(--ink);color:var(--canvas);font-family:var(--ui);text-transform:uppercase;padding:4px 8px;border-radius:2px;font-size:var(--t-label-size);font-weight:var(--t-label-weight);letter-spacing:var(--t-label-ls)}
/* KİŞİSELLEŞTİRİLEBİLİR is the ONLY outlined label in the system. It reads as a
   structural marker rather than a promotional sticker, which is exactly what
   distinguishes a real product capability from a sale badge. */
.pcard .badge.personal{background:transparent;color:var(--ink);border:1px solid var(--ink);padding:3px 7px}
.pcard .fav{
  position:absolute;top:8px;right:8px;z-index:2;width:36px;height:36px;border-radius:50%;
  background:rgba(250,249,246,.86);backdrop-filter:blur(6px);border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  transition:background var(--dur-utility) var(--ease),transform var(--dur-utility) var(--ease);
}
.pcard .fav svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.5;fill:none;
  transition:fill var(--dur-utility) var(--ease),stroke var(--dur-utility) var(--ease)}
.pcard .fav:hover{background:var(--canvas)}
.pcard .fav:active{transform:scale(.92)}
.pcard .fav[aria-pressed="true"] svg{fill:var(--accent-warm);stroke:var(--accent-warm)}
/* the gesture verb replaces the marketplace category label */
.pcard .cat{font-family:var(--ui);color:var(--ink-faint);min-height:14px;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
/* display name: truncated at a real separator (shortName), never with an ellipsis.
   30 Eylül 2026: --fs-product; satır kırpma (line-clamp "…") kaldırıldı — ad tam okunur. */
.pcard h3{font-family:var(--ui);margin-top:4px;color:var(--ink);/* HER ZAMAN İKİ SATIRLIK YER. Bir kartta tek satırlık, yanındakinde iki
     satırlık ad olunca altlarındaki puan ve fiyat satırları farklı
     yüksekliklerde başlıyordu ve sıra dağınık görünüyordu. Yükseklik sabit:
     ad kısa olsa da yerini korur, satır bütün olarak okunur. */
  min-height:calc(2 * 1.32em);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls);line-height:var(--t-body-lh)}
/* the price line is pinned to the bottom of the card, so a row stays aligned
   whether or not a card carries a verified cue line */
.pcard{height:100%}
.pcard .pcard-link{flex:1 1 auto}
.pcard .pfoot{margin-top:auto;padding-top:9px;display:flex;align-items:center;justify-content:space-between;gap:8px 10px;flex-wrap:wrap}
/* price hierarchy: heavier, larger and darker than the name — it must read as price */
.pcard .price{font-family:var(--ui);color:var(--ink);font-variant-numeric:tabular-nums;font-size:var(--t-price-size);font-weight:var(--t-price-weight);letter-spacing:var(--t-price-ls)}
.pcard .price.ph{color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.pcard .add{border:1px solid var(--line-strong);background:var(--milk);border-radius:999px;padding:0 16px;cursor:pointer;font-family:var(--ui);text-transform:none;color:var(--ink);min-height:44px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;transition:background var(--dur-utility) var(--ease),color var(--dur-utility) var(--ease),
             border-color var(--dur-utility) var(--ease);font-size:var(--t-button-size);font-weight:var(--t-button-weight);letter-spacing:var(--t-button-ls)}
/* karttaki ekleme de birincil eylemdir: dolduğunda buz mavisine döner */
.pcard .add:hover{border-color:var(--ink)}
/* personalizable products route to configuration instead of a fake quick-add */
.pcard .add.configure{display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap}
@media (pointer:coarse){.pcard .fav{width:40px;height:40px}}
.pager{display:flex;justify-content:center;gap:8px;margin-top:44px}
.pager button{min-width:40px;height:40px;border:1px solid var(--line-strong);background:none;border-radius:999px;cursor:pointer;font-family:var(--ui);font-size:var(--t-button-size);font-weight:var(--t-button-weight);letter-spacing:var(--t-button-ls)}
.pager button[aria-current="true"]{background:var(--text-primary);color:var(--canvas);border-color:var(--text-primary)}
.empty-state{padding:60px 0;text-align:center;color:var(--text-secondary)}

/* ============================================================
   Product detail page
   ============================================================ */
/* The product's own stated facts, pulled from its ERATOS listing. A definition
   list, because that is what this is: a label and the value the seller
   declared. Rows only exist where the listing states something, so no product
   shows an empty field. */
.specs{display:grid;grid-template-columns:auto 1fr;gap:8px 22px;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--line)}
.specs dt{font-family:var(--ui);color:var(--ink-faint);align-self:center;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.specs dd{margin:0;color:var(--ink);align-self:center;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
@media(max-width:560px){.specs{grid-template-columns:1fr;gap:2px 0}
  .specs dd{margin-bottom:12px}}

/* THE PRODUCT INFORMATION CARD — one box instead of three scattered blocks.
   Bordered and tinted so it reads as a reference panel the customer can come
   back to, not as more body copy. */
.infocard{margin-top:28px;padding:22px 24px;background:var(--milk);
  border:1px solid var(--line);border-radius:5px}
.infocard h2{font-family:var(--ui);color:var(--ink-faint);margin:0 0 14px;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.infocard-lead{margin:0 0 16px;color:var(--ink);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls);line-height:var(--t-body-lh)}
/* sahibin istediği "suya sokulmaz" uyarısı: ikon + yazı, gözden kaçmayacak
   ama alarm vermeyecek bir tonda */
.infocard-warn{display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:10px 14px;border-radius:6px;background:#EEF3F6;color:#23455A;border:1px solid #CFDDE6;font-family:var(--ui);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls);line-height:var(--t-body-lh)}
.infocard-warn .warn-ico{width:22px;height:22px;flex:none;color:#23455A}
/* setin içeriği: sahibin yazdığı dört parça */
.infocard-set{margin:0 0 16px}
.infocard-set h3{margin:0 0 8px;font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.infocard-set ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.infocard-set li{position:relative;padding-left:18px;font-family:var(--ui);color:var(--ink);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls);line-height:var(--t-body-lh)}
.infocard-set li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--ink);opacity:.35}
.infocard-rows{display:grid;gap:0;margin:0}
.infocard-rows > div{display:grid;grid-template-columns:9.5rem 1fr;gap:16px;
  padding:9px 0;border-top:1px solid var(--line)}
.infocard-rows dt{font-family:var(--ui);color:var(--ink-faint);align-self:center;margin:0;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.infocard-rows dd{margin:0;color:var(--ink);align-self:center;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.infocard-care{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
@media(max-width:560px){
  .infocard{padding:18px}
  .infocard-rows > div{grid-template-columns:1fr;gap:2px}
  .infocard-rows dd{margin-bottom:4px}
}
.pdp-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:start}
@media (max-width:860px){.pdp-top{grid-template-columns:1fr}}

/* PERSONALIZABLE PRODUCT: the preview replaces the gallery.
   Two pictures of the same brush competed here — a big one without the
   engraving and a thumbnail with it — so the large image answered nothing and
   the one carrying the actual decision was too small to read. The plain
   gallery is removed on these products and the personalization block takes the
   whole left column, at gallery size. */
/* galeri isme özel üründe de görünür: kapak listedekiyle aynı kalır (14 Eylül 2026) */
/* the preview is lifted out of the block and dropped into the gallery's slot,
   so it gets the full left column at gallery size; the form it came with stays
   on the right beside the name and price, where the buying decisions live */
.pdp-personal-media{position:sticky;top:calc(var(--navh) + 20px);width:100%}
.pdp-personal-media .plate{aspect-ratio:1/1;width:100%;background:transparent;
  border-radius:4px;overflow:hidden;display:block;position:relative}
.pdp-personal-media .plate img{width:100%;height:100%;object-fit:cover;display:block}
body.pdp-personal .personal-wrap{display:block}
.engrave-note{margin:10px 0 18px;font-family:var(--ui);color:var(--ink);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls);line-height:var(--t-body-lh)}
/* MOBILE: sticky is switched off, but NOT with position:static.
   .engrave is absolutely positioned and needs .personal-media to be its
   containing block. position:static removed that, so on every phone the
   engraved name escaped to the nearest positioned ancestor — the section —
   and rendered ~1,480px BELOW the brush, on top of unrelated content. The
   live preview is the whole selling device of the product that is 54% of
   revenue, and it was broken on the screen most customers use.
   position:relative turns sticky off just as well and keeps the anchor. */
@media (max-width:860px){ .pdp-personal-media{position:relative;top:auto} }
.pdp-gallery{position:sticky;top:calc(var(--navh) + 20px)}
@media (max-width:860px){.pdp-gallery{position:static}}
.pdp-gallery .frame{aspect-ratio:1/1;background:transparent;border-radius:4px;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.pdp-gallery .frame svg{width:26%;height:26%;stroke:var(--line-strong);fill:none;stroke-width:1;color:var(--ink-faint)}
.pdp-gallery .frame img{width:100%;height:100%;object-fit:contain;padding:8%}
.pdp-thumbs{display:flex;gap:10px;margin-top:10px}
.pdp-thumbs .frame{width:64px;height:64px;aspect-ratio:auto;border-radius:3px;cursor:pointer;
  padding:0;border:0;outline:2px solid transparent;outline-offset:2px;
  transition:outline-color var(--dur-utility) var(--ease)}
.pdp-thumbs .frame.active{outline-color:var(--ink)}
.pdp-thumbs .frame svg{width:34%;height:34%}
/* İLAN GALERİSİ (29 Eylül 2026): ilan görselleri 1200x1800. Çerçeve aynı
   orana geçer, görsel payısız ve KIRPILMADAN oturur; küçük resimler de dikey.
   Şerit çok görselde yatay kayar, sayfayı genişletmez. */
.pdp-gallery.dikey .frame{aspect-ratio:2/3}
.pdp-gallery.dikey #pdpFrame{max-height:calc(100vh - var(--navh) - 150px)}
.pdp-gallery.dikey #pdpFrame img{padding:0}
.pdp-gallery.dikey .pdp-thumbs{overflow-x:auto;padding:3px 3px 6px;scrollbar-width:thin}
.pdp-gallery.dikey .pdp-thumbs .frame{flex:0 0 auto;width:56px;height:84px;aspect-ratio:auto}
.pdp-gallery.dikey .pdp-thumbs .frame img{padding:0}
.pdp-thumbs .frame img{width:100%;height:100%;object-fit:contain}

.pdp-info .cat{font-family:var(--ui);color:var(--text-secondary);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
/* V3: --display is the same single sans as everything else, never a serif. The product name
   is a display moment because it is the point of decision, not because it is set
   in a "premium" face. */
.pdp-info h1{font-family:var(--display);margin-top:8px;font-size:var(--t-h1-size);font-weight:var(--t-h1-weight);letter-spacing:var(--t-h1-ls);line-height:var(--t-h1-lh)}
.pdp-info .fn{margin-top:10px;color:var(--text-secondary);max-width:44ch}
/* price must read instantly as commerce information */
.pdp-info .price{margin-top:18px;font-family:var(--ui);color:var(--ink);font-variant-numeric:tabular-nums;font-size:var(--t-price-size);font-weight:var(--t-price-weight);letter-spacing:var(--t-price-ls)}
.pdp-info .price.ph{color:var(--text-secondary);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.pdp-info .addrow{margin-top:22px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* CODE-08: a personalizable product hides the top "Sepete Ekle" (the
   personalization block below is its purchase action instead) but keeps the
   favourite heart in the same row. .btn's own display:inline-flex would
   otherwise beat the [hidden] attribute — any author rule always outranks the
   UA default for [hidden], regardless of source order — so this is explicit. */
#pdpAdd[hidden]{display:none}
.pdp-info .addrow .btn{flex:1;min-width:180px}
.pdp-fav{
  width:52px;height:52px;flex:none;border-radius:999px;border:1px solid var(--line-strong);background:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink);
  transition:border-color var(--dur-utility) var(--ease),transform var(--dur-utility) var(--ease);
}
.pdp-fav svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.4;fill:none}
.pdp-fav:hover{border-color:var(--ink)}
.pdp-fav:active{transform:scale(.94)}
.pdp-fav[aria-pressed="true"] svg{fill:var(--accent-warm);stroke:var(--accent-warm)}
.pdp-block{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
/* arama sayfasına iç bağlantı — kişiselleştirme bloğunun son satırı (21 Eylül 2026) */
.pdp-lp{margin:18px 0 0;font-family:var(--ui);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.pdp-lp a{color:var(--ink-soft);text-underline-offset:3px}
.pdp-lp a:hover{color:var(--ink)}
.pdp-block h2{font-family:var(--ui);font-size:var(--t-h3-size);font-weight:var(--t-h3-weight);letter-spacing:var(--t-h3-ls);line-height:var(--t-h3-lh)}
.pdp-block .body{margin-top:14px;color:var(--text-secondary);max-width:56ch}
.pdp-block .ledger{margin-top:16px}
/* ============================================================
   Material stage: the architected container for future material
   interaction (visual-direction.md §12, PDP refinement #2 in the
   approved brief). data-material and data-interaction name which
   real physical behavior belongs here later (bristle -> deform,
   wood -> light-grain, copper -> reflect, silk -> highlight,
   loofah -> depth); __hook is the empty layer future pointer/touch
   code attaches to. Nothing here fabricates physics: it renders as
   a plain static placeholder until real assets exist.
   ============================================================ */
.material-stage{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.material-stage{grid-template-columns:1fr}}
.material-stage__media{
  aspect-ratio:4/3;background:var(--stone);border:1px solid var(--line);border-radius:3px;
  position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.material-stage__media .frame svg{width:22%;stroke:var(--line-strong);fill:none;stroke-width:1.1}
/* the hook layer: empty, inert, on top of the media, ready for a future
   pointermove/touchmove listener keyed off the stage's data-interaction */
.material-stage__hook{position:absolute;inset:0}
.material-stage__cap{align-self:center;color:var(--text-secondary);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.material-stage__cap b{display:block;color:var(--text-primary);margin-bottom:6px;font-family:var(--ui);font-size:var(--t-label-size);font-weight:var(--t-label-weight);letter-spacing:var(--t-label-ls)}

.pdp-mobilebar{display:none}
@media (max-width:860px){
  .pdp-mobilebar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:120;gap:12px;align-items:center;
    padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom));background:var(--canvas);
    border-top:1px solid var(--line);box-shadow:0 -12px 30px -20px rgba(23,28,24,.4);
  }
  .pdp-mobilebar .price{font-family:var(--ui);flex:none;font-size:var(--t-price-size);font-weight:var(--t-price-weight);letter-spacing:var(--t-price-ls)}
  .pdp-mobilebar .btn{flex:1}
  main{padding-bottom:78px}
}

/* --- FAQ + PDP secondary-info accordion (same visual pattern, shared) ---
   CODE-08: secondary PDP information (description, shipping, questions)
   collapses into ONE plain accordion instead of a stack of standalone headed
   sections — nothing before it competes with Add to Cart for attention. */
.faq,.pdp-accordion{border-top:1px solid var(--line-strong)}
.faq details,.pdp-accordion details{border-bottom:1px solid var(--line)}
.faq summary,.pdp-accordion summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;font-family:var(--ui);transition:color .35s var(--ease);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.pdp-accordion > details > summary{font-size:var(--t-body-lg-size);font-weight:var(--t-body-lg-weight);letter-spacing:var(--t-body-lg-ls)}
.faq summary::-webkit-details-marker,.pdp-accordion summary::-webkit-details-marker{display:none}
.faq summary:hover,.pdp-accordion summary:hover{color:var(--accent)}
.faq summary::after,.faq summary::before,.pdp-accordion summary::after,.pdp-accordion summary::before{
  content:"";position:absolute;right:6px;top:50%;
  background:currentColor;transition:transform .45s var(--ease),opacity .45s var(--ease)}
.faq summary::before,.pdp-accordion summary::before{width:14px;height:1px}
.faq summary::after,.pdp-accordion summary::after{width:1px;height:14px;margin-top:-7px;right:12.5px}
/* CHILD combinator, not descendant: .pdp-accordion nests the FAQ's own
   <details> inside its "Sorular" panel, so a plain "details[open] summary"
   descendant match would also catch every nested question's summary the
   instant the outer panel opens, freezing every "+" into a "−" regardless of
   that question's own state. "> summary" scopes the icon to its own toggle. */
.faq details[open] > summary::after,.pdp-accordion details[open] > summary::after{transform:rotate(90deg);opacity:0}
.faq .ans,.pdp-accordion > details > .ans{padding:0 6ch 24px 0;color:var(--text-secondary);max-width:64ch}
.faq details[open] > .ans,.pdp-accordion details[open] > .ans{animation:ansin .5s var(--ease) both}
/* the FAQ items nested inside the accordion's own "Questions" panel reuse the
   same rows but need no second top border, since the accordion already drew one */
.pdp-accordion .faq-inner{border-top:0}
.pdp-accordion .faq-inner .ans{padding:0 6ch 22px 0;color:var(--text-secondary);max-width:60ch}
.pdp-accordion .faq-inner details[open] > .ans{animation:ansin .5s var(--ease) both}
.pdp-accordion .faq-inner details:last-child{border-bottom:0}
@keyframes ansin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ============================================================
   Cart page
   ============================================================ */
.cart-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(30px,4vw,64px);align-items:start}
/* boş sepet: tek sütun, ortalanmış tek blok */
body.cart-is-empty .sec .wrap > h2.big{text-align:center;margin-left:auto;margin-right:auto}
body.cart-is-empty .cart-layout{grid-template-columns:1fr;margin-top:18px !important}
body.cart-is-empty .empty-state{padding:28px 0 40px;margin:0 auto;max-width:36ch}
@media (max-width:860px){.cart-layout{grid-template-columns:1fr}}
.cart-line{display:grid;grid-template-columns:88px 1fr auto;gap:16px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--line)}
.cart-line .frame{width:88px;height:88px;background:transparent;border-radius:4px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.cart-line .frame svg{width:38%;stroke:var(--line-strong);fill:none;stroke-width:1.1;color:var(--ink-faint)}
.cart-line .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:9%}
.cart-line .nm{font-family:var(--ui);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.cart-line .cat{font-family:var(--ui);color:var(--text-secondary);margin-top:3px;font-size:var(--t-label-size);font-weight:var(--t-label-weight);letter-spacing:var(--t-label-ls)}
.cart-line .personalize-tag{text-transform:none;color:var(--ink);margin-top:3px;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.cart-line .qty{display:flex;align-items:center;gap:2px;justify-self:end}
.cart-line .qty button{width:30px;height:30px;border:1px solid var(--line-strong);background:none;cursor:pointer;font-family:var(--ui);border-radius:999px;font-size:var(--t-button-size);font-weight:var(--t-button-weight);letter-spacing:var(--t-button-ls)}
.cart-line .qty span{width:30px;text-align:center;font-family:var(--ui);font-variant-numeric:tabular-nums;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.cart-line .rm{grid-column:2;justify-self:start;margin-top:6px;background:none;border:0;cursor:pointer;font-family:var(--ui);color:var(--text-secondary);text-decoration:underline;padding:2px 0;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.cart-summary{background:var(--stone);border:0;border-radius:6px;padding:26px;position:sticky;top:calc(var(--navh) + 20px)}
.cart-summary .row{display:flex;justify-content:space-between;font-family:var(--ui);padding:8px 0;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.cart-summary .btn{width:100%;margin-top:16px}
.cart-summary .note{margin-top:14px;color:var(--text-secondary);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}

/* ============================================================
   Bag drawer (quick add), and search overlay
   ============================================================ */
.bag-scrim,.search-scrim{position:fixed;inset:0;z-index:210;background:rgba(9,13,10,.5);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
.bag-scrim.open,.search-scrim.open{opacity:1;visibility:visible}
.bag{position:fixed;top:0;right:0;bottom:0;z-index:220;width:min(420px,100%);
  background:var(--canvas);border-left:1px solid var(--line);
  transform:translateX(101%);transition:transform .55s var(--ease);display:flex;flex-direction:column}
.bag.open{transform:none}
.bag header{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px var(--gut) 18px;border-bottom:1px solid var(--line)}
.bag h2{font-family:var(--ui);font-size:var(--t-h3-size);font-weight:var(--t-h3-weight);letter-spacing:var(--t-h3-ls);line-height:var(--t-h3-lh)}
.bag .x{background:none;border:0;cursor:pointer;padding:8px;line-height:0;color:inherit}
.bag .x svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.4}
.bag .items{flex:1;overflow-y:auto;padding:8px var(--gut)}
.bag .empty{padding:44px 0;color:var(--text-secondary);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.bagitem{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--line)}
.bagitem .frame{width:56px;height:56px;background:transparent;border-radius:4px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.bagitem .frame svg{width:36%;stroke:var(--line-strong);fill:none;stroke-width:1.1;color:var(--ink-faint)}
.bagitem .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:9%}
.bagitem .nm{font-family:var(--ui);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.bagitem .sub{font-family:var(--ui);color:var(--text-secondary);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
/* the engraved name travels with its cart line — real order information, not
   a category label, so it gets ink instead of faint uppercase treatment */
.personalize-tag{text-transform:none;color:var(--ink);margin-top:2px;font-weight:var(--fw-500)}
.bagitem .qty{display:flex;align-items:center;gap:2px}
.bagitem .qty button{width:28px;height:28px;border:1px solid var(--line-strong);background:none;cursor:pointer;font-family:var(--ui);border-radius:2px;font-size:var(--t-button-size);font-weight:var(--t-button-weight);letter-spacing:var(--t-button-ls)}
.bagitem .qty span{width:26px;text-align:center;font-family:var(--ui);font-variant-numeric:tabular-nums;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.bag footer{padding:20px var(--gut) calc(20px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.bag .sum{display:flex;justify-content:space-between;margin-bottom:14px;font-family:var(--ui);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.bag .btn{width:100%}
.bag .viewcart{display:block;text-align:center;margin-top:10px;font-family:var(--ui);text-decoration:underline;color:var(--text-secondary);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}

.search-panel{position:fixed;top:0;left:0;right:0;z-index:220;background:var(--canvas);
  transform:translateY(-100%);transition:transform .4s var(--ease);max-height:88vh;display:flex;flex-direction:column}
.search-panel.open{transform:none}
.search-panel .bar{display:flex;align-items:center;gap:14px;padding:18px var(--gut);border-bottom:1px solid var(--line)}
.search-panel input{flex:1;border:0;background:none;font-family:var(--body);color:var(--text-primary);outline:none;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.search-panel input::placeholder{color:var(--text-secondary)}
.search-results{overflow-y:auto;padding:8px var(--gut) 30px;max-width:var(--maxw);width:100%;margin:0 auto}
.search-hit{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;padding:12px 0;border-bottom:1px solid var(--line)}
.search-hit .frame{width:52px;height:52px;background:transparent;border-radius:4px;
  display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden;position:relative}
.search-hit .frame svg{width:34%;stroke:var(--line-strong);fill:none;stroke-width:1.1;color:var(--ink-faint)}
.search-hit div:first-child{font-family:var(--ui);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.search-hit .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:9%}
.search-hit .cat{font-family:var(--ui);color:var(--text-secondary);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
/* İLETİŞİM KANALLARI. Yalnız gerçekten var olan kanal çizilir, o yüzden
   satır bir ile üç kutu arasında değişebilir; grid değil flex. */
.kanal-row{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 6px}
.kanal{display:flex;flex-direction:column;gap:4px;padding:16px 20px;min-width:220px;
  border:1px solid var(--line-strong);border-radius:12px;text-decoration:none;
  transition:border-color .25s var(--ease),background .25s var(--ease)}
a.kanal:hover{border-color:var(--text-primary);background:var(--mineral)}
.kanal-l{font-family:var(--ui);color:var(--text-secondary);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.kanal-v{font-family:var(--ui);color:var(--text-primary);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
/* Dokunma hedefi: telefonda kanal kutusu rahat basılabilir olmalı. */
@media (pointer:coarse){.kanal{min-height:64px;justify-content:center}}

/* HAKKIMIZDA aile listesi. Sayılar katalogdan canlı gelir. */
.hk-aileler{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.hk-aileler li{display:flex;align-items:baseline;gap:8px;padding:8px 14px;
  border:1px solid var(--line);border-radius:20px}
.hk-aileler a{text-decoration:none;color:var(--text-primary);font-family:var(--ui);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.hk-aileler .hk-n{font-family:var(--mono,var(--ui));color:var(--text-secondary);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}

/* FOOTER KÜNYESİ. Her satır kendi satırında durur; unvan uzun olduğu için
   sarmasına izin verilir. Boş alan zaten hiç çizilmediği için burada yer
   tutucu biçimi yoktur. */
.foot-contact{margin-top:10px;display:flex;flex-direction:column;gap:4px}
.foot-contact .fc-line{font-family:var(--ui);color:var(--text-secondary);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
.foot-contact .fc-unvan{display:block;max-width:34ch}
.foot-contact a{color:var(--text-secondary);text-decoration:none;border-bottom:1px solid var(--line)}
.foot-contact a:hover{color:var(--text-primary);border-color:var(--text-primary)}

.search-none{padding:30px 0;color:var(--text-secondary)}
/* Enter'ın gideceği yer, kutunun sonunda görünür bir satır olarak. Klavye
   kullanmayan müşteri de tam listeye ulaşsın diye tıklanabilir. */
.search-all{display:block;padding:16px 0 4px;font-family:var(--ui);color:var(--text-primary);text-decoration:none;border-top:1px solid var(--line);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.search-all:hover{text-decoration:underline}
/* Sonuçsuz arama çıkmaz sokak olmasın: altında gerçek çıkış yolları durur. */
.search-ways{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:20px}
.search-ways-h{flex:0 0 100%;font-family:var(--ui);color:var(--text-secondary);margin-bottom:4px;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.search-ways .chip{text-decoration:none}
/* ?q= sonuç sayfasının başlığı. Yalnız arama hâlinde görünür. */
.search-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding-bottom:16px}
.search-head-t{font-family:var(--ui);color:var(--text-secondary);margin:0;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.search-head-t b{color:var(--text-primary);text-transform:none;margin-left:8px;font-size:var(--t-body-lg-size);font-weight:var(--t-body-lg-weight);letter-spacing:var(--t-body-lg-ls)}
.search-head .chip{text-decoration:none}

/* ============================================================
   Skeleton loading: matches the final image's own reserved
   aspect-ratio box, so nothing shifts layout while photos load
   (redesign brief §23/29). Removed the instant an image paints.
   ============================================================ */
@keyframes skeletonshine{0%{background-position:-140% 0}100%{background-position:240% 0}}
.frame.loading{
  background:linear-gradient(100deg,var(--stone) 40%,#F5F3EE 50%,var(--stone) 60%);
  background-size:250% 100%;animation:skeletonshine 1.6s ease-in-out infinite;
}

/* ============================================================
   THE BANNER SYSTEM — brand moments with human presence.

   ERATOS is a personal-care brand: its products touch skin, hair,
   hands and water, and the site has to show that. These are the
   large photographic slots where product + human + contact +
   movement + light belong. They are NOT product cards, and they
   deliberately do not follow the Plate rules: a banner image
   COVERS its frame (real crop, real composition), while a product
   card CONTAINS its image on a clean ground.

   Rule of thumb encoded here:
     PLP / grids  -> clean isolated product photography (Plate)
     Banners      -> product in use, with a person, cropped and
                     cinematic (this system)

   Every banner carries a shopping exit. Every banner has a
   reserved aspect ratio, so VISUAL-01 photography can be dropped
   into .banner-media without any structural redesign — only the
   src changes.

   .banner.awaiting marks a slot whose FINAL photography does not
   exist yet: it is currently filled with the strongest truthful
   asset available (real product photography), never with
   fabricated lifestyle imagery.
   ============================================================ */
/* ============================================================
   WORKMANSHIP — macro crops of REAL product photography.

   The site was showing clean silhouettes and nothing else, which
   reads as a design-object catalogue rather than a personal-care
   brand. These cells crop deep into real product photographs so
   the bristle density, the surface of the wood, the binding and
   the stitching are actually visible. The customer should be able
   to think "I can almost feel this".

   Honest by construction: this is a genuine crop of a genuine
   photograph — a scale + object-position transform, nothing
   generated, nothing retouched, no material claimed. Each cell
   links to the product it crops, so the moment still sells.

   When VISUAL-01 macro photography arrives it replaces the src
   and the crop transform is simply removed.
   ============================================================ */
.craft-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.1vw,16px);margin-top:30px}
@media (max-width:760px){.craft-grid{grid-template-columns:1fr 1fr}}
.craft-cell{
  position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:5px;
  background:var(--chalk);text-decoration:none;color:inherit;
}
.craft-cell img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* the crop: push deep into the frame so texture, not silhouette, fills the cell */
  transform:scale(2.6);transform-origin:var(--cx,50%) var(--cy,50%);
  transition:transform 1.4s var(--ease-soft);
}
.craft-cell:hover img{transform:scale(2.95)}
.craft-cell .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 14px 12px;background:linear-gradient(0deg,rgba(20,19,17,.72),rgba(20,19,17,0));color:#FBFAF8;font-family:var(--ui);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.craft-cell .cap b{display:block;margin-bottom:2px;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
@media (max-width:760px){.craft-cell:nth-child(3){display:none}}

/* banner sections carry no extra vertical padding: the banner IS the moment */
.banner-sec{padding-top:clamp(10px,1.6vh,22px);padding-bottom:clamp(10px,1.6vh,22px)}
.banner{
  position:relative;display:grid;align-items:center;text-decoration:none;
  border-radius:6px;overflow:hidden;background:var(--chalk);
  min-height:clamp(340px,46vw,560px);
}
.banner-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--mineral)}
.banner-media img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform 1.6s var(--ease-soft);
}
.banner:hover .banner-media img{transform:scale(1.03)}
/* the light pass: a slow warm sweep, the one motion allowed on a banner.
   Golden-hour warmth enters through the IMAGE, never through orange UI. */
.banner-media::after{
  content:"";position:absolute;inset:-20%;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(46% 42% at 24% 20%,rgba(255,255,255,.75),transparent 66%);
  opacity:.55;animation:heroatmos 60s var(--ease-soft) -12s infinite alternate;
}
/* legibility scrim, sized to the text side only so the photograph stays open */
.banner-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(20,19,17,.62) 0%,rgba(20,19,17,.34) 38%,rgba(20,19,17,0) 66%);
}
.banner-inner{
  position:relative;z-index:2;max-width:44ch;padding:clamp(28px,4vw,56px);color:#FBFAF8;
}
.banner .kicker{color:rgba(251,250,248,.72)}
.banner .kicker::before{background:rgba(251,250,248,.6)}
.banner h2{font-family:var(--display);color:#FBFAF8;margin-top:14px;font-size:var(--t-h2-size);font-weight:var(--t-h2-weight);letter-spacing:var(--t-h2-ls);line-height:var(--t-h2-lh)}
.banner p{margin-top:12px;color:rgba(251,250,248,.8);max-width:38ch;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.banner .cta-row{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}
/* a banner still awaiting its final VISUAL-01 photography says so, quietly */
.banner .await{display:inline-block;margin-top:18px;font-family:var(--ui);color:rgba(251,250,248,.62);border:1px solid rgba(251,250,248,.32);border-radius:2px;padding:4px 8px;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
/* SPLIT BANNER: photograph one side, copy the other. Used where the interim
   asset is an isolated product shot that would look wrong full-bleed. */
.banner.split{grid-template-columns:1fr 1fr;background:var(--chalk);min-height:clamp(320px,38vw,480px)}
/* the media cell must define its own box, otherwise the image's intrinsic height
   (these are 1200x1800 source files) drives the whole banner and one banner ends
   up twice as tall as its siblings */
.banner.split .banner-media{
  position:relative;inset:auto;grid-column:2;grid-row:1;
  align-self:stretch;height:100%;min-height:clamp(320px,38vw,480px);
}
.banner.split .banner-media img{position:absolute;inset:0;object-fit:contain;padding:7%}
.banner.split .banner-scrim{display:none}
.banner.split .banner-inner{grid-column:1;grid-row:1;color:var(--ink);max-width:40ch}
.banner.split h2{color:var(--ink)}
.banner.split p{color:var(--ink-soft)}
.banner.split .kicker{color:var(--ink-faint)}
.banner.split .kicker::before{background:var(--ink-faint)}
.banner.split .await{color:var(--ink-faint);border-color:var(--line-strong)}
@media (max-width:820px){
  .banner{min-height:0}
  .banner.split{grid-template-columns:1fr}
  .banner.split .banner-media{grid-column:1;grid-row:2;aspect-ratio:4/3}
  .banner.split .banner-inner{grid-column:1;grid-row:1}
  .banner-inner{max-width:none}
  /* full-bleed banners keep a usable text area on a phone */
  .banner:not(.split){min-height:clamp(400px,88vw,520px);align-items:end}
  .banner:not(.split) .banner-scrim{
    background:linear-gradient(0deg,rgba(20,19,17,.74) 0%,rgba(20,19,17,.3) 46%,rgba(20,19,17,.05) 100%);
  }
}

/* ============================================================
   FAMILY TILES — the primary shopping entrance. Six real ERATOS
   families, plain Turkish nouns, real counts, real photography.
   This is the surface that answers "where do I shop next".
   ============================================================ */
.fam-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1.1vw,16px);margin-top:32px}
@media (max-width:1100px){.fam-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.fam-grid{grid-template-columns:repeat(2,1fr)}}
.fam-tile{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.fam-tile .plate{aspect-ratio:1/1;background:var(--milk);border:1px solid var(--line)}
.fam-tile .plate img{padding:14%;transition:transform var(--dur-content) var(--ease)}
/* üstüne gelince büyütme kaldırıldı (21 Eylül 2026), bkz. .pcard */
.fam-tile .lbl{padding:11px 2px 0;display:flex;flex-direction:column;gap:2px}
.fam-tile .fname{font-family:var(--ui);color:var(--ink);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.fam-tile .fcount{font-family:var(--ui);color:var(--ink-faint);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}

/* ============================================================
   THE MATERIAL MOMENT — the homepage's physical/sensory section.
   Real material, real count, real product photograph. The only
   effect is a slow light sweep across the photograph: light moving
   over a material, which is honest for any object. Nothing about
   the product is transformed, wetted or animated — that waits on
   real macro photography.
   ============================================================ */
.matgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px);margin-top:32px}
@media (max-width:860px){.matgrid{grid-template-columns:repeat(2,1fr)}}
.matcard{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.matcard-media{
  position:relative;aspect-ratio:4/5;background:var(--stone);border-radius:5px;overflow:hidden;display:block;
}
.matcard-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:12%;
  transition:transform var(--dur-content) var(--ease)}
.matcard-media svg{position:absolute;inset:38%;width:24%;height:24%;color:var(--ink-faint)}
.matcard:hover .matcard-media img{transform:scale(1.04)}
/* the light sweep: a soft band that travels once across the material on hover */
.matcard-media .sheen{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.72) 50%,transparent 68%);
  transform:translateX(-115%);
}
.matcard:hover .sheen,.matcard:focus-visible .sheen{
  opacity:1;transform:translateX(115%);
  transition:transform 1.15s var(--ease-soft),opacity .18s linear;
}
.matcard-lbl{padding:12px 2px 0;display:flex;flex-direction:column;gap:2px}
.matcard .mname{font-family:var(--display);color:var(--ink);font-size:var(--t-body-lg-size);font-weight:var(--t-body-lg-weight);letter-spacing:var(--t-body-lg-ls)}
.matcard .mcount{font-family:var(--ui);color:var(--ink-faint);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}

/* Recently viewed strip (homepage/PDP): architecture only populates from
   real localStorage browsing history, never invented items. */
.rviewed{margin-top:8px}
.rviewed .pgrid{margin-top:20px}

/* ============================================================
   Footer
   ============================================================ */
.foot{background:var(--graphite);color:rgba(250,249,247,.66);padding:56px var(--gut) 40px;border-top:1px solid rgba(233,237,230,.14)}
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
@media (max-width:860px){.foot .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot .wrap{grid-template-columns:1fr}}
.foot .brand{color:#E7EBE4;margin-bottom:16px}
.foot h4{font-family:var(--ui);color:#8B958A;margin-bottom:12px;font-size:var(--t-label-size);font-weight:var(--t-label-weight);letter-spacing:var(--t-label-ls)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.foot a{text-decoration:none;opacity:.85;transition:opacity .3s var(--ease)}
.foot a:hover{opacity:1;color:#E7EBE4}
.foot .region{font-family:var(--ui);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
.foot .protonote{margin-top:36px;padding-top:22px;border-top:1px solid rgba(233,237,230,.14);font-family:var(--ui);color:#8B958A;max-width:82ch;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}

/* ============================================================
   The custom cursor system (a precision-mark dot with VIEW/CTA
   states) was removed on 2026-08-25. It hid the native pointer
   (cursor:none) at the same time several hover states were
   nudging clickable targets a few pixels on hover, and together
   these made buttons and cards feel like they dodged the mouse.
   Every hover-triggered position shift was removed in the same
   pass. Native cursor is used everywhere now, unconditionally.
   Do not reintroduce a cursor that hides the OS pointer, and do
   not give a clickable element's :hover state a transform that
   moves it, without first testing on a real pointer, not just
   the automated suite.
   ============================================================ */

/* ============================================================
   Entrance choreography (shared)
   ============================================================ */
/* Varsayılan GÖRÜNÜR (26 Eylül 2026). Gizleme yalnız html.rv varken, yani
   site.js çalışıp hareket azaltma istenmediğinde. Bitiş durumu tam opak. */
.rv .reveal > *{opacity:0;transform:translateY(12px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rv .reveal.in > *{opacity:1;transform:none}
.reveal.in > *:nth-child(1){transition-delay:0ms}
.reveal.in > *:nth-child(2){transition-delay:80ms}
.reveal.in > *:nth-child(3){transition-delay:160ms}
.reveal.in > *:nth-child(4){transition-delay:240ms}
.reveal.in.done > *:nth-child(n){transition-delay:0s !important}
.live .breathe{animation:breathe 7.5s var(--ease-soft) -2.4s infinite alternate}
@keyframes breathe{from{opacity:.5}to{opacity:1}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important;
  }
  .reveal > *{opacity:1 !important;transform:none !important}
  .ledger .bar i{transform:scaleX(var(--p,0)) !important}
  .hero-fallback::before{animation:none !important}
}

/* ============================================================
   CODE-07 — IMMERSIVE CARE COMMERCE.

   The homepage was technically clean and visually monotonous: a
   column of rectangles, each holding a small object on a pale
   ground. Four things change that here, and none of them is a
   decorative accent colour.

     1. CIRCULAR DISCOVERY. A soft, organic, FUNCTIONAL row at the
        top of the page. Circles, not cards; every one navigates.
     2. THE CARE STORY. Content and product inside one section, so
        the page alternates rather than repeating a grid.
     3. CARE PATHS. Arched media, a third shape in the system.
     4. THE REEL. A 9:16 rail — the proportion contemporary care
        content actually lives in — built as architecture, with
        honest empty slots instead of borrowed video.

   Everything degrades to something honest when the asset or the
   verified data is missing. Nothing here depends on animation to
   become visible.
   ============================================================ */

/* a section that carries a decision, not a story: less air above/below */
.sec-tight{padding-top:clamp(28px,4vh,44px);padding-bottom:clamp(28px,4vh,44px)}
/* 7 Ekim 2026, sahip: yuvarlak kategori ikonlarının üstü (header/hero ile) ve altı dar kalıyordu; iki yanı eşit ve geniş */
#discovery.sec-tight{padding-top:clamp(56px,9vh,96px);padding-bottom:clamp(56px,9vh,96px)}

/* ---------------- CIRCULAR DISCOVERY ---------------- */
/* Başlık kalktı (17 Eylül 2026): satır artık bölümün ilk şeyi, o yüzden
   üstündeki boşluk da yok. Bölümün kendi nefesi yeterli. */
.disc-row{
  /* daire sayısı değişince (Bakır eklendi: 7) satır kendini böler */
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(10px,1.8vw,26px);
  margin-top:0;
}
.disc{display:flex;flex-direction:column;align-items:center;text-align:center;
  text-decoration:none;color:inherit;gap:2px;min-width:0}
.disc-media{
  width:100%;aspect-ratio:1/1;border-radius:50%;background:var(--chalk);
  position:relative;overflow:hidden;display:block;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow var(--dur-commerce) var(--ease),background var(--dur-commerce) var(--ease);
}
/* FILL the disc. With contain + padding the picture sat as a small rectangle
   inside the circle and its own white ground showed as corners; the shape only
   reads as intentional when the image owns the whole disc. */
.disc-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;
  transition:transform var(--dur-content) var(--ease);
}
/* the only motion: the object grows INSIDE its circle. The circle, the label
   and the link itself never move — no click target is ever displaced. */
.disc:hover .disc-media img{transform:translate(var(--kx,0%),var(--ky,0%)) scale(calc(var(--ks,1) * 1.07))}
.disc:hover .disc-media{box-shadow:inset 0 0 0 1px var(--line-strong)}
/* CUT-OUT DISC — the honest middle path for a category whose stone-scene
   photograph does not exist yet (bebek, ayak; Source of Truth §34.5).
   The picture is a transparent cut-out, so filling the disc with it would
   fill the disc with the marketplace's WHITE ground and make two of six
   circles speak a different language. Instead the object sits ON a stone
   ground whose tone is measured from the four real scene photographs
   (#C6BEB3 / #CBC1B1 / #D2CCC3 / #CEC8BF -> #CCC5BA). No shadow, no contact,
   no invented light: this is not a fabricated photograph, it is a product
   on a ground. When the real shoot arrives, cutout comes out of
   discovery-lead.json and nothing else changes. */
/* HAVADA DURAN ÜRÜN (17 Eylül 2026) — sahip: "yuvarlaklar içinde
   dursun istemiyorum, ürünün arka planı tamamen kalksın, havada duran arka
   planı olmayan ürünler gibi dursun."
   Şeffaf kesimi olan kategoride daire, taş zemin ve iç çizgi tamamen kalkar:
   ürün doğrudan sayfanın kendi zemini (#FAF9F7) üzerinde durur. Gölge ve
   temas yine uydurulmaz. Şeffaf görseli henüz gelmemiş kategoriler eski
   daireyle kalır; o görsel geldiğinde discovery-lead.json'da cutout:true
   olur ve o daire de kendiliğinden kalkar. */
.disc-cut .disc-media{
  background:none;border-radius:0;box-shadow:none;overflow:visible;
}
.disc-cut .disc-media img{
  object-fit:contain;object-position:center bottom;padding:2% 4% 0;
}
.disc-cut:hover .disc-media{box-shadow:none}
.disc-cut:hover .disc-media img{transform:scale(1.06)}

/* AİLE ŞERİDİ — YUVARLAK İKON (20 Eylül 2026, sahip: "kare kategori
   kartlarını yuvarlak ikon şeridine çevir").
   .disc-cut'ın tersi: daire, taş zemin ve iç çizgi KALIR, ürün dairenin
   içinde nesne olarak durur. Kesimler sahne fotoğrafı değil, bu yüzden
   daireyi doldurmuyorlar (cover); doldursalardı ürün kırpılır ve altı
   daire farklı ölçekte okunurdu. Zemin dairenin kendi tebeşiri, uydurma
   gölge ya da temas yok. */
/* Sabit %18 pay kaldırıldı: ürünün dairede kapladığı yer artık dosyanın
   kendi ölçüsünden hesaplanıyor (site.js daireDuzen). Pay sıfır, çünkü
   boşluğu --ks veriyor ve o her dosyada farklı olmak zorunda. */
.disc-ic .disc-media img{object-fit:contain;object-position:center;padding:0;
  transform:translate(var(--kx,0%),var(--ky,0%)) scale(var(--ks,1))}
.disc-ic:hover .disc-media img{transform:scale(1.05)}
@media (max-width:560px){ .disc-ic .disc-media img{padding:15%} }

/* no verified clean photograph for this destination yet: a typographic disc,
   never a borrowed picture of the wrong product */
.disc-type .disc-media{background:var(--mineral)}
.disc-initial{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);color:var(--ink);opacity:.32;font-size:var(--t-h1-size);font-weight:var(--t-h1-weight);letter-spacing:var(--t-h1-ls);line-height:var(--t-h1-lh)}
.disc-lbl{margin-top:12px;font-family:var(--ui);font-size:var(--t-body-lg-size);font-weight:var(--t-body-lg-weight);letter-spacing:var(--t-body-lg-ls)}
.disc-n{font-family:var(--ui);color:var(--ink-faint);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
/* the six families stay one click away without a second tile grid */
.fam-rail{
  display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:clamp(26px,3vw,40px);
  padding-top:18px;border-top:1px solid var(--line);
}
.fam-rail a{font-family:var(--ui);color:var(--ink-soft);text-decoration:none;padding:6px 0;transition:color var(--dur-utility) var(--ease);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.fam-rail a:hover{color:var(--ink)}
@media (max-width:860px){
  /* a scroll rail, not a squeezed 6-up grid: the circles keep their size */
  .disc-row{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;
    margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);
    padding:0 var(--gut) 4px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .disc-row::-webkit-scrollbar{display:none}
  .disc{flex:0 0 108px;scroll-snap-align:start}
}
@media (max-width:420px){ .disc{flex-basis:96px} }

/* ---------------- THE CARE STORY ---------------- */
.care-story{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(22px,4vw,64px);align-items:center;
}
.care-story.flip .care-visual{order:2}
.care-story.flip .care-copy{order:1}
/* An honest crop of a real, verified, clean product photograph, magnified only
   as far as the source resolution allows (wireMacroCrop). It is not pretending
   to be use photography: it declares the VISUAL-01 slot it is waiting for. */
.care-visual{
  position:relative;margin:0;aspect-ratio:6/7;border-radius:8px;overflow:hidden;
  background:var(--chalk);
}
/* A generated cover is a SQUARE frame with the product standing in the middle.
   Cropping it to this 6/7 portrait with object-fit:cover sliced the top off the
   product, so the whole object is contained instead and the warm scene fills
   the remaining space via the figure background. */
.care-visual img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  object-position:center;transform-origin:center;
  transition:transform var(--dur-cinematic) var(--ease-soft);
}
.care-visual.crop::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 52%,rgba(27,26,24,.07) 100%);
}
.care-visual .await{position:absolute;left:14px;bottom:14px;z-index:2;font-family:var(--ui);color:var(--ink-soft);background:rgba(250,249,247,.9);backdrop-filter:blur(6px);padding:6px 9px;border-radius:2px;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.care-visual.ph{display:flex;align-items:center;justify-content:center;background:var(--mineral)}
.care-copy h2.big{max-width:15ch}
.care-copy .lede{max-width:46ch}
.care-copy .btn{margin-top:26px}
/* the "ne için?" line: verified facts only, and only the ones this product has */
.care-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;
  padding-top:16px;border-top:1px solid var(--line)}
.care-meta-item{font-family:var(--ui);color:var(--ink);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.care-meta-item b{color:var(--ink-faint);font-weight:var(--fw-500)}
/* the story's products sit directly under it, in the same section */
#storyDry .pgrid,#storyShower .pgrid{margin-top:clamp(30px,4vw,52px)}

/* ---------------- KULLANIM RİTÜELİ (20 Eylül 2026) ----------------
   İki anlatı bölümünün yerini alan tek bölüm: iki ritüel yan yana, her
   birinde 1-2-3. Numara CSS sayacı değil, işaretlemede gerçek bir <span>:
   sayaçla basılan numara kopyalanamıyor ve ekran okuyucuya ulaşmıyordu.
   Sıra <ol> ile anlamlı, numara görsel olarak aria-hidden. */
/* ÜÇ AN, ÜÇ SÜTUN (27 Eylül 2026, sahip: "3 adımda duş öncesi, duşta, duş
   sonrası"). Eskiden iki sütundu ve her sütun büyük bir fotoğrafla açılıyordu.
   Fotoğraflar kalktığı için sütunlar arası boşluk da daraldı: ayıran şey artık
   beyaz alan değil, her sütunun kendi numarası ve etiketi. */
.ritual-row{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,3vw,40px);margin-top:clamp(28px,3.6vw,48px);
}
@media (max-width:980px){ .ritual-row{grid-template-columns:1fr;gap:clamp(28px,4vw,40px)} }
.ritual-col{display:flex;flex-direction:column;align-items:flex-start}
/* RİTÜELİN KARESİ (20 Eylül 2026). Oran sabit (3/2) ve zemin tebeşir: kare
   inmeden de yeri ayrılmış olur, sayfa kaymaz. Kırpma cover, çünkü kaynak
   filmin kendi karesi zaten bu oranda kırpıldı — burada ikinci bir kırpma
   yapılmıyor, yalnız ölçek. */
.ritual-media{
  margin:0 0 clamp(20px,2.4vw,28px);width:100%;aspect-ratio:3/2;
  background:var(--chalk);border-radius:6px;overflow:hidden;position:relative;
}
.ritual-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-content) var(--ease);
}
/* tek ve sakin hareket: kare büyür, çerçeve durur — hiçbir tıklama hedefi oynamaz */
.ritual-col.has-media:hover .ritual-media img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){ .ritual-media img{transition:none} }
.ritual-h{margin:0;font-family:var(--display);color:var(--ink);font-size:var(--t-h3-size);font-weight:var(--t-h3-weight);letter-spacing:var(--t-h3-ls);line-height:var(--t-h3-lh)}
/* An etiketi artık sütunun İLK satırı (fotoğraf yok) ve adım numarasını da
   o taşıyor: "1 · DUŞTAN ÖNCE". Numara ayrı bir sütun olmadığı için etiket
   tek satırda kalıyor, üç sütunun üst kenarı aynı hizada başlıyor. */
.ritual-when{margin:0;display:flex;align-items:center;gap:8px;font-family:var(--ui);color:var(--ink-faint);font-size:var(--t-label-size);font-weight:var(--t-label-weight);letter-spacing:var(--t-label-ls)}
.ritual-when .ritual-n{width:20px;height:20px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--canvas);font-variant-numeric:tabular-nums;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.ritual-h{margin-top:6px}
.ritual-minis{margin-top:clamp(14px,1.8vw,18px);width:100%}
.ritual-lnk{font-family:var(--ui);color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px;justify-self:start;transition:color var(--dur-utility) var(--ease),border-color var(--dur-utility) var(--ease);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.ritual-lnk:hover,.ritual-lnk:focus-visible{color:var(--ink);border-bottom-color:var(--ink)}
/* opsiyonel satır: numaralı listenin DIŞINDA, böylece kapalıyken 1-2-3 bozulmaz */
.ritual-ops{margin:16px 0 0;font-family:var(--ui);color:var(--ink-faint);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.ritual-cta{margin-top:clamp(18px,2.2vw,24px)}
#ritual .pgrid{margin-top:clamp(34px,4.4vw,60px)}

/* ---------------- YORUMLAR VE SOSYAL (20 Eylül 2026) ----------------
   Bölüm yalnız gerçek veri varken (ya da iç önizleme bayrağı açıkken)
   çizilir; iskelet kutular canlı sitede hiç DOM'a girmez. */
.sp-body{margin-top:clamp(28px,3.6vw,48px)}
.sp-reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.sp-review{
  margin:0;padding:clamp(20px,2.4vw,28px);background:var(--canvas);
  border:1px solid var(--line);border-radius:6px;display:flex;flex-direction:column;gap:14px;
}
.sp-review blockquote{margin:0;color:var(--ink);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls);line-height:var(--t-body-lh)}
.sp-review figcaption{font-family:var(--ui);color:var(--ink-faint);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.sp-review figcaption a{color:var(--ink-soft)}
/* iskelet: uydurma bir yorumun yerini tutmaz, yalnız kutunun ölçüsünü gösterir */
.sp-iskelet{background:var(--mineral);border-color:transparent;min-height:132px}
.sp-grid{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,1.2vw,14px);
  margin-top:clamp(26px,3vw,40px);
}
.sp-kare{aspect-ratio:1/1;border-radius:4px;overflow:hidden;background:var(--mineral);display:block;position:relative}
.sp-kare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-content) var(--ease)}
.sp-kare:hover img{transform:scale(1.05)}
.sp-kare.sp-iskelet{min-height:0}
.sp-follow{display:flex;gap:22px;flex-wrap:wrap;margin-top:clamp(20px,2.4vw,28px)}
.sp-hesap{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink-soft);font-family:var(--ui);transition:color var(--dur-utility) var(--ease);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.sp-hesap:hover,.sp-hesap:focus-visible{color:var(--ink)}
.sp-hesap svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.4;fill:none}
.sp-not{margin:clamp(20px,2.4vw,28px) 0 0;font-family:var(--ui);color:var(--ink-faint);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
@media (max-width:980px){ .sp-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){ .sp-reviews{grid-template-columns:1fr} }

/* ---------------- GÜVEN ŞERİDİ (20 Eylül 2026) ----------------
   İnce, tek satır. Kendi bölümü değil, iki bölüm arasındaki bir çizgi:
   üstü ve altı çizgili, yüksekliği bir satır. Telefonda alt alta
   geçer ama yine liste gibi okunur, kart olmaz. */
.trust-band{padding:0 var(--gut);background:var(--canvas);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust{
  max-width:var(--maxw);margin:0 auto;padding:18px 0;list-style:none;
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px clamp(26px,5vw,72px);
}
.trust-item{display:inline-flex;align-items:center;gap:10px;font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.trust-item svg{width:19px;height:19px;flex:none;stroke:currentColor;stroke-width:1.3;fill:none;
  stroke-linecap:round;stroke-linejoin:round;color:var(--ink-faint)}
@media (max-width:620px){
  .trust{flex-direction:column;align-items:flex-start;gap:12px;padding:16px 0}
}

/* ---------------- BÜLTEN (20 Eylül 2026) ----------------
   Footer'ın hemen üstünde, footer'la aynı zeminde: iki ayrı bant gibi
   değil, altbilginin başlangıcı gibi okunuyor. Tek satır: metin solda,
   form sağda. */
.news{background:var(--chalk);padding:clamp(34px,4.4vw,56px) var(--gut);
  border-top:1px solid var(--line)}
.news-in{display:flex;align-items:flex-start;justify-content:space-between;
  gap:clamp(20px,4vw,60px);flex-wrap:wrap}
.news-copy{flex:1 1 300px}
.news-h{margin:0;font-family:var(--display);color:var(--ink);font-size:var(--t-h2-size);font-weight:var(--t-h2-weight);letter-spacing:var(--t-h2-ls);line-height:var(--t-h2-lh)}
.news-p{margin:8px 0 0;color:var(--ink-soft);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.news-form{flex:1 1 360px;max-width:460px;display:flex;flex-wrap:wrap;gap:10px}
.news-input{flex:1 1 200px;min-width:0;height:46px;padding:0 14px;font-family:var(--ui);color:var(--ink);background:var(--canvas);border:1px solid var(--line-strong);border-radius:4px;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.news-input::placeholder{color:var(--ink-faint)}
.news-input:focus-visible{outline:2px solid var(--accent,var(--ink));outline-offset:2px}
.news-form .btn{flex:0 0 auto;height:46px}
/* durum satırı ve izin notu satırın tamamını alır */
.news-msg,.news-kvkk{flex:1 0 100%;margin:0;font-family:var(--ui);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
.news-msg{color:var(--ink-soft)}
.news-msg:empty{display:none}
.news-msg.iyi{color:var(--ink)}
.news-msg.hata{color:var(--ink)}
.news-kvkk{color:var(--ink-faint)}
.news-kvkk a{color:var(--ink-soft)}
.news-onay{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.news-onay input{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;accent-color:var(--ink)}
.news-form.kayitli .news-onay{display:none}
@media (max-width:560px){
  .news-form{max-width:none}
  .news-input{flex:1 0 100%}
  .news-form .btn{width:100%}
}

/* ---------------- FOOTER EKLERİ (20 Eylül 2026) ----------------
   Sosyal ikonlar marka sütununda, ETBİS yuvası yasal listenin altında.
   Mevcut kolon yapısına dokunulmadı; ikisi de JS'ten basılıyor. */
.foot-social{display:flex;gap:14px;margin-top:18px}
.foot-social a{
  width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;
  border:1px solid var(--line-strong);border-radius:50%;color:var(--ink-soft);
  transition:color var(--dur-utility) var(--ease),border-color var(--dur-utility) var(--ease);
}
.foot-social a:hover{color:var(--ink);border-color:var(--ink);text-decoration:none}
.foot-social svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.4;fill:none}
.foot-etbis{margin-top:16px}
.foot-etbis img{display:block;max-width:132px;height:auto}
.foot-etbis-bos{display:inline-flex;align-items:center;justify-content:center;width:132px;height:52px;border:1px dashed var(--line-strong);border-radius:4px;font-family:var(--ui);text-align:center;color:var(--ink-faint);padding:0 8px;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
@media (max-width:860px){
  .ritual-row{grid-template-columns:1fr;gap:34px}
  .ritual-col+.ritual-col{padding-top:30px;border-top:1px solid var(--line)}
  .ritual-cta{width:auto;max-width:100%}
}
@media (max-width:860px){
  .care-story{grid-template-columns:1fr;gap:22px}
  .care-story.flip .care-visual{order:0}
  .care-story.flip .care-copy{order:0}
  /* the sources are tall product photographs on white: a landscape crop of one
     is a band of background. The mobile frame stays portrait so the object
     survives the crop. */
  .care-visual{aspect-ratio:4/5}
  .care-copy .btn{margin-top:20px;width:auto;max-width:100%}
}

/* ---------------- CARE PATHS (yüz / ayak / saç) ---------------- */
.path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,30px);
  margin-top:clamp(26px,3vw,42px)}
.path{display:flex;flex-direction:column;text-decoration:none;color:inherit}
/* the arch: a third shape alongside the square Plate and the circle, so the
   page stops reading as one rectangle stacked on another */
.path-media{
  position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--chalk);
  border-radius:999px 999px 8px 8px;display:block;
}
/* The arch is a picture frame, not a plate: a generated cover is a full scene,
   so it FILLS the arch. The old contain+padding left a small square floating
   inside a large empty shape. */
.path-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform var(--dur-content) var(--ease)}
.path:hover .path-media img{transform:scale(1.05)}
.path-ph .path-media{background:var(--mineral)}
.path-media .await{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-family:var(--ui);color:var(--ink-soft);white-space:nowrap;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.path-body{display:block;padding:18px 2px 0}
.path-body h3{font-family:var(--display);margin-top:10px;color:var(--ink);font-size:var(--t-h3-size);font-weight:var(--t-h3-weight);letter-spacing:var(--t-h3-ls);line-height:var(--t-h3-lh)}
.path-p{display:block;margin-top:8px;color:var(--ink-soft);max-width:34ch;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.path-cta{display:inline-block;margin-top:14px;font-family:var(--ui);color:var(--ink);border-bottom:1px solid var(--line-strong);padding-bottom:3px;font-size:var(--t-label-size);font-weight:var(--t-label-weight);letter-spacing:var(--t-label-ls)}
.path:hover .path-cta{border-bottom-color:var(--ink)}
@media (max-width:760px){
  .path-grid{grid-template-columns:1fr;gap:26px}
  .path{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:center}
  .path-media{aspect-ratio:3/4;border-radius:999px 999px 6px 6px}
  .path-body{padding:0}
}

/* ---------------- SHORT-FORM CARE VIDEO ---------------- */
/* 9:16 — the proportion this content actually lives in. The rail scrolls on
   every width rather than shrinking five portrait cards into stamps. */
/* desktop: five portrait cards inside the wrap, aligned with the headline.
   below 860px it becomes a real scroll rail rather than five stamps. */
/* Beş slot var ama hepsinin videosu olmayabilir (27 Eylül 2026: üçü dolu).
   Sabit beş sütunda üç kart sola yaslanıp sağda boş bir üçte iki bırakıyordu.
   Sütun genişliği beş kartlıkken ne ise o kalıyor — kartlar ŞİŞMİYOR — ama
   satır ortalanıyor. Kaç kart olursa olsun düzen dengeli duruyor. */
/* Sütun ölçüsü tek yerden: hem şerit hem başlık aynı genişliği kullanıyor,
   böylece başlığın sol kenarı İLK VİDEONUN sol kenarıyla birebir hizalanıyor
   (27 Eylül 2026, sahip: "sola dayalı olsun, en baştaki videoya").
   Şerit sayfada ortalı kalıyor; sola dayanan şey başlık değil, ikisinin
   birlikte oluşturduğu blok. */
/* SAYFA GENİŞLİĞİNDE (30 Eylül 2026, sahip: "diğer yerlerin genişliğine getirilsin,
   ana sayfa hep aynı standardı korumalı"). 320 px üst sınırı kalktı; üç sütun
   ızgara (.wrap) genişliğini doldurur, kenarlar ürün ızgarasıyla hizalı. */
#reels{--reel-gap:clamp(18px,2.2vw,32px);
  --reel-col:calc((100% - 2 * var(--reel-gap)) / 3);
  --reel-w:calc(3 * var(--reel-col) + 2 * var(--reel-gap))}
.reel-row{display:grid;grid-auto-flow:column;justify-content:center;
  grid-auto-columns:minmax(0,var(--reel-col));
  gap:var(--reel-gap);margin-top:clamp(36px,4.6vw,68px)}
.reel{display:flex;flex-direction:column;min-width:0}
/* Başlık bloğu şeridin genişliğinde ve sola dayalı: ilk videonun sol
   kenarından başlıyor, son videonun sağ kenarında bitiyor. */
#reels .reveal:not(.reel-row){width:min(var(--reel-w),100%);margin:0 auto;text-align:left}
#reels h2.big{max-width:22ch}
/* Kart metni sola hizalı kalır: ortalanmış bir ürün adı ve bağlantı
   okunurluğu düşürür, ayrıca öteki kartlarla aynı ritmi bozar. */
#reels .reel{text-align:left}
/* ---- TARZ (27 Eylül 2026, sahip: "bir tarz yap") ----
   Üç şey, hepsi sessiz: sıra numarası, kapaktaki oynat işareti ve üstüne
   gelince kalkan kart. Hiçbiri yeni bir renk ya da süs getirmiyor; hepsi
   sayfanın kendi paletinden. */
.reel-no{display:block;margin-top:14px;font-family:var(--ui);color:var(--ink-faint);font-variant-numeric:tabular-nums;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.reel-t{margin-top:4px}
/* Üstüne gelinen kart bir tık öne çıkar: %4 büyür, gölgesi derinleşir ve
   komşularının üstüne biner (z-index). Video durmaz — büyüyen çerçevedir,
   akış değil. Azaltılmış harekette büyüme yok, yalnız gölge. */
.reel{position:relative;transition:z-index 0s}
.reel:hover,.reel:focus-within{z-index:2}
.reel-media{transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.reel:hover .reel-media,.reel:focus-within .reel-media{
  transform:scale(1.04);box-shadow:0 18px 44px rgba(27,26,24,.16)}
@media (prefers-reduced-motion:reduce){
  .reel-media{transition:box-shadow .4s var(--ease)}
  .reel:hover .reel-media,.reel:focus-within .reel-media{transform:none}
}
/* Durdurma düğmesi: başlığın sağ ucunda, sessiz. İki kare = duraklat,
   üçgen = oynat; ikisi de aynı düğmenin içinde çiziliyor. */
#reels .reveal:not(.reel-row){display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.reel-motion{flex:none;width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:var(--canvas);color:var(--ink);
  display:grid;place-items:center;transition:border-color .25s var(--ease),background .25s var(--ease)}
.reel-motion:hover,.reel-motion:focus-visible{border-color:var(--ink)}
.reel-motion-ikon{width:12px;height:13px;display:block;position:relative}
.reel-motion-ikon::before,.reel-motion-ikon::after{content:"";position:absolute;top:0;bottom:0;
  width:3.5px;background:currentColor;border-radius:1px}
.reel-motion-ikon::before{left:0}
.reel-motion-ikon::after{right:0}
.reel-motion.duruyor .reel-motion-ikon::before{left:1px;width:0;height:0;top:0;bottom:auto;
  border-radius:0;background:none;border-left:11px solid currentColor;
  border-top:6.5px solid transparent;border-bottom:6.5px solid transparent}
.reel-motion.duruyor .reel-motion-ikon::after{display:none}
/* Başlığın altındaki tanım satırı: ortalı ve dar tutuldu ki başlıkla birlikte
   tek blok okunsun, satır kenardan kenara uzamasın. */
#reels .sec-lede{margin:10px auto 0;text-align:center;max-width:46ch}
@media (max-width:860px){
  .reel-row{
    display:flex;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);
    padding:0 var(--gut) 6px;scroll-padding:0 var(--gut);scrollbar-width:none;
  }
  .reel-row::-webkit-scrollbar{display:none}
  .reel{flex:0 0 46vw;max-width:210px;scroll-snap-align:start}
  #reels .reveal:not(.reel-row){width:auto;margin:0}
}
/* geniş sütunda 9:16 çerçeve ~750 px boy olurdu; masaüstünde 3:4 (video kırpılır,
   object-fit:cover). Telefondaki kaydırmalı şerit 9:16 kalır. */
@media (min-width:861px){ #reels .reel-media{aspect-ratio:3/4} }
.reel-media{
  position:relative;display:block;aspect-ratio:9/16;border-radius:8px;overflow:hidden;
  background:var(--chalk);
}
.reel-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* NO REAL FOOTAGE YET. This state exists so nobody is tempted to fill the rail
   with stock video: it shows the real product the film will be about, and says
   plainly that the film is missing. */
.reel-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--chalk)}
.reel-empty img{width:76%;height:76%;object-fit:contain;opacity:.55;filter:saturate(.65)}
/* no verified product for this subject yet: a quiet mark, never a stand-in photo */
.reel-empty:empty::before,.reel-empty:not(:has(img))::before{
  content:"";position:absolute;left:50%;top:46%;width:38px;height:38px;transform:translate(-50%,-50%);
  border:1px solid var(--line-strong);border-radius:50%;
}
.reel-empty .await{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.reel-t{font-family:var(--ui);margin-top:12px;color:var(--ink);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.reel-buy{display:flex;flex-direction:column;gap:3px;margin-top:6px;text-decoration:none;color:inherit}
.reel-buy-n{color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.reel-buy-cta{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;padding:0 18px;font-family:var(--ui);text-transform:none;white-space:nowrap;color:var(--ink);background:var(--milk);align-self:flex-start;border:1px solid var(--line-strong);border-radius:999px;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.reel-buy:hover .reel-buy-cta{border-color:var(--ink)}
.reel-buy-ph{margin-top:6px;font-family:var(--ui);color:var(--ink-faint);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}


/* ---------------- PDP: decision support ---------------- */
/* Verified fields written as normal Turkish questions. Internal metadata keys
   are never shown, and a row a product has no verified answer for simply does
   not exist. */
.decision{margin-top:22px;border-top:1px solid var(--line)}
.decision > div{display:grid;grid-template-columns:minmax(120px,34%) 1fr;gap:10px 18px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.decision dt{font-family:var(--ui);color:var(--ink-faint);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.decision dd{margin:0;font-family:var(--ui);color:var(--ink);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.decision > div:last-child{border-bottom:0}
@media (max-width:520px){.decision > div{grid-template-columns:1fr;gap:2px}}

/* ---------------- PLP: category-specific filters ---------------- */
.filter-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-top:26px}
.filter-note{font-family:var(--ui);color:var(--ink-faint);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
/* the family chips are the CATEGORY switcher, not a filter competing with the
   decision groups below them */
.cat-switch{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;
  padding-bottom:18px;border-bottom:1px solid var(--line)}
/* the decision groups sit in one row on desktop and stack in the mobile sheet */
#facetGroups{display:flex;gap:28px;flex-wrap:wrap}
.filter-panel.empty{display:none}
@media (max-width:760px){#facetGroups{flex-direction:column;gap:0}}

/* the routine block shows at most three complements; a 4-column grid would
   leave a hole where a fourth product deliberately does not exist */
#completeGrid{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){#completeGrid{grid-template-columns:repeat(2,1fr)}}

/* ---------------------------------------------------------------
   PRODUCT BADGES (assets/badges.js)
   Quiet, factual row under the buy block. Every badge is true by the
   product's construction — no lab result, no formulation claim. They
   read as a checklist, not as loud marketing stickers, because the
   brand's confidence is supposed to come from the material itself.
   --------------------------------------------------------------- */
.pbadges{
  list-style:none;margin:26px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px 10px;
}
.pbadges li{font-family:var(--ui);color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:7px 13px;background:var(--milk);white-space:nowrap;font-size:var(--t-label-size);font-weight:var(--t-label-weight);letter-spacing:var(--t-label-ls)}
.pbadges li::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--ink-faint);margin-right:8px;vertical-align:middle;
}
.pdp-care{margin-top:10px;color:var(--ink-soft);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
@media(max-width:600px){
  .pbadges li{padding:6px 11px}
}

/* ---------------------------------------------------------------
   CODE-10 HEADER — menu left, wordmark centred, icons right.
   A three-column grid rather than space-between, so the wordmark sits
   on the true centre of the page no matter how wide the two sides
   grow. This is the layout a premium care brand uses; the old row of
   text links ("Kategoriler / Hediye Fikirleri / Tüm ürünler") read
   like a high-street shop nav and buried the families that sell.
   --------------------------------------------------------------- */
.nav{
  display:grid;grid-template-columns:1fr auto 1fr;justify-content:initial;
}
/* the wordmark is written first in the markup for screen readers and for a
   sensible tab order; CSS order puts it in the middle column visually. */
.nav-left{display:flex;align-items:center;gap:14px;justify-self:start;order:1}
.nav .brand{justify-self:center;order:2}
.nav-right{justify-self:end;order:3}

/* the menu button: the mark alone (the word was removed), quiet until hovered */
.navtop-menu{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:none;border:0;cursor:pointer;padding:8px 4px;min-width:44px;min-height:44px;font-family:var(--ui);color:var(--ink-soft);transition:color var(--dur-commerce) var(--ease);font-size:var(--t-label-size);font-weight:var(--t-label-weight);letter-spacing:var(--t-label-ls)}
.navtop-menu:hover{color:var(--ink)}
/* ERATOS menu mark: three soft bristle strokes, hand-drawn in the spirit of the
   wordmark. They fan apart a little on hover, the way bristles do under a hand. */
.menu-mark{width:22px;height:16px;overflow:visible;flex:none}
.menu-mark path{
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;
  transition:transform var(--dur-commerce) var(--ease);transform-origin:left center;
}
.navtop-menu:hover .menu-mark path:nth-child(1){transform:translateY(-.6px)}
.navtop-menu:hover .menu-mark path:nth-child(3){transform:translateY(.6px)}
.navtop-menu[aria-expanded="true"]{color:var(--ink)}

@media (max-width:760px){
  /* on a phone the word is dropped; the mark alone opens the menu */
  .navtop-menu span{display:none}
  .navtop-menu{padding:8px 2px}
  .menu-mark{width:24px;height:17px}
}

/* ---------------------------------------------------------------
   THE DRAWER (CODE-10)
   One left menu at every width. The first pass read like a table:
   a full-width rule under every row, everything shouted in caps,
   grey thumbnail boxes. This one keeps the same structure but lets
   it breathe — rules only where a real section changes, sentence
   case for anything a customer reads, round plates that echo the
   circular discovery on the homepage, and a hairline + / − instead
   of a heavy control.
   --------------------------------------------------------------- */
.mnav{
  position:fixed;top:0;left:0;bottom:0;z-index:220;width:min(376px,88vw);
  background:var(--canvas);box-shadow:1px 0 0 var(--line), 24px 0 60px -30px rgba(30,24,18,.28);
  transform:translateX(-101%);transition:transform var(--dur-content) var(--ease);
  display:flex;flex-direction:column;overflow:hidden;
}
.mnav.open{transform:none}
body.mnav-open{overflow:hidden}

.mnav > header{
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 26px 20px;flex:none;
}
.mnav > header .wm{height:38px;width:auto;display:block;opacity:.92}
.mnav > header .iconbtn{opacity:.5;transition:opacity var(--dur-commerce) var(--ease)}
.mnav > header .iconbtn:hover{opacity:1}

.dr-search{display:flex;align-items:center;gap:11px;width:calc(100% - 52px);margin:0 26px 4px;padding:12px 18px;cursor:pointer;background:transparent;border:1px solid var(--line);border-radius:999px;font-family:var(--ui);color:var(--ink-faint);transition:border-color var(--dur-commerce) var(--ease),color var(--dur-commerce) var(--ease);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.dr-search:hover{border-color:var(--line-strong);color:var(--ink-soft)}
.dr-search svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;flex:none;opacity:.7}

.mnav .body{flex:1;overflow-y:auto;padding:14px 0 28px;-webkit-overflow-scrolling:touch}

/* ---- level 1: the only place a rule is allowed, and even then it is faint */
.mnav .body > .dr-item + .dr-item,
.mnav .body > .mnav .dr-flat{border-top:1px solid var(--line)}
.mnav .body > .dr-flat:first-of-type{margin-top:2px}

.dr-l1{display:flex;align-items:center;width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:17px 26px;color:var(--ink-soft);font-family:var(--ui);transition:color var(--dur-commerce) var(--ease);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.dr-l1:hover{color:var(--ink)}
.dr-item.dr-open > .dr-l1{color:var(--ink)}

/* ---- level 2: the families. No rules at all — hover does the separating. */
.dr-l2{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:9px 26px;color:var(--ink);font-family:var(--ui);text-transform:none;transition:background var(--dur-commerce) var(--ease);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.dr-l2:hover{background:var(--milk)}
.dr-name{flex:1;line-height:1.25}
.dr-n{font-family:var(--ui);color:var(--ink-faint);font-variant-numeric:tabular-nums;font-size:var(--t-label-size);font-weight:var(--t-label-weight);letter-spacing:var(--t-label-ls)}

/* Yuvarlak çerçeve KALDIRILDI (sahip, 9 Eylül 2026). Kare bir ürün
   fotoğrafını daireye oturtmak köşelerini kırpıyor ve arkasında gri bir disk
   bırakıyordu — sahibin deyimiyle "kare ama çerçevesi yuvarlak, saçma
   görüntü". Fotoğraf kare, çerçevesi de kare, arkasında katman yok. */
.dr-thumb{
  width:42px;height:42px;border-radius:0;overflow:hidden;background:transparent;
  flex:none;display:block;position:relative;
}
.dr-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:14%}

/* ---- the + / − : two hairlines, the upright one folding away when open */
.dr-sign{position:relative;width:10px;height:10px;margin-left:12px;flex:none;opacity:.55}
.dr-sign::before,.dr-sign::after{
  content:"";position:absolute;left:0;top:4.5px;width:10px;height:1px;
  background:currentColor;transition:transform var(--dur-commerce) var(--ease);
}
.dr-sign::after{transform:rotate(90deg)}
.dr-item.dr-open > .dr-l1 .dr-sign::after,
.dr-item.dr-open > .dr-l2 .dr-sign::after{transform:rotate(0deg)}
.dr-l2:hover .dr-sign,.dr-l1:hover .dr-sign{opacity:.85}

.dr-panel{display:none}
.dr-item.dr-open > .dr-panel{display:block}
/* a family's own sub-list sits on a slightly warmer ground so the level reads
   without needing a border */
.dr-item .dr-item.dr-open > .dr-panel{background:var(--milk);padding:2px 0 8px}

/* ---- level 3: sentence case, quiet, indented to clear the plate */
.mnav .dr-l3{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 26px 9px 82px;text-decoration:none;border:0;font-family:var(--ui);color:var(--ink-soft);transition:color var(--dur-commerce) var(--ease);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.mnav .dr-l3:hover{color:var(--ink)}
/* a level-3 that hangs off a LEVEL-1 section (the care areas) has no thumbnail
   column above it, so it lines up with the section label instead. Only the
   family sub-lists carry the 82px indent that clears the round plate. */
.mnav .body > .dr-item > .dr-panel > .mnav .dr-l3{padding-left:26px}

/* ---- flat entries read like the families, not like shouted buttons */
.mnav .dr-flat{display:flex;align-items:center;width:100%;text-decoration:none;padding:16px 26px;color:var(--ink);font-family:var(--ui);transition:background var(--dur-commerce) var(--ease);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.mnav .dr-flat:hover{background:var(--milk)}
/* Marka/iletişim bağlantıları ürün yollarının devamı değil: araya ince bir
   ayrım çizgisi ve bir nefes giriyor. */
.mnav .dr-flat.dr-sep{border-top:1px solid var(--line);margin-top:10px;padding-top:20px}

.dr-foot{padding:26px 26px 0;margin-top:8px;border-top:1px solid var(--line)}
.dr-foot .langs{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.dr-foot .langs button{background:none;border:0;cursor:pointer;padding:7px 16px;font-family:var(--ui);color:var(--ink-faint);transition:background var(--dur-commerce) var(--ease),color var(--dur-commerce) var(--ease);font-size:var(--t-button-size);font-weight:var(--t-button-weight);letter-spacing:var(--t-button-ls)}
.dr-foot .langs button[aria-pressed="true"]{background:var(--ink);color:var(--canvas)}

.mnav-scrim{position:fixed;inset:0;z-index:210;background:rgba(30,24,18,.28);
  opacity:0;visibility:hidden;transition:opacity var(--dur-content) var(--ease),visibility var(--dur-content)}
.mnav-scrim.open{opacity:1;visibility:visible}

/* the drawer replaced the mega menu entirely */
.mega,.megawrap .mega{display:none!important}

/* ============================================================
   CHECKOUT — sipariş sayfası.
   Ödeme sağlayıcısı bağlanana kadar bu sayfa sipariş ALMAZ ve
   aldığını söylemez; eksik yapılandırmayı adlandırıp formu
   kilitler. Yanlış kargo ücretiyle sipariş almaktansa sipariş
   almamak doğrudur (assets/checkout-config.js).
   ============================================================ */
.co-layout{display:grid;grid-template-columns:1fr 340px;gap:40px;margin-top:34px;align-items:start}
@media(max-width:860px){.co-layout{grid-template-columns:1fr;gap:28px}}
.co-layout.co-locked{opacity:.45;pointer-events:none}

.co-block{border:0;border-top:1px solid var(--line);padding:22px 0 4px;margin:0}
.co-block legend{font-family:var(--ui);color:var(--ink-soft);padding:0 10px 0 0;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.co-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.co-grid{grid-template-columns:1fr}}
.co-field{display:flex;flex-direction:column;gap:6px}
.co-field.co-wide{grid-column:1/-1}
.co-field span{font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.co-field input,.co-field textarea,.co-field select{font-family:var(--ui);padding:12px 14px;border:1px solid var(--line-strong);border-radius:3px;background:var(--canvas);color:var(--ink);width:100%;transition:border-color var(--dur-utility) var(--ease);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.co-field input:focus,.co-field textarea:focus,.co-field select:focus{outline:none;border-color:var(--ink)}
.co-field input:invalid:not(:placeholder-shown){border-color:#a4483c}
.co-note{font-family:var(--ui);color:var(--ink-soft);margin-top:10px;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
.co-actions{margin-top:30px}
.co-consent{display:flex;gap:10px;align-items:flex-start;margin-top:26px;font-family:var(--ui);color:var(--ink);cursor:pointer;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls);line-height:var(--t-body-lh)}
.co-consent input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:currentColor}
.co-consent a{text-decoration:underline;text-underline-offset:2px}

.co-summary{background:var(--milk);border:1px solid var(--line);border-radius:4px;padding:22px}
.co-summary h3{font-family:var(--ui);color:var(--ink);margin:0 0 16px;font-size:var(--t-h3-size);font-weight:var(--t-h3-weight);letter-spacing:var(--t-h3-ls);line-height:var(--t-h3-lh)}
.co-line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px;font-family:var(--ui);padding:9px 0;border-bottom:1px solid var(--line);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.co-line-n{flex:1 1 auto}
.co-line-p{flex:1 0 100%;color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.co-row{display:flex;justify-content:space-between;font-family:var(--ui);padding:9px 0;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.co-row.co-total{border-top:1px solid var(--line-strong);margin-top:6px;padding-top:13px;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.co-eng{display:flex;justify-content:space-between;gap:12px;font-family:var(--ui);padding:9px 0;border-bottom:1px solid var(--line);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}

.co-blocked{border:1px solid var(--line-strong);border-radius:4px;padding:20px 22px;
  margin-top:26px;background:var(--milk)}
.co-blocked-h{font-family:var(--ui);margin:0 0 8px;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.co-blocked-p{font-family:var(--ui);color:var(--ink-soft);margin:0 0 12px;max-width:64ch;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.co-blocked code{font-family:var(--mono,monospace);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.co-blocked ul{margin:0;padding-left:20px;font-family:var(--ui);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls);line-height:var(--t-body-lh)}

.co-done{text-align:center;padding:60px 0}
.co-done-h{font-family:var(--display);margin:0 0 12px;font-size:var(--t-h2-size);font-weight:var(--t-h2-weight);letter-spacing:var(--t-h2-ls);line-height:var(--t-h2-lh)}

/* ============================================================
   DOKUNMA HEDEFLERİ — mobil.
   Ölçüm (2026-09-08, 375px): 34 hedef 40px altındaydı. "EKLE"
   butonu 48×34, kategori açma düğmesi 28×33. Apple ve Google'ın
   ikisi de 44px öneriyor; parmakla ıskalanan bir "sepete ekle"
   doğrudan satış kaybıdır.
   Yalnızca dokunmatik/dar ekranda büyütülüyor; masaüstündeki
   ince tipografik denge korunuyor.
   ============================================================ */
@media(max-width:760px){
  .cart-line .qty button,.bagitem .qty button{min-width:44px;min-height:44px}
  /* dar kartta "Sepete ekle" fiyatın altında, tam genişlik: fiyat uzunluğu ne olursa
     olsun her kartta aynı yerde durur (30 Eylül 2026) */
  .pcard .pfoot{flex-direction:column;align-items:stretch}
  .pcard .add{width:100%}
  .pcard .fav{width:44px;height:44px}
  .symopts .sym{width:52px;height:52px}
  .symopts .sym[data-name]:hover::after{display:none}
  /* metin bağlantıları: satır yüksekliğiyle birlikte dokunulabilir alan */
  .foot a{display:inline-block;padding:11px 0}
  /* Ölçülen gerçek seçiciler (2026-09-08, 375px). Tahminle değil,
     çalışan sayfadan okunan sınıf adlarıyla. */
  .navtop-menu{min-width:44px;min-height:44px}       /* Kategoriler açıcı: 28×33 idi */
  .chip{min-height:44px;padding-top:10px;padding-bottom:10px}   /* filtre çipleri: 38 idi */
  .crumb a{padding:12px 0}                            /* ekmek kırıntısı: 32 idi */
  .bagitem .qty button,.cart-line .qty button,
  .pgrid .fav,.pcard .fav{min-width:44px;min-height:44px}
  .pager button{min-width:44px;min-height:44px}      /* sayfalama: 40×40 idi */
  /* Marka kilidi (a.brand) ve modal kapatma (button.x) bilerek küçük
     bırakıldı: ikisi de tek başına duran, çevresinde boşluk olan
     hedefler ve büyütmek başlığın dengesini bozuyor. */
}
/* En küçük yazılar: 375px'de 80 düğüm 12px altındaydı. Mikro
   etiketlerin karakteri korunuyor, okunabilir tabana çekiliyor. */
@media(max-width:760px){
  .kicker,.eyebrow,.disc-n,.cat,.note,.region,.protonote{font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
}

/* ============================================================
   "BİRLİKTE AL" — the bundle builder (assets/set-pairs.js).

   Deliberately quieter than the competitor's version of this
   component: no saving badge, no countdown, no red. The row is a
   checkbox, a photograph, a name and a real price; the only
   emphasis is the running total, because that is the one number
   the customer is deciding about.

   The whole row is a <label>, so the tap target is the row, not
   the 16px checkbox — this component lives below the fold on a
   phone and a small target there is a lost basket.
   ============================================================ */
.bundle{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--canvas)}
.bundle-items{display:block}
.bundle-item{display:grid;grid-template-columns:22px 72px 1fr auto;gap:14px;align-items:center;
  padding:14px 18px;border-bottom:1px solid var(--line);cursor:pointer;min-height:44px}
.bundle-item:hover{background:var(--stone)}
.bundle-item input{width:18px;height:18px;accent-color:var(--ink);cursor:pointer;margin:0}
.bundle-item .frame{width:72px;height:72px;background:var(--stone);border-radius:4px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.bundle-item .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8%}
.bundle-item .frame svg{width:38%;stroke:var(--line-strong);fill:none;stroke-width:1.1;color:var(--ink-faint)}
.bundle-txt{min-width:0}
.bundle-nm{display:block;font-family:var(--ui);color:var(--text-primary);text-decoration:none;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.bundle-nm:hover{text-decoration:underline}
.bundle-cat{display:block;font-family:var(--ui);color:var(--text-secondary);margin-top:3px;font-size:var(--t-label-size);font-weight:var(--t-label-weight);letter-spacing:var(--t-label-ls)}
.bundle-pr{font-family:var(--ui);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text-primary);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
/* an unticked row stays fully legible — it is a real product, not a disabled
   control; only the price recedes, because it has left the total */
.bundle-item:has(input:not(:checked)) .bundle-pr{color:var(--ink-faint)}
.bundle-item:has(input:not(:checked)) .frame{opacity:.55}

/* one stone panel closes the component, so the honest no-discount note sits on
   the same ground as the total instead of on a stripe that stops mid-sentence */
.bundle-close{background:var(--stone)}
.bundle-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px;flex-wrap:wrap}
.bundle-total{display:flex;align-items:baseline;gap:10px}
.bundle-total .lbl{font-family:var(--ui);color:var(--text-secondary);font-size:var(--t-label-size);font-weight:var(--t-label-weight);letter-spacing:var(--t-label-ls)}
.bundle-total strong{font-family:var(--ui);font-variant-numeric:tabular-nums;font-size:var(--t-h3-size);font-weight:var(--t-h3-weight);letter-spacing:var(--t-h3-ls);line-height:var(--t-h3-lh)}
.bundle-foot .btn{min-height:44px}
.bundle-foot .btn[disabled]{opacity:.45;cursor:not-allowed}
.bundle-note{padding:0 18px 18px;margin:0;font-family:var(--ui);color:var(--text-secondary);max-width:76ch;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}

@media (max-width:560px){
  .bundle-item{grid-template-columns:22px 56px 1fr;gap:12px;padding:12px 14px}
  .bundle-item .frame{width:56px;height:56px}
  /* the price drops under the name rather than squeezing it to two characters */
  .bundle-pr{grid-column:3;justify-self:start;margin-top:2px}
  .bundle-foot{padding:14px}
  .bundle-foot .btn{width:100%}
  .bundle-note{padding:0 14px 14px}
}

/* ============================================================
   THE CONCERN ROW (shop.html).

   The family switcher above it is navigation between the six real
   ERATOS families. This is a different question — the one the
   customer actually arrives with — so it is deliberately styled
   as a secondary line, not a second identical bar of chips: a
   quiet label, lighter chips, and it disappears entirely when the
   current view has fewer than two real concerns behind it.
   ============================================================ */
.need-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:14px 0 4px;padding-top:14px;border-top:1px solid var(--line)}
.need-lbl{font-family:var(--ui);color:var(--text-secondary);white-space:nowrap;font-size:var(--t-label-size);font-weight:var(--t-label-weight);letter-spacing:var(--t-label-ls)}
.need-chips{display:flex;gap:8px;flex-wrap:wrap}
.need-chips .chip{padding:7px 13px;min-height:36px;border-color:var(--line);font-size:var(--t-button-size);font-weight:var(--t-button-weight);letter-spacing:var(--t-button-ls)}
.need-chips .chip[aria-pressed="true"]{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
@media (max-width:560px){
  .need-row{gap:8px}
  /* the label takes its own line rather than stealing width from the chips */
  .need-lbl{flex:0 0 100%}
  /* the row scrolls sideways instead of stacking into four lines on a phone */
  .need-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:4px;scrollbar-width:none}
  .need-chips::-webkit-scrollbar{display:none}
  .need-chips .chip{white-space:nowrap;min-height:40px}
}

/* ============================================================
   THE ANNOUNCEMENT BAR — one thin line above the header.

   "İnce çizgi" literally: 30px of ink-dark ground, one sentence,
   mono type at 11px with wide tracking. It reads as a corporate
   rule line, not a promotion strip — no red, no exclamation, no
   rotating list of claims.

   The marquee is two identical runs side by side, each 50% of
   the track, translated by exactly -50%. That is what makes the
   loop seamless: when the first run has fully left, the second
   is exactly where the first began.
   ============================================================ */
.announce{
  background:var(--btn-cart);color:var(--btn-cart-text);
  height:38px;display:flex;align-items:center;overflow:hidden;
  position:relative;z-index:31;
}
.announce-track{display:flex;width:max-content;animation:announce-slide 18s linear infinite}
.announce-run{display:flex;flex:none;align-items:center}
.announce-item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:var(--ui);font-size:var(--t-small-size);font-weight:var(--fw-500);
  letter-spacing:var(--t-small-ls);line-height:1}
.announce-ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
/* ayırıcı: küçük yarı saydam beyaz nokta */
/* mesajlar arası mesafe geniş tutuldu (3 Ekim 2026): nokta + iki yanda 44 px */
.announce-dot{width:4px;height:4px;flex:none;border-radius:50%;background:currentColor;opacity:.45;margin:0 44px}
/* kayma = tam bir tur genişliği: --announce-n tur sayısı (fitAnnounce); -%100/n = bir tur */
@keyframes announce-slide{ from{transform:translateX(0)} to{transform:translateX(calc(-100% / var(--announce-n, 2)))} }
/* Üzerine gelince durur: kayan bir cümleyi okuyamamak, duran bir cümleden kötüdür. */
.announce:hover .announce-track{animation-play-state:paused}
/* Hareket azaltma: kaymaz; mesajlar aynı yerde yumuşak geçişle değişir (wireAnnounce). */
@media (prefers-reduced-motion:reduce){
  .announce{justify-content:center;padding:0 var(--gut)}
  .announce-track{animation:none;width:100%;justify-content:center;position:relative;height:100%}
  .announce-track .announce-run:not(:first-child){display:none}
  .announce-run{position:relative;width:100%;height:100%}
  .announce-dot{display:none}
  .announce-item{position:absolute;inset:0;justify-content:center;opacity:0;transition:opacity .6s var(--ease)}
  .announce-item.on{opacity:1}
}
/* yapışkan header görüntü alanının tepesinden ölçer, bu şeridin altından başlamalı */
.announce + .nav{top:38px}
@media (max-width:560px){
  .announce{height:34px}
  .announce-dot{margin:0 28px}
  .announce + .nav{top:34px}
}

/* ============================================================
   pazar yeri PUANLARI.

   Real ratings from ERATOS's own pazar yeri store, and they are
   styled to look like a SOURCED FACT rather than a review widget
   this site owns. No drawn stars: five gold stars beside a 12px
   product name turns the card into a marketplace tile and stops
   the photograph being the loudest thing on it. A number, the
   count, and the source — that is the whole component.
   ============================================================ */
/* ONE quiet line: star, score, count, source button. The star leads because
   it is the shape the eye reads as "rating" before it reads any number, and
   the line stays 11px so it can never outweigh the product name above it. */
.tyr{display:flex;align-items:center;gap:6px;margin-top:5px;font-family:var(--ui);color:var(--ink-faint);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.tyr-n{color:var(--text-primary);font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:3px;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
/* Beş yıldız: gri zemin, üstünde ortalamaya göre genişleyen koyu katman.
   Beş eş genişlikte karakter olduğu için yüzde doğrudan puana karşılık gelir
   (harf aralığı yok, yoksa oran kayar). */
/* ALTIN SARISI, PARLAK (sahip, 19 Eylül 2026: siyah → parlak bakır → altın →
   "yıldızların hepsi aynı renk altın sarısı olsun, parlasın"). Geçiş YUKARIDAN
   AŞAĞI: beş yıldız aynı yükseklikte olduğu için her biri birebir aynı tonu alır
   (soldan sağa geçiş her yıldızı farklı renkte gösteriyordu). Hafif ışıltı
   drop-shadow ile. Boş kısım açık bej. Mavi yalnız düğmelerde kalır. */
.tyr-stars{--yildiz:#F0B400;--yildiz-bos:#EFE7D6;position:relative;display:inline-block;flex:none;color:var(--yildiz-bos);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls);line-height:var(--t-body-lh)}
.tyr-stars::before{content:"★★★★★"}
.tyr-stars-on{position:absolute;left:0;top:0;bottom:0;overflow:hidden;white-space:nowrap;color:var(--yildiz)}
.tyr-stars-on::before{content:"★★★★★";background:linear-gradient(180deg,#FFE27A 0%,#F5BD12 52%,#DB9A00 100%);
  filter:drop-shadow(0 0 1.5px rgba(245,189,18,.55));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tyr-c{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tyr-c{font-variant-numeric:tabular-nums}
/* the source, on a real button so touch and keyboard reach it too */
.tyr-i{flex:none;width:14px;height:14px;border-radius:50%;border:1px solid var(--line-strong);background:none;color:var(--text-secondary);cursor:pointer;padding:0;font-family:var(--ui);display:inline-flex;align-items:center;justify-content:center;transition:background var(--dur-ui,.16s) var(--ease),color var(--dur-ui,.16s) var(--ease);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
.tyr-i:hover,.tyr-i[aria-expanded="true"]{background:var(--ink);color:var(--milk);border-color:var(--ink)}
.tyr-i:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* DOKUNMA HEDEFİ 24x24 (20 Eylül 2026) — WCAG 2.2'nin 2.5.8 "Target Size
   (Minimum)" ölçütü AA; EN 301 549'un 2026'da beklenen 4.1.1 sürümü WCAG 2.2'ye
   geçiyor. Düğmenin görünen dairesi 14 piksel kalır (satır yüksekliğini
   bozmasın), tıklanan alan görünmez bir katmanla 24'e çıkar. Yasal bilgiye
   açılan tek düğme bu; parmakla ıskalanmamalı. */
.tyr-i{position:relative}
.tyr-i::after{content:"";position:absolute;top:50%;left:50%;
  width:24px;height:24px;transform:translate(-50%,-50%)}
.tyr-pop{position:absolute;z-index:120;max-width:min(30ch,calc(100vw - 16px));padding:9px 12px;border-radius:5px;background:var(--ink);color:var(--milk);font-family:var(--ui);box-shadow:0 6px 22px rgba(27,26,24,.22);pointer-events:none;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}

/* On the product page there is room for the whole sentence, so the source and
   the date are printed rather than hidden in a tooltip. */
.tyr-pdp{display:flex;align-items:flex-start;gap:14px;margin:14px 0 2px;
  padding:14px 16px;background:var(--stone);border-radius:5px;max-width:52ch}
.tyr-score{font-family:var(--ui);font-variant-numeric:tabular-nums;color:var(--text-primary);flex:none;font-size:var(--t-h2-size);font-weight:var(--t-h2-weight);letter-spacing:var(--t-h2-ls);line-height:var(--t-h2-lh)}
.tyr-score .tyr-of{color:var(--text-secondary);margin-left:1px;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.tyr-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.tyr-count{font-family:var(--ui);color:var(--text-primary);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.tyr-note{font-family:var(--ui);color:var(--text-secondary);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
@media (max-width:560px){
  .tyr-pdp{padding:12px 14px;gap:12px}
  .tyr-score{}
}
/* store-level proof, directly under the hero CTAs where the decision happens */
.hero-proof{margin:18px 0 0;font-family:var(--ui);color:var(--text-secondary);max-width:46ch;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
@media (max-width:560px){ .hero-proof{margin-top:14px} }

/* ============================================================
   TIKLAMA HİSSİ — "marifet gibi hissettirsin" (sahip, 9 Eylül 2026)

   Marka arınma anlatıyor, karnaval değil. O yüzden ses yok,
   sıçrama yok, konfeti yok. Üç küçük şey var:

   1. basınca buton bir piksel çöker — parmağın altında maddesi
      olduğunu hissettirir,
   2. değdiğin noktadan suya düşen damla gibi bir halka yayılır,
   3. yazı, çizilerek beliren bir onay işaretine yerini bırakır.

   prefers-reduced-motion açıksa üçü de kapanır; buton yine
   çalışır, sadece sessizce.
   ============================================================ */
.btn,.pcard .add{position:relative;overflow:hidden;isolation:isolate}
.btn:active,.pcard .add:active{transform:translateY(1px) scale(.985)}
.eratos-ripple{
  position:absolute;z-index:0;border-radius:50%;pointer-events:none;
  background:rgba(255,255,255,.30);
  transform:translate(-50%,-50%) scale(0);
  animation:eratos-ripple .62s cubic-bezier(.2,.7,.3,1) forwards;
}
/* açık zeminli butonda beyaz halka görünmez; mürekkeple çizilir */
.btn-primary .eratos-ripple,.pcard .add .eratos-ripple{background:rgba(27,26,24,.14)}
@keyframes eratos-ripple{ to{ transform:translate(-50%,-50%) scale(1); opacity:0 } }
/* halkanın altında kalmasınlar */
/* DÜZELTİLDİ (14 Eylül 2026, sahip: "butona basılmıyor"). Bu kural eskiden
   ".btn > *" idi ve dalga (.eratos-ripple) da butonun çocuğu olduğu için onu
   da yakalıyordu: aynı özgüllükte ve SONRA geldiği için dalganın
   position:absolute'unu eziyordu. Dalga akışa girip butonu şişiriyordu —
   ölçüldü: basınca 53px -> 578px. Buton parmağın altından kayıyor, tıklama
   kayboluyordu. 9 Eylül'den beri canlıda da vardı. */
.btn > :not(.eratos-ripple),.pcard .add > :not(.eratos-ripple){position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){
  .btn:active,.pcard .add:active{transform:none}
  .eratos-ripple{display:none}
}

/* ============================================================
   YASAL SAYFALAR (mesafeli satış, iade, teslimat, KVKK, çerez)
   11 Eylül 2026'da eklendi. Sayfalar şu an İSKELET: başlıklar
   var, metin yok — metin hukuk danışmanından gelecek.
   `.yasal-uyari` bunu ziyaretçiye açıkça söyler; metin girince
   o kutu silinir, kalan biçim aynen çalışır.
   ============================================================ */
.wrap.yasal{max-width:74ch}
.wrap.yasal .big{margin-bottom:14px}

.yasal-uyari{margin:30px 0 10px;padding:18px 20px;border:1px solid var(--line);
  border-left:3px solid var(--graphite);background:rgba(23,28,24,.035);border-radius:2px}
.yasal-uyari strong{display:block;font-family:var(--ui);margin-bottom:6px;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.yasal-uyari p{margin:0;opacity:.8;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls);line-height:var(--t-body-lh)}

.yasal-bolum{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.yasal-bolum:first-of-type{border-top:0}
.yasal-bolum h2{margin-bottom:10px;font-size:var(--t-h3-size);font-weight:var(--t-h3-weight);letter-spacing:var(--t-h3-ls);line-height:var(--t-h3-lh)}
.yasal-bolum p{margin:0;line-height:1.8}

/* Metinler yazılınca bölümler tek paragraf olmaktan çıktı (11 Eylül 2026).
   `p{margin:0}` iskelet için doğruydu; ard arda gelen paragraflar yapışıyordu.
   Yalnız KOMŞU paragrafa boşluk veriliyor, ilkine değil — başlık altındaki
   ilk satırın hizası bozulmasın diye. */
.yasal-bolum p + p,
.yasal-bolum ul + p,
.yasal-bolum p + ul,
.yasal-bolum table + p{margin-top:14px}
.yasal-bolum h3{font-family:var(--ui);margin:22px 0 8px;opacity:.85;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.yasal-bolum ul{margin:0;padding-left:20px;line-height:1.8}
.yasal-bolum ul li + li{margin-top:10px}
.yasal-bolum code{font-family:var(--mono);font-size:var(--t-small-size);
  background:rgba(23,28,24,.05);padding:1px 5px;border-radius:2px}

/* Yasal tablolar. Dar ekranda kendi içinde kayar; sayfa yatay kaymaz. */
.yasal-tablo{width:100%;border-collapse:collapse;margin-top:14px;display:block;overflow-x:auto;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.yasal-tablo th,.yasal-tablo td{border:1px solid var(--line);padding:9px 12px;
  text-align:left;vertical-align:top}
.yasal-tablo th{font-family:var(--ui);background:rgba(23,28,24,.035);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}

/* Künye: etiket/değer çiftleri. Dar ekranda alt alta iner. */
.kunye{display:grid;grid-template-columns:minmax(11ch,auto) 1fr;gap:8px 20px;margin:0}
.kunye dt{font-family:var(--ui);opacity:.62;padding-top:2px;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.kunye dd{margin:0;line-height:1.7}
@media (max-width:560px){
  .kunye{grid-template-columns:1fr;gap:2px 0}
  .kunye dd{margin-bottom:12px}
}

/* ============================================================
   KENDİ HAMAM SETİNİ OLUŞTUR

   Yeni bir tasarım dili DEĞİL: zemin --plate-stone, düğmeler
   .btn/.btn-primary, tipografi --ui/--display, köşe yarıçapı ve
   çizgiler sayfanın geri kalanıyla aynı. Bu bölümün kendine ait
   tek şeyi düzeni: solda seçim, sağda setin oluştuğu tepsi.
   ============================================================ */
/* Ekran okuyucuya duyurulan ama gozle gorunmemesi gereken metin.
   Boyle bir yardimci sinif sitede yoktu; canli bolge metni sayfada duz yazi
   olarak gorunuyordu ("... setine eklendi" cumlesi ekrana basiliyordu). */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.set-sec{background:var(--canvas-soft)}
.set-head{max-width:56ch}
.set-head .lede{margin-top:10px}
.set-steps{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:18px 0 22px;padding:0;list-style:none;font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.set-steps li{display:flex;align-items:center;gap:10px}
.set-steps li+li::before{content:"\2192";opacity:.45;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}

/* ---- stage: picker + tray ---- */
.set-stage{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;
  gap:clamp(20px,2.6vw,38px);margin-top:clamp(24px,3vw,36px);
  align-items:start;
}
/* [hidden] bir tarayici varsayilanidir (display:none) ve SINIF secicisinden
   zayiftir: .set-stage{display:grid} onu eziyordu, yani sahne "Setimi
   olusturmaya basla" dugmesine basilmadan aciktı ve dugme islevsizdi.
   Ayni tuzak .set-bar'da da vardi (0 urunle "0 urun" cubugu gorunuyordu). */
.set-stage[hidden]{display:none}
@media (max-width:980px){ .set-stage{grid-template-columns:1fr} }

.set-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.set-tab{font-family:var(--ui);padding:8px 15px;border-radius:999px;border:1px solid var(--line-strong);background:none;color:var(--ink-soft);cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.set-tab:hover{border-color:var(--ink);color:var(--ink)}
.set-tab.is-on{background:var(--ink);border-color:var(--ink);color:var(--milk)}
.set-tab:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.set-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:clamp(12px,1.5vw,20px);
}
/* sekme gecisi: icerik degisirken kisa bir sonme, sayfa ziplamaz */
.set-grid.is-swap>*{opacity:0}
.set-grid>*{transition:opacity .22s var(--ease)}

/* min-width:0 sart: uzun bir <option> metni grid sutununu kendi genisligine
   zorluyordu ve telefonda iki sutundan biri digerinin uc kati oluyordu. */
.set-opt{display:flex;flex-direction:column;gap:7px;position:relative;height:100%;min-width:0}
.set-opt-media{
  aspect-ratio:1/1;border-radius:4px;overflow:hidden;position:relative;
  background:transparent;display:block;
}
.set-opt-media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:10%;
  transition:transform var(--dur-content) var(--ease);
}
.set-opt:hover .set-opt-media img{transform:scale(1.04)}
.set-opt h4{margin:0;overflow-wrap:anywhere;font-family:var(--ui);color:var(--ink);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
/* kucuk gri aciklama okunabilir olsun: 11px/ink-faint yerine 12px/ink-soft */
.set-opt-fact{margin:0;font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
.set-var{display:flex;flex-direction:column;gap:3px;font-family:var(--ui)}
.set-var-l{color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.set-var select{font-family:var(--ui);padding:6px 8px;color:var(--ink);border:1px solid var(--line-strong);border-radius:4px;background:var(--milk);max-width:100%;width:100%;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.set-var{min-width:0}
.set-add{margin-top:auto;font-family:var(--ui);padding:8px 12px;border-radius:999px;border:1px solid var(--ink);background:none;color:var(--ink);cursor:pointer;align-self:start;transition:background .18s var(--ease),color .18s var(--ease);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.set-add:hover{background:var(--ink);color:var(--milk)}
.set-add:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.set-opt.is-picked .set-opt-media{box-shadow:inset 0 0 0 2px var(--ink)}

/* ---- the tray: where the set appears ---- */
.set-side-in{
  background:var(--milk);border:1px solid var(--line);border-radius:6px;
  padding:clamp(16px,1.6vw,22px);
}
@media (min-width:981px){
  /* bolum icinde gezerken gorunur kalir, ama sonraki bolumu ortmez:
     sticky yalniz kendi grid hucresi boyunca yapisir */
  .set-side{position:sticky;top:88px}
}
.set-mine{margin:0 0 12px;font-family:var(--ui);color:var(--ink);display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.set-count{color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.set-empty{margin:0;padding:26px 4px;text-align:center;font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
.set-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;
  max-height:min(46vh,420px);overflow-y:auto}
.set-item{
  display:grid;grid-template-columns:46px minmax(0,1fr) auto auto;
  gap:10px;align-items:center;
}
.set-item-media{
  aspect-ratio:1/1;border-radius:3px;overflow:hidden;position:relative;
  background:transparent;
}
.set-item-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:9%}
.set-item-body{display:flex;flex-direction:column;gap:1px;min-width:0}
.set-item-n{font-family:var(--ui);color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
.set-item-v{font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.set-qty{display:flex;align-items:center;gap:2px}
.set-qty button{width:22px;height:22px;border-radius:50%;border:1px solid var(--line-strong);background:none;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--t-button-size);font-weight:var(--t-button-weight);letter-spacing:var(--t-button-ls);line-height:var(--t-button-lh)}
.set-qty button:hover{background:var(--mineral)}
.set-qty button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.set-qty-n{min-width:18px;text-align:center;font-family:var(--ui);font-variant-numeric:tabular-nums;color:var(--ink);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.set-rm{width:22px;height:22px;border:0;background:none;color:var(--ink-faint);cursor:pointer;border-radius:50%;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls);line-height:var(--t-body-lh)}
.set-rm:hover{color:var(--ink);background:var(--mineral)}
.set-rm:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.set-price-note{margin:14px 0 12px;font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
.set-actions{display:flex;flex-direction:column;gap:8px}
.set-actions .btn{width:100%;justify-content:center}
.set-actions .btn:disabled{opacity:.4;cursor:not-allowed}
.set-nochannel{margin:0;font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}

/* ---- item enter / leave (~220-260ms, position + opacity + slight scale) ---- */
@keyframes setIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes setOut{from{opacity:1;transform:none}to{opacity:0;transform:translateX(14px) scale(.96)}}
.set-item.set-in{animation:setIn .24s cubic-bezier(.22,.61,.36,1) both}
.set-item.set-out{animation:setOut .2s cubic-bezier(.4,0,1,1) both}
/* the travelling photograph; never blocks a click */
.set-ghost{
  position:fixed;z-index:200;pointer-events:none;object-fit:contain;
  border-radius:4px;background:transparent;padding:6px;
  transition:transform .26s cubic-bezier(.22,.61,.36,1),opacity .26s linear;
  will-change:transform,opacity;
}

/* ---- mobile: compact summary bar ---- */
.set-bar{display:none}
.set-bar[hidden]{display:none}
@media (max-width:980px){
  .set-side{margin-top:22px}
  .set-side-in{position:static}
  .set-bar{
    display:block;position:sticky;bottom:0;z-index:60;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:linear-gradient(to top,var(--canvas-soft) 62%,rgba(242,240,236,0));
    pointer-events:none;
  }
  .set-bar-btn{pointer-events:auto;width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;border-radius:999px;border:0;cursor:pointer;background:var(--ink);color:var(--milk);font-family:var(--ui);box-shadow:0 6px 22px rgba(27,26,24,.2);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
  .set-bar-n{font-variant-numeric:tabular-nums;opacity:.85}
  .set-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
@media (max-width:430px){
  .set-grid{grid-template-columns:1fr 1fr;gap:12px}
  .set-steps{}
}

/* azaltilmis hareket: secim de ozet de aynen calisir, yalniz hareket susar */
@media (prefers-reduced-motion:reduce){
  .set-item.set-in,.set-item.set-out{animation:none}
  .set-ghost{display:none}
  .set-grid>*{transition:none}
  .set-opt:hover .set-opt-media img{transform:none}
}

/* ================= BAKIR KOLEKSİYONU (bakir.html) — 15 Eylül 2026 =========
   Solda hikâye, sağda gerçek bir ilan fotoğrafı (tütsülük + demet, saten
   zemin); altında gruplara atlama çipleri, her grup kendi ızgarasıyla. */
.bk-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center}
.bk-hero-copy h1.big{font-family:var(--display);margin:14px 0 0;max-width:12ch;font-size:var(--t-display-size);font-weight:var(--t-display-weight);letter-spacing:var(--t-display-ls);line-height:var(--t-display-lh)}
.bk-hero-copy .lede{max-width:44ch}
.bk-facts{list-style:none;margin:24px 0 0;padding:18px 0 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 26px}
.bk-facts li{font-family:var(--ui);color:var(--ink);display:flex;align-items:center;gap:10px;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.bk-facts li::before{content:"";width:7px;height:7px;border-radius:50%;background:#B8734A;flex:none}
.bk-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.bk-hero-media{margin:0;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--chalk)}
.bk-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.bk-jump{padding-top:0;padding-bottom:0}
.bk-jump-row{display:flex;flex-wrap:wrap;gap:10px}
.bk-jump-row .chip{text-decoration:none}
.bk-jump-n{color:var(--ink-faint);margin-left:4px}
.bk-group .pgrid{margin-top:clamp(22px,3vw,36px)}
.bk-group{scroll-margin-top:90px}
.bk-how-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start}
.bk-steps{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:16px}
.bk-steps li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start}
.bk-steps p{margin:4px 0 0;max-width:52ch}
.bk-step-n{width:34px;height:34px;border-radius:50%;border:1px solid #B8734A;color:#8E5634;display:flex;align-items:center;justify-content:center;font-family:var(--ui);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.bk-note{margin:18px 0 0;color:var(--ink-soft);max-width:60ch;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.bk-care{padding:26px 28px;border:1px solid var(--line);border-radius:8px;background:var(--milk)}
.bk-care h3{margin:0 0 10px;font-family:var(--display);font-size:var(--t-h3-size);font-weight:var(--t-h3-weight);letter-spacing:var(--t-h3-ls);line-height:var(--t-h3-lh)}
.bk-care p{margin:0;color:var(--ink-soft)}
@media (max-width:860px){
  .bk-hero,.bk-how-grid{grid-template-columns:1fr}
  .bk-hero-media{order:-1;aspect-ratio:4/4}
  .bk-cta .btn{flex:1 1 auto;justify-content:center}
}
/* ================= KAYDIRMALI ÜRÜN RAFI (site.js railHTML) — 15 Eylül 2026 ===
   Masaüstünde 4, tablette 3, telefonda 2,2 kart görünür (yanda bir sonraki
   kartın kenarı görünür ki kaydırılabildiği anlaşılsın). Oklar görselin
   ortasına hizalı; başta/sonda kendini gizler. */
.rail{--rail-gap:clamp(10px,1.4vw,20px);position:relative;margin-top:clamp(22px,3vw,34px)}
.rail-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * var(--rail-gap)) / 4);
  gap:var(--rail-gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:6px}
.rail-track::-webkit-scrollbar{display:none}
.rail-track:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.rail-item{min-width:0;scroll-snap-align:start;display:flex}
.rail-item > .pcard{width:100%}
.rail-btn{position:absolute;top:var(--rail-arrow-top,32%);transform:translateY(-50%);z-index:4;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);cursor:pointer;
  background:rgba(250,249,247,.96);color:var(--ink);box-shadow:0 8px 22px rgba(27,26,24,.10);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
.rail-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rail-btn:hover{background:var(--milk);border-color:var(--ink);color:var(--ink)}
.rail-prev{left:-23px}
.rail-next{right:-23px}
.rail-btn:disabled{opacity:0;pointer-events:none}
.rail-static .rail-btn{display:none}
@media (max-width:1080px){ .rail-track{grid-auto-columns:calc((100% - 2 * var(--rail-gap)) / 3)} .rail-prev{left:-10px} .rail-next{right:-10px} }
@media (max-width:760px){
  .rail-track{grid-auto-columns:calc((100% - 2 * var(--rail-gap)) / 2.2)}
  .rail-btn{width:40px;height:40px}
  .rail-prev{left:-6px} .rail-next{right:-6px}
}
/* Ana sayfa aile rafları: telefonda ok yok, parmakla kaydırılır; yandaki kartın ucu
   göründüğü için kaydırılabildiği anlaşılır (1 Ekim 2026). */
@media (max-width:760px){ #familyShelves .rail-btn{display:none} }
@media (prefers-reduced-motion:reduce){ .rail-btn{transition:none} }

/* ================= SETİN İÇERİĞİ (careSetHTML) — 15 Eylül 2026 =============
   İpek kese setinin iki parçası, sahibin ayrı fotoğraflarıyla: aynı zemin,
   aynı ölçek (yüz kesesi gerçekte küçük olduğu için küçük durur), araya "+". */
.care-set{margin-top:clamp(24px,3vw,36px);padding-top:20px;border-top:1px solid var(--line);max-width:520px}
.care-set-h{margin:0 0 14px;font-family:var(--ui);color:var(--ink-faint);font-size:var(--t-label-size);font-weight:var(--t-label-weight);letter-spacing:var(--t-label-ls)}
.care-set-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(8px,1.4vw,16px)}
.care-set-item{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0;color:inherit;text-decoration:none}
a.care-set-item:hover .care-set-cap b{text-decoration:underline;text-underline-offset:3px}
.care-set-media{position:relative;display:block;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:var(--chalk)}
.care-set-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.care-set-media.fit-contain img{object-fit:contain;padding:6%}
.care-set-cap{display:flex;flex-direction:column;gap:2px;font-family:var(--ui)}
.care-set-cap b{color:var(--ink);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.care-set-cap span{color:var(--ink);font-variant-numeric:tabular-nums;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.care-set-plus{font-family:var(--display);color:var(--ink-faint);margin-top:-34px;font-size:var(--t-h2-size);font-weight:var(--t-h2-weight);letter-spacing:var(--t-h2-ls);line-height:var(--t-h2-lh)}
.care-set-note{margin:14px 0 0;color:var(--ink-soft);max-width:46ch;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}

/* SATIR DÜZENİ (careStoryHTML cfg.row) — sahip, 19 Eylül 2026: büyük görsel
   yok; set tek sıra ("set = parça + parça" ya da "ürün + ürün + ürün").
   Masaüstünde metin bir yanda, set satırı öbür yanda; telefonda alt alta.
   DOM sırası telefona göre (başlık, metin, satır, düğme); masaüstünde grid
   alanlarıyla yan yana dizilir. */
.care-story.care-row{display:block}
.care-row .care-copy{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(28px,5vw,72px);
  grid-template-areas:"kick set" "h set" "p set" "cta set";grid-template-rows:auto auto auto 1fr;align-items:start}
.care-row .care-copy>.kicker{grid-area:kick}
.care-row .care-copy>h2{grid-area:h}
.care-row .care-copy>.lede{grid-area:p}
.care-row .care-copy>.care-cta{grid-area:cta}
.care-row .care-copy>.care-set{grid-area:set;align-self:center;margin-top:0;max-width:none;border-top:0;padding-top:0}
.care-row.flip .care-copy{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  grid-template-areas:"set kick" "set h" "set p" "set cta"}
.care-row .care-set-row{display:flex;align-items:center;gap:clamp(6px,1vw,14px)}
.care-row .care-set-item{flex:1 1 0}
/* alt satırı olan ve olmayan kareler aynı hizada dursun */
.care-row .care-set-cap{min-height:42px}
.care-row .care-set-plus{flex:none;margin-top:-40px}
.care-set-eq{color:var(--ink)}
/* kısa fayda satırları (paragraf yerine) */
.care-fayda{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;font-family:var(--ui);color:var(--ink);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls);line-height:var(--t-body-lh)}
.care-fayda li{display:flex;align-items:baseline;gap:10px}
.care-fayda li::before{content:"✓";flex:none;color:var(--ink-soft)}
.care-row .care-copy>.care-fayda{grid-area:p}
@media (max-width:860px){
  .care-row .care-copy,.care-row.flip .care-copy{display:block}
  .care-row .care-copy>.care-set{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
  .care-row .care-set-cap b{font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
  .care-row .care-set-plus{margin-top:-36px;font-size:var(--t-body-lg-size);font-weight:var(--t-body-lg-weight);letter-spacing:var(--t-body-lg-ls)}
}
.care-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:26px}
.care-copy .care-cta .btn{margin-top:0}
.care-set-link{font-family:var(--ui);color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.care-set-link:hover{text-decoration-thickness:2px}.cart-recent{padding-top:clamp(10px,2vw,24px)}
/* ================= MAVİ YALNIZ BUTONLARDA (16 Eylül 2026) =====================
   Sahip: "mavi rengi her yerde kullanmışsın, sadece butonlarda kullanmanı
   söylemiştim; bütün sayfa maviden erkek bebek odasına döndü."

   Bu yüzden mavi (#A6C0D2 / #B8CEDD) artık SADECE tıklanan şeylerde: ana
   butonlar, sohbet düğmesi, indirim sekmesi. Footer, duyuru çubuğu, rozetler,
   sepet sayacı ve metin seçimi nötre döndü — krem zemin, mürekkep yazı.
   Footer siyah da değil (sahip: "siyah olması siteyi boğuyor"): sıcak krem,
   üstte ince çizgi. Mavi tek bir yerde tanımlı olduğu için geri almak
   isterse yalnız bu blok değişir. */
.foot{background:var(--chalk);color:var(--ink);border-top:1px solid var(--line-strong)}
.foot .wm{filter:none}
.foot .brand{color:var(--ink)}
.foot p,.foot .ph,.foot .region{color:var(--ink-soft)}
.foot h4{color:var(--ink);opacity:1}
.foot a{color:var(--ink-soft);opacity:1}
.foot a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.foot .protonote{color:var(--ink-faint);border-top-color:var(--line)}
.foot .foot-contact .fc-line{color:var(--ink-soft)}
.foot .foot-contact a{color:var(--ink);border-bottom-color:var(--line-strong)}
.foot .foot-contact a:hover{color:var(--ink);border-color:var(--ink)}
/* nötr küçük öğeler */
.cartcount{background:var(--ink);color:var(--milk)}
.pcard .badge:not(.personal){background:rgba(255,255,255,.92);color:var(--ink);border:1px solid var(--line-strong)}
::selection{background:rgba(27,26,24,.14);color:var(--ink)}
/* butonlar — mavi burada kalır */

/* ================= BUTONLAR: RENK DEĞİŞMEZ, YALNIZ HAREKET (15 Eylül 2026) ====
   Sahip: "headerın üstündeki butona tıklandığında siyah oluyor; sadece
   hareketlensin, renk değişmesin." Üzerine gelince hafifçe yükselir, basınca
   yerine oturur. Sonra sahip hover tonunu kendisi verdi (#95B3C8): ana buton
   üzerine gelince o tona geçer; koyulaşıp siyaha dönmez. Tıklama dalgası da
   mavi butonu karartmasın diye açık tonda. */
.btn{transition:transform .32s var(--ease),box-shadow .32s var(--ease)}
.btn-primary:hover{background:var(--btn-hover);border-color:var(--btn-hover);color:var(--btn-ink)}
.btn-ghost:hover{background:var(--milk);border-color:var(--ink);color:var(--ink)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(27,26,24,.38)}
.btn:active{transform:translateY(0) scale(.985);box-shadow:0 4px 10px -8px rgba(27,26,24,.3)}
.btn-primary .eratos-ripple{background:rgba(255,255,255,.5)}
.pcard .add{transition:transform .32s var(--ease),box-shadow .32s var(--ease)}
.pcard .add:hover{background:none;color:var(--ink);border-color:var(--line-strong);transform:translateY(-2px);
  box-shadow:0 10px 20px -14px rgba(27,26,24,.35)}
@media (prefers-reduced-motion:reduce){
  .btn:hover,.btn:active,.pcard .add:hover{transform:none}
}
/* HİKÂYE HİZASI (sahip, 15 Eylül 2026): "hepsi aynı hizaya dolsun, sayfaya
   dağılmasınlar; görselle yazı aynı hizada bitsin." Masaüstünde görsel
   çerçevesi kendi en-boy oranını bırakır ve yazı sütununun yüksekliğini alır:
   üst kenar kicker'la, alt kenar düğme satırıyla aynı çizgide. Telefonda
   sütunlar alt alta olduğu için eski oran geçerli. */
@media (min-width:861px){
  #storyShower .care-story{align-items:stretch}
  #storyShower .care-visual{aspect-ratio:auto;height:auto;min-height:420px}
  #storyShower .care-copy > :first-child{margin-top:0}
  #storyShower .care-copy > :last-child{margin-bottom:0}
}
/* KİŞİYE ÖZEL: FİYAT + SEPET + ÜRÜN DETAYI TEK BLOK (sahip, 15 Eylül 2026)
   "fiyat, sepet, ürün detayı bu şekilde dağınık olamaz, bütünlük sağla."
   Fiyat üstte; iki düğme aynı boyda yan yana; not hemen altlarında. Yalnız
   anasayfa bölümü (#personal); ürün sayfası etkilenmez. */
#personal .personal-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;
  margin-top:8px;padding-top:18px;border-top:1px solid var(--line)}
#personal .personal-row .price{grid-column:1 / -1;margin-bottom:4px;font-size:var(--t-price-size);font-weight:var(--t-price-weight);letter-spacing:var(--t-price-ls);line-height:var(--t-price-lh)}
#personal .personal-row .btn{width:100%;padding:15px 12px;white-space:nowrap}
#personal .personal-row .btn:last-child:nth-child(2){grid-column:1 / -1}
#personal .personal-note{border-left:0;padding-left:0;margin-top:0;max-width:none}
/* SEPETTEKİ KAZIMA ONAYI (15 Eylül 2026) — ürün sayfasındaki .engrave-ok ile aynı görünüm */
.cart-engrave{margin:16px 0 14px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:8px;background:var(--milk)}
.cart-engrave label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-family:var(--ui);color:var(--ink);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
.cart-engrave input[type="checkbox"]{flex:0 0 auto;width:17px;height:17px;margin-top:1px;accent-color:var(--ink);cursor:pointer}
.cart-engrave input[type="checkbox"]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cart-engrave input[type="checkbox"].shake{animation:pshake .4s var(--ease)}
@media (pointer:coarse){ .cart-engrave label{padding:6px 0} .cart-engrave input[type="checkbox"]{width:22px;height:22px} }
/* ================= FOOTER: AÇILIR GRUPLAR (sahip, 16 Eylül 2026) =============
   "en alttaki şirket bilgileri kısmı çok açıkta duruyor... açılır menü
   yapmışlar, merak eden girip bakıyor; bütün bilgiler ortada olmaz. sayfa
   toplu görünüyor, örnek al."

   Sayfalardaki footer HTML'i yine aynı (16 sayfa). site.js wireFooterOnce()
   her <h4>'ü bir <details class="foot-grup"> içine alır:
   - telefonda hepsi KAPALI, tek sütun, + / − ile açılır (örnekteki gibi);
   - geniş ekranda gruplar açık ve başlık tıklanmaz — orada sorun yer değildi;
   - künye (unvan, adres, vergi, MERSİS) her genişlikte KAPALI bir
     "Şirket bilgileri" menüsünde: bilgi duruyor ama sayfaya serilmiyor.
   Telefon ve e-posta açıkta kalır; müşterinin arayacağı şey saklanmaz. */
.foot .wrap + .wrap{display:block}
.foot ul{gap:6px;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.foot h4{margin-bottom:0}
.foot .protonote{margin-top:26px;padding-top:14px;max-width:none;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
.foot-grup{min-width:0}
.foot-grup > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.foot-grup > summary::-webkit-details-marker{display:none}
/* sayfalardaki ikinci başlıkta satır içi margin-top:18px var (16 dosya):
   grupların üst hizası bozulmasın diye burada sıfırlanıyor. */
.foot-grup > summary h4{margin-top:0 !important}
.foot-ic{display:flex;flex-direction:column;gap:10px}
.foot-ic > .region{margin:0}
.foot-isaret{position:relative;width:11px;height:11px;flex:none;color:var(--ink-soft)}
.foot-isaret::before,.foot-isaret::after{content:"";position:absolute;background:currentColor}
.foot-isaret::before{left:0;top:5px;width:11px;height:1px}
.foot-isaret::after{top:0;left:5px;width:1px;height:11px;transition:transform .25s var(--ease)}
details[open] > summary .foot-isaret::after{transform:scaleY(0)}
/* künye menüsü — her genişlikte kapalı başlar */
.fc-kunye{margin-top:8px}
.fc-kunye > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-family:var(--ui);color:var(--ink);border-bottom:1px solid var(--line-strong);padding-bottom:2px;width:fit-content;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.fc-kunye > summary::-webkit-details-marker{display:none}
.fc-kunye > summary:hover{border-color:var(--ink)}
.fc-kunye-ic{display:flex;flex-direction:column;gap:4px;margin-top:9px}
/* TEK SÜTUN, ORTALANMIŞ, KAPALI — her genişlikte (sahip: "alt kısmı neden
   değiştirmedin?"). Örnekteki footer masaüstünde de toplu duruyor: dört
   başlık alt alta, merak eden açıyor. Bağlantılar kaybolmuyor, bir tık
   ötede; sayfanın dibi beş sütuna yayılmıyor. */
.foot{padding-top:38px;padding-bottom:24px;text-align:center}
.foot .wrap:first-child{grid-template-columns:1fr;gap:0;max-width:600px;margin-left:auto;margin-right:auto}
.foot .wm{margin-left:auto;margin-right:auto}
.foot .wrap:first-child > div:first-child{padding-bottom:22px}
.foot .wrap:first-child > div:first-child p{max-width:40ch;margin-left:auto;margin-right:auto}
.foot-grup{border-top:1px solid var(--line)}
.foot-grup > summary{cursor:pointer;padding:15px 4px;justify-content:center;gap:10px}
.foot-grup > summary:hover h4{color:var(--ink)}
.foot-grup > summary h4{}
.foot-ic{padding:0 4px 18px;align-items:center;gap:9px}
.foot ul{justify-items:center}
.foot-contact{align-items:center}
.fc-kunye > summary{margin:0 auto}
.foot .protonote{margin-top:22px}
@media (min-width:861px){
  .foot{padding-top:48px;padding-bottom:28px}
  .foot .wrap:first-child > div:first-child{padding-bottom:26px}
}
/* ================= SİPARİŞ MERKEZİ SOHBETİ (assets/asistan.js) — 16 Eylül 2026 =
   Sağ altta "Sohbet" düğmesi; açılınca gerçek bir sohbet penceresi. Sahip:
   "işleyen bir mekanizma olduğunu hissettirelim, katalog havasından çıkaralım"
   -> kurumsal başlık, sistem kartı gibi balonlar, koyu mürekkep müşteri
   balonu. Mavi yalnız düğmede. Telefonda alttaki sabit öğelerin (yayın öncesi
   notu, ürün sayfası satın alma çubuğu) üstüne çıkar: --asistan-alt'ı
   asistan.js ölçer. */
:root{ --asistan-alt:16px; }
.st-fab{position:fixed;right:16px;bottom:var(--asistan-alt);z-index:160;min-height:48px;padding:0 18px 0 14px;border-radius:999px;border:1px solid var(--line-strong);background:var(--milk);color:var(--ink);cursor:pointer;display:flex;align-items:center;gap:9px;font-family:var(--ui);box-shadow:0 10px 26px -12px rgba(27,26,24,.45);transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.st-fab svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.st-fab:hover{transform:translateY(-2px);border-color:var(--ink);box-shadow:0 14px 30px -12px rgba(27,26,24,.5)}
.st-fab:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.st-panel{
  position:fixed;right:16px;bottom:calc(var(--asistan-alt) + 60px);z-index:165;
  width:min(372px,calc(100vw - 32px));max-height:min(78vh,620px);display:flex;flex-direction:column;
  background:var(--canvas);border:1px solid var(--line-strong);border-radius:14px;overflow:hidden;
  box-shadow:0 26px 60px -30px rgba(27,26,24,.55);
  opacity:0;transform:translateY(10px);transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.st-panel.acik{opacity:1;transform:none}
.st-ust{display:flex;align-items:center;gap:11px;
  padding:13px 14px;border-bottom:1px solid var(--line);background:var(--chalk);color:var(--ink)}
.st-rozet{width:32px;height:32px;border-radius:8px;background:var(--ink);color:var(--milk);
  display:flex;align-items:center;justify-content:center;flex:none}
.st-rozet svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.st-ust-yazi{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.st-baslik{font-family:var(--ui);margin:0;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.st-alt-baslik{font-family:var(--ui);color:var(--ink-faint);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
.st-kapat{background:none;border:0;cursor:pointer;color:inherit;padding:8px;line-height:0;border-radius:50%;flex:none}
.st-kapat svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.6;fill:none}
.st-kapat:hover{background:rgba(27,26,24,.08)}
.st-akis{padding:16px 14px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;flex:1}
.st-sira{display:flex}
.st-sira.ben{justify-content:flex-end}
.st-balon{margin:0;max-width:86%;padding:11px 13px;border-radius:12px 12px 12px 4px;background:#fff;border:1px solid var(--line);color:var(--ink);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls);line-height:var(--t-body-lh)}
.st-balon.ben{background:var(--ink);border-color:var(--ink);color:var(--milk);border-radius:12px 12px 4px 12px}
.st-balon.uyari{background:#FBF3F1;border-color:rgba(162,59,46,.28);color:#8E2F2F}
.st-balon-alt{display:block;margin-top:8px;font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
.st-balon-alt a{color:var(--ink);border-bottom:1px solid var(--line-strong)}
.st-balon-link{display:block;width:fit-content;margin-top:9px;font-family:var(--ui);color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.st-yaziyor{display:flex;gap:4px;align-items:center;padding:14px 13px}
.st-yaziyor span:not(.sr-only){width:6px;height:6px;border-radius:50%;background:var(--ink-faint);animation:stNokta 1.1s infinite}
.st-yaziyor span:nth-child(2){animation-delay:.18s}
.st-yaziyor span:nth-child(3){animation-delay:.36s}
@keyframes stNokta{0%,60%,100%{opacity:.3}30%{opacity:1}}
.st-cips{display:flex;flex-wrap:wrap;gap:7px;padding:0 14px 14px;border-top:0}
.st-cips[hidden]{display:none}
.st-cip{font-family:var(--ui);padding:8px 13px;border-radius:999px;cursor:pointer;background:#fff;border:1px solid var(--line-strong);color:var(--ink);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.st-cip:hover{background:var(--ink);border-color:var(--ink);color:var(--milk)}
.st-cip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.st-kart-form{width:100%;gap:11px}
.st-kart-baslik{margin:0;font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-label-size);font-weight:var(--t-label-weight);letter-spacing:var(--t-label-ls)}
.st-kart-dugmeler{display:flex;gap:9px;align-items:center;margin-top:2px}
.st-kart-dugmeler .st-btn{flex:1;width:auto}
.st-ikinci{font-family:var(--ui);padding:11px 14px;border-radius:999px;cursor:pointer;background:none;border:1px solid var(--line-strong);color:var(--ink-soft);white-space:nowrap;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.st-ikinci:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
.st-ikinci:disabled{color:var(--ink-faint);cursor:default}
.st-kodalan{font-family:var(--mono);text-align:center;font-size:var(--t-h3-size);font-weight:var(--t-h3-weight);letter-spacing:var(--t-h3-ls);line-height:var(--t-h3-lh)}
.st-alan{display:flex;flex-direction:column;gap:5px}
.st-alan > span{font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.st-alan input{font-family:var(--ui);padding:12px 13px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;color:var(--ink);width:100%;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.st-alan input:focus{outline:none;border-color:var(--btn-bg);box-shadow:0 0 0 3px var(--ring-focus)}
.st-alan small{font-family:var(--ui);color:var(--ink-faint);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
.st-btn{width:100%;justify-content:center}
.st-not{margin:0;font-family:var(--ui);color:var(--ink-faint);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
.st-not a{color:var(--ink-soft)}
.st-hata{margin:0;font-family:var(--ui);color:#8E2F2F;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
.st-hata[hidden]{display:none}
.st-kart{border:1px solid var(--line-strong);border-radius:12px;padding:15px;background:#fff;
  display:flex;flex-direction:column;gap:10px;width:100%;box-shadow:0 8px 20px -18px rgba(27,26,24,.6)}
.st-kart:focus{outline:none}
.st-kart-no{margin:0;font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.st-durum{margin:0;font-family:var(--display);color:var(--ink);font-size:var(--t-h3-size);font-weight:var(--t-h3-weight);letter-spacing:var(--t-h3-ls);line-height:var(--t-h3-lh)}
.st-aciklama{margin:0;color:var(--ink-soft);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls);line-height:var(--t-body-lh)}
.st-adimlar{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.st-adimlar li{display:flex;align-items:center;gap:10px;font-family:var(--ui);color:var(--ink-faint);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.st-nokta{width:12px;height:12px;border-radius:50%;border:2px solid var(--line-strong);flex:none}
.st-adimlar li.tamam{color:var(--ink-soft)}
.st-adimlar li.tamam .st-nokta{background:var(--ink-faint);border-color:var(--ink-faint)}
.st-adimlar li.simdi{color:var(--ink);font-weight:var(--fw-600)}
.st-adimlar li.simdi .st-nokta{background:var(--btn-bg);border-color:var(--btn-bg);box-shadow:0 0 0 4px var(--ring-focus)}
.st-kargo{margin:6px 0 0;display:flex;flex-direction:column;gap:6px}
.st-kargo div{display:flex;justify-content:space-between;gap:12px;font-family:var(--ui);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.st-kargo dt{color:var(--ink-soft)}
.st-kargo dd{margin:0;color:var(--ink);font-weight:var(--fw-500)}
.st-urunler{list-style:none;margin:6px 0 0;padding:10px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px;color:var(--ink-soft);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.st-urunler span{color:var(--ink-faint)}
@media (max-width:560px){
  .st-panel{left:12px;right:12px;width:auto;max-height:min(80vh,560px);bottom:calc(var(--asistan-alt) + 58px)}
  .st-fab{right:12px;min-height:44px;padding:0 15px 0 12px}
  .st-balon{max-width:92%}
}
@media (prefers-reduced-motion:reduce){
  .st-panel,.st-fab{transition:none}
  .st-yaziyor span:not(.sr-only){animation:none}
}

/* HTML'in "hidden" niteliği CSS'te ezilmesin (17 Eylül 2026).
   display:flex/grid veren her kural, hidden'ın tarayıcıdan gelen
   display:none'ını yener; "Arama sonuçları" başlığı bu yüzden arama
   yokken de görünüyordu (sahip: "filtreler çok kafa karıştırıcı").
   Sayfalarda hidden ile açılıp kapanan kutular burada tek tek kapatılıyor. */
.search-head[hidden],.need-row[hidden],.empty-state[hidden],.hero-proof[hidden],
.cart-engrave[hidden],.grid-toolbar[hidden],.shop-quick[hidden]{display:none !important}

/* BUTON BOYU (17 Eylül 2026) — sahip: "hiçbir buton sayfada bu kadar
   büyük durmamalı." Dar ekranda içerik butonları satırın tamamını
   kaplıyordu. Artık yazısı kadar yer kaplıyorlar ve hiçbir koşulda
   360px'i geçmiyorlar. Sepet/ödeme panelleri gibi dar kutuların içindeki
   form butonları bunun dışında: orada tam genişlik doğru davranış. */
.care-cta .btn,.set-band-in .btn,.hero-banner .cta-row .btn,.banner .btn{max-width:360px}
@media (max-width:640px){
  .care-cta .btn,.set-band-in .btn,.hero-banner .cta-row .btn,.banner .btn{max-width:290px}
}

/* ---- anasayfadaki set şeridi (17 Eylül 2026) ----
   Kurucunun kendisi set-olustur.html'de; anasayfada tek satırlık, sakin bir
   geçiş kaldı: solda başlık, sağda düğme. Telefonda alt alta. */
.set-band{background:var(--canvas-soft);padding-top:clamp(28px,4vw,44px);padding-bottom:clamp(28px,4vw,44px)}
.set-band-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.set-band-in .kicker{margin:0 0 6px}
.set-band-in .h2{margin:0;max-width:22ch}
.set-band-in .btn{flex:none;margin:0}
@media (max-width:640px){
  .set-band-in{flex-direction:column;align-items:flex-start;gap:18px}
  .set-band-in .btn{width:auto;max-width:100%}
}

/* ---- kişiselleştirme alanı: YALNIZCA BOYUT (17 Eylül 2026) ----
   Sahip: "bu kısım oldukça yer kaplıyor, hiçbir ayarı bozma, sadece
   boyutlandırmasını ayarlayalım."
   Bu blokta yalnız ölçü var: önizleme görselinin genişliği, alttaki üçlü
   ürün satırının genişliği ve bölümün kendi payları. Düzen, sıra, kazıma
   yerleşimi (yüzdeyle tanımlı, görselle birlikte küçülür), semboller,
   metinler ve davranış AYNEN duruyor. */
#personal.sec{padding-top:clamp(44px,6vh,76px);padding-bottom:clamp(44px,6vh,76px)}
#personal .personal-left{gap:14px}
#personal .personal-others{padding-top:12px}
#personal .personal-others-row{gap:10px}
/* İkinci geçiş (17 Eylül 2026) — sahip: "alanda boşluklar var, araya çok
   mesafe koyma, rahat rahat yayma, bütünlük oluştursun."
   İlk denemede önizleme görseline genişlik sınırı konmuştu; görsel küçülünce
   kendi sütununun sağında boşluk kaldı. Doğrusu görseli değil BLOĞU
   daraltmak: iki sütun eşit, aradaki mesafe dar, blok ortada duruyor.
   Böylece görsel sütununu tam dolduruyor ve arada delik kalmıyor. */
#personal .personal-wrap{
  margin:22px 0 0;
  grid-template-columns:1fr 1fr;gap:clamp(22px,2.6vw,40px);
}
/* ÜÇÜNCÜ GEÇİŞ (17 Eylül 2026) — sahip ekranda sağ ve sol kenarları
   işaretleyip "bu alanlar boş kalıyor" dedi: blok ortada 1040px'e
   sıkıştırılmıştı, iki yanında koca boşluk kalıyordu.
   Çözüm: geniş ekranda blok sayfanın tam genişliğini kullanıyor ve boşluk
   YUKARI DEĞİL YANA harcanıyor — üç sütun: görsel | isim+sembol+fiyat |
   değerlendirme+etiketler. Böylece kenarlar dolu, bölüm de kısalıyor. */
@media (min-width:1101px){
  #personal .personal-wrap{grid-template-columns:1.2fr 1fr .8fr;align-items:start}
  #personal .personal-left{display:contents}
  #personal .personal-media{grid-column:1;grid-row:1}
  #personal .personal-side{grid-column:2;grid-row:1}
  #personal .personal-aside{grid-column:3;grid-row:1;gap:12px}
  #personal .personal-strip{grid-column:1 / -1}
}
/* Kapanış satırı iki sütunun altında, tam genişlikte: sağ sütunun altındaki
   boşluğu bu kapatıyor. Üçlü ürün satırı 1040px'e yayıldığı için kartlar da
   ferah duruyor. */
/* ALTTAKİ YOL — sahip: "bu diğer ürünler kısmını kaldır, alta yol yap, ürün
   listesi başka sayfada açılsın." Kart yok: iki sütunun altında tek satır,
   tıklanınca mağaza sayfasındaki kişiselleştirilebilir ürün listesine gider. */
#personal .personal-strip{grid-column:1 / -1;margin-top:6px}
/* Yol satırı: ok en sağa itilmiyordu, arada uzun bir boşluk kalıyordu
   (sahip işaretledi). Artık yazı kadar yer kaplıyor, ok hemen yanında. */
.personal-yol{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit;
  padding:14px 0 0;
}
.personal-strip{border-top:1px solid var(--line)}
.personal-yol-t{font-family:var(--ui);color:var(--ink);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.personal-yol-n{font-family:var(--ui);color:var(--ink-faint);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.personal-yol-ok{font-family:var(--ui);color:var(--ink-soft);transition:transform .25s var(--ease);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.personal-yol:hover .personal-yol-t{text-decoration:underline;text-underline-offset:3px}
.personal-yol:hover .personal-yol-ok{transform:translateX(3px)}
@media (max-width:860px){
  #personal .personal-wrap{max-width:none;grid-template-columns:1fr;gap:26px}
}

/* ---- mağaza hızlı geçişi (17 Eylül 2026) ----
   Header'ın hemen altında üç yazı; kategori ikonlarının üstünde. Kutu, ikon
   ve renk yok: sadece yazı ve bulunduğun yerin altı çizili. */
.shop-quick{display:flex;gap:26px;align-items:center;margin:0 0 20px;flex-wrap:wrap}
.shop-quick a{font-family:var(--ui);color:var(--ink-soft);text-decoration:none;padding:4px 0;border-bottom:1.5px solid transparent;transition:color .25s var(--ease);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.shop-quick a:hover{color:var(--ink)}
.shop-quick a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--ink);font-weight:var(--fw-600)}
@media (max-width:560px){.shop-quick{gap:18px;margin-bottom:16px}.shop-quick a{}}
/* pazar yeri PUAN ÖZETİ (24 Eylül 2026) — sosyal kanıt bölümünün başı.
   Yorum kartı değil, sayı bloğu: büyük rakam + üç ürün + kaynak satırı.
   Kart görünümü verilmedi; bölümün kendi zemini üstünde duran bir şerit. */
.sp-ty{display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:28px 40px;
  align-items:start;padding:22px 0 26px;border-bottom:1px solid var(--line)}
.sp-ty-buyuk{font-family:var(--display);color:var(--ink);font-size:var(--t-display-size);font-weight:var(--t-display-weight);letter-spacing:var(--t-display-ls);line-height:var(--t-display-lh)}
.sp-ty-alt{font-family:var(--ui);color:var(--ink-faint);margin-top:8px;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.sp-ty-puan{font-family:var(--ui);color:var(--ink);margin-top:10px;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.sp-ty-liste{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.sp-ty-liste a{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:9px 0;border-bottom:1px solid var(--line);text-decoration:none}
.sp-ty-liste a:hover .sp-ty-ad{text-decoration:underline}
.sp-ty-ad{color:var(--ink);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.sp-ty-sayi{font-family:var(--ui);color:var(--ink-faint);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.sp-ty-kaynak{grid-column:1/-1;font-family:var(--ui);color:var(--ink-faint);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
.sp-ty-kaynak a{color:var(--ink)}
@media (max-width:720px){ .sp-ty{grid-template-columns:1fr;gap:18px} }

/* ================================================================
   ANA SAYFA DÜZELTMESİ (26 Eylül 2026, sahip —
   "ERATOS-anasayfa-duzeltme-promptu"). Önceki kuralların ÜSTÜNE yazar;
   eskileri silinmedi ki bir parça geri alınmak istenirse tek blok
   çıkarılsın. Arayüz neredeyse beyaz, sıcak-mineral; sıcaklık
   fotoğraftan gelir; metin ve ticari öğeler grafit.
   ================================================================ */

/* ---- HEADER: ≥1280 kategoriler görünür; altında hamburger menü aynı listeyi taşır ----
   Menü 500 kalınlıkta ve tam mürekkepte (30 Eylül 2026, sahip: "silik ve küçük").
   1 Ekim 2026: Taraklar ayrı kategori oldu, menü YEDİ başlığa çıktı. Logo ortada
   durduğu için solda yer dar; her aralık ölçülerek seçildi (logoyla en az 28 px):
     1280-1359  13,5 px   1360-1439  14 px   1440-1599  15 px
     1600-1759  16 px     1760+      17 px (--fs-nav)
   1280'in altında yedi başlık 13 px'te bile sığmıyor (10 px kalıyor), orada
   hamburger menü kullanılır. Daha büyük yazı için tek yol kategorileri logonun
   ALTINA ikinci satıra almak; bu ayrı bir karar. */
/* HEADER (3 Ekim 2026, sahip): ☰ ve açılır menü kalktı. Masaüstünde (≥1366) kategoriler logonun
   solunda; 1366 altında logonun ALTINDA tek satır, yatay kaydırılır. İkinci satır yüzünden
   --navh bu aralıkta büyür: sayfa boşlukları --navh'tan hesaplandığı için kendiliğinden uyar. */
.nav{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.nav .brand{grid-column:2}
.nav-right{grid-column:3}
.nav-cats{order:1;grid-column:1;justify-self:start;display:flex;align-items:center;min-width:0;white-space:nowrap;gap:10px;
  font-family:var(--ui);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.nav-cats a{color:var(--ink);text-decoration:none;position:relative;padding:12px 0}
.nav-cats a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
.nav-cats a:hover::after{transform:scaleX(1)}
@media (min-width:1440px){.nav-cats{gap:16px}}
@media (min-width:1760px){.nav-cats{gap:22px}}
@media (max-width:1365px){
  :root{--navh:118px;--navh-compact:104px}
  .nav{grid-template-rows:minmax(0,1fr) 42px;row-gap:0;padding-bottom:0}
  .nav .brand{grid-row:1}
  .nav-right{grid-row:1}
  .nav-cats{grid-column:1/-1;grid-row:2;order:5;justify-self:stretch;overflow-x:auto;overflow-y:hidden;gap:22px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;border-top:1px solid var(--line);margin:0 calc(-1 * var(--gut));padding:0 var(--gut)}
  .nav-cats::-webkit-scrollbar{display:none}
  .nav-cats a{flex:none;padding:0;line-height:41px}
  .nav-cats a::after{bottom:6px}
}
/* alt bilgi dil seçimi */
.foot-langs{display:flex;gap:8px;margin-top:14px}
.foot-langs:empty{display:none}  /* dil seçici kapalı (18 Ekim 2026, site.js DIL_SECICI): boş kutu boşluk bırakmasın */
.foot-langs button{min-height:36px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;
  font-family:var(--ui);font-size:var(--t-small-size);font-weight:var(--fw-500)}
.foot-langs button[aria-pressed="true"]{background:var(--btn-cart);border-color:var(--btn-cart);color:var(--btn-cart-text)}
@media (max-width:1023px){
  .nav-right > .nav-fav,.nav-right > .langdrop{display:none}
}
.dr-fav{display:none}
@media (max-width:1023px){ .dr-fav{display:flex} }

/* ---- HERO: beyaz perde yok, video açıkça görünür ---- */
.hero-banner{min-height:min(84vh,780px);min-height:min(84svh,780px)}
.hero-media::after{background:linear-gradient(90deg,
  rgba(247,241,233,.35) 0,
  rgba(247,241,233,.35) calc(var(--gut) + 26ch),
  rgba(247,241,233,0) 58%)}
/* .hero-link artık ikincil buton (.btn .btn-ghost); yalnız satır kırılmaz */
.hero-link{white-space:nowrap}
.hero-banner .cta-row{align-items:center;gap:18px}
@media (max-width:860px){
  /* telefonda video dikey 4:5, yazı videonun ÜSTÜNDE, alt kısımda */
  .hero-banner{aspect-ratio:4/5;min-height:0;max-height:none;align-items:flex-end;
    padding:calc(var(--navh) + 20px) 16px 26px}
  .hero-media{order:0}
  .hero-banner-img img,.hero-video{object-position:62% center}
  .hero-media::after{background:linear-gradient(180deg,
    rgba(247,241,233,0) 38%,rgba(247,241,233,.35) 62%,rgba(247,241,233,.35) 100%)}
  .hero-banner .inner{max-width:none;padding-right:52px}
  .hero-banner .eyebrow{margin-bottom:8px}
  .hero-banner p{margin-top:8px}
  .hero-banner .cta-row{margin-top:14px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 16px}
  .hero-banner .cta-row .btn{width:auto;padding:0 20px}
  .hero-link{white-space:nowrap}
}
/* OKUNURLUK: perde en fazla %35 (video açıkça görünsün); yazının kendisine
   dar, sıcak bir ışık haresi verilir. Hare yalnız harflerin çevresinde,
   fotoğrafın geri kalanı olduğu gibi kalır. Küçük yazılar grafit. */
.hero-banner .eyebrow,.hero-banner h1,.hero-banner p,.hero-link{
  text-shadow:0 0 1px rgba(247,241,233,.9),0 0 12px rgba(247,241,233,.85),0 0 28px rgba(247,241,233,.6)}
.hero-banner .eyebrow,.hero-banner p{color:var(--ink)}

/* ---- KATEGORİ YUVARLAKLARI ----------------------------------------
   27 Eylül 2026, sahip: "bu kategori kısmı biraz daha geliştirilmeli,
   hiç net değil, yazılar ezik gibi, ruhu yok."

   Dosyalarda sorun yoktu: kesimlerin hepsi 900x112 px, yani 112 pikselik
   dairede fazlasıyla keskin. Zayıflık üç ölçüde birikmişti:

   1. DAİRE KÜÇÜKTÜ VE SABİTTİ. 112 px, 1280'de yerinde ama 1920'de
      kaybolan bir ölçü. Artık ekranla büyüyor: 112 -> 148. Sayfanın geri
      kalanı da (başlıklar, gövde) genişlikle büyüdüğü için sabit kalan
      her şey geniş ekranda küçülmüş gibi görünüyordu.
   2. YAZI EZİKTİ. 12,5 px / 500 ağırlık, dairenin hemen dibinde. Ürün
      kartlarının adı bile 15 px. Etiket artık 14 px'ten başlıyor, 600
      ağırlıkta ve daireden 14 px uzakta duruyor — okunacak bir ad gibi,
      resmin altyazısı gibi değil.
   3. DAİRE ZEMİNE YAPIŞIKTI. Tebeşir (#F2F0EC) süt zemin üstünde neredeyse
      görünmüyordu; %9'luk saç teli çerçeve de şekli değil kirliliği
      gösteriyordu. Çerçeve kalktı, zemin bir ton derinleşti: daire artık
      bilerek konmuş bir şekil.

   Üstüne gelince zemin bir ton daha koyulaşıyor, ürün %4 yaklaşıyor ve
   ad altı çiziliyor — üçü birlikte "buraya basılır" diyor. */
#discovery{padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(20px,3vw,36px)}
.disc-row{display:flex;justify-content:center;gap:clamp(18px,2.6vw,40px);grid-auto-flow:initial}
/* Daire ölçüsü (27 Eylül 2026, sahip: "boyutları da küçük"). Alt sınır 104:
   760-1024 bandında altı daire + boşluk satıra sığmak zorunda, taban yüksek
   tutulursa orada taşıyor. Asıl iş vw'de: 1280'de 147, 1600 ve üstünde 184 —
   eski sabit 112'nin yarı yarıya üstü. */
/* 7 Ekim 2026, sahip: "ortalamaya dikkat". Sabit daire genişliği + 7 daire + aralık satırdan 50 px taşıyor ve
   satır ortada değil kenarlardan taşıyordu. Daireler artık satırı eşit bölüşür; üst sınır eskisi gibi. */
.disc{flex:1 1 0;min-width:0;width:auto;max-width:clamp(104px,11.5vw,184px);gap:16px}
.disc-media{width:100%;height:auto;aspect-ratio:1/1;background:var(--chalk);box-shadow:none}
/* Punto tarihçesi önemli: etiket ilk tasarımda .95rem (15,2 px) idi;
   sayfayı sıkılaştıran sonraki blok onu 12,5 px/500 ağırlığa indirmişti ve
   "ezik" görüntünün sebebi buydu. Taban artık ilk tasarımın üstünde (15 px)
   ve geniş ekranda 17 piksele kadar çıkıyor. */
.disc-lbl{font-family:var(--ui);color:var(--ink);border-bottom:1px solid transparent;padding-bottom:2px;font-size:var(--t-body-lg-size);font-weight:var(--t-body-lg-weight);letter-spacing:var(--t-body-lg-ls);line-height:var(--t-body-lg-lh)}
.disc:hover .disc-media,.disc:focus-visible .disc-media{background:var(--mineral)}
.disc:hover .disc-lbl,.disc:focus-visible .disc-lbl{border-bottom-color:var(--ink)}
.disc:hover .disc-media img,.disc-ic:hover .disc-media img{
  transform:translate(var(--kx,0%),var(--ky,0%)) scale(calc(var(--ks,1) * 1.04))}
@media (max-width:760px){
  /* tam genişlik şerit: ekran kenarına kadar kayar, ilk öğe gutter hizasında başlar */
  .disc-row{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x proximity;
    margin:0 calc(-1 * var(--gut));padding:0 var(--gut);scroll-padding:0 var(--gut);
    gap:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .disc-row::-webkit-scrollbar{display:none}
  .disc{flex:0 0 84px;width:84px;scroll-snap-align:start;gap:9px}
  .disc-media{width:84px;height:84px}
  /* telefonda 11 px bir bağlantı için küçük; 12,5'e çıktı ve kalınlaştı */
  .disc-lbl{line-height:1.25}
}

/* vitrin bölümleri daha sık: sayfa ~5.000 px hedefi */
#edit,#gifts,#social,#personal{padding-top:clamp(44px,6.5vh,76px);padding-bottom:clamp(44px,6.5vh,76px)}

/* ---- BÖLÜM BAŞLIĞI + "TÜMÜNÜ GÖR →" ---- */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:clamp(20px,2.6vw,32px)}
.sec-head h2.big{margin-top:0}
/* Başlığın altına tek satır tanım (27 Eylül 2026, sahip: "setleri daha premium
   lanse etmelisin"). Başlıkla birlikte tek blok olur ki sağdaki "Tümünü gör"
   bağlantısı başlığın hizasında kalsın, satır eklenince aşağı kaymasın. */
.sec-head-tx{min-width:0;display:flex;flex-direction:column;gap:6px}
.sec-lede{margin:0;max-width:52ch;font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
@media (max-width:640px){ .sec-lede{} }
.sec-more{flex:none;display:inline-flex;align-items:center;min-height:44px;font-family:var(--ui);text-transform:none;color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.sec-more:hover,.sec-more:focus-visible{border-bottom-color:var(--ink)}
.rating-note,.rv-note{margin:14px 0 0;font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}

/* ---- DÖRTLÜ VİTRİN: masaüstü 4 kolon, telefonda yatay şerit (1,6 kart) ---- */
.pgrid.row-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){
  .pgrid.row-4{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
    margin:0 calc(-1 * var(--gut));padding:0 var(--gut);scroll-padding:0 var(--gut);scrollbar-width:none}
  .pgrid.row-4::-webkit-scrollbar{display:none}
  .pgrid.row-4 > *{flex:0 0 calc((100vw - 2 * var(--gut) - 12px) / 1.6);scroll-snap-align:start}
}

/* ---- ÜRÜN KARTI: tek bileşen, her yerde aynı ---- */
.pcard .plate{aspect-ratio:4/5;background:var(--chalk)}
.pcard .frame{margin-bottom:12px}
.pcard-tag{display:block;margin:0 0 3px;font-family:var(--ui);text-transform:uppercase;color:var(--ink-soft);font-size:var(--t-label-size);font-weight:var(--t-label-weight);letter-spacing:var(--t-label-ls)}
.pcard h3{margin-top:0}
.pcard .fav{width:44px;height:44px;top:6px;right:6px}
.pcard .tyr{margin-top:6px;gap:4px;font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.tyr-star{color:var(--ink);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
.pcard .tyr-n{color:var(--ink)}
@media (pointer:coarse){ .pcard .fav{width:44px;height:44px} }
/* yıldızlar grafit: ticari öğeler tek renk (sarı/bakır yok) */
.tyr-stars{--yildiz:var(--ink);--yildiz-bos:var(--mineral)}
.tyr-stars-on::before{background:none;-webkit-text-fill-color:currentColor;color:var(--ink)}

/* ---- RUTİN: üç an, yalnız ürün (27 Eylül 2026) ----
   Sahip: "bu kısımdaki yazıları iptal edip 3 adımda duş öncesi, duşta, duş
   sonrası kullanabilecekleri ürünlerimizi gösterelim."
   Kaldırılanlar: adım listesi (.ritual-step / .ritual-tx / .ritual-steps),
   adım içi bağlantı (.ritual-lnk) ve büyük fotoğraf (.ritual-media). Sütun
   artık dört satır: numaralı an etiketi, başlık, üç ürün, bir bağlantı. */
#ritual{padding-top:clamp(48px,6vh,80px);padding-bottom:clamp(48px,6vh,80px)}
#ritual .reveal h2.big{max-width:none}
.ritual-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,36px);
  margin-top:clamp(20px,2.6vw,32px)}
/* An etiketi sütunun ilk satırı ve adım numarasını da o taşıyor: dolu bir
   daire içinde 1-2-3. "3 adım" sözü böyle görünür oluyor; ayrıca üç sütunun
   üst kenarı aynı hizadan başlıyor. */
.ritual-when{margin:0;display:flex;align-items:center;gap:8px;font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-label-size);font-weight:var(--t-label-weight);letter-spacing:var(--t-label-ls)}
.ritual-when .ritual-n{width:20px;height:20px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--canvas);font-variant-numeric:tabular-nums;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.ritual-h{margin:8px 0 0}
/* Üç ürün, sütunun kendi genişliğinde. Üstteki ince çizgi başlıkla ürünleri
   ayırır — sütundaki tek çizgi odur. */
.ritual-minis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.ritual-minis .mcard .plate{aspect-ratio:1/1}
.ritual-cta.btn{margin-top:10px;padding:0;min-height:44px;border:0;background:none;border-radius:0;font-family:var(--ui);text-transform:none;color:var(--ink);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
/* metin bağlantısı gibi davranır: genel .btn:hover'daki kalkma ve gölge yok,
   ok alt çizginin içinde (sahip ekran görüntüsü, 26 Eylül 2026) */
.ritual-cta.btn{gap:0;border-bottom:1px solid transparent;transition:border-color .25s var(--ease)}
.ritual-cta.btn::after{content:" →"}
.ritual-cta.btn:hover,.ritual-cta.btn:focus-visible{background:none;transform:none;box-shadow:none;border-color:transparent transparent var(--ink)}
/* 1100 altında üç sütun dar kalıyor (sütun başına üç ürün kartı var):
   önce ikiye, sonra teke iner. */
@media (max-width:1100px){ .ritual-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px} }
@media (max-width:760px){ .ritual-row{grid-template-columns:1fr;gap:36px} }

/* ---- MİNİ KART ---- */
.mcard{display:flex;flex-direction:column;min-width:0;scroll-margin-top:calc(var(--navh) + 40px)}
.mcard:target .mcard-plate{box-shadow:0 0 0 2px var(--ink)}
.mcard-link{display:flex;flex-direction:column;gap:7px;text-decoration:none;color:inherit}
.mcard .plate{aspect-ratio:1/1;background:var(--chalk)}
.mcard-name{font-family:var(--ui);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls);line-height:var(--t-body-lh)}
.mcard-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:6px;flex-wrap:wrap}
.mcard .price{font-family:var(--ui);color:var(--ink);font-variant-numeric:tabular-nums;font-size:var(--t-price-size);font-weight:var(--t-price-weight);letter-spacing:var(--t-price-ls)}
.mcard .add{border:1px solid var(--line-strong);background:var(--milk);border-radius:999px;padding:0 14px;min-height:44px;cursor:pointer;font-family:var(--ui);text-transform:none;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap;font-size:var(--t-button-size);font-weight:var(--t-button-weight);letter-spacing:var(--t-button-ls)}
.mcard .add:hover{border-color:var(--ink)}

/* ---- KULLANIM BANDI: tam genişlik video ---- */
.band{position:relative;width:100%;aspect-ratio:16/9;max-height:70vh;overflow:hidden;background:var(--mineral)}
.band-media,.band-media video{position:absolute;inset:0;width:100%;height:100%}
.band-media video,.band-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:45% center}
.band-ph{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;font-family:var(--ui);color:var(--ink-soft);background:#ECEBE8;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.band-copy{position:absolute;left:var(--gut);bottom:clamp(20px,4vw,48px);display:flex;align-items:baseline;
  gap:18px;flex-wrap:wrap}
.band-text{margin:0;font-family:var(--display);color:var(--ink);font-size:var(--t-h2-size);font-weight:var(--t-h2-weight);letter-spacing:var(--t-h2-ls);line-height:var(--t-h2-lh)}
.band-cta{display:inline-flex;align-items:center;min-height:44px;font-family:var(--ui);text-transform:none;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
@media (max-width:760px){
  .band{aspect-ratio:4/5;max-height:none}
  .band-copy{left:16px;right:16px;bottom:20px}
  .band-ph{align-items:flex-start;padding-top:28%}
}

/* ---- İSME ÖZEL ---- */
.engrave-need{margin:8px 0 0;font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.engrave-need[hidden]{display:none}
#personalAdd:disabled{opacity:.45;cursor:not-allowed}

/* ---- DEĞERLENDİRMELER: aynı zemin, bölüm ayrımı çizgiyle ---- */
#social{background:var(--canvas);border-top:1px solid var(--line)}
.rv-top{display:flex;align-items:center;gap:18px;margin-bottom:clamp(22px,3vw,34px)}
.rv-score{margin:0;font-family:var(--display);color:var(--ink);font-variant-numeric:tabular-nums;font-size:var(--t-display-size);font-weight:var(--t-display-weight);letter-spacing:var(--t-display-ls);line-height:var(--t-display-lh)}
.rv-meta{display:flex;flex-direction:column;gap:6px}
.rv-meta .tyr-stars{font-size:var(--t-h3-size);font-weight:var(--t-h3-weight);letter-spacing:var(--t-h3-ls);line-height:var(--t-h3-lh)}
.rv-total{margin:0;font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.rv-products{list-style:none;margin:0 0 clamp(26px,3.4vw,40px);padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
.rv-prod{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;padding:10px;
  border:1px solid var(--line);border-radius:4px;transition:border-color var(--dur-commerce) var(--ease)}
.rv-prod:hover{border-color:var(--line-strong)}
.rv-prod .plate{flex:0 0 72px;width:72px;aspect-ratio:1/1;background:var(--chalk)}
.rv-prod-tx{display:flex;flex-direction:column;gap:4px;min-width:0}
.rv-prod-ad{font-family:var(--ui);color:var(--ink);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls);line-height:var(--t-body-lh)}
.rv-prod .tyr{margin:0;font-family:var(--ui);color:var(--ink-soft);gap:4px;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.rv-prod .tyr-n{color:var(--ink);font-weight:var(--fw-600)}
.sp-reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
.sp-review{margin:0;display:flex;flex-direction:column;gap:10px;padding:18px;border:1px solid var(--line);border-radius:4px;background:none}
.sp-review blockquote{margin:0;color:var(--ink);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls);line-height:var(--t-body-lh)}
.sp-review figcaption{font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.sp-ph{border-style:dashed}
.sp-ph blockquote,.sp-ph figcaption{color:var(--ink-soft)}
/* üçten fazla gerçek yorumda: yavaş kayan şerit, üstüne gelince durur */
.sp-kayan{display:block;overflow:hidden}
.sp-kayan .sp-run{display:flex;gap:clamp(12px,2vw,24px);width:max-content;animation:sp-kay 60s linear infinite}
.sp-kayan .sp-review{flex:0 0 320px}
.sp-kayan:hover .sp-run{animation-play-state:paused}
@keyframes sp-kay{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .sp-kayan .sp-run{animation:none} }
@media (max-width:760px){
  .rv-products{grid-template-columns:1fr}
  .sp-reviews,.sp-kayan .sp-run{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
    margin:0 calc(-1 * var(--gut));padding:0 var(--gut);scroll-padding:0 var(--gut);scrollbar-width:none;animation:none;width:auto}
  .sp-reviews > .sp-review,.sp-kayan .sp-review{flex:0 0 78%;scroll-snap-align:start}
}

/* ---- GÜVEN ŞERİDİ: 20 px ikon, tek satır; telefonda 3 kolon ---- */
.trust-item svg{width:20px;height:20px}
@media (max-width:620px){
  .trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));flex-direction:initial;gap:8px;padding:14px 0}
  .trust-item{flex-direction:column;align-items:center;text-align:center;gap:6px;line-height:1.35}
}

/* ---- SEPET ÇEKMECESİ: ücretsiz kargo ilerlemesi ---- */
.shipbar{padding:4px 0 16px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.shipbar p{margin:0 0 8px;font-family:var(--ui);color:var(--ink);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.shipbar-track{display:block;height:4px;border-radius:2px;background:var(--mineral);overflow:hidden}
.shipbar-track span{display:block;height:100%;background:var(--accent-warm);transition:width .4s var(--ease)}

/* ---- SEPET ÇEKMECESİ: satır fiyatı + iki düğme ---- */
.bag-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.bag-price{font-family:var(--ui);color:var(--ink);font-variant-numeric:tabular-nums;font-size:var(--t-price-size);font-weight:var(--t-price-weight);letter-spacing:var(--t-price-ls)}
.bag footer .btn{width:100%}
.bag footer .bag-cart{margin-top:8px}

/* ---- ARAMA: boşken öneriler ---- */
.search-best-h{display:block;margin:18px 0 6px}

/* ---- BÜLTEN: başarıda alan yerine teşekkür ---- */
.news-form.kayitli .news-input,.news-form.kayitli button[type="submit"]{display:none}
.news-form.kayitli .news-msg{color:var(--ink);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}

/* ---- FOOTER: yer tutucular ---- */
.foot-etbis{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.foot-ph{display:inline-block;padding:6px 10px;border:1px dashed rgba(250,249,247,.32);border-radius:3px;font-family:var(--ui);color:rgba(250,249,247,.7);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}

/* ---- ODAK HALKASI: klavyede her öğede görünür ---- */
.nav-cats a:focus-visible,.sec-more:focus-visible,.hero-link:focus-visible,.band-cta:focus-visible,
.pcard .add:focus-visible,.mcard .add:focus-visible,.pcard-link:focus-visible,.mcard-link:focus-visible,
.disc:focus-visible,.rv-prod:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ================================================================
   HERO İKİYE BÖLÜNDÜ (26 Eylül 2026, sahip: "başlık videodaki fırçanın/
   elin üstüne binmesin; metni boş tarafa al"). Videoda her sahnede boş
   kalan bir taraf yok (fırça → kabak lifi → ürün grubu), bu yüzden metin
   videonun ÜSTÜNDE değil YANINDA: masaüstünde solda sade zemin, telefonda
   videonun altında. Perde ve ışık haresi gerekmiyor, kaldırıldı.
   ================================================================ */
.hero-banner .eyebrow,.hero-banner h1,.hero-banner p,.hero-link{text-shadow:none}
.hero-media::after{display:none}
@media (min-width:861px){
  .hero-banner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch;
    min-height:min(82vh,760px);min-height:min(82svh,760px);padding:0;background:var(--canvas)}
  .hero-banner .inner{grid-column:1;grid-row:1;align-self:center;max-width:none;
    padding:calc(var(--navh) + 64px) clamp(28px,4vw,64px) 56px var(--gut)}
  .hero-banner h1{max-width:12ch}
  .hero-banner p{max-width:34ch}
  .hero-media{position:relative;inset:auto;grid-column:2;grid-row:1;min-height:100%;overflow:hidden}
  .hero-banner-img img,.hero-video{object-position:50% center}
}
@media (max-width:860px){
  .hero-banner{display:flex;flex-direction:column;align-items:stretch;aspect-ratio:auto;
    min-height:0;padding:0;background:var(--canvas)}
  .hero-media{position:relative;inset:auto;order:0;width:100%;aspect-ratio:4/5;
    margin-top:calc(var(--navh) + 28px);overflow:hidden}
  .hero-banner-img img,.hero-video{object-position:50% center}
  .hero-banner .inner{order:1;padding:22px 16px 30px}
}

/* ================================================================
   KART GÖRSELİ: kutu içinde kutu yok (26 Eylül 2026, sahip). Dekupe
   ürün açık ERATOS zemininde durur; sahne fotoğrafı ise görsel alanını
   kenardan kenara doldurur — içeride ikinci, beyaz bir kare kalmaz.
   ================================================================ */
.pcard .plate.is-scene img,.mcard .plate.is-scene img,.rv-prod .plate.is-scene img{
  padding:0;object-fit:cover;transform:none}

/* ================================================================
   HAREKET PAKETİ (26 Eylül 2026). Ölçülü, dokunmaya tepki veren, hareket
   azaltma isteyen ziyaretçide kapalı. Kart: 4 px kalkar + yumuşak gölge,
   görsel %5 yakınlaşır, "Hızlı ekle" şeridi görselin altından çıkar.
   Dokunmatik ekranda (hover yok) şerit ve kalkma yoktur; düğme kartta
   zaten görünür.
   ================================================================ */
.pcard{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pcard .plate{overflow:hidden}
.pcard .plate img{transition:transform .6s var(--ease)}
/* KARTTA SEPETE EKLE (2 Ekim 2026, demo): tam genişlikteki bar kalktı. Fotoğrafın SAĞ ALT köşesinde
   46 px yuvarlak ikon buton (yalnız sepet ikonu, yazı yok); fotoğrafı kapatmaz, fare ve dokunmatikte
   her zaman görünür. Kişiye özel üründe yok (isim gerekir, alttaki "İsim yaz" düğmesi var). */
.pcard-qwrap{display:flex;position:absolute;left:0;right:0;top:0;aspect-ratio:4/5;z-index:3;
  align-items:flex-end;justify-content:flex-end;padding:10px;pointer-events:none}
.mcard{position:relative}
.pcard-qwrap.mq{aspect-ratio:1/1}
.pcard-cart{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:999px;border:0;cursor:pointer;padding:0;
  background:var(--btn-cart);color:var(--btn-cart-text);box-shadow:0 6px 16px -6px rgba(27,26,24,.45);
  transition:background .2s var(--ease),transform .2s var(--ease),color .2s var(--ease),opacity .2s var(--ease)}
.pcard-cart:hover,.pcard-cart:focus-visible{background:var(--btn-cart-hover);transform:scale(1.06)}
.pcard-cart:active{background:var(--btn-cart-active)}
.pcard-cart:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pcard-cart svg{width:20px;height:20px}
/* fare olan cihazda ikon ürünün üzerine gelince çıkar; dokunmatikte hep görünür (orada üzerine gelme yok) */
@media (hover:hover) and (pointer:fine){
  .pcard-cart{opacity:0}
  .pcard:hover .pcard-cart,.mcard:hover .pcard-cart,.pcard:focus-within .pcard-cart,.mcard:focus-within .pcard-cart,.pcard-cart.done{opacity:1}
}
/* yazılı "Sepete ekle" düğmesi yalnız ürün sayfasında; kartlarda hiçbir yerde yok */
.pcard .pfoot .add:not(.configure),.mcard .add:not(.configure){display:none}
/* sepete ekle düğmeleri: erik tonu */
#pdpAdd,#pdpAddMobile,#personalAdd,[data-bundle-add]{background:var(--btn-cart);border-color:var(--btn-cart);color:var(--btn-cart-text);border-radius:999px}
#pdpAdd:hover,#pdpAddMobile:hover,#personalAdd:hover,[data-bundle-add]:hover{background:var(--btn-cart-hover);border-color:var(--btn-cart-hover);color:var(--btn-cart-text)}
#pdpAdd:active,#pdpAddMobile:active,#personalAdd:active,[data-bundle-add]:active{background:var(--btn-cart-active);border-color:var(--ink-blue)}
#pdpAdd,#pdpAddMobile{min-width:12.5rem;gap:8px}
#pdpAdd.done,#pdpAddMobile.done{background:var(--btn-cart);border-color:var(--btn-cart);color:var(--btn-cart-text)}
.pdp-mobilebar #pdpAddMobile{min-width:0}
@media (prefers-reduced-motion:reduce){
  .pcard-cart,#pdpAdd,#pdpAddMobile{transition:none}
  .pcard-cart:hover,.pcard-cart:focus-visible{transform:none}
}
/* Kategori sayfası: görünür H1 ve Fırçalar alt filtresi (2 Ekim 2026, demo) */
#plpH1:not(.vh){font-family:var(--display);margin:4px 0 14px;font-size:var(--t-h1-size);font-weight:var(--t-h1-weight);letter-spacing:var(--t-h1-ls);line-height:var(--t-h1-lh)}
.plp-sub{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.plp-sub .chip[aria-current="true"]{background:var(--ink);color:var(--milk);border-color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .pcard:hover{transform:translateY(-4px);box-shadow:0 18px 34px -22px rgba(27,26,24,.34)}
  .pcard:hover .plate img{transform:translate(var(--kx,0%),var(--ky,0%)) scale(calc(var(--ks,1) * 1.05))}
  .pcard:hover .plate.is-scene img{transform:scale(1.05)}
  .mcard .plate img{transition:transform .5s var(--ease)}
  .mcard:hover .plate img{transform:translate(var(--kx,0%),var(--ky,0%)) scale(calc(var(--ks,1) * 1.05))}
  .mcard:hover .plate.is-scene img{transform:scale(1.05)}
  .rv-prod{transition:transform .3s var(--ease),border-color .3s var(--ease)}
  .rv-prod:hover{transform:translateY(-2px)}
  .ritual-media img{transition:transform .8s var(--ease)}
  .ritual-col:hover .ritual-media img{transform:scale(1.03)}
  .sp-review{transition:transform .3s var(--ease),border-color .3s var(--ease)}
  .sp-review:hover{transform:translateY(-3px);border-color:var(--line-strong)}
}
/* kategori yuvarlağı: ad hafifçe koyulaşır, halka belirginleşir */
.disc .disc-media{transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.disc:hover .disc-media{box-shadow:inset 0 0 0 1px var(--ink)}
/* hero: ilk açılışta metin yumuşakça yükselir */
@keyframes hero-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-banner .inner > *{animation:hero-in .8s var(--ease) both}
.hero-banner .inner > *:nth-child(2){animation-delay:.08s}
.hero-banner .inner > *:nth-child(3){animation-delay:.16s}
.hero-banner .inner > *:nth-child(4){animation-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .pcard,.pcard .plate img,.pcard-quick,.hero-banner .inner > *,.band-img{transition:none!important;animation:none!important;transform:none!important}
}

/* YORUM ŞERİDİ (27 Eylül 2026): ürün raflarıyla aynı bileşen, üç kart görünür */
.sp-rail{margin-top:clamp(18px,2.4vw,28px)}
.sp-rail .rail-track{grid-auto-columns:calc((100% - 2 * var(--rail-gap)) / 3)}
.sp-rail .rail-item > .sp-review{width:100%}
.sp-rail .rail-btn{top:50%}
@media (max-width:760px){ .sp-rail .rail-track{grid-auto-columns:82%} }

/* İSME ÖZEL — SAĞ SÜTUN TANITIMI (27 Eylül 2026) */
#personal .personal-promo{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--line);border-radius:6px;background:var(--canvas)}
#personal .personal-promo .plate{aspect-ratio:4/3;background:var(--chalk);border-radius:4px}
.promo-h{margin:6px 0 0;font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.promo-list{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.promo-list li{font-family:var(--ui);color:var(--ink);padding-left:14px;position:relative;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls)}
.promo-list li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--ink-soft)}
#personal .personal-promo .tyr{margin:2px 0 0;font-family:var(--ui);color:var(--ink-soft);gap:4px;font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.promo-p{margin:0;font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
.promo-care{padding-top:8px;border-top:1px solid var(--line)}

/* YORUMLAR — ÜÇ KATEGORİ SÜTUNU (27 Eylül 2026) */
.rv-rail{margin-top:0}
/* Tek sıra, eşit yükseklik (27 Eylül 2026). Eskiden her rail-item bir
   KATEGORİ SÜTUNUydu ve sütunlar farklı sayıda yorum taşıdığı için altları
   ayrı yerde bitiyordu. Artık her rail-item tek bir yorum kartı; stretch ile
   hepsi sıranın en uzunu kadar yükselir, alt kenar tek çizgi olur. */
.rv-rail .rail-track{grid-auto-columns:calc((100% - 2 * var(--rail-gap)) / 3);align-items:stretch}
.rv-rail .rail-item{align-items:stretch}
.rv-rail .sp-review{height:100%}
/* Ok düğmesi eskiden sütun başındaki ürün kartının ortasına (60px) hizalıydı;
   o kart kaldırıldı, oklar artık sütunun kendi ortasında. */
.rv-rail .rail-btn{top:50%}
.rv-col{width:100%;display:flex;flex-direction:column;gap:12px}
.rv-cat{font-family:var(--ui);color:var(--ink-soft);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls)}
.rv-col .sp-review{padding:16px;gap:8px}
.sp-urun{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;padding-bottom:10px;border-bottom:1px solid var(--line)}
.sp-urun .plate{flex:0 0 44px;width:44px;aspect-ratio:1/1;background:var(--chalk);border-radius:3px}
.sp-urun-ad{font-family:var(--ui);color:var(--ink);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);line-height:var(--t-small-lh)}
.sp-urun:hover .sp-urun-ad{text-decoration:underline;text-underline-offset:3px}
.sp-urun .plate.is-scene img{padding:0;object-fit:cover;transform:none}
@media (max-width:860px){ .rv-rail .rail-track{grid-auto-columns:86%} }

/* Featured set with three compact companion cards. */
#giftGrid.gift-feature-grid{
  display:grid;grid-template-columns:1.08fr 1fr;
  grid-template-rows:repeat(3,minmax(174px,auto));gap:20px 36px;align-items:stretch;
}
#giftGrid > .pcard:first-child{grid-column:1;grid-row:1 / span 3;height:100%}
#giftGrid > .pcard:first-child .pcard-link{flex:1;min-height:0}
#giftGrid > .pcard:first-child .plate{aspect-ratio:auto;flex:1;min-height:390px;margin-bottom:16px}
#giftGrid > .pcard:first-child h3{font-size:var(--t-h2-size);font-weight:var(--t-h2-weight);letter-spacing:var(--t-h2-ls);line-height:var(--t-h2-lh)}
#giftGrid > .pcard:first-child .pfoot{padding-top:12px}
/* (qwrap gizleme kuralı yukarıda: yalnız küçük satır kartlarında) */
#giftGrid > .pcard:hover{transform:none;box-shadow:none}
#giftGrid > .pcard:not(:first-child){
  grid-column:2;display:grid;grid-template-columns:42% minmax(0,1fr);
  grid-template-rows:auto auto 1fr auto;gap:6px 20px;height:auto;
  padding:0 0 20px;border-bottom:1px solid var(--line);
}
#giftGrid > .pcard:nth-child(2){grid-row:1}
#giftGrid > .pcard:nth-child(3){grid-row:2}
#giftGrid > .pcard:nth-child(4){grid-row:3;padding-bottom:0;border-bottom:0}
#giftGrid > .pcard:not(:first-child) .pcard-link{display:contents}
#giftGrid > .pcard:not(:first-child) .plate{grid-column:1;grid-row:1 / span 4;aspect-ratio:auto;min-height:160px;margin:0}
#giftGrid > .pcard:not(:first-child) .pcard-tag{grid-column:2;grid-row:1;margin:6px 0 0}
#giftGrid > .pcard:not(:first-child) h3{grid-column:2;grid-row:2;margin:0;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls);line-height:var(--t-body-lh)}
#giftGrid > .pcard:not(:first-child) .tyr{grid-column:2;grid-row:3;align-self:start;margin:4px 0 0}
#giftGrid > .pcard:not(:first-child) .pfoot{grid-column:2;grid-row:4;width:100%;padding-top:8px;align-self:end}
#giftGrid > .pcard:not(:first-child) .fav{left:calc(42% - 48px);right:auto;top:4px}
@media(max-width:760px){
  #giftGrid.gift-feature-grid{grid-template-columns:1fr;grid-template-rows:auto;gap:24px}
  #giftGrid > .pcard:first-child{grid-column:1;grid-row:auto;height:auto}
  #giftGrid > .pcard:first-child .plate{aspect-ratio:4/5;min-height:0;flex:none}
  #giftGrid > .pcard:not(:first-child){grid-column:1;grid-row:auto;gap:6px 16px}
  #giftGrid > .pcard:not(:first-child) .plate{min-height:150px}
}

/* Personalisation shares the featured sets' two-column rhythm. */
#personal .personal-wrap{grid-template-columns:1.08fr 1fr;gap:22px 36px;align-items:start;margin-top:30px}
#personal .personal-left{display:block;grid-column:1;grid-row:1}
#personal .personal-media{grid-column:auto;grid-row:auto}
#personal .personal-media .plate{border-radius:0}
#personal .personal-side{grid-column:2;grid-row:1;padding:4px 0 0}
#personal .pname{margin:0 0 28px;max-width:26ch;font-size:var(--t-h2-size);font-weight:var(--t-h2-weight);letter-spacing:var(--t-h2-ls);line-height:var(--t-h2-lh)}
#personal .personal-form{max-width:none;gap:14px}
#personal .personal-form input[type=text]{min-height:54px;border-radius:0;background:var(--canvas)}
#personal .personal-row{margin-top:16px;padding-top:22px;border-top:1px solid var(--line)}
#personal .personal-row .price{font-size:var(--t-price-size);font-weight:var(--t-price-weight);letter-spacing:var(--t-price-ls)}
#personal .personal-promo{grid-column:1;grid-row:2;display:grid;grid-template-columns:1fr auto;gap:9px 20px;padding:18px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none}
#personal .personal-promo .promo-plate{display:none}
#personal .personal-promo .promo-h{grid-column:1;grid-row:1;margin:0}
#personal .personal-promo .tyr{grid-column:2;grid-row:1;margin:0}
#personal .promo-list{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px 24px}
#personal .personal-promo .promo-p{grid-column:1 / -1;max-width:65ch}
#personal .personal-promo .promo-care{border:0;padding-top:0}
#personal .personal-others{margin-top:36px;padding-top:24px}
#personal #personalOthers{max-width:none;grid-template-columns:1.08fr 1fr;gap:36px;margin-top:18px}
/* 2 Ekim 2026 (demo): 800–900 px arasında plaka min-height:155px yüzünden sütunundan (%34 ≈ 117 px)
   taşıp metnin üstüne biniyordu. Plaka artık sütunu doldurur, sütun en az 128 px. */
#personalOthers > .pcard{display:grid;grid-template-columns:minmax(128px,38%) minmax(0,1fr);grid-template-rows:auto auto 1fr auto;gap:6px 20px;height:auto}
#personalOthers .pcard-link{display:contents}
#personalOthers .plate{grid-column:1;grid-row:1 / span 4;aspect-ratio:1;min-height:0;width:100%;margin:0}
#personalOthers .pcard-tag{grid-column:2;grid-row:1;margin-top:6px}
#personalOthers h3{grid-column:2;grid-row:2;margin:0;font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls);line-height:var(--t-body-lh)}
#personalOthers .tyr{grid-column:2;grid-row:3;margin:4px 0 0;align-self:start}
#personalOthers .pfoot{grid-column:2;grid-row:4;width:100%;align-self:end}
#personalOthers .fav{left:calc(min(38%,100%) - 48px);right:auto;top:4px}
#personalOthers .pcard-qwrap{display:none}
#personalOthers .pcard:hover{transform:none;box-shadow:none}
@media(max-width:760px){
  #personal .personal-wrap{grid-template-columns:1fr;gap:24px}
  #personal .personal-left{grid-column:1;grid-row:1}
  #personal .personal-side{grid-column:1;grid-row:2}
  #personal .personal-promo{grid-column:1;grid-row:3}
  #personal .pname{margin-bottom:22px}
  #personal #personalOthers{grid-template-columns:1fr;gap:24px}
  #personalOthers > .pcard{grid-template-columns:38% minmax(0,1fr);gap:6px 14px}
  #personalOthers .fav{left:calc(38% - 48px)}
  #personalOthers .plate{min-height:0}
}

/* SSS SAYFASI (29 Eylül 2026). <details>/<summary>: JavaScript gerektirmez,
   klavyeyle açılır, ekran okuyucu açık/kapalı durumunu kendisi söyler.
   Soru satırı 44 px'ten kısa değil (dokunma hedefi). */
.sss-madde{border-top:1px solid var(--line)}
.sss-madde:last-child{border-bottom:1px solid var(--line)}
.sss-madde summary{list-style:none;cursor:pointer;min-height:44px;padding:14px 32px 14px 0;position:relative;font-family:var(--ui);color:var(--ink);font-size:var(--t-body-size);font-weight:var(--t-body-weight);letter-spacing:var(--t-body-ls);line-height:var(--t-body-lh)}
.sss-madde summary::-webkit-details-marker{display:none}
.sss-madde summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--ink-soft);font-size:var(--t-h3-size);font-weight:var(--t-h3-weight);letter-spacing:var(--t-h3-ls);line-height:var(--t-h3-lh)}
.sss-madde[open] summary::after{content:"−"}
.sss-madde summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sss-madde p{margin:0 0 16px;color:var(--ink-soft);line-height:1.6;max-width:62ch}


/* Ana sayfa ürün rafları: telefonda iki sütun. */
@media(max-width:760px){
  #bestGrid.pgrid.row-4,#familyShelves .pgrid.row-4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;scroll-snap-type:none;margin:0;padding:0;gap:20px 12px}
}

/* ---- SEPET İKONU (tek çizim, outline 1,6 px) ve adet seçici (2 Ekim 2026, demo) ---- */
.ico-cart{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.btn .ico-cart,.add .ico-cart{margin-right:2px}
.add{display:inline-flex;align-items:center;gap:8px}
.qty-pdp{display:inline-flex;align-items:center;height:46px;border:1px solid var(--line-strong);border-radius:999px;background:var(--milk);flex:none}
.qty-pdp button{width:44px;height:44px;border:0;background:none;border-radius:50%;cursor:pointer;font-family:var(--ui);font-size:var(--t-h3-size);font-weight:var(--fw-500);line-height:1;color:var(--ink)}
.qty-pdp button:hover{background:var(--chalk)}
.qty-pdp button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.qty-pdp output{min-width:28px;text-align:center;font-family:var(--ui);font-size:var(--t-button-size);font-weight:var(--t-button-weight);letter-spacing:var(--t-button-ls);font-variant-numeric:tabular-nums}
.addrow{display:flex;align-items:center;gap:10px}
.addrow .btn-primary{flex:1 1 auto}
.pdp-mobilebar .qty-pdp{height:46px}
.pdp-mobilebar .qty-pdp button{width:38px}
.qty-pdp[hidden]{display:none}

/* 3 Ekim 2026 (sahip): tüm ana düğmeler ve kategori dairesi hover çizgisi "Kuru erik" ile aynı. */
.btn-primary:active{background:var(--btn-cart-active);border-color:var(--ink-blue)}
.disc:hover .disc-media,.disc:focus-visible .disc-media{box-shadow:inset 0 0 0 1.5px var(--btn-cart)}
.disc:hover .disc-lbl,.disc:focus-visible .disc-lbl{border-bottom-color:var(--btn-cart)}
/* 3 Ekim 2026 (sahip: "tüm butonlar aynı olmalı"): ikincil (çizgili) düğmeler ve karttaki "İsim yaz"
   da dolgulu Kuru erik. Tek düğme dili: dolgu --btn-cart, hover --btn-cart-hover, basılı --btn-cart-active. */
.btn-ghost,.pcard .add.configure,.mcard .add.configure{background:var(--btn-cart);border-color:var(--btn-cart);color:var(--btn-cart-text)}
.btn-ghost:hover,.pcard .add.configure:hover,.mcard .add.configure:hover{background:var(--btn-cart-hover);border-color:var(--btn-cart-hover);color:var(--btn-cart-text)}
.btn-ghost:active,.pcard .add.configure:active,.mcard .add.configure:active{background:var(--btn-cart-active);border-color:var(--ink-blue)}
.btn-ghost .eratos-ripple{background:rgba(255,255,255,.5)}
/* Kalın yazı: tarayıcının varsayılan 700'ü yerine ölçekteki 600 */
strong,b,th,h1,h2,h3,h4,h5,h6{font-weight:var(--fw-600)}

/* ---- ADET DÜĞMELERİ (3 Ekim 2026, sahip): sepet çekmecesi, sepet sayfası, ürün sayfası, set ----
   Tam yuvarlak (50%), en az 32 px (dokunmatikte 40 px), ince kenarlık, şeffaf zemin;
   üzerine gelince açık erik zemin + erik simge. */
.bagitem .qty button,.cart-line .qty button,.set-qty button,.qty-pdp button{
  width:32px;height:32px;min-width:32px;min-height:32px;border-radius:50%;
  border:1px solid var(--line-strong);background:transparent;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  transition:background var(--dur-utility) var(--ease),color var(--dur-utility) var(--ease),border-color var(--dur-utility) var(--ease)}
.bagitem .qty button:hover,.cart-line .qty button:hover,.set-qty button:hover,.qty-pdp button:hover{
  background:var(--btn-cart-tint);color:var(--ink-blue);border-color:var(--btn-cart)}
.bagitem .qty button:focus-visible,.cart-line .qty button:focus-visible,.set-qty button:focus-visible,.qty-pdp button:focus-visible{
  outline:2px solid var(--ink-blue);outline-offset:2px}
.bagitem .qty,.cart-line .qty{gap:6px}
.qty-pdp{height:auto;border:0;background:transparent;gap:6px}
.qty-pdp button{width:40px;height:40px;min-width:40px;min-height:40px}
.pdp-mobilebar .qty-pdp button{width:40px}
@media (max-width:760px){
  .bagitem .qty button,.cart-line .qty button,.set-qty button{width:40px;height:40px;min-width:40px;min-height:40px}
}

/* ================================================================
   HERO (3 Ekim 2026, sahip): TAM GENİŞLİK VİDEO, kenardan kenara; yükseklik ekranın ~%80'i
   (560–760 px). Ürün sağ yarıda; solda yazı için yumuşak krem geçiş, metin solda, alta yakın.
   Mobilde geçiş alttan yukarı, metin altta. Bu blok önceki bölünmüş (sol yazı / sağ görsel)
   yerleşimin yerine geçer; en sonda durduğu için onları geçersiz kılar.
   ================================================================ */
.hero-banner{display:block;position:relative;width:100%;height:clamp(560px,80vh,760px);min-height:0;max-height:none;
  aspect-ratio:auto;padding:0;margin-top:var(--navh);background:#E9E2D9;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;grid-column:auto;grid-row:auto;order:0;margin:0;width:auto;min-height:0;aspect-ratio:auto;
  z-index:0;pointer-events:none;overflow:hidden}
.hero-banner-img{position:absolute;inset:0}
.hero-banner-img img,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center}
.hero-media::after{display:block;content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(250,248,245,.92) 0%,rgba(250,248,245,.6) 32%,rgba(250,248,245,0) 58%)}
.hero-banner .inner{position:absolute;left:var(--gut);bottom:clamp(36px,8vh,84px);z-index:2;order:0;grid-column:auto;grid-row:auto;
  max-width:min(560px,46vw);padding:0;margin:0;align-self:auto}
.hero-banner h1{max-width:12ch}
.hero-banner p{max-width:36ch}
.hero-banner .cta-row{margin-top:26px;display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;align-items:center}
.hero-banner .cta-row .btn{width:auto;max-width:none;padding-left:28px;padding-right:28px}
/* çerçeveli düğme: şeffaf zemin, erik çizgi ve yazı; üzerine gelince açık erik */
.btn-outline{background:transparent;border:1.5px solid var(--ink-blue);color:var(--ink-blue);border-radius:999px}
.btn-outline:hover{background:var(--btn-cart-tint);border-color:var(--btn-cart);color:var(--ink-blue)}
.btn-outline:active{background:var(--btn-cart-tint);border-color:var(--ink-blue)}
@media (max-width:860px){
  .hero-banner{height:clamp(520px,82vh,680px);height:clamp(520px,82svh,680px)}
  .hero-media::after{background:linear-gradient(0deg,rgba(250,248,245,.92) 0%,rgba(250,248,245,.6) 32%,rgba(250,248,245,0) 58%)}
  .hero-banner-img img,.hero-video{object-position:68% center}
  /* sağdaki 60 px boşluk eskiden durdur düğmesine ayrılmıştı; düğme kalktı ama yazının satır kırılışı değişmesin diye korundu */
  .hero-banner .inner{left:16px;right:16px;bottom:26px;max-width:none;padding:0 60px 0 0}
  .hero-banner .cta-row{margin-top:16px;gap:10px}
  .hero-banner .cta-row .btn{padding-left:22px;padding-right:22px}
}

/* ================================================================
   ANASAYFA: SEKMELİ KATEGORİ BLOĞU + "RUTİNİ KEŞFET" (3 Ekim 2026, sahip)
   ================================================================ */
.vitrin-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 24px}
.vitrin-tab{min-height:44px;padding:0 20px;border:1.5px solid var(--ink-blue);border-radius:999px;background:transparent;color:var(--ink-blue);cursor:pointer;
  font-family:var(--ui);font-size:var(--t-button-size);font-weight:var(--t-button-weight);letter-spacing:var(--t-button-ls);
  transition:background var(--dur-utility) var(--ease),color var(--dur-utility) var(--ease)}
.vitrin-tab:hover{background:var(--btn-cart-tint)}
.vitrin-tab[aria-selected="true"]{background:var(--btn-cart);color:var(--btn-cart-text)}
.vitrin-tab:focus-visible{outline:2px solid var(--ink-blue);outline-offset:3px}
.vitrin-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
@media (max-width:1100px){.vitrin-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .vitrin-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 6px;scrollbar-width:none}
  .vitrin-grid::-webkit-scrollbar{display:none}
  .vitrin-grid > .pcard{flex:0 0 62%;scroll-snap-align:start}
  .vitrin-tabs{flex-wrap:nowrap;overflow-x:auto;margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));padding:0 var(--gut);scrollbar-width:none}
  .vitrin-tabs::-webkit-scrollbar{display:none}
  .vitrin-tab{flex:none}
}
.rutin-wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4.5vw,72px);align-items:center}
.rutin-ters .rutin-sahne{order:2}
.rutin-sahne{position:relative;border-radius:18px;overflow:hidden;background:var(--chalk)}
.rutin-sahne > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rutin-kicker{margin:0 0 10px;font-family:var(--ui);font-size:var(--t-label-size);font-weight:var(--t-label-weight);letter-spacing:var(--t-label-ls);
  text-transform:uppercase;color:var(--ink-blue);line-height:var(--t-label-lh)}
.rutin-yan h2{margin-bottom:22px}
.rutin-dot{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:#fff;color:var(--ink-blue);box-shadow:0 4px 14px rgba(27,26,24,.28);
  font-family:var(--ui);font-size:var(--t-small-size);font-weight:var(--fw-600);line-height:1;
  transition:background var(--dur-utility) var(--ease),color var(--dur-utility) var(--ease),transform var(--dur-commerce) var(--ease)}
.rutin-dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);animation:rutin-nabiz 2.4s ease-out infinite}
@keyframes rutin-nabiz{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.rutin-dot.on,.rutin-dot:hover,.rutin-dot:focus-visible{background:var(--btn-cart);color:var(--btn-cart-text);transform:translate(-50%,-50%) scale(1.1)}
.rutin-dot:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (pointer:coarse){.rutin-dot{width:40px;height:40px}}
@media (prefers-reduced-motion:reduce){.rutin-dot::after{animation:none;opacity:0}}
.rutin-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rutin-item{display:grid;grid-template-columns:auto 72px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 14px 10px 12px;
  border:1px solid var(--line);border-radius:16px;background:var(--milk);
  transition:border-color var(--dur-commerce) var(--ease),background var(--dur-commerce) var(--ease)}
.rutin-item.on{border-color:var(--btn-cart);background:var(--btn-cart-tint)}
.rutin-no{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--btn-cart-tint);color:var(--btn-cart-tint-text);
  font-family:var(--ui);font-size:var(--t-small-size);font-weight:var(--fw-600);line-height:1}
.rutin-item.on .rutin-no{background:var(--btn-cart);color:var(--btn-cart-text)}
.rutin-th{display:block;width:72px;height:72px;border-radius:12px;overflow:hidden;background:var(--chalk)}
.rutin-th img{width:100%;height:100%;object-fit:cover;display:block}
.rutin-ad{display:flex;flex-direction:column;gap:4px;min-width:0;text-decoration:none;color:var(--ink)}
.rutin-n{font-family:var(--ui);font-size:var(--t-body-size);font-weight:var(--t-body-weight);line-height:var(--t-body-lh);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rutin-ad .price{font-family:var(--ui);font-size:var(--t-price-size);font-weight:var(--t-price-weight);letter-spacing:var(--t-price-ls)}
.rutin-cart{opacity:1}
.rutin-all{gap:10px;min-width:min(100%,320px)}
.rutin-all.done{background:var(--btn-cart)}
@media (max-width:860px){
  .rutin-wrap{grid-template-columns:1fr}
  .rutin-ters .rutin-sahne{order:0}
  .rutin-item{grid-template-columns:auto 60px minmax(0,1fr) auto;gap:10px}
  .rutin-th{width:60px;height:60px}
  .rutin-all{width:100%}
}

/* ---- "Rutini keşfet": sahnedeki set satırı; "Bakımına göre keşfet" altındaki bağlantı (3 Ekim 2026) ---- */
/* SET TEKLİFİ (4 Ekim 2026, sahip): sahnedeki ürünler tek set olarak da satılıyorsa set numaralı satır değil, listenin
   altında ayrı bir teklif (üstü çizili eski fiyat + set fiyatı); düğme seti ekler. Ürünleri ayrı ayrı ekleme bağlantısı yok (5 Ekim 2026, sahip). */
.rutin-teklif{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:12px 0 0;padding:12px 16px;
  border:1px dashed var(--line-strong);border-radius:16px;color:var(--ink);
  font-family:var(--ui);font-size:var(--t-body-size);font-weight:var(--t-body-weight);line-height:var(--t-body-lh);
  transition:border-color var(--dur-commerce) var(--ease),background var(--dur-commerce) var(--ease)}
.rutin-teklif.on{border-style:solid;border-color:var(--btn-cart);background:var(--btn-cart-tint)}
.rutin-teklif-fiyat{font-weight:var(--fw-600);color:var(--ink-blue)}
.rutin-act{display:flex;flex-direction:column;align-items:flex-start;width:fit-content;max-width:100%;gap:6px;margin-top:20px}
@media (max-width:860px){.rutin-act{width:100%;align-items:stretch}}
/* yalnız sette olan parçanın noktası: numarasız, ortasında küçük dolu nokta */
.rutin-dot-set::before{content:"";position:absolute;inset:0;margin:auto;width:9px;height:9px;border-radius:50%;background:currentColor}
.bakim-alt{margin:18px 0 0;text-align:left}
#bakim,#vitrin{padding-top:clamp(44px,6.5vh,76px);padding-bottom:clamp(44px,6.5vh,76px)}

/* ================================================================
   KARTTA ÜRÜN BOYUTU (4 Ekim 2026, sahip: "yüz kesesi ile vücut kesesi aynı boyutta görünmesin").
   Düz zemin üzerindeki dekupe ürün, ürün tipine göre kartın görsel alanı yüksekliğinin %55 / %75 / %90'ı;
   yatayda ortalı, tabanı ortak çizgide. Sahne fotoğrafları etkilenmez. Boyut ve konum site.js kartBoyutu()'ndan
   (--bx/--by/--bs/--bo), oranlar ve tip eşleştirmesi assets/urun-boyut.js'ten gelir. Dosyanın kendi kenar payı
   (11%) bu kartlarda yok: ölçü ürünün gerçek sınırından alındığı için pay hesaba zaten girer.
   ================================================================ */
/* Başa konan scale(1 / 1.03) yerleşimin DIŞINDA kalan büyütmedir: yerleşim (çeviri + ölçek) aynı kalır, büyütme taban
   çizgisinden yapılır, yani üzerine gelince ürünün altı yerinden oynamaz. Diğer kartlarda %5, burada %3: en büyük
   ürün (%90) %5 büyüyünce görsel alanının üstünden taşıp kırpılıyordu. */
.pcard .plate.kb img{padding:0;transform-origin:50% var(--bo,94%);transform:scale(1) translate(var(--bx,0%),var(--by,0%)) scale(var(--bs,1))}
@media (hover:hover) and (pointer:fine){
  .pcard:hover .plate.kb img{transform:scale(1.03) translate(var(--bx,0%),var(--by,0%)) scale(var(--bs,1))}
}
/* hareket azaltma: üzerine gelince büyüme kapalı kalır, ama yerleşim (boyut, ortalama, taban) kalkmaz */
@media (prefers-reduced-motion:reduce){
  .pcard .plate.kb img{transform:scale(1) translate(var(--bx,0%),var(--by,0%)) scale(var(--bs,1))!important}
}
/* "Diğer kişiye özel" ızgarasında plaka kare (1:1): formüller 4:5 içindir, orada eski ortalama kalır */
#personalOthers .plate.kb img{padding:11%;transform-origin:50% 50%;transform:translate(var(--kx,0%),var(--ky,0%)) scale(var(--ks,1))}
@media (hover:hover) and (pointer:fine){
  #personalOthers .pcard:hover .plate.kb img{transform:translate(var(--kx,0%),var(--ky,0%)) scale(calc(var(--ks,1) * 1.05))}
}
@media (prefers-reduced-motion:reduce){
  #personalOthers .plate.kb img{transform:translate(var(--kx,0%),var(--ky,0%)) scale(var(--ks,1))!important}
}

/* ================================================================
   BAKIMINA UYGUN ÜRÜNÜ BUL (5 Ekim 2026, anasayfa demo; sahip isteği).
   "Çok satanlar" bölümünün altında. Renk (Kuru erik --btn-cart, seçili zemin --btn-cart-tint), yazı ölçeği (--t-*),
   boşluk (.sec --space-section), font ve ürün kartı (.pcard) sitenin mevcutlarıdır; yeni değişken tanımlanmadı.
   ================================================================ */
.bb-ust{display:flex;flex-direction:column;align-items:center;text-align:center}
.bb-kicker{margin:0 0 10px;font-family:var(--ui);font-size:var(--t-label-size);font-weight:var(--t-label-weight);letter-spacing:var(--t-label-ls);
  text-transform:uppercase;color:var(--ink-blue);line-height:var(--t-label-lh)}
.bb-ust h2.big{max-width:none;margin:0;text-align:center}
.bb-lead{margin:14px auto 0;max-width:54ch;color:var(--ink-soft);font-family:var(--ui);font-size:var(--t-body-size);font-weight:var(--t-body-weight);line-height:var(--t-body-lh)}

/* sekiz yuvarlak ikon: 108 px daire, --chalk zemin, ortada ince çizgi ikon. İlk açılışta hiçbiri seçili değil. */
.bb-ikonlar{display:flex;justify-content:center;gap:clamp(12px,2vw,28px);margin-top:36px}
.bb-ikon{flex:none;display:flex;flex-direction:column;align-items:center;gap:10px;width:116px;padding:0;border:0;background:none;cursor:pointer;font-family:var(--ui);color:var(--ink)}
.bb-daire{width:108px;height:108px;border-radius:50%;background:var(--chalk);display:grid;place-items:center;color:var(--ink-blue);
  transition:background var(--dur-utility) var(--ease),box-shadow var(--dur-utility) var(--ease)}
.bb-daire svg{width:52px;height:52px;fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round}
.bb-daire svg *{vector-effect:non-scaling-stroke}   /* büyük ikonda da çizgi 1,6 px: sepet/kalp ikonlarıyla aynı kalınlık */
.bb-etiket{font-size:var(--t-small-size);font-weight:var(--t-small-weight);line-height:1.3;text-align:center;transition:color var(--dur-utility) var(--ease)}
.bb-ikon:hover .bb-daire{background:var(--btn-cart-tint)}
.bb-ikon[aria-checked="true"] .bb-daire{background:var(--btn-cart-tint);box-shadow:0 0 0 2px var(--btn-cart)}
.bb-ikon[aria-checked="true"] .bb-etiket{color:var(--ink-blue);font-weight:var(--fw-600)}
.bb-ikon:focus-visible{outline:none}
.bb-ikon:focus-visible .bb-daire{outline:2px solid var(--ink-blue);outline-offset:4px}

/* soru: seçimden sonra ikonların altında; üstünde küçük "Seçimi temizle" bağlantısı */
.bb-soru{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:26px}
.bb-soru[hidden]{display:none}
.bb-temizle{border:0;background:none;padding:6px 4px;min-height:36px;cursor:pointer;font-family:var(--ui);font-size:var(--t-small-size);font-weight:var(--t-small-weight);
  color:var(--ink-blue);text-decoration:underline;text-underline-offset:3px}
.bb-temizle:hover{color:var(--ink-blue)}
.bb-temizle:focus-visible{outline:2px solid var(--ink-blue);outline-offset:2px;border-radius:6px}
.bb-sq-satir{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px}
.bb-sq{font-family:var(--ui);font-size:var(--t-body-size);font-weight:var(--fw-500,500);line-height:var(--t-body-lh);color:var(--ink)}
.bb-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.bb-pill{min-height:40px;padding:0 18px;border:1.5px solid var(--ink-blue);border-radius:999px;background:transparent;color:var(--ink-blue);cursor:pointer;
  font-family:var(--ui);font-size:var(--t-button-size);font-weight:var(--t-button-weight);letter-spacing:var(--t-button-ls);
  transition:background var(--dur-utility) var(--ease),color var(--dur-utility) var(--ease)}
.bb-pill:hover{background:var(--btn-cart-tint)}
.bb-pill[aria-pressed="true"]{background:var(--btn-cart);color:var(--btn-cart-text)}
.bb-pill:focus-visible{outline:2px solid var(--ink-blue);outline-offset:3px}

/* sonuç paneli: --chalk zemin, yuvarlak köşe. Solda bilgi, sağda en çok 4 kart. */
.bb-panel{margin-top:28px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2.2fr);gap:clamp(20px,3vw,48px);align-items:center;
  min-height:380px;background:var(--chalk);border-radius:24px;padding:clamp(20px,3vw,40px)}
.bb-baslik{margin:0 0 10px;font-family:var(--display);font-size:var(--t-h3-size);font-weight:var(--t-h3-weight);letter-spacing:var(--t-h3-ls);line-height:var(--t-h3-lh);color:var(--ink)}
.bb-aciklama{margin:0;color:var(--ink-soft);font-family:var(--ui);font-size:var(--t-body-size);font-weight:var(--t-body-weight);line-height:var(--t-body-lh)}
.bb-taslak{margin:12px 0 0;font-family:var(--ui);font-size:var(--t-small-size);font-weight:var(--t-small-weight);color:var(--ink-soft)}
.bb-taslak span{display:inline-block;margin-right:6px;padding:2px 9px;border-radius:999px;background:var(--btn-cart-tint);color:var(--btn-cart-tint-text);font-weight:var(--fw-600)}
.bb-video{display:inline-block;margin-top:14px;font-family:var(--ui);font-size:var(--t-body-size);font-weight:var(--fw-500,500);color:var(--ink-blue);text-decoration:underline;text-underline-offset:3px}
.bb-video:hover{color:var(--ink-blue)}
.bb-video:focus-visible{outline:2px solid var(--ink-blue);outline-offset:3px;border-radius:6px}
.bb-hepsi{display:inline-flex;margin-top:24px}
/* en çok 4 kart; kart sayısı azsa kartlar ORTALANIR, boş yer tutucu konmaz */
.bb-urunler{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,1.4vw,20px);align-items:flex-start}
.bb-urunler>.pcard{flex:0 0 calc(25% - clamp(12px,1.4vw,20px) * .75);min-width:0}
/* ihtiyaç / seçenek değişirken sitedeki mevcut kısa sönme (.set-grid.is-swap ile aynı 0,22 sn); eski içerik yenisi hazır olana dek yerinde kalır */
.bb-panel .bb-bilgi,.bb-panel .bb-urunler{transition:opacity .22s var(--ease)}
.bb-panel .is-swap{opacity:0}

/* kart altı fark etiketi (#EEE5E5 zeminli) ve "KARARSIZSAN" rozeti; ürün görselinin ÜSTÜNE yazı konmaz */
.bb-panel .pcard-tag{display:none}   /* kartta tek etiket: eski rozet gizli */
.bb-etiketler{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 2px;min-height:24px}
.bb-fark{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--btn-cart-tint);color:var(--btn-cart-tint-text);
  font-family:var(--ui);font-size:var(--t-small-size);font-weight:var(--t-small-weight);line-height:1.3}
.bb-kararsiz{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--btn-cart);color:var(--btn-cart-text);
  font-family:var(--ui);font-size:11px;font-weight:var(--fw-600);letter-spacing:.06em;line-height:1.3}

/* renk / çeşit seçici (tek kart) */
.bb-secici{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.bb-renk{min-height:30px;padding:0 12px;border:1.5px solid var(--ink-blue);border-radius:999px;background:transparent;color:var(--ink-blue);cursor:pointer;
  font-family:var(--ui);font-size:var(--t-small-size);font-weight:var(--t-small-weight);line-height:1;
  transition:background var(--dur-utility) var(--ease),color var(--dur-utility) var(--ease)}
.bb-renk:hover{background:var(--btn-cart-tint)}
.bb-renk[aria-pressed="true"]{background:var(--btn-cart);color:var(--btn-cart-text)}
.bb-renk:focus-visible{outline:2px solid var(--ink-blue);outline-offset:2px}
.reel.bb-vurgu{outline:2px solid var(--ink-blue);outline-offset:6px;border-radius:14px}

@media (max-width:1100px){
  .bb-panel{grid-template-columns:1fr;min-height:0}
}
@media (max-width:760px){
  /* mobil: 4 × 2 grid, yatay kaydırma yok */
  .bb-ikonlar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 8px;justify-content:stretch}
  .bb-ikon{width:auto;min-width:0;gap:8px}
  .bb-daire{width:100%;max-width:108px;height:auto;aspect-ratio:1/1}
  .bb-daire svg{width:38%;height:auto}
  .bb-etiket{font-size:12px;line-height:1.25}
  .bb-urunler>.pcard{flex-basis:calc(50% - clamp(12px,1.4vw,20px) / 2)}   /* ürünler 2 × 2; tek kalan kart ortalanır */
  .bb-hepsi{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .bb-daire,.bb-pill,.bb-renk,.bb-etiket{transition:none}
  .bb-panel .bb-bilgi,.bb-panel .bb-urunler{transition:none}
}

/* ================================================================
   RUTİNİ KEŞFET — NOKTASIZ KART BİÇİMİ (5 Ekim 2026, sahip: iki bölüm birbirine benzemesin; noktalar olmasın)
   Koyu (kuru erik) zeminli tek kart: bir yanda sahne fotoğrafı, öbür yanda ürünler, üstü çizili eski fiyat + set fiyatı, tek düğme.
   Renkler sitenin mevcut değişkenleri; yeni değişken yok.
   ================================================================ */
.rutin-eski{color:var(--ink-soft);font-weight:var(--t-body-weight);text-decoration:line-through;text-decoration-thickness:1.5px}
.rutin-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:hidden;border-radius:24px;background:var(--btn-cart);color:var(--btn-cart-text);
  min-height:clamp(440px,40vw,580px)}
.rutin-panel-ic{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(28px,4.5vw,72px)}
.rutin-panel-kicker{margin:0 0 10px;font-family:var(--ui);font-size:var(--t-label-size);font-weight:var(--t-label-weight);letter-spacing:var(--t-label-ls);
  text-transform:uppercase;line-height:var(--t-label-lh);color:var(--btn-cart-tint);opacity:.85}
.rutin-panel-baslik{margin:0 0 24px;color:inherit}
.rutin-panel-liste{list-style:none;margin:0 0 24px;padding:0;width:100%;border-top:1px solid rgba(255,255,255,.22)}
.rutin-panel-liste li{border-bottom:1px solid rgba(255,255,255,.22)}
.rutin-panel-liste a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;color:inherit;text-decoration:none}
.rutin-panel-liste a:hover .rutin-panel-n,.rutin-panel-liste a:focus-visible .rutin-panel-n{text-decoration:underline;text-underline-offset:3px}
.rutin-panel-liste a:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px}
.rutin-panel-n{font-family:var(--ui);font-size:var(--t-body-size);font-weight:var(--t-body-weight);line-height:var(--t-body-lh)}
.rutin-panel-p{font-family:var(--ui);font-size:var(--t-price-size);font-weight:var(--t-price-weight);white-space:nowrap}
.rutin-panel-fiyat{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:0 0 24px}
.rutin-panel-lbl{flex:0 0 100%;font-family:var(--ui);font-size:var(--t-small-size);font-weight:var(--t-small-weight);line-height:1.4;opacity:.85}
.rutin-panel .rutin-eski{color:inherit;opacity:.65;font-family:var(--ui);font-size:var(--t-body-size)}
.rutin-panel .rutin-yeni{color:inherit;font-family:var(--display);font-size:var(--t-h3-size);font-weight:var(--fw-600);line-height:var(--t-h3-lh)}
.rutin-panel-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 30px;border:0;border-radius:999px;background:var(--chalk);color:var(--ink-blue);cursor:pointer;
  font-family:var(--ui);font-size:var(--t-button-size);font-weight:var(--fw-600);letter-spacing:var(--t-button-ls);
  transition:background var(--dur-utility) var(--ease)}
.rutin-panel-btn svg{width:20px;height:20px;flex:none}
.rutin-panel-btn:hover,.rutin-panel-btn.done{background:var(--btn-cart-tint)}
.rutin-panel-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.rutin-panel-foto{position:relative;min-height:320px;background:var(--chalk)}
.rutin-panel-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;display:block}
@media (max-width:860px){
  .rutin-panel{grid-template-columns:1fr;min-height:0}
  .rutin-panel-foto{order:-1;min-height:0;aspect-ratio:1/1}
  .rutin-panel-ic{padding:28px 22px 32px}
  .rutin-panel-btn{width:100%}
}

/* ============================================================
   TASARIM 9 EKİM 2026 — beyaz · siyah · sis mavisi (sahip briefi, DEMO)
   Renkler yalnız değişkenlerden: --btn-cart* (sis mavisi dolgu, derin mavi yazı), --ink-blue, --fog,
   --fog-line, --chalk (#F2F0EC bej katman), --milk/#fff (zemin), --ink (#1B1A18 yazı).
   ============================================================ */

/* ---- 1) DUYURU BANDI: beyaz, "El yazısı + Nefes" ---- */
.announce{background:#fff;color:var(--ink);border-bottom:1px solid rgba(27,26,24,.09);height:38px;display:flex;align-items:center;overflow:hidden;position:relative;z-index:31}
.announce-track{display:flex;align-items:center;gap:64px;width:max-content;animation:none;will-change:transform;transition:transform .8s cubic-bezier(.65,0,.35,1)}
.announce-run{display:flex;flex:none;align-items:center;gap:64px}
.announce-item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex:none;opacity:.32;transition:opacity .8s ease;
  font-family:var(--ui);font-size:14px;font-weight:var(--fw-500);letter-spacing:0;line-height:1;color:var(--ink)}
.announce-item.on{opacity:1}
.announce-ic{width:16px;height:16px;flex:none;fill:none;stroke:var(--ink-blue);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.announce-vis{display:inline-flex;align-items:baseline;white-space:pre}
.announce-hand{font-family:'Dancing Script',cursive;font-weight:700;font-size:21px;line-height:1;color:var(--ink-blue);display:inline-block;padding:0 1px}
/* 9 Ekim 2026, sahip: el yazısı kelimeler sonradan gelmez, mesajla birlikte görünür (yazma animasyonu kaldırıldı) */
@keyframes announce-yaz{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% -2% -20% 0)}}
.announce-dot{display:none}
@media (max-width:560px){
  .announce-item{font-size:13px}
  .announce-hand{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .announce-track{transition:none}
  .announce-run:not(:nth-child(2)){display:none}
  .announce-run:nth-child(2) .announce-item:not(:first-child){display:none}
  .announce-item{opacity:1;transition:none}
  .announce-item.on .announce-hand{animation:none;clip-path:none}
}

/* ---- 2) GİRİŞ (hero) ---- */
.hero-banner h1{font-size:clamp(40px,6.2vw,64px);line-height:1.04}
.hero-banner p{font-size:18px}
.hero-media::after{background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.6) 32%,rgba(255,255,255,0) 58%)}
@media (max-width:860px){.hero-media::after{background:linear-gradient(0deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.6) 32%,rgba(255,255,255,0) 58%)}}
.hero-banner .btn-outline{background:#fff;border-color:var(--line-strong);color:var(--ink)}
.hero-banner .btn-outline:hover{background:var(--milk)}

/* ---- ORTAK: bölüm başlıkları 36 px, küçük etiketler derin mavi ---- */
.sec h2.big,.sec-head h2.big,.bb-h,.rutin-wrap h2.big,.rutin-panel h2.big{font-size:36px;line-height:1.12}
@media (max-width:560px){.sec h2.big,.sec-head h2.big,.bb-h,.rutin-wrap h2.big,.rutin-panel h2.big{font-size:30px}}
.bb-kicker,.rutin-kicker,.rutin-panel-kicker,.kicker{color:var(--ink-blue);text-transform:uppercase;letter-spacing:.14em}
.btn-outline{border-color:var(--ink-blue);color:var(--ink-blue)}
.btn-outline:hover{background:var(--btn-cart-tint);border-color:var(--ink-blue);color:var(--ink-blue)}
.sec-more,.bb-temizle,.bb-video,.bb-renk{color:var(--ink-blue)}
.pcard-cart,.pcard-cart .ico-cart{color:var(--btn-cart-text)}

/* ---- 4) BAKIMINA GÖRE — "Bulut" ---- */
.bb-daire{background:#fff;color:var(--ink-blue);box-shadow:0 6px 18px rgba(27,26,24,.07);transition:transform .25s var(--ease),background .25s,box-shadow .25s}
.bb-ikon:hover .bb-daire{background:var(--btn-cart-tint)}
.bb-ikon[aria-checked="true"] .bb-daire{background:var(--fog);box-shadow:0 0 0 2px var(--fog-line),0 10px 22px rgba(36,71,107,.12);transform:translateY(-4px)}
.bb-ikon[aria-checked="true"] .bb-etiket{color:var(--ink-blue)}
.bb-etiket{font-size:14px;white-space:nowrap}
.bb-ikonlar{overflow-x:auto;justify-content:flex-start;scrollbar-width:none;padding:8px 4px 14px}
.bb-ikonlar::-webkit-scrollbar{display:none}
@media (min-width:1100px){.bb-ikonlar{justify-content:center;overflow:visible}}
.bb-pill{border:0;background:var(--chalk);color:var(--ink)}
.bb-pill:hover{background:var(--mineral)}
.bb-pill[aria-pressed="true"],.bb-pill.on,.bb-pill[aria-checked="true"]{background:var(--ink);color:#fff}
.bb-panel{background:var(--chalk);border-radius:16px}

/* ---- 5) BAKIM RİTÜELLERİ ---- */
.reel-no{display:none}
.reel-media,.reel-media video,.reel-media img{border-radius:16px}
.reel-t{font-size:18px;font-weight:var(--fw-600)}
.reel-buy-n{font-size:14px}
.reel-buy-cta{border:0;background:var(--chalk);color:var(--ink);border-radius:999px}

/* ---- 6) HAMAM RİTÜELİ / 8) TÜTSÜ RİTÜELİ ---- */
.rutin-item{background:#fff;border-radius:14px;box-shadow:0 4px 16px rgba(27,26,24,.06)}
.rutin-no,.rutin-panel-n{background:var(--chalk);color:var(--ink);border-radius:50%}
.rutin-teklif,.rutin-panel-liste+*,.rutin-panel-fiyat{background:var(--chalk);border-radius:14px}
.rutin-cart,.rutin-all,.rutin-panel-btn{background:var(--btn-cart);color:var(--btn-cart-text);border-color:var(--btn-cart)}
.rutin-all:hover,.rutin-panel-btn:hover{background:var(--btn-cart-hover)}
.rutin-teklif-ayri{color:var(--ink-soft)}

/* ---- 7) KATEGORİLERE GÖZ AT (sekmeler) ---- */
.vitrin-tab{border:0;background:var(--chalk);color:var(--ink)}
.vitrin-tab:hover{background:var(--mineral)}
.vitrin-tab[aria-selected="true"],.vitrin-tab[aria-pressed="true"]{background:var(--ink);color:#fff}

/* ---- 9) İSME ÖZEL ---- */
#personal{background:var(--chalk)}
#personal .personal-media,#personal .personal-media img,#personal .plate{border-radius:16px}
#personal .pname input,#personal input[type=text]{background:#fff;border-radius:14px}   /* .engrave (isim önizleme katmanı) kaldırıldı: fotoğraf üstünde beyaz kutu yapıyordu */
.symopts .sym{background:#fff;box-shadow:0 3px 12px rgba(27,26,24,.08);color:var(--ink-blue)}
.symopts .sym.is-on{background:var(--fog);border-color:var(--fog-line);box-shadow:0 0 0 2px var(--fog-line)}
#personal .personal-row .price,#personal .price{font-size:24px}
#personal .btn-ghost{background:transparent;border:1.5px solid var(--ink-blue);color:var(--ink-blue)}

/* ---- 10) KULLANANLAR NE DİYOR? ---- */
.rv-score{font-size:56px;line-height:1}
.sp-review,.rail-item .sp-review{background:#fff;border:0;border-radius:16px;box-shadow:0 6px 20px rgba(27,26,24,.07)}
.sp-review blockquote{font-size:16px}

/* ---- 11) GÜVEN ŞERİDİ, BÜLTEN, ALT BİLGİ ---- */
.trust-item svg{color:var(--ink-blue)}
.news{background:var(--chalk)}
.news-h,.news-p,.news-kvkk{color:var(--ink)}
.news-input{background:#fff;border-radius:999px}
.news-form .btn{background:var(--btn-cart);color:var(--btn-cart-text);border-color:var(--btn-cart)}
.foot-langs [aria-pressed="true"],.foot-langs [aria-current="true"],.foot-langs .on{background:var(--fog);color:var(--ink-blue)}

/* ---- 4) mobil: ikonlar tek satır, yatay kaydırılır; yazı kırılmaz, üst üste binmez (brif) ---- */
@media (max-width:760px){
  .bb-ikonlar{display:flex;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;gap:14px;
    margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));padding:8px var(--gut) 14px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .bb-ikon{flex:0 0 auto;width:88px;scroll-snap-align:start}
  .bb-daire{width:76px;max-width:none;height:76px;aspect-ratio:auto}
  .bb-etiket{font-size:13px;white-space:nowrap}
}

/* ---- MENÜ ŞERİDİ: "sis mavisi hap" (sahip seçimi 1, 10 Ekim 2026). Açık sayfa ve hover/odak. Yalnız bu şerit. ---- */
.nav-cats{gap:4px}
.nav-cats a{padding:8px 14px;border-radius:999px;transition:background .2s var(--ease),color .2s var(--ease)}
.nav-cats a::after{display:none}
.nav-cats a:hover,.nav-cats a:focus-visible{background:var(--btn-cart-tint);color:var(--ink-blue)}
.nav-cats a[aria-current="page"]{background:var(--fog);color:var(--ink-blue);font-weight:var(--fw-500)}
@media (max-width:980px){.nav-cats{gap:4px}.nav-cats a{padding:0 14px;line-height:34px}}

/* ---- SEÇİLİ DURUMLAR: tüm sitede siyah dolgu yok; sis mavisi dolgu + derin mavi yazı (sahip, 10 Ekim 2026) ---- */
.plp-sub .chip[aria-current="true"],
.need-chips .chip[aria-pressed="true"],
.chip[aria-current="true"],
.set-tab.is-on,
.bb-pill[aria-pressed="true"],.bb-pill.on,.bb-pill[aria-checked="true"],
.vitrin-tab[aria-selected="true"],.vitrin-tab[aria-pressed="true"],
.dr-foot .langs button[aria-pressed="true"],
.foot-langs [aria-pressed="true"]{background:var(--fog);color:var(--ink-blue);border-color:var(--fog)}

/* ---- TUTARLILIK: kalan siyah dolgulu düğme/etiketler de sis mavisi (sahip, 10 Ekim 2026: "yukarıda mavi, aşağıda siyah olmaz") ---- */
.set-bar-btn{background:var(--btn-cart);color:var(--btn-cart-text)}
.set-bar-btn:hover{background:var(--btn-cart-hover)}
.set-add:hover{background:var(--btn-cart-hover);color:var(--btn-cart-text);border-color:var(--btn-cart-hover)}
.cartcount{background:var(--fog);color:var(--ink-blue)}
.pcard .badge{background:var(--fog);color:var(--ink-blue)}
.tyr-i:hover,.tyr-i[aria-expanded="true"]{background:var(--fog);color:var(--ink-blue);border-color:var(--fog)}
.st-rozet{background:var(--fog);color:var(--ink-blue)}
.st-balon.ben{background:var(--fog);border-color:var(--fog);color:var(--ink-blue)}
.st-cip:hover{background:var(--fog);border-color:var(--fog);color:var(--ink-blue)}

/* ---- TÜTSÜ RİTÜELİ paneli: Hamam ritüeliyle aynı dil (beyaz kart, bej set kutusu, sis mavisi düğme); zemin mavi olmaz ---- */
.rutin-panel{background:#fff;color:var(--ink);box-shadow:0 6px 24px rgba(27,26,24,.07)}
.rutin-panel-liste{border-top:1px solid var(--line)}
.rutin-panel-liste li{border-bottom:1px solid var(--line)}
.rutin-panel-liste a:focus-visible{outline-color:var(--ink-blue)}
.rutin-panel-n{background:none;border-radius:0;color:var(--ink)}
.rutin-panel-fiyat{padding:12px 16px}
.rutin-panel-btn{background:var(--btn-cart);color:var(--btn-cart-text)}
.rutin-panel-btn:hover,.rutin-panel-btn.done{background:var(--btn-cart-hover)}
.rutin-panel-btn:focus-visible{outline-color:var(--ink-blue)}

/* ============================================================
   TASARIM DENEMESİ (10 Ekim 2026, sahip: "dene bakalım demoda") — 5 küçük dokunuş
   1) başlıkta tek el yazısı kelime  2) hero altı sis geçişi  3) kart etiketi sis mavisi
   4) bilgi balonu beyaz             5) yıldızlar derin mavi
   ============================================================ */
.el-kelime{font-family:'Dancing Script',cursive;font-weight:700;color:var(--ink-blue);font-size:1.28em;line-height:1;letter-spacing:0}
.hero-banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(70px,12vh,120px);background:linear-gradient(0deg,var(--milk) 0%,rgba(250,249,247,0) 100%);z-index:1;pointer-events:none}
.bb-fark{background:var(--fog);color:var(--ink-blue)}
.tyr-pop{background:#fff;color:var(--ink);border:1px solid var(--line-strong);box-shadow:0 6px 18px rgba(27,26,24,.08)}
.tyr-stars{--yildiz:var(--ink-blue);--yildiz-bos:var(--mineral)}
.tyr-star{color:var(--ink-blue)}



.pager button[aria-current="true"]{background:var(--fog);color:var(--ink-blue);border-color:var(--fog)}   /* sayfalama: seçili sayfa siyah değil, sis mavisi */
.chip[aria-pressed="true"]{background:var(--fog);color:var(--ink-blue);border-color:var(--fog)}

/* ============================================================
   ANASAYFA DİKEY RİTİM (10 Ekim 2026, sahip: "anasayfa bir bütün olmalı, boşluklar orantılı")
   Tek değişken: --ritim. Her bölümün üst ve alt boşluğu aynı; bölümler arası boşluk = 2 × ritim.
   Kategori daireleri: hero'ya olan uzaklık ile sonraki bölüme olan uzaklık eşit (üstte 2×, altta 1× + sonraki bölümün 1×).
   ============================================================ */
:root{--ritim:clamp(36px,5vw,72px)}
section.sec:not(#discovery){padding-top:var(--ritim);padding-bottom:var(--ritim)}
#discovery.sec-tight{padding-top:calc(var(--ritim) * 2);padding-bottom:calc(var(--ritim) * .8)}
.news{padding-top:var(--ritim);padding-bottom:var(--ritim)}

/* ============================================================
   ÖDEME SAYFASI (10 Ekim 2026): tek sayfa, sırayla açılan bölümler (sahip briefi, DEMO)
   Yalnız checkout.html. Tüm kurallar .co-main / .co-top altında; başka sayfaya sızmaz.
   ============================================================ */
.co-top{background:var(--milk);border-bottom:1px solid var(--line)}
.co-top-in{max-width:1200px;margin:0 auto;padding:10px var(--gut);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.co-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--ink);text-decoration:none;font-family:var(--ui);font-size:var(--t-small-size);justify-self:start}
.co-back:hover{color:var(--ink-blue)}
.co-back svg,.co-secure svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.co-logo{justify-self:center;display:block}
.co-logo img{height:34px;width:auto;display:block}
.co-secure{justify-self:end;display:inline-flex;align-items:center;gap:6px;color:var(--ink-soft);font-family:var(--ui);font-size:var(--t-small-size)}
@media (max-width:360px){.co-secure span{display:none}.co-logo img{height:30px}}

.co-main{background:var(--milk);padding:28px 0 64px}
.co-wrap{max-width:1200px;margin:0 auto;padding:0 var(--gut)}
.co-h1{margin:0 0 22px;font-family:var(--display);font-size:clamp(28px,4vw,36px);font-weight:var(--fw-600);line-height:1.12;color:var(--ink)}
.co-main .co-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:36px;margin-top:0;align-items:start}
.co-main .co-summary{position:sticky;top:20px;background:#fff;border:1px solid var(--mineral);border-radius:20px;padding:22px}
.co-mobsum{display:none}
@media (max-width:900px){
  .co-main .co-layout{display:flex;flex-direction:column;gap:0}
  .co-main .co-summary{display:none;position:static;order:-1;margin:0 0 16px}
  .co-main .co-summary.is-shown{display:block}
  .co-mobsum{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:0 18px;margin:0 0 16px;background:#fff;border:1px solid var(--mineral);border-radius:16px;font-family:var(--ui);font-size:var(--t-body-size);color:var(--ink-blue);cursor:pointer}
  .co-mobsum b{margin-left:auto;color:var(--ink);font-weight:var(--fw-600)}
  .co-mobsum svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
}

/* bölüm kartı */
.co-step{background:#fff;border:1px solid var(--mineral);border-radius:20px;margin:0 0 14px;transition:box-shadow .25s var(--ease),border-color .25s var(--ease),opacity .25s}
.co-step.is-wait{opacity:.55}
.co-step.is-open{border-color:var(--ink-blue);box-shadow:0 0 0 4px var(--btn-cart-tint)}
.co-step-head{display:flex;align-items:center;gap:14px;padding:16px 22px;min-height:64px}
.co-step.is-done .co-step-head{cursor:pointer}
.co-no{position:relative;width:32px;height:32px;border-radius:50%;background:var(--fog);color:var(--ink-blue);display:grid;place-items:center;flex:none;font-family:var(--ui);font-weight:var(--fw-600);font-size:14px}
.co-no i{font-style:normal}
.co-no svg{position:absolute;inset:0;margin:auto;width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.co-step.is-done .co-no{background:var(--ink)}
.co-step.is-done .co-no i{opacity:0}
.co-step.is-done .co-no svg{opacity:1}
.co-step-ttl{flex:1;min-width:0}
.co-step-ttl h2{margin:0;font-family:var(--ui);font-size:18px;font-weight:var(--fw-600);color:var(--ink)}
.co-step-sum{margin:3px 0 0;color:var(--ink-soft);font-family:var(--ui);font-size:var(--t-small-size);overflow-wrap:anywhere}
.co-change{background:none;border:0;min-height:44px;padding:0 6px;color:var(--ink-blue);text-decoration:underline;cursor:pointer;font-family:var(--ui);font-size:var(--t-small-size)}
.co-step-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.co-step.is-open .co-step-body{grid-template-rows:1fr}
.co-step-in{overflow:hidden;min-height:0;padding:0 22px}
.co-step.is-open .co-step-in{padding-bottom:22px}
@media (prefers-reduced-motion:reduce){.co-step,.co-step-body{transition:none}}

/* alanlar */
.co-main .co-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:2px}
@media (max-width:560px){.co-main .co-grid{grid-template-columns:1fr}}
.co-main .co-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.co-main .co-field.co-wide{grid-column:1/-1}
.co-main .co-field label:not(.co-check){font-family:var(--ui);font-size:var(--t-small-size);color:var(--ink-soft)}
.co-main .co-field input:not([type=checkbox]),.co-main .co-field select,.co-main .co-field textarea,.co-coupon input{width:100%;min-height:48px;padding:0 14px;border:1px solid var(--line-strong);border-radius:12px;background:#fff;color:var(--ink);font-family:var(--ui);font-size:var(--t-body-size)}
.co-main .co-field textarea{padding:12px 14px;min-height:96px;resize:vertical}
.co-main .co-field input:not([type=checkbox]):focus,.co-main .co-field select:focus,.co-main .co-field textarea:focus,.co-coupon input:focus{outline:none;border-color:var(--ink-blue);box-shadow:0 0 0 3px var(--fog)}
.co-main .co-field .has-err{border-color:#D9857C}
.co-main .co-field select:disabled{background:var(--chalk);color:var(--ink-faint)}
.co-err{margin:0;color:var(--error);font-family:var(--ui);font-size:var(--t-small-size)}
.co-err:empty{display:none}
.co-phone{display:flex;align-items:stretch}
.co-phone-pre{display:inline-flex;align-items:center;padding:0 14px;border:1px solid var(--line-strong);border-right:0;border-radius:12px 0 0 12px;background:var(--chalk);color:var(--ink-soft);font-family:var(--ui)}
.co-main .co-phone input{border-radius:0 12px 12px 0}
.co-check{display:flex;gap:10px;align-items:flex-start;min-height:44px;padding:10px 0;cursor:pointer;font-family:var(--ui);font-size:var(--t-body-size);color:var(--ink)}
.co-check input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--ink-blue)}
.co-consent a{color:var(--ink-blue)}
.co-sub{margin:10px 0 16px;padding:16px;background:var(--chalk);border-radius:16px}
.co-sub-h{margin:0 0 12px;font-family:var(--ui);font-weight:var(--fw-600);font-size:var(--t-small-size);color:var(--ink)}
.co-faturatip{border:0;margin:14px 0 14px;padding:0}
.co-faturatip legend{padding:0 0 8px;font-family:var(--ui);font-size:var(--t-small-size);color:var(--ink-soft)}
.co-pills{display:flex;gap:10px;flex-wrap:wrap}
.co-pill{min-height:44px;padding:0 20px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer;font-family:var(--ui);font-size:var(--t-body-size)}
.co-pill:hover{background:var(--chalk)}
.co-pill.is-on{background:var(--fog);color:var(--ink-blue);border-color:var(--fog)}
.co-ship{display:flex;align-items:center;gap:14px;padding:16px;border:1.5px solid var(--ink-blue);border-radius:14px;background:var(--btn-cart-tint);font-family:var(--ui)}
.co-ship p{margin:2px 0 0;color:var(--ink-soft);font-size:var(--t-small-size)}
.co-ship-price{margin-left:auto;font-weight:var(--fw-600);color:var(--ink)}
.co-ship-dot{width:20px;height:20px;flex:none;border-radius:50%;border:2px solid var(--ink-blue);background:radial-gradient(circle,var(--ink-blue) 0 4px,#fff 5px)}
.co-main .co-actions{margin-top:18px}
.co-main .co-actions .btn{min-height:48px}
.co-pay{width:100%;min-height:56px;font-size:var(--t-body-lg-size)}
.co-main .co-note{margin:10px 0 0;color:var(--ink-soft);font-family:var(--ui);font-size:var(--t-small-size)}
#coPayFrame{margin-top:18px}
#paytrFrame{display:block;width:100%;min-height:620px;border:0}

/* sipariş özeti */
.co-sum-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 16px}
.co-sum-head h2{margin:0;font-family:var(--ui);font-size:18px;font-weight:var(--fw-600)}
.co-edit{color:var(--ink-blue);font-family:var(--ui);font-size:var(--t-small-size);text-decoration:underline;min-height:44px;display:inline-flex;align-items:center}
.co-line{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:start;padding:10px 0}
.co-th{position:relative;display:block;width:64px;height:64px}
.co-th img{display:block;width:100%;height:100%;object-fit:contain;border-radius:14px;background:var(--chalk)}
.co-qty{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--ink);color:#fff;font-family:var(--ui);font-size:12px;font-weight:var(--fw-600);display:grid;place-items:center}
.co-line-b{min-width:0;display:block;font-family:var(--ui)}
.co-line-n{display:block;color:var(--ink);font-size:var(--t-small-size);line-height:1.35}
.co-main .co-line-p{font-family:var(--ui);font-size:var(--t-small-size);font-weight:var(--fw-600);white-space:nowrap}
.co-eng{margin-top:8px;padding:8px 10px;border:1px dashed var(--line-strong);border-radius:10px;background:#fff;text-align:center}
.co-eng-in{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:Gabriola,"Brush Script MT","Segoe Script",var(--display),cursive;font-size:24px;line-height:1.1;color:var(--ink)}
.co-eng-in img{width:22px;height:22px;object-fit:contain}
.co-eng small{display:block;margin-top:6px;color:var(--ink-faint);font-family:var(--ui);font-size:12px;line-height:1.35}
.co-coupon{margin:14px 0 8px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.co-coupon label{display:block;margin:0 0 6px;font-family:var(--ui);font-size:var(--t-small-size);color:var(--ink-soft)}
.co-coupon-row{display:flex;gap:10px}
.co-coupon-row input{flex:1;min-width:0}
.co-coupon-row .btn{min-height:48px;flex:none}
.co-main .co-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-family:var(--ui);font-size:var(--t-body-size);color:var(--ink)}
.co-main .co-total{margin-top:6px;padding-top:14px;border-top:1px solid var(--line);font-size:20px;font-weight:var(--fw-600)}
.co-main .co-kdv{margin:2px 0 0;text-align:right}
.co-trust{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:12px}
.co-trust li{display:flex;align-items:center;gap:10px;font-family:var(--ui);font-size:var(--t-small-size);color:var(--ink-soft)}
.co-trust svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--ink-blue);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.co-main .co-eng{display:block;margin-top:8px;padding:8px 10px;border:1px dashed var(--line-strong);border-radius:10px;background:#fff;text-align:center;justify-content:initial;gap:0}
.co-main .co-eng span{font-weight:inherit}

/* ---- BAKIMINA UYGUN ÜRÜNÜ BUL: dizilim (10 Ekim 2026, sahip briefi) ----
   Masaüstü: tüm seçenekler TEK SIRADA, eşit sütunlar; yatay kaydırma ve kesilme yok.
   Seçenek sayısı değişince sütunlar kendiliğinden bölüşülür (grid-auto-flow:column).
   Tablet: 4'erli ızgara, mobil: 3'erli. Yazılar iki satıra kırılır, kesilmez. */
.bb-ikonlar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(8px,1.4vw,24px);justify-content:stretch;overflow:visible;margin-left:0;margin-right:0;padding:8px 0 14px;scroll-snap-type:none}
.bb-ikon{width:auto;min-width:0;flex:none;gap:10px;scroll-snap-align:none}
.bb-daire{width:100%;max-width:108px;height:auto;aspect-ratio:1/1}
.bb-daire svg{width:44%;height:auto}
.bb-etiket{white-space:normal;text-wrap:balance;font-size:14px;line-height:1.3;overflow-wrap:break-word}
@media (max-width:900px){
  .bb-ikonlar{display:grid;grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 8px;margin:0;padding:8px 0 14px;overflow:visible}
  .bb-ikon{width:auto}
  .bb-daire{width:100%;max-width:92px;height:auto;aspect-ratio:1/1}
}
@media (max-width:600px){
  .bb-ikonlar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bb-etiket{font-size:13px}
}

/* ---- ÇOK SATANLAR rafı: oklar HER ZAMAN görünür ve sabit (sahip, 11 Ekim 2026). Kaydıracak bir şey yoksa soluk durur. ---- */
#bestRail.rail-static .rail-btn{display:flex}
#bestRail .rail-btn:disabled{opacity:.38;pointer-events:none}
#bestRail .rail-btn{box-shadow:0 6px 18px rgba(27,26,24,.12)}
@media (max-width:760px){#bestRail .rail-prev{left:-6px}#bestRail .rail-next{right:-6px}}

/* ---- KART PLAKASI BEYAZ (11 Ekim 2026, sahip onayı): şeffaf ve beyaz fonlu kapakların hepsi aynı beyaz plakada durur; görsel dosyalarına dokunulmaz.
   Önceki "beyaz kapak gri plakaya karışsın" (multiply) kuralı kaldırıldı. ---- */
.pcard .plate,.mcard .plate,.rv-prod .plate{background:#fff}

/* BAKIMINA UYGUN ÜRÜNÜ BUL: başlık ile ikon sırası arasında nefes payı (11 Ekim 2026, sahip: "başlıkla çok yapışık") */
#bakimUygun .bb-ikonlar{margin-top:clamp(20px,3vw,32px)}


/* 14 Ekim 2026: 375 px telefonda sağdaki üç simge (arama, hesap, sepet) logo sütununa taşıyor ve
   arama simgesi logonun üstüne biniyordu. Dar ekranda simge düğmeleri 44 → 36 px. */
@media (max-width:440px){
  .nav-right{gap:0}
  .nav-right .iconbtn{width:36px;min-width:36px}
}

/* SEPET: ücretsiz kargo çubuğu ve devam bağlantısı (14 Ekim 2026) */
.cart-ship{margin:6px 0 4px}
.cart-ship-t{margin:0 0 8px;font-family:var(--ui);font-size:var(--t-small-size);font-weight:var(--t-small-weight);letter-spacing:var(--t-small-ls);color:var(--ink-soft)}
.cart-ship-bar{display:block;height:4px;border-radius:99px;background:var(--line);overflow:hidden}
.cart-ship-bar i{display:block;height:100%;border-radius:99px;background:var(--ink);transition:width .4s var(--ease)}
.cart-summary .cart-continue{display:block;margin-top:14px;text-align:center;font-family:var(--ui);font-size:var(--t-small-size);color:var(--ink-soft);text-underline-offset:3px}
.cart-summary .cart-continue:hover{color:var(--ink)}
@media (max-width:340px){ .nav-right > .nav-account{display:none} }