/* ============================================================
   BUTİK TEMA — sıcak boutique florist görünüm katmanı
   Klasik temanın JS/DOM iskeletini korur; sadece görünümü değiştirir.
   Kapsam: body.theme-butik altındaki her şey.
   ============================================================ */

/* ---------- Display fontu: Fraunces (kendi host, /fonts) ---------- */
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/fraunces-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/fraunces-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/fraunces-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/fraunces-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Üst güven/teslimat şeridi ---------- */
.theme-butik .butik-topbar{
  background:linear-gradient(90deg,rgb(var(--brand-dark)),rgb(var(--brand)));
  color:#fff;font-family:var(--body);
}
.theme-butik .butik-topbar-inner{
  max-width:1400px;margin:0 auto;padding:7px 24px;
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:12.5px;font-weight:700;letter-spacing:.03em;
}
.theme-butik .butik-topbar .ann{display:inline-flex;align-items:center;gap:6px}
.theme-butik .butik-topbar .ann svg{opacity:.9}
.theme-butik .butik-topbar .sep{opacity:.55}
@media(max-width:640px){
  .theme-butik .butik-topbar-inner{gap:10px;font-size:11px;padding:6px 14px}
  .theme-butik .butik-topbar .sep:last-of-type,
  .theme-butik .butik-topbar .ann:last-of-type{display:none} /* mobilde 2 madde yeter */
}

/* ---------- Tasarım simgeleri (body'ye — :root'u ezmek için yüksek özgüllük) ---------- */
body.theme-butik{
  /* Marka rengi Ayarlar → Renk seçiminden gelir (Theme.php :root{--brand}).
     Butik aktifken renk seçilmemişse varsayılan gül kurusu #be6c74 uygulanır.
     Sabit değer YOK → butonlar/vurgular panelden değiştirilebilir. */

  --paper:#FFFAF0;            /* sayfa/body zemini (floralwhite) */
  --paper-dark:#F8F3E9;       /* menü şeridi: seçilen rengin hafif koyusu */
  --menu-line:rgba(203,213,225,.6); /* header/nav alt border = menüler arası ayraç rengi (divide-slate-300/60) */
  --card:#FFFDF9;             /* kart/başlık yüzeyi */
  --ink:#3A322E;             /* ana metin (koyu sıcak kahve) */
  --ink-2:#6E625A;           /* ikincil metin */
  --ink-3:#9C8C80;           /* soluk metin */
  --line:#EAD9C4;            /* sıcak kenarlık */
  --line-2:#F2E7D8;          /* açık kenarlık */
  --blush:#F5E4E2;           /* rozet/etiket zemini */
  --sage:#7E8B6A;            /* dekoratif adaçayı yeşili */
  --cream-2:#F3E9DB;         /* ikincil krem */

  --r-sm:12px; --r:12px; --r-lg:12px; --r-card:12px;  /* klasik gibi 0.75rem (12px) */
  --shadow-sm:0 2px 10px rgba(120,86,64,.06);
  --shadow:0 14px 34px -16px rgba(120,86,64,.22);
  --shadow-lg:0 26px 60px -22px rgba(120,86,64,.30);

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Nunito',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
}

/* Sayfa atmosferi: üstte yumuşak sıcak ışık + hafif çiçek dokusu */
body.theme-butik{
  background-image:
    radial-gradient(1200px 460px at 80% -8%, rgba(190,108,116,.10), transparent 60%),
    radial-gradient(1000px 420px at 0% 2%, rgba(126,139,106,.09), transparent 55%);
  background-attachment:fixed;
}

.theme-butik ::selection{background:rgba(190,108,116,.22);color:var(--ink)}

