/* ==========================================================================
   ŞARK DOKUSU — heritage.css
   Antika halı / kilim temalı vitrin. storefront.css'ten SONRA yüklenir.
   Palet: bordo (#5a1a1e), gece mavisi (#1c2740), antik altın (#c9a45c),
   parşömen (#f3e9d2), koyu ceviz (#2a1a14).
   ========================================================================== */

:root {
  --h-wine: #5a1a1e;
  --h-wine-deep: #3b0f13;
  --h-indigo: #1c2740;
  --h-gold: #c9a45c;
  --h-gold-light: #e8d3a0;
  --h-gold-dark: #8f6b2a;
  --h-parchment: #f3e9d2;
  --h-paper: #fbf5e6;
  --h-walnut: #2a1a14;
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* kilim bandı: baklava + zikzak, altın/bordo/lacivert */
  --kilim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='20' viewBox='0 0 56 20'%3E%3Crect width='56' height='20' fill='%233b0f13'/%3E%3Cpath d='M0 3h56M0 17h56' stroke='%23c9a45c' stroke-width='1'/%3E%3Cpath d='M14 2 24 10 14 18 4 10Z' fill='%23c9a45c'/%3E%3Cpath d='M14 6 19 10 14 14 9 10Z' fill='%235a1a1e'/%3E%3Cpath d='M42 2 52 10 42 18 32 10Z' fill='%231c2740' stroke='%23c9a45c' stroke-width='1'/%3E%3Cpath d='M42 7 45 10 42 13 39 10Z' fill='%23e8d3a0'/%3E%3Cpath d='M28 4v12' stroke='%23c9a45c' stroke-width='1' stroke-dasharray='2 2'/%3E%3C/svg%3E");
  --medallion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23c9a45c' stroke-width='1.4'%3E%3Cpath d='M200 10 255 55 330 45 345 120 390 175 345 230 355 305 280 315 235 370 200 390 165 370 120 315 45 305 55 230 10 175 55 120 70 45 145 55Z'/%3E%3Cpath d='M200 50 245 85 305 80 315 135 350 175 315 215 320 270 265 275 235 320 200 335 165 320 135 275 80 270 85 215 50 175 85 135 95 80 155 85Z'/%3E%3Cpath d='M200 100 262 175 200 250 138 175Z'/%3E%3Cpath d='M200 130 232 175 200 220 168 175Z'/%3E%3Ccircle cx='200' cy='175' r='10'/%3E%3Cpath d='M200 10v380M10 175h380M62 37l276 276M338 37 62 313' stroke-opacity='.35'/%3E%3C/svg%3E");
}

body { background: var(--h-parchment); color: var(--h-walnut); font-family: 'Inter', system-ui, sans-serif; }
h1, h2, h3, .section-title, .catalog-head h2, .card-title { font-family: var(--font-display); }

