/* Ceylan Butik — vitrin tasarım sistemi. Tüm mağaza sayfaları bu dosyayı
   paylaşır; marka rengi (--accent) sayfanın <head>'inde superadmin ayarından
   küçük bir inline <style> ile ezilir (bkz. resources/views/storefront/_theme.blade.php). */

:root{
  --bg:#E9E2D1;
  --surface:#FBF8F1;
  --surface-2:#F1EADA;
  --ink:#2A2318;
  --ink-soft:#4C4230;
  --muted:#6C6151;
  --line:#DBD1B9;
  --accent:#9C3B2B;
  --accent-soft: color-mix(in srgb, var(--accent) 20%, var(--surface));
  --accent-ink:#FBF3EE;
  --accent-2:#33504A;
  --shadow: 0 1px 2px rgba(42,35,24,.06), 0 10px 30px -12px rgba(42,35,24,.22);
  --radius: 8px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#221C14; --surface:#2B241A; --surface-2:#332B1F;
    --ink:#F1E9D8; --ink-soft:#D2C6AC; --muted:#A2957B;
    --line:#3C3324; --accent-soft: color-mix(in srgb, var(--accent) 26%, var(--surface)); --accent-ink:#FBF3EE;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 14px 34px -14px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#221C14; --surface:#2B241A; --surface-2:#332B1F;
  --ink:#F1E9D8; --ink-soft:#D2C6AC; --muted:#A2957B;
  --line:#3C3324; --accent-soft: color-mix(in srgb, var(--accent) 26%, var(--surface)); --accent-ink:#FBF3EE;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 14px 34px -14px rgba(0,0,0,.55);
  color-scheme: dark;
}

/* ---------- reset & base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Work Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;height:auto}
::selection{ background:var(--accent); color:var(--accent-ink); }
.serif{ font-family:'Fraunces', Georgia, 'Times New Roman', serif; }
h1,h2,h3{ text-wrap:balance; margin:0; }
.num{ font-variant-numeric:tabular-nums; }
.wrap{ width:min(1180px, 100% - 40px); margin-inline:auto; }
.wrap-narrow{ width:min(900px, 100% - 40px); margin-inline:auto; }
.eyebrow{ font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }

/* ---------- buttons & form controls ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 22px; border-radius:3px;
  background:var(--ink); color:var(--surface); text-decoration:none; font-size:12.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; border:1px solid var(--ink); cursor:pointer;
  transition:transform .2s, background .2s, border-color .2s, color .2s;
}
.btn:hover{ transform:translateY(-2px); background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn.ghost:hover{ color:var(--accent-ink); }
.btn.accent{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn.accent:hover{ background:var(--ink); border-color:var(--ink); }
.btn.small{ padding:10px 16px; font-size:11px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

label.field-label{ display:block; margin:0 0 7px; color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
/* type'sız <input> (tarayıcı varsayılanı "text"tir) dahil tüm metinsel alanları
   yakalamak için dışlama listesi kullanılıyor — [type=text] gibi bir içerme
   listesi, type attribute'u hiç yazılmamış input'ları es geçer. */
.input, input:not([type=checkbox], [type=radio], [type=file], [type=submit], [type=button], [type=reset], [type=hidden], [type=color], [type=range]), textarea, select{
  width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:3px; background:var(--surface); color:var(--ink); font:inherit;
}
textarea{ min-height:110px; resize:vertical; }
select{ cursor:pointer; }
:is(.input, input, textarea, select):focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
input[type=checkbox], input[type=radio]{ width:auto; accent-color:var(--accent); }
.field{ display:flex; flex-direction:column; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field.full{ grid-column:1/-1; }
.check{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink); cursor:pointer; }

.notice{ padding:14px 16px; margin:0 0 18px; background:var(--accent-soft); color:var(--ink); border-radius:4px; font-size:13.5px; }
.notice.error{ background:transparent; border:1px solid #b3453380; color:var(--ink); }

/* ---------- topline & masthead ---------- */
.topline{ padding:10px 0; text-align:center; background:var(--ink); color:var(--surface); font-size:12px; letter-spacing:.05em; }
.topline a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--accent); }

