/* ==========================================================================
   DUSTY OWL ART — Public Site Theme
   STEP 4 / 5
   A dark, antique-gallery aesthetic: bone-on-ink, gold leaf accents,
   framed artworks, generous negative space, fine-grain texture.
   Bespoke CSS (no framework) for full control over a museum-grade feel.
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------- */
:root{
  /* #5 — daha sıcak, gold-öncelikli varsayılan zemin (owl) */
  --ink:#0f0b06; --ink-2:#17110a; --ink-3:#201810; --ink-4:#281e13;
  --bone:#efe8d7; --bone-dim:#c6bda9; --muted:#a89e8a;
  --gold:#cda52b; --gold-2:#e7cd6a; --oxblood:#7c3b30;
  --line:rgba(236,230,218,.15); --line-2:rgba(236,230,218,.09);
  --gold-line:rgba(201,162,39,.38);
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1240px; --gap:clamp(20px,4vw,52px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --btn-radius:2px;   /* tek kaynak — antik/keskin kenar (tüm butonlar) */
  /* v2 — eklenen token'lar */
  --ink-overlay:rgba(13,12,10,.88);   /* hero/slider/modal overlay */
  --card-hover:rgba(201,162,39,.05);  /* ürün kartı hover arka planı */
  --accent-warm:#c17a3a;              /* ikincil vurgu — antik bakır */
  --text-link:var(--gold-2);          /* metin linkleri */
  --success:#6f9a5f; --error:#c4563d; /* public bildirimler */
  --header-bg:rgba(13,12,10,.72);        /* sticky header — normal */
  --header-bg-strong:rgba(13,12,10,.92); /* sticky header — kaydirilmis (.shrink) */
  --toast-bg:rgba(20,18,15,.92);         /* canli aktivite kutusu zemini */
  --toast-fg:#efe8d7;                    /* ve yazisi — tema ile birlikte doner */
  --ls-wide:2.5px;  --ls-normal:.4px; /* tutarlı letter-spacing */
}

/* ---- Theme palettes (admin → Ayarlar → Tema; <html data-theme="…">) ------
   "owl" is the default :root above. Each theme only re-maps colour tokens so
   the whole site re-skins from one attribute. ------------------------------- */
html[data-theme="moon"]{          /* Ay Işığı — cool moonlit silver */
  --ink:#0a0c10; --ink-2:#10141b; --ink-3:#161b24; --ink-4:#1d2430;
  --bone:#e6ebf2; --bone-dim:#aab4c2; --muted:#7e8696;
  --gold:#9fb3c9; --gold-2:#cfdcec; --oxblood:#3f5a74;
  --line:rgba(230,235,242,.12); --line-2:rgba(230,235,242,.07);
  --gold-line:rgba(159,179,201,.42);
}
html[data-theme="moth"]{          /* Güve — warm sepia / candlelight */
  --ink:#0f0b08; --ink-2:#171009; --ink-3:#1f160d; --ink-4:#281c11;
  --bone:#f0e6d6; --bone-dim:#c9b79c; --muted:#94816a;
  --gold:#c79a5b; --gold-2:#e6c78a; --oxblood:#7c4a2e;
  --line:rgba(240,230,214,.13); --line-2:rgba(240,230,214,.07);
  --gold-line:rgba(199,154,91,.42);
}
html[data-theme="botanical"]{     /* Botanik — moody sage green */
  --ink:#0a0d0a; --ink-2:#101410; --ink-3:#161c15; --ink-4:#1d251b;
  --bone:#e9eede; --bone-dim:#b3bfa6; --muted:#84927a;
  --gold:#9cae7e; --gold-2:#c8d8a8; --oxblood:#5b6b3a;
  --line:rgba(233,238,222,.13); --line-2:rgba(233,238,222,.07);
  --gold-line:rgba(156,174,126,.42);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--bone);font-family:var(--ui);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:var(--font-smooth,antialiased);overflow-x:hidden;
}
/* Fine film-grain texture over everything (the "dusty" in Dusty Owl) */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Sinematik kenar vinyeti — tüm sayfada ince derinlik çerçevesi (premium) */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(125% 100% at 50% 45%, transparent 58%, rgba(0,0,0,.30) 100%);
}
/* Altın ince kaydırma çubuğu */
*{scrollbar-width:thin;scrollbar-color:#6b5a2e transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#c9a227,#6b5a2e);border-radius:8px;border:2px solid var(--ink)}
::-webkit-scrollbar-thumb:hover{background:var(--gold,#c9a227)}
/* Sinematik ilk-yükleme açılışı (premium, hareket-azaltmaya saygılı) */
@media (prefers-reduced-motion:no-preference){
  body{animation:doaReveal .7s ease both}
}
@keyframes doaReveal{from{opacity:0}to{opacity:1}}
/* Altın birincil buton — hover'da yumuşak altın parıltı */
.btn--gold{transition:box-shadow .18s ease, transform .18s ease}
.btn--gold:hover{box-shadow:0 14px 34px -12px rgba(201,162,39,.55)}
/* #17 erişilebilir + premium odak halkası (klavye/kontrast) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold,#c9a227);outline-offset:2px;border-radius:3px}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;margin:0;letter-spacing:.2px;line-height:1.1}
::selection{background:rgba(201,162,39,.25)}

.container{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,40px);position:relative;z-index:2}
.section{padding:clamp(64px,9vw,120px) 0}
.kicker{font-family:var(--ui);font-size:12px;letter-spacing:3.5px;text-transform:uppercase;
  color:var(--gold);font-weight:600;display:inline-block;margin-bottom:18px}
.kicker::before{content:"";display:inline-block;width:26px;height:1px;background:var(--gold);
  vertical-align:middle;margin-right:12px;margin-bottom:4px}
.section-head{max-width:680px;margin-bottom:clamp(36px,5vw,60px)}
.section-head h2{font-size:clamp(30px,4.6vw,52px);font-weight:400}
.section-head p{color:var(--bone-dim);margin-top:16px;font-size:17px}
.section--center .section-head{margin-left:auto;margin-right:auto;text-align:center}

/* ---- Buttons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--ui);font-weight:600;
  font-size:14px;letter-spacing:.4px;padding:15px 30px;border-radius:var(--btn-radius);cursor:pointer;
  border:1px solid transparent;transition:.3s var(--ease);position:relative}
.btn--gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#1a1408;
  box-shadow:0 12px 30px -12px rgba(201,162,39,.6)}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(201,162,39,.7)}
/* SECONDARY — gold outline (ikincil CTA: Hemen Al, Sepete Ekle, Hızlı Bak) */
.btn--secondary{border-color:var(--gold-line);color:var(--gold-2);background:transparent}
.btn--secondary:hover{border-color:var(--gold);background:rgba(201,162,39,.06)}
.btn--outline{border-color:var(--line);color:var(--bone);background:transparent}
.btn--outline:hover{border-color:var(--gold);color:var(--gold-2)}
.btn--ghost{padding:13px 0;color:var(--bone-dim)}
.btn--ghost:hover{color:var(--gold-2)}
/* FAVORITE — tutarlı kare ikon buton (marka: keskin kenar) */
.btn--fav{color:var(--bone-dim);border-color:var(--line)}
.btn--fav.is-fav{color:#d9607a;border-color:#d9607a;background:rgba(217,96,122,.08)}

/* ---- Top bar ------------------------------------------------------------- */
.topbar{background:var(--ink-2);border-bottom:1px solid var(--line-2);font-size:12px;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);position:relative;z-index:30}
.topbar .container{display:flex;justify-content:space-between;align-items:center;height:40px}
.topbar .deal{color:var(--bone-dim)}
.topbar .deal b{color:var(--gold)}
.topbar .mini-social{display:flex;gap:16px;align-items:center}
.topbar .mini-social a{color:var(--muted);transition:.2s}
.topbar .mini-social a:hover{color:var(--gold)}
.lang-switch{display:flex;gap:8px;padding-right:12px;margin-right:4px;border-right:1px solid var(--line)}
.lang-switch a{color:var(--muted);font-weight:600}
.lang-switch a.is-active{color:var(--gold)}

/* ---- Header / nav -------------------------------------------------------- */
/* v26: header zemini artik TOKEN. Onceden hem normal hem `.shrink` durumu
   sabit koyu rgba kullaniyordu; aktif "gallery" temasi yalnizca NORMAL durumu
   eziyordu. Sayfa kaydirilinca `.shrink` devreye girip header YENIDEN
   SIYAH oluyor, yazi rengi acik temanin koyu tonunda kaliyordu -> menu
   okunmaz hale geliyordu (raporun 5. maddesindeki "menuler gozukmuyor").
   Tema dosyalarinin yalnizca token yeniden esleyerek calismasi zaten bu
   projenin ilkesi; sabit renk o sozlesmeyi kiriyordu. */
.site-header{position:sticky;top:0;z-index:40;background:var(--header-bg,rgba(13,12,10,.72));
  backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--line-2);
  transition:.35s var(--ease)}
.site-header.shrink{background:var(--header-bg-strong,rgba(13,12,10,.92))}
/* v22 SARSINTI DÜZELTMESİ: `height` ANİMASYONLANMIYOR artık.
   height bir LAYOUT özelliğidir — 350 ms boyunca her karede reflow tetikler ve
   sticky header akışta yer kapladığı için ALTINDAKİ TÜM SAYFA 14px yukarı kayar.
   Kaydırma sırasında hem janky hem de rahatsız edici bir zıplama üretiyordu.
   Çözüm: yükseklik ANINDA değişir (tek reflow), görsel yumuşaklık ise yalnızca
   compose edilen özelliklerden (background/box-shadow) gelir. */
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.site-header.shrink .nav{height:64px}
@media (prefers-reduced-motion: no-preference){
  /* Yalnızca boyayı etkileyen özellikler geçişli — layout değil. */
  .site-header{transition:background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease)}
}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:23px;
  letter-spacing:.5px}
.brand .glyph{color:var(--gold);font-size:24px}
.brand b{font-weight:600}
.brand .sub{color:var(--gold-2);font-weight:600}
.nav-links{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px);list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.nav-links a{font-size:clamp(12.5px,1vw,14px);letter-spacing:.3px;color:var(--bone-dim);font-weight:500;
  position:relative;padding:6px 0;transition:.2s;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--gold);transition:.3s var(--ease)}
.nav-links a:hover{color:var(--bone)}
.nav-links a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:clamp(11px,1.4vw,20px)}
/* v26 — DOKUNMA/TIKLAMA HEDEFI (rapor 7. maddesi).
   Bagalanti kutusu tam olarak SVG kadardi: 19x19 px. Boyle bir hedefe fare ile
   bile isabet ettirmek zor, dokunmatikte neredeyse imkansiz; kullanici
   "Instagram'a tiklanmiyor, ancak sag tik > yeni sekmede ac calisiyor" diye
   tarif etti (sag tik menusu SVG boyamasini yakaliyor, tiklama ise 1-2 px
   kaciyordu). Hedef 34x34'e cikti, gorsel araliki korumak icin gap kisildi.
   WCAG 2.2 asgari hedef boyutu 24x24 - bu simdi saglaniyor. */
