/* =========================================================
   İSTEKKD — Bileşenler
   Header · MegaMenu · SearchOverlay · ProductCard · Modal ·
   CartDrawer · Toast · Popup · BottomNav · Footer · Cursor
   ========================================================= */

/* ---------- Logo (İSTEKKD: turuncu kalkan kıvrımı + İSTE + KKD) ---------- */
.logo { display: inline-flex; align-items: center; flex: none; line-height: 0; }
.logo__svg { height: 54px; width: auto; overflow: visible; }
.logo__mark { fill: var(--orange); }
.logo__iste { fill: var(--logo-ink); }
.logo__kkd { fill: var(--orange); }
.logo--light { --logo-ink: #FFFFFF; }
.logo:hover .logo__mark { fill: var(--orange-hi); }

/* ---------- Header (sabit; boşluğu .header-spacer tutar) ---------- */
.header-spacer { height: var(--hdr-full); }
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
  background: var(--white); color: var(--ink);
  transition: box-shadow var(--t-mid);
}
.site-header.is-scrolled { box-shadow: 0 12px 30px -20px rgb(21 24 28 / .45); }

/* Duyuru şeridi — turuncu marka yüzeyi */
.hdr-ann { height: var(--ann-h); overflow: hidden; background: var(--orange); color: var(--ink); font-size: var(--fs-13); font-weight: 600; transition: height var(--t-mid) var(--ease-out); }
.site-header.is-condensed .hdr-ann { height: 0; }
.hdr-ann__in { height: var(--ann-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.ann-ticker { position: relative; flex: 1; height: 100%; overflow: hidden; }
.ann-ticker p { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; transform: translateY(100%); opacity: 0; transition: transform 520ms var(--ease-out), opacity 520ms var(--ease-out); }
.ann-ticker p.is-on { transform: none; opacity: 1; }
.ann-ticker p.is-out { transform: translateY(-100%); opacity: 0; }
.ann-ticker a { text-decoration: underline; text-underline-offset: 3px; font-weight: 800; }
.hdr-ann__links { display: flex; gap: var(--s5); }
.hdr-ann__links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Ana satır */
.hdr-main { height: var(--main-h); border-bottom: 1px solid var(--rule); transition: height var(--t-mid) var(--ease-out); }
.site-header.is-condensed .hdr-main { height: var(--main-h-c); }
.hdr-main__in { height: 100%; display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px); }
.site-header.is-condensed .logo__svg { height: 46px; }
.logo__svg { transition: height var(--t-mid) var(--ease-out); }

.hdr-search { position: relative; flex: 1; max-width: 720px; display: flex; align-items: center; height: 50px; border: 2px solid var(--ink); border-radius: var(--r-sm); background: var(--white); transition: border-color var(--t-fast), box-shadow var(--t-mid); }
.hdr-search:focus-within { border-color: var(--orange); box-shadow: 0 0 0 4px rgb(var(--orange-glow) / .18); }
.hdr-search__ic { margin-left: 14px; color: var(--slate); }
.hdr-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0 10px; font-size: var(--fs-16); }
.hdr-search input::placeholder { color: #8C949C; }
.hdr-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hdr-search__kbd { font-family: var(--mono); font-size: 11px; padding: 2px 6px; border: 1px solid var(--rule); border-radius: 3px; color: var(--slate); margin-right: 8px; }
.hdr-search__btn { align-self: stretch; margin: -2px -2px -2px 0; display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; background: var(--orange); color: var(--ink); font-weight: 800; border-radius: 0 var(--r-sm) var(--r-sm) 0; transition: background-color var(--t-fast); }
.hdr-search__btn:hover { background: var(--orange-hi); }

.hdr-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.hdr-act { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 12px; border-radius: var(--r-sm); transition: background-color var(--t-fast); text-align: left; }
.hdr-act:hover { background: var(--panel); }
.hdr-act__ic { position: relative; display: grid; }
.hdr-act__txt { display: grid; line-height: 1.15; }
.hdr-act__txt small { font-size: var(--fs-12); color: var(--slate); }
.hdr-act__txt b { font-size: var(--fs-14); font-weight: 800; white-space: nowrap; }
.hdr-act .count, .hdr-act__ic .count {
  position: absolute; top: -8px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--orange); color: var(--ink);
  font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
  transform: scale(0); transition: transform var(--t-mid) var(--ease-out);
}
.hdr-act .count.has { transform: scale(1); }
.hdr-act .count.bump { animation: bump 420ms var(--ease-out); }
.hdr-cart { background: var(--ink); color: var(--white); padding: 0 16px 0 14px; }
.hdr-cart:hover { background: var(--steel); }
.hdr-cart .hdr-act__txt small { color: var(--mist); }
.menu-toggle { display: none; }

/* Kategori çubuğu — koyu bant, ikonlu kategoriler */
.catbar { height: var(--cat-h); background: var(--ink); color: #E3E6E9; overflow: hidden; transition: height var(--t-mid) var(--ease-out); }
.site-header.is-condensed .catbar { height: var(--cat-h-c); }
.catbar__in { height: var(--cat-h); display: flex; align-items: stretch; gap: 0; }
.catbar__all { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 0 20px; margin-right: 6px; background: var(--orange); color: var(--ink); font-weight: 800; font-size: var(--fs-14); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); padding-right: 30px; transition: background-color var(--t-fast); }
.catbar__all:hover, .catbar__all[aria-expanded="true"] { background: var(--orange-hi); }
.catbar__list { flex: 1; min-width: 0; display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.catbar__list::-webkit-scrollbar { display: none; }
.catbar__list a { position: relative; height: 100%; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; white-space: nowrap; font-size: var(--fs-14); font-weight: 600; transition: color var(--t-fast), background-color var(--t-fast); }
.catbar__list a .icon { color: #8E979F; transition: color var(--t-fast); }
.catbar__list a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 0; height: 3px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid) var(--ease-out); }
.catbar__list a:hover, .catbar__list a.is-active, .catbar__list a[aria-current="page"] { color: var(--white); background: rgb(255 255 255 / .05); }
.catbar__list a:hover .icon, .catbar__list a.is-active .icon, .catbar__list a[aria-current="page"] .icon { color: var(--orange); }
.catbar__list a:hover::after, .catbar__list a.is-active::after, .catbar__list a[aria-current="page"]::after { transform: scaleX(1); }
.catbar__deal { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 4px 0 16px; color: var(--orange); font-weight: 800; font-size: var(--fs-14); white-space: nowrap; }
.catbar__deal:hover { color: var(--orange-hi); }