.s-header a{color:inherit;text-decoration:none}
.s-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.brand{ font-family:'Fraunces', serif; font-weight:600; font-size:22px; letter-spacing:-.02em; text-decoration:none; }
.brand em{ font-style:italic; color:var(--accent); }
.s-nav{display:flex;gap:28px;color:var(--ink-soft);font-size:13.5px}
.s-nav a{ padding-block:4px; border-bottom:1px solid transparent; }
.s-nav a:hover{color:var(--ink); border-color:var(--accent)}
.s-actions{display:flex;align-items:center;gap:16px;font-size:13px; color:var(--ink-soft)}
.s-icon{position:relative;display:grid;width:38px;height:38px;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--ink)}
.s-icon:hover{border-color:var(--accent);background:var(--surface)}
.s-icon svg{width:19px;height:19px}
.s-count{position:absolute;top:-6px;right:-6px;display:grid;min-width:19px;height:19px;place-items:center;padding:0 5px;border:2px solid var(--bg);border-radius:10px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;line-height:1;box-sizing:content-box;animation:s-count-pop .5s ease-out}
.s-icon.has-items{border-color:var(--accent);color:var(--accent)}
@keyframes s-count-pop{0%{transform:scale(.4)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.s-count{animation:none}}
.s-burger{display:none;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:none;font-size:18px;cursor:pointer;align-items:center;justify-content:center; color:var(--ink)}
.s-mobile-nav{display:none}
.s-mobile-nav.is-open{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
.s-mobile-nav a{display:block;padding:10px 0;color:var(--ink-soft);font-size:14px}
.s-header{position:relative;z-index:30}
.s-nav{align-items:center}
.s-nav-link[aria-current]{color:var(--ink);border-color:var(--ink)}
/* mega menü: ana kategorinin üzerine gelince header'ın altında tam genişlikte panel açılır */
.s-mega-item{padding:22px 0;margin:-22px 0}
.s-mega{position:absolute;left:0;right:0;top:100%;visibility:hidden;opacity:0;transform:translateY(-6px);background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -18px rgba(32,34,31,.22);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
.s-mega-item.has-panel:hover .s-mega,.s-mega-item.has-panel:focus-within .s-mega{visibility:visible;opacity:1;transform:none;transition-delay:.06s,.06s,0s}
.s-mega-item.has-panel:hover > .s-nav-link{color:var(--ink);border-color:var(--accent)}
.s-mega-inner{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:48px;padding:30px 0 34px}
.s-mega-all{display:inline-flex;gap:8px;margin-bottom:22px;color:var(--ink);font-family:'Fraunces',serif;font-size:22px;font-weight:500}
.s-mega-all span{color:var(--accent);transition:transform .2s}
.s-mega-all:hover span{transform:translateX(4px)}
.s-mega-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px 32px}
.s-mega-col{display:flex;flex-direction:column;gap:2px}
.s-mega-col a{padding:5px 0;color:var(--ink-soft);font-size:14px;transition:color .15s}
.s-mega-col a:hover{color:var(--accent)}
.s-mega-col a.s-mega-head{margin-bottom:6px;padding:0 0 9px;border-bottom:1px solid var(--line);color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.s-mega-feature{position:relative;display:block;overflow:hidden;border-radius:var(--radius);aspect-ratio:4/5;background:var(--surface-2)}
.s-mega-feature img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.s-mega-feature:hover img{transform:scale(1.04)}
.s-mega-feature.is-plain{display:flex;align-items:flex-end;background:linear-gradient(165deg,var(--accent) 0%,var(--ink) 62%)}
.s-mega-feature.is-plain span{position:static;background:none;padding:22px 20px;font-size:21px;line-height:1.2}
.s-mega-feature span{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;background:linear-gradient(transparent,rgba(20,18,14,.72));color:#fff;font-family:'Fraunces',serif;font-size:17px}
.s-mega-feature small{display:block;margin-bottom:3px;font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.85;font-family:system-ui,sans-serif}
@media(prefers-reduced-motion:reduce){.s-mega,.s-mega-feature img{transition:none}}
/* mobil menü: ana kategoriler açılır bölüm, en alt seviye çip olarak */
.s-m-group{border-bottom:1px solid var(--line)}
.s-m-group summary{display:flex;justify-content:space-between;align-items:center;padding:12px 0;color:var(--ink);font-size:15px;font-weight:600;cursor:pointer;list-style:none}
.s-m-group summary::-webkit-details-marker{display:none}
.s-m-group summary:after{content:"+";color:var(--accent);font-size:20px;font-weight:400;transition:transform .2s}
.s-m-group[open] summary:after{transform:rotate(45deg)}
.s-m-body{padding:0 0 14px 2px}
.s-mobile-nav .s-m-all{padding:4px 0 10px;color:var(--accent);font-size:13.5px;font-weight:600}
.s-m-sub{padding:8px 0}
.s-mobile-nav .s-m-head{padding:2px 0 8px;color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.s-m-chips{display:flex;flex-wrap:wrap;gap:6px}
.s-mobile-nav .s-m-chips a{display:inline-block;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-soft);font-size:13px}
.s-logout-btn{ border:0; background:none; color:var(--muted); cursor:pointer; font:inherit; }
@media(max-width:860px){.s-bar{flex-wrap:wrap;gap:14px}.s-nav{display:none}.s-burger{display:grid}.s-actions{margin-left:auto}}

/* ---------- hero ---------- */
.hero{ padding:60px 0 76px; }
.hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center; }
.hero h1{ font-size:clamp(40px,5.4vw,70px); font-weight:500; line-height:.98; letter-spacing:-.01em; margin:16px 0 22px; }
.hero h1 i{ font-style:italic; color:var(--accent); font-weight:400; }
.hero p{ max-width:46ch; color:var(--ink-soft); font-size:16.5px; line-height:1.65; margin:0 0 30px; }
@keyframes rise{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
.hero-copy{ animation:rise .7s cubic-bezier(.2,.7,.2,1) both; }
.hero-visual{ position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; background:var(--surface-2); box-shadow:var(--shadow); animation:rise .8s .1s cubic-bezier(.2,.7,.2,1) both; }
.hero-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-visual svg{ position:absolute; inset:0; width:100%; height:100%; }
.hero-tag{
  position:absolute; right:16px; bottom:16px; display:grid; place-items:center; text-align:center;
  width:88px; height:88px; border-radius:50%; background:var(--surface); border:1px solid var(--line);
  font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
  transform:rotate(-10deg); box-shadow:var(--shadow);
}
.hero-tag b{ display:block; font-family:'Fraunces',serif; font-size:14px; color:var(--ink); font-style:italic; }
@media (prefers-reduced-motion:reduce){ .hero-copy,.hero-visual{ animation:none } }

/* ---------- home slider ----------
   Slaytlar üst üste durur, aktif olan yumuşak geçişle görünür. Görsel olsun
   olmasın slayt zemini hep koyu kalır; böylece yazı her temada okunur. */
.slider{ --slide-ink:#FBF8F1; --slide-bg:#2A2318; position:relative; isolation:isolate; overflow:hidden; background:var(--slide-bg); color:var(--slide-ink); }
.slider-track{ position:relative; display:grid; aspect-ratio:16/7; min-height:480px; max-height:min(78vh,920px); width:100%; }
.slide{ grid-area:1/1; position:relative; display:flex; align-items:center; opacity:0; visibility:hidden; transition:opacity .9s ease, visibility 0s .9s; }
.slide.is-active{ opacity:1; visibility:visible; transition:opacity .9s ease; z-index:1; }
.slide-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%; transform:scale(1.06); transition:transform 7s ease-out; }
.slide.is-active .slide-media{ transform:scale(1); }
.slide::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(24,19,12,.78) 0%, rgba(24,19,12,.45) 42%, rgba(24,19,12,0) 75%); }
.slide.is-plain{ background:radial-gradient(120% 120% at 85% 30%, color-mix(in srgb, var(--accent) 38%, var(--slide-bg)) 0%, var(--slide-bg) 62%); }
.slide.is-plain::before{ display:none; }
.slide-art{ position:absolute; right:4%; top:6%; height:88%; width:auto; color:var(--slide-ink); }
.slide-copy{ position:relative; z-index:2; padding-block:60px 90px; }
.slide-copy > *{ max-width:560px; }
.slide-copy .eyebrow{ color:color-mix(in srgb, var(--accent) 45%, var(--slide-ink)); }
.slide-copy :is(h1,h2){ font-size:clamp(36px,5.2vw,72px); font-weight:500; line-height:1; letter-spacing:-.015em; margin:16px 0 20px; }
.slide-copy p{ color:rgba(251,248,241,.84); font-size:16.5px; line-height:1.65; margin:0 0 30px; max-width:46ch; }
.slide-copy .btn.accent:hover{ background:var(--slide-ink); border-color:var(--slide-ink); color:var(--slide-bg); }
.slide.is-active .slide-copy > *{ animation:rise .8s cubic-bezier(.2,.7,.2,1) both; }
.slide.is-active .slide-copy > :nth-child(2){ animation-delay:.08s; }
.slide.is-active .slide-copy > :nth-child(3){ animation-delay:.16s; }
.slide.is-active .slide-copy > :nth-child(4){ animation-delay:.24s; }
.slider-ui{ position:absolute; left:0; right:0; bottom:28px; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.slider-dots{ display:flex; gap:8px; }
.slider-dot{ position:relative; width:44px; height:20px; padding:0; border:0; background:none; cursor:pointer; }
.slider-dot span{ position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1.5px; border-radius:2px; background:rgba(251,248,241,.32); overflow:hidden; }
.slider-dot span::after{ content:""; position:absolute; inset:0; background:var(--slide-ink); transform:scaleX(0); transform-origin:left; }
.slider-dot.is-active span::after{ transform:scaleX(1); }
.slider.is-ticking .slider-dot.is-active span::after{ animation:slide-progress var(--slide-duration,6500ms) linear both; }
@keyframes slide-progress{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
.slider-arrows{ display:flex; gap:8px; }
.slider-arrow{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:1px solid rgba(251,248,241,.35); background:rgba(24,19,12,.25); color:var(--slide-ink); font-size:17px; cursor:pointer; backdrop-filter:blur(4px); transition:background .2s, border-color .2s, color .2s; }
.slider-arrow:hover{ background:var(--slide-ink); border-color:var(--slide-ink); color:var(--slide-bg); }
:is(.slider-arrow,.slider-dot):focus-visible{ outline:2px solid var(--slide-ink); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  .slide, .slide.is-active, .slide-media{ transition:none; }
  .slide-media{ transform:none; }
  .slide.is-active .slide-copy > *{ animation:none; }
}
/* Mobilde yatay görseli dikey kutuya sıkıştırmak fotoğrafı kesiyor; bunun yerine
   görsel üstte kendi oranında, yazı altta koyu zeminde durur. */
@media(max-width:600px){
  .slider-track{ aspect-ratio:auto; min-height:0; max-height:none; }
  .slide{ flex-direction:column; align-items:stretch; }
  .slide-media{ position:relative; inset:auto; flex:none; height:auto; aspect-ratio:4/3; object-position:68% center; }
  .slide::before{ inset:auto 0; top:calc(75vw - 90px); height:91px; background:linear-gradient(0deg, var(--slide-bg), rgba(42,35,24,0)); }
  .slide.is-plain{ justify-content:flex-end; background:radial-gradient(120% 70% at 80% 0%, color-mix(in srgb, var(--accent) 38%, var(--slide-bg)) 0%, var(--slide-bg) 70%); }
  .slide-art{ right:6%; top:6vw; height:48vw; opacity:.85; }
  .slide-copy{ padding-block:14px 84px; }
  .slide-copy :is(h1,h2){ font-size:clamp(30px,8.6vw,40px); margin:10px 0 12px; }
  .slide-copy p{ font-size:15px; margin-bottom:20px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .slider-ui{ bottom:24px; }
  .slider-dot{ width:30px; }
  .slider-arrow{ width:40px; height:40px; }
}
@media(max-width:400px){
  .s-bar .brand img{ max-width:118px !important; }
  .s-actions{ gap:10px; }
  .s-icon{ width:34px; height:34px; }
}

/* ---------- home category tiles ---------- */
.section.section-tight{ padding-top:64px; }
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; }
.cat-tile{ position:relative; display:block; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; background:var(--surface-2); box-shadow:var(--shadow); text-decoration:none; }
.cat-tile img, .cat-tile .cover-fallback{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.cat-tile:hover img{ transform:scale(1.05); }
/* Az kategori varken kartlar ekranı kaplamasın: tek kart geniş bant, iki kart yatay olur. */
.cat-tile:only-child{ aspect-ratio:21/8; }
.cat-tile:only-child img{ object-position:center 58%; }
.cat-grid:has(> .cat-tile:nth-child(2):last-child) .cat-tile{ aspect-ratio:4/3; }
.cat-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(24,19,12,.72), rgba(24,19,12,0) 55%); }
.cat-label{ position:absolute; left:18px; right:18px; bottom:16px; z-index:1; display:flex; flex-direction:column; gap:4px; color:#FBF8F1; }
.cat-label b{ font-size:21px; font-weight:500; }
.cat-label small{ font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; opacity:.85; }
.grid-3.grid-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:1000px){ .grid-3.grid-4{ grid-template-columns:repeat(3,1fr); } }

/* ---------- swatch rail ---------- */
.swatch-rail{ display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; }
.swatch{ flex:none; display:flex; align-items:center; gap:10px; padding:10px 16px 10px 10px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-size:13px; white-space:nowrap; }
.swatch i{ width:22px; height:22px; border-radius:50%; flex:none; border:1px solid rgba(0,0,0,.1); }

/* ---------- section heads ---------- */
.section{ padding:20px 0 70px; }
.section-head{ display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:26px; }
.section-head h2{ font-size:clamp(26px,3.2vw,36px); font-weight:500; letter-spacing:-.01em; margin-top:8px; }
.section-head a.link, a.link{ font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:2px; white-space:nowrap; }

/* ---------- product grid & cards ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform .3s; }
.card:hover{ transform:translateY(-4px); }
.card-visual{ position:relative; aspect-ratio:3/4; background:var(--surface-2); overflow:hidden; display:block; }
.card-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card:hover .card-visual img{ transform:scale(1.045); }
.card-photo-fallback{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:linear-gradient(150deg,var(--surface-2),var(--line)); color:var(--muted); font-family:'Fraunces',serif; font-style:italic; font-size:clamp(20px,7vw,44px); }
.fav{ position:absolute; top:10px; right:10px; z-index:2; width:34px; height:34px; border-radius:50%; border:0; background:rgba(251,248,241,.92); display:grid; place-items:center; font-size:16px; cursor:pointer; color:var(--accent); }
.fav.is-on{ background:var(--accent); color:var(--accent-ink); }
.badge-stack{ position:absolute; top:12px; left:12px; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:5px; pointer-events:none; }
.badge{ padding:5px 9px; border-radius:3px; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; line-height:1.1; background:var(--surface); color:var(--ink); box-shadow:0 2px 8px rgba(0,0,0,.12); }
.badge-discount{ background:var(--accent); color:var(--accent-ink); }
.badge-bestseller{ background:#C9A24A; color:#20221f; }
.badge-last{ background:#20221f; color:#fff; }
.badge-soldout{ background:rgba(32,34,31,.78); color:#fff; }
.badge-shipping{ background:#2F6B4F; color:#fff; }
.card-body{ padding:16px 16px 18px; border-top:1px dashed var(--line); }
.card-eyebrow{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.card-name{ font-family:'Fraunces',serif; font-size:18px; margin:5px 0 8px; text-decoration:none; color:var(--ink); display:block; }
.card-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.price{ font-weight:600; font-size:15px; }
.price-old{ margin-right:4px; color:var(--muted); font-weight:400; font-size:.85em; }
.price-now{ white-space:nowrap; }
.price-off{ display:inline-block; margin-left:4px; padding:2px 6px; border-radius:3px; background:var(--accent); color:var(--accent-ink); font-size:.72em; font-weight:700; vertical-align:middle; }

/* ---------- editorial strip ---------- */
.editorial{ display:grid; grid-template-columns:1.3fr .7fr; gap:48px; align-items:stretch; background:var(--ink); color:var(--surface); border-radius:10px; padding:52px; }
.editorial-contact{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding-left:48px; border-left:1px solid rgba(251,248,241,.14); }
.editorial .eyebrow{ color:var(--accent); }
.editorial h2{ font-family:'Fraunces',serif; font-weight:500; font-size:clamp(26px,3.4vw,40px); margin:12px 0 16px; letter-spacing:-.01em; }
.editorial p{ color:#D8CFBC; line-height:1.7; max-width:62ch; margin:0 0 22px; }


/* ---------- footer ---------- */
.s-footer{ border-top:1px solid var(--line); background:var(--surface-2); }
.s-footer .wrap{ padding:52px 0 0; }
.s-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:34px}
.s-cols h3{margin:0 0 14px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--muted)}
.s-cols p{margin:0;color:var(--muted);font-size:13px;line-height:1.8}
.s-cols ul{margin:0;padding:0;list-style:none}
.s-cols li{margin-bottom:9px}
.s-cols a{color:var(--ink-soft);font-size:13.5px; text-decoration:none}
.s-cols a:hover{color:var(--accent)}
.s-brand{font-size:19px;margin-bottom:12px;display:inline-block}
.s-social{display:flex;gap:10px;margin-top:16px}
.s-social a{display:grid;width:34px;height:34px;place-items:center;border:1px solid var(--line);border-radius:50%;font-size:12px;background:var(--surface); text-decoration:none}
.s-social a:hover{border-color:var(--accent); color:var(--accent)}
.s-newsletter{display:flex;gap:8px;margin-top:12px}
.s-newsletter input{flex:1;min-width:0}
.s-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:40px;padding:16px 0;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
@media(max-width:860px){.s-cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.s-cols{grid-template-columns:1fr}}

/* ---------- cards used as info tiles (about / contact / account) ---------- */
.tile{ padding:22px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.tile b, .tile > .tile-label{ display:block; margin-bottom:8px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.tile p, .tile .tile-value{ margin:0; color:var(--ink-soft); font-size:14px; line-height:1.6; white-space:pre-line; }
.tile-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tile-grid-2{ display:grid; grid-template-columns:1fr 1.2fr; gap:26px; }
@media(max-width:760px){ .tile-grid-3{ grid-template-columns:1fr; } .tile-grid-2{ grid-template-columns:1fr; } }

/* ---------- cart ---------- */
.cart-row{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding:24px 4px; border-bottom:1px solid var(--line); }
.cart-line{ display:flex; gap:18px; align-items:center; min-width:0; flex:1 1 260px; }
.cart-thumb{ width:76px; height:96px; object-fit:cover; border:1px solid var(--line); border-radius:6px; background:var(--surface); flex:none; font-size:20px; }
.cart-thumb.cover-fallback{ width:76px; height:96px; font-size:20px; } /* .cover-fallback'in width/height:100%'ünü ezer */
.cart-meta{ color:var(--muted); font-size:13px; line-height:1.6; margin-top:6px; }
.cart-row-meta{ display:flex; align-items:center; gap:20px; flex:none; }
.qty-form{ display:flex; align-items:center; gap:6px; }
.qty-form input{ width:58px; padding:10px 6px; text-align:center; border:1px solid var(--line); border-radius:6px; background:var(--surface); font:inherit; }
.line-total{ min-width:84px; text-align:right; font-size:14px; font-weight:600; white-space:nowrap; }
.remove-btn{ border:0; background:none; color:var(--accent); font-size:12px; text-decoration:underline; cursor:pointer; padding:0; white-space:nowrap; }
.cart-totals{ margin-top:22px; padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); font-size:14px; line-height:2; }
.cart-totals .line{ display:flex; justify-content:space-between; }
.cart-totals .discount{ color:var(--accent-2); }
.cart-totals .grand{ font-size:19px; font-weight:700; border-top:1px solid var(--line); padding-top:10px; margin-top:8px; display:flex; justify-content:space-between; }
.coupon-form{ display:flex; gap:8px; margin-top:18px; }
.coupon-form input{ flex:1; }
.actions-row{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
@media(max-width:600px){ .cart-row{flex-direction:column; align-items:stretch; gap:14px; padding:20px 0;} .cart-line{flex:none;} .cart-row-meta{justify-content:space-between;} .qty-form{flex:none} .qty-form input{width:58px} .actions-row .btn{flex:1;text-align:center} }

/* ---------- account dashboard ---------- */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.stat-tile{ padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.stat-tile .num{ display:block; font-family:'Fraunces',serif; font-size:30px; }
.stat-tile .label{ display:block; margin-top:4px; color:var(--muted); font-size:12px; letter-spacing:.04em; }
@media(max-width:760px){ .stat-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- order status timeline ---------- */
.timeline{ display:flex; gap:0; margin:24px 0; }
.timeline-step{ flex:1; text-align:center; position:relative; font-size:11.5px; color:var(--muted); }
.timeline-step:before{ content:''; position:absolute; top:9px; left:-50%; width:100%; height:2px; background:var(--line); z-index:0; }
.timeline-step:first-child:before{ display:none; }
.timeline-dot{ position:relative; z-index:1; display:inline-block; width:20px; height:20px; border-radius:50%; background:var(--surface); border:2px solid var(--line); margin-bottom:8px; }
.timeline-step.is-done .timeline-dot{ background:var(--accent); border-color:var(--accent); }
.timeline-step.is-done{ color:var(--ink); font-weight:600; }

/* ---------- pagination ---------- */
.pager{ display:flex; gap:8px; flex-wrap:wrap; padding-top:36px; }
.pager-box{ display:grid; min-width:44px; min-height:44px; place-items:center; border:1px solid var(--line); background:var(--surface); font-size:13px; text-decoration:none; color:var(--ink); border-radius:3px; }
.pager a.pager-box:hover{ border-color:var(--accent); }
.pager .current{ border-color:var(--accent); background:var(--accent); color:var(--accent-ink); font-weight:700; }
.pager .gap{ border:0; background:none; }

/* ---------- auth card ---------- */
.auth-box{ width:min(430px,calc(100% - 32px)); margin:10vh auto; padding:40px; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); }
.auth-box h1{ margin:34px 0 22px; font-size:clamp(30px,6vw,38px); font-weight:500; letter-spacing:-.01em; }
.auth-links{ display:flex; justify-content:space-between; gap:10px; margin-top:22px; color:var(--muted); font-size:13px; }
.auth-links a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); }

@media(max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .s-nav{ display:none; }
  .grid-3, .grid-3.grid-4{ grid-template-columns:1fr 1fr; }
  .editorial{ grid-template-columns:1fr; padding:34px; }
  .editorial-contact{ padding:28px 0 0; border-left:0; border-top:1px solid rgba(251,248,241,.14); }
  .field-row{ grid-template-columns:1fr; }
}
@media(max-width:560px){
  .grid-3, .grid-3.grid-4{ grid-template-columns:1fr; }
  .cat-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .cat-label b{ font-size:17px; }
  .cat-tile:last-child:nth-child(odd){ grid-column:1/-1; aspect-ratio:16/9; }
  .hero{ padding:38px 0 50px; }
  .stat-grid{ grid-template-columns:1fr 1fr; }
}

/* ---------- product-cover fallback (no image uploaded yet) ---------- */
.cover-fallback{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:linear-gradient(150deg,var(--surface-2),var(--line)); color:var(--muted); font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:clamp(20px,7vw,44px); }
.card-visual .cover-fallback, .hero-visual .cover-fallback{ position:absolute; inset:0; width:auto; height:auto; }

/* ---------- filter/search bar (product listing) ---------- */
.filter-bar{ display:flex; align-items:flex-end; gap:12px; margin-bottom:36px; padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); flex-wrap:wrap; }
.filter-field{ display:grid; gap:7px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; flex:0 0 150px; }
.filter-field.grow{ flex:1 1 auto; }
.filter-field input, .filter-field select{ min-height:54px; padding:14px 16px; font-size:20px; line-height:1.3; }
.filter-field select{ appearance:none; padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A7F6C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; }
.filter-chip{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:54px; padding:0 16px; border:1px solid var(--line); border-radius:6px; background:var(--surface); font-size:14px; cursor:pointer; white-space:nowrap; flex:0 0 auto; transition:background .15s,border-color .2s; align-self:flex-end; }
.filter-chip:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }
.filter-bar .btn{ min-height:54px; align-self:flex-end; }
.filter-clear{ align-self:center; color:var(--muted); font-size:12px; border-bottom:1px solid var(--ink); white-space:nowrap; text-decoration:none; }
@media(max-width:720px){ .filter-bar{ flex-wrap:wrap; align-items:stretch; } .filter-field.grow{ flex:1 1 100%; } .filter-field{ flex:1 1 calc(50% - 12px); } .filter-chip{ flex:1 1 calc(50% - 12px); } .filter-bar .btn{ flex:1 1 100%; } .filter-clear{ flex:1 1 100%; text-align:center; } }

/* ---------- variant option chips on product page ---------- */
.opt-chip{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 12px; border:1px solid var(--line); border-radius:6px; background:var(--surface); font-size:13px; cursor:pointer; }
.opt-chip:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); font-weight:600; }
.opt-chip.is-disabled{ opacity:.4; text-decoration:line-through; cursor:not-allowed; }

