/* ==========================================================================
   DUSTY OWL ART — "Baskı Atölyesi" açık tema  ·  v21
   --------------------------------------------------------------------------
   NEDEN AÇIK TEMA:
   Etsy mağaza banner'ı krem zeminde siyah, yüksek kontrastlı deco serif.
   Site ise obsidyen+altındı — iki kanal birbirini tutmuyordu. Ayrıca bir sanat
   baskısı mağazasında koyu zemin eserle YARIŞIR: galeri duvarı beyazdır,
   vintage yağlıboya görselleri açık kâğıt üzerinde çok daha canlı okunur.

   NASIL ÇALIŞIR:
   site.css zaten `:root` + `html[data-theme]` token sistemiyle yazılmış.
   Bu dosya site.css'ten SONRA yüklenir; önce token'ları çevirir (tüm sitenin
   %70'i tek hamlede döner), sonra koyu zemin varsayan bileşenleri yeniden
   biçimlendirir. Hiçbir sınıf adı değişmez → mevcut sayfalar bozulmaz.

   TİPOGRAFİ: Bodoni Moda (didone başlık — Etsy banner'ının karakteri)
              + Jost (geometrik deco sans — arayüz)
   ========================================================================== */

/* ---- 1) Token devrimi ---------------------------------------------------- */
html[data-theme="gallery"],
html[data-theme="gallery"] :root,
body.doa-light {
  /* Kâğıt katmanları — saf beyaz değil, sıcak kemik (ekranda yormaz) */
  --ink:   #FAF6EE;   /* sayfa zemini  */
  --ink-2: #F3EDE1;   /* kart / panel  */
  --ink-3: #EAE2D2;   /* girinti       */
  --ink-4: #DED4C0;   /* kenarlık dolu */

  /* Mürekkep */
  --bone:     #1A1611;
  --bone-dim: #4A4238;
  --muted:    #7C7264;

  /* Antika altın — açık zeminde okunması için koyulaştırıldı (AA kontrast) */
  --gold:   #8A6520;
  --gold-2: #A87A2B;
  --oxblood:#7C3B30;

  --line:      rgba(26,22,17,.16);
  --line-2:    rgba(26,22,17,.08);
  --gold-line: rgba(138,101,32,.34);

  --ink-overlay: rgba(250,246,238,.94);
  --card-hover:  rgba(138,101,32,.045);
  --accent-warm: #9C5F2C;
  --text-link:   #8A6520;
  --success:#3F6B32; --error:#A63B22;

  --display: "Bodoni Moda", "Fraunces", Georgia, serif;
  --ui:      "Jost", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --shadow-card: 0 1px 2px rgba(26,22,17,.05), 0 8px 24px -14px rgba(26,22,17,.22);
  --shadow-lift: 0 2px 4px rgba(26,22,17,.06), 0 22px 44px -22px rgba(26,22,17,.30);

  color-scheme: light;
}

html[data-theme="gallery"] body { background:var(--ink); color:var(--bone); }

/* Kâğıt dokusu — düz renk yerine ince bir grain; ekranda "basılı" hissi verir.
   DİKKAT: doku doğrudan body'nin background-image'ına bindiriliyor. Daha önce
   ::before + `body > * {position:relative}` ile yapılıyordu; o kural
   .mobile-nav gibi `position:fixed` bileşenleri akışa düşürüp masaüstünde
   mobil menünün sayfa ortasında açık görünmesine yol açtı. */
html[data-theme="gallery"] body{
  background-color:var(--ink);
  background-image:
    radial-gradient(circle at 18% 10%, rgba(138,101,32,.06), transparent 44%),
    radial-gradient(circle at 84% 76%, rgba(124,59,48,.05), transparent 48%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  background-attachment:fixed, fixed, fixed;
}

/* Koyu temaya özel parlama/parallax katmanlarını kapat */
html[data-theme="gallery"] #doa-parallax,
html[data-theme="gallery"] .art .frame::before,
html[data-theme="gallery"] .cat-hero__glow { display:none !important; }

/* ---- 2) Tipografi -------------------------------------------------------- */
html[data-theme="gallery"] body{ font-family:var(--ui); font-size:16.5px; line-height:1.62; }
/* v28: :not(.doa-slide__title) eklendi. Bu genel kural slider basligini da
   yakaliyor ve site.css'in verdigi ACIK rengi (#FFF9EC) KOYU --bone ile
   eziyordu -> koyu gorsel ustunde koyu baslik, olculen sonuc "sonuk".
   Kurali iki dosyada tekrarlamak yerine genellemeden hariç tutuyoruz —
   slider basliginin tek dogruluk kaynagi site.css. */
html[data-theme="gallery"] h1:not(.doa-slide__title),
html[data-theme="gallery"] h2:not(.doa-slide__title),
html[data-theme="gallery"] h3,
html[data-theme="gallery"] .page-title,
html[data-theme="gallery"] .art-meta .t,
html[data-theme="gallery"] .p-title{
  /* 500 -> 600: Bodoni'nin ince cizgileri 500'de ekranda kayboluyordu.
     Font baglantisina 700 de eklendi; 600 marka karakterini koruyup
     okunurlugu geri veren denge noktasi. */
  font-family:var(--display); font-weight:600; letter-spacing:-.008em; color:var(--bone);
}

/* Bölüm başlığı — Etsy banner'ındaki süsleme çizgisini marka motifi yapıyoruz */
html[data-theme="gallery"] .kicker,
html[data-theme="gallery"] .eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--ui); font-size:11px; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; color:var(--gold);
}
html[data-theme="gallery"] .kicker::before,
html[data-theme="gallery"] .kicker::after{
  content:""; width:26px; height:1px; background:currentColor; opacity:.55;
}