@media (max-width: 1180px) { .hdr-act__txt small, .hdr-search__kbd { display: none; } .hdr-act .hdr-act__txt b { font-size: var(--fs-13); } }
@media (max-width: 1024px) { .hdr-act.hide-m .hdr-act__txt { display: none; } .hdr-ann__links a:nth-child(n+3) { display: none; } }
@media (max-width: 860px) {
  .hdr-ann__links { display: none; }
  .ann-ticker p { justify-content: center; }
  .hdr-main { height: calc(var(--main-h) + var(--msearch-h)); border-bottom: 0; }
  .site-header.is-condensed .hdr-main { height: calc(var(--main-h-c) + var(--msearch-h)); }
  .hdr-main__in { flex-wrap: wrap; align-content: flex-start; column-gap: 6px; row-gap: 0; }
  .menu-toggle { display: inline-grid; margin-left: -10px; order: 0; height: var(--main-h); }
  .logo { order: 1; height: var(--main-h); }
  .logo__svg, .site-header.is-condensed .logo__svg { height: 40px; }
  .hdr-actions { order: 2; }
  .hdr-search { order: 3; flex: 0 0 100%; max-width: none; height: 44px; margin-bottom: 10px; border-width: 1.5px; }
  .hdr-search__btn span { display: none; }
  .hdr-search__btn { padding: 0 14px; }
  .hdr-actions .hide-m { display: none; }
  .hdr-cart { height: 42px; padding: 0 12px; }
  .hdr-cart .hdr-act__txt small { display: none; }
  .catbar__all { display: none; }
  .catbar__deal { display: none; }
  .catbar__list { mask-image: none; -webkit-mask-image: none; padding-inline: 2px; gap: 6px; align-items: center; }
  .catbar__list a { height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: rgb(255 255 255 / .07); font-size: var(--fs-13); }
  .catbar__list a::after { display: none; }
  .catbar__list a.is-deal { background: var(--orange); color: var(--ink); }
  .catbar__list a.is-deal .icon { color: var(--ink); }
}
@media (max-width: 400px) { .hdr-cart .hdr-act__txt { display: none; } }

/* ---------- Mega menü ---------- */
.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-mega);
  background: var(--white); color: var(--ink);
  border-top: 3px solid var(--orange); box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out), visibility 0s linear var(--t-mid);
}
.mega.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega__inner { display: grid; grid-template-columns: 270px 1fr 300px; min-height: 420px; max-height: calc(100dvh - var(--hdr-full) - 20px); }
.mega__rail { border-right: 1px solid var(--rule); padding: var(--s4) 0; overflow: auto; }
.mega__rail button {
  width: 100%; display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s5) 10px var(--s4);
  font-weight: 600; text-align: left; position: relative; color: var(--slate);
  transition: color var(--t-fast), background-color var(--t-fast);
}
.mega__rail button .icon { color: var(--ink); opacity: .55; transition: opacity var(--t-fast), color var(--t-fast); }
.mega__rail button[aria-selected="true"] { color: var(--ink); background: var(--orange-wash); }
.mega__rail button[aria-selected="true"] .icon { opacity: 1; color: var(--orange-deep); }
.mega__rail button::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--orange); transform: scaleY(0); transition: transform var(--t-mid) var(--ease-out); }
.mega__rail button[aria-selected="true"]::before { transform: scaleY(1); }
.mega__rail .std { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--slate); }
.mega__panel { padding: var(--s8); overflow: auto; }
.mega__panel h3 { font-stretch: var(--display-stretch); font-weight: 800; font-size: var(--fs-31); line-height: 1; display: flex; align-items: baseline; gap: var(--s3); }
.mega__panel h3 .code { font-size: var(--fs-13); color: var(--slate); font-weight: 500; }
.mega__panel p { color: var(--slate); margin-top: var(--s2); max-width: 52ch; font-size: var(--fs-14); }
.mega__subs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--s6); margin-top: var(--s6); }
.mega__subs a { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--rule); font-weight: 600; transition: color var(--t-fast), padding var(--t-mid) var(--ease-out); }
.mega__subs a:hover { color: var(--orange-deep); padding-left: 6px; }
.mega__subs a span { color: var(--slate); font-weight: 400; font-size: var(--fs-13); }
.mega__foot { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); align-items: center; }
.mega__side { background: var(--ink); color: var(--white); padding: var(--s6); display: flex; flex-direction: column; gap: var(--s3); position: relative; overflow: hidden; }
.mega__side .art { aspect-ratio: 4 / 3; border-radius: var(--r-md); background: var(--steel); overflow: hidden; }
.mega__side h4 { font-size: var(--fs-16); line-height: 1.3; }
.mega__side p { color: var(--mist); font-size: var(--fs-14); }
.mega__panel-anim { animation: megaIn 360ms var(--ease-out); }
@keyframes megaIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.mega-scrim, .search-scrim { position: fixed; inset: 0; z-index: calc(var(--z-header) - 1); background: rgb(21 24 28 / .4); opacity: 0; visibility: hidden; transition: opacity var(--t-mid), visibility 0s linear var(--t-mid); }
.mega-scrim.is-open, .search-scrim.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
@media (max-width: 1100px) { .mega__inner { grid-template-columns: 240px 1fr; } .mega__side { display: none; } }
@media (max-width: 860px) { .mega, .mega-scrim { display: none; } }