.social{display:flex;gap:2px}
.social a{color:var(--bone-dim);transition:.25s var(--ease);
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%}
.social a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.social a:hover{color:var(--gold);transform:translateY(-2px)}
.social svg{width:19px;height:19px;display:block}
/* Header inline stil → sınıf (badge/hesap/logo) */
.topbar > .container.topbar-end{justify-content:flex-end}
.brand-logo{max-height:38px;width:auto}
.foot-logo{max-height:52px;width:auto}
/* Sepet/favori ikonlari da ayni sebeple buyutuldu (20px -> 34px hedef). */
.nav-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;color:inherit;margin:0;border-radius:50%}
.nav-icon:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.nav-badge{position:absolute;top:0;right:0;background:var(--gold,#caa45a);color:#1b1712;
  border-radius:9px;font-size:11px;line-height:1;padding:2px 5px;font-weight:600}
.fav-count{display:none}                       /* JS n>0 iken inline-flex yapar */
.nav-account{color:inherit;margin:0 4px;font-size:14px}
@media (max-width:640px){ .nav-account{display:none} }   /* mobilde hesap/giriş linki çekmecede */
/* Mobile drawer search + lang */
.m-search{display:flex;gap:8px;padding:12px 4px}
.m-search input{flex:1;background:var(--ink-2);border:1px solid var(--line);border-radius:2px;
  color:var(--bone);padding:10px 12px;font-family:var(--ui)}
.m-lang{display:flex;gap:14px;padding:14px 4px}
.m-lang a{border:1px solid var(--line);border-radius:2px;padding:6px 14px}
/* Public flash mesajları */
.flash-wrap{margin:14px auto 0}
.flash-public{padding:11px 14px;border-radius:6px;margin-bottom:8px;font-size:14px}
.flash-public--success{border:1px solid #3a5a3a;background:rgba(50,90,50,.16);color:#bfe2bf}
.flash-public--error{border:1px solid #7a2f2f;background:rgba(120,40,40,.18);color:#e9b3b3}
.hamburger{display:none;width:42px;height:42px;border:1px solid var(--line);background:transparent;
  border-radius:2px;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.hamburger span{width:18px;height:1.5px;background:var(--bone);transition:.3s}

/* ---- Hero ---------------------------------------------------------------- */
.hero{position:relative;min-height:90vh;display:flex;align-items:center;overflow:hidden;
  border-bottom:1px solid var(--line-2)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(900px 520px at 78% -8%,rgba(201,162,39,.16),transparent 60%),
    radial-gradient(700px 600px at 12% 110%,rgba(124,59,48,.16),transparent 60%),
    var(--ink)}
.hero .container{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--gap);align-items:center}
.hero-copy{padding:60px 0}
.hero h1{font-size:clamp(46px,8vw,104px);font-weight:400;line-height:.98;letter-spacing:-.5px}
.hero h1 em{font-style:italic;color:var(--gold-2)}
.hero .lede{color:var(--bone-dim);font-size:clamp(16px,2vw,19px);max-width:46ch;margin:26px 0 36px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero-figure{position:relative;aspect-ratio:4/5;align-self:center}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;
  color:var(--muted);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;text-align:center}
.scroll-cue .line{width:1px;height:42px;background:linear-gradient(var(--gold),transparent);margin:10px auto 0}

/* ---- Framed artwork (the gallery unit) ----------------------------------- */
.frame{position:relative;background:linear-gradient(145deg,#1d1813,#14110d);
  padding:14px;border:1px solid var(--line);border-radius:3px;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.85);transition:.45s var(--ease)}
.frame::after{content:"";position:absolute;inset:7px;border:1px solid var(--gold-line);
  border-radius:2px;pointer-events:none;z-index:3}
.frame .mat{position:relative;overflow:hidden;border-radius:1px;background:#0c0a08}
.frame .mat img{width:100%;height:auto;object-fit:cover;transition:transform .9s var(--ease);display:block;
  pointer-events:none;-webkit-user-drag:none;user-select:none}

/* ---- Gallery grid -------------------------------------------------------- */
/*
 * GÖRSEL MİMARİSİ (v19 — yeniden yazıldı)
 *
 * ÖNCEKİ SORUN: `.mat` konteynerinin yüksekliği tanımsızdı (`aspect-ratio:auto`),
 * dolayısıyla kutu görselin doğal oranını alıyordu ve `object-fit:cover` hiçbir iş
 * yapmıyordu. Sonuç: (a) kare/dikey/yatay eserler yan yana gelince kartlar farklı
 * yüksekliklerde → tırtıklı grid (canlıda doğrulandı: wildlife 134px, arama 241px),
 * (b) görsel yüklenene kadar kutu yüksekliği 0 → altındaki her şey aşağı kayıyordu.
 *
 * ÇÖZÜM: kart konteyneri SABİT orana sahip, görsel bu oranı `cover` ile doldurur.
 * Grid her zaman hizalı; yer önceden ayrıldığı için kayma olmaz.
 * Oran tek değişkenden yönetilir — katalog dikey baskıya kayarsa `4 / 5` yeter.
 * (Ürün detay sayfasında kırpma YOK — bkz. `.p-main`.)
 */
:root{ --card-ratio: 1 / 1; }        /* katalog ağırlıklı kare mockup → 1/1 */

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(16px,2.2vw,26px)}
.art{display:block;position:relative}
.art .frame .mat{aspect-ratio:var(--card-ratio)}
.art .frame .mat img{width:100%;height:100%;object-fit:cover;object-position:center}
/* img_tag() görselin GERÇEK oranını satır içi style ile basar; kart ızgarasında
   onu geçersiz kılıyoruz (grid hizası, kartta kırpmamaktan daha önemli). */
.art .frame .mat img[style*="aspect-ratio"]{aspect-ratio:var(--card-ratio) !important}

/* Görselsiz ürün yer tutucusu — aynı oranı korur, boşluk zıplamaz */
.ph-owl{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:44px;color:var(--gold);background:radial-gradient(120% 120% at 50% 0%,#211b14,#0c0a08)}

.art:hover .frame{transform:translateY(-8px);box-shadow:0 44px 90px -38px rgba(0,0,0,.9)}
.art:hover .frame .mat img{transform:scale(1.05)}
.art-meta{padding:20px 4px 4px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.art-meta .t{font-family:var(--display);font-size:20px;color:var(--bone)}
.art-meta .c{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);
  white-space:nowrap}
.art-tag{position:absolute;top:24px;left:24px;z-index:4;background:rgba(13,12,10,.78);
  backdrop-filter:blur(6px);color:var(--gold-2);font-size:10px;letter-spacing:1.6px;
  text-transform:uppercase;padding:6px 11px;border:1px solid var(--gold-line);border-radius:2px}
/* v27 — KRITIK: pointer-events:none eklendi (rapor 3. maddesi).
   Bu katman urun galerisi figure'unde de basiliyor (p-main), opacity:0 ama
   TIKLAMALARI YUTUYORDU: z-index:4, videonun z-index:3'unun USTUNDE.
   Video kontrollerinin (durdur/devam/geri sar) calismamasinin sebebi buydu —
   kalkan degil, bu gorunmez dekor katmaniydi. Katman salt dekoratif ("View"
   yazisi bir baglanti degil, karttaki tiklama zaten <a>'ya gidiyor), yani
   tiklama hedefi olmasi icin hicbir sebep yok. */
.art-hover{position:absolute;inset:14px;z-index:4;display:flex;align-items:flex-end;
  justify-content:center;padding:22px;opacity:0;transition:.4s var(--ease);
  pointer-events:none;
  background:linear-gradient(transparent 55%,rgba(8,7,5,.82))}
.art:hover .art-hover{opacity:1}
.art-hover .view{font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--bone);
  border-bottom:1px solid var(--gold);padding-bottom:5px}

/* placeholder artwork (shown before real products exist) */
.ph .mat{display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 0%,#211b14,#0c0a08)}
.ph svg{width:48%;height:48%;opacity:.6;color:var(--gold)}
.ph .soon{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:10px;
  letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);z-index:4}

/* ---- Categories ---------------------------------------------------------- */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.cat{position:relative;display:flex;align-items:center;justify-content:space-between;
  padding:12px 13px;border:1px solid var(--line);border-radius:3px;background:var(--ink-2);
  transition:.35s var(--ease);overflow:hidden}
.cat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);
  transform:scaleY(0);transform-origin:bottom;transition:.35s var(--ease)}
.cat:hover{background:var(--ink-3);border-color:var(--gold-line);transform:translateY(-3px)}
.cat:hover::before{transform:scaleY(1)}
.cat .arrow{color:var(--gold);opacity:0;transform:translateX(-6px);transition:.35s var(--ease)}
.cat:hover .arrow{opacity:1;transform:translateX(0)}

/* ---- About / statement --------------------------------------------------- */
.statement{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center}
.statement .big{font-family:var(--display);font-size:clamp(26px,3.6vw,40px);font-weight:400;
  line-height:1.25}
.statement .big em{font-style:italic;color:var(--gold-2)}
.statement p{color:var(--bone-dim);margin:22px 0 0}
.statement .figure{aspect-ratio:1;position:relative}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);
  max-width:var(--maxw);margin:0 auto}

/* ---- Etsy CTA band ------------------------------------------------------- */
.cta-band{position:relative;text-align:center;border:1px solid var(--gold-line);border-radius:4px;
  padding:clamp(48px,7vw,86px) 24px;background:
    radial-gradient(700px 300px at 50% 0%,rgba(201,162,39,.12),transparent 70%),var(--ink-2)}
.cta-band h2{font-size:clamp(28px,4.4vw,48px);font-weight:400}
.cta-band p{color:var(--bone-dim);max-width:54ch;margin:18px auto 32px}

/* ---- Footer -------------------------------------------------------------- */
.site-footer{background:var(--ink-2);border-top:1px solid var(--line-2);
  padding:clamp(56px,7vw,88px) 0 34px;position:relative;z-index:2}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:var(--gap)}
.foot-brand .brand{margin-bottom:18px}
.foot-brand p{color:var(--muted);font-size:14.5px;max-width:34ch}
.foot-col h4{font-family:var(--ui);font-size:12px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--gold);margin-bottom:20px;font-weight:600}
.foot-col a,.foot-col .li{display:block;color:var(--bone-dim);font-size:14.5px;padding:7px 0;transition:.2s}
.foot-col a:hover{color:var(--gold-2)}
.foot-social{display:flex;gap:14px;margin-top:18px}
.foot-social a{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--bone-dim);transition:.3s var(--ease)}
.foot-social a:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px)}
.foot-social svg{width:18px;height:18px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:clamp(40px,6vw,64px);padding-top:26px;border-top:1px solid var(--line-2);
  color:var(--muted);font-size:13px}
.foot-bottom a{color:var(--muted)}
.foot-bottom a:hover{color:var(--gold)}

/* ---- Reveal-on-scroll ---------------------------------------------------- */
.reveal{opacity:0;transform:translateY(26px);transition:.8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:1000px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .hero .container{grid-template-columns:1fr}
  .hero-figure{display:none}
  .hero{min-height:auto;padding:40px 0}
  .statement{grid-template-columns:1fr}
  .statement .figure{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .gallery{grid-template-columns:1fr 1fr;gap:16px}
  .art-meta .t{font-size:16px}
  .nav-links,.nav-right .social{display:none}
  .hamburger{display:flex}
  .foot-grid{grid-template-columns:1fr}
  .topbar .deal span{display:none}
}

/* ---- Mobile slide-down nav ----------------------------------------------- */
.mobile-nav{position:fixed;inset:0 0 0 auto;width:min(82vw,340px);z-index:60;
  background:var(--ink-2);border-left:1px solid var(--line);padding:28px 26px;
  transform:translateX(100%);transition:.4s var(--ease);display:flex;flex-direction:column;gap:6px}
.mobile-nav.open{transform:none}
.mobile-nav a{padding:14px 4px;border-bottom:1px solid var(--line-2);color:var(--bone-dim);
  font-size:16px;letter-spacing:.5px}
.mobile-nav a:hover{color:var(--gold-2)}
.mobile-nav .m-close{align-self:flex-end;background:none;border:none;color:var(--bone);
  font-size:26px;cursor:pointer;margin-bottom:10px}
.mobile-nav .m-social{display:flex;gap:16px;margin-top:auto;padding-top:20px}
.mobile-nav .m-social a{border:1px solid var(--line);border-radius:50%;width:42px;height:42px;
  display:flex;align-items:center;justify-content:center}
.scrim{position:fixed;inset:0;background:rgba(5,4,3,.6);z-index:55;opacity:0;visibility:hidden;
  transition:.4s}
.scrim.open{opacity:1;visibility:visible}

/* ==========================================================================
   PRODUCT DETAIL  (STEP 5)
   ========================================================================== */
.crumb{padding-top:30px;color:var(--muted);font-size:13px;letter-spacing:.4px}
.crumb a{color:var(--muted)} .crumb a:hover{color:var(--gold)}
.crumb .sep{margin:0 9px;opacity:.5}
.product{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,68px);
  align-items:start;padding:30px 0 clamp(60px,8vw,100px)}
.p-gallery{position:sticky;top:104px}
/*
 * ÜRÜN ANA GÖRSELİ — burada eser ASLA kırpılmaz.
 *
 * ÖNCEKİ SORUN: `height:100%` + ebeveynde `height:auto` → yüzde yükseklik
 * çözümsüz kalıyordu; ayrıca `object-fit:cover` sanat eserinin kenarlarını
 * kesiyordu. Bir sanat mağazasında ürün detayında kırpma kabul edilemez.
 *
 * ÇÖZÜM: konteyner görselin gerçek oranını alır (img_tag() satır içi
 * aspect-ratio basar), görsel `contain` ile tamamen görünür kalır.
 * Farklı oranlı görseller arasında geçişte kutunun zıplamaması için
 * min-height ile taban ayrılır.
 */
.p-main .mat{height:auto;min-height:0;display:block}
.p-main .mat img{width:100%;height:auto;max-height:78vh;object-fit:contain;display:block;background:#0c0a08}
.p-main .mat .p-video{width:100%;height:auto;aspect-ratio:16/10;object-fit:contain}
.p-main.ph .mat{aspect-ratio:4/5}   /* görselsiz yer tutucu (baykuş) sabit oran korur */
.p-main.ph .mat{display:flex;align-items:center;justify-content:center;color:var(--gold);
  background:radial-gradient(120% 120% at 50% 0%,#211b14,#0c0a08)}
.p-main.ph svg{width:46%;height:46%;opacity:.6}
.p-thumbs{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
/* v22: .p-thumb artık <div> değil <button> (klavye ile görsel değiştirilebilsin).
   Tarayıcının düğme varsayılanları sıfırlanıyor ve görünür bir odak halkası
   ekleniyor — eskiden bu öğeler odaklanamıyordu bile. */
.p-thumb{width:74px;cursor:pointer;padding:6px;background:var(--ink-2);border:1px solid var(--line);
  border-radius:2px;transition:.25s;
  font:inherit;color:inherit;-webkit-appearance:none;appearance:none;display:block;line-height:0}
.p-thumb:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* Thumbnail ana görselle AYNI kadrajı göstermeli. Önceden 4/5'e zorlanıp
   `cover` ile kırpılıyordu → küçük görsel ile büyük görsel farklı çıkıyordu. */
.p-thumb img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;pointer-events:none;display:block}
.p-thumb.active,.p-thumb:hover{border-color:var(--gold)}
.p-cat{display:inline-block;font-size:12px;letter-spacing:3px;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:14px}
.p-title{font-size:clamp(30px,4.4vw,50px);font-weight:400;line-height:1.06}
.p-price{font-family:var(--display);font-size:27px;color:var(--bone);margin:18px 0 0}
.p-price .muted{color:var(--muted);font-size:14px;font-family:var(--ui);margin-left:8px}
.p-desc{color:var(--bone-dim);margin:22px 0;font-size:16px;line-height:1.75}
.p-block-label{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);margin:26px 0 12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--gold-line);color:var(--gold-2);border-radius:2px;padding:7px 14px;
  font-size:13px;letter-spacing:.4px}
.btn--disabled{opacity:.55;cursor:not-allowed;border:1px dashed var(--line);background:transparent;
  color:var(--muted);box-shadow:none}
.p-buy{display:flex;flex-direction:column;gap:10px;width:100%}
.p-buy input[type=email]{background:var(--ink-2);border:1px solid var(--line);border-radius:2px;
  color:var(--bone);padding:14px 16px;font-size:14px;font-family:var(--ui);box-sizing:border-box}
.p-buy input[type=email]:focus{outline:none;border-color:var(--gold)}
.p-buy .btn{width:100%;justify-content:center}
.p-trust{list-style:none;margin:24px 0 0;padding:24px 0 0;border-top:1px solid var(--line);display:grid;gap:13px}
.p-trust li{display:flex;gap:12px;align-items:flex-start;color:var(--bone-dim);font-size:14.5px}
.p-trust .tick{color:var(--gold);flex:0 0 auto;font-size:15px}
.p-note{margin-top:20px;font-size:13px;color:var(--muted)}
.p-note a{color:var(--gold-2)}
.p-share{display:flex;align-items:center;gap:12px;margin:24px 0 0;padding-top:20px;border-top:1px solid var(--line);flex-wrap:wrap}
.p-share-label{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);margin-right:2px}
.p-share a,.p-share button{flex:0 0 40px;width:40px;height:40px;padding:0;border:1px solid var(--line);
  border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--bone-dim);
  background:transparent;cursor:pointer;transition:.25s var(--ease);box-sizing:border-box;overflow:hidden}
.p-share a:hover,.p-share button:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.p-share svg{width:18px !important;height:18px !important;flex:0 0 auto}
.p-share .copy-link.copied{border-color:var(--gold);color:var(--gold)}

/* Universal icon-size guard — keeps inline SVG icons from ever ballooning */
.social svg,.foot-social svg,.m-social svg,.mini-social svg{flex:0 0 auto}
.mobile-nav .m-social svg{width:20px;height:20px}
.related h2{font-size:clamp(24px,3.4vw,36px);font-weight:400;margin-bottom:30px;text-align:center}

/* ---- Not found ---- */
.notfound{text-align:center;padding:clamp(80px,13vw,170px) 0}
.notfound .ico{font-size:62px;color:var(--gold);opacity:.7}
.notfound h1{font-size:clamp(32px,5vw,56px);margin:18px 0 10px;font-weight:400}
.notfound p{color:var(--bone-dim);margin-bottom:26px}

/* ==========================================================================
   FAQ — native <details> accordion  (STEP 5)
   ========================================================================== */
.faq-hero{padding:clamp(56px,9vw,110px) 0 0;text-align:center}
.faq-hero .kicker{margin-bottom:14px}
.faq-hero h1{font-size:clamp(38px,6vw,74px);font-weight:400}
.faq-hero p{color:var(--bone-dim);max-width:58ch;margin:18px auto 0;font-size:17px}
.faq-wrap{display:grid;grid-template-columns:228px 1fr;gap:clamp(28px,5vw,60px);
  padding:clamp(40px,6vw,70px) 0 clamp(60px,9vw,110px);align-items:start}
.faq-nav{position:sticky;top:104px;display:flex;flex-direction:column;gap:2px}
.faq-nav a{padding:11px 16px;border-left:1px solid var(--line);color:var(--muted);font-size:14px;
  letter-spacing:.3px;transition:.2s}