/* ---------- data table (orders, order items, payment notifications) ---------- */
.data-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.data-table td, .data-table th{ padding:10px 8px; border-bottom:1px solid var(--line); text-align:left; }
.data-table th{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; }

/* ---------- status pill ---------- */
.pill{ display:inline-block; padding:4px 10px; border-radius:999px; background:var(--surface-2); color:var(--ink-soft); font-size:11px; font-weight:700; text-transform:uppercase; }
.pill.is-good{ background:var(--accent-soft); color:var(--accent-2); }
.pill.is-warn{ background:color-mix(in srgb, var(--accent) 18%, var(--surface-2)); color:var(--accent); }

/* ---------- account quick-link tiles & list rows ---------- */
.quick-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:28px; }
.quick-tile{ display:flex; align-items:center; gap:14px; padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); text-decoration:none; color:var(--ink); transition:border-color .2s; }
.quick-tile:hover{ border-color:var(--accent); }
.quick-icon{ display:grid; flex:none; width:42px; height:42px; place-items:center; border-radius:50%; background:var(--surface-2); color:var(--ink); transition:background .2s,color .2s; }
.quick-icon svg{ width:20px; height:20px; }
.quick-tile:hover .quick-icon{ background:var(--accent-soft); color:var(--accent); }
.quick-tile.is-attention{ border-color:var(--accent); }
.quick-tile.is-attention .quick-icon{ background:var(--accent); color:var(--accent-ink); }
.quick-tile small{ display:block; color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.quick-tile b{ display:block; margin-top:5px; font-size:16px; font-weight:600; }
.list-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:16px 18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:12px; }
.list-row-link{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; flex:1; min-width:0; text-decoration:none; color:var(--ink); }
.address-row{ padding:14px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.empty-state{ padding:60px 0; color:var(--muted); text-align:center; }
.empty-state a{ color:var(--ink); border-bottom:1px solid var(--ink); text-decoration:none; }
@media(max-width:700px){ .quick-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:430px){ .quick-grid{ grid-template-columns:1fr; } }

/* ---------- hesabım bölümleri & adres kartları ---------- */
.account-section{ margin-bottom:22px; }
.account-section-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.account-section-head h2{ font-size:20px; font-weight:500; }
.account-link{ color:var(--accent); font-size:13px; text-decoration:underline; }
.account-settings{ padding-bottom:10px; }
.table-scroll{ overflow-x:auto; }
.address-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.address-card{ display:flex; flex-direction:column; gap:10px; padding:16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg, var(--surface)); font-size:13.5px; }
.address-card.is-default{ border-color:var(--accent); }
.address-card-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.address-card-head .pill{ margin-left:4px; }
.address-card-body{ color:var(--ink-soft); line-height:1.6; overflow-wrap:anywhere; }
.address-card-actions{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:auto; }
.address-edit > summary, .addr-corporate > summary{ cursor:pointer; color:var(--muted); font-size:12.5px; }
.addr-corporate{ margin-top:14px; }
.address-new > summary{ list-style:none; display:inline-flex; }
.address-new > summary::-webkit-details-marker{ display:none; }
.address-new[open] > summary{ margin-bottom:6px; }
@media(max-width:700px){ .address-grid{ grid-template-columns:1fr; } }