/* ---- 3) Üst bar + header ------------------------------------------------- */
html[data-theme="gallery"] .topbar{
  background:#1A1611; border-bottom:none;
}
html[data-theme="gallery"] .topbar,
html[data-theme="gallery"] .topbar a{ color:#E8DFCB; }
html[data-theme="gallery"] .topbar a:hover{ color:#D8B65E; }

/* v26: header zemini artik token uzerinden. Ayrica `.is-stuck` YANLIS SINIFTI —
   assets/js/site.js `shrink` sinifi ekliyor, `is-stuck` diye bir sinif hicbir
   yerde uretilmiyordu. Yani bu kural hic uygulanmadi ve kaydirilmis header
   site.css'teki SABIT KOYU zemine dusuyordu. */
html[data-theme="gallery"]{
  /* v26 TIPOGRAFI (rapor 8. maddesi): `-webkit-font-smoothing:antialiased`
     KOYU tema icin dogruydu (acik yazi / koyu zemin). Bu tema tam tersi:
     koyu yazi / acik zemin. Antialiased o durumda cizgileri INCELTIR ve
     Bodoni Moda zaten yuksek kontrastli bir didone — sac teli inceligindeki
     ince cizgileri iyice siliniyordu. Varsayilana donuyoruz. */
  --font-smooth:auto;
  --header-bg:rgba(250,246,238,.90);
  --header-bg-strong:rgba(250,246,238,.97);
  --toast-bg:#FFFCF6;
  --toast-fg:#1A1611;
}
html[data-theme="gallery"] .site-header{
  backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line);
}
html[data-theme="gallery"] .site-header.shrink{ box-shadow:0 1px 20px -8px rgba(26,22,17,.28); }
html[data-theme="gallery"] .nav-links a,
html[data-theme="gallery"] .nav-account{ color:var(--bone-dim); font-weight:500; }
html[data-theme="gallery"] .nav-links a:hover,
html[data-theme="gallery"] .nav-account:hover{ color:var(--bone); }

/* Nav altı çizgisi içeriden dışarı çizilir */
html[data-theme="gallery"] .nav-links > li > a{ position:relative; padding-bottom:3px; }
html[data-theme="gallery"] .nav-links > li > a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--gold); transform:scaleX(0); transform-origin:center;
  transition:transform .32s var(--ease);
}
html[data-theme="gallery"] .nav-links > li > a:hover::after{ transform:scaleX(1); }

html[data-theme="gallery"] .dd-menu{
  background:#FFFCF6; border:1px solid var(--line); box-shadow:var(--shadow-lift);
}
html[data-theme="gallery"] .dd-menu a{ color:var(--bone-dim); }
html[data-theme="gallery"] .dd-menu a:hover{ background:var(--ink-3); color:var(--bone); }

/* v26: arama artik acilir kutuda; kenarlik/zemin FORM'a ait, input seffaf. */
html[data-theme="gallery"] .search-pop__form{
  background:#FFFCF6; border:1px solid var(--line);
}
html[data-theme="gallery"] .search-box input{ background:transparent; border:none; color:var(--bone); }
html[data-theme="gallery"] .search-box input::placeholder{ color:var(--muted); }
html[data-theme="gallery"] .search-pop__btn{ color:var(--bone-dim); }
html[data-theme="gallery"] .search-pop__btn:hover,
html[data-theme="gallery"] .search-pop[open] .search-pop__btn{ color:var(--gold); }
html[data-theme="gallery"] .nav-icon{ color:var(--bone-dim); }
html[data-theme="gallery"] .nav-icon:hover{ color:var(--gold); }
html[data-theme="gallery"] .nav-badge{ background:var(--gold); color:#FFF9EC; }
html[data-theme="gallery"] .social a{ color:var(--muted); }
html[data-theme="gallery"] .social a:hover{ color:var(--gold); }
html[data-theme="gallery"] .hamburger span{ background:var(--bone); }

/* Güven şeridi — ince, mürekkep zemin, marka motifiyle */
html[data-theme="gallery"] .trust-bar{
  background:var(--ink-2); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line);
  color:var(--bone-dim); font-size:12.5px; letter-spacing:.06em;
}
html[data-theme="gallery"] .trust-bar b{ color:var(--gold); }

/* ---- 4) Butonlar --------------------------------------------------------- */
html[data-theme="gallery"] .btn{
  font-family:var(--ui); font-weight:500; letter-spacing:.10em; text-transform:uppercase;
  font-size:12.5px; border-radius:var(--btn-radius); transition:.22s var(--ease);
}
html[data-theme="gallery"] .btn--gold{
  background:#1A1611; color:#FBF7EF; border:1px solid #1A1611; box-shadow:none;
}
html[data-theme="gallery"] .btn--gold:hover{
  background:var(--gold); border-color:var(--gold); color:#FFF9EC;
  transform:translateY(-1px); box-shadow:0 8px 18px -10px rgba(138,101,32,.7);
}
html[data-theme="gallery"] .btn--outline,
html[data-theme="gallery"] .btn--secondary{
  background:transparent; color:var(--bone); border:1px solid var(--line);
}
html[data-theme="gallery"] .btn--outline:hover,
html[data-theme="gallery"] .btn--secondary:hover{
  border-color:var(--gold); color:var(--gold); background:var(--card-hover);
}