/* ---------- Arama açılır paneli (header arama kutusuna bağlı) ---------- */
.search-drop {
  position: absolute; left: -2px; top: calc(100% + 10px); z-index: 2;
  width: min(880px, calc(100vw - 2 * var(--gutter))); max-height: min(70dvh, 620px); overflow: auto;
  background: var(--white); border-radius: var(--r-lg); box-shadow: var(--sh-3); border: 1px solid var(--rule);
  padding: var(--s5); display: grid; gap: var(--s6);
  animation: dropIn 240ms var(--ease-out);
}
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .search-drop { position: fixed; left: 0; right: 0; width: auto; top: var(--drop-top, 150px); border-radius: 0 0 var(--r-lg) var(--r-lg); max-height: calc(100dvh - var(--drop-top, 150px) - 70px); } }

/* ---------- Overlay / Modal temel ---------- */
.overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: var(--s4);
  background: rgb(15 17 20 / .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-mid) var(--ease-out), visibility 0s linear var(--t-mid);
}
.overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.modal {
  position: relative; width: min(100%, 980px); max-height: calc(100dvh - 32px); overflow: auto;
  background: var(--white); border-radius: var(--r-lg); box-shadow: var(--sh-3);
  transform: translateY(16px) scale(.97); opacity: 0;
  transition: transform var(--t-mid) var(--ease-out), opacity var(--t-mid) var(--ease-out);
}
.overlay.is-open .modal { transform: none; opacity: 1; }
.modal__close { position: absolute; top: 10px; right: 10px; z-index: 2; background: var(--white); }
.modal--sm { width: min(100%, 460px); }

/* ---------- Arama sonuçları ---------- */
.search-group h3 { font-size: var(--fs-13); color: var(--slate); font-weight: 600; margin-bottom: var(--s3); }
.search-group .chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.search-results { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--s8); }
.search-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 10px 0; border-bottom: 1px solid var(--rule); font-weight: 600; }
.search-list a:hover { color: var(--orange-deep); }
.search-list small { color: var(--slate); font-weight: 400; }
.search-products { display: grid; gap: var(--s2); }
.search-product { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--s3); align-items: center; padding: 8px; border-radius: var(--r-md); transition: background-color var(--t-fast); }
.search-product:hover, .search-product:focus-visible { background: var(--panel); }
.search-product .thumb { width: 64px; height: 64px; border-radius: var(--r-sm); overflow: hidden; background: var(--panel); }
.search-product b { display: block; font-size: var(--fs-14); line-height: 1.3; }
.search-product small { color: var(--slate); font-size: var(--fs-12); }
.search-product .price { font-weight: 800; white-space: nowrap; }
mark { background: var(--orange-wash); color: inherit; padding: 0 2px; border-radius: 2px; }
.fade-swap { animation: fadeSwap 260ms var(--ease-out); }
@keyframes fadeSwap { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) { .search-results { grid-template-columns: 1fr; gap: var(--s5); } }

/* ---------- Product card ---------- */
.p-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--s5); }
@media (max-width: 1100px) { .p-grid { --cols: 3; } }
@media (max-width: 760px) { .p-grid { --cols: 2; gap: var(--s3); } }
.p-grid.is-list { --cols: 1 !important; }