/* ---------- ödeme: adres seçimi ---------- */
.checkout-block{ margin-top:24px; padding:24px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.checkout-block h2{ font-size:19px; font-weight:500; margin-bottom:14px; }
.address-choices{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.address-choice{ position:relative; display:flex; gap:10px; align-items:flex-start; padding:14px; border:1px solid var(--line); border-radius:var(--radius); cursor:pointer; font-size:13.5px; line-height:1.55; color:var(--ink-soft); overflow-wrap:anywhere; }
.address-choice input{ margin-top:4px; flex:none; }
.address-choice strong{ color:var(--ink); }
.address-choice:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }
.address-choice.is-new{ align-items:center; color:var(--ink); }
.checkout-new-address{ margin-top:16px; border:0; padding:0; min-width:0; }
.checkout-new-address[disabled]{ display:none; }
@media(max-width:700px){ .address-choices{ grid-template-columns:1fr; } .checkout-block{ padding:18px; } }

/* ---------- order message thread ---------- */
.bubble-row{ margin:10px 0; }
.bubble-row.is-admin{ text-align:right; }
.bubble{ display:inline-block; max-width:80%; padding:10px 14px; border-radius:10px; background:var(--surface); border:1px solid var(--line); font-size:13.5px; text-align:left; }
.bubble-row.is-admin .bubble{ background:var(--accent-soft); border-color:transparent; }

/* ---------- agreement (sözleşme) modal ---------- */
dialog.agreement-modal{ width:min(640px,calc(100% - 32px)); max-height:82vh; padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--ink); box-shadow:var(--shadow); }
dialog.agreement-modal::backdrop{ background:rgba(0,0,0,.55); }
dialog.agreement-modal h2{ margin:0; font-size:20px; font-weight:500; }
dialog.agreement-modal .agreement-body{ white-space:pre-line; font-size:13.5px; line-height:1.7; color:var(--ink-soft); max-height:56vh; overflow:auto; margin-top:14px; padding-right:6px; }