/* ---- 5) ÜRÜN KARTI — "paspartulu baskı" --------------------------------- */
/* Kart bir çerçeveli baskıyı taklit eder: dış kâğıt + ince altın hat + iç mat. */
html[data-theme="gallery"] .art .frame{
  background:#FFFCF6; padding:12px; border:1px solid var(--line);
  border-radius:2px; box-shadow:var(--shadow-card);
  transition:transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s;
}
html[data-theme="gallery"] .art .frame::after{
  inset:5px; border:1px solid rgba(26,22,17,.10); z-index:3;
}
html[data-theme="gallery"] .art:hover .frame{
  transform:translateY(-5px); box-shadow:var(--shadow-lift); border-color:var(--gold-line);
}
html[data-theme="gallery"] .frame .mat{ background:var(--ink-3); }

html[data-theme="gallery"] .art-meta{
  padding:16px 2px 4px; align-items:flex-start; gap:14px;
}
html[data-theme="gallery"] .art-meta .t{
  font-size:16.5px; line-height:1.34; font-weight:500; color:var(--bone);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
html[data-theme="gallery"] .art-meta .c{
  font-family:var(--ui); font-size:14px; font-weight:600; letter-spacing:0;
  text-transform:none; color:var(--bone); white-space:nowrap;
}
html[data-theme="gallery"] .price-off{ color:#A63B22; font-weight:600; }
html[data-theme="gallery"] .price-old{ color:var(--muted); }

/* Rozetler — kâğıt etiket hissi */
html[data-theme="gallery"] .pbadge{
  background:#FFFCF6; color:var(--bone); border:1px solid var(--line);
  font-family:var(--ui); font-size:10px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; padding:5px 9px; border-radius:1px; box-shadow:none;
}
html[data-theme="gallery"] .pbadge.sale{ background:#A63B22; color:#FFF6F2; border-color:#A63B22; }
html[data-theme="gallery"] .pbadge.hot{ background:var(--gold); color:#FFF9EC; border-color:var(--gold); }
html[data-theme="gallery"] .pbadge.new{ background:#1A1611; color:#FBF7EF; border-color:#1A1611; }
html[data-theme="gallery"] .badge-ribbons{ top:18px; left:18px; gap:6px; }
@media (prefers-reduced-motion:no-preference){
  html[data-theme="gallery"] .badge-ribbons .pbadge.sale{ animation:none; }
}

/* Kart üzeri hızlı işlem katmanı */
html[data-theme="gallery"] .card-hover::after{
  background:linear-gradient(180deg,transparent,rgba(26,22,17,.42));
}
html[data-theme="gallery"] .cha-ico,
html[data-theme="gallery"] .cha-fav{
  background:rgba(255,252,246,.94); color:var(--bone);
  border:1px solid var(--line); backdrop-filter:blur(3px);
}
html[data-theme="gallery"] .cha-ico:hover{ background:var(--gold); color:#FFF9EC; border-color:var(--gold); }
html[data-theme="gallery"] .cha-fav.is-fav{ color:#A63B22; border-color:#A63B22; background:rgba(166,59,34,.10); }
html[data-theme="gallery"] .art .frame .art-hover{ display:none; }

/* Grid: daha nefes alan, e-ticaret standardı kolonlar */
html[data-theme="gallery"] .gallery{
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:clamp(18px,2.4vw,30px);
}

/* Kart yüklenirken kademeli beliriş — tek, düzenli bir hareket */
/* Kademeli beliriş — YALNIZCA JS çalışıyorsa (html.doa-js). Aksi halde
   `backwards` dolgu, gecikme süresince kartları opacity:0'da tutar ve JS
   çökerse görünmez kalırlar. Aynı güvenlik kuralı §18'deki .reveal ile aynı. */
@media (prefers-reduced-motion:no-preference){
  html.doa-js[data-theme="gallery"] .gallery > .art{ animation:doaCardIn .55s var(--ease) backwards; }
  html.doa-js[data-theme="gallery"] .gallery > .art:nth-child(1){animation-delay:.02s}
  html.doa-js[data-theme="gallery"] .gallery > .art:nth-child(2){animation-delay:.06s}
  html.doa-js[data-theme="gallery"] .gallery > .art:nth-child(3){animation-delay:.10s}
  html.doa-js[data-theme="gallery"] .gallery > .art:nth-child(4){animation-delay:.14s}
  html.doa-js[data-theme="gallery"] .gallery > .art:nth-child(5){animation-delay:.18s}
  html.doa-js[data-theme="gallery"] .gallery > .art:nth-child(6){animation-delay:.22s}
  html.doa-js[data-theme="gallery"] .gallery > .art:nth-child(7){animation-delay:.26s}
  html.doa-js[data-theme="gallery"] .gallery > .art:nth-child(8){animation-delay:.30s}
}
@keyframes doaCardIn{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

/* ---- 6) Bölümler & konteynerler ----------------------------------------- */
html[data-theme="gallery"] .section{ padding:clamp(44px,5.5vw,76px) 0; }
html[data-theme="gallery"] .section--tight{ padding:clamp(28px,3.5vw,46px) 0; }
html[data-theme="gallery"] .section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:clamp(22px,3vw,36px); flex-wrap:wrap;
}
html[data-theme="gallery"] .section-head h2{
  margin:8px 0 0; font-size:clamp(26px,3.4vw,40px); line-height:1.1;
}
html[data-theme="gallery"] .section-head .more{
  font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); border-bottom:1px solid var(--gold-line); padding-bottom:2px;
  white-space:nowrap;
}
html[data-theme="gallery"] .section-head .more:hover{ border-bottom-color:var(--gold); }

/* Marka süsleme motifi — Etsy banner'ındaki ◆✦◆ */
html[data-theme="gallery"] .doa-orn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  color:var(--gold-line); margin:0 auto;
}
html[data-theme="gallery"] .doa-orn::before,
html[data-theme="gallery"] .doa-orn::after{
  content:""; height:1px; width:min(120px,18vw); background:currentColor;
}

/* =========================================================================
   v22 YAPISAL DUZELTME - asagidaki 3 bolumun (7-8-9) ve 17. bolumun tema
   oneki KALDIRILDI.

   ONCEKI SORUN: ana sayfanin (.doa-hero/.doa-cats/.doa-cat) ve magaza
   sayfasinin (.doa-shop/.doa-side/.doa-catlist) TUM duzen kurallari yalnizca
   html[data-theme="gallery"] altinda tanimliydi ve site.css'te bu siniflarin
   HIC karsiligi yoktu (dogrulandi: site.css=0 esleme). upgrade_v10.sql:57
   site_theme ayarini "owl" olarak tohumladigi ve admin listesinde "gallery"
   secenegi bulunmadigi icin canli site owl ile ciziliyordu -> iki ana giris
   sayfasi IZGARASIZ, STILSIZ bloklar halinde akiyordu. Sitenin "sonuk"
   gorunmesinin yapisal nedeni buydu; renk paleti ikincil bir konuydu.

   NEDEN ONEK KALDIRMAK YETERLI: bu kurallar renklerini zaten var(--gold),
   var(--bone), var(--ink-2) gibi TEMA JETONLARINDAN aliyor ve o jetonlar her
   temada tanimli. Onek kalkinca kurallar aktif temanin jetonlariyla dogru
   renklenir. Boylece hicbir tema secimi sayfayi duzensiz birakamaz.

   Duzen yapisaldir, tema degildir. Yalnizca 1. bolum (jetonlar) tema-gecitli
   kalir - renk degisimi orada olur.
   ========================================================================= */
/* ---- 7) ANA SAYFA — hero ------------------------------------------------- */
.doa-hero{
  position:relative; display:grid; grid-template-columns:1.02fr .98fr;
  align-items:center; gap:clamp(26px,5vw,68px);
  padding:clamp(34px,5vw,68px) 0 clamp(30px,4.5vw,58px);
}
.doa-hero__copy h1{
  font-size:clamp(34px,5.4vw,64px); line-height:1.03; margin:14px 0 16px;
  letter-spacing:-.022em;
}
.doa-hero__copy h1 em{
  font-style:italic; color:var(--gold);
}
.doa-hero__lede{
  font-size:clamp(15.5px,1.5vw,18px); color:var(--bone-dim);
  max-width:46ch; margin:0 0 26px;
}
.doa-hero__cta{ display:flex; gap:12px; flex-wrap:wrap; }

/* Hero görseli: duvara asılı çerçeveli baskı */
.doa-hero__art{
  position:relative; background:#FFFCF6; padding:16px;
  border:1px solid var(--line); box-shadow:var(--shadow-lift);
}
.doa-hero__art::after{
  content:""; position:absolute; inset:9px; border:1px solid rgba(26,22,17,.12); pointer-events:none;
}
.doa-hero__art img{
  display:block; width:100%; height:auto; aspect-ratio:4/5;
  object-fit:cover; background:var(--ink-3);
}
.doa-hero__tag{
  position:absolute; right:-14px; bottom:22px; z-index:4;
  background:#1A1611; color:#FBF7EF; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; padding:9px 15px;
}
@media (prefers-reduced-motion:no-preference){
  html.doa-js .doa-hero__copy > *{ animation:doaUp .7s var(--ease) backwards; }
  html.doa-js .doa-hero__copy > *:nth-child(1){animation-delay:.05s}
  html.doa-js .doa-hero__copy > *:nth-child(2){animation-delay:.13s}
  html.doa-js .doa-hero__copy > *:nth-child(3){animation-delay:.21s}
  html.doa-js .doa-hero__copy > *:nth-child(4){animation-delay:.29s}
  html.doa-js .doa-hero__art{ animation:doaUp .85s var(--ease) .12s backwards; }
}
@keyframes doaUp{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none} }

@media (max-width:900px){
  .doa-hero{ grid-template-columns:1fr; gap:28px; }
  .doa-hero__art{ order:-1; max-width:420px; margin-inline:auto; }
  .doa-hero__tag{ right:10px; }
}

/* ---- 8) Kategori kartları (ana sayfa) ----------------------------------- */
.doa-cats{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:clamp(14px,1.8vw,22px);
}
.doa-cat{
  position:relative; display:block; overflow:hidden; background:var(--ink-3);
  border:1px solid var(--line); aspect-ratio:5/4;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.doa-cat:hover{ border-color:var(--gold-line); box-shadow:var(--shadow-card); }
.doa-cat img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--ease); filter:saturate(1.02);
}
.doa-cat:hover img{ transform:scale(1.05); }
/* Etiket zemini: eserin altındaki görsel AÇIK renkse beyaz yazı okunmaz kalır.
   Gradyanın alt ucu neredeyse opak yapıldı → görsel ne olursa olsun AA kontrast. */
.doa-cat__label{
  position:absolute; inset:auto 0 0 0; padding:18px 14px 12px; z-index:2;
  background:linear-gradient(180deg,rgba(20,16,12,0) 0%,rgba(20,16,12,.72) 42%,rgba(20,16,12,.94) 100%);
  color:#FBF7EF; display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.doa-cat__label b{
  /* Kart basligi 17px — didone icin en zorlu boyut. Agirlik 600, aralik
     hafif acik: kucuk puntoda ince cizgiler birbirine girmiyor. */
  font-family:var(--display); font-weight:600; font-size:17px; line-height:1.25; letter-spacing:.002em;
}
.doa-cat__label span{
  font-size:12px; color:#D8C9A6; letter-spacing:.06em; flex:0 0 auto;
}
.doa-cat--empty{
  display:flex; align-items:center; justify-content:center;
  background:var(--ink-2); color:var(--muted); font-size:34px;
}

/* ---- 9) LİSTELEME — masaüstü sol menü / mobil açılır panel --------------- */
.doa-shop{
  display:grid; grid-template-columns:236px 1fr; gap:clamp(22px,3vw,44px);
  align-items:start;
}
.doa-side{
  position:sticky; top:96px; align-self:start;
  border-right:1px solid var(--line-2); padding-right:20px;
}
.doa-side h3{
  font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); margin:0 0 12px;
}
.doa-side + .doa-side{ margin-top:26px; }
.doa-side__block{ margin-bottom:28px; }
.doa-catlist{ list-style:none; margin:0; padding:0; }
.doa-catlist a{
  display:flex; justify-content:space-between; gap:10px; align-items:baseline;
  padding:7px 0; font-size:14.5px; color:var(--bone-dim);
  border-bottom:1px solid transparent; transition:.18s;
}
.doa-catlist a:hover{ color:var(--bone); }
.doa-catlist a.is-on{ color:var(--gold); font-weight:600; }
.doa-catlist a span{ font-size:12.5px; color:var(--muted); flex:0 0 auto; }

.doa-filters{
  background:transparent; border:none; padding:0; gap:18px;
}
.doa-filter-row{ flex-direction:column; align-items:stretch; gap:9px; }
.doa-filter-lab{
  min-width:0; font-size:11px; letter-spacing:.18em; color:var(--gold); margin-bottom:2px;
}
.doa-filters input[type=number],
.doa-filters select{
  background:#FFFCF6; border:1px solid var(--line); color:var(--bone);
  padding:9px 11px; font-size:14px; border-radius:2px; width:100%; min-width:0;
}
.doa-filters select:focus,
.doa-filters input:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(138,101,32,.12);
}
.doa-price-row{ flex-direction:row; align-items:center; gap:8px; }
.doa-price-row input{ flex:1; }
.doa-filter-check{ color:var(--bone-dim); font-size:14px; }
.doa-color{ box-shadow:0 0 0 1px rgba(26,22,17,.16) inset; }
.doa-color.is-on{ border-color:var(--gold); }
.doa-filter-actions{ justify-content:flex-start; }

/* Liste üstü araç çubuğu */
.shop-bar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:0 0 18px; margin-bottom:22px; border-bottom:1px solid var(--line-2);
  flex-wrap:wrap;
}
.shop-count{
  font-family:var(--ui); font-size:13.5px; color:var(--muted); letter-spacing:.04em;
}
.shop-sort label{ color:var(--muted); font-size:13.5px; }
.shop-sort select{
  background:#FFFCF6; border:1px solid var(--line); color:var(--bone);
  padding:8px 11px; font-size:14px; border-radius:2px;
}
.doa-filter-toggle{ display:none; }