.p-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: box-shadow var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out), border-color var(--t-mid);
}
.p-card:hover { box-shadow: var(--sh-2); transform: translateY(-3px); border-color: rgb(var(--orange-glow) / .35); }
.p-card__media { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--panel); }
.p-card__media .art { position: absolute; inset: 0; transition: opacity var(--t-mid) var(--ease-out), transform 900ms var(--ease-out); }
.p-card__media .art--alt { opacity: 0; }
.p-card:hover .art--main { opacity: 0; transform: scale(1.04); }
.p-card:hover .art--alt { opacity: 1; transform: scale(1.04); }
.p-card__badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; z-index: 2; }
.p-card__fav { position: absolute; top: 6px; right: 6px; z-index: 2; background: rgb(255 255 255 / .85); }
.p-card__actions {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
  display: flex; gap: 6px;
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out);
}
.p-card:hover .p-card__actions, .p-card:focus-within .p-card__actions { opacity: 1; transform: none; }
.p-card__actions .btn { flex: 1; min-height: 42px; padding: 0 10px; font-size: var(--fs-14); }
.p-card__actions .btn--outline { flex: 0 0 42px; background: var(--white); padding: 0; }
.p-card__body { padding: var(--s4) var(--s4) var(--s5); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.p-card__brand { font-size: var(--fs-12); color: var(--slate); font-weight: 600; }
.p-card__title { font-size: var(--fs-16); font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.p-card__rating { display: flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--slate); }
.p-card__std { display: flex; flex-wrap: wrap; gap: 4px; }
.p-card__foot { margin-top: auto; padding-top: 6px; display: flex; align-items: end; justify-content: space-between; gap: var(--s2); }
.price { display: flex; flex-direction: column; line-height: 1.1; }
.price s { color: var(--slate); font-size: var(--fs-13); }
.price b { font-size: var(--fs-20); font-weight: 800; font-stretch: 90%; }
.price.is-sale b { color: var(--orange-deep); }
.dark .price.is-sale b { color: var(--orange); }
.p-card .stock { font-size: var(--fs-12); }
@media (hover: none) {
  .p-card__actions { opacity: 1; transform: none; left: 8px; right: 8px; bottom: 8px; }
  .p-card__actions .btn { min-height: 38px; font-size: var(--fs-13); box-shadow: var(--sh-2); }
  .p-card__actions .btn--outline { display: none; }
  .p-card:hover { transform: none; }
}
@media (max-width: 760px) {
  .p-card__body { padding: var(--s3); }
  .p-card__title { font-size: var(--fs-14); }
  .price b { font-size: var(--fs-18); }
  .p-card__std { display: none; }
}
/* Liste görünümü */
.is-list .p-card { flex-direction: row; }
.is-list .p-card__media { width: 240px; flex: none; aspect-ratio: auto; min-height: 220px; border-radius: var(--r-md) 0 0 var(--r-md); }
.is-list .p-card__actions { position: static; opacity: 1; transform: none; padding: 0; margin-top: var(--s3); max-width: 360px; }
@media (max-width: 760px) { .is-list .p-card__media { width: 132px; min-height: 0; } }

/* Kart iskeleti */
.p-card--skel .p-card__media { background: none; }
.p-card--skel .skel.img { position: absolute; inset: 0; border-radius: 0; }

/* ---------- Ürün illüstrasyonu (gerçek görsel gelene kadar) ---------- */
.ik-art { --st: #2A2F35; --fl: #DDE1E4; }
.ik-art--dark, .art--dark .ik-art { --st: #A9B1B9; --fl: #2A2F36; }
.ik-art path, .ik-art circle, .ik-art rect, .ik-art ellipse { fill: none; stroke: var(--st); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ik-art .f { fill: var(--fl); }
.ik-art .t { stroke-width: 1.6; opacity: .55; }
.ik-art .a { stroke: var(--orange); }
.ik-art .w { stroke-width: 7; }
.ik-art .dims path { stroke: #9AA2AB; stroke-width: 1; }
.ik-art .dims text { font: 500 9px var(--mono); fill: #8A9199; }
.cat-tile .ik-art { --st: currentColor; }
/* ---------- Ürün illüstrasyon zemini ---------- */
.art { display: grid; place-items: center; background:
  radial-gradient(120% 90% at 30% 20%, #FFFFFF 0%, #EEF0F2 60%, #E4E7EA 100%); }
.art svg { width: 78%; height: 78%; }
.art--dark { background: radial-gradient(120% 90% at 30% 20%, #2A2F36 0%, #1C2025 70%); }

/* ---------- Quick view ---------- */
.qv { display: grid; grid-template-columns: 1.05fr 1fr; }
.qv__gallery { background: var(--panel); padding: var(--s5); display: grid; gap: var(--s3); border-radius: var(--r-lg) 0 0 var(--r-lg); }
.qv__main { aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; }
.qv__thumbs { display: flex; gap: var(--s2); }
.qv__thumbs button { width: 64px; height: 64px; border-radius: var(--r-sm); overflow: hidden; border: 2px solid transparent; transition: border-color var(--t-fast); }
.qv__thumbs button[aria-current="true"] { border-color: var(--orange); }
.qv__info { padding: var(--s8); display: flex; flex-direction: column; gap: var(--s4); }
.qv__info h2 { font-size: var(--fs-24); line-height: 1.2; font-weight: 700; }
@media (max-width: 760px) {
  .qv { grid-template-columns: 1fr; }
  .qv__gallery { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .qv__info { padding: var(--s5); }
  #quickview .modal { align-self: end; border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 92dvh; }
  #quickview { padding: 0; }
}

/* Varyant & adet (ortak) */
.opt-label { display: flex; justify-content: space-between; font-size: var(--fs-14); font-weight: 700; margin-bottom: var(--s2); }
.opt-label { align-items: center; }
.opt-label .sg-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-pill); background: var(--orange-wash); color: var(--orange-deep); font-weight: 700; font-size: var(--fs-13); border: 1px solid rgb(var(--orange-glow) / .35); transition: background-color var(--t-fast), color var(--t-fast); }
.opt-label .sg-link:hover { background: var(--orange); color: var(--ink); }
.sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.sizes button {
  min-width: 48px; height: 44px; padding: 0 10px; border: 1px solid var(--rule); border-radius: var(--r-xs);
  font-weight: 700; font-variant-numeric: tabular-nums; background: var(--white);
  transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}
.sizes button:hover { border-color: var(--ink); }
.sizes button[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.sizes button:disabled { color: #B0B6BC; background: repeating-linear-gradient(135deg, transparent 0 6px, #EEF0F1 6px 7px); cursor: not-allowed; }
.swatches { display: flex; gap: 8px; }
.swatches button { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--rule); transition: box-shadow var(--t-fast); }
.swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--orange); }
.qty { display: inline-flex; align-items: center; height: 48px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--white); }
.qty button { width: 42px; height: 100%; display: grid; place-items: center; color: var(--slate); }
.qty button:hover { color: var(--ink); }
.qty output { min-width: 32px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.qty output.tick { animation: tick 240ms var(--ease-out); }
@keyframes tick { from { transform: translateY(-6px); opacity: .2; } to { transform: none; opacity: 1; } }
.qty--sm { height: 36px; }
.qty--sm button { width: 32px; }
.buy-row { display: flex; gap: var(--s2); align-items: stretch; }
.buy-row .btn--primary { flex: 1; }
.buy-row .qty { height: auto; min-height: 48px; }

/* ---------- Drawer (sepet / mobil menü / filtre) ---------- */
.drawer-wrap { position: fixed; inset: 0; z-index: var(--z-drawer); visibility: hidden; transition: visibility 0s linear var(--t-mid); }
.drawer-wrap.is-open { visibility: visible; transition-delay: 0s; }
.drawer-wrap .scrim { position: absolute; inset: 0; background: rgb(15 17 20 / .5); backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--t-mid); }
.drawer-wrap.is-open .scrim { opacity: 1; }
.drawer {
  position: absolute; top: 0; bottom: 0; right: 0; width: min(100%, 440px);
  background: var(--white); display: flex; flex-direction: column; box-shadow: var(--sh-3);
  transform: translateX(100%); transition: transform var(--t-mid) var(--ease-out);
}
.drawer--left { right: auto; left: 0; transform: translateX(-100%); }
.drawer-wrap.is-open .drawer { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--rule); }
.drawer__head h2 { font-size: var(--fs-20); font-weight: 800; font-stretch: 90%; }
.drawer__body { flex: 1; overflow: auto; padding: var(--s5); overscroll-behavior: contain; }
.drawer__foot { padding: var(--s5); border-top: 1px solid var(--rule); display: grid; gap: var(--s3); background: var(--panel); }
@media (max-width: 760px) {
  .drawer--sheet { top: auto; left: 0; right: 0; width: 100%; max-height: 88dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; transform: translateY(100%); }
  .drawer--sheet .drawer__head::before { content: ""; position: absolute; left: 50%; top: 6px; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--rule); }
  .drawer--sheet .drawer__head { position: relative; padding-top: var(--s6); }
}

.ship-progress { display: grid; gap: 8px; font-size: var(--fs-14); }
.ship-progress .bar { height: 6px; background: var(--rule); border-radius: 6px; overflow: hidden; }
.ship-progress .bar i { display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, var(--orange), var(--orange-hi)); border-radius: inherit; transition: width var(--t-slow) var(--ease-out); box-shadow: 0 0 12px rgb(var(--orange-glow) / .6); }
.ship-progress b { color: var(--orange-deep); }
.ship-progress.done b { color: var(--ok); }

.drawer .cart-line { display: grid; grid-template-columns: 76px 1fr; gap: var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--rule); animation: fadeSwap 320ms var(--ease-out); }
.drawer .cart-line .thumb { width: 76px; height: 76px; border-radius: var(--r-sm); overflow: hidden; }
.drawer .cart-line h3 { font-size: var(--fs-14); font-weight: 600; line-height: 1.3; }
.drawer .cart-line small { color: var(--slate); font-size: var(--fs-12); }
.drawer .cart-line .row { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s2); }
.drawer .cart-line .rm { font-size: var(--fs-12); color: var(--slate); text-decoration: underline; text-underline-offset: 3px; }
.drawer .cart-line .rm:hover { color: var(--danger); }
.totals { display: grid; gap: 6px; font-size: var(--fs-14); }
.totals div { display: flex; justify-content: space-between; }
.totals .grand { font-size: var(--fs-18); font-weight: 800; padding-top: 6px; border-top: 1px dashed var(--rule); }

/* ---------- Empty / error state ---------- */
.empty { display: grid; justify-items: center; text-align: center; gap: var(--s3); padding: var(--s12) var(--s5); }
.empty svg.pic { width: 120px; height: 120px; }
.empty h3 { font-size: var(--fs-20); font-weight: 800; font-stretch: 90%; }
.empty p { color: var(--slate); max-width: 40ch; }

/* ---------- Toast ---------- */
.toasts { position: fixed; z-index: var(--z-toast); right: 20px; bottom: 20px; display: grid; gap: 10px; width: min(360px, calc(100% - 32px)); pointer-events: none; }
.toast {
  pointer-events: auto; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px;
  padding: 10px 10px 10px 12px; background: var(--ink); color: var(--white); border-radius: var(--r-md); box-shadow: var(--sh-3);
  border: 1px solid rgb(255 255 255 / .08);
  animation: toastIn 420ms var(--ease-out);
}
.toast.out { animation: toastOut 260ms var(--ease-io) forwards; }
.toast .ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-sm); background: rgb(var(--orange-glow) / .16); color: var(--orange); }
.toast p { font-size: var(--fs-14); font-weight: 600; }
.toast small { display: block; color: var(--mist); font-weight: 400; font-size: var(--fs-12); }
.toast a { color: var(--orange); font-weight: 700; font-size: var(--fs-13); padding: 6px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(24px); } }
@media (max-width: 860px) { .toasts { left: 16px; right: 16px; width: auto; bottom: 84px; } }