/* ---------- Header ---------- */
.site-header { background: rgba(251, 245, 230, .97); box-shadow: 0 1px 0 var(--h-gold); border-bottom: 0; position: sticky; }
.site-header::after { content: ""; display: block; height: 6px; background: var(--kilim) repeat-x 0 0 / auto 6px; }
.brand-name { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--h-wine); letter-spacing: .03em; }
.brand-sub { display: block; color: var(--h-gold-dark); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; font-weight: 600; }
.nav-link { color: var(--h-wine-deep); font-weight: 600; letter-spacing: .02em; }
.nav-link:hover { background: rgba(201, 164, 92, .18); color: var(--h-wine); }
.nav-cta, .cat-toggle { background: var(--h-wine); border-color: var(--h-wine); color: var(--h-gold-light); border-radius: 2px; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
.nav-cta:hover, .cat-toggle:hover, .cat-toggle[aria-expanded="true"] { background: var(--h-wine-deep); color: #fff; }
.header-search .search-field input { background: #fff9ea; border: 1px solid #d9c493; border-radius: 2px; }
.header-search .search-field input:focus { border-color: var(--h-gold-dark); box-shadow: 0 0 0 3px rgba(201, 164, 92, .25); }
.cat-bar { background: var(--h-paper); border-top: 1px solid #e6d6ad; }
.cat-root { color: var(--h-walnut); }
.cat-root:hover { color: var(--h-wine); }

/* ---------- Butonlar ---------- */
.btn { background: var(--h-wine); border-color: var(--h-wine); color: var(--h-gold-light); border-radius: 2px; letter-spacing: .1em; text-transform: uppercase; font-size: 12.5px; font-weight: 700; }
.btn:hover { background: var(--h-wine-deep); border-color: var(--h-wine-deep); color: #fff; }
.btn-outline { background: transparent; color: var(--h-wine); border: 1px solid var(--h-gold-dark); }
.btn-outline:hover { background: rgba(201, 164, 92, .18); color: var(--h-wine-deep); }
.btn-wa { background: #1f5c3a; border-color: #1f5c3a; color: #fff; }
.btn-wa:hover { background: #164a2d; border-color: #164a2d; }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(800px 420px at 80% 10%, rgba(201, 164, 92, .22), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(28, 39, 64, .85), transparent 65%),
    linear-gradient(125deg, var(--h-wine-deep) 0%, var(--h-wine) 55%, #7a2a26 100%);
  color: #fff;
  border-bottom: 0;
}
.hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: min(760px, 90vw); aspect-ratio: 1; right: -140px; top: 50%; transform: translateY(-50%);
  background: var(--medallion) center / contain no-repeat; opacity: .28;
}
.hero::after {
  opacity: .07; mask-image: none; -webkit-mask-image: none;
  background-image:
    linear-gradient(135deg, var(--h-gold-light) 25%, transparent 25%),
    linear-gradient(225deg, var(--h-gold-light) 25%, transparent 25%),
    linear-gradient(45deg, var(--h-gold-light) 25%, transparent 25%),
    linear-gradient(315deg, var(--h-gold-light) 25%, transparent 25%);
}
.hero-inner { padding: clamp(52px, 8vw, 96px) 20px clamp(60px, 8vw, 104px); }
.hero .eyebrow { background: transparent; border: 0; border-top: 1px solid var(--h-gold); border-bottom: 1px solid var(--h-gold); border-radius: 0; color: var(--h-gold-light); padding: 7px 4px; letter-spacing: .3em; font-size: 11px; }
.hero h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -.005em; color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.hero h1 em { font-style: italic; font-weight: 500; color: var(--h-gold-light); }
.hero-lead { color: rgba(255, 246, 226, .9); font-size: 16.5px; line-height: 1.75; }
.hero .btn { background: var(--h-gold); border-color: var(--h-gold); color: var(--h-wine-deep); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); padding: 15px 28px; }
.hero .btn:hover { background: var(--h-gold-light); border-color: var(--h-gold-light); color: var(--h-wine-deep); }
.hero .btn-outline { background: transparent; color: var(--h-gold-light); border: 1px solid var(--h-gold); box-shadow: none; }
.hero .btn-outline:hover { background: rgba(201, 164, 92, .15); color: #fff; }
.hero-art { height: 380px; }
.ha-card { background: var(--h-paper); border: 0; border-radius: 2px; padding: 8px; box-shadow: 0 22px 50px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--h-gold); outline: 1px solid var(--h-gold); outline-offset: -4px; }
.ha-card img { border-radius: 0; }
/* kilim bandı hero'nun altında */
.hero > .hero-inner::after { content: ""; position: absolute; left: -20px; right: -20px; bottom: 0; height: 20px; background: var(--kilim) repeat-x 0 0 / auto 20px; }
.hero > .hero-inner { overflow: visible; }
/* yönetici özel hero görseli yüklediyse süsleri gizle */
.hero.has-custom-hero-background::before, .hero.has-custom-hero-background::after { display: none; }

/* ---------- Avantaj şeridi ---------- */
.perks { background: var(--h-indigo); border-bottom: 1px solid var(--h-gold); }
.perk strong { color: var(--h-gold-light); font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: .02em; }
.perk span:not(.perk-ic) { color: rgba(243, 233, 210, .7); }
.perk-ic { background: transparent; border: 1px solid var(--h-gold); color: var(--h-gold); transform: rotate(45deg); border-radius: 2px; }
.perk-ic svg { transform: rotate(-45deg); }

/* ---------- Bölüm başlıkları (süslü ayraç) ---------- */
.section-title, .catalog-head h2 { color: var(--h-wine); font-weight: 600; font-size: clamp(28px, 3.6vw, 40px); letter-spacing: .01em; }
.section-title { text-align: center; margin-bottom: 26px; }
.section-title::after, .catalog-head h2::after {
  content: ""; display: block; height: 14px; margin: 10px auto 0; width: 150px;
  background:
    linear-gradient(var(--h-gold), var(--h-gold)) left center / 58px 1px no-repeat,
    linear-gradient(var(--h-gold), var(--h-gold)) right center / 58px 1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M7 0 14 7 7 14 0 7Z' fill='%23c9a45c'/%3E%3Cpath d='M7 4 10 7 7 10 4 7Z' fill='%235a1a1e'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.catalog-head h2::after { margin-left: 0; }
.catalog-head p { color: #7a6650; font-style: italic; font-family: var(--font-display); font-size: 17px; }

/* ---------- Kategori vitrini ---------- */
.showcase { background: var(--h-paper); padding: 40px 0 26px; border-bottom: 1px solid #e6d6ad; }
.st-img { background: linear-gradient(135deg, #e8d3a0, #c9a45c); box-shadow: 0 0 0 3px var(--h-paper), 0 0 0 4px var(--h-gold), 0 10px 24px rgba(59, 15, 19, .22); }
.showcase-tile:hover .st-img, .showcase-tile[aria-pressed="true"] .st-img { box-shadow: 0 0 0 3px var(--h-paper), 0 0 0 5px var(--h-wine), 0 14px 28px rgba(59, 15, 19, .3); }
.st-name { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--h-wine-deep); }
.showcase-tile[aria-pressed="true"] .st-name { color: var(--h-wine); }

/* ---------- Katalog ---------- */
.catalog { background: var(--h-parchment); padding-top: 44px; }
.chip { border-radius: 2px; border: 1px solid #d9c493; background: var(--h-paper); color: var(--h-walnut); }
.chip:hover { border-color: var(--h-gold-dark); color: var(--h-wine); background: #fff; }
.chip[aria-pressed="true"] { background: var(--h-wine); border-color: var(--h-wine); color: var(--h-gold-light); }
.side-cats { background: var(--h-paper); border: 1px solid #e0cd9e; border-radius: 2px; }
.side-title { font-family: var(--font-display); font-size: 19px; color: var(--h-wine); }
.side-link:hover { background: rgba(201, 164, 92, .16); color: var(--h-wine); }
.side-link.is-active { background: rgba(90, 26, 30, .08); color: var(--h-wine); }
.sort-select { border-radius: 2px; border-color: #d9c493; background-color: var(--h-paper); }

.product-grid { gap: 22px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.product-card { background: var(--h-paper); border: 1px solid #e0cd9e; border-radius: 2px; box-shadow: 0 2px 10px rgba(59, 15, 19, .07); padding: 8px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.product-card:hover { transform: translateY(-4px); border-color: var(--h-gold); box-shadow: 0 18px 36px rgba(59, 15, 19, .2); }
.card-media { background: #e9dcc0; border-radius: 0; position: relative; }
.card-media::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(232, 211, 160, .85); pointer-events: none; transition: inset .25s ease, border-color .25s ease; }
.product-card:hover .card-media::after { inset: 12px; border-color: #fff; }
.product-card:hover .card-media img { transform: scale(1.06); }
.card-badge { background: var(--h-wine); color: var(--h-gold-light); border-radius: 0; letter-spacing: .12em; text-transform: uppercase; font-size: 9.5px; }
.card-badge.is-out { background: #4a4a4a; color: #eee; }
.card-body { padding: 14px 8px 8px; text-align: center; }
.card-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--h-wine-deep); line-height: 1.15; }
.card-desc { color: #7a6650; }
.card-foot { flex-direction: column; align-items: center; gap: 10px; border-top: 1px solid #e6d6ad; margin-top: 8px; padding-top: 12px; }
.price { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--h-gold-dark); letter-spacing: .01em; }
.card-foot .btn { width: 100%; justify-content: center; border-radius: 0; font-size: 11.5px; padding: 11px 12px; }
.card-fav { background: rgba(251, 245, 230, .92); }

/* ---------- Hakkımızda / güven ---------- */
.about-story-content { background: var(--h-paper); border-bottom: 1px solid #e0cd9e; }
.about-story-kicker { color: var(--h-gold-dark); letter-spacing: .3em; }
.about-story-inner h2 { color: var(--h-wine); font-weight: 600; }
.trust { background: var(--h-parchment); }
.trust-item .ti-mark { background: transparent; border: 1px solid var(--h-gold); color: var(--h-wine); transform: rotate(45deg); border-radius: 2px; }
.trust-item .ti-mark svg { transform: rotate(-45deg); }
.trust-item h3 { font-family: var(--font-display); font-size: 20px; color: var(--h-wine); }
.trust-item p { color: #6e5b46; }

/* ---------- Footer ---------- */
.site-footer { background: var(--h-wine-deep); color: #e8d9bb; position: relative; padding-top: 34px; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 20px; background: var(--kilim) repeat-x 0 0 / auto 20px; }
.site-footer h4 { color: var(--h-gold); font-family: var(--font-display); font-size: 19px; letter-spacing: .05em; }
.site-footer .brand-name { color: var(--h-gold-light); }
.site-footer a { color: #f0e3c4; }
.site-footer a:hover { color: var(--h-gold); }
.footer-bottom { border-color: rgba(201, 164, 92, .28); color: #bda982; }

/* ---------- Açılış ekranı ---------- */
#site-boot-screen { background: var(--h-wine-deep) !important; }

/* ---------- Mobil ---------- */
@media (max-width: 820px) {
  .hero::before { right: -220px; opacity: .2; }
  .hero-art { height: 260px; }
  .brand-name { font-size: 22px; }
  .product-grid { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-title { font-size: 17px; }
  .price { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .product-card, .card-media::after, .product-card:hover .card-media img { transition: none; transform: none; } }

/* ---------- Kategori şeridi (her ekranda, header ile birlikte yapışkan) ---------- */
.cat-strip { background: var(--h-paper); border-top: 1px solid #e6d6ad; border-bottom: 1px solid #e0cd9e; }
.cat-strip .cs-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; -webkit-overflow-scrolling: touch; }
.cat-strip .cs-row::-webkit-scrollbar { display: none; }
.cat-strip .cs-sub { padding-top: 0; }
.cs-pill { flex: none; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #d9c493; background: #fff9ea; color: var(--h-walnut); padding: 8px 16px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.cs-pill:hover { border-color: var(--h-gold-dark); color: var(--h-wine); }
.cs-pill.is-active { background: var(--h-wine); border-color: var(--h-wine); color: var(--h-gold-light); }
.cs-pill.is-sub { font-size: 13px; padding: 6px 13px; border-style: dashed; background: transparent; }
.cs-pill.is-sub.is-active { border-style: solid; }
.cs-count { font-size: 11px; font-weight: 700; opacity: .65; }


/* ---------- Mobil düzeltmeler ---------- */
.card-foot .btn { letter-spacing: .04em; text-transform: none; font-size: 13px; white-space: normal; line-height: 1.25; text-align: center; }
@media (max-width: 820px) {
  .site-header { position: static; }
  .brand-sub { display: none; }
  .brand-name { font-size: 21px; line-height: 1.05; }
  .card-foot .btn { font-size: 12px; padding: 10px 8px; }
}
.cs-pill.is-sub.is-active { background: var(--h-wine); border-color: var(--h-wine); color: var(--h-gold-light); }
.hero-inner { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(44px, 5.5vw, 72px); }
.hero h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); }

/* Masaüstünde Trendyol tarzı menü (üstte ana kategoriler + hover'da mega menü + yan filtre); şerit yalnızca mobilde */
@media (min-width: 821px) { .cat-strip { display: none !important; } }
.cat-root { font-weight: 600; }
.cat-menu { background: var(--h-paper); border-top: 1px solid var(--h-gold); box-shadow: 0 18px 40px rgba(59,15,19,.25); }
.cm-root-btn { color: var(--h-walnut); border-radius: 2px; }
.cm-root.is-active > .cm-root-btn, .cm-root-btn:hover { background: rgba(201,164,92,.2); color: var(--h-wine); }
.cm-root.is-active > .cm-root-btn .cm-ico, .cm-root-btn:hover .cm-ico { color: var(--h-wine); }
.cm-group-title { color: var(--h-wine); font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.cm-link { color: var(--h-walnut); }
.cm-link:hover, .cm-viewall { color: var(--h-wine); }
.side-cats { position: sticky; top: 16px; align-self: start; }

/* Tablet genişliğinde de soldaki kategori paneli görünsün */
@media (min-width: 821px) and (max-width: 980px) {
  .catalog-layout { grid-template-columns: 200px minmax(0, 1fr); }
  .side-cats { display: block; }
}

/* ---------- 2 sn'de bir 1. ↔ 2. fotoğraf (eski CSS animasyonunun yerine JS) ---------- */
.card-media.has-hover-img img:not(.card-img-2) { animation: none !important; opacity: 1 !important; }
.card-media.has-hover-img .card-img-2 { animation: none !important; opacity: 0; transition: opacity .5s ease; }
.card-media.has-hover-img.is-alt .card-img-2 { opacity: 1 !important; }

/* ---------- Mobil: hamburger + soldan açılan kategori çekmecesi ---------- */
.nav-burger { display: none; }
@media (max-width: 820px) {
  .nav-burger { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-right: 2px; border: 0; background: transparent; color: var(--h-wine); border-radius: 4px; cursor: pointer; flex: none; }
  .nav-burger:active { background: rgba(201,164,92,.2); }
  .header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  .header-inner .brand { margin-right: auto; }
  .header-inner .header-search { order: 5; flex: 1 0 100%; max-width: none; }
  .cat-bar { display: block; border: 0; background: transparent; }
  .cat-bar-inner { display: none; }
  .cat-menu { inset: 0 auto 0 0 !important; width: min(88vw, 360px); background: var(--h-paper); box-shadow: 8px 0 40px rgba(0,0,0,.35); border-right: 1px solid var(--h-gold); animation: drawer-in .26s ease; z-index: 90 !important; }
  .cat-menu-top { background: var(--h-wine); color: var(--h-gold-light); font-family: var(--font-display); font-size: 20px; border-bottom: 1px solid var(--h-gold); }
  .cat-menu-top strong { font-weight: 700; letter-spacing: .04em; }
  .cat-menu-close { background: rgba(255,255,255,.12) !important; color: var(--h-gold-light) !important; }
  body.cat-menu-open::after { content: ""; position: fixed; inset: 0; background: rgba(30,10,10,.55); z-index: 85; }
  .cm-root { border-bottom: 1px solid #e6d6ad; }
  .cm-root-btn { color: var(--h-walnut); }
  .cm-root.is-active > .cm-root-btn { color: var(--h-wine); font-weight: 700; }
}
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .cat-menu { animation: none; } }
@media (max-width: 820px) {
  .header-inner .brand { margin-right: 0; flex: 1 1 auto; min-width: 0; }
  .header-inner .site-nav { order: 2; margin-left: auto; flex: none; }
  .site-nav .nav-link:not(.nav-wa) { display: none; }
}