/* Mobil: sol menü → üstte açılır panel */
@media (max-width:900px){
  .doa-shop{ grid-template-columns:1fr; gap:0; }
  .doa-side{
    position:static; border-right:none; padding-right:0;
    border:1px solid var(--line); border-radius:3px; padding:18px; margin-bottom:20px;
    background:var(--ink-2);
  }
  .doa-side[hidden]{ display:none; }
  .doa-filter-toggle{ display:inline-flex; align-items:center; gap:7px; }
  .doa-filter-row{ flex-direction:row; flex-wrap:wrap; align-items:center; }
  .doa-filter-lab{ min-width:100%; }
  .doa-catlist{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:0 16px;
  }
}

/* ---- 10) Kategori başlığı ------------------------------------------------ */
html[data-theme="gallery"] .cat-hero{
  background:var(--ink-2); border:1px solid var(--line); border-radius:3px;
  padding:clamp(26px,4vw,46px); margin-bottom:clamp(24px,3vw,38px);
  position:relative; overflow:hidden;
}
html[data-theme="gallery"] .cat-hero.has-bg::before{
  content:""; position:absolute; inset:0; background-image:var(--cat-bg);
  background-size:cover; background-position:center; opacity:.13; filter:saturate(.9);
}
html[data-theme="gallery"] .cat-hero__inner{ position:relative; z-index:2; max-width:62ch; }
html[data-theme="gallery"] .cat-hero__title{
  font-size:clamp(28px,4vw,46px); margin:10px 0 10px; line-height:1.06;
}
html[data-theme="gallery"] .cat-hero__desc{ color:var(--bone-dim); margin:0; font-size:16px; }
html[data-theme="gallery"] .cat-hero__art{ display:none; }