/* ---------- Newsletter / exit popup ---------- */
.promo { display: grid; grid-template-columns: 1fr 1.1fr; overflow: hidden; }
.promo__art { background: var(--ink); position: relative; min-height: 260px; display: grid; place-items: center; overflow: hidden; }
.promo__art .big { font-stretch: 70%; font-weight: 900; font-size: 88px; color: var(--orange); line-height: .9; position: relative; }
.promo__art .big small { display: block; font-size: 18px; font-stretch: 100%; font-weight: 600; color: var(--mist); }
.promo__body { padding: var(--s8) var(--s6); display: grid; gap: var(--s4); align-content: center; }
.promo__body h2 { font-size: var(--fs-24); font-weight: 800; font-stretch: 85%; line-height: 1.1; }
.promo__body p { color: var(--slate); font-size: var(--fs-14); }
.promo__body .fine { font-size: var(--fs-12); }
@media (max-width: 620px) { .promo { grid-template-columns: 1fr; } .promo__art { min-height: 140px; } .promo__art .big { font-size: 64px; } }

/* ---------- Cookie ---------- */
.cookie {
  position: fixed; left: 20px; bottom: 20px; z-index: calc(var(--z-drawer) - 1); width: min(420px, calc(100% - 32px));
  background: var(--white); border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: var(--s5);
  display: grid; gap: var(--s3); font-size: var(--fs-14);
  transform: translateY(24px); opacity: 0; transition: transform var(--t-mid) var(--ease-out), opacity var(--t-mid);
}
.cookie.is-open { transform: none; opacity: 1; }
.cookie a { text-decoration: underline; text-underline-offset: 3px; }
.cookie .btns { display: flex; gap: var(--s2); }
.cookie .btns .btn { flex: 1; }
@media (max-width: 860px) { .cookie { left: 16px; right: 16px; bottom: 80px; width: auto; } }

/* ---------- Mobil alt navigasyon ---------- */
.bottom-nav { display: none; }
@media (max-width: 860px) {
  .bottom-nav {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bottomnav);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgb(255 255 255 / .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--rule);
  }
  .bottom-nav a, .bottom-nav button { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 0 6px; font-size: 11px; font-weight: 600; color: var(--slate); }
  .bottom-nav [aria-current="page"] { color: var(--ink); }
  .bottom-nav [aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; background: var(--orange); }
  .bottom-nav .count { top: 2px; right: calc(50% - 20px); }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* Mobil menü */