.faq-nav a:hover{color:var(--gold-2);border-color:var(--gold)}
.faq-section{margin-bottom:46px;scroll-margin-top:100px}
.faq-section>h2{font-size:clamp(22px,3vw,30px);font-weight:400;margin-bottom:10px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
details.qa{border-bottom:1px solid var(--line-2)}
details.qa summary{list-style:none;cursor:pointer;padding:20px 46px 20px 2px;position:relative;
  font-family:var(--display);font-size:19px;color:var(--bone);transition:.2s}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  color:var(--gold);font-size:26px;line-height:1;font-family:var(--ui);transition:.3s var(--ease)}
details.qa[open] summary::after{content:"\2013"}
details.qa summary:hover{color:var(--gold-2)}
details.qa .a{padding:0 46px 24px 2px;color:var(--bone-dim);font-size:15.5px;line-height:1.78}
details.qa .a a{color:var(--gold-2);text-decoration:underline;text-underline-offset:2px}
details.qa .a ul{margin:12px 0 0;padding-left:20px}
details.qa .a li{margin:6px 0}
details.qa .a strong{color:var(--bone)}
.size-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px}
.size-table th{text-align:left;color:var(--gold);font-family:var(--ui);font-weight:600;font-size:11px;
  letter-spacing:1.5px;text-transform:uppercase;padding:11px 14px;border-bottom:1px solid var(--line)}
.size-table td{padding:10px 14px;border-bottom:1px solid var(--line-2);color:var(--bone-dim)}
.size-table td:first-child{color:var(--gold-2);font-weight:600;white-space:nowrap}
@media (max-width:980px){
  .product{grid-template-columns:1fr;gap:30px}
  .p-gallery{position:static}
  .related .gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .faq-wrap{grid-template-columns:1fr}
  .faq-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:8px;margin-bottom:14px}
  .faq-nav a{border-left:none;border:1px solid var(--line);border-radius:2px}
}

/* ==========================================================================
   v4 — Newsletter · Reviews · Search · Blog
   ========================================================================== */
.newsletter{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;
  padding:0 0 clamp(36px,5vw,52px);margin-bottom:clamp(36px,5vw,52px);border-bottom:1px solid var(--line-2)}
.newsletter h3{font-family:var(--display);font-size:clamp(22px,3vw,30px);font-weight:400;margin:8px 0 6px}
.newsletter p{color:var(--muted);font-size:14.5px}
.nl-form{display:flex;gap:10px;flex-wrap:wrap}
.nl-form input[type=email]{background:var(--ink);border:1px solid var(--line);border-radius:2px;
  color:var(--bone);padding:14px 16px;font-size:14px;min-width:240px;font-family:var(--ui)}
.nl-form input[type=email]:focus{outline:none;border-color:var(--gold)}
.nl-msg{grid-column:1/-1;font-size:14px;margin-top:4px}
.nl-msg.ok{color:#bcd6a8}.nl-msg.err{color:#e7b3a4}
.hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
@media (max-width:720px){.newsletter{grid-template-columns:1fr}}

.stars{display:inline-flex;gap:2px;color:var(--gold);font-size:15px;letter-spacing:1px}
.stars .off{color:var(--line)}
.rev-summary{display:flex;align-items:center;gap:14px;margin:6px 0 22px}
.rev-summary .avg{font-family:var(--display);font-size:30px;color:var(--bone)}
.rev-summary .count{color:var(--muted);font-size:14px}
.review{padding:20px 0;border-top:1px solid var(--line-2)}
.review .head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:4px}
.review .who{font-family:var(--display);font-size:17px;color:var(--bone)}
.review .date{color:var(--muted);font-size:12.5px;white-space:nowrap}
.review .rtitle{color:var(--gold-2);font-weight:600;font-size:14px;margin:4px 0}
.review p{color:var(--bone-dim);font-size:15px;margin:0}
.rev-form{margin-top:26px;background:var(--ink-2);border:1px solid var(--line);border-radius:4px;padding:24px}
.rev-form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rev-form label{display:block;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.rev-form input,.rev-form textarea{width:100%;background:var(--ink);border:1px solid var(--line);
  border-radius:2px;color:var(--bone);padding:12px 14px;font-family:var(--ui);font-size:14px;box-sizing:border-box}
.rev-form textarea{min-height:100px;resize:vertical}
.star-pick{display:inline-flex;flex-direction:row-reverse;gap:4px}
.star-pick input{display:none}
.star-pick label{cursor:pointer;color:var(--line);font-size:26px;margin:0;line-height:1}
.star-pick input:checked ~ label,.star-pick label:hover,.star-pick label:hover ~ label{color:var(--gold)}
@media (max-width:560px){.rev-form .row{grid-template-columns:1fr}}

/* v26 — ARAMA AÇILIR KUTUSU (<details class="search-box search-pop">)
   .search-box sınıfı KORUNDU: site.js canlı öneri kutusunu
   `input.closest('.search-box')` ile konumlandırıyor. Sınıfı yeniden
   adlandırmak o özelliği sessizce bozardı. */
.search-box{display:block;position:relative;flex:0 0 auto}
.search-pop__btn{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;width:34px;height:34px;color:var(--bone-dim);border-radius:50%;
  transition:.2s var(--ease)}
.search-pop__btn::-webkit-details-marker{display:none}
.search-pop__btn::marker{content:""}
.search-pop__btn:hover{color:var(--gold);background:var(--card-hover)}
.search-pop__btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.search-pop[open] .search-pop__btn{color:var(--gold)}
/* Açık hâlde form header'ın ALTINA düşer — satırı hiç genişletmez, dolayısıyla
   menüyle çakışması fiziksel olarak imkânsızdır. */
.search-pop__form{position:absolute;top:calc(100% + 10px);right:0;z-index:70;
  display:flex;align-items:center;gap:8px;background:var(--ink-2);
  border:1px solid var(--line);border-radius:4px;padding:9px 12px;
  box-shadow:0 24px 56px -24px rgba(0,0,0,.55)}
.search-box form{display:flex;align-items:center;gap:8px}
/* v22: `outline:none` KALDIRILDI. Alanın kendi border'ı da `none` olduğu için
   klavye kullanıcısı header aramasına odaklandığında HİÇBİR odak göstergesi
   görmüyordu — sekmeyle gezerken imlecin nerede olduğu tamamen kayboluyordu.
   Odak halkası artık sarmalayıcı form'a veriliyor (input şeffaf olduğu için
   görsel olarak doğru yer orası). */
.search-box input{background:transparent;border:none;color:var(--bone);font-size:14px;width:230px;font-family:var(--ui)}
.search-box input:focus{outline:none}          /* halka form'da çizilecek */
.search-pop__form:focus-within{
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-color:var(--gold);
}
.search-box button{background:none;border:none;color:var(--gold);cursor:pointer;font-size:14px}
.search-bar{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.search-bar input,.search-bar select{background:var(--ink-2);border:1px solid var(--line);border-radius:2px;
  color:var(--bone);padding:12px 14px;font-size:14px;font-family:var(--ui)}
.search-bar input{flex:1;min-width:200px}
/* v27: menü 4 gruba indirilince satır talebi 526px'ten 335px'e düştü —
   eşikler YENİDEN ölçüldü (tarayıcıda, TR etiketleriyle):
   her şey görünürken toplam ~964px. Sosyal ikonlar artık 1000px'e kadar
   kalabiliyor (v26'da 1240 idi). */
@media (max-width:1000px){.nav-right .social{display:none}}
@media (max-width:520px){.nav-right .search-box{display:none}}   /* mobilde çekmecede arama var */
.mobile-nav form{position:relative}
.live-results{position:absolute;top:calc(100% + 8px);left:0;right:0;min-width:280px;background:var(--ink-2);
  border:1px solid var(--line);border-radius:4px;z-index:60;overflow:hidden;display:none;
  box-shadow:0 24px 56px -24px rgba(0,0,0,.75)}
.live-results.open{display:block}
.live-results a{display:flex;align-items:center;gap:12px;padding:10px 12px;color:var(--bone-dim);
  border-bottom:1px solid var(--line-2)}
.live-results a:last-child{border-bottom:none}
.live-results a:hover{background:var(--ink-3);color:var(--bone)}
.live-results img{width:42px;height:42px;object-fit:cover;border-radius:3px;flex:0 0 auto}
.live-results .lr-title{font-size:14px;line-height:1.3}
.live-results .lr-empty{padding:14px 12px;color:var(--muted);font-size:13px}

.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(24px,3vw,40px)}
.post-card{display:block;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--ink-2);transition:.35s var(--ease)}
.post-card:hover{transform:translateY(-4px);border-color:var(--gold-line)}
.post-card .cover{aspect-ratio:16/10;overflow:hidden;background:var(--ink-3);display:flex;align-items:center;justify-content:center;color:var(--gold)}
.post-card .cover img{width:100%;height:100%;object-fit:cover}
.post-card .body{padding:22px 22px 26px}
.post-card .date{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.post-card h3{font-family:var(--display);font-size:22px;font-weight:400;margin:10px 0}
.post-card p{color:var(--bone-dim);font-size:14.5px;margin:0}
.article{max-width:760px;margin:0 auto}
.article h1{font-size:clamp(32px,5vw,52px);font-weight:400;line-height:1.08;margin-bottom:14px}
.article .meta{color:var(--muted);font-size:13px;margin-bottom:30px}
.article .cover{border-radius:4px;overflow:hidden;margin-bottom:32px}
.article-body{color:var(--bone-dim);font-size:17px;line-height:1.85}
.article-body p{margin:0 0 22px}
.article-body h2{font-family:var(--display);color:var(--bone);font-size:28px;margin:36px 0 14px;font-weight:500}
.article-body a{color:var(--gold-2);text-decoration:underline}
.article-body img{max-width:100%;border-radius:4px;margin:10px 0}

/* ==========================================================================
   v5 — Homepage slider
   ========================================================================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.slider{position:relative;height:clamp(440px,72vh,720px);overflow:hidden;border-bottom:1px solid var(--line-2);background:var(--ink)}
.slider .slides{height:100%}
/* Tek mekanizma: slides track'i translateX ile kayar (fade kaldırıldı — çakışma yoktu). */
.slide{display:flex;align-items:center;position:relative;z-index:1}
.slide-bg{position:absolute;inset:0;z-index:0;display:block}
.slide-bg img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.slide::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(8,7,5,.88),rgba(8,7,5,.5) 60%,rgba(8,7,5,.28))}
.slide.no-img{background:
  radial-gradient(900px 520px at 78% -8%,rgba(201,162,39,.16),transparent 60%),
  radial-gradient(700px 600px at 12% 110%,rgba(124,59,48,.16),transparent 60%),var(--ink)}
.slide-inner{position:relative;z-index:2;max-width:680px}
.slide-title{font-family:var(--display);font-size:clamp(36px,6vw,76px);font-weight:400;line-height:1.02;color:var(--bone)}
.slide-sub{color:var(--bone-dim);font-size:clamp(16px,2vw,20px);margin:20px 0 30px;max-width:48ch}
.slider-dots{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:5}
.slider-dots .dot{width:10px;height:10px;border-radius:50%;border:1px solid var(--gold);background:transparent;cursor:pointer;padding:0;transition:.25s}
.slider-dots .dot.is-active{background:var(--gold)}
@media (max-width:640px){.slide-sub{display:none}.slider{height:62vh}}