/* ---------- breadcrumb & kategori çubuğu ---------- */
.crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 0; margin:0; padding:0; list-style:none; font-size:12.5px; color:var(--muted); }
.crumbs li{ display:inline-flex; align-items:center; }
.crumbs li + li:before{ content:"›"; margin:0 9px; color:var(--line); font-size:14px; }
.crumbs a{ color:var(--muted); text-decoration:none; transition:color .2s; }
.crumbs a:hover{ color:var(--accent); text-decoration:underline; }
.crumbs [aria-current]{ color:var(--ink); font-weight:600; }
.cat-nav{ display:grid; gap:10px; margin-top:28px; }
.cat-row{ display:flex; flex-wrap:wrap; gap:8px; }
.cat-row.is-sub{ padding-left:14px; border-left:2px solid var(--line); }
.cat-chip{ padding:9px 15px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); font-size:13px; text-decoration:none; transition:border-color .2s, background .2s; }
.cat-row.is-sub .cat-chip{ padding:7px 13px; font-size:12.5px; }
.cat-chip:hover{ border-color:var(--accent); }
.cat-chip.is-on{ border-color:var(--ink); background:var(--ink); color:var(--surface); }
@media(max-width:600px){ .cat-row{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; } .cat-chip{ flex:none; } }

/* ---------- toast (kısa süreli bildirim) ---------- */
.s-toast{position:fixed;right:20px;top:20px;z-index:90;display:flex;align-items:center;gap:12px;max-width:min(420px,calc(100% - 32px));padding:14px 14px 14px 16px;border-radius:var(--radius);background:var(--ink);color:var(--surface);font-size:14px;line-height:1.45;box-shadow:0 18px 40px -12px rgba(32,34,31,.45);animation:toast-in .35s cubic-bezier(.2,.7,.2,1) both;transition:opacity .4s,transform .4s}
.s-toast.is-leaving{opacity:0;transform:translateY(-12px)}
.s-toast-icon{display:grid;flex:none;width:26px;height:26px;place-items:center;border-radius:50%;background:var(--accent-2);color:#fff;font-weight:700;font-size:13px}
.s-toast.is-error .s-toast-icon{background:var(--accent)}
.s-toast button{flex:none;border:0;background:none;color:inherit;opacity:.7;font-size:20px;line-height:1;cursor:pointer;padding:0 2px}
.s-toast button:hover{opacity:1}
@keyframes toast-in{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
@media(max-width:560px){.s-toast{left:16px;right:16px;top:16px;max-width:none}}
@media(prefers-reduced-motion:reduce){.s-toast{animation:none;transition:none}}