.m-menu .drawer__body { padding: 0; }
.m-menu nav a, .m-menu nav button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px var(--s5); border-bottom: 1px solid var(--rule); font-weight: 600; text-align: left; }
.m-menu nav .code { color: var(--slate); font-size: 11px; }
.m-menu .sub { background: var(--panel); }
.m-menu .sub a { padding-left: var(--s8); font-weight: 500; font-size: var(--fs-14); }

/* ---------- Breadcrumb / Pagination ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-13); color: var(--slate); }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.dark .crumbs, .dark .crumbs [aria-current] { color: var(--mist); }
.dark .crumbs [aria-current] { color: var(--white); }
body[data-page] .pager { display: flex; justify-content: center; gap: 6px; margin-top: var(--s10); }
body[data-page] .pager a, body[data-page] .pager span { min-width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-sm); font-weight: 700; border: 1px solid var(--rule); background: var(--white); }
body[data-page] .pager a:hover { border-color: var(--ink); }
body[data-page] .pager [aria-current="page"] { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* ---------- Trust (güven) bileşeni ---------- */
.trust { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--white); overflow: hidden; }
.trust__item { position: relative; padding: var(--s5); display: grid; gap: var(--s2); align-content: start; border-right: 1px solid var(--rule); overflow: hidden; }
.trust__item:last-child { border-right: 0; }
.trust__item::before { content: ""; position: absolute; inset: 0; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--orange-glow) / .12), transparent 60%); opacity: 0; transition: opacity var(--t-mid); pointer-events: none; }
.trust__item:hover::before { opacity: 1; }
.trust__ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--panel); color: var(--ink); position: relative; }
.trust__ic::after { content: ""; position: absolute; right: -3px; top: -3px; width: 8px; height: 8px; background: var(--orange); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.trust__item b { font-size: var(--fs-14); line-height: 1.25; }
.trust__item small { color: var(--slate); font-size: var(--fs-12); line-height: 1.4; }
@media (max-width: 1100px) { .trust { grid-template-columns: repeat(3, 1fr); } .trust__item:nth-child(3) { border-right: 0; } .trust__item:nth-child(-n+3) { border-bottom: 1px solid var(--rule); } }
@media (max-width: 600px) { .trust { grid-template-columns: repeat(2, 1fr); } .trust__item { border-bottom: 1px solid var(--rule); } .trust__item:nth-child(3) { border-right: 1px solid var(--rule); } .trust__item:nth-child(2n) { border-right: 0; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--mist); position: relative; overflow: hidden; border-top: 4px solid var(--orange); }
.site-footer .logo__svg { height: 60px; }
.site-footer a:hover { color: var(--white); }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr) 1.3fr; gap: var(--s8); padding-block: var(--s16) var(--s10); }
.footer-top h2 { color: var(--white); font-size: var(--fs-14); font-weight: 700; margin-bottom: var(--s4); }
.footer-top li + li { margin-top: 10px; }
.footer-top li a { font-size: var(--fs-14); }
.footer-brand p { margin-top: var(--s4); font-size: var(--fs-14); max-width: 36ch; }
.footer-brand .logo { color: var(--white); }
.footer-contact address { font-style: normal; font-size: var(--fs-14); display: grid; gap: 8px; }
.socials { display: flex; gap: 6px; margin-top: var(--s4); }
.socials a { font-size: 12px; font-weight: 800; color: var(--white); width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / .14); border-radius: var(--r-sm); transition: border-color var(--t-fast), color var(--t-fast); }
.socials a:hover { border-color: var(--orange); color: var(--orange); }
.footer-mid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); padding-block: var(--s5); border-top: 1px solid rgb(255 255 255 / .08); }
.pay-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pay-list span { height: 30px; padding: 0 10px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / .14); border-radius: var(--r-xs); font-size: 11px; font-weight: 700; color: var(--white); letter-spacing: .02em; }
.secure { display: flex; align-items: center; gap: 8px; font-size: var(--fs-13); }
.secure .icon { color: var(--ok); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); padding-block: var(--s5) var(--s8); border-top: 1px solid rgb(255 255 255 / .08); font-size: var(--fs-13); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--s5); }
.footer-word { font-stretch: 125%; font-weight: 900; font-size: clamp(64px, 17vw, 260px); line-height: .78; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgb(255 255 255 / .09); white-space: nowrap; user-select: none; margin-bottom: -.12em; padding-top: .32em; margin-top: -.32em; text-align: center; background: linear-gradient(90deg, transparent, rgb(var(--orange-glow) / .4) var(--fx, -30%), transparent calc(var(--fx, -30%) + 12%)); -webkit-background-clip: text; background-clip: text; }
@media (max-width: 1100px) { .footer-top { grid-template-columns: 1fr 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } .footer-contact { grid-column: span 3; } }
@media (max-width: 600px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-contact { grid-column: 1 / -1; } }

/* ---------- Özel imleç (yalnız hassas işaretçide) ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: var(--z-cursor); pointer-events: none; display: none; }
.has-cursor .cursor { display: block; }
.cursor__dot, .cursor__ring { position: fixed; left: 0; top: 0; border-radius: 50%; transform: translate3d(-100px, -100px, 0); }
.cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--orange); }
.cursor__ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid rgb(var(--orange-glow) / .55); transition: width var(--t-mid) var(--ease-out), height var(--t-mid) var(--ease-out), margin var(--t-mid) var(--ease-out), background-color var(--t-mid), border-color var(--t-mid); display: grid; place-items: center; }
.cursor__ring span { font-size: 10px; font-weight: 800; color: var(--ink); opacity: 0; transition: opacity var(--t-fast); }
.cursor.is-hover .cursor__ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgb(var(--orange-glow) / .12); border-color: var(--orange); }
.cursor.is-label .cursor__ring { width: 76px; height: 76px; margin: -38px 0 0 -38px; background: var(--orange); border-color: var(--orange); }
.cursor.is-label .cursor__ring span { opacity: 1; }
.cursor.is-text .cursor__ring { opacity: 0; }
.cursor.is-off .cursor__ring, .cursor.is-off .cursor__dot { opacity: 0; }
.catbar__list .m-only { display: none; }
@media (max-width: 860px) { .catbar__list .m-only { display: flex; } .catbar__list li { display: flex; align-items: center; } }

/* =========================================================
   Beden rehberi (modal + sayfa, üç tablo aynı düzen)
   ========================================================= */