/* --- Storefront: shop bar · card actions · favorites · quick view --- */
.shop-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 22px}
.shop-count{color:var(--muted);font-size:13px;letter-spacing:1px;text-transform:uppercase}
.shop-sort{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}
.shop-sort select{background:var(--ink-2,#1a1613);border:1px solid var(--line,#2a2420);color:var(--bone);border-radius:4px;padding:7px 10px;font-family:inherit}
.fav-btn{cursor:pointer}
.fav-btn.is-fav{color:#d9607a;border-color:#d9607a}
.fav-btn .fav-ic{font-size:15px;line-height:1}
/* --- Category card footer: buy / quick-view / favourite (brand-aligned) --- */
.card-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2)}
.card-actions form{display:inline-flex;margin:0;flex:1 1 40%}
.card-actions .btn{margin:0}
.card-actions .btn--gold{width:100%;flex:1 1 auto}
.card-actions .qv-btn{flex:1 1 auto;border:1px solid var(--line);background:transparent;
  color:var(--bone-dim);border-radius:var(--btn-radius);transition:border-color .2s var(--ease),color .2s var(--ease)}
.card-actions .qv-btn:hover{border-color:var(--gold-line);color:var(--gold-2)}
.card-actions .fav-btn{flex:0 0 42px;width:42px;height:42px;padding:0;display:inline-flex;
  align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--btn-radius);
  background:transparent;color:var(--bone-dim);transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.card-actions .fav-btn:hover{border-color:#d9607a;color:#d9607a}
.card-actions .fav-btn.is-fav{color:#d9607a;border-color:#d9607a;background:rgba(217,96,122,.10)}
.card-actions .fav-btn .fav-ic{font-size:17px}

/* ==========================================================================
   v11 — CTA buttons · title clamp · category tiles · badges/sale · mobile slider
   ========================================================================== */

/* --- #2 Product detail CTA: uniform, equal-sized buttons (gold family) --- */
.p-cta{display:flex;flex-direction:column;gap:10px;margin-top:16px;max-width:440px}
.p-cta .p-buy{display:flex;flex-direction:column;gap:10px;width:100%;align-items:stretch}
.p-cta .btn,
.p-cta .p-buy .btn{width:100%;margin:0;min-height:52px;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;font-size:14.5px;border-radius:var(--btn-radius);padding:0 20px;line-height:1.1}
.p-cta .fav-btn{width:100%;color:var(--bone-dim)}
.p-cta .fav-btn.is-fav{color:#d9607a;border-color:#d9607a}
/* Favori: yazısız, sadece kalp SVG — kompakt kare, çerçeveye sığar */
.p-cta .p-buy .fav-btn--icon{width:52px;min-width:52px;flex:0 0 52px;padding:0;justify-content:center;align-self:flex-start}
.fav-btn--icon .fav-ic{display:inline-flex;align-items:center;line-height:0}
.fav-btn--icon .fav-ic svg{display:block}
.fav-btn--icon.is-fav .fav-ic svg{fill:currentColor}
@media (min-width:560px){
  .p-cta .p-buy{flex-direction:row;flex-wrap:wrap}
  .p-cta .p-buy .btn{flex:1 1 0;min-width:150px}
  .p-cta .p-buy .fav-btn{flex:0 0 56px;min-width:56px}
}

/* --- #3 Clamp long titles in listings (full title shows on product page) --- */
.art-meta{align-items:flex-start}
.art-meta .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  line-height:1.25;max-height:2.5em;word-break:break-word}
.art-meta .c{flex:0 0 auto;white-space:nowrap}

/* --- #5 Category tiles: prominent, modern title over admin image --- */
/* Resimli kategori: TAM kart karartma overlay (yazı okunur) + hover'da resim belirginleşir */
.cat.has-img{min-height:88px;background-size:cover;background-position:center}
.cat.has-img::before{inset:0;width:auto;transform:none;z-index:1;
  background:linear-gradient(180deg,rgba(8,7,5,.30) 0%,rgba(8,7,5,.86) 100%)}
.cat.has-img:hover::before{background:linear-gradient(180deg,rgba(8,7,5,.05) 0%,rgba(8,7,5,.48) 100%)}
.cat .name{font-family:var(--display);font-size:clamp(13px,1.3vw,15.5px);font-weight:500;position:relative;z-index:2;
  letter-spacing:.2px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.7);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cat.has-img .name{color:#fff}
.cat .count{color:var(--gold-2);font-size:12px;letter-spacing:1px;text-transform:uppercase;margin-top:4px;position:relative;z-index:2}

/* --- #7 Merchandising badges (ribbon, top-right) + sale price --- */
.badge-ribbons{position:absolute;top:10px;right:10px;z-index:3;display:flex;flex-direction:column;
  gap:6px;align-items:flex-end;pointer-events:none}
.pbadge{font-size:11px;font-weight:700;letter-spacing:.3px;padding:4px 9px;border-radius:6px;
  color:#1a1408;background:var(--gold-2);box-shadow:0 6px 16px -6px rgba(0,0,0,.7);text-transform:uppercase;line-height:1}
.pbadge.sale{background:#d9607a;color:#fff}
.pbadge.hot{background:#e0863a;color:#1a1408}
.pbadge.new{background:var(--gold-2);color:#1a1408}
.pbadge.featured{background:#cdb27a;color:#1a1408}
.pbadge.views{background:#9fb3c9;color:#10141b}
.price-was{text-decoration:line-through;color:var(--muted);font-size:.82em;margin-left:5px}
.price-off{color:#e8889c;font-weight:700;font-size:.82em;margin-left:5px}
.p-price .price-was{font-size:.7em}

/* --- #9 Mobile slider: keep it a real carousel (overlay, never stacked) --- */
.slider .slides{position:relative;height:100%}
/* Slider dots: keep small visually but give a ≥44px invisible tap area */
.slider-dots .dot{position:relative}
.slider-dots .dot::after{content:"";position:absolute;inset:-17px}
@media (max-width:640px){
  .slider{height:auto;min-height:420px;aspect-ratio:4/5;max-height:78vh}
  .slide{position:absolute;inset:0}
  .slide-inner{padding:0 18px}
  .slide-title{font-size:clamp(28px,8vw,40px)}
  .slider-dots{bottom:16px;gap:18px}
}
.qv-modal{position:fixed;inset:0;z-index:200;display:none}
.qv-modal.open{display:block}
.qv-scrim{position:absolute;inset:0;background:rgba(6,5,4,.85)}
.qv-box{position:relative;z-index:2;max-width:880px;width:calc(100% - 36px);margin:6vh auto 0;background:var(--ink,#14110d);border:1px solid var(--line-2,#2a2420);border-radius:10px;max-height:88vh;overflow:auto;box-shadow:0 50px 120px -40px rgba(0,0,0,.9)}
.qv-x{position:absolute;top:10px;right:12px;z-index:3;background:none;border:none;color:var(--bone);font-size:30px;line-height:1;cursor:pointer}
.qv-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.qv-img{background:#0c0a08;display:flex;align-items:center;justify-content:center;min-height:320px}
.qv-img img{width:100%;height:100%;object-fit:contain;max-height:88vh}
.qv-info{padding:34px 30px}
.qv-info h3{font-family:var(--display);font-weight:400;font-size:28px;margin:6px 0 10px;color:var(--bone)}
.qv-price{color:var(--gold);font-size:22px;margin:0 0 14px}
.qv-short{color:var(--bone-dim);font-size:15px;line-height:1.6}
@media(max-width:760px){.qv-grid{grid-template-columns:1fr}.qv-img{min-height:220px}}

/* Kategori kutuları: temsili ürün görseli + okunur degrade */
.cat{position:relative;overflow:hidden}
.cat.has-img{background-size:cover;background-position:center;min-height:150px}
.cat.has-img::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,7,5,.28),rgba(8,7,5,.80));z-index:1}
.cat.has-img .name,.cat.has-img .arrow{position:relative;z-index:2}
.shop-sort select{-webkit-appearance:none;appearance:none}

/* ==========================================================================
   v13 — Card hover actions · ribbon badges (top-left) · smaller recent · QV
   ========================================================================== */

/* #2/#9 — Hover action overlay on product image (home + category) */
.art .frame{position:relative;overflow:hidden}
.art .frame .art-hover{display:none}                 /* eski "View" yazısını gizle */
.card-hover{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  transition:opacity .25s var(--ease)}
.card-hover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(180deg,transparent,rgba(8,7,5,.75));z-index:0}
.art .frame:hover .card-hover,.art .frame:focus-within .card-hover{opacity:1}
.card-hover .fav-btn,.card-hover .cha-ico{pointer-events:auto}
.cha-fav{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(236,230,218,.3);
  background:rgba(13,12,10,.55);color:#fff;cursor:pointer;font-size:16px;backdrop-filter:blur(2px);z-index:2}
.cha-fav.is-fav{color:#d9607a;border-color:#d9607a;background:rgba(217,96,122,.18)}
.cha-row{position:absolute;left:0;right:0;bottom:12px;z-index:2;display:flex;justify-content:center;gap:8px}
.cha-ico{width:42px;height:42px;border-radius:10px;border:1px solid rgba(236,230,218,.22);
  background:rgba(13,12,10,.62);color:var(--bone);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.18s var(--ease);backdrop-filter:blur(2px)}
.cha-ico svg{width:18px;height:18px}
.cha-ico:hover{background:var(--gold);color:#1a1408;border-color:var(--gold);transform:translateY(-2px)}
.cha-ico.done{background:#6f9a5f;color:#0d0c0a;border-color:#6f9a5f}
@media (hover:none){ .card-hover{opacity:1} }   /* dokunmatik: her zaman görünür */

/* #6 — Badges as a TOP-LEFT ribbon */
.badge-ribbons{top:0;left:0;right:auto;z-index:4;align-items:flex-start}
.badge-ribbons .pbadge{position:relative;padding:5px 12px 5px 10px;border-radius:0 2px 2px 0;
  box-shadow:2px 4px 10px -4px rgba(0,0,0,.7);clip-path:polygon(0 0,100% 0,calc(100% - 8px) 50%,100% 100%,0 100%)}

/* #18 — Recently viewed: minimal size */
.recent-strip{grid-auto-columns:minmax(86px,1fr);gap:10px}
.recent-strip img{aspect-ratio:1/1;border-radius:4px}
.recent-strip .rv-t{font-size:11px;margin-top:4px}
[data-recent-sec]{padding-top:0}
[data-recent-sec] .section-head{margin-bottom:10px}

/* #11 — Quick view polish: equal buttons, brand palette */
.qv-info .qv-buy{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.qv-info .qv-buy .btn{width:100%;margin:0;min-height:48px;justify-content:center;border-radius:var(--btn-radius)}
.qv-info .qv-buy .btn--gold{grid-column:1 / -1}
.qv-info .qv-actions{display:flex;gap:10px;margin-top:10px;align-items:stretch}
.qv-info .qv-actions .btn{min-height:46px;flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--btn-radius);margin:0}
.qv-info .qv-actions .fav-btn--icon{flex:0 0 48px;min-width:48px;padding:0}
.qv-actions .fav-btn.is-fav{color:#d9607a;border-color:#d9607a}
.qv-box{border-radius:8px}

/* #1 — Header categories dropdown */
.nav-links .has-dd{position:relative}
.dd-caret{font-size:9px;opacity:.7}
.dd-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:240px;
  background:var(--ink-2);border:1px solid var(--line-2);border-radius:8px;padding:8px;
  display:grid;grid-template-columns:1fr 1fr;gap:2px;opacity:0;visibility:hidden;transition:.2s var(--ease);
  box-shadow:0 30px 60px -24px #000;z-index:60}
.nav-links .has-dd:hover .dd-menu,.nav-links .has-dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(2px)}
/* v27: kucuk gruplar (Kesfet, Hakkimizda) icin tek kolon — 16 kategorili
   Magaza menusu 2 kolon kalir, 3-5 ogeli gruplar tek kolonda okunur. */
.dd-menu--simple{grid-template-columns:1fr;min-width:210px}
.dd-menu li{list-style:none}
.dd-menu a{display:block;padding:8px 12px;border-radius:6px;font-size:13.5px;color:var(--bone-dim);white-space:nowrap}
.dd-menu a:hover{background:var(--ink-3);color:var(--gold-2)}

/* #10 — Mobile drawer: scrollable + category sublist */
.mobile-nav{overflow-y:auto;-webkit-overflow-scrolling:touch;max-height:100vh;max-height:100dvh}
.m-cats{display:flex;flex-direction:column;border-left:2px solid var(--line-2);margin:2px 0 6px 12px}
.m-cats a{padding:9px 12px;font-size:14px;color:var(--bone-dim)}
.m-cats a:hover{color:var(--gold-2)}
/* Mobil kategori açılır (uzun listede taşmayı önler) */
.m-cats-d > summary{padding:14px 4px;border-bottom:1px solid var(--line-2);color:var(--bone-dim);
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}
.m-cats-d > summary::-webkit-details-marker{display:none}
.m-cats-d > summary::after{content:"▾";opacity:.6;transition:transform .2s;margin-left:8px}
.m-cats-d:not([open]) > summary::after{transform:rotate(-90deg)}
.m-cats-d[open] > summary{color:var(--gold-2)}

/* #8 — Sale countdown */
.sale-countdown{display:inline-flex;align-items:center;gap:8px;margin:10px 0 2px;padding:9px 14px;
  border:1px solid #d9607a;border-radius:var(--btn-radius);color:#e8889c;font-size:13.5px;font-weight:600;
  background:rgba(217,96,122,.07);letter-spacing:.3px}
.sale-countdown::before{content:"⏳";font-size:14px}
.pbadge.potw{background:#7c5cc4;color:#fff}

/* #12 — Trend products auto-scrolling rail (right → left) */
.rail-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.rail-track{display:flex;gap:18px;width:max-content;padding:0 clamp(16px,4vw,52px);animation:railscroll 50s linear infinite}
.rail-marquee:hover .rail-track{animation-play-state:paused}
@keyframes railscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.rail-marquee{overflow-x:auto}.rail-track{animation:none}}
.rail-card{flex:0 0 190px;text-decoration:none;color:inherit}
.rail-img{aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line-2);background:var(--ink-2);border-radius:2px}
.rail-img img{width:100%;height:100%;object-fit:cover;display:block;transition:.4s var(--ease)}
.rail-card:hover .rail-img img{transform:scale(1.05)}
.rail-t{display:block;margin-top:8px;font-size:13.5px;color:var(--bone-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.rail-p{display:block;color:var(--gold);font-size:13px;margin-top:2px}
@media (max-width:560px){.rail-card{flex:0 0 150px}.rail-t{max-width:150px}}
/* #12 Mobil: otomatik marquee yerine güvenilir dokunmatik kaydırma (ürünler hep görünür, snap'li) */
@media (max-width:760px){
  .rail-marquee{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;-webkit-mask-image:none;mask-image:none;scroll-snap-type:x proximity}
  .rail-marquee::-webkit-scrollbar{height:0}
  .rail-track{animation:none !important;width:max-content;padding:0 16px}
  .rail-track [aria-hidden="true"]{display:none}   /* duplike kopyayı gizle */
  .rail-card{scroll-snap-align:start}
}

/* #4 — Slider as a horizontal track (real sliding, incl. mobile) */
.slider .slides{display:flex;height:100%;transition:transform .6s var(--ease);will-change:transform}
.slider .slides .slide{position:relative;inset:auto;flex:0 0 100%;opacity:1;visibility:visible}
@media (max-width:640px){
  .slider .slides .slide{position:relative;inset:auto}
}

/* ==========================================================================
   v12 — responsive (≤480px) · nav-right tighten · cart/checkout (inline→class)
   ========================================================================== */
@media (max-width:520px){
  .nav-right .btn--gold{display:none}            /* Etsy butonu mobil çekmecede mevcut */
  .nav-right{gap:8px}
}
@media (max-width:480px){
  .gallery{grid-template-columns:1fr}
  .cats{grid-template-columns:1fr}
  .art-meta .t{font-size:15px}
}

/* Cart qty + checkout fields (önceden PHP-üretimi inline $F/$L idi) */
.cart-input{padding:9px 10px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--btn-radius);
  color:var(--bone);font-family:var(--ui);width:70px;text-align:center}
.checkout-field{width:100%;padding:13px 14px;background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--btn-radius);color:var(--bone);font-family:var(--ui);font-size:14px;box-sizing:border-box}
.checkout-field:focus{outline:none;border-color:var(--gold)}
.checkout-label{display:block;margin:0 0 6px;font-size:13px;color:var(--bone-dim)}
.checkout-grid{display:grid;grid-template-columns:1.5fr .9fr;gap:clamp(20px,4vw,40px);align-items:start}
@media (max-width:760px){ .checkout-grid{grid-template-columns:1fr} }

/* ---- Cart page (inline stil → sınıf) ---- */
.cart-page{padding-top:40px}
.cart-page > .container{max-width:880px}
.cart-page h1{font-family:var(--display,Georgia,serif);font-weight:400;font-size:clamp(28px,4vw,40px);margin:0 0 22px}
.cart-empty{color:var(--muted)}
.cart-empty-cta{margin-top:18px}
.cart-table{width:100%;border-collapse:collapse}
.cart-table thead tr{text-align:left;border-bottom:1px solid var(--line);color:var(--muted)}
.cart-table th{padding:10px 8px;font-weight:600}
.cart-table th.ta-right{text-align:right}
.cart-table tbody tr{border-bottom:1px solid var(--line)}
.cart-table td{padding:12px 8px;color:var(--bone-dim)}
.cart-cell-product{display:flex;gap:12px;align-items:center}
.cart-thumb{width:46px;height:46px;object-fit:cover;border-radius:4px}
.cart-title-link{color:var(--bone)}
.cart-table td.cart-cell-total{text-align:right;color:var(--bone)}
.cart-table td.ta-right{text-align:right}
.cart-update-row{margin-top:14px}
.cart-totals{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;margin-top:26px}
.cart-coupon{flex:1;min-width:240px}
.cart-coupon-form{display:flex;gap:8px}
.cart-coupon-form .cart-input{flex:1;width:auto;text-align:left}
.cart-coupon-applied{display:flex;gap:8px;align-items:center}
.coupon-ok{color:#9fd6a0}
.cart-summary{min-width:240px;text-align:right}
.cart-total-line{color:var(--bone-dim);margin-bottom:6px}
.cart-discount{color:#9fd6a0}
.cart-grand-total{font-size:20px;color:var(--gold);margin:8px 0 14px}
.is-hidden{display:none}

/* ---- Checkout page (inline stil → sınıf) ---- */
.checkout-page{padding-top:40px}
.checkout-page > .container{max-width:920px}
.page-title{font-family:var(--display,Georgia,serif);font-weight:400;font-size:clamp(28px,4vw,40px);margin:0 0 6px}
.checkout-alert-err{color:#e5a3a3}
.checkout-errors{color:#e5a3a3;padding-left:18px}
.checkout-card{padding:24px}
.checkout-aside{padding:22px}
.checkout-aside .checkout-section-title{margin:0 0 12px}
.checkout-member-note{color:var(--bone-dim);margin:0 0 14px}
.checkout-login-note{margin:0 0 14px;color:var(--muted)}
.checkout-login-note a{color:var(--gold)}
.req-mark{color:#e5a3a3}
.checkout-section-title{font-family:var(--display,Georgia,serif);font-weight:400;margin:18px 0 4px;font-size:20px}
.checkout-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:480px){ .checkout-2col{grid-template-columns:1fr} }
.check{display:flex;gap:9px;align-items:center;font-size:14px;color:var(--bone);cursor:pointer}
.check--top{align-items:flex-start;color:var(--bone-dim);margin:16px 0 0}
.check--top input{margin-top:3px}
.gift-box{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.gift-fields{margin-top:12px}
.gift-hint{margin:6px 0 0;color:var(--muted);font-size:12.5px}
.ta-vertical{resize:vertical}
.checkout-actions{margin-top:20px}
.checkout-line{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.checkout-line .ci-name{color:var(--bone-dim)}
.checkout-line .ci-price{color:var(--bone);white-space:nowrap}
.checkout-row{display:flex;justify-content:space-between;margin-top:12px;color:var(--bone-dim)}
.checkout-row--discount{margin-top:6px;color:#9fd6a0}
.checkout-row--total{margin-top:12px;font-size:19px;color:var(--gold)}
.checkout-back{margin-top:14px}
.checkout-back a{color:var(--muted);font-size:13px}

/* ---- Gallery Wall page (inline → sınıf) ---- */
.gw-page{padding-top:36px}
.gw-head{text-align:left;margin-bottom:20px}
.gw-title{font-family:var(--display);font-weight:400}
.gw-lead{color:var(--bone-dim)}
.gw-item-title{font-size:12.5px;color:var(--bone-dim);line-height:1.3}
.gw-empty-note{color:var(--muted)}
.gw-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.gw-msg{color:var(--bone-dim);font-size:13px;margin-top:10px}

/* ---- Modül 4: Boyut & Karşılaştırma ---- */
.cmp-page{padding-top:32px}
.cmp-controls{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end;margin:0 0 18px}
.cmp-ctl{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--bone-dim)}
.cmp-ctl input,.cmp-ctl select{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--btn-radius);color:var(--bone);padding:9px 11px;font-family:var(--ui);min-width:130px}
.cmp-wall{position:relative;width:100%;min-height:340px;
  background:linear-gradient(180deg,#2b2722,#201c18);
  border:1px solid var(--line);border-radius:10px;
  display:flex;align-items:flex-end;justify-content:center;gap:4%;
  padding:30px 22px;overflow:hidden}
.cmp-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--muted);font-size:14px}
.cmp-ref{position:relative;align-self:flex-end;background:rgba(201,162,39,.09);border:1px dashed rgba(201,162,39,.45);border-radius:4px}
.cmp-ref::after{content:attr(data-label);position:absolute;bottom:3px;left:50%;transform:translateX(-50%);font-size:10.5px;color:var(--gold-2);white-space:nowrap;opacity:.85}
.cmp-art{position:relative;align-self:flex-end;margin-bottom:9%;background:#0c0b09;border:2px solid #0c0b09;box-shadow:0 16px 34px -14px rgba(0,0,0,.85)}
.cmp-art img{width:100%;height:100%;object-fit:cover;display:block}
.cmp-art-x{position:absolute;top:-11px;right:-11px;width:24px;height:24px;border-radius:50%;border:none;background:var(--gold);color:#1b1712;cursor:pointer;font-size:12px;line-height:1;z-index:2}
.cmp-scalebar{margin-top:10px;text-align:center;color:var(--muted);font-size:12.5px}
.cmp-list{display:flex;flex-direction:column;gap:8px;margin:16px 0 6px}
.cmp-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.cmp-row > img{width:44px;height:44px;object-fit:cover;border-radius:5px;flex:0 0 auto}
.cmp-row-main{flex:1;min-width:0}
.cmp-row-title{display:block;font-size:13.5px;color:var(--bone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-row-ctl{display:flex;gap:10px;align-items:center;margin-top:4px}
.cmp-row-ctl select{background:var(--ink-2);border:1px solid var(--line);border-radius:4px;color:var(--bone);font-size:12px;padding:3px 6px}
.cmp-dim{color:var(--gold-2);font-size:12px}
.cmp-row-x{background:none;border:1px solid var(--line);border-radius:6px;color:var(--muted);width:30px;height:30px;cursor:pointer;flex:0 0 auto}
.cmp-row-x:hover{color:var(--danger,#e07a7a);border-color:var(--danger,#e07a7a)}
.cmp-tray{display:flex;gap:12px;overflow-x:auto;padding:6px 2px 12px}
.cmp-pick{flex:0 0 auto;width:96px;background:none;border:1px solid var(--line);border-radius:8px;padding:6px;cursor:pointer;color:var(--bone-dim);display:flex;flex-direction:column;gap:5px;transition:.15s;font-family:inherit}
.cmp-pick:hover{border-color:var(--gold);color:var(--bone)}
.cmp-pick img{width:100%;height:70px;object-fit:cover;border-radius:5px}
.cmp-pick span{font-size:11px;line-height:1.25;max-height:28px;overflow:hidden}

/* ---- Modül 6: Canlı aktivite bildirimi (gerçek veri) ---- */
.doa-activity{position:fixed;left:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:10px;
  max-width:min(88vw,340px);padding:11px 14px;border:1px solid var(--line);border-radius:12px;
  /* v26 KONTRAST DUZELTMESI (rapor 9. madde).
     Zemin SABIT `rgba(20,18,15,.92)` (neredeyse siyah), yazi ise `var(--bone)`
     idi. "gallery" temasi --bone'u #1A1611'e (KOYU) cevirdigi icin sonuc
     siyah uzerine siyah oldu: olculen kontrast orani ~1.0, yani kutu
     tamamen okunmazdi. Ikisi de artik ayni tema token cifti. */
  background:var(--toast-bg,rgba(20,18,15,.92));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:var(--toast-fg,#efe8d7);font-size:13px;box-shadow:0 16px 40px -18px rgba(0,0,0,.35);
  opacity:0;transform:translateY(12px);transition:.4s var(--ease)}
.doa-activity.in{opacity:1;transform:translateY(0)}
.doa-activity-dot{width:8px;height:8px;border-radius:50%;background:#7fd18a;flex:0 0 auto;animation:doaPulse 2s infinite}
@keyframes doaPulse{0%{box-shadow:0 0 0 0 rgba(127,209,138,.5)}70%{box-shadow:0 0 0 8px rgba(127,209,138,0)}100%{box-shadow:0 0 0 0 rgba(127,209,138,0)}}
.doa-activity-msg{flex:1;line-height:1.35}
.doa-activity-x{background:none;border:none;color:var(--toast-fg,#efe8d7);opacity:.65;cursor:pointer;font-size:12px;flex:0 0 auto;padding:2px}
.doa-activity-x:hover{opacity:1}
@media (max-width:520px){ .doa-activity{left:10px;right:10px;bottom:10px;max-width:none} }

/* ---- Modül 5: Renk uyumu widget ---- */
.cmatch-lead{color:var(--bone-dim);margin:-6px 0 14px}
.cmatch-swatches{display:flex;gap:4px;margin-top:6px}
.cmatch-swatches i{width:16px;height:16px;border-radius:3px;border:1px solid rgba(255,255,255,.12);display:inline-block}

/* ---- Ürün galeri video (v15) ---- */
.p-thumb--video{position:relative;background-size:cover;background-position:center;background-color:#0c0b09;overflow:hidden}
.p-thumb--video .p-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;background:rgba(0,0,0,.28);text-shadow:0 2px 8px rgba(0,0,0,.7)}
/* v26 — VIDEO GALERISI (rapor 4. maddesi).
   HATA: bu satirdaki `display:block`, HTML'in `hidden` OZNITELIGINI eziyordu.
   `hidden`in gorunmezligi tarayicinin UA stil sayfasindan gelir ve UA sayfasi
   EN DUSUK oncelige sahiptir; yazar (biz) `display:block` yazinca oznitelik
   islevsiz kalir. product.php `video.hidden = true` diyordu ama hicbir sey
   olmuyordu -> baska bir gorsele gecince video resmin ALTINDA asili kaliyordu.
   Kullanicinin tarifi birebir buydu.
   Asagidaki [hidden] sifirlamasi bu hata SINIFINI site genelinde kapatir:
   `hidden` anlamsal bir ozniteliktir, bir duzen kurali onu ezmemeli. */
[hidden]{display:none !important}
.p-video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
/* Video, .img-guard'in seffaf KALKANININ (protect.css `::after`, z-index:2)
   ustune cikmali; yoksa kalkan native kontrolleri yutuyor ve
   durdur / devam / geri sar tiklamalari videoya HIC ULASMIYOR.
   Gorsel korumasi bozulmuyor: kalkan <img> uzerinde oldugu gibi duruyor,
   yalnizca video etkilesime aciliyor (video zaten tam eser degil, tanitim). */
.p-main .mat .p-video{position:relative;z-index:3}

/* ---- Üye paneli özet şeridi ---- */
.acct-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:24px}
.acct-stat{background:var(--ink-2);border:1px solid var(--line);border-radius:10px;padding:15px 18px;display:flex;flex-direction:column;gap:4px;text-decoration:none}
.acct-stat .n{font-size:22px;color:var(--gold);font-family:var(--display,Georgia,serif);line-height:1}
.acct-stat .l{font-size:11.5px;color:var(--bone-dim);text-transform:uppercase;letter-spacing:.6px}
.acct-stat--link{transition:.15s}
.acct-stat--link:hover{border-color:var(--gold-line);color:inherit}

/* ---- Yaklaşık yerel para birimi etiketi ---- */
.price-approx{display:inline-block;color:var(--bone-dim);font-size:.8em;font-weight:500;white-space:nowrap;margin-left:4px;opacity:.9;letter-spacing:.2px}
.p-price .price-approx{font-size:.62em;vertical-align:middle}

/* ===== Faz A — kart/thumb cila + indirim vurgusu ===== */
/* KALDIRILDI (v19): burada `.art .frame .mat img` için ikinci ve ÇELİŞEN bir
   kural vardı (`height:auto`), yukarıdaki oran sistemini 722 satır sonradan
   bozuyordu. Tek tanım artık "Gallery grid" bölümünde. */
/* #7 hover'da minimal, yumuşak canlanma */
.art .frame .mat img{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.art .frame .mat img{transition:none}.art:hover .frame .mat img{transform:none}}
/* #8 indirim uyarılarını vurucu yap */
.pbadge.sale{background:linear-gradient(135deg,#e0607a,#c23f5c);color:#fff;box-shadow:0 4px 14px -5px rgba(224,96,122,.6)}
.price-off{color:#ff9db2;font-weight:800;letter-spacing:.2px}
.p-price .price-sale{font-weight:700}
@media (prefers-reduced-motion:no-preference){
  .badge-ribbons .pbadge.sale{animation:doaSalePulse 2.6s ease-in-out infinite}
}
@keyframes doaSalePulse{0%,100%{box-shadow:0 4px 14px -6px rgba(224,96,122,.55)}50%{box-shadow:0 7px 22px -4px rgba(224,96,122,.9)}}

/* #26 kullanım alanları / hediyelik şeridi */
.usage-band{padding:clamp(34px,5vw,60px) 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.usage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(16px,2.4vw,30px)}
.usage-card{text-align:center;padding:10px 14px}
.usage-ic{display:inline-flex;width:52px;height:52px;align-items:center;justify-content:center;border-radius:50%;color:var(--gold);border:1px solid var(--gold-line);background:radial-gradient(circle at 50% 30%,rgba(201,162,39,.10),transparent 70%);margin-bottom:14px}
.usage-ic svg{width:26px;height:26px}
.usage-card b{display:block;font-family:var(--display);font-weight:500;font-size:18px;color:var(--bone);margin-bottom:7px}
.usage-card p{color:var(--bone-dim);font-size:13.5px;line-height:1.6;margin:0 auto;max-width:280px}

/* #4 #12 Neden Dusty Owl / güven + 7/24 */
.why-band{padding:clamp(48px,7vw,90px) 0}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(18px,2.6vw,34px);margin-top:clamp(28px,4vw,48px)}
.why-card{text-align:center;padding:24px 18px;border:1px solid var(--line-2);border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.014),transparent);transition:border-color .2s,transform .2s}
.why-card:hover{border-color:var(--gold-line);transform:translateY(-4px)}
.why-ic{display:inline-flex;width:56px;height:56px;align-items:center;justify-content:center;border-radius:50%;color:var(--gold);border:1px solid var(--gold-line);margin-bottom:16px}
.why-ic svg{width:27px;height:27px}
.why-card b{display:block;font-family:var(--display);font-weight:500;font-size:18px;color:var(--bone);margin-bottom:8px}
.why-card p{color:var(--bone-dim);font-size:13.5px;line-height:1.65;margin:0}

/* #16 kategori "dünyaları" — her kategoriye mizaç aksanı + giriş animasyonu */
.cat-world{--_a:var(--cat-accent,var(--gold));--_a2:var(--cat-accent-2,var(--oxblood))}
.cat-hero{position:relative;overflow:hidden;border-radius:16px;
  padding:clamp(34px,6vw,72px) clamp(22px,4vw,54px);margin-bottom:clamp(26px,3.5vw,44px);
  border:1px solid color-mix(in srgb,var(--_a) 38%,transparent);
  background:linear-gradient(120deg,color-mix(in srgb,var(--_a2) 52%,var(--ink)) 0%,var(--ink) 62%);
  animation:catHeroIn .8s cubic-bezier(.2,.7,.2,1) both}
/* gerçek eser arka planı — belirgin + Ken Burns (yavaş zoom) animasyonu */
.cat-hero.has-bg{min-height:clamp(190px,27vw,320px)}
.cat-hero__art{position:absolute;inset:0;z-index:0;background-image:var(--cat-bg);background-size:cover;background-position:center;
  opacity:.4;filter:saturate(.82) contrast(1.03);transform-origin:60% 42%;animation:catKen 20s ease-in-out infinite alternate}
.cat-hero.has-bg::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(115deg,color-mix(in srgb,var(--_a2) 72%,#0b0906) 0%,color-mix(in srgb,#0b0906 80%,transparent) 52%,color-mix(in srgb,#0b0906 32%,transparent) 100%)}
.cat-hero__glow{z-index:1}
.cat-hero__inner{z-index:2}
@keyframes catKen{from{transform:scale(1)}to{transform:scale(1.13)}}
@media (prefers-reduced-motion:reduce){.cat-hero__art{animation:none}}

/* #2 — ürün sayfası: ürünün konusu arka planda (immersive, scroll uyumlu) */
#p-immersive{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#p-immersive .p-immersive__img{position:absolute;inset:-12%;background-size:cover;background-position:center;
  filter:blur(20px) saturate(.82) brightness(.46);transform:scale(1.14);will-change:transform;opacity:.6}
#p-immersive::after{content:"";position:absolute;inset:0;
  background:radial-gradient(125% 92% at 50% 8%, rgba(10,8,5,.42), rgba(8,7,5,.86) 68%),
             linear-gradient(180deg, rgba(8,7,5,.52) 0%, rgba(6,5,4,.9) 100%)}

/* #3 ana sayfa sinematik video hero */
.hero-video{position:relative;min-height:min(88vh,760px);display:flex;align-items:center;overflow:hidden;background:var(--ink)}
.hero-video__el{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-video__scrim{position:absolute;inset:0;z-index:1;background:
  radial-gradient(120% 100% at 30% 30%, transparent 0%, rgba(8,7,5,.32) 60%, rgba(8,7,5,.7) 100%),
  linear-gradient(90deg, rgba(8,7,5,.82) 0%, rgba(8,7,5,.48) 42%, transparent 76%),
  linear-gradient(0deg, rgba(6,5,4,.85) 0%, transparent 42%)}
.hero-video__inner{position:relative;z-index:2;max-width:640px}
.hero-video__title{font-size:clamp(38px,6.5vw,74px);color:var(--bone);line-height:1.02;margin:10px 0 16px;letter-spacing:.4px;text-shadow:0 3px 40px rgba(0,0,0,.6)}
.hero-video__sub{color:var(--bone-dim);font-size:clamp(15px,1.6vw,18px);line-height:1.6;max-width:500px;margin:0 0 28px;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.hero-video .scroll-cue{z-index:2}
@media (max-width:640px){.hero-video{min-height:78vh}}

/* #30/#31 iletişim / öneri formu */
.contact-wrap{max-width:720px}
.cf-type{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.cf-radio{flex:1 1 180px;display:flex;align-items:center;gap:8px;padding:12px 16px;border:1px solid var(--line);border-radius:10px;cursor:pointer;color:var(--bone-dim);transition:.15s}
.cf-radio input{accent-color:var(--gold)}
.cf-radio:hover{border-color:var(--gold-line)}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf-field{margin-bottom:14px}
.cf-field label{display:block;font-size:13px;color:var(--bone-dim);margin-bottom:6px;letter-spacing:.3px}
.cf-field input,.cf-field textarea{width:100%;background:var(--ink-2);border:1px solid var(--line);border-radius:9px;color:var(--bone);padding:12px 14px;font:inherit;font-size:15px}
.cf-field input:focus,.cf-field textarea:focus{outline:none;border-color:var(--gold-line)}
.cf-field textarea{resize:vertical;min-height:120px}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-note{color:var(--muted);font-size:12px;margin-top:12px}
.contact-thanks{text-align:center;max-width:520px;margin:20px auto 0;padding:34px 26px;border:1px solid var(--gold-line);border-radius:14px;background:linear-gradient(180deg,rgba(201,162,39,.05),transparent)}
.contact-thanks .ico{font-size:38px;margin-bottom:10px}
.contact-thanks h2{font-family:var(--display);color:var(--bone);margin-bottom:10px}
.contact-thanks p{color:var(--bone-dim);line-height:1.7}
@media (max-width:560px){.cf-grid{grid-template-columns:1fr}}

/* #10 doğrulanmış alıcı rozeti (yorumlarda) */
.rev-verified{display:inline-block;margin-left:8px;font-size:11px;font-weight:600;color:#7fae66;border:1px solid rgba(127,174,102,.42);border-radius:20px;padding:1px 9px;vertical-align:middle;letter-spacing:.2px;white-space:nowrap}

/* #22 nazik ilk-ziyaret karşılaması */
.doa-welcome{position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);z-index:60;
  display:flex;align-items:center;gap:14px;max-width:min(560px,calc(100vw - 32px));
  padding:14px 34px 14px 18px;border-radius:14px;border:1px solid var(--gold-line);
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));box-shadow:0 30px 70px -24px rgba(0,0,0,.85);
  opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s ease}
.doa-welcome.is-in{transform:translate(-50%,0);opacity:1}
.doa-welcome__ic{font-size:24px;flex:0 0 auto}
.doa-welcome__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.doa-welcome__txt b{font-family:var(--display);color:var(--bone);font-weight:500;font-size:15px}
.doa-welcome__txt span{color:var(--bone-dim);font-size:12.5px;line-height:1.45}
.doa-welcome__cta{flex:0 0 auto;background:linear-gradient(180deg,#d8b53a,#b8941f);color:#1a1305;border:0;
  font-weight:600;font-size:12.5px;padding:9px 15px;border-radius:8px;cursor:pointer;white-space:nowrap}
.doa-welcome__x{position:absolute;top:6px;right:8px;background:none;border:0;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:2px 6px}
.doa-welcome__x:hover{color:var(--bone)}
@media (max-width:520px){.doa-welcome{flex-wrap:wrap}.doa-welcome__cta{width:100%}}
@media (prefers-reduced-motion:reduce){.doa-welcome{transition:opacity .3s}}

/* #27 hediye kredisi kartı (hesap) */
.acct-credit{border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:24px;background:linear-gradient(180deg,rgba(201,162,39,.05),transparent)}
.acct-credit__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.acct-credit__label{font-size:14px;color:var(--bone-dim);letter-spacing:.3px}
.acct-credit__bal{font-family:var(--display);font-size:26px;color:var(--gold)}
.acct-credit__forms{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.acct-credit__form label{display:block;font-size:13px;color:var(--bone-dim);margin-bottom:8px}
.acct-credit__form .row{display:flex;gap:8px}
.acct-credit__form input{flex:1 1 auto;min-width:0;background:var(--ink-2);border:1px solid var(--line);border-radius:9px;color:var(--bone);padding:10px 12px;font:inherit}
.acct-credit__form .hint{display:block;color:var(--muted);font-size:11.5px;margin-top:8px}
@media (max-width:640px){.acct-credit__forms{grid-template-columns:1fr}}

/* ===== H6 — mobil alt sekme çubuğu (PWA) ===== */
.m-tabbar{display:none}
@media (max-width:760px){
  .m-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;
    background:linear-gradient(180deg,rgba(18,15,10,.97),rgba(12,10,7,.99));
    border-top:1px solid var(--gold-line);backdrop-filter:blur(8px);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
  .m-tabbar a{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:6px 2px;color:var(--bone-dim);font-size:10.5px;letter-spacing:.2px;border-radius:10px}
  .m-tabbar a svg{width:21px;height:21px}
  .m-tabbar a.is-on{color:var(--gold)}
  .m-tabbar a:active{background:rgba(201,162,39,.08)}
  .m-tab-n{display:inline-block;min-width:14px;padding:0 4px;border-radius:8px;background:var(--gold);
    color:#1a1408;font-size:9px;font-weight:700;text-align:center;vertical-align:top}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .doa-welcome{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}

/* H6 — "Ana ekrana ekle" çipi */
.doa-a2hs{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(76px + env(safe-area-inset-bottom,0px));
  z-index:56;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 28px);
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));border:1px solid var(--gold-line);
  border-radius:30px;padding:9px 40px 9px 16px;box-shadow:0 20px 50px -18px rgba(0,0,0,.8);
  color:var(--bone-dim);font-size:12.5px}
@media (min-width:761px){.doa-a2hs{bottom:24px}}
.doa-a2hs__btn{background:linear-gradient(180deg,#e7cd6a,#c9a227);color:#211a10;border:0;border-radius:20px;
  padding:7px 14px;font-weight:600;font-size:12px;cursor:pointer;white-space:nowrap}
.doa-a2hs__x{position:absolute;top:4px;right:8px;background:none;border:0;color:var(--muted);font-size:16px;cursor:pointer;padding:2px 5px}
.cat-hero__glow{position:absolute;z-index:0;top:-40%;right:-8%;width:58%;height:180%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--_a) 52%,transparent) 0%,transparent 62%);opacity:.5;animation:catGlow 1.4s ease both}
.cat-hero__inner{position:relative;z-index:1}
.cat-hero__inner .kicker{color:var(--_a)}
.cat-hero__title{font-size:clamp(30px,5.5vw,56px);color:var(--bone);margin:6px 0 10px;letter-spacing:.4px}
.cat-hero__desc{color:var(--bone-dim);max-width:560px;font-size:15px;line-height:1.65;margin:0}
.cat-world .shop-count{color:var(--_a)}
.cat-world .art-meta .c{color:var(--_a)}
.cat-world .art:hover .frame{box-shadow:0 44px 90px -38px #000,0 0 0 1px color-mix(in srgb,var(--_a) 32%,transparent)}
@keyframes catHeroIn{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
@keyframes catGlow{from{opacity:0;transform:scale(.7)}to{opacity:.5;transform:none}}
@media (prefers-reduced-motion:reduce){.cat-hero,.cat-hero__glow{animation:none}}

/* Cart table → mobilde kart düzenine dönüşür */
@media (max-width:640px){
  .cart-table thead{position:absolute;left:-9999px}
  .cart-table,.cart-table tbody,.cart-table tr,.cart-table td{display:block;width:100%}
  .cart-table tr{border:1px solid var(--line);border-radius:8px;margin-bottom:12px;padding:8px 10px}
  .cart-table td{border:none;padding:7px 2px;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:right}
  .cart-table td::before{content:attr(data-label);color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px;text-align:left}
  .cart-table td:empty{display:none}
}

/* ==========================================================================
   FAZ 2/3 — UX enhancement & modules
   ========================================================================== */
.p-desc{line-height:1.85}
.art:hover .mat{background:var(--card-hover)}

/* 2.3 — Frame hover gold shimmer (::before'a taşındı; ::after iç altın çerçeve çizgisi olarak korunur) */
.art .frame{position:relative}
.art .frame::before{content:"";position:absolute;inset:-1px;pointer-events:none;opacity:0;
  background:linear-gradient(135deg,transparent,rgba(201,162,39,.10),transparent);
  transition:opacity .5s var(--ease);z-index:4}
.art:hover .frame::before{opacity:1}
.zoomable{cursor:zoom-in}

/* 2.3 — Lightbox (native <dialog>) */
dialog.lightbox{border:none;padding:0;background:transparent;max-width:96vw;max-height:96vh;overflow:visible}
dialog.lightbox::backdrop{background:var(--ink-overlay)}
dialog.lightbox img{max-width:96vw;max-height:92vh;display:block;border:1px solid var(--line-2);box-shadow:0 40px 120px -30px #000}
dialog.lightbox .lb-x{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border-radius:50%;
  background:var(--ink-2);color:var(--bone);border:1px solid var(--line);font-size:20px;cursor:pointer;z-index:2}

/* 2.4a — Trust bar */
.trust-bar{background:var(--ink-3);border-bottom:1px solid var(--line-2);color:var(--bone-dim);
  font-size:12.5px;letter-spacing:.4px}
.trust-bar .container{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;padding:9px 20px;text-align:center}
.trust-bar b{color:var(--gold-2);font-weight:600}
@media (max-width:560px){.trust-bar .container{gap:14px;font-size:11.5px}}

/* 2.4b — Sticky add-to-cart bar (product) */
.sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:60;transform:translateY(110%);
  transition:transform .3s var(--ease);background:var(--ink-2);border-top:1px solid var(--gold-line);
  box-shadow:0 -20px 50px -20px #000}
.sticky-buy.show{transform:none}
.sticky-buy .inner{max-width:var(--maxw);margin:auto;display:flex;align-items:center;gap:14px;padding:10px 20px}
.sticky-buy .sb-t{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--bone)}
.sticky-buy .sb-p{color:var(--gold-2);font-weight:600}
.sticky-buy .btn{flex:0 0 auto}
@media (max-width:560px){.sticky-buy .sb-t{display:none}}

/* 2.4 — Checkout step progress */
.steps{display:flex;gap:10px;align-items:center;margin:0 0 22px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.steps .step{display:flex;align-items:center;gap:8px}
.steps .step .n{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);display:inline-flex;
  align-items:center;justify-content:center;font-size:12px}
.steps .step.is-active .n{background:var(--gold);color:#1a1408;border-color:var(--gold)}
.steps .step.is-done .n{border-color:var(--gold);color:var(--gold-2)}
.steps .sep{flex:1 1 18px;height:1px;background:var(--line);min-width:16px}

/* 2.4 — Recently viewed strip */
.recent-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(120px,1fr);gap:14px;overflow-x:auto;padding:4px 0 10px}
.recent-strip a{display:block}
.recent-strip img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line-2)}
.recent-strip .rv-t{font-size:12.5px;color:var(--bone-dim);margin-top:6px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* 2.4 — Incentive / newsletter popup */
.incentive{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px}
.incentive.open{display:flex}
.incentive .scrim{position:absolute;inset:0;background:var(--ink-overlay)}
.incentive .box{position:relative;z-index:2;background:var(--ink-2);border:1px solid var(--gold-line);
  border-radius:6px;max-width:440px;width:100%;padding:34px 30px;text-align:center;box-shadow:0 50px 120px -40px #000}
.incentive h3{font-family:var(--display);font-weight:400;font-size:26px;color:var(--bone);margin:0 0 8px}
.incentive p{color:var(--bone-dim);font-size:14.5px;margin:0 0 18px}
.incentive .promo{display:inline-block;border:1px dashed var(--gold-line);color:var(--gold-2);
  padding:8px 16px;letter-spacing:2px;font-weight:600;border-radius:2px;margin-bottom:16px}
.incentive form{display:flex;gap:8px}
.incentive input[type=email]{flex:1;background:var(--ink-3);border:1px solid var(--line);border-radius:2px;color:var(--bone);padding:12px 14px}
.incentive .x{position:absolute;top:8px;right:12px;background:none;border:none;color:var(--muted);font-size:24px;cursor:pointer}

/* 3 — Room visualizer modal */
.room-modal{position:fixed;inset:0;z-index:140;display:none}
.room-modal.open{display:block}
.room-modal .scrim{position:absolute;inset:0;background:var(--ink-overlay)}
.room-modal .box{position:relative;z-index:2;max-width:980px;width:calc(100% - 28px);margin:4vh auto 0;
  background:var(--ink-2);border:1px solid var(--line-2);border-radius:8px;max-height:92vh;overflow:auto}
.room-stage{position:relative;aspect-ratio:3/2;overflow:hidden;background:#15110d}
.room-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.room-scene--css{background:
  linear-gradient(180deg,#2a2118 0%,#241c14 55%,#1a140d 100%);}
.room-scene--css::after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:34%;
  background:linear-gradient(180deg,#3a2c1d,#241a11);box-shadow:inset 0 2px 0 rgba(255,255,255,.05)}
.room-art{position:absolute;top:24%;left:50%;transform:translateX(-50%);box-shadow:0 18px 40px -12px rgba(0,0,0,.7);
  border:6px solid #1c1712;background:#0c0a08}
.room-art.frame-gold{border-color:#caa45a}
.room-art.frame-black{border-color:#15120e}
.room-art.frame-wood{border-color:#6b4a2b}
.room-art.frame-none{border-width:0}
.room-art img{display:block;width:100%;height:100%;object-fit:cover}
.room-controls{display:flex;gap:18px;flex-wrap:wrap;padding:18px 22px;align-items:center}
.room-controls .grp{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.room-controls .chip{cursor:pointer;border:1px solid var(--line);color:var(--bone-dim);padding:7px 12px;border-radius:2px;font-size:13px;background:transparent}
.room-controls .chip.is-active{border-color:var(--gold);color:var(--gold-2)}
.room-x{position:absolute;top:10px;right:14px;z-index:3;background:none;border:none;color:var(--bone);font-size:28px;cursor:pointer}

/* ==========================================================================
   v16 — 3D tilt · specular glare · Ken Burns · gold shine (premium motion)
   ========================================================================== */

/* 3D eğim yüzeyi (tilt3d.js kurar) — transform JS'ten gelir */
.tilt3d{will-change:transform}
.tilt3d.tilt-on{transition:box-shadow .45s var(--ease)}   /* eğim akıcı kalsın diye transform transition devre dışı */
/* v22 PERFORMANS DÜZELTMESİ — parlama artık BOYANMIYOR, TAŞINIYOR.
   ÖNCEKİ SORUN: tilt3d.js her karede yeni bir radial-gradient DİZESİ üretip
   `background`'a yazıyordu. Gradient'ler compose EDİLMEZ, BOYANIR: her 16 ms'de
   dize yeniden ayrıştırılıp 460px'lik bir daire yeniden rasterize ediliyordu.
   Üstüne `mix-blend-mode:screen` tüm yığın bağlamını her karede yeniden
   birleştirmeye zorluyordu — orta seviye bir telefonda kart hover'ı kare
   düşürüyordu.
   ÇÖZÜM: gradient SABİT ve elemanın kendi merkezinde. Konum yalnızca
   `transform: translate3d()` ile değişiyor — GPU'da compose edilir, sıfır repaint.
   `mix-blend-mode` kaldırıldı; aynı ışık etkisi normal opaklıkla elde ediliyor. */
.tilt3d-glare{
  position:absolute; z-index:6; pointer-events:none; opacity:0;
  /* Kabın dışına taşacak kadar büyük, merkezi kendi ortasında */
  width:460px; height:460px;
  left:0; top:0;
  margin-left:-230px; margin-top:-230px;
  background:radial-gradient(circle closest-side,
              rgba(255,241,200,.20),
              rgba(255,241,200,.06) 44%,
              transparent 66%);
  transition:opacity .35s var(--ease);
  will-change:transform;
}
.tilt3d{overflow:hidden}                       /* parlama kabın dışına sızmasın */
.tilt3d.tilt-on .tilt3d-glare{opacity:1}
@media (prefers-reduced-motion: reduce){
  .tilt3d-glare{display:none}                  /* hareket hassasiyeti: parlama yok */
}
/* Eğim sırasında gölge derinleşir → havada duran tablo hissi */
.art .frame.tilt-on{box-shadow:0 54px 110px -40px rgba(0,0,0,.95)}
.p-main.tilt-on{box-shadow:0 60px 130px -44px rgba(0,0,0,.95)}

/* Ken Burns — slider görselleri çok yavaş nefes alır (sinematik) */
@media (prefers-reduced-motion: no-preference){
  .slide-bg img{animation:doaKenburns 18s ease-in-out infinite alternate}
  @keyframes doaKenburns{from{transform:scale(1) translateY(0)}to{transform:scale(1.07) translateY(-1.5%)}}
}

/* Altın butonda ışık süpürmesi — hover'da cam parıltısı geçer */
.btn--gold{overflow:hidden}
.btn--gold::before{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.42) 50%,transparent 80%);
  transform:translateX(-160%) skewX(-18deg);transition:none;pointer-events:none}
.btn--gold:hover::before{transform:translateX(300%) skewX(-18deg);transition:transform .8s var(--ease)}

/* Kategori kutuları eğimde daha canlı gölge */
.cat.has-img.tilt-on{box-shadow:0 30px 60px -26px rgba(0,0,0,.85);border-color:var(--gold-line)}

/* Trend rayı kartlarına derinlik gölgesi (hover) */
.rail-card:hover .rail-img{box-shadow:0 26px 54px -24px rgba(0,0,0,.9);border-color:var(--gold-line)}
.rail-img{transition:box-shadow .35s var(--ease),border-color .35s var(--ease)}

/* Hero kicker çizgisine altın nabız (çok ince marka dokunuşu) */
@media (prefers-reduced-motion: no-preference){
  .hero .kicker::before,.slide-inner .kicker::before{animation:doaKickerPulse 3.2s var(--ease) infinite}
  @keyframes doaKickerPulse{0%,100%{opacity:.55;transform:scaleX(.6);transform-origin:left}50%{opacity:1;transform:scaleX(1)}}
}

/* Dokunmatik/az-hareket: tilt hiç kurulmaz (JS) — statik gölgeler korunur */

/* 3 — Gallery wall */
.gw-wrap{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}
.gw-tray{border:1px solid var(--line);border-radius:8px;padding:12px;max-height:70vh;overflow:auto}
.gw-tray .gw-item{display:flex;gap:10px;align-items:center;padding:7px;border:1px solid var(--line-2);border-radius:6px;margin-bottom:8px;cursor:grab;background:var(--ink-2)}
.gw-tray .gw-item img{width:46px;height:58px;object-fit:cover;border-radius:3px}
.gw-wall{min-height:60vh;border:1px solid var(--line);border-radius:8px;background:
  linear-gradient(180deg,#211a13,#171109);display:flex;flex-wrap:wrap;gap:16px;align-content:flex-start;padding:22px}
.gw-wall.drag{outline:2px dashed var(--gold-line);outline-offset:-8px}
.gw-wall .placed{position:relative;border:5px solid #1c1712;box-shadow:0 14px 30px -10px #000;background:#0c0a08}
.gw-wall .placed img{display:block;width:120px;height:150px;object-fit:cover}
.gw-wall .placed .rm{position:absolute;top:-10px;right:-10px;width:24px;height:24px;border-radius:50%;border:none;background:var(--oxblood);color:#fff;cursor:pointer}
.gw-empty{color:var(--muted);margin:auto;text-align:center;font-size:14px}
@media (max-width:760px){.gw-wrap{grid-template-columns:1fr}}

/* ==========================================================================
 * v20 — AJAX FİLTRE PANELİ (kategori sayfası)
 * Eskiden yalnız "sırala" vardı; fiyat / yön / renk filtresi eklendi.
 * ======================================================================== */
.doa-filter-toggle{padding:8px 14px;font-size:13px;line-height:1}
.doa-filters{margin:0 0 22px;padding:18px;border:1px solid var(--line,#2a241d);
  border-radius:4px;background:var(--ink-2,#161310);display:flex;flex-direction:column;gap:14px}
.doa-filters[hidden]{display:none}
.doa-filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.doa-filter-lab{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--gold,#caa45a);min-width:74px}
.doa-filters input[type=number],.doa-filters select{
  padding:8px 11px;background:var(--ink,#0d0c0a);color:var(--bone,#ece6da);
  border:1px solid var(--line,#2a241d);border-radius:3px;font:inherit;font-size:14px;min-width:96px}
.doa-filters input[type=number]{width:104px}
.doa-filters select:focus,.doa-filters input:focus{outline:2px solid var(--gold,#caa45a);outline-offset:1px}
.doa-filter-dash{color:var(--muted,#8a8178)}
.doa-filter-check{display:inline-flex;align-items:center;gap:7px;font-size:14px;
  color:var(--bone-dim,#cabfb0);cursor:pointer}
.doa-filter-actions{justify-content:flex-end}

/* Renk çipleri — paletten türetilir */
.doa-colors{display:flex;flex-wrap:wrap;gap:8px}
.doa-color{width:30px;height:30px;border-radius:50%;cursor:pointer;padding:0;
  background:var(--c,#666);border:2px solid transparent;box-shadow:0 0 0 1px rgba(236,230,218,.22) inset;
  transition:transform .15s,border-color .15s}
.doa-color:hover{transform:scale(1.12)}
.doa-color.is-on{border-color:var(--gold,#caa45a);transform:scale(1.15)}
.doa-color:focus-visible{outline:2px solid var(--gold,#caa45a);outline-offset:2px}

.doa-filter-empty{grid-column:1/-1;padding:44px 10px;text-align:center;color:var(--muted,#8a8178)}
.doa-more-wrap{text-align:center;margin:30px 0 0}
#doaGrid{transition:opacity .18s ease}

@media (max-width:640px){
  .doa-filter-lab{min-width:100%}
  .doa-filters input[type=number]{width:calc(50% - 22px)}
  .doa-filters select{flex:1 1 140px}
}

/* ==========================================================================
 * v20 — CRO: ürün sayfası güven rozetleri + aciliyet
 * ======================================================================== */
.doa-badges{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 4px;padding:0;list-style:none}
.doa-badge{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;font-size:12.5px;
  color:var(--bone-dim,#cabfb0);background:var(--ink-2,#161310);
  border:1px solid var(--line,#2a241d);border-radius:4px;line-height:1.25}
.doa-badge svg{width:17px;height:17px;flex:0 0 auto;color:var(--gold,#caa45a)}
.doa-urgency{display:flex;align-items:center;gap:9px;margin:16px 0 0;padding:10px 13px;
  font-size:13.5px;color:#ffd9a1;background:rgba(202,164,90,.10);
  border:1px solid rgba(202,164,90,.32);border-radius:4px}
.doa-urgency .dot{width:8px;height:8px;border-radius:50%;background:#7ed07e;flex:0 0 auto}
@media (prefers-reduced-motion:no-preference){
  .doa-urgency .dot{animation:doaPulseDot 2.2s ease-in-out infinite}
}
@keyframes doaPulseDot{0%,100%{box-shadow:0 0 0 0 rgba(126,208,126,.55)}50%{box-shadow:0 0 0 6px rgba(126,208,126,0)}}

/* ==========================================================================
   ANA SAYFA SLIDER — v22
   --------------------------------------------------------------------------
   NEDEN BURADA: admin/slides.php modulu vardi, `slides` tablosuna yaziyordu,
   ama vitrinde onu okuyan/bicimlendiren hicbir sey yoktu. Yonetici gorsel
   yukluyor, sitede hicbir sey degismiyordu.

   TASARIM: token tabanli (--ink/--bone/--gold) yazildi, bu yuzden gallery ·
   owl · moon · moth · botanical temalarinin HEPSINDE dogru renklenir; temaya
   ozel bir kural gerekmez.

   ERISILEBILIRLIK: serit scroll-snap ile yatay kaydirilabilir; JS olmasa da
   tum slide'lara ulasilir. Ok ve noktalar JS varken eklenir.
   ========================================================================== */
.doa-slider{
  position:relative;
  border-radius:var(--radius-lg, 14px);
  overflow:hidden;
  background:var(--ink-2);
  box-shadow:var(--shadow-card, 0 8px 24px -14px rgba(0,0,0,.25));
}

/* Serit — yatay scroll-snap. Kaydirma cubugu gizli ama kaydirma acik. */
.doa-slider__track{
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.doa-slider__track::-webkit-scrollbar{ display:none; }
.doa-slider__track:focus-visible{ outline:2px solid var(--gold); outline-offset:-3px; }

.doa-slide{
  position:relative;
  flex:0 0 100%;
  scroll-snap-align:center;
  /* Masaustunde sinema orani; cok uzun ekranlarda tasmasin diye max-height ile sinirli */
  aspect-ratio:16 / 9;
  max-height:72vh;
  min-height:340px;
  isolation:isolate;
}

/* Gorsel — kirpilarak tam alani doldurur (kart degil, hero: cover dogru olan) */
.doa-slide__bg{ position:absolute; inset:0; display:block; }
.doa-slide__bg img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}

/* OKUNABILIRLIK PERDESI.
   Slide gorseli yoneticinin yukledigi herhangi bir sey olabilir — acik gokyuzu de
   olabilir. Beyaz yazinin HER gorselde okunmasi icin gradyan perde sart; yoksa
   metin bazi gorsellerde kayboluyor. (Ayni hata kategori kartlarinda yasanmisti.) */
.doa-slide__copy{
  position:absolute; inset:auto 0 0 0;
  z-index:1;
  padding:clamp(20px, 4vw, 52px);
  background:linear-gradient(to top,
    rgba(18,14,10,.86) 0%,
    rgba(18,14,10,.62) 42%,
    rgba(18,14,10,.16) 76%,
    rgba(18,14,10,0)   100%);
  color:#F6EFE1;
}
.doa-slide__title{
  /* v28 — kullanici istegi: baslik fontu ALT METINLE AYNI olsun.
     Bodoni (didone) koyu slide gorseli ustunde sonuk kaliyordu; ustune
     gallery temasinin genel h1/h2 kurali rengi de koyuya cekiyordu
     (olculen: rgb(26,22,17) — o kural artik bu ogeyi disliyor).
     Jost (--ui) ayni agirlikta cok daha dolu bir siyah-beyaz doku veriyor. */
  font-family:var(--ui);
  font-weight:600;
  font-size:clamp(25px, 4vw, 50px);
  line-height:1.12;
  letter-spacing:.005em;
  margin:0;
  color:#FFF9EC;
  text-shadow:0 2px 18px rgba(0,0,0,.42);
  max-width:24ch;
}
.doa-slide__sub{
  margin:.6em 0 0;
  font-size:clamp(14px, 1.5vw, 17.5px);
  line-height:1.55;
  color:#E7DDC9;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
  max-width:52ch;
}
.doa-slide__cta{ margin:clamp(14px, 2vw, 22px) 0 0; }

/* ---- Oklar --------------------------------------------------------------
   Her zaman gorunur (yalnizca hover'da gostermek dokunmatik ve klavye
   kullanicilarini disarida birakir), ama sakin bir opaklikta. */
.doa-slider__arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:2;
  width:44px; height:44px;
  display:grid; place-items:center;
  border:1px solid rgba(246,239,225,.34);
  border-radius:50%;
  background:rgba(18,14,10,.42);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#F6EFE1;
  cursor:pointer;
  opacity:.72;
  transition:opacity .2s ease, background .2s ease, transform .2s ease;
}
.doa-slider__arrow:hover{ opacity:1; background:rgba(18,14,10,.66); }
.doa-slider__arrow:focus-visible{ opacity:1; outline:2px solid var(--gold); outline-offset:2px; }
.doa-slider__arrow svg{ width:20px; height:20px; }
.doa-slider__arrow--prev{ left:clamp(8px, 1.4vw, 18px); }
.doa-slider__arrow--next{ right:clamp(8px, 1.4vw, 18px); }
.doa-slider__arrow[hidden]{ display:none; }

/* ---- Noktalar -----------------------------------------------------------
   Aktif nokta genisleyen bir kapsul olur: konumu renk KORLERI icin de
   ayirt edilebilir kilar (yalnizca renkle bilgi tasimamak icin). */
.doa-slider__dots{
  position:absolute; z-index:2;
  left:0; right:0; bottom:clamp(10px, 1.6vw, 18px);
  display:flex; justify-content:center; align-items:center; gap:8px;
}
.doa-slider__dots[hidden]{ display:none; }
.doa-slider__dot{
  width:8px; height:8px; padding:0;
  border:none; border-radius:999px;
  background:rgba(246,239,225,.46);
  cursor:pointer;
  transition:width .28s cubic-bezier(.22,.61,.36,1), background .2s ease;
}
.doa-slider__dot:hover{ background:rgba(246,239,225,.78); }
.doa-slider__dot.is-on{ width:26px; background:var(--gold); }
.doa-slider__dot:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* Tek slide: kontrol yok, salt gorsel */
.doa-slider--single .doa-slider__arrow,
.doa-slider--single .doa-slider__dots{ display:none; }

/* ---- Mobil -------------------------------------------------------------
   Panelde mobil gorsel icin onerilen olcu 1080x1350 (dikey). Oran da ona
   uysun ki yuklenen dikey gorsel kirpilmasin. */
@media (max-width:640px){
  .doa-slide{ aspect-ratio:4 / 5; max-height:none; min-height:300px; }
  .doa-slide__title{ max-width:none; }
  .doa-slider__arrow{ width:38px; height:38px; }
  .doa-slider__arrow svg{ width:17px; height:17px; }
}

/* Hareketi azalt: kaydirma animasyonunu kapat (otomatik gecis JS'te kapaniyor) */
@media (prefers-reduced-motion: reduce){
  .doa-slider__track{ scroll-behavior:auto; }
  .doa-slider__dot{ transition:none; }
  .doa-slider__arrow{ transition:none; }
}
/* ==========================================================================
   STUDIO BANDI (marka hikayesi) — v22
   Panelde studio_kicker/studio_quote/studio_body alanlari vardi ama vitrinde
   karsiligi yoktu. Token tabanli yazildi -> her temada dogru renklenir.
   ========================================================================== */
.doa-studio{
  max-width:62ch; margin-inline:auto; text-align:center;
  padding:clamp(18px,3vw,34px) 0;
}
.doa-studio__quote{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(21px,2.9vw,34px);
  line-height:1.26;
  letter-spacing:-.012em;
  color:var(--bone);
  margin:14px 0 0;
  quotes:none;
}
/* Alintiyi tipografik olarak isaretle ama ekran okuyucuya gurultu ekleme */
.doa-studio__quote::before,
.doa-studio__quote::after{ content:none; }
.doa-studio__body{
  margin:clamp(14px,1.8vw,20px) auto 0;
  max-width:52ch;
  font-size:clamp(14.5px,1.35vw,16.5px);
  line-height:1.68;
  color:var(--bone-dim);
}
/* Alt ayrac — sayfanin geri kalanindan yumusak bir ayrim */
.doa-studio::after{
  content:""; display:block;
  width:54px; height:1px; margin:clamp(20px,2.6vw,30px) auto 0;
  background:var(--gold); opacity:.5;
}
/* ==========================================================================
   CEREZ IZNI BANDI — v22
   Yalnizca EEA/UK/CH ziyaretcisine ve karar verilmemisse render edilir.
   Token tabanli -> her temada dogru renklenir.
   ========================================================================== */
.doa-consent{
  position:fixed; z-index:9999;
  left:0; right:0; bottom:0;
  padding:clamp(12px,2vw,20px);
  display:flex; justify-content:center;
  pointer-events:none;   /* yalnizca kutu tiklanabilir olsun */
}
.doa-consent__box{
  pointer-events:auto;
  max-width:640px; width:100%;
  background:var(--ink-2); color:var(--bone);
  border:1px solid var(--line);
  border-radius:var(--radius-lg,14px);
  box-shadow:0 8px 40px -12px rgba(0,0,0,.45);
  padding:clamp(14px,2vw,20px) clamp(16px,2.2vw,22px);
}
.doa-consent__t{
  margin:0 0 6px; font-family:var(--display);
  font-size:clamp(16px,1.6vw,19px); font-weight:500; color:var(--bone);
}
.doa-consent__b{
  margin:0 0 14px; font-size:14px; line-height:1.6; color:var(--bone-dim);
}
.doa-consent__b a{ color:var(--gold); text-decoration:underline; }
.doa-consent__a{ display:flex; gap:10px; flex-wrap:wrap; }
.doa-consent__a .btn{ flex:0 0 auto; }

@media (max-width:520px){
  .doa-consent__a{ flex-direction:column; }
  .doa-consent__a .btn{ width:100%; text-align:center; }
}
@media (prefers-reduced-motion: no-preference){
  .doa-consent__box{ animation:doaConsentUp .32s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes doaConsentUp{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
}
/* ==========================================================================
   CANLI DUYURU / TOAST — v22
   Sitede HIC aria-live bolgesi yoktu: AJAX ile olan hicbir sey (sepete ekleme,
   filtre sonucu, favori) ekran okuyucuya bildirilmiyordu. Ayrica sepet bosken
   ilk "sepete ekle" isleminde gozle gorulur geri bildirim de yoktu.
   Bu katman ikisini birden cozer: role="status" + aria-live="polite" kutusu
   hem okunur hem gorunur.
   ========================================================================== */
.doa-live{
  position:fixed; z-index:10000;
  left:50%; transform:translateX(-50%);
  bottom:clamp(16px,3vw,28px);
  display:flex; flex-direction:column; gap:8px;
  align-items:center;
  pointer-events:none;   /* duyuru tiklamayi engellemesin */
  max-width:min(92vw,420px);
}
.doa-live__toast{
  background:var(--ink-2); color:var(--bone);
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  border-radius:var(--radius-sm,8px);
  box-shadow:0 6px 26px -10px rgba(0,0,0,.42);
  padding:11px 16px;
  font-size:14px; line-height:1.45;
  text-align:center;
}
.doa-live__toast.is-err{ border-left-color:var(--error,#A63B22); }

@media (prefers-reduced-motion: no-preference){
  .doa-live__toast{ animation:doaLiveIn .26s cubic-bezier(.22,.61,.36,1) both; }
  .doa-live__toast.is-out{ animation:doaLiveOut .32s ease forwards; }
  @keyframes doaLiveIn { from{opacity:0;transform:translateY(10px) scale(.98)} to{opacity:1;transform:none} }
  @keyframes doaLiveOut{ to{opacity:0;transform:translateY(-6px)} }
}
/* Hareketi azaltanlar icin: animasyon yok ama kaybolma yine calisir */
@media (prefers-reduced-motion: reduce){
  .doa-live__toast.is-out{ opacity:0; transition:opacity .2s linear; }
}

/* Mobil alt sekme cubugu varsa toast onun ustunde dursun */
@media (max-width:760px){
  .doa-live{ bottom:calc(66px + env(safe-area-inset-bottom,0px)); }
}
/* ==========================================================================
   HEADER TASMA DUZELTMESI — v26 (v24 blogunun yerine)

   v24'TE NE YANLIS YAPTIM:
   `.nav-links{ min-width:0 }` ekledim. Amac "kuculebilsin"di; gercekte olan
   sudur — flex ogesi artik icerik genisliginin ALTINA inebiliyor ama
   cocuklarinda `white-space:nowrap` oldugu icin baglantilar kutunun DISINA
   tasiyor. Yani min-width:0 tasmayi engellemedi, TASMAYI SERBEST BIRAKTI.
   Ustune `z-index:2` koyunca tasan menu, aramanin ve sagdaki ikonlarin
   uzerine BOYANDI. Raporun 5. maddesi ("menu aramanin uzerine cikiyor") ve
   7. maddesi ("Instagram'a tiklanmiyor") ayni mekanizmanin iki yuzu.

   Ikinci hata: duzeltme site.css'e yazildi, ama aktif tema gallery-light.css
   SONRA yukleniyor ve `html[data-theme="gallery"] .search-box input` daha
   yuksek ozgullukte genisligi 210px'e geri cekiyordu. Yani kural hic
   uygulanmadi.

   v26 COZUMU — belirtiyi degil sebebi kaldir: arama satirdan cikti
   (bkz. .search-pop). Satirin talebi ~210px azaldi; artik hicbir dilde ve
   hicbir genislikte tasma olmuyor, dolayisiyla z-index yamasina da gerek yok.
   ========================================================================== */
.nav{ gap:clamp(12px,2vw,28px); }

/* Marka kucultulmesin ama logosu tasmasin */
.brand{ flex:0 0 auto; min-width:0; }
.brand-logo{ max-width:clamp(120px,16vw,210px); height:auto; }

/* Menu KUCULMEZ ve TASMAZ. min-width:auto (varsayilan) bilerek korunuyor:
   yer yetmezse satir buyur, ogeler ust uste binmez. */
.nav-links{ flex:0 0 auto; }

/* Sag blok da sabit — icinde yalnizca ikonlar ve tek buton var */
.nav-right{ flex:0 0 auto; }

/* Cakisma ihtimali kalmadigi icin z-index yamasi KALDIRILDI.
   Yama sorunu cozmuyordu, yalnizca hangi ogenin kazanacagini seciyordu. */

/* Dar masaustunde Etsy butonu cekmeceye biner — menu her zaman oncelikli */
@media (max-width:980px){
  .nav-right .nav-account{ display:none; }
}

/* ÇEKMECE EŞİĞİ — v27'de 920 -> 720.
   v26'da TR menü 7 düz öğeyle 491px istiyordu ve eşik 920 olmak zorundaydı.
   Menü 4 gruba inince (ölçüm: 335px) hesap değişti:
     <1040 Etsy butonu gizli (tema kuralı), <1000 sosyal gizli, <980 hesap gizli
     → kalan talep ~720px'te bile sığıyor.
   Böylece tablet genişliklerinde gerçek menü görünür kalıyor; çekmece yalnızca
   gerçekten dar ekranlarda devreye giriyor. */
@media (max-width:720px){
  .nav-links{ display:none; }
  .hamburger{ display:flex; }
}

/* ==========================================================================
   v26 — "Nasıl Çalışır" dijital baskı rehberi (how-it-works.php)
   Tüm renkler TOKEN üzerinden: sayfa hem koyu hem "gallery" açık temada
   doğru okunur. Sabit renk yazmak, bu turda düzelttiğimiz toast/header
   hatalarının aynısını üretirdi.
   ========================================================================== */
.hiw-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;margin:30px 0 6px}
.hiw-fact{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--ink-2)}
.hiw-fact b{display:block;font-family:var(--display);font-size:17px;font-weight:600;color:var(--bone);margin-bottom:4px}
.hiw-fact span{font-size:13.5px;color:var(--bone-dim);line-height:1.5}

.hiw-steps{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.hiw-steps li{display:flex;gap:14px;align-items:flex-start}
.hiw-n{flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--gold-line);color:var(--gold);font-size:14px;font-weight:600}
.hiw-steps b{display:block;font-size:15.5px;color:var(--bone);margin-bottom:5px}
.hiw-steps p{margin:0;font-size:14px;line-height:1.6;color:var(--bone-dim)}

.hiw-cols{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:34px;align-items:start}
@media (max-width:860px){ .hiw-cols{grid-template-columns:1fr} }
.hiw-h3{font-family:var(--display);font-size:19px;font-weight:600;margin:22px 0 8px;color:var(--bone)}
.hiw-ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.hiw-ul li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.6;color:var(--bone-dim)}
.hiw-ul li::before{content:"·";position:absolute;left:6px;top:-2px;color:var(--gold);font-size:20px}
.hiw-ul--check li::before{content:"✓";left:0;top:0;font-size:14px}
.hiw-ul--x li::before{content:"✕";left:0;top:0;font-size:13px;color:var(--error,#c4563d)}

.hiw-side{border:1px solid var(--line);border-radius:12px;padding:20px;background:var(--ink-2)}
.hiw-side h3{font-family:var(--display);font-size:20px;font-weight:600;margin:0 0 10px;color:var(--bone)}
.hiw-side p{font-size:14.5px;line-height:1.65;color:var(--bone-dim);margin:0 0 10px}
.hiw-side-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:16px}
.hiw-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.hiw-note{font-size:12.5px;color:var(--muted);margin-top:12px;font-style:italic}

.hiw-band{background:var(--ink-2);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.hiw-grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:24px}
.hiw-card{border:1px solid var(--line);border-radius:12px;padding:20px;background:var(--ink)}
.hiw-card h3{font-family:var(--display);font-size:20px;font-weight:600;margin:8px 0 10px;color:var(--bone)}
.hiw-card p{font-size:14px;line-height:1.62;color:var(--bone-dim);margin:0 0 10px}
.hiw-tag{display:inline-block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold-line);border-radius:99px;padding:3px 10px}
.hiw-warn{font-size:13.5px !important;color:var(--bone) !important;
  border-left:2px solid var(--gold);padding-left:10px;margin-bottom:0 !important}

.hiw-checklist{margin-top:30px;border:1px solid var(--gold-line);border-radius:12px;padding:22px;background:var(--ink)}
.hiw-checklist h3{font-family:var(--display);font-size:20px;font-weight:600;margin:0 0 14px;color:var(--bone)}

.hiw-faq{display:grid;gap:10px;max-width:78ch}
.hiw-faq details{border:1px solid var(--line);border-radius:10px;background:var(--ink-2);overflow:hidden}
.hiw-faq summary{cursor:pointer;padding:14px 18px;font-size:15.5px;color:var(--bone);
  list-style:none;font-weight:500}
.hiw-faq summary::-webkit-details-marker{display:none}
.hiw-faq summary::after{content:"+";float:right;color:var(--gold);font-size:18px;line-height:1}
.hiw-faq details[open] summary::after{content:"–"}
.hiw-faq summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.hiw-faq p{margin:0;padding:0 18px 16px;font-size:14.5px;line-height:1.68;color:var(--bone-dim)}

/* ==========================================================================
   v26 — Sosyal medya akışı (social.php + ana sayfa şeridi)
   Gömülü üçüncü taraf widget YOK: kartlar bizim verimizden basılır, dolayısıyla
   sayfaya tek bir dış script bile eklenmez.
   ========================================================================== */
.soc-filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.soc-filter .chip{text-decoration:none}
.soc-filter .chip.is-on{border-color:var(--gold);color:var(--gold)}

.soc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:26px}
.soc-card{display:flex;flex-direction:column;gap:8px;text-decoration:none;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--ink-2);
  transition:.25s var(--ease)}
.soc-card:hover{border-color:var(--gold-line);transform:translateY(-3px)}
.soc-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.soc-card__img{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--ink-3)}
.soc-card__img img{width:100%;height:100%;object-fit:cover;display:block;transition:.4s var(--ease)}
.soc-card:hover .soc-card__img img{transform:scale(1.04)}
.soc-card__img--none{display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:34px;opacity:.5}
.soc-card__meta{display:flex;justify-content:space-between;align-items:center;
  padding:0 12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.soc-card__meta time{letter-spacing:.04em;text-transform:none;color:var(--muted)}
.soc-card__cap{padding:0 12px 14px;font-size:13.5px;line-height:1.5;color:var(--bone-dim)}

.soc-empty{text-align:center;border:1px dashed var(--line);border-radius:14px;
  padding:44px 22px;color:var(--bone-dim);margin-top:26px}
.soc-empty p{margin:0 0 18px}

/* Ana sayfa şeridi — yatay kaydırmalı, tek satır */
.soc-strip{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 14px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.soc-strip .soc-card{flex:0 0 clamp(160px,22vw,210px);scroll-snap-align:start}
@media (prefers-reduced-motion:reduce){ .soc-card:hover{transform:none} .soc-card:hover .soc-card__img img{transform:none} }