/* ---------- Baskın Tailwind sınıflarını butik paletine çevir ---------- */
.theme-butik .bg-white{background-color:var(--card)!important}
.theme-butik .text-slate-900,
.theme-butik .text-slate-800,
.theme-butik .text-slate-700{color:var(--ink)!important}
.theme-butik .text-slate-600,
.theme-butik .text-slate-500{color:var(--ink-2)!important}
.theme-butik .text-slate-400,
.theme-butik .placeholder-slate-400::placeholder{color:var(--ink-3)!important}
.theme-butik .border-slate-200,
.theme-butik .border-slate-100{border-color:var(--line)!important}
.theme-butik .bg-slate-50{background-color:var(--cream-2)!important}
.theme-butik .bg-slate-100{background-color:#ECDFCC!important}

/* Mavi hover/vurgu kalıntılarını sıcak tona çevir */
.theme-butik .hover\:bg-blue-700:hover{background-color:rgb(var(--brand-dark))!important}
.theme-butik .hover\:bg-blue-50:hover,
.theme-butik .hover\:text-brand:hover{ }
.theme-butik .hover\:bg-blue-50:hover{background-color:var(--blush)!important}
.theme-butik .bg-blue-50{background-color:var(--blush)!important}

/* Yumuşak, sıcak gölgeler */
.theme-butik .shadow,.theme-butik .shadow-md{box-shadow:var(--shadow)!important}
.theme-butik .shadow-lg,.theme-butik .shadow-2xl,.theme-butik .shadow-xl{box-shadow:var(--shadow-lg)!important}
.theme-butik .shadow-sm{box-shadow:var(--shadow-sm)!important}

/* Daha yumuşak köşeler (butik) */
.theme-butik .rounded-lg{border-radius:var(--r-sm)!important}
.theme-butik .rounded-xl{border-radius:var(--r)!important}
.theme-butik .rounded-2xl{border-radius:var(--r-lg)!important}

/* ---------- Tipografi: display başlıklar Fraunces ---------- */
.theme-butik h1,.theme-butik h2{font-family:var(--display);letter-spacing:-.01em}
.theme-butik .font-extrabold,.theme-butik .font-bold{font-weight:700}

/* ============================================================
   HEADER + NAV
   ============================================================ */
/* header.bg-white (0,2,1) → .theme-butik .bg-white (0,2,0) kuralını geçer */
/* Butik arkaplan rengi seçenekleri — Tema Yönetimi → "Butik arkaplan rengi".
   Body'ye butikbg-<ad> sınıfı StorefrontTheme middleware ile eklenir. */
body.theme-butik.butikbg-floralwhite{--paper:#FFFAF0;--paper-dark:#F8F3E9}
body.theme-butik.butikbg-ghostwhite{--paper:#F8F8FF;--paper-dark:#F1F1F8}
body.theme-butik.butikbg-ivory{--paper:#FFFFF0;--paper-dark:#F8F8E9}
body.theme-butik.butikbg-mintcream{--paper:#F5FFFA;--paper-dark:#EEF8F3}
body.theme-butik.butikbg-whitesmoke{--paper:#F5F5F5;--paper-dark:#EEEEEE}

.theme-butik header,
.theme-butik header.bg-white{
  background:var(--paper)!important;                 /* logo satırı: seçilen renk (koyu DEĞİL) */
  border-bottom:0!important;                         /* menü bandının üstünde çizgi olmasın */
}
/* Sipariş Asistanı butonu yazısı ince olsun (butik) */
.theme-butik .aio-hdr-btn,
.theme-butik .aio-hdr-btn span{font-weight:400!important}
.theme-butik #mainNav{
  background:var(--paper-dark)!important;                         /* fallback: seçilen rengin koyusu (düz) */
  background:rgb(from var(--paper-dark) r g b / .92)!important;    /* modern: %92 saydam cam efekti, koyu ton */
  border-top:1px solid var(--line)!important;      /* menü alanının üstünde 1px — alt menü (mega) border rengi */
  border-bottom:1px solid var(--line)!important;   /* alt 1px de aynı renk (inline slate rengini geçer) */
  backdrop-filter:saturate(1.1) blur(6px);
}
/* Header ikon düğmeleri: yumuşak yuvarlak, sıcak kenarlık */
.theme-butik header button[aria-label],
.theme-butik #navExtras button{
  border-radius:12px;
}
.theme-butik header .border-slate-200:hover,
.theme-butik #navSearch:focus-within{border-color:rgb(var(--brand))!important}

/* Ana menü (JS ile #mainMenu'ye basılır) — sıcak, hafif harf aralığı */
.theme-butik #mainMenu>li>a{
  font-family:var(--body);font-weight:400;letter-spacing:.01em;color:var(--ink)!important;
  border-radius:10px;transition:none;
}
/* Header menüde hover efekti yok — renk/zemin değişmez */
.theme-butik #mainMenu a:hover,.theme-butik #mainMenu a:focus{color:var(--ink)!important;background:transparent!important}
/* Menüler arası ayraç rengi = üst border (mega dropdown) rengi = var(--line).
   app.css'teki #mainMenu>.menu-item.border-l (1,2,0)!important kuralını geçmek için
   .theme-butik ekiyle (1,3,0) spesifiklik. */
.theme-butik #mainMenu>.menu-item.border-l{border-left-color:var(--line)!important}

/* Logo çiçeği zaten text-brand → gül kurusu olur */

/* ============================================================
   HERO + PROMO
   ============================================================ */
.theme-butik #heroSlider{
  border:1px solid var(--line);
  box-shadow:none!important;
  background:linear-gradient(135deg,#FBEBD9,#F6E2E0)!important;
}
.theme-butik .hero-slide h2{font-family:var(--display)!important;letter-spacing:-.01em}
/* Sağ tanıtım kutuları: mavi zemin yerine sıcak krem/blush */
.theme-butik .promo-blue{
  background:linear-gradient(150deg,#FBF0E4,#F6E4E2)!important;
  border:1px solid var(--line);
}
.theme-butik .promo-blue:hover{background:linear-gradient(150deg,#F8E9D9,#F1D9D6)!important}

/* Hero ok düğmeleri */
.theme-butik #heroPrev,.theme-butik #heroNext{background:rgba(255,255,255,.85)!important;color:rgb(var(--brand-dark))!important}

/* Kampanya slider hero düğmesi vs. otomatik gül kurusu (bg-brand) */

/* ============================================================
   STORY (kategori halkaları)
   ============================================================ */
.theme-butik .story-ring,.theme-butik .story-ring img{background:transparent!important}
.theme-butik .story-strip a p,.theme-butik .story-strip a span{color:var(--ink-2)!important}

/* ============================================================
   BÖLÜM BAŞLIĞI (butik: ortalı, sprig süslü) — blade'de .butik-intro
   ============================================================ */
.theme-butik .butik-intro{text-align:center;width:100%;max-width:640px;margin:0 auto 26px}
body.theme-butik{overflow-x:clip}
.theme-butik .butik-intro .eyebrow{
  font-family:var(--body);font-weight:800;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:rgb(var(--brand));display:inline-block;margin-bottom:8px;
}
.theme-butik .butik-intro h2{
  font-family:var(--display);font-weight:600;color:var(--ink);
  font-size:clamp(22px,5.6vw,40px);line-height:1.12;margin:0;
  white-space:normal;overflow-wrap:break-word;
}
.theme-butik .butik-intro p{color:var(--ink-2);margin:.6rem auto 0;font-size:15px;max-width:520px;padding:0 4px}
@media(max-width:640px){
  .theme-butik .butik-intro{overflow-x:clip}
  .theme-butik .butik-intro h2{font-size:26px}
  .theme-butik .butik-intro p{font-size:14px}
}
/* çift yapraklı ayraç */
.theme-butik .butik-sprig{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px;color:var(--sage)}
.theme-butik .butik-sprig::before,.theme-butik .butik-sprig::after{content:"";height:1px;width:56px;background:linear-gradient(90deg,transparent,var(--line))}
.theme-butik .butik-sprig::after{background:linear-gradient(90deg,var(--line),transparent)}

/* ============================================================
   ÜRÜN GRID + KARTLAR (klasik #grid > div yapısını yeniden stiller)
   ============================================================ */
/* Butik: masaüstünde 5 sütun (klasik gibi), sık yerleşim */
.theme-butik #grid{gap:10px!important}
@media(min-width:1024px){
  .theme-butik #grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px!important}
}
.theme-butik #grid>div{
  background:var(--card)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--r-card)!important;
  box-shadow:var(--shadow-sm);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .35s;
  overflow:hidden;
}
.theme-butik #grid>div:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow);
  border-color:rgba(190,108,116,.5)!important;
}
/* Görsel alanı: sıcak krem zemin */
.theme-butik #grid>div .aspect-square{background:linear-gradient(180deg,#FBF3E9,#F5E9DC)!important}
/* Ürün adı */
.theme-butik #grid>div h3{
  font-family:var(--body)!important;font-weight:700;color:var(--ink)!important;font-size:14.5px;
}
.theme-butik #grid>div h3:hover{color:rgb(var(--brand))!important}
/* Fiyat: display serif, koyu */
.theme-butik #grid>div .text-slate-900.font-extrabold{
  font-family:var(--display)!important;font-weight:600;color:var(--ink)!important;font-size:1.35rem;letter-spacing:-.01em;
}
/* Ürün kodu rozeti (bg-brand → gül kurusu otomatik), yumuşat */
.theme-butik #grid>div .bg-brand{border-radius:8px}
/* Favori düğmesi */
.theme-butik .fav-toggle{background:rgba(255,253,249,.92)!important;box-shadow:var(--shadow-sm)}
.theme-butik .fav-toggle svg{fill:none;stroke:rgb(var(--brand));stroke-width:2}
.theme-butik .fav-toggle.is-fav svg,.theme-butik .fav-toggle[data-on="1"] svg{fill:rgb(var(--brand))}
/* Butonlar: Hızlı Sipariş (dolu gül kurusu) + İncele (çerçeve) */
.theme-butik .buy-btn{border-radius:12px;letter-spacing:.01em;box-shadow:0 6px 16px -8px rgba(150,74,84,.6)}
.theme-butik .view-btn{border-radius:12px}
.theme-butik .view-btn.border-brand{border-color:rgba(190,108,116,.55)!important;color:rgb(var(--brand-dark))!important}
.theme-butik .view-btn.border-brand:hover{background:var(--blush)!important}

/* ============================================================
   SEO METNİ + SSS
   ============================================================ */
.theme-butik .seo-body h2,.theme-butik .seo-body h3{font-family:var(--display);color:var(--ink)}
.theme-butik details summary{font-family:var(--body)}
.theme-butik details.open\:border-brand\/40[open]{border-color:rgba(190,108,116,.4)!important}
.theme-butik section h2.text-2xl,.theme-butik section h2.lg\:text-\[28px\]{
  font-family:var(--display)!important;font-weight:600;color:var(--ink)!important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.theme-butik footer{
  background:linear-gradient(180deg,#F3E7D6,#EFE0CC)!important;
  border-top:1px solid var(--line);
  color:var(--ink-2);
}
.theme-butik footer h3,.theme-butik footer h4,.theme-butik footer .font-extrabold{font-family:var(--display);color:var(--ink)}
.theme-butik footer a:hover{color:rgb(var(--brand))!important}

/* ============================================================
   MODAL / DRAWER — sıcak yüzey (yardımcı sınıf ezmeleri çoğunu halleder)
   ============================================================ */
.theme-butik #cartModal,.theme-butik #favModal,.theme-butik #searchModal,
.theme-butik #trackModal .bg-white,.theme-butik #loginModal .bg-white,
.theme-butik #langModal .bg-white,.theme-butik #viewModal .bg-white{background:var(--card)!important}
.theme-butik .accent-brand{accent-color:rgb(var(--brand))}

/* İnce dokunuş: primary düğmelerde geçiş */
.theme-butik .bg-brand{transition:background .25s,box-shadow .25s,transform .1s}
.theme-butik .bg-brand:active{transform:translateY(1px)}