.modal--xl { width: min(100%, 1180px); }
#size-guide .modal__content { padding: var(--s6) var(--s8) var(--s8); }
.sg-modal-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px var(--s5); padding-right: 48px; margin-bottom: var(--s5); }
.sg-modal-head h2 { display: flex; align-items: center; gap: 10px; font-size: var(--fs-24); font-weight: 800; font-stretch: 85%; }
.sg-modal-head h2 .icon { color: var(--orange-deep); }
.sg-modal-head small, .sg small[lang="en"] { font-weight: 500; color: var(--slate); font-size: .78em; font-stretch: 100%; }
.sg-modal-head p { color: var(--slate); font-size: var(--fs-14); }
.sg-modal-head .link-arrow { margin-left: auto; font-size: var(--fs-14); }

.sg { display: grid; gap: var(--s5); }
.sg-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.sg-tabs button { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--rule); border-radius: var(--r-md); background: var(--white); text-align: left; transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-mid); }
.sg-tabs button .icon { width: 28px; height: 28px; color: var(--slate); }
.sg-tabs button span { display: grid; line-height: 1.2; }
.sg-tabs button b { font-size: var(--fs-16); }
.sg-tabs button small { font-size: var(--fs-12); color: var(--slate); }
.sg-tabs button:hover { border-color: var(--ink); }
.sg-tabs button[aria-selected="true"] { border-color: var(--orange); background: var(--orange-wash); box-shadow: 0 0 0 3px rgb(var(--orange-glow) / .16); }
.sg-tabs button[aria-selected="true"] .icon { color: var(--orange-deep); }