html[data-theme="gallery"] .crumb{ color:var(--muted); font-size:13px; }
html[data-theme="gallery"] .crumb a{ color:var(--muted); }
html[data-theme="gallery"] .crumb a:hover{ color:var(--gold); }

/* ---- 11) ÜRÜN SAYFASI ---------------------------------------------------- */
html[data-theme="gallery"] .p-main.frame{
  background:#FFFCF6; padding:clamp(14px,2vw,22px);
  border:1px solid var(--line); box-shadow:var(--shadow-lift);
}
html[data-theme="gallery"] .p-main .mat{ background:var(--ink-3); }
html[data-theme="gallery"] .p-thumb{ background:#FFFCF6; border:1px solid var(--line); }
html[data-theme="gallery"] .p-thumb.active,
html[data-theme="gallery"] .p-thumb:hover{ border-color:var(--gold); }
html[data-theme="gallery"] .p-cat{ color:var(--gold); letter-spacing:.22em; }
html[data-theme="gallery"] .p-title{ font-size:clamp(26px,3.6vw,42px); line-height:1.08; }
html[data-theme="gallery"] .p-price{ color:var(--bone); font-family:var(--ui); font-weight:600; }
html[data-theme="gallery"] .p-trust li{ color:var(--bone-dim); }
html[data-theme="gallery"] .p-trust .tick{ color:var(--gold); }

html[data-theme="gallery"] .doa-badge{
  background:var(--ink-2); border:1px solid var(--line); color:var(--bone-dim);
}
html[data-theme="gallery"] .doa-badge svg{ color:var(--gold); }
html[data-theme="gallery"] .doa-urgency{
  background:rgba(138,101,32,.09); border:1px solid var(--gold-line); color:#6E5018;
}
html[data-theme="gallery"] .doa-urgency .dot{ background:#3F6B32; }

html[data-theme="gallery"] .p-share a,
html[data-theme="gallery"] .p-share button{
  color:var(--muted); border:1px solid var(--line); background:transparent;
}
html[data-theme="gallery"] .p-share a:hover,
html[data-theme="gallery"] .p-share button:hover{ color:var(--gold); border-color:var(--gold-line); }

/* ---- 12) Formlar, kartlar, tablolar ------------------------------------- */
html[data-theme="gallery"] .card,
html[data-theme="gallery"] .checkout-card,
html[data-theme="gallery"] .table-wrap{
  background:#FFFCF6; border:1px solid var(--line); box-shadow:var(--shadow-card);
}
html[data-theme="gallery"] input[type=text],
html[data-theme="gallery"] input[type=email],
html[data-theme="gallery"] input[type=password],
html[data-theme="gallery"] input[type=number],
html[data-theme="gallery"] input[type=tel],
html[data-theme="gallery"] textarea,
html[data-theme="gallery"] select{
  background:#FFFCF6; border:1px solid var(--line); color:var(--bone);
  border-radius:2px; font-family:var(--ui);
}
html[data-theme="gallery"] input:focus,
html[data-theme="gallery"] textarea:focus,
html[data-theme="gallery"] select:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(138,101,32,.12);
}
html[data-theme="gallery"] ::placeholder{ color:var(--muted); }

html[data-theme="gallery"] .flash-public--success{
  background:rgba(63,107,50,.10); border:1px solid rgba(63,107,50,.32); color:#2E5225;
}
html[data-theme="gallery"] .flash-public--error{
  background:rgba(166,59,34,.09); border:1px solid rgba(166,59,34,.32); color:#8C3119;
}

/* SSS akordeon */
html[data-theme="gallery"] details.faq-item,
html[data-theme="gallery"] .faq-item{
  background:#FFFCF6; border:1px solid var(--line); border-radius:2px;
}
html[data-theme="gallery"] summary{ color:var(--bone); }

/* ---- 13) Footer ---------------------------------------------------------- */
html[data-theme="gallery"] .site-footer{
  background:#171310; color:#CFC4AE; border-top:none; margin-top:clamp(40px,6vw,84px);
}
html[data-theme="gallery"] .site-footer h4,
html[data-theme="gallery"] .site-footer strong{ color:#F2EADA; font-family:var(--display); font-weight:500; }
/* v28: bulten basligi (h3) bu listede YOKTU. Temanin genel h3 kurali onu
   --bone'a (#1A1611, koyu) cekiyordu; footer zemini de koyu (#171310) —
   olculen kontrast 1.03, yani "Atolye listesine katil" tamamen okunmazdi.
   Kicker da genel altin tonuyla 3.49'da kaliyordu; koyu zeminde parlak
   altin (#D8B65E) kullaniliyor -> ~7:1. */
html[data-theme="gallery"] .site-footer h3{ color:#F2EADA; }
html[data-theme="gallery"] .site-footer .kicker{ color:#D8B65E; }
html[data-theme="gallery"] .site-footer a{ color:#CFC4AE; }
html[data-theme="gallery"] .site-footer a:hover{ color:#D8B65E; }
html[data-theme="gallery"] .site-footer input{
  background:#221C16; border:1px solid rgba(242,234,218,.16); color:#F2EADA;
}
html[data-theme="gallery"] .foot-bottom{ border-top:1px solid rgba(242,234,218,.12); color:#9A8F7C; }

/* ---- 14) Mobil menü ------------------------------------------------------ */
html[data-theme="gallery"] .mobile-nav{ background:#FBF7EF; border-left:1px solid var(--line); }
html[data-theme="gallery"] .mobile-nav a{ color:var(--bone); border-bottom:1px solid var(--line-2); }
html[data-theme="gallery"] .mobile-nav a:hover{ color:var(--gold); }
html[data-theme="gallery"] .m-close{ color:var(--bone); }
html[data-theme="gallery"] .scrim{ background:rgba(26,22,17,.42); }

/* ---- 15) Erişilebilirlik ------------------------------------------------- */
html[data-theme="gallery"] a:focus-visible,
html[data-theme="gallery"] button:focus-visible,
html[data-theme="gallery"] [tabindex]:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:2px;
}
html[data-theme="gallery"] ::selection{ background:rgba(138,101,32,.22); color:var(--bone); }

/* Karşılama perdesi / dekoratif koyu tema artıkları — açık temada gereksiz */
html[data-theme="gallery"] #doaWelcome,
html[data-theme="gallery"] .doa-curtain{ display:none !important; }

/* Klavye kullanıcıları için "içeriğe geç" bağlantısı */
.doa-skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:#1A1611; color:#FBF7EF; padding:12px 18px; font-size:14px;
}
.doa-skip:focus{ left:12px; top:12px; }


/* ---- 16) Header düzeni — sıkışmayı önle ---------------------------------- */
html[data-theme="gallery"] .nav{ gap:clamp(14px,2vw,30px); }
html[data-theme="gallery"] .brand{ flex:0 0 auto; white-space:nowrap; }
html[data-theme="gallery"] .brand-logo{ max-height:46px; width:auto; }
html[data-theme="gallery"] .brand .glyph{ color:var(--gold); font-size:22px; }
html[data-theme="gallery"] .brand b{ font-family:var(--display); font-weight:600; letter-spacing:.01em; }
html[data-theme="gallery"] .brand .sub{ color:var(--gold); font-family:var(--display); }
html[data-theme="gallery"] .nav-links{ gap:clamp(12px,1.6vw,26px); flex:0 0 auto; }
html[data-theme="gallery"] .nav-links a{ font-size:14.5px; white-space:nowrap; }
html[data-theme="gallery"] .nav-right{ gap:clamp(8px,1.1vw,16px); flex:0 0 auto; }
html[data-theme="gallery"] .nav-account{ white-space:nowrap; font-size:14px; }
/* v26: `.search-box input{width:clamp(130px,14vw,210px)}` KALDIRILDI.
   Bu satir, site.css'teki v24 daraltma duzeltmesini daha yuksek ozgullukle
   eziyordu — yani kullanicinin gordugu kutu her zaman 210px kaldi ve
   "duzelttim" dedigim sey hic devreye girmedi. Arama artik ikon oldugu icin
   genislik kurali gereksiz.
   Sosyal ikonlarin gizlenme esigi ARTIK BURADA DEGIL: tek kaynak site.css
   (@media max-width:1180px). Ayni kurali iki dosyada tutmak, bu turda
   duzelttigimiz hatanin ta kendisiydi - tema dosyasi sonra yuklendigi ve daha
   yuksek ozgullukte oldugu icin site.css'teki duzeltmeyi sessizce eziyordu. */
@media (max-width:1040px){
  html[data-theme="gallery"] .nav-right .btn--gold{ display:none; }
}

/* ---- 17) Hero yoğunluğu — ilk ekranda ürünler görünsün ------------------- */
/* Test: hero tek başına viewport'un tamamını yiyordu; ziyaretçi ilk ekranda
   hiç ürün görmüyordu. Dikey ritim sıkıştırıldı, görsel oranı 4/5 → 1/1. */
.doa-hero{
  padding:clamp(20px,3vw,40px) 0 clamp(18px,2.5vw,34px);
  gap:clamp(24px,4vw,56px);
  align-items:center;
}
.doa-hero__art img{ aspect-ratio:1/1; }
.doa-hero__art{ max-width:480px; margin-left:auto; padding:12px; }
.doa-hero__copy h1{
  font-size:clamp(32px,4.6vw,56px); margin:12px 0 14px;
}
.doa-hero__lede{ margin-bottom:22px; font-size:clamp(15px,1.35vw,17px); }
.section{ padding:clamp(34px,4vw,58px) 0; }
.section--tight{ padding:clamp(18px,2.4vw,32px) 0; }
.section-head{ margin-bottom:clamp(18px,2.2vw,28px); }

/* Kategori kartları biraz daha kompakt → daha çoğu ilk ekranda */
.doa-cats{ grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); }
.doa-cat{ aspect-ratio:1/1; }

/* Güven şeridi tek satıra insin */
.doa-badges{ gap:8px; }
.doa-badge{ padding:8px 12px; font-size:12px; }

@media (max-width:900px){
  .doa-hero__art{ max-width:360px; margin-inline:auto; }
}


/* ---- 18) GÜVENLİ "reveal" — JS çökse bile ürünler görünür ---------------- */
/*
 * ÖNCEKİ RİSK: site.css'te `.reveal{opacity:0}` sabitti ve görünürlük tamamen
 * site.js'in IntersectionObserver'ına bağlıydı. O dosya yüklenmezse / JS hata
 * verirse KATALOĞUN TAMAMI görünmez oluyordu — sayfa "boş" görünüyordu.
 * (Yerel testte tam sayfa ekran görüntüsünde bire bir gözlemlendi.)
 *
 * ÇÖZÜM: varsayılan görünür. Gizleme yalnızca <html class="doa-js"> varken —
 * o sınıfı head'deki minik satır içi betik ekliyor. JS yoksa/çökerse sınıf hiç
 * eklenmez ve içerik olduğu gibi görünür (aşamalı geliştirme).
 */
.reveal{ opacity:1 !important; transform:none !important; }
html.doa-js .reveal{
  opacity:0 !important; transform:translateY(22px) !important;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
html.doa-js .reveal.in{ opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion:reduce){
  html.doa-js .reveal{ opacity:1 !important; transform:none !important; }
}

/* ---- 19) Koyu tema artıklarını kapat ------------------------------------ */
/*
 * `#p-immersive` ürün görselini tam ekran, koyu bir atmosfer katmanı olarak
 * basıyordu (koyu tema için tasarlanmıştı). Açık temada ürün sayfasının sağ
 * sütununu okunamaz hale getiriyordu — yerel testte doğrulandı.
 * Açık temada eser zaten çerçevesiyle öne çıkıyor; atmosfer katmanına gerek yok.
 */
html[data-theme="gallery"] #p-immersive{ display:none !important; }

/* Aynı mantıkla: koyu zemin varsayan diğer tam ekran katmanlar */
html[data-theme="gallery"] .slide-bg::after,
html[data-theme="gallery"] .hero-video__overlay{ background:rgba(250,246,238,.55) !important; }

/* Ürün sayfası sağ sütun okunabilirliği */
html[data-theme="gallery"] .p-info,
html[data-theme="gallery"] .product > div:last-child{ position:relative; z-index:2; }
html[data-theme="gallery"] .p-desc,
html[data-theme="gallery"] .p-meta,
html[data-theme="gallery"] .p-ratios span{ color:var(--bone-dim); }
html[data-theme="gallery"] .p-ratios span{
  background:var(--ink-2); border:1px solid var(--line); color:var(--bone);
}
html[data-theme="gallery"] .p-sub,
html[data-theme="gallery"] .p-price small{ color:var(--muted); }

/* ---- 20) Yatay taşma düzeltmesi ----------------------------------------- */
/*
 * İki kaynak vardı (yerel testte ölçüldü, scrollWidth 1407 > viewport 1400):
 *  a) .nav-right flex öğeleri küçülmediği için header konteynerini 7px aşıyordu
 *  b) .mobile-nav ekran dışında park ediyor; site.css yalnız body'ye
 *     overflow-x:hidden veriyordu, <html> ölçümü yine taşma gösteriyordu
 *     (mobilde sağa kaydırılabilen "hayalet" alan).
 */
html{ overflow-x:clip; }
html[data-theme="gallery"] .nav{ min-width:0; flex-wrap:nowrap; }
html[data-theme="gallery"] .nav-links,
html[data-theme="gallery"] .nav-right{ min-width:0; }
html[data-theme="gallery"] .nav-right > *{ flex:0 0 auto; }
html[data-theme="gallery"] .nav-right .btn--gold{
  padding-inline:clamp(12px,1.4vw,20px); font-size:11.5px; letter-spacing:.08em;
}
/* Mobil menü panelini taşma hesabından çıkar */
html[data-theme="gallery"] .mobile-nav{ contain:layout paint; }

/* ==========================================================================
   v22 — GUVENLIK AGI: site.js yuklenemezse de icerik gorunur
   --------------------------------------------------------------------------
   inc/header.php'deki satir ici script `doa-js` ekledikten 2,5 sn sonra
   `doa-reveal-safe` de ekler. site.js gorevini yaptiysa kartlar zaten
   gorunurdur ve bu kural hicbir seyi degistirmez. site.js YUKLENEMEDIYSE
   (404 / ag / CSP / eklenti) bu kural tum katalogu kurtarir.

   v21 yalnizca "JS tamamen kapali" senaryosunu cozmustu; satir ici script her
   zaman calistigi icin "JS acik ama site.js yok" senaryosunda tum urun kartlari
   opacity:0'da kaliyordu - yani site bombos gorunuyordu.
   ========================================================================== */
html.doa-reveal-safe .reveal{
  opacity:1 !important;
  transform:none !important;
}