/* ==================================================================
   Dalaz Makina — stil dosyası
   1. Tasarım belirteçleri   2. Temel   3. Yardımcılar   4. Butonlar & form öğeleri
   5. Üst bar & header       6. Mega menü & çekmeceler & alt çubuk
   7. Bölümler (ana sayfa)   8. Ürün kartı & fiyat     9. Katalog
   10. Ürün detay            11. Sepet                 12. Giriş / formlar / içerik sayfaları
   13. Footer                14. Toast & animasyon
   ================================================================== */

/* 1. TASARIM BELİRTEÇLERİ ------------------------------------------ */
:root {
  --c-orange: #EB6817;      /* logo turuncusu */
  --c-orange-600: #D45A0E;
  --c-orange-700: #A84A0E;  /* metin/bağlantı: beyazda 5.8:1, kum zeminde 5.0:1 */
  --c-orange-50: #FFF3EA;
  --c-orange-100: #FFE2CD;
  --c-ink-950: #111127;
  --c-ink: #191934;         /* logo laciverti */
  --c-ink-800: #23234A;
  --c-ink-700: #34365A;
  --c-text: #26283A;
  --c-muted: #5D5F70;
  --c-line: #E7E1D7;
  --c-line-2: #D6CEC1;
  --c-paper: #FBF9F5;
  --c-sand: #F4EFE7;
  --c-sand-2: #ECE5D9;
  --c-white: #FFFFFF;
  --c-green: #2E6A3E;
  --c-green-50: #E8F2EA;
  --c-red: #B42318;
  --c-red-50: #FDECEA;
  --c-amber: #8F5300;
  --c-amber-50: #FFF4DE;
  --c-on-dark: #F4F1EC;
  --c-on-dark-muted: #B1B3C7;

  --f-head: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --f-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-2xl: clamp(2.1rem, 1.4rem + 2.6vw, 3.5rem);
  --fs-hero: clamp(2.6rem, 1.6rem + 4.2vw, 5.4rem);

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --sh-sm: 0 1px 2px rgb(17 17 39 / .06), 0 1px 1px rgb(17 17 39 / .04);
  --sh: 0 8px 24px -10px rgb(17 17 39 / .18), 0 2px 6px rgb(17 17 39 / .05);
  --sh-lg: 0 24px 60px -20px rgb(17 17 39 / .35);
  --ease: cubic-bezier(.2, .7, .2, 1);

  --gutter: 16px;
  --container: 1320px;
  --header-h: 60px;
  --bottombar-h: 64px;
}
@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; --header-h: 80px; --bottombar-h: 0px; } }

/* 2. TEMEL --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 150px; }
body {
  margin: 0; font-family: var(--f-body); font-size: var(--fs-base); line-height: 1.6; color: var(--c-text);
  background: var(--c-paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px));
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--c-orange-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-ink); }
h1, h2, h3, h4 { font-family: var(--f-head); line-height: 1.08; color: var(--c-ink); margin: 0; font-weight: 700; letter-spacing: -.005em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
main { display: block; outline: none; }
:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--c-orange); color: var(--c-ink-950); }
[hidden] { display: none !important; }
.icon { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: middle; }

/* JS'siz: yalnızca JS gerektiren kontrolleri gizle (katalog ve ürün bilgisi görünür kalır) */
html:not(.js) .toolbar__filter, html:not(.js) .toolbar__right, html:not(.js) [data-add-to-cart], html:not(.js) .qty, html:not(.js) .bottombar > button { display: none !important; }
html:not(.js) .catalog__layout { grid-template-columns: minmax(0, 1fr); }

/* Oturuma göre görünürlük (JS'siz: misafir).
   data-auth boşlukla ayrılmış durum listesi alır: guest | customer | dealer — ör. data-auth="guest customer" = bayi olmayan herkes. */
html:not(.is-dealer):not(.is-customer) [data-auth]:not([data-auth~="guest"]) { display: none !important; }
html.is-customer [data-auth]:not([data-auth~="customer"]) { display: none !important; }
html.is-dealer [data-auth]:not([data-auth~="dealer"]) { display: none !important; }

/* 3. YARDIMCILAR --------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--c-ink); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600; transition: top .2s; }
.skip-link:focus { top: 12px; color: #fff; }
.muted { color: var(--c-muted); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-head); font-weight: 600; font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-orange-700); margin-bottom: 12px; }
.eyebrow .icon { width: 18px; height: 18px; }
.eyebrow--light { color: var(--c-orange); }
.eyebrow--dark { color: var(--c-ink); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--c-sand); color: var(--c-ink-700); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; text-decoration: none; }
.chip--brand { background: var(--c-ink); color: #fff; }
.chip--brand:hover { background: var(--c-orange); color: var(--c-ink); }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--c-ink); text-decoration: none; white-space: nowrap; }
.link-arrow .icon { width: 18px; height: 18px; transition: transform .25s var(--ease); color: var(--c-orange-700); }
.link-arrow:hover { color: var(--c-orange-700); }
.link-arrow:hover .icon { transform: translateX(4px); }
.link-arrow--back:hover .icon { transform: translateX(-4px); }
.note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--c-sand); border-radius: var(--r); font-size: var(--fs-sm); color: var(--c-ink-700); }
.note .icon { color: var(--c-orange-700); margin-top: 2px; }
.icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 0; background: transparent; color: var(--c-ink); }
.icon-btn:hover { background: var(--c-sand); }
.icon-btn .icon { width: 22px; height: 22px; }
.tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; }
.tag--tier { background: var(--c-green-50); color: var(--c-green); }

/* 4. BUTONLAR & FORM ÖĞELERİ --------------------------------------- */
.btn {
  --btn-h: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--btn-h); padding: 0 20px;
  border-radius: 8px; border: 1.5px solid transparent; font-weight: 600; font-size: .975rem; line-height: 1.1; text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s; white-space: nowrap;
}
.btn .icon { width: 19px; height: 19px; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--c-orange); color: var(--c-ink-950); box-shadow: 0 6px 18px -8px rgb(235 104 23 / .7); }
.btn--primary:hover { background: var(--c-orange-600); color: var(--c-ink-950); }
.btn--dark { background: var(--c-ink); color: #fff; }
.btn--dark:hover { background: var(--c-ink-700); color: #fff; }
.btn--ghost { background: var(--c-white); border-color: var(--c-line-2); color: var(--c-ink); }
.btn--ghost:hover { border-color: var(--c-ink); color: var(--c-ink); }
.btn--light { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .35); color: #fff; backdrop-filter: blur(6px); }
.btn--light:hover { background: #fff; color: var(--c-ink); border-color: #fff; }
.btn--sm { --btn-h: 38px; padding: 0 14px; font-size: .9rem; }
.btn--lg { --btn-h: 54px; padding: 0 26px; font-size: 1.03rem; }
.btn--block { width: 100%; }
.btn.is-added { background: var(--c-green); color: #fff; }
.btn.is-busy { opacity: .75; cursor: progress; }
.btn:disabled { cursor: not-allowed; }

.select { position: relative; display: inline-flex; align-items: center; }
.select select { appearance: none; -webkit-appearance: none; height: 42px; padding: 0 40px 0 14px; border: 1.5px solid var(--c-line-2); border-radius: 8px; background: var(--c-white); font-weight: 500; font-size: .95rem; cursor: pointer; width: 100%; }
.select .icon { position: absolute; right: 12px; pointer-events: none; width: 18px; height: 18px; color: var(--c-muted); }
.select--block { display: flex; width: 100%; }
.select--block select { height: 48px; }

.check { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px 0; font-size: .95rem; position: relative; }
.check input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.check__box { width: 20px; height: 20px; flex: none; border: 1.5px solid var(--c-line-2); border-radius: 5px; background: #fff; display: grid; place-items: center; transition: background .15s, border-color .15s; }
.check__box .icon { width: 14px; height: 14px; color: var(--c-ink-950); opacity: 0; stroke-width: 3; }
.check input:checked + .check__box { background: var(--c-orange); border-color: var(--c-orange); }
.check input:checked + .check__box .icon { opacity: 1; }
.check input:focus-visible + .check__box { outline: 3px solid var(--c-orange); outline-offset: 2px; }
.check input[aria-invalid="true"] + .check__box { border-color: var(--c-red); }
.check__label { flex: 1; line-height: 1.35; }
.check__count { font-size: var(--fs-xs); color: var(--c-muted); background: var(--c-sand); border-radius: 999px; padding: 1px 8px; min-width: 28px; text-align: center; }
.check.is-zero { opacity: .45; }
.check--inline { padding: 4px 0; align-items: flex-start; }
.check--inline .check__box { margin-top: 1px; }

/* 5. ÜST BAR & HEADER ---------------------------------------------- */
.topbar { background: var(--c-ink-950); color: var(--c-on-dark-muted); font-size: .82rem; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.topbar__msg { display: none; align-items: center; gap: 8px; }
.topbar__msg .icon { color: var(--c-orange); width: 18px; height: 18px; }
.topbar__links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.topbar__links a, .topbar__links button, .topbar__dealer { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; color: var(--c-on-dark); text-decoration: none; background: none; border: 0; font-size: inherit; border-radius: 6px; }
.topbar__links a:hover, .topbar__links button:hover { color: var(--c-orange); }
.topbar__links .icon { width: 16px; height: 16px; }
.topbar__wa span, .topbar__hide-sm { display: none; }
.topbar__links a span { white-space: nowrap; }
@media (max-width: 767px) { html.is-dealer .topbar__phone span { display: none; } }
.topbar__login { border: 1.5px solid var(--c-orange) !important; color: var(--c-orange) !important; font-weight: 600; padding: 4px 11px !important; border-radius: 999px !important; }
.topbar__login:hover { background: var(--c-orange) !important; color: var(--c-ink-950) !important; }
.topbar__dealer { color: var(--c-orange); font-weight: 600; }
.topbar__dealer > span { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1024px) { .topbar__b2b { display: none !important; } } /* masaüstünde header'daki Bayi Girişi düğmesi kullanılır */
@media (min-width: 768px) {
  .topbar__msg { display: inline-flex; }
  .topbar__wa span { display: inline; }
  .topbar__hide-sm { display: list-item; }
  .topbar__links { gap: 8px; }
}

.site-header { position: sticky; top: 0; z-index: 60; background: var(--c-white); border-bottom: 1px solid var(--c-line); transition: box-shadow .25s; }
.site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgb(17 17 39 / .35); }
.header__main {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "burger logo actions" "search search search";
  align-items: center; column-gap: 8px; row-gap: 10px; padding-block: 10px 12px;
}
.header__burger { grid-area: burger; display: inline-grid; place-items: center; width: 42px; height: 42px; margin-left: -8px; border: 0; background: none; color: var(--c-ink); border-radius: 50%; }
.header__burger .icon { width: 26px; height: 26px; }
.header__logo { grid-area: logo; display: inline-flex; justify-self: start; }
.header__logo img { height: 30px; width: auto; }
.search { grid-area: search; position: relative; display: flex; }
.search__input {
  width: 100%; height: 46px; padding: 0 56px 0 18px; border: 1.5px solid var(--c-line-2); border-radius: 999px; background: var(--c-paper);
  font-size: .97rem; transition: border-color .2s, background .2s, box-shadow .2s;
}
.search__input::placeholder { color: #7C7E97; }
.search__input:focus { outline: none; border-color: var(--c-orange); background: #fff; box-shadow: 0 0 0 4px rgb(235 104 23 / .15); }
.search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search__btn { position: absolute; right: 4px; top: 4px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--c-orange); color: var(--c-ink-950); display: grid; place-items: center; }
.search__btn .icon { width: 19px; height: 19px; }
.search__btn:hover { background: var(--c-orange-600); }
.search__results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 8px; z-index: 70; max-height: 70vh; overflow: auto; }
.search__item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--r); text-decoration: none; color: var(--c-ink); }
.search__item img { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; background: var(--c-sand); flex: none; }
.search__item img.is-illus { object-fit: contain; padding: 2px; }
.search__item strong { display: block; font-weight: 600; font-size: .93rem; line-height: 1.3; }
.search__item small { color: var(--c-muted); font-size: .78rem; }
.search__item:hover, .search__item.is-active { background: var(--c-orange-50); color: var(--c-ink); }
.search__all { display: block; padding: 10px 8px 6px; font-weight: 600; font-size: .9rem; border-top: 1px solid var(--c-line); margin-top: 6px; text-decoration: none; }
.search__all.is-active { background: var(--c-orange-50); }
.search__none { padding: 14px; color: var(--c-muted); font-size: .92rem; }

.header__actions { grid-area: actions; display: flex; align-items: center; gap: 4px; justify-self: end; }
.hact { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r); color: var(--c-ink); text-decoration: none; background: none; border: 0; }
.hact > .icon { width: 26px; height: 26px; }
.hact:hover { background: var(--c-sand); color: var(--c-ink); }
.hact__text { display: none; flex-direction: column; line-height: 1.15; text-align: left; }
.hact__text small { font-size: .75rem; color: var(--c-muted); }
.hact__text strong { font-size: .92rem; font-weight: 600; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hact__chev { width: 16px; height: 16px; color: var(--c-muted); display: none; }
.hact__badge { position: absolute; top: 2px; left: 24px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--c-orange); color: var(--c-ink-950); font-size: 11.5px; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; }
.hact__badge.is-empty { background: var(--c-line-2); }
.header__actions > [data-auth], .header__actions > .account { display: none; }
.account { position: relative; }
/* Bayi Girişi — müşteri hesabından ayrı, çerçeveli hap düğme */
.bpill { align-items: center; gap: 8px; height: 42px; padding: 0 16px; border: 1.5px solid var(--c-ink); border-radius: 999px; color: var(--c-ink); background: #fff; text-decoration: none; font-weight: 700; font-size: .9rem; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.bpill .icon { width: 18px; height: 18px; color: var(--c-orange-700); }
a.bpill:hover { background: var(--c-ink); color: #fff; }
a.bpill:hover .icon { color: var(--c-orange); }
.bpill--on { border-color: var(--c-orange); background: var(--c-orange-50); color: var(--c-orange-700); padding-right: 4px; }
.bpill--on > span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.bpill__out { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--c-orange-700); }
.bpill__out:hover { background: var(--c-orange-100); }
.bpill__out .icon { width: 17px; height: 17px; }
.account__menu { position: absolute; right: 0; top: calc(100% + 8px); width: 280px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 8px; z-index: 80; }
.account__menu a, .account__menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border-radius: var(--r); border: 0; background: none; text-decoration: none; color: var(--c-ink); font-weight: 500; font-size: .95rem; text-align: left; }
.account__menu a:hover, .account__menu button:hover { background: var(--c-sand); }
.account__menu .icon { color: var(--c-orange-700); width: 18px; height: 18px; }
.account__head { padding: 10px 10px 12px; border-bottom: 1px solid var(--c-line); margin-bottom: 6px; display: grid; gap: 4px; }
.account__head strong { font-size: 1rem; line-height: 1.25; }
.account__group { display: inline-flex; width: fit-content; padding: 2px 9px; border-radius: 999px; background: var(--c-orange-100); color: var(--c-orange-700); font-size: .78rem; font-weight: 700; }
.account__code { font-size: .8rem; color: var(--c-muted); }

@media (min-width: 1024px) {
  .header__main { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo search actions"; column-gap: 36px; padding-block: 14px; min-height: var(--header-h); }
  .header__burger { display: none; }
  .header__logo img { height: 40px; }
  .search { max-width: 680px; width: 100%; justify-self: center; }
  .search__input { height: 50px; }
  .search__btn { width: 42px; height: 42px; }
  .header__actions { gap: 6px; }
  .header__actions > [data-auth], .header__actions > .account { display: inline-flex; }
  .hact__text, .hact__chev { display: flex; }
  .hact { padding: 8px 12px; }
}

@media (min-width: 1024px) and (max-width: 1279px) { /* dar masaüstü: arama kutusuna yer aç */
  .header__main { column-gap: 20px; }
  .header__actions { gap: 2px; }
  .hact { padding: 8px; }
  .hact__chev { display: none; }
  .hact__text strong { max-width: 120px; }
  .bpill { padding: 0 12px; }
  .bpill--on { padding-right: 2px; }
  .bpill--on > span { max-width: 96px; }
}
.mainnav { display: none; border-top: 1px solid var(--c-line); }
@media (min-width: 1024px) { .mainnav { display: block; } }
.mainnav__inner { display: flex; align-items: center; gap: 8px; min-height: 52px; position: relative; }
.mainnav__all { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; margin-left: calc(var(--gutter) * -0); border: 0; background: var(--c-ink); color: #fff; font-weight: 600; font-size: .97rem; }
.mainnav__all .icon { width: 20px; height: 20px; }
.mainnav__all .icon:last-child { width: 16px; height: 16px; transition: transform .2s; }
.mainnav__all[aria-expanded="true"] .icon:last-child { transform: rotate(180deg); }
.mainnav__all:hover, .mainnav__all[aria-expanded="true"] { background: var(--c-ink-700); }
.mainnav__list { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow: hidden; }
.mainnav__list a { display: inline-flex; align-items: center; gap: 6px; height: 52px; padding: 0 12px; color: var(--c-ink); text-decoration: none; font-weight: 600; font-size: .95rem; position: relative; white-space: nowrap; }
.mainnav__list a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; background: var(--c-orange); transform: scaleX(0); transition: transform .25s var(--ease); }
.mainnav__list a:hover::after, .mainnav__list a[aria-current="page"]::after { transform: scaleX(1); }
.mainnav__list a:hover { color: var(--c-ink); }
.mainnav__sale { color: var(--c-orange-700) !important; }
.mainnav__sale .icon { width: 17px; height: 17px; }
.mainnav__cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .92rem; color: var(--c-orange-700); text-decoration: none; white-space: nowrap; }
.mainnav__cta .icon { width: 17px; height: 17px; }

.dealerbar { background: var(--c-orange-50); border-top: 1px solid var(--c-orange-100); color: var(--c-ink-700); font-size: .84rem; }
.dealerbar__inner { display: flex; align-items: center; gap: 8px; min-height: 34px; padding-block: 6px; line-height: 1.35; }
.dealerbar .icon { color: var(--c-orange-700); width: 17px; height: 17px; }

/* 6. MEGA MENÜ, ÇEKMECELER, ALT ÇUBUK ------------------------------ */
.mega { position: static; }
.mega__panel {
  position: absolute; left: var(--gutter); right: var(--gutter); top: 100%; z-index: 65; display: grid; grid-template-columns: 1fr 300px; gap: 24px;
  padding: 24px; background: #fff; border: 1px solid var(--c-line); border-top: 3px solid var(--c-orange); border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: var(--sh-lg);
  opacity: 0; transform: translateY(-6px); transition: opacity .18s, transform .18s var(--ease);
}
.mega.is-open .mega__panel { opacity: 1; transform: none; }
.mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mega__item { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: var(--r); text-decoration: none; color: var(--c-ink); transition: background .15s; }
.mega__item:hover { background: var(--c-sand); color: var(--c-ink); }
.mega__icon { width: 64px; height: 48px; border-radius: 8px; background: linear-gradient(160deg, var(--c-paper), var(--c-sand-2)); display: grid; place-items: center; flex: none; }
.mega__icon img { width: 58px; height: auto; }
.mega__item strong { display: block; font-weight: 600; font-size: .95rem; line-height: 1.25; }
.mega__item small { color: var(--c-muted); font-size: .8rem; }
.mega__promo { position: relative; border-radius: var(--r-lg); overflow: hidden; color: #fff; text-decoration: none; min-height: 260px; display: flex; }
.mega__promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mega__promo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(17 17 39 / .1), rgb(17 17 39 / .85)); }
.mega__promo-text { position: relative; z-index: 1; margin-top: auto; padding: 20px; display: grid; gap: 6px; }
.mega__promo-text small { color: var(--c-orange); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; }
.mega__promo-text strong { font-family: var(--f-head); font-size: 1.5rem; line-height: 1.1; }
.mega__promo .link-arrow { color: #fff; }
.mega__promo:hover { color: #fff; }

.drawer { position: fixed; inset: 0; z-index: 100; }
.drawer__overlay { position: absolute; inset: 0; background: rgb(17 17 39 / .55); opacity: 0; transition: opacity .3s; }
.drawer__panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(88vw, 390px); background: #fff; display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .32s var(--ease); outline: none; box-shadow: var(--sh-lg);
}
.drawer.is-open .drawer__overlay { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--c-line); }
.drawer__head img { height: 28px; width: auto; }
.drawer__heading { font-family: var(--f-head); font-size: 1.4rem; font-weight: 700; color: var(--c-ink); }
.drawer__body { flex: 1; overflow-y: auto; padding: 16px 18px 28px; overscroll-behavior: contain; }
.drawer__auth { display: grid; gap: 8px; margin-bottom: 12px; }
.drawer__b2b { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 18px; border: 1.5px solid var(--c-ink); border-radius: var(--r); color: var(--c-ink); text-decoration: none; }
.drawer__b2b > .icon:first-child { width: 22px; height: 22px; color: var(--c-orange-700); }
.drawer__b2b span { flex: 1; display: grid; line-height: 1.25; }
.drawer__b2b strong { font-size: .98rem; }
.drawer__b2b small { color: var(--c-muted); font-size: .8rem; }
.drawer__b2b > .icon:last-child { width: 18px; height: 18px; color: var(--c-muted); }
.drawer__b2b:hover { background: var(--c-sand); color: var(--c-ink); }
.drawer__customer { margin-bottom: 12px; }
.drawer__customer .account__code { word-break: break-all; }
.drawer__dealer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border-radius: var(--r); background: var(--c-orange-50); margin-bottom: 18px; }
.drawer__dealer p { display: grid; gap: 3px; }
.drawer__dealer small { color: var(--c-muted); font-size: .78rem; }
.drawer__dealer strong { line-height: 1.25; }
.drawer__title { font-family: var(--f-head); font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); margin: 8px 0 6px; }
.drawer__cats a { display: flex; align-items: center; gap: 12px; padding: 8px 4px; text-decoration: none; color: var(--c-ink); font-weight: 600; border-bottom: 1px solid var(--c-line); }
.drawer__cats img { width: 48px; height: 36px; border-radius: 6px; background: var(--c-sand); padding: 2px; }
.drawer__cats span { flex: 1; }
.drawer__cats .icon { width: 18px; height: 18px; color: var(--c-muted); }
.drawer__links a { display: block; padding: 10px 4px; text-decoration: none; color: var(--c-ink); font-weight: 500; border-bottom: 1px solid var(--c-line); }
.drawer__contact { display: grid; gap: 8px; margin-top: 18px; }
.drawer__contact a { display: flex; align-items: center; gap: 10px; color: var(--c-ink); font-weight: 600; text-decoration: none; }
.drawer__contact .icon { color: var(--c-orange-700); }
body.has-drawer { overflow: hidden; }

.bottombar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: rgb(255 255 255 / .97); backdrop-filter: blur(10px); border-top: 1px solid var(--c-line);
  padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -8px 24px -16px rgb(17 17 39 / .3);
}
.bottombar > a, .bottombar > button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 64px; border: 0; background: none; color: var(--c-ink-700); text-decoration: none; font-size: .72rem; font-weight: 600; }
.bottombar .icon { width: 23px; height: 23px; }
.bottombar > a:hover, .bottombar > button:hover { color: var(--c-orange-700); }
.bottombar__badge { position: absolute; top: 7px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--c-orange); color: var(--c-ink-950); font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }
.bottombar__badge.is-empty { display: none; }
@media (min-width: 1024px) { .bottombar { display: none; } }

/* 7. BÖLÜMLER ------------------------------------------------------- */
.section { padding-block: 56px; }
.section--tight { padding-block: 48px; }
.section--flush-top { padding-top: 0; }
.section--sand { background: var(--c-sand); }
.section--dark { background: var(--c-ink-950); color: var(--c-on-dark-muted); }
@media (min-width: 1024px) { .section { padding-block: 88px; } .section--tight { padding-block: 64px; } }
.section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 28px; }
.section__head--center { flex-direction: column; align-items: center; text-align: center; }
.section__head .eyebrow { margin-bottom: 8px; }
.section__title { font-size: var(--fs-xl); text-transform: none; }
.section__title--light { color: #fff; }
.section__foot { display: flex; justify-content: center; margin-top: 36px; }

/* ---------- Hero slider (ana sayfa) — slaytlar: _src/data/slides.mjs ---------- */
.hs {
  --hs-dur: 6500ms;            /* hero-slider.js → DURATION ile aynı */
  --hs-wipe: 1.15s;
  --hs-ease: cubic-bezier(.77, 0, .18, 1);
  --hs-bar: 64px;
  position: relative; background: var(--c-ink-950); color: var(--c-on-dark); overflow: hidden; isolation: isolate;
}
.hs__track { display: grid; min-height: 600px; touch-action: pan-y; }
.hs__slide { grid-area: 1 / 1; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; visibility: hidden; z-index: 0; --hs-d: .15s; }
.hs__slide.is-active { visibility: visible; z-index: 2; }
.hs__slide.is-leaving { visibility: visible; z-index: 1; }
.hs__slide.is-entering { --hs-d: .42s; }

/* Fotoğraf katmanı: kadraj + karartma + gren + vinyet */
.hs__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--c-ink-950); }
.hs__kb, .hs__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hs__img { object-fit: cover; object-position: 50% 30%; }
.hs__media::before, .hs__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hs__media::after {
  background:
    linear-gradient(0deg, var(--c-ink-950) 0, rgb(17 17 39 / .94) 240px, rgb(17 17 39 / .78) 380px, rgb(17 17 39 / .2) 540px, rgb(17 17 39 / 0) 620px),
    linear-gradient(180deg, rgb(17 17 39 / .45) 0, rgb(17 17 39 / 0) 120px),
    radial-gradient(120% 90% at 70% 30%, transparent 45%, rgb(17 17 39 / .5) 100%);
}
.hs__media::before {
  z-index: 1; opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hs__media::after { z-index: 2; }
[data-slide="orman"] .hs__img { object-position: 62% 40%; }
[data-slide="bahce"] .hs__img { object-position: 78% 50%; }
[data-slide="bayilik"] .hs__img { object-position: 60% 30%; }
[data-slide="servis"] .hs__img { object-position: 55% 40%; }

/* Turuncu diyagonal perde (yalnızca geçişte) */
.hs__wipe { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, var(--c-orange-600), var(--c-orange)); clip-path: polygon(-7% 0, 0 0, -15% 100%, -22% 100%); visibility: hidden; }

/* İçerik */
.hs__inner { position: relative; display: grid; gap: 28px; padding-top: 140px; padding-bottom: calc(var(--hs-bar) + 22px); }
.hs__content { max-width: 720px; }
.hs__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-family: var(--f-head); font-weight: 600; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-orange); }
.hs__eyebrow .icon { width: 18px; height: 18px; }
.hs__eyebrow, .hs__text, .hs__points { text-shadow: 0 1px 12px rgb(0 0 0 / .45); }
.hs__title { font-size: clamp(2.3rem, 1.25rem + 4.6vw, 5.5rem); color: #fff; text-transform: uppercase; line-height: .94; letter-spacing: -.012em; font-weight: 800; text-wrap: balance; }
.hs__line { display: block; overflow: hidden; padding-block: .1em .08em; margin-block: -.1em -.08em; }
.hs__line > span { display: block; }
.hs__accent { color: var(--c-orange); }
.hs__text { margin-top: 16px; max-width: 540px; font-size: 1.02rem; line-height: 1.55; color: #D4D6E2; }
.hs__ctas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 22px; }
.hs__ctas .btn { --btn-h: 50px; padding: 0 14px; font-size: .98rem; }
.hs__points { display: none; }
.hs__card, .hs__badge { display: none; }

/* Alt çubuk: göstergeler + oklar */
.hs__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; }
.hs__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--hs-bar); }
.hs__dots { display: flex; gap: 8px; flex: 1; max-width: 640px; min-width: 0; }
.hs__dot { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 8px; row-gap: 8px; padding: 10px 0; border: 0; background: none; color: rgb(255 255 255 / .55); text-align: left; cursor: pointer; font: inherit; }
.hs__dot-num { font-family: var(--f-head); font-weight: 700; font-size: .95rem; letter-spacing: .04em; line-height: 1; transition: color .3s; }
.hs__dot-label { display: none; font-size: .82rem; font-weight: 600; line-height: 1; letter-spacing: .02em; transition: color .3s; }
.hs__dot-track { grid-column: 1 / -1; position: relative; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .2); overflow: hidden; }
.hs__dot-fill { position: absolute; inset: 0; background: var(--c-orange); transform: scaleX(0); transform-origin: 0 50%; border-radius: inherit; }
.hs__dot:hover { color: #fff; }
.hs__dot[aria-current="true"] { color: #fff; }
.hs__dot[aria-current="true"] .hs__dot-num { color: var(--c-orange); }
.hs__dot[aria-current="true"] .hs__dot-fill { transform: scaleX(1); }
html.js .hs.is-auto .hs__dot[aria-current="true"] .hs__dot-fill { animation: hsFill var(--hs-dur) linear both; }
.hs.is-paused .hs__dot-fill, .hs.is-paused .hs__kb { animation-play-state: paused !important; }
.hs__nav { display: flex; align-items: center; gap: 8px; flex: none; }
.hs__count { display: none; font-family: var(--f-head); font-weight: 600; font-size: 1rem; letter-spacing: .06em; color: rgb(255 255 255 / .55); margin-right: 8px; font-variant-numeric: tabular-nums; }
.hs__count b { color: #fff; font-weight: 700; font-size: 1.35rem; }
.hs__count span { margin-inline: 6px; }
.hs__btn { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / .28); background: rgb(17 17 39 / .35); color: #fff; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hs__btn .icon { width: 20px; height: 20px; }
.hs__btn:hover { background: var(--c-orange); border-color: var(--c-orange); color: var(--c-ink-950); }
.hs__btn:active { transform: scale(.94); }
.hs__btn--toggle .icon { width: 17px; height: 17px; }
.hs__ico-play { display: none; }
.hs.is-stopped .hs__ico-play { display: block; }
.hs.is-stopped .hs__ico-pause { display: none; }
html:not(.js) .hs__bar { display: none; }
html:not(.js) .hs__inner { padding-bottom: 32px; }

@media (max-width: 399px) { .hs__ctas .btn { font-size: .93rem; padding: 0 10px; gap: 6px; } .hs__ctas .btn .icon { width: 17px; height: 17px; } .hs__ctas .hs__end { display: none; } }
@media (min-width: 400px) { .hs__ctas .btn { padding: 0 16px; } }
@media (min-width: 640px) {
  .hs { --hs-bar: 76px; }
  .hs__track { min-height: 620px; }
  .hs__inner { padding-top: 160px; }
  .hs__text { font-size: var(--fs-md); }
  .hs__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
  .hs__ctas .btn { --btn-h: 54px; padding: 0 26px; font-size: 1.03rem; }
  .hs__dot { grid-template-columns: auto 1fr; }
  .hs__dot-label { display: block; }
  .hs__count { display: block; }
  .hs__btn { width: 46px; height: 46px; }
}
@media (min-width: 1024px) {
  .hs { --hs-bar: 88px; }
  .hs__track { min-height: clamp(620px, calc(100svh - 200px), 740px); }
  .hs__slide { justify-content: center; }
  /* Fotoğraf sağda (1024 px kaynak görselin fazla büyütülmemesi için), solda kömür zemine erir */
  .hs__kb { left: max(24%, calc(100% - 1320px)); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%); mask-image: linear-gradient(90deg, transparent 0, #000 26%); }
  .hs__kb { width: auto; }
  .hs__media::after {
    background:
      linear-gradient(90deg, rgb(17 17 39 / .85) 0%, rgb(17 17 39 / .6) 22%, rgb(17 17 39 / .25) 45%, rgb(17 17 39 / .04) 72%, rgb(17 17 39 / .28) 100%),
      linear-gradient(0deg, rgb(17 17 39 / .9) 0%, rgb(17 17 39 / 0) 32%),
      radial-gradient(110% 100% at 70% 40%, transparent 50%, rgb(17 17 39 / .5) 100%);
  }
  .hs__inner { grid-template-columns: minmax(0, 1fr) 340px; align-items: end; gap: 48px; padding-top: 64px; padding-bottom: calc(var(--hs-bar) + 40px); width: 100%; }
  .hs__content { max-width: 820px; }
  .hs__title { font-size: clamp(3.4rem, 1rem + 4.4vw, 5.6rem); }
  .hs__text { max-width: 560px; }
  .hs__points { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; font-size: .9rem; color: #C2C4D5; }
  .hs__points li { display: inline-flex; align-items: center; gap: 8px; }
  .hs__points .icon { width: 16px; height: 16px; color: var(--c-orange); stroke-width: 2.4; }
  .hs__card { display: grid; gap: 12px; justify-self: end; width: 100%; max-width: 340px; padding: 20px; border-radius: var(--r-lg); background: rgb(255 255 255 / .97); color: var(--c-text); box-shadow: 0 30px 70px -24px rgb(0 0 0 / .65); }
  .hs__card-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 700; color: var(--c-orange-700); text-transform: uppercase; letter-spacing: .1em; }
  .hs__card-kicker .icon { width: 15px; height: 15px; }
  .hs__card-head { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; }
  .hs__card-img { width: 84px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--c-sand); }
  .hs__card-title { font-family: var(--f-head); font-weight: 700; font-size: 1.28rem; line-height: 1.08; color: var(--c-ink); text-decoration: none; display: block; }
  .hs__card-title:hover { color: var(--c-orange-700); }
  .hs__card-specs { margin-top: 4px; color: var(--c-muted); font-size: .85rem; }
  .hs__card .price { padding-top: 12px; border-top: 1px solid var(--c-line); }
  .hs__badge { display: flex; align-items: center; gap: 14px; justify-self: end; padding: 14px 20px 14px 14px; border-radius: 14px; background: rgb(17 17 39 / .5); border: 1px solid rgb(255 255 255 / .16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: .86rem; color: #C8CADA; line-height: 1.35; box-shadow: 0 20px 50px -20px rgb(0 0 0 / .6); }
  .hs__badge .icon { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--c-orange); color: var(--c-ink-950); flex: none; }
  .hs__badge strong { display: block; color: #fff; font-family: var(--f-head); font-size: 1.2rem; font-weight: 700; letter-spacing: .01em; }
  .hs__dots { gap: 14px; }
  .hs__dot { padding: 14px 0; }
  .hs__bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgb(255 255 255 / .14), rgb(255 255 255 / .04)); }
}

/* Hareket — yalnızca transform / opacity / clip-path */
.hs__slide.is-active .hs__kb, .hs__slide.is-leaving .hs__kb { animation: hsKB calc(var(--hs-dur) + 3s) linear both; }
.hs__slide.is-active .hs__img { animation: hsIntro 1.6s var(--ease) both; }
.hs__slide.is-active .hs__eyebrow,
.hs__slide.is-active .hs__text,
.hs__slide.is-active .hs__ctas,
.hs__slide.is-active .hs__points,
.hs__slide.is-active .hs__card,
.hs__slide.is-active .hs__badge { animation: hsUp .8s var(--ease) both; }
.hs__slide.is-active .hs__eyebrow { animation-delay: var(--hs-d); }
.hs__slide.is-active .hs__line > span { animation: hsLine .95s cubic-bezier(.2, .8, .1, 1) both; animation-delay: calc(var(--hs-d) + .08s); }
.hs__slide.is-active .hs__line:nth-child(2) > span { animation-delay: calc(var(--hs-d) + .17s); }
.hs__slide.is-active .hs__line:nth-child(3) > span { animation-delay: calc(var(--hs-d) + .26s); }
.hs__slide.is-active .hs__text { animation-delay: calc(var(--hs-d) + .34s); }
.hs__slide.is-active .hs__ctas { animation-delay: calc(var(--hs-d) + .44s); }
.hs__slide.is-active .hs__points { animation-delay: calc(var(--hs-d) + .54s); }
.hs__slide.is-active .hs__card,
.hs__slide.is-active .hs__badge { animation: hsCard 1s var(--ease) both; animation-delay: calc(var(--hs-d) + .4s); }
/* Geçiş: yeni fotoğraf diyagonal perdeyle açılır, eskisi hafifçe kayar */
.hs__slide.is-entering .hs__media { animation: hsReveal var(--hs-wipe) var(--hs-ease) both; }
.hs__slide.is-entering .hs__img { animation: hsZoomIn 1.7s cubic-bezier(.2, .7, .1, 1) both; }
.hs__slide.is-entering .hs__wipe { visibility: visible; animation: hsWipe var(--hs-wipe) var(--hs-ease) both; }
.hs__slide.is-entering.is-rev .hs__media { animation-name: hsRevealRev; }
.hs__slide.is-entering.is-rev .hs__wipe { animation-name: hsWipeRev; }
.hs__slide.is-leaving .hs__img { animation: hsPush var(--hs-wipe) var(--hs-ease) both; }
.hs__slide.is-leaving.is-rev .hs__img { animation-name: hsPushRev; }
.hs__slide.is-leaving .hs__inner { animation: hsOut .5s ease both; }

@keyframes hsFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hsKB { from { transform: scale(1); } to { transform: scale(1.07) translate3d(-1%, -.5%, 0); } }
@keyframes hsIntro { from { opacity: 0; transform: scale(1.14); } to { opacity: 1; transform: none; } }
@keyframes hsZoomIn { from { transform: scale(1.2); } to { transform: none; } }
@keyframes hsUp { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes hsLine { from { transform: translate3d(0, 135%, 0); } to { transform: none; } }
@keyframes hsCard { from { opacity: 0; transform: translate3d(0, 36px, 0) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes hsOut { to { opacity: 0; transform: translate3d(-24px, 0, 0); } }
@keyframes hsPush { to { transform: translate3d(-4%, 0, 0) scale(1.1); } }
@keyframes hsPushRev { to { transform: translate3d(4%, 0, 0) scale(1.1); } }
@keyframes hsReveal {
  from { clip-path: polygon(-30% 0, -7% 0, -22% 100%, -30% 100%); }
  to { clip-path: polygon(-30% 0, 115% 0, 100% 100%, -30% 100%); }
}
@keyframes hsWipe {
  from { clip-path: polygon(-7% 0, 0% 0, -15% 100%, -22% 100%); }
  to { clip-path: polygon(115% 0, 122% 0, 107% 100%, 100% 100%); }
}
@keyframes hsRevealRev {
  from { clip-path: polygon(130% 0, 107% 0, 122% 100%, 130% 100%); }
  to { clip-path: polygon(130% 0, -15% 0, 0% 100%, 130% 100%); }
}
@keyframes hsWipeRev {
  from { clip-path: polygon(107% 0, 100% 0, 115% 100%, 122% 100%); }
  to { clip-path: polygon(-15% 0, -22% 0, -7% 100%, 0% 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .hs__slide *, .hs__slide, .hs__media, .hs__kb, .hs__img, .hs__dot-fill { animation: none !important; }
  .hs__wipe { display: none; }
  .hs__btn--toggle { display: none; }
}

/* USP şeridi */
.usp { background: var(--c-white); border-bottom: 1px solid var(--c-line); }
.usp__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.usp__list li { display: flex; align-items: center; gap: 12px; padding: 16px 8px; font-size: .84rem; color: var(--c-muted); line-height: 1.35; }
.usp__list .icon { width: 30px; height: 30px; color: var(--c-orange-700); flex: none; }
.usp__list strong { display: block; color: var(--c-ink); font-size: .95rem; font-weight: 700; }
@media (min-width: 900px) {
  .usp__list { grid-template-columns: repeat(4, 1fr); }
  .usp__list li { padding: 22px 16px; border-left: 1px solid var(--c-line); }
  .usp__list li:first-child { border-left: 0; padding-left: 0; }
}

/* Kategori ızgarası */
.catgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .catgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) { .catgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .catgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.cattile { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: var(--c-ink); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.cattile:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: var(--c-line-2); color: var(--c-ink); }
.cattile__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-sand); }
.cattile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.cattile:hover .cattile__media img { transform: scale(1.06); }
.cattile--illus .cattile__media { background: linear-gradient(160deg, #FAF7F2, var(--c-sand-2)); }
.cattile--illus .cattile__media img { object-fit: contain; padding: 8% 10%; }
.cattile__text { display: grid; gap: 2px; padding: 12px 44px 14px 14px; }
.cattile__text strong { font-family: var(--f-head); font-size: 1.12rem; font-weight: 700; line-height: 1.1; }
.cattile__text small { color: var(--c-muted); font-size: .8rem; }
.cattile__arrow { position: absolute; right: 12px; bottom: 14px; width: 28px; height: 28px; border-radius: 50%; background: var(--c-sand); display: grid; place-items: center; transition: background .25s, transform .25s var(--ease); }
.cattile__arrow .icon { width: 15px; height: 15px; }
.cattile:hover .cattile__arrow { background: var(--c-orange); transform: translateX(2px); }

/* Sekmeler */
.tabs { display: flex; gap: 6px; }
html:not(.js) .tabs[data-tabs] { display: none; }
html.js .tabs__fallback-title { display: none; }
.tabs__fallback-title { font-size: var(--fs-lg); margin: 24px 0 14px; }
.tabs--pill { background: #fff; padding: 5px; border-radius: 999px; border: 1px solid var(--c-line); overflow-x: auto; max-width: 100%; }
.tabs--pill .tabs__btn { border: 0; background: none; padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--c-muted); white-space: nowrap; }
.tabs--pill .tabs__btn[aria-selected="true"] { background: var(--c-ink); color: #fff; }
.tabs--line { border-bottom: 1px solid var(--c-line); gap: 0; overflow-x: auto; scrollbar-width: none; }
.tabs--line .tabs__btn { border: 0; background: none; padding: 14px 18px; font-weight: 600; color: var(--c-muted); position: relative; white-space: nowrap; font-size: 1rem; }
.tabs--line .tabs__btn::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; background: var(--c-orange); transform: scaleX(0); transition: transform .25s var(--ease); }
.tabs--line .tabs__btn[aria-selected="true"] { color: var(--c-ink); }
.tabs--line .tabs__btn[aria-selected="true"]::after { transform: scaleX(1); }
.tabs__panel:focus-visible { outline-offset: 6px; }

/* Bayi bandı */
.dealerband { position: relative; background: var(--c-ink-950); color: var(--c-on-dark-muted); overflow: hidden; isolation: isolate; padding-block: 64px; }
.dealerband__bg { position: absolute; inset: 0; z-index: -1; }
.dealerband__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .28; filter: saturate(.6); }
.dealerband__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 0% 0%, rgb(17 17 39 / .55), rgb(17 17 39 / .95)); }
.dealerband__inner { display: grid; gap: 32px; }
.dealerband__title { font-size: var(--fs-2xl); color: #fff; max-width: 640px; }
.dealerband__lead { margin-top: 16px; max-width: 560px; font-size: var(--fs-md); color: #CCCEDD; }
.dealerband__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.dealerband__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dealerband__grid li { display: grid; gap: 6px; padding: 18px; border-radius: var(--r-lg); background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .1); backdrop-filter: blur(6px); font-size: .9rem; line-height: 1.45; }
.dealerband__grid .icon { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--c-orange); color: var(--c-ink-950); margin-bottom: 6px; }
.dealerband__grid strong { color: #fff; font-family: var(--f-head); font-size: 1.25rem; font-weight: 700; }
.pricepeek { background: #fff; border-radius: var(--r-lg); padding: 18px; color: var(--c-text); box-shadow: var(--sh-lg); display: grid; gap: 8px; }
.pricepeek__title { font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.pricepeek__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r); background: var(--c-paper); font-size: .9rem; }
.pricepeek__row > span:first-child { font-weight: 600; color: var(--c-ink); }
.pricepeek__row--dealer { background: var(--c-orange-50); outline: 1.5px solid var(--c-orange-100); }
.pricepeek__val { text-align: right; color: var(--c-muted); }
.pricepeek__val b { color: var(--c-ink); }
.pricepeek__val em { font-style: normal; font-weight: 700; color: var(--c-ink-950); background: var(--c-orange); padding: 1px 6px; border-radius: 4px; }
@media (min-width: 1024px) {
  .dealerband { padding-block: 104px; }
  .dealerband__inner { grid-template-columns: 1.1fr 1fr; grid-template-areas: "content grid" "peek grid"; column-gap: 64px; row-gap: 28px; align-items: start; }
  .dealerband__content { grid-area: content; }
  .dealerband__grid { grid-area: grid; align-self: center; gap: 16px; }
  .dealerband__grid li { padding: 26px; }
  .pricepeek { grid-area: peek; max-width: 520px; }
}

/* Kampanya kutuları */
.promos { display: grid; gap: 16px; }
@media (min-width: 900px) { .promos { grid-template-columns: 1.15fr 1fr; gap: 24px; } }
.promo { position: relative; display: flex; align-items: center; min-height: 240px; border-radius: var(--r-xl); overflow: hidden; text-decoration: none; isolation: isolate; padding: 28px; }
.promo__text { display: grid; gap: 10px; max-width: 420px; position: relative; z-index: 1; }
.promo__text .eyebrow { margin: 0; }
.promo__title { font-family: var(--f-head); font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.3rem); line-height: 1.04; font-weight: 800; text-transform: uppercase; }
.promo__cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; margin-top: 6px; }
.promo__cta .icon { transition: transform .25s var(--ease); }
.promo:hover .promo__cta .icon { transform: translateX(5px); }
.promo--orange { background: var(--c-orange); color: var(--c-ink-950); }
.promo--orange::before { content: ""; position: absolute; right: -80px; top: -80px; width: 340px; height: 340px; border-radius: 50%; background: rgb(255 255 255 / .16); z-index: -1; }
.promo--orange:hover { color: var(--c-ink-950); }
.promo__title { color: inherit; }
.promo__illus { position: absolute; right: -10px; bottom: -6px; width: 46%; max-width: 300px; z-index: 0; opacity: .95; transition: transform .5s var(--ease); }
.promo--orange .promo__text { max-width: 58%; }
.promo:hover .promo__illus { transform: translateX(-6px) rotate(-2deg); }
.promo--dark { background: var(--c-ink); color: #fff; }
.promo--dark:hover { color: #fff; }
.promo__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform .8s var(--ease); }
.promo--dark::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(17 17 39 / .92) 10%, rgb(17 17 39 / .4)); z-index: -1; }
.promo--dark:hover .promo__bg { transform: scale(1.05); }
@media (max-width: 479px) { .promo--orange .promo__text { max-width: 100%; padding-bottom: 110px; } .promo__illus { width: 58%; } }

/* Seriler */

/* Split */
.split { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 64px; } }
.split__media { position: relative; border-radius: var(--r-xl); overflow: hidden; }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split__badge { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r); background: #fff; color: var(--c-muted); box-shadow: var(--sh); font-size: .85rem; line-height: 1.3; }
.split__badge .icon { width: 34px; height: 34px; padding: 7px; border-radius: 9px; background: var(--c-orange); color: var(--c-ink-950); }
.split__badge strong { display: block; color: var(--c-ink); font-size: .98rem; }
.split__lead { margin-top: 16px; font-size: var(--fs-md); }
.section--dark .split__lead { color: #C8CADA; }
.split__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.features { display: grid; gap: 16px; margin-top: 26px; }
.features li { display: flex; gap: 14px; align-items: flex-start; font-size: .94rem; }
.features .icon { width: 42px; height: 42px; padding: 10px; border-radius: 12px; background: rgb(235 104 23 / .14); color: var(--c-orange); flex: none; }
.features strong { display: block; color: #fff; font-size: 1.05rem; }
.features--dark strong { color: var(--c-ink); }
.features--dark .icon { color: var(--c-orange-700); background: var(--c-orange-50); }
.features--dark li { color: var(--c-muted); }
.features a { font-weight: 600; }

/* Yazı kartları */
.agrid { display: grid; gap: 20px; }
@media (min-width: 720px) { .agrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .agrid { grid-template-columns: repeat(3, 1fr); gap: 28px; } .agrid--2 { grid-template-columns: repeat(2, 1fr); } }
.acard { display: flex; flex-direction: column; background: #fff; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--c-line); transition: box-shadow .3s, transform .3s var(--ease); }
.acard:hover { box-shadow: var(--sh); transform: translateY(-3px); }
.acard__media { aspect-ratio: 16 / 10; overflow: hidden; }
.acard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.acard:hover .acard__media img { transform: scale(1.05); }
.acard__body { padding: 20px; display: grid; gap: 10px; align-content: start; }
.acard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: .82rem; color: var(--c-muted); }
.acard__meta > span:not(.chip) { display: inline-flex; align-items: center; gap: 5px; }
.acard__meta .icon { width: 15px; height: 15px; }
.acard__title { font-size: 1.45rem; line-height: 1.12; }
.acard__title a { color: var(--c-ink); text-decoration: none; }
.acard__title a:hover { color: var(--c-orange-700); }
.acard p { font-size: .94rem; color: var(--c-muted); }

/* 8. ÜRÜN KARTI & FİYAT -------------------------------------------- */
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1200px) { .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } }
.pcard { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; transition: box-shadow .3s, border-color .3s, transform .3s var(--ease); min-width: 0; }
.pcard:hover { box-shadow: var(--sh); border-color: var(--c-line-2); transform: translateY(-3px); }
.pcard__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-sand); }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.05); }
.pcard__media--illus { background: linear-gradient(160deg, #FAF7F2 0%, var(--c-sand-2) 100%); }
.pcard__media--illus img { object-fit: contain; padding: 6% 8%; }
.pcard__badges { position: absolute; left: 10px; top: 10px; display: flex; flex-wrap: wrap; gap: 5px; z-index: 1; }
.badge { display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; line-height: 1.4; }
.badge--new { background: var(--c-ink); color: #fff; }
.badge--hot { background: var(--c-orange); color: var(--c-ink-950); }
.badge--sale { background: var(--c-red); color: #fff; }
.pcard__body { display: flex; flex-direction: column; gap: 8px; padding: 12px; flex: 1; }
.pcard__meta { display: flex; justify-content: space-between; gap: 8px; font-size: .72rem; color: var(--c-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pcard__sku { font-weight: 500; letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard__title { font-family: var(--f-body); font-size: .93rem; font-weight: 600; line-height: 1.32; letter-spacing: 0; }
.pcard__title a { color: var(--c-ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.pcard__title a:hover { color: var(--c-orange-700); }
.pcard__specs { display: flex; flex-wrap: wrap; gap: 4px; }
.pcard__specs li { font-size: .72rem; padding: 2px 7px; border-radius: 4px; background: var(--c-sand); color: var(--c-ink-700); font-weight: 600; white-space: nowrap; }
.pcard__summary { display: none; font-size: .92rem; color: var(--c-muted); }
.pcard__foot { margin-top: auto; display: grid; gap: 10px; padding-top: 4px; }
.pcard__actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; position: relative; z-index: 1; }
.pcard__add span { display: inline; }
.price, .pcard__actions, .price a { position: relative; z-index: 1; }
@media (min-width: 640px) {
  .pcard__body { padding: 16px; gap: 9px; }
  .pcard__title { font-size: 1rem; }
  .pcard__actions { flex-direction: row; align-items: center; justify-content: space-between; }
}

.stock { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }
.stock--in { color: var(--c-green); }
.stock--low { color: var(--c-amber); }
.stock--out { color: var(--c-muted); }

.price { display: flex; flex-direction: column; gap: 1px; min-height: 64px; }
.price__label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); display: inline-flex; align-items: center; gap: 5px; }
.price__label .icon { width: 13px; height: 13px; }
.price__label--dealer { color: var(--c-green); }
.price__main { font-family: var(--f-head); font-weight: 700; font-size: 1.5rem; color: var(--c-ink); line-height: 1.1; letter-spacing: -.005em; font-variant-numeric: tabular-nums; }
.price__main small { font-family: var(--f-body); font-size: .72rem; font-weight: 600; color: var(--c-muted); margin-left: 4px; letter-spacing: 0; }
.price__note { font-size: .74rem; color: var(--c-muted); }
.price__login { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: .78rem; font-weight: 600; color: var(--c-orange-700); text-decoration: none; width: fit-content; }
.price__login .icon { width: 13px; height: 13px; }
.price__login:hover { text-decoration: underline; color: var(--c-orange-700); }
.price__list { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--c-muted); }
.price__list s { text-decoration-thickness: 1.5px; }
.price__off { font-size: .7rem; font-weight: 800; background: var(--c-orange); color: var(--c-ink-950); padding: 1px 6px; border-radius: 4px; }
.price__locked { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r); background: var(--c-sand); font-size: .84rem; color: var(--c-ink-700); line-height: 1.3; }
.price__locked .icon { width: 18px; height: 18px; color: var(--c-orange-700); flex: none; }
.price__locked a { font-weight: 700; }
.price__tier { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: var(--r); background: var(--c-green-50); color: var(--c-green); font-size: .86rem; line-height: 1.35; }
.price__tier .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.price__tier em { font-style: normal; font-weight: 700; }
.price.is-loading > * { visibility: hidden; }
.price.is-loading { border-radius: var(--r); background: linear-gradient(90deg, var(--c-sand) 25%, #fff 50%, var(--c-sand) 75%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.price--dealer .price__main { color: var(--c-ink); }
.price--card.price--dealer .price__main { font-size: 1.4rem; }
.price--detail, .price--hero { min-height: 90px; }
.price--detail .price__main { font-size: 2.4rem; }
.price--detail .price__note, .price--detail .price__list { font-size: .9rem; }
.price--detail .price__label { font-size: .78rem; }
.price--hero .price__main { font-size: 2rem; }
.price--line { min-height: 0; }
.price--line .price__main { font-size: 1.15rem; }
.price--line .price__note, .price--line .price__login, .price--line .price__label { display: none; }
.price--line .price__locked { padding: 6px 8px; font-size: .78rem; }
@media (max-width: 639px) {
  .pcard__sku { display: none; }
  .price--card .price__main { font-size: 1.28rem; }
  .price--card:not(.price--dealer) .price__note { display: none; }
  .price--card .price__login { font-size: .72rem; }
  .price--card .price__locked { font-size: .76rem; padding: 8px; }
}

/* 9. KATALOG -------------------------------------------------------- */
.crumbs { border-bottom: 1px solid var(--c-line); background: #fff; }
.crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding-block: 12px; font-size: .84rem; color: var(--c-muted); }
.crumbs__list li { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.crumbs__list a { color: var(--c-muted); text-decoration: none; }
.crumbs__list a:hover { color: var(--c-orange-700); }
.crumbs__list .icon { width: 14px; height: 14px; opacity: .6; }
.crumbs__list [aria-current] { color: var(--c-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }

.cathero { background: var(--c-sand); border-bottom: 1px solid var(--c-line); overflow: hidden; }
.cathero__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 28px; }
.cathero__title { font-size: var(--fs-2xl); text-transform: uppercase; font-weight: 800; }
.cathero__desc { margin-top: 10px; max-width: 640px; color: var(--c-muted); }
.cathero__img { display: none; width: 260px; flex: none; margin-block: -12px; }
@media (min-width: 768px) { .cathero__inner { padding-block: 40px; } .cathero__img { display: block; } }

.catalog { padding-block: 24px 64px; }
.catalog__layout { display: grid; gap: 32px; }
@media (min-width: 1024px) { .catalog__layout { grid-template-columns: 272px minmax(0, 1fr); align-items: start; } }
.catalog__main { min-width: 0; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 14px; }
.toolbar__filter { order: 0; }
.toolbar__fcount { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--c-orange); color: var(--c-ink-950); font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.toolbar__count { color: var(--c-muted); font-size: .92rem; margin-right: auto; }
.toolbar__count strong { color: var(--c-ink); }
.toolbar__right { display: flex; gap: 10px; align-items: center; width: 100%; }
.toolbar__right .select { flex: 1; }
.viewtoggle { display: inline-flex; border: 1.5px solid var(--c-line-2); border-radius: 8px; overflow: hidden; background: #fff; }
.viewtoggle button { width: 42px; height: 39px; border: 0; background: none; display: grid; place-items: center; color: var(--c-muted); }
.viewtoggle button[aria-pressed="true"] { background: var(--c-ink); color: #fff; }
.viewtoggle .icon { width: 19px; height: 19px; }
@media (min-width: 640px) { .toolbar__right { width: auto; } .toolbar__right .select { flex: none; } }
@media (min-width: 1024px) { .toolbar__filter { display: none; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chips:empty { display: none; }
.chip--removable { border: 1px solid var(--c-line-2); background: #fff; font-size: .8rem; padding: 5px 8px 5px 12px; cursor: pointer; color: var(--c-ink); }
.chip--removable .icon { width: 14px; height: 14px; }
.chip--removable:hover { border-color: var(--c-ink); }

.drawer--filters .drawer__panel { left: auto; right: 0; transform: translateX(100%); }
.drawer--filters.is-open .drawer__panel { transform: none; }
.drawer__head--filters { padding-left: 20px; }
.filters { padding: 8px 20px 24px; overflow-y: auto; flex: 1; }
.filters__head { display: none; }
.filters__title { display: flex; align-items: center; gap: 8px; font-family: var(--f-head); font-weight: 700; font-size: 1.3rem; color: var(--c-ink); }
.filters__title .icon { width: 20px; height: 20px; color: var(--c-orange-700); }
.filters__reset { border: 0; background: none; color: var(--c-orange-700); font-weight: 600; font-size: .88rem; padding: 4px; }
.fgroup { padding-block: 14px; border-bottom: 1px solid var(--c-line); }
.fgroup__title { font-weight: 700; font-size: .95rem; color: var(--c-ink); margin-bottom: 6px; padding: 0; }
.fgroup__list { display: grid; gap: 0; }
.range { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.range label { flex: 1; }
.range input { width: 100%; height: 42px; padding: 0 10px; border: 1.5px solid var(--c-line-2); border-radius: 8px; background: #fff; }
.filters__apply { margin-top: 18px; position: sticky; bottom: 0; }
@media (min-width: 1024px) {
  .drawer--filters { position: sticky; top: calc(var(--header-h) + 76px); inset: auto; z-index: 1; max-height: calc(100vh - var(--header-h) - 96px); }
  .drawer--filters .drawer__overlay, .drawer--filters .drawer__head, .filters__apply { display: none; }
  .drawer--filters .drawer__panel { position: static; transform: none; width: auto; box-shadow: none; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); max-height: inherit; overflow: hidden; }
  .filters { padding: 18px 20px 20px; }
  .filters__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 6px; border-bottom: 1px solid var(--c-line); }
  .fgroup:last-of-type { border-bottom: 0; }
}

.pgrid--catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .pgrid--catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) and (max-width: 1199px) { .pgrid--catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .pgrid--catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pgrid.is-list { grid-template-columns: 1fr; }
.pgrid.is-list .pcard { flex-direction: row; }
.pgrid.is-list .pcard__media { width: 36%; max-width: 280px; flex: none; aspect-ratio: auto; min-height: 100%; }
.pgrid.is-list .pcard__summary { display: block; }
@media (max-width: 639px) { .pgrid.is-list .pcard__summary { display: none; } .pgrid.is-list .pcard__media { width: 38%; } }
@media (min-width: 900px) {
  .pgrid.is-list .pcard__body { display: grid; grid-template-columns: minmax(0, 1fr) 250px; grid-template-rows: auto auto auto 1fr; column-gap: 24px; padding: 20px 24px; }
  .pgrid.is-list .pcard__body > :not(.pcard__foot) { grid-column: 1; }
  .pgrid.is-list .pcard__foot { grid-column: 2; grid-row: 1 / -1; align-content: center; border-left: 1px solid var(--c-line); padding-left: 24px; }
  .pgrid.is-list .pcard__actions { flex-direction: column; align-items: stretch; }
}

.empty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 56px 20px; background: #fff; border: 1px dashed var(--c-line-2); border-radius: var(--r-lg); color: var(--c-muted); }
.empty > .icon { width: 48px; height: 48px; color: var(--c-orange); }
.empty__title { font-family: var(--f-head); font-size: 1.5rem; font-weight: 700; color: var(--c-ink); }
.empty p { max-width: 420px; }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 32px; }
.pager:empty { display: none; }
.pager__btn { min-width: 42px; height: 42px; padding: 0 10px; border-radius: 8px; border: 1.5px solid var(--c-line-2); background: #fff; font-weight: 600; display: inline-grid; place-items: center; }
.pager__btn:hover { border-color: var(--c-ink); }
.pager__btn[aria-current="page"] { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.pager__btn .icon { width: 18px; height: 18px; }
.pager__gap { display: inline-grid; place-items: center; width: 24px; color: var(--c-muted); }

/* 10. ÜRÜN DETAY ---------------------------------------------------- */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 24px 48px; }
@media (min-width: 960px) { .pdp { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; padding-block: 40px 72px; align-items: start; } .pdp__gallery { position: sticky; top: calc(var(--header-h) + 80px); } }
.gallery__main { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--c-sand); aspect-ratio: 4 / 3; border: 1px solid var(--c-line); }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; transition: opacity .14s; }
.gallery__main.is-swapping img { opacity: 0; }
.gallery__main--illus { background: linear-gradient(160deg, #FAF7F2, var(--c-sand-2)); }
.gallery__main--illus img { object-fit: contain; padding: 8%; }
.gallery__main .pcard__badges { left: 16px; top: 16px; }
.gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; }
.gallery__thumb { width: 88px; aspect-ratio: 4 / 3; padding: 0; border: 2px solid var(--c-line); border-radius: var(--r); overflow: hidden; background: var(--c-sand); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb--illus { background: linear-gradient(160deg, #FAF7F2, var(--c-sand-2)); }
.gallery__thumb--illus img { object-fit: contain; padding: 6px; }
.gallery__thumb[aria-pressed="true"] { border-color: var(--c-orange); }
.pdp__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: .88rem; color: var(--c-muted); }
.pdp__meta strong { color: var(--c-ink); }
.pdp__title { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem); margin-top: 12px; }
.pdp__summary { margin-top: 12px; font-size: var(--fs-md); color: var(--c-ink-700); }
.pdp__quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 22px 0 0; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--r); overflow: hidden; }
.pdp__quick div { background: #fff; padding: 12px 14px; }
.pdp__quick dt { font-size: .74rem; color: var(--c-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.pdp__quick dd { margin: 2px 0 0; font-weight: 700; color: var(--c-ink); }
.buybox { margin-top: 22px; padding: 20px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); display: grid; gap: 16px; box-shadow: var(--sh-sm); }
.buybox__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-block: 12px; border-block: 1px solid var(--c-line); }
.buybox__ship { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; color: var(--c-muted); }
.buybox__ship .icon { width: 18px; height: 18px; }
.buybox__actions { display: flex; gap: 10px; }
.buybox__add { flex: 1; min-width: 0; padding-inline: 14px; }
@media (max-width: 400px) { .buybox { padding: 16px; } .buybox .qty button { width: 36px; } .buybox .qty input { width: 38px; } }
.buybox__perks { display: grid; gap: 8px; font-size: .88rem; color: var(--c-muted); }
.buybox__perks li { display: flex; gap: 10px; align-items: center; }
.buybox__perks .icon { color: var(--c-orange-700); width: 18px; height: 18px; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--c-line-2); border-radius: 8px; background: #fff; height: 54px; }
.qty button { width: 42px; height: 100%; border: 0; background: none; display: grid; place-items: center; color: var(--c-ink); }
.qty button:hover { color: var(--c-orange-700); }
.qty .icon { width: 18px; height: 18px; }
.qty input { width: 46px; height: 100%; border: 0; text-align: center; font-weight: 700; font-size: 1.05rem; background: none; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus { outline: none; }
.qty:focus-within { border-color: var(--c-orange); }
.qty--sm { height: 40px; }
.qty--sm button { width: 34px; }
.qty--sm input { width: 40px; font-size: .95rem; }
.pdp__tabs { padding-bottom: 56px; }
.pdp__tabs .tabs__panel { padding-top: 24px; max-width: 920px; }
.prose { font-size: 1.02rem; color: var(--c-ink-700); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: 1.7rem; margin-top: 1.6em; }
.prose h3 { font-size: 1.3rem; margin-top: 1.4em; }
.prose ul:not([class]), .prose ol:not([class]) { padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
.ticks { display: grid; gap: 8px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks .icon { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--c-orange-50); color: var(--c-orange-700); flex: none; margin-top: 2px; stroke-width: 2.6; }
.ticks--light li { color: #E3E4EE; }
.ticks--light .icon { background: var(--c-orange); color: var(--c-ink-950); }
.spec { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); overflow: hidden; font-size: .95rem; }
.spec th, .spec td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.spec th { width: 42%; font-weight: 600; color: var(--c-muted); background: var(--c-paper); }
.spec td { color: var(--c-ink); font-weight: 600; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.partlist { display: grid; gap: 10px; }
.partlist__item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "img info btn" "img price btn"; align-items: center; gap: 4px 14px; padding: 12px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); }
.partlist__item img { grid-area: img; width: 72px; height: 54px; object-fit: contain; background: var(--c-sand); border-radius: 6px; padding: 3px; }
.partlist__item > div { grid-area: info; display: grid; }
.partlist__item a { font-weight: 600; color: var(--c-ink); text-decoration: none; line-height: 1.3; }
.partlist__item a:hover { color: var(--c-orange-700); }
.partlist__item small { color: var(--c-muted); font-size: .8rem; }
.partlist__item .price { grid-area: price; }
.partlist__item .btn { grid-area: btn; }
@media (max-width: 479px) { .partlist__item .btn span { display: none; } .partlist__item .btn { padding: 0 10px; } }
.partlist + .note, .note { margin-top: 16px; }
.doclist { display: grid; gap: 10px; }
.doclist li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); }
.doclist li > .icon { width: 36px; height: 36px; padding: 8px; border-radius: 9px; background: var(--c-orange-50); color: var(--c-orange-700); }
.doclist li > span { flex: 1; display: grid; }
.doclist small { color: var(--c-muted); font-size: .82rem; }

/* 11. SEPET --------------------------------------------------------- */
.cartpage { padding-block: 28px 72px; }
.cartpage__head { display: grid; gap: 12px; margin-bottom: 24px; }
.page-title { font-size: var(--fs-xl); }
.page-title--xl { font-size: var(--fs-2xl); }
.page-title--light { color: #fff; }
.page-title__soft { color: var(--c-muted); font-weight: 600; }
.cartpage__mode { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--c-muted); }
.cartpage__mode .icon { color: var(--c-orange-700); }
.cartpage__mode--customer { background: var(--c-green-50); padding: 10px 14px; border-radius: var(--r); color: var(--c-ink-700); width: fit-content; }
.cartpage__mode--customer .icon { color: var(--c-green); }
.cartpage__mode--dealer { background: var(--c-orange-50); padding: 10px 14px; border-radius: var(--r); color: var(--c-ink-700); width: fit-content; }
.cartpage__layout { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1024px) { .cartpage__layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; } .cartpage__side { position: sticky; top: calc(var(--header-h) + 84px); } }
.cartlist { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.cartlist:empty { display: none; }
.cartlist__head { display: none; }
.cartline { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; grid-template-areas: "img info remove" "img unit unit" "qty qty total"; gap: 8px 14px; padding: 16px; border-bottom: 1px solid var(--c-line); align-items: center; }
.cartline__img { grid-area: img; align-self: start; width: 76px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--c-sand); }
.cartline__img img { width: 100%; height: 100%; object-fit: cover; }
.cartline__img.is-illus img { object-fit: contain; padding: 4px; }
.cartline__info { grid-area: info; display: grid; gap: 2px; min-width: 0; }
.cartline__info a { font-weight: 600; color: var(--c-ink); text-decoration: none; line-height: 1.3; }
.cartline__info a:hover { color: var(--c-orange-700); }
.cartline__info small { color: var(--c-muted); font-size: .8rem; }
.cartline__unit { grid-area: unit; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: .9rem; }
.cartline__unit s { color: var(--c-muted); font-size: .82rem; }
.cartline__unit small { color: var(--c-muted); font-size: .76rem; width: 100%; }
.cartline .qty { grid-area: qty; justify-self: start; }
.cartline__total { grid-area: total; text-align: right; display: grid; justify-items: end; }
.cartline__total strong { font-family: var(--f-head); font-size: 1.3rem; color: var(--c-ink); }
.cartline__total small { color: var(--c-muted); font-size: .74rem; }
.cartline__lbl { display: none; }
.cartline__remove { grid-area: remove; align-self: start; color: var(--c-muted); }
.cartline__remove:hover { color: var(--c-red); background: var(--c-red-50); }
.cartlist__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; background: var(--c-paper); }
@media (min-width: 768px) {
  .cartlist__head, .cartline { grid-template-columns: 84px minmax(0, 1fr) 170px 128px 130px 44px; grid-template-areas: "img info unit qty total remove"; }
  .cartlist__head { display: grid; gap: 14px; padding: 12px 16px; background: var(--c-paper); border-bottom: 1px solid var(--c-line); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); }
  .cartlist__head span:first-child { grid-column: 1 / 3; }
  .cartline { align-items: center; }
  .cartline__img { width: 84px; align-self: center; }
  .cartline__unit { flex-direction: column; align-items: flex-start; gap: 2px; }
  .cartline .qty { justify-self: start; }
  .cartline__remove { align-self: center; }
}
.panel { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 22px; }
.panel__title { font-size: 1.5rem; margin-bottom: 14px; }
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.panel__head .panel__title { margin-bottom: 0; }
.form .panel__head { margin-bottom: -2px; }
.link-btn { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--c-orange-700); font-weight: 600; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link-btn:hover { color: var(--c-ink); }
.link-btn .icon { width: 16px; height: 16px; }
.panel__head .link-btn { text-decoration: none; font-size: .88rem; }
/* Sepet: misafir için ödeme seçimi */
.checkout-choice { display: grid; gap: 10px; }
.checkout-choice .panel__title { margin-bottom: 0; }
.checkout-choice__lead { color: var(--c-muted); font-size: .93rem; margin-bottom: 4px; }
.checkout-choice__or { display: flex; align-items: center; gap: 12px; color: var(--c-muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.checkout-choice__or::before, .checkout-choice__or::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.cartpage__side { display: grid; gap: 16px; }
.summary { background: var(--c-ink-950); color: var(--c-on-dark-muted); border-radius: var(--r-lg); padding: 22px; }
.summary .panel__title { color: #fff; }
.summary__list { margin: 0; display: grid; gap: 10px; }
.summary__list div { display: flex; justify-content: space-between; gap: 12px; font-size: .94rem; }
.summary__list dd { margin: 0; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.summary__disc dd { color: var(--c-orange); }
.summary__total { padding-top: 12px; margin-top: 4px; border-top: 1px solid rgb(255 255 255 / .15); align-items: baseline; }
.summary__total dt { color: #fff; font-weight: 600; }
.summary__total dt small { display: block; font-weight: 500; font-size: .76rem; color: var(--c-on-dark-muted); }
.summary__total dd { font-family: var(--f-head); font-size: 1.9rem; color: var(--c-orange) !important; }
.summary__note { display: flex; gap: 8px; margin-top: 14px; font-size: .82rem; line-height: 1.45; }
.summary__note .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--c-orange); }
.summary__dealer { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: var(--r); background: rgb(235 104 23 / .12); color: #fff; text-decoration: none; font-size: .88rem; line-height: 1.35; }
.summary__dealer:hover { background: rgb(235 104 23 / .22); color: #fff; }
.summary__dealer .icon { color: var(--c-orange); }
.summary__dealer strong { display: block; color: var(--c-orange); }
.success { max-width: 640px; margin: 24px auto; padding: 40px 28px; text-align: center; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-xl); display: grid; justify-items: center; gap: 14px; outline: none; }
.success h2 { font-size: var(--fs-xl); }
.success__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--c-green-50); color: var(--c-green); display: grid; place-items: center; }
.success__icon .icon { width: 36px; height: 36px; stroke-width: 2.4; }
.success .note { text-align: left; }
.success .btn { margin: 4px; }
.success--inline { margin: 0; border: 0; padding: 24px 8px; }
.success--inline > .icon { width: 56px; height: 56px; padding: 12px; border-radius: 50%; background: var(--c-green-50); color: var(--c-green); }

/* 12. GİRİŞ / FORMLAR / İÇERİK SAYFALARI --------------------------- */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label, .field legend, .field__label { font-weight: 600; font-size: .9rem; color: var(--c-ink); padding: 0; }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--c-line-2); border-radius: 8px; background: #fff; font-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 100px; }
.field input:focus, .field textarea:focus, .select select:focus, .range input:focus { outline: none; border-color: var(--c-orange); box-shadow: 0 0 0 4px rgb(235 104 23 / .15); }
.field [aria-invalid="true"] { border-color: var(--c-red); }
.field__hint { font-size: .8rem; color: var(--c-muted); }
.field__error, [data-error-for] { color: var(--c-red); font-size: .82rem; font-weight: 500; }
.field__error:empty, [data-error-for]:empty { display: none; }
.field-row { display: grid; gap: 16px; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field__pw { position: relative; }
.field__pw input { padding-right: 80px; }
.field__pw-toggle { position: absolute; right: 6px; top: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 6px; background: var(--c-sand); font-size: .82rem; font-weight: 600; }
.form__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-size: .9rem; }
.form__hint { display: flex; gap: 6px; font-size: .8rem; color: var(--c-muted); line-height: 1.45; }
.form__hint .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.form__alert { padding: 12px 14px; border-radius: var(--r); font-size: .92rem; }
.form__alert--error { background: var(--c-red-50); color: var(--c-red); }
.form__alert--success { background: var(--c-green-50); color: var(--c-green); }
.form__alert .form__hint { display: inline; color: inherit; }
.checkgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; margin-top: 4px; }
@media (min-width: 640px) { .checkgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.segmented { display: flex; flex-wrap: wrap; gap: 6px; }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; }
.segmented span { display: inline-block; padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--c-line-2); font-weight: 600; font-size: .88rem; cursor: pointer; background: #fff; }
.segmented input:checked + span { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.segmented input:focus-visible + span { outline: 3px solid var(--c-orange); outline-offset: 2px; }

.auth { display: grid; min-height: min(calc(100vh - 160px), 780px); }
.auth__media { display: none; position: relative; isolation: isolate; overflow: hidden; }
.auth__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.auth__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(17 17 39 / .25), rgb(17 17 39 / .92)); z-index: -1; }
.auth__media-text { position: absolute; left: 48px; right: 48px; bottom: 48px; display: grid; gap: 16px; }
.auth__quote { font-family: var(--f-head); font-weight: 800; font-size: 2.6rem; line-height: 1.02; color: #fff; text-transform: uppercase; max-width: 520px; }
.auth__form-wrap { background: var(--c-paper); }
.auth__form-wrap .crumbs { background: transparent; border: 0; }
.auth__box { max-width: 480px; margin: 0 auto; padding: 16px var(--gutter) 56px; display: grid; gap: 18px; }
.auth__lead { color: var(--c-muted); margin-top: -8px; }
.auth__logged { display: grid; gap: 14px; padding: 18px; background: var(--c-green-50); border-radius: var(--r-lg); color: var(--c-green); }
.auth__logged p { display: flex; gap: 10px; }
.auth__logged-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.auth__alt { font-size: .94rem; color: var(--c-muted); }
.auth__lead-sub { display: block; margin-top: 4px; font-size: .9rem; }
.auth__lead-sub a { font-weight: 600; }
.auth__switch { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--c-amber-50); color: var(--c-amber); font-size: .9rem; line-height: 1.4; }
.auth__switch .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.auth__tabs { display: grid; gap: 20px; }
.auth__tabs .tabs__panel { display: grid; gap: 18px; }
.auth__tabs .tabs__panel[hidden] { display: none; }
.auth__tabs .tabs__panel:focus-visible { outline-offset: 4px; }
.tabs--seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--c-sand); border-radius: 12px; }
.tabs--seg .tabs__btn { height: 46px; border: 0; border-radius: 9px; background: none; font-weight: 700; font-size: 1rem; color: var(--c-muted); transition: background .2s, color .2s, box-shadow .2s; }
.tabs--seg .tabs__btn:hover { color: var(--c-ink); }
.tabs--seg .tabs__btn[aria-selected="true"] { background: #fff; color: var(--c-ink); box-shadow: var(--sh-sm); }
.auth__consents { display: grid; gap: 10px; font-size: .88rem; line-height: 1.45; }
.auth__consents .check { align-items: flex-start; font-size: inherit; }
.auth__consents .check__box { margin-top: 1px; }
.auth__consents .check__label small { color: var(--c-muted); }
.auth__b2b { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--c-line-2); border-radius: var(--r-lg); background: #fff; color: var(--c-ink); text-decoration: none; font-size: .88rem; line-height: 1.35; transition: border-color .2s, background .2s; }
.auth__b2b > .icon:first-child { width: 26px; height: 26px; padding: 4px; border-radius: 8px; background: var(--c-ink); color: var(--c-orange); flex: none; }
.auth__b2b span { flex: 1; display: grid; color: var(--c-muted); }
.auth__b2b strong { color: var(--c-ink); font-size: .96rem; }
.auth__b2b > .icon:last-child { width: 18px; height: 18px; color: var(--c-orange-700); }
.auth__b2b:hover { border-color: var(--c-ink); color: var(--c-ink); }
.auth__alt a { font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.auth__alt .icon { width: 16px; height: 16px; }
@media (min-width: 960px) {
  .auth { grid-template-columns: 1fr 1fr; }
  .auth__media { display: block; }
  .auth__box { padding-top: 32px; }
}

.pagehero { background: var(--c-sand); padding-block: 40px; border-bottom: 1px solid var(--c-line); position: relative; isolation: isolate; overflow: hidden; }
.pagehero__inner { max-width: 860px; margin-inline: 0; }
.pagehero__lead { margin-top: 14px; font-size: var(--fs-md); color: var(--c-muted); max-width: 640px; }
.pagehero__lead--light { color: #D5D7E3; }
.pagehero--image { background: var(--c-ink-950); padding-block: 72px; border: 0; }
.pagehero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: .45; }
.pagehero--image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(17 17 39 / .9), rgb(17 17 39 / .35)); z-index: -1; }
@media (min-width: 1024px) { .pagehero { padding-block: 64px; } .pagehero--image { padding-block: 120px; } }
.pagehero .container.pagehero__inner { max-width: var(--container); }
.pagehero__inner > * { max-width: 860px; }

.applypage { display: grid; gap: 32px; padding-block: 40px 72px; }
@media (min-width: 1024px) { .applypage { grid-template-columns: 360px minmax(0, 1fr); gap: 56px; align-items: start; } .applypage__aside { position: sticky; top: calc(var(--header-h) + 84px); } }
.applypage__aside { display: grid; gap: 28px; }
.steps { display: grid; gap: 4px; counter-reset: s; }
.steps li { display: flex; gap: 14px; position: relative; padding-bottom: 18px; }
.steps li > span { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--c-ink); color: #fff; font-family: var(--f-head); font-weight: 700; font-size: 1.1rem; position: relative; z-index: 1; }
.steps li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: var(--c-line-2); }
.steps strong { display: block; color: var(--c-ink); font-size: 1.05rem; }
.steps p { font-size: .9rem; color: var(--c-muted); }
.steps li:first-child > span { background: var(--c-orange); color: var(--c-ink-950); }
.steps--inline { margin-top: 24px; }

.values { display: grid; gap: 14px; }
@media (min-width: 640px) { .values { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .values { grid-template-columns: repeat(4, 1fr); gap: 20px; } .values--3 { grid-template-columns: repeat(3, 1fr); } }
.values li { padding: 24px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); display: grid; gap: 8px; align-content: start; }
.values .icon { width: 46px; height: 46px; padding: 11px; border-radius: 12px; background: var(--c-orange); color: var(--c-ink-950); margin-bottom: 4px; }
.values strong { font-family: var(--f-head); font-size: 1.35rem; color: var(--c-ink); }
.values p { color: var(--c-muted); font-size: .94rem; }
.split--light .split__lead { color: var(--c-muted); }
.ctaband { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 32px; border-radius: var(--r-xl); background: var(--c-orange); color: var(--c-ink-950); }
.ctaband .section__title { color: var(--c-ink-950); }
.ctaband p { margin-top: 6px; }
.ctaband .btn--primary { background: var(--c-ink); color: #fff; box-shadow: none; }
.ctaband .btn--primary:hover { background: var(--c-ink-700); color: #fff; }
.ctaband--small { margin-top: 48px; padding: 24px 28px; }

.formsplit { display: grid; gap: 28px; }
@media (min-width: 960px) { .formsplit { grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; } }
.formsplit p { color: var(--c-muted); margin-top: 12px; }

.contactpage { display: grid; gap: 28px; padding-block: 40px 72px; }
@media (min-width: 960px) { .contactpage { grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; } }
.contactcards { display: grid; gap: 10px; }
.contactcards li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); }
.contactcards .icon { width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: var(--c-orange-50); color: var(--c-orange-700); }
.contactcards span { display: grid; font-weight: 600; color: var(--c-ink); }
.contactcards small { font-weight: 500; color: var(--c-muted); font-size: .8rem; }
.contactcards a { color: var(--c-ink); text-decoration: none; }
.contactcards a:hover { color: var(--c-orange-700); }
.mapph { position: relative; margin-top: 16px; aspect-ratio: 16 / 10; border-radius: var(--r-lg); background: linear-gradient(160deg, #EDE7DC, #DCD3C4); color: var(--c-ink); overflow: hidden; display: grid; place-items: center; }
.mapph svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapph__pin { position: relative; width: 56px; height: 56px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--c-orange); display: grid; place-items: center; box-shadow: var(--sh); }
.mapph__pin .icon { transform: rotate(45deg); width: 26px; height: 26px; color: var(--c-ink-950); }
.mapph__text { position: absolute; bottom: 12px; left: 12px; right: 12px; text-align: center; font-size: .8rem; color: var(--c-ink-700); background: rgb(255 255 255 / .75); padding: 6px 10px; border-radius: 6px; }

.legal { padding-block: 40px 72px; max-width: 860px; }
.articlepage { padding-block: 32px 56px; max-width: 900px; }
.articlepage__head { display: grid; gap: 12px; }
.articlepage__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-xl); margin-top: 28px; }
.articlepage__body { margin-top: 32px; }
.notfound { display: grid; justify-items: center; text-align: center; gap: 14px; padding-block: 64px 96px; max-width: 640px; }
.notfound img { width: 260px; }
.notfound__code { font-family: var(--f-head); font-weight: 800; font-size: 5rem; line-height: 1; color: var(--c-orange); }
.notfound p { color: var(--c-muted); }
.notfound__ctas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }

/* 13. FOOTER -------------------------------------------------------- */
.site-footer { background: var(--c-ink-950); color: var(--c-on-dark-muted); font-size: .93rem; }
.footer__news { background: var(--c-ink-800); border-bottom: 1px solid rgb(255 255 255 / .06); }
.footer__news-inner { display: grid; gap: 18px; padding-block: 32px; align-items: center; }
.footer__news-title { font-family: var(--f-head); font-weight: 700; font-size: 1.6rem; color: #fff; line-height: 1.1; }
.footer__news-text { margin-top: 6px; }
.newsletter { display: flex; flex-wrap: wrap; gap: 8px; }
.newsletter input { flex: 1 1 220px; min-width: 0; height: 50px; padding: 0 16px; border-radius: 8px; border: 1.5px solid rgb(255 255 255 / .15); background: rgb(255 255 255 / .06); color: #fff; }
.newsletter input::placeholder { color: #9B9DB3; }
.newsletter input:focus { outline: none; border-color: var(--c-orange); }
.newsletter .btn { height: 50px; }
.newsletter__msg { flex-basis: 100%; font-size: .86rem; min-height: 0; }
.newsletter__msg:empty { display: none; }
.newsletter__msg.is-ok { color: #8FD3A1; }
.newsletter__msg.is-error { color: #FFB4A8; }
@media (min-width: 900px) { .footer__news-inner { grid-template-columns: 1fr 1fr; gap: 48px; padding-block: 40px; } }
.footer__grid { display: grid; gap: 32px; padding-block: 48px; }
@media (min-width: 640px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-block: 64px; } }
.footer__brand { display: grid; gap: 16px; align-content: start; }
.footer__brand img { height: 38px; width: auto; justify-self: start; }
.footer__brand > p { max-width: 360px; }
.footer__contact { display: grid; gap: 10px; }
.footer__contact li { display: flex; align-items: center; gap: 10px; }
.footer__contact .icon { color: var(--c-orange); width: 18px; height: 18px; }
.footer__contact a { color: var(--c-on-dark); text-decoration: none; }
.footer__contact a:hover { color: var(--c-orange); }
.footer__title { font-family: var(--f-head); font-weight: 700; font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.footer__col ul { display: grid; gap: 9px; list-style: none; }
.footer__col a { color: var(--c-on-dark-muted); text-decoration: none; }
.footer__col a:hover { color: var(--c-orange); }
.footer__bottom { border-top: 1px solid rgb(255 255 255 / .08); }
.footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-block: 20px; font-size: .84rem; }
.paybadges { display: flex; flex-wrap: wrap; gap: 8px; }
.paybadges li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid rgb(255 255 255 / .14); border-radius: 6px; font-size: .78rem; color: var(--c-on-dark); }
.paybadges .icon { width: 16px; height: 16px; color: var(--c-orange); }
.footer__powered strong { color: #fff; }

/* 14. TOAST & ANİMASYON -------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--bottombar-h) + 16px + env(safe-area-inset-bottom, 0px)); z-index: 120; display: flex; align-items: center; gap: 12px;
  width: max-content; max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: var(--r); background: var(--c-ink); color: #fff; box-shadow: var(--sh-lg);
  font-size: .92rem; line-height: 1.35; transform: translate(-50%, 20px); opacity: 0; transition: opacity .25s, transform .3s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast .icon { color: #8FD3A1; width: 22px; height: 22px; }
.toast a { color: var(--c-orange); font-weight: 700; white-space: nowrap; }
.toast--error { background: var(--c-red); }
.toast--error .icon { color: #fff; }

html.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--reveal-delay, 0ms); }
html.js [data-reveal].is-visible { opacity: 1; transform: none; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  html.js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .topbar, .site-header, .bottombar, .site-footer, .drawer, .toast { display: none !important; }
  body { padding: 0; background: #fff; }
}

/* ---------- Göz ikonlu bayi fiyatı (yalnızca ikon) ---------- */
.price__row { display: flex; align-items: center; gap: 10px; }
.price__reveal { display: grid; place-items: center; width: 30px; height: 30px; flex: none; padding: 0; border: 1px solid var(--c-line, #E6E1D8); border-radius: 50%; background: #fff; color: var(--c-muted); cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.price__reveal:hover, .price__reveal[aria-expanded="true"] { border-color: var(--c-orange); color: var(--c-orange-700); background: var(--c-orange-50); }
.price__reveal:focus-visible { outline: 2px solid var(--c-orange-700); outline-offset: 2px; }
.price__eye { display: grid; place-items: center; }
.price__eye .icon { width: 16px; height: 16px; grid-area: 1 / 1; transition: opacity .2s, transform .2s; }
.price__reveal .icon:last-child { opacity: 0; transform: scale(.6); }
.price__reveal[aria-expanded="true"] .icon:first-child { opacity: 0; transform: scale(.6); }
.price__reveal[aria-expanded="true"] .icon:last-child { opacity: 1; transform: none; }
.price__dealer { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding: 10px 12px; border-radius: var(--r); background: var(--c-green-50); border: 1px solid color-mix(in srgb, var(--c-green) 22%, transparent); animation: priceIn .28s ease both; }
.price__dealer[hidden] { display: none; }
.price__dealer .price__label { gap: 6px; }
.price__dealer .price__off { margin-left: 2px; }
.price__net { font-family: var(--f-head); font-weight: 700; font-size: 1.35rem; color: var(--c-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.price__net small { font-family: var(--f-body); font-size: .72rem; font-weight: 600; color: var(--c-muted); margin-left: 4px; }
.price__gate { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; color: var(--c-ink-700); line-height: 1.35; }
.price__gate .icon { width: 16px; height: 16px; flex: none; color: var(--c-orange-700); margin-top: 1px; }
.price__gate a { font-weight: 700; }
.price__dealer:has(.price__gate) { background: var(--c-sand); border-color: transparent; }
.price--detail .price__reveal { width: 38px; height: 38px; }
.price--detail .price__eye .icon { width: 19px; height: 19px; }
.price--detail .price__net { font-size: 2rem; }
.price--detail .price__dealer { padding: 14px 16px; }
.price--detail .price__tier { margin-top: 8px; }
@keyframes priceIn { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .price__dealer { animation: none; } }
@media (max-width: 639px) { .price--card .price__reveal { width: 28px; height: 28px; } .price--card .price__net { font-size: 1.15rem; } }

/* Slider — mobilde üst etiket okunurluğu: koyu cam etiket */
@media (max-width: 767px) {
  .hs__eyebrow { padding: 6px 12px 6px 10px; border-radius: 999px; background: rgb(17 17 39 / .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgb(235 104 23 / .35); font-size: .76rem; letter-spacing: .1em; text-shadow: none; color: #FF8A47; }
  .hs__eyebrow .icon { width: 15px; height: 15px; }
}

/* ==================================================================
   AÇILIŞ ANİMASYONU (assets/js/intro.js) — yalnızca ana sayfa, oturum başına bir kez.
   Overlay JS ile oluşturulur; JS yoksa / azaltılmış harekette hiçbir şey görünmez.
   Kapatmak: config.js → INTRO: false
   ================================================================== */
:root {
  --intro-bg:
    radial-gradient(70% 60% at 50% 50%, rgb(235 104 23 / .07), transparent 70%),
    radial-gradient(130% 100% at 50% 50%, #20203F 0%, #16162E 48%, #0B0B1C 100%);
}
/* İlk boyamadan itibaren koyu örtü (overlay DOM'a eklenene kadar); JS çökse bile 4 sn'de kaybolur */
html.intro-on body::before { content: ""; position: fixed; inset: 0; z-index: 10000; background: #111127; background-image: var(--intro-bg); animation: introSafe .3s linear 3.7s forwards; }
html.intro-ready body::before { content: none; }
/* Hero ilk slayt girişi ve ilerleme çubuğu giriş bitene kadar bekler (sınıf kalkınca baştan oynar) */
html.intro-on .hs__slide.is-active, html.intro-on .hs__slide.is-active *, html.intro-on .hs__dot-fill { animation: none !important; }

.intro { position: fixed; inset: 0; z-index: 10001; overflow: hidden; contain: strict; cursor: pointer; -webkit-tap-highlight-color: transparent; animation: introSafe .3s linear 3.8s forwards; }
.intro { background: #17172F; } /* yarıların kesik kenarındaki kenar yumuşatma çizgisini örter */
.intro.is-open { pointer-events: none; background: transparent; }
.intro__stage { position: absolute; inset: 0; }
.intro__half { position: absolute; inset: -60px; will-change: transform; backface-visibility: hidden; }
.intro__face { position: absolute; inset: 0; background: #111127; background-image: var(--intro-bg); }
.intro__face::after { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.intro__brand { position: absolute; left: 50%; top: 50%; z-index: 1; width: clamp(210px, 24vw, 340px); opacity: 0; transform: translate(-50%, -50%) scale(.92); }
.intro__logo { display: block; width: 100%; height: auto; }
.intro__tag { position: absolute; left: 50%; top: calc(100% + 26px); display: flex; flex-direction: column; align-items: center; gap: 14px; white-space: nowrap; font-family: var(--f-head); font-weight: 600; font-size: clamp(.78rem, .7rem + .3vw, .98rem); letter-spacing: .32em; text-transform: uppercase; color: #ADAFC5; opacity: var(--tag, 0); transform: translate(-50%, calc((1 - var(--tag, 0)) * 10px)); }
.intro__rule { display: block; width: 44px; height: 2px; border-radius: 2px; background: var(--c-orange); transform: scaleX(var(--tag, 0)); }
.intro__seam { position: absolute; left: 0; top: 0; z-index: 2; overflow: visible; }
.intro__seam-g { fill: none; stroke-linejoin: round; stroke-dasharray: 0 99999; }
.intro__s1 { stroke: #EB6817; stroke-opacity: .12; stroke-width: 26; }
.intro__s2 { stroke: #FF7A2A; stroke-opacity: .28; stroke-width: 11; }
.intro__s3 { stroke: #FF8A3D; stroke-width: 4.5; }
.intro__s4 { stroke: #FFF1DC; stroke-width: 1.6; }
.intro__bloom { position: absolute; left: 0; height: 160px; margin-top: -80px; opacity: 0; transform-origin: 0 50%; pointer-events: none; background: linear-gradient(180deg, transparent, rgb(235 104 23 / .14) 38%, rgb(255 170 100 / .32) 50%, rgb(235 104 23 / .14) 62%, transparent); mix-blend-mode: screen; }
.intro__dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.intro__flare { position: absolute; left: 0; top: 0; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; opacity: 0; pointer-events: none; background: radial-gradient(closest-side, rgb(255 236 200 / .95), rgb(255 160 80 / .55) 22%, rgb(235 104 23 / .18) 48%, transparent); mix-blend-mode: screen; will-change: transform, opacity; }
.intro__saw { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform; filter: drop-shadow(0 22px 26px rgb(0 0 0 / .6)); }
.intro__saw svg { display: block; width: 100%; height: auto; overflow: visible; }
.intro.is-skipped .intro__saw, .intro.is-skipped .intro__flare, .intro.is-skipped .intro__dust { transition: opacity .15s; opacity: 0 !important; }
.intro__skip { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px)); z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px 0 16px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .2); background: rgb(17 17 39 / .55); color: #D4D6E2; font-family: var(--f-head); font-weight: 600; font-size: .9rem; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: introFade .5s ease .5s backwards; transition: color .2s, border-color .2s, background-color .2s; }
.intro__skip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.intro__skip:hover { color: #fff; border-color: var(--c-orange); background: rgb(235 104 23 / .18); }
.intro__skip:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 3px; }
.intro.is-open .intro__skip { opacity: 0; transition: opacity .2s; }
@keyframes introSafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes introFade { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .intro, html.intro-on body::before { display: none; } }

/* 15. ÜRÜN YÜKLEME — İSKELET, "ÇOK YAKINDA" DURUMU, YER TUTUCU GÖRSEL ----------------
   Ürünler API'den gelir (assets/js/products.js). İskelet kartlar gerçek .pcard ölçülerindedir; JS kapalıysa
   iskelet gizlenir ve "çok yakında" durumu görünür. */
.skel { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--c-sand) 25%, #FBF8F3 45%, var(--c-sand) 65%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.skel--meta { height: 11px; width: 45%; }
.skel--line { height: 15px; width: 92%; }
.skel--line + .skel--line { margin-top: 6px; }
.skel--short { width: 58%; }
.skel--chip { display: inline-block; height: 20px; width: 64px; border-radius: 4px; }
.skel--chip-s { width: 44px; }
.skel--chip-l { width: 92px; height: 24px; border-radius: 999px; }
.skel--price { height: 58px; width: 72%; }
.skel--price-l { height: 86px; width: 64%; }
.skel--btn { height: 36px; width: 100%; border-radius: 8px; }
.skel--btn-l { height: 54px; }
.skel--block { width: 100%; }
.skel--h1 { height: 2.3rem; width: 88%; margin-top: 8px; }
.skel--crumb { display: inline-block; width: 160px; height: 12px; vertical-align: middle; }
.pcard--skel { pointer-events: none; }
.pcard--skel:hover { transform: none; box-shadow: none; border-color: var(--c-line); }
.pcard--skel .pcard__media { border-radius: 0; }
.pcard--skel .pcard__specs { min-height: 20px; }
@media (min-width: 640px) { .pcard--skel .skel--btn { width: 56%; margin-left: auto; } }
.pgrid { transition: opacity .25s; }
.pgrid.is-busy { opacity: .5; pointer-events: none; }
.check__count:empty { display: none; }

/* Nötr yer tutucu görsel (ürün görseli/kategorisi yoksa, sepette ürün bilgisi alınamazsa) */
.ph { display: grid; place-items: center; width: 100%; height: 100%; background: repeating-linear-gradient(135deg, var(--c-sand) 0 10px, #F8F4ED 10px 20px); }
.ph .icon { width: 34%; max-width: 64px; height: auto; aspect-ratio: 1; color: #BFB4A2; stroke-width: 1.4; }
.ph--xl .icon { max-width: 120px; }
.cartline__img.is-ph { display: block; }
.cartline__img .ph .icon { width: 30px; }
.cartline--unknown .cartline__info strong { color: var(--c-ink); font-weight: 600; line-height: 1.3; }
.cartline--skel { grid-template-columns: 76px minmax(0, 1fr) 96px; grid-template-areas: none; align-items: center; }
.cartline--skel .cartline__img, .cartline--skel .cartline__info { grid-area: auto; }
.cartline--skel .cartline__info { display: grid; gap: 8px; }
.cartline--skel .skel--price { width: 100%; height: 30px; }
.summary .skel--line { margin-top: 12px; }

/* "Ürünlerimiz çok yakında" */
.soon { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; padding: 36px 20px 40px; border: 1px solid var(--c-line); border-radius: var(--r-xl); overflow: hidden; color: var(--c-muted);
  background: radial-gradient(120% 70% at 50% 0%, var(--c-orange-50) 0%, #fff 62%); }
.soon::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--c-orange), var(--c-orange-600) 60%, var(--c-ink) 60.2%, var(--c-ink)); }
.soon.is-in { animation: soonIn .5s var(--ease) both; }
@keyframes soonIn { from { opacity: 0; transform: translateY(10px); } }
.soon__art { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 118px; margin-bottom: 8px; }
.soon__art img { width: 118px; height: auto; padding: 10px; border-radius: 16px; border: 1px solid var(--c-line); background: linear-gradient(160deg, #FFFFFF, var(--c-sand)); box-shadow: var(--sh); }
.soon__art img:nth-child(1) { transform: rotate(-9deg) translate(26px, 4px); }
.soon__art img:nth-child(2) { position: relative; z-index: 1; width: 142px; transform: translateY(-4px); }
.soon__art img:nth-child(3) { transform: rotate(9deg) translate(-26px, 4px); }
.soon--single .soon__art img { width: 168px; transform: none; }
.soon__pulse { position: absolute; z-index: 2; top: 2px; left: calc(50% + 58px); width: 14px; height: 14px; border-radius: 50%; background: var(--c-orange); border: 3px solid #fff; box-shadow: 0 0 0 0 rgb(235 104 23 / .5); animation: soonPulse 1.8s ease-out infinite; }
.soon--single .soon__pulse { left: calc(50% + 74px); }
@keyframes soonPulse { 70% { box-shadow: 0 0 0 12px rgb(235 104 23 / 0); } 100% { box-shadow: 0 0 0 0 rgb(235 104 23 / 0); } }
.soon__kicker { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-head); font-weight: 600; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-orange-700); }
.soon__kicker .icon { width: 16px; height: 16px; }
.soon__title { margin: 0; font-family: var(--f-head); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); line-height: 1.05; color: var(--c-ink); letter-spacing: -.005em; }
.soon__text { max-width: 500px; font-size: 1rem; line-height: 1.55; }
.soon__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.soon__ctas .icon { width: 18px; height: 18px; }
@media (max-width: 479px) {
  .soon { padding: 28px 16px 30px; }
  .soon__art { height: 92px; }
  .soon__art img { width: 88px; padding: 7px; border-radius: 12px; }
  .soon__art img:nth-child(2) { width: 106px; }
  .soon--single .soon__art img { width: 128px; }
  .soon__pulse { left: calc(50% + 44px); }
  .soon--single .soon__pulse { left: calc(50% + 56px); }
  .soon__ctas { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .soon__ctas .btn--ghost { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .skel, .soon__pulse, .soon.is-in { animation: none; } }
/* JS kapalı: iskeletleri gizle, "çok yakında" durumunu göster */
html:not(.js) .soon[hidden] { display: grid !important; }
html:not(.js) [data-parea-grid], html:not(.js) [data-catalog-grid], html:not(.js) .hs__card.is-loading, html:not(.js) .pdp--skel, html:not(.js) [data-related] { display: none !important; }

.parea__none { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 28px 16px; background: #fff; border: 1px dashed var(--c-line-2); border-radius: var(--r-lg); color: var(--c-muted); text-align: left; }
.parea__none .icon { width: 20px; height: 20px; color: var(--c-orange-700); flex: none; }
.section.is-soon .section__head { margin-bottom: 20px; }

/* Katalog: hiç ürün yokken filtreler ve araç çubuğu gizlenir */
.catalog.is-soon .catalog__layout { grid-template-columns: minmax(0, 1fr); }
.catalog.is-soon .drawer--filters, .catalog.is-soon .toolbar, .catalog.is-soon .chips, .catalog.is-soon .pager { display: none !important; }
.catalog .soon { margin-top: 4px; }

/* Ürün detay iskeleti / bulunamadı */
.pdp--skel .gallery__thumbs li { width: 88px; aspect-ratio: 4 / 3; border: 0; }
.pdp--skel .gallery__main { border: 0; }
.pdp--skel .pdp__summary { display: grid; gap: 6px; }
.pdp__quick--skel div { display: grid; gap: 8px; }
.pdp__quick--skel .skel--line { height: 13px; width: 70%; }
.pdp--skel .buybox { gap: 14px; }
[data-pdp] > .soon { width: min(100% - 2 * var(--gutter), 1080px); margin: 32px auto 72px; }
.pdp-missing { padding-block: 40px 72px; }
.pdp-missing .empty__title { margin: 0; }
.partlist__item--skel { display: block; }
.partlist__item--text { display: block; color: var(--c-muted); }

/* Hero "Haftanın ürünü" kartı: yükleniyor / kaldırıldı */
.hs__card .skel--line { width: 100%; }
.hs__card .skel--meta { margin-top: 8px; width: 60%; }
.hs__card .skel--price { width: 70%; height: 72px; }
.hs__card .skel--btn { height: 48px; }
.hs__card.is-loading .price { border-top: 1px solid var(--c-line); }
.hs__card.is-gone { opacity: 0 !important; visibility: hidden; transform: translateY(10px) !important; transition: opacity .35s, transform .35s var(--ease), visibility 0s .35s; }
.hs__card-img.is-illus { object-fit: contain; padding: 4px; }
.hs__card .ph.hs__card-img { border-radius: 8px; }

/* Form uyarıları (API'ye ulaşılamadığında e-posta yedeği) */
.form__alert--warn { display: grid; gap: 10px; background: var(--c-amber-50); color: var(--c-ink-700); border: 1px solid #F0D9AE; }
.form__alert--warn strong { color: var(--c-ink); }
.form__alert-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.form__alert-actions .icon { width: 16px; height: 16px; }
.form__alert:focus { outline: none; }
.auth__help { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--c-sand); color: var(--c-ink-700); font-size: .9rem; line-height: 1.45; }
.auth__help .icon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--c-orange-700); }
.auth__help a { font-weight: 700; white-space: nowrap; }
.search__none--loading { padding: 12px 14px; }
.search__none--loading .skel { height: 12px; width: 55%; }
.search__item--cat small { color: var(--c-orange-700); font-weight: 600; }
.summary__note--warn { color: var(--c-amber); }
.summary__tbd { font-family: var(--f-body) !important; font-size: 1rem !important; font-weight: 600; }
.summary__note--warn { color: #F5C77E; }
.pdp__quick > div:last-child:nth-child(odd) { grid-column: 1 / -1; }