.sg-panel { display: grid; gap: var(--s5); animation: fadeSwap 280ms var(--ease-out); }
.sg-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s5); align-items: stretch; }
.sg-finder { background: var(--ink); color: var(--white); border-radius: var(--r-lg); padding: var(--s6); display: grid; gap: var(--s4); align-content: start; position: relative; overflow: hidden; }
.sg-finder::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgb(255 255 255 / .04) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .04) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(180deg, #000, transparent 70%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); }
.sg-finder > * { position: relative; }
.sg-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-13); font-weight: 700; color: var(--orange); }
.sg-kicker small { color: var(--mist) !important; }
.sg-finder h3 { margin-top: 6px; font-size: var(--fs-24); font-weight: 800; font-stretch: 85%; line-height: 1.1; display: grid; }
.sg-finder h3 small { font-size: var(--fs-13) !important; color: var(--mist) !important; margin-top: 2px; }
.sg-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: rgb(255 255 255 / .06); border-radius: var(--r-sm); }
.sg-seg button { padding: 8px; border-radius: var(--r-xs); display: grid; line-height: 1.15; color: var(--mist); transition: background-color var(--t-fast), color var(--t-fast); }
.sg-seg button small { font-size: 11px; color: inherit !important; opacity: .8; }
.sg-seg button[aria-checked="true"] { background: var(--white); color: var(--ink); }
.sg-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.sg-fields--1 { grid-template-columns: minmax(0, 260px); }
.sg-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sg-field label { display: grid; line-height: 1.2; margin-bottom: 6px; font-size: var(--fs-13); }
.sg-field label small { font-size: 11px !important; color: var(--mist) !important; }
.sg-input { display: flex; align-items: center; height: 48px; border-radius: var(--r-sm); background: var(--white); border: 2px solid transparent; transition: border-color var(--t-fast), box-shadow var(--t-mid); }
.sg-input:focus-within { border-color: var(--orange); box-shadow: 0 0 0 4px rgb(var(--orange-glow) / .25); }
.sg-input input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0 12px; font-size: var(--fs-18); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.sg-input span { padding-right: 12px; color: var(--slate); font-size: var(--fs-13); font-weight: 600; }
.sg-field.is-err .sg-input { border-color: var(--danger); }
.sg-err { display: flex; gap: 8px; align-items: center; color: #FF8A7A; font-size: var(--fs-13); font-weight: 600; }
.sg-panel .sg-out .sg-err, .modal .sg-err { color: #FF8A7A; }
.sg-empty { display: flex; gap: 12px; align-items: center; padding: var(--s4); border: 1px dashed rgb(255 255 255 / .18); border-radius: var(--r-md); color: var(--mist); font-size: var(--fs-14); }
.sg-empty .icon { width: 28px; height: 28px; color: var(--orange); flex: none; }
.sg-empty small { display: block; font-size: 12px; opacity: .8; }
.sg-out { display: grid; gap: var(--s3); padding: var(--s4); border-radius: var(--r-md); background: rgb(255 255 255 / .06); border: 1px solid rgb(var(--orange-glow) / .45); }
.sg-out__main { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--s4); }
.sg-out__label { grid-column: 1 / -1; font-size: var(--fs-13); color: var(--mist); display: flex; gap: 6px; align-items: baseline; }
.sg-out__label small { font-size: 11px !important; color: var(--mist) !important; opacity: .75; }
.sg-out__size { font-size: 64px; line-height: .95; font-weight: 900; font-stretch: 72%; color: var(--orange); font-variant-numeric: tabular-nums; }
.sg-out__sub { font-size: var(--fs-14); color: #D5D9DD; line-height: 1.4; }
.sg-out__sub b { color: var(--white); }
.sg-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--s4); font-size: var(--fs-13); }
.sg-dl div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgb(255 255 255 / .08); }
.sg-dl dt { color: var(--mist); }
.sg-dl dd { font-weight: 700; }
.sg-notes { display: grid; gap: 6px; }
.sg-notes li { display: flex; gap: 8px; font-size: var(--fs-13); color: #D5D9DD; line-height: 1.45; }
.sg-notes .icon { flex: none; margin-top: 2px; color: var(--mist); }
.sg-notes .is-tip .icon { color: var(--orange); }
.sg-notes .is-warn { color: #FFC9A0; }

.sg-how { border: 1px solid var(--rule); border-radius: var(--r-lg); padding: var(--s6); background: var(--white); }
.sg-how h4 { font-size: var(--fs-18); font-weight: 800; display: flex; gap: 8px; align-items: baseline; margin-bottom: var(--s4); }
.sg-how h4 small { font-size: var(--fs-13) !important; }
.sg-how__grid { display: grid; grid-template-columns: 150px 1fr; gap: var(--s5); align-items: start; }
.sg-fig { width: 100%; height: auto; max-height: 280px; }
.sg-fig .sg-body { fill: var(--panel); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.sg-fig .sg-acc { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; }
.sg-fig .sg-dim { fill: none; stroke: var(--slate); stroke-width: 1.2; }
.sg-mk circle { fill: var(--ink); }
.sg-mk text { fill: var(--white); font: 700 11px var(--font); }
.sg-how ol { display: grid; gap: var(--s3); }
.sg-how li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: var(--fs-14); }
.sg-how li p { color: var(--slate); font-size: var(--fs-13); margin-top: 2px; line-height: 1.5; }
.sg-n { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--white); display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; }

.sg-table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--white); scrollbar-width: thin; }
.sg-table-wrap:focus-visible { outline: none; box-shadow: var(--focus); }
.sg-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-14); font-variant-numeric: tabular-nums; }
.sg-table th, .sg-table td { padding: 10px 8px; text-align: center; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); white-space: nowrap; }
.sg-table tr > :last-child { border-right: 0; }
.sg-table tbody tr:last-child > * { border-bottom: 0; }
.sg-table thead th { background: var(--ink); color: var(--white); font-size: var(--fs-16); font-weight: 800; border-color: rgb(255 255 255 / .1); padding-block: 12px; }
.sg-table thead th:first-child { text-align: left; }
.sg-table thead th span { display: grid; line-height: 1.15; }
.sg-table thead th small { color: var(--mist) !important; font-size: 11px !important; }
.sg-table tbody th { text-align: left; font-weight: 400; background: var(--panel); }
.sg-table tbody th > span:last-child { display: inline-grid; line-height: 1.2; vertical-align: middle; }
.sg-table tbody th b { font-size: var(--fs-13); font-weight: 700; }
.sg-table tbody th small { font-size: 11px !important; }
.sg-table tbody th .sg-n { margin-right: 8px; vertical-align: middle; }
.sg-table th:first-child { position: sticky; left: 0; z-index: 1; min-width: 190px; box-shadow: 1px 0 0 var(--rule); }
.sg-table .sg-sub td, .sg-table .sg-sub th { color: var(--slate); font-size: var(--fs-13); padding-block: 6px; }
.sg-table .sg-sub-top > * { border-bottom-style: dashed; }
.sg-table .sg-th-sub small { font-size: 11px; padding-left: 30px; }
.sg-table td small { display: block; font-size: 11px; color: var(--slate); }
.sg-table .sg-to { color: var(--slate); font-size: var(--fs-12); }
.sg-table .sg-letter { font-weight: 500; color: var(--mist); font-size: var(--fs-13); }
.sg-table--dense th, .sg-table--dense td { padding-inline: 6px; }
.sg-table td.is-hi { background: var(--orange-wash); }
.sg-table thead th.is-hi { background: var(--orange); color: var(--ink); }
.sg-table thead th.is-hi .sg-letter { color: var(--ink); }
.sg-table td.is-hi-n { background: rgb(var(--orange-glow) / .28); box-shadow: inset 0 0 0 2px var(--orange); }
.sg-tips { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); font-size: var(--fs-13); }
.sg-tips li { display: flex; gap: 8px; align-items: flex-start; max-width: 52ch; }
.sg-tips .icon { color: var(--ok); margin-top: 2px; }
.sg-tips small { color: var(--slate); }
@media (max-width: 900px) {
  .sg-top { grid-template-columns: 1fr; }
  #size-guide .modal__content { padding: var(--s5) var(--s4) var(--s6); }
  .sg-modal-head .link-arrow { margin-left: 0; }
}
@media (max-width: 600px) {
  .sg-tabs button { flex-direction: column; text-align: center; gap: 6px; padding: 10px 6px; }
  .sg-tabs button b { font-size: var(--fs-14); }
  .sg-fields { grid-template-columns: 1fr 1fr; }
  .sg-fields .sg-field:first-child { grid-column: 1 / -1; }
  .sg-fields--1 { grid-template-columns: 1fr; }
  .sg-how__grid { grid-template-columns: 96px 1fr; gap: var(--s3); }
  .sg-table th:first-child { min-width: 140px; }
  .sg-finder, .sg-how { padding: var(--s4); }
  #size-guide .modal { align-self: end; border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 94dvh; }
  #size-guide { padding: 0; }
}
.link-clear { font-size: var(--fs-12); font-weight: 600; color: var(--slate); text-decoration: underline; text-underline-offset: 3px; }
.link-clear:hover { color: var(--ink); }

/* Kendi çerçevesi olan giriş kutularında iç odak halkasını kapat (çerçeve odağı gösterir) */
.sg-input input:focus-visible, .hdr-search input:focus-visible { outline: none; box-shadow: none; }
.badge--size { display: inline-flex; align-items: center; gap: 6px; background: var(--orange); color: var(--ink); border: 0; font-weight: 800; cursor: pointer; transition: background-color var(--t-fast); }
.badge--size:hover { background: var(--orange-hi); }