/* ==========================================================================
   components.css — Amazon-tarzı pazaryeri UI
   Koyu header + sarı arama/CTA, beyaz içerik alanı, ürün kartları.
   emil: :active scale(0.97), custom ease-out, transition belirli özellik, hover gating.
   ========================================================================== */

/* ----- LOGO ------------------------------------------------------------ */
.brand {
  display: inline-flex; align-items: center; gap: var(--space-3);
  color: var(--color-ink);            /* amblem rengi (currentColor) */
  line-height: 1;
}
.brand__mark { width: 34px; height: 34px; flex: none; display: block; }
.brand__word {
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: var(--fw-black);
  letter-spacing: -0.02em; color: var(--color-ink);
  white-space: nowrap;
}
.brand__dot { color: var(--color-accent); }
.brand__tld { color: var(--color-ink-mute); font-weight: var(--fw-medium); }
.brand--mark { gap: 0; }

/* Şeffaf yatay kurumsal logo — tek kaynak logo.php */
.brand-img { display: block; height: 38px; width: auto; max-width: 100%; }
.brand-img--wordmark { object-fit: contain; object-position: left center; }
.header-brand .brand-img { height: 42px; }
.site-footer__brand .brand-img { height: 40px; }
.nav-panel__head .brand-img { height: 34px; }
.admin-navbar__brand .brand-img,
.admin-mobilenav__head .brand-img { height: 32px; }
.qdoc__logo .brand-img { height: 44px; }
@media (max-width: 760px) { .header-brand .brand-img { height: 34px; } }

/* Eski HTML wordmark kullanan geriye dönük yüzeyler için renk koruması. */
.brand--on-dark,
.brand--on-dark .brand,
.header-main .brand { --brand-mark-ink: var(--color-ink); color: var(--color-on-dark); }
.brand--on-dark .brand__word,
.brand--on-dark.brand .brand__word,
.header-main .brand__word { color: var(--color-on-dark); }
.brand--on-dark .brand__tld,
.brand--on-dark.brand .brand__tld,
.header-main .brand__tld { color: var(--color-on-dark-soft); }

/* ----- BUTONLAR -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  font-weight: var(--fw-semibold); font-size: var(--fs-100); line-height: 1;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md); border: 1px solid transparent;
  white-space: nowrap;
  transition: transform var(--dur-press) var(--ease-out),
              background-color var(--dur-fast) var(--ease-color),
              border-color var(--dur-fast) var(--ease-color),
              box-shadow var(--dur-fast) var(--ease-color),
              color var(--dur-fast) var(--ease-color);
}
.btn:active { transform: scale(0.97); }
.btn--lg { padding: var(--space-4) var(--space-6); font-size: var(--fs-200); }
.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--fs-75); }
.btn--block { width: 100%; }

.btn--primary   { background: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--shadow-1); }
.btn--secondary { background: var(--color-ink); color: var(--color-on-dark); }
.btn--outline   { background: transparent; color: var(--color-ink); border-color: var(--color-border-strong); }
.btn--ghost-on-dark { background: transparent; color: var(--color-on-dark); border-color: rgba(244,244,245,.28); }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover     { background: var(--color-accent-strong); box-shadow: var(--shadow-2); }
  .btn--secondary:hover   { background: var(--color-dark-2); }
  .btn--outline:hover     { border-color: var(--color-ink); background: var(--color-surface); }
  .btn--ghost-on-dark:hover { border-color: rgba(244,244,245,.55); background: rgba(244,244,245,.06); }
}
.btn .icon { width: 1.15em; height: 1.15em; flex: none; }

/* ----- ROZET ----------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--fs-50); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  background: var(--color-accent-soft); color: var(--color-ink);
}

/* ==========================================================================
   ÜST �?ERİT (ince utility bar)
   ========================================================================== */
/* En üst kampanya bandı (admin duyuruları otomatik döner) */
.topstrip {
  --topstrip-blue: #092a70;
  background:
    linear-gradient(102deg, rgba(255,255,255,.72) 0 34%, transparent 34.2%),
    linear-gradient(180deg, #dffcff 0%, #c7f4fa 100%);
  border-bottom: 3px solid var(--topstrip-blue);
  color: #071b50;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.topstrip::before,
.topstrip::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  background: rgba(2, 191, 218, .14);
}
.topstrip::before { width: 340px; height: 340px; left: 27%; top: -280px; }
.topstrip::after { width: 440px; height: 440px; right: -220px; bottom: -390px; }
.topstrip__inner {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 40px;
  align-items: center;
  gap: clamp(12px, 1.6vw, 26px);
  min-height: 116px;
}
.topstrip__viewport { position: relative; min-width: 0; align-self: stretch; }
.topstrip__item {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(330px, 1.25fr) minmax(330px, .95fr);
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  color: #071b50;
  line-height: 1.15;
  text-decoration: none;
  padding-block: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), visibility 0s linear .4s;
}
.topstrip__message {
  position: relative;
  top: -5px;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.topstrip__item.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.topstrip__copy { min-width: 0; display: grid; gap: 6px; }
.topstrip__copy small {
  color: #0088a2;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.topstrip__copy strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: clamp(1.15rem, 1.65vw, 1.65rem);
  font-weight: 850;
  letter-spacing: -.035em;
}
.topstrip__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 4px;
  border-bottom: 2px solid currentColor;
  color: var(--topstrip-blue);
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
}
.topstrip__cta .icon { width: 1rem; height: 1rem; transition: transform var(--dur-fast) var(--ease-out); }
.topstrip__products {
  position: relative;
  top: -5px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, .65vw, 10px);
  min-width: 0;
  padding-top: 0;
}
.topstrip__product {
  position: relative;
  display: grid;
  place-items: center;
  flex: 1 1 0;
  max-width: 92px;
  height: 94px;
}
.topstrip__product::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 10%;
  right: 10%;
  bottom: 7px;
  height: 10px;
  border-radius: 50%;
  background: rgba(7,27,80,.15);
  filter: blur(6px);
}
.topstrip__product img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 8px 8px rgba(7,27,80,.12));
}
.topstrip__deal {
  position: relative;
  top: -5px;
  display: grid;
  grid-template-columns: 42px auto;
  align-items: center;
  gap: 11px;
  min-width: 178px;
  padding: 11px 16px 11px 11px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 16px;
  background: linear-gradient(135deg, #071b50 0%, #0a327e 100%);
  box-shadow: 0 12px 28px rgba(7,27,80,.2);
  white-space: nowrap;
  overflow: hidden;
}
.topstrip__deal::after {
  content: "";
  position: absolute;
  width: 76px;
  height: 76px;
  right: -30px;
  top: -45px;
  border-radius: 50%;
  background: rgba(64, 219, 235, .2);
}
.topstrip__deal-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(135deg, #ffd531, #ffba00);
  color: #071b50;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.topstrip__deal-mark .icon { width: 20px; height: 20px; }
.topstrip__deal > span:last-child { display: grid; gap: 1px; }
.topstrip__deal strong { color: #fff; font-size: .86rem; letter-spacing: -.01em; }
.topstrip__deal small { color: #b9d7ef; font-size: .67rem; }
.topstrip__arrow {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--topstrip-blue);
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(9,42,112,.12);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-color), color var(--dur-fast) var(--ease-color);
}
.topstrip__arrow .icon { width: 1.1rem; height: 1.1rem; }
.topstrip__arrow--prev .icon { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .topstrip__arrow:hover { background: #fff; color: var(--topstrip-blue); }
  .topstrip__item:hover .topstrip__copy strong { color: #006f88; }
  .topstrip__item:hover .topstrip__cta .icon { transform: translateX(3px); }
}
@media (max-width: 1180px) {
  .topstrip__inner { grid-template-columns: 40px minmax(0, 1fr) 40px; }
  .topstrip__item { grid-template-columns: minmax(300px, 1.2fr) minmax(250px, .8fr); }
  .topstrip__deal { display: none; }
}
@media (max-width: 860px) {
  .topstrip__inner { grid-template-columns: 40px minmax(0, 1fr) 40px; min-height: 92px; }
  .topstrip__item { grid-template-columns: minmax(0, 1fr) minmax(190px, .55fr); }
  .topstrip__message,
  .topstrip__products { top: -7px; }
  .topstrip__product { height: 78px; }
  .topstrip__products .topstrip__product:nth-child(n + 4) { display: none; }
  .topstrip__cta { display: none; }
  .topstrip__copy strong { font-size: 1.08rem; }
}
@media (max-width: 760px) {
  .topstrip { display: none; }
}

.topbar {
  background: #0e0e11; color: var(--color-on-dark-soft); font-size: var(--fs-75);
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); min-height: 36px;
}
.topbar__contact { display: flex; align-items: center; gap: var(--space-5); }
.topbar a {
  color: var(--color-on-dark-soft);
  display: inline-flex; align-items: center; gap: var(--space-2);
  transition: color var(--dur-fast) var(--ease-color);
}
.topbar a .icon { width: 1.05em; height: 1.05em; }
.topbar__finder { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-on-dark-soft); }
.topbar__finder .icon { width: 1.05em; height: 1.05em; color: var(--color-accent); }
.topbar__finder strong { color: var(--color-on-dark); font-weight: var(--fw-semibold); }
@media (hover: hover) and (pointer: fine) { .topbar__finder:hover strong { color: var(--color-accent); } }
@media (max-width: 1100px) { .topbar a.topbar__finder { display: none; } }
.topbar__meta { display: flex; align-items: center; gap: var(--space-5); }
.topbar__promise { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-on-dark-soft); }
.topbar__promise .icon { width: 1.05em; height: 1.05em; color: var(--color-accent); }
.topbar__promise strong { color: var(--color-on-dark); font-weight: var(--fw-semibold); }
.topbar__cta { color: var(--color-accent) !important; font-weight: var(--fw-semibold); }
@media (hover: hover) and (pointer: fine) {
  .topbar a:hover { color: var(--color-on-dark); }
  .topbar a.is-accent:hover { color: #25d366; }
}
@media (max-width: 860px) { .topbar__promise { display: none; } }
@media (max-width: 640px) { .topbar__contact .label-text { display: none; } }

/* ==========================================================================
   ANA HEADER (Amazon-tarzı: logo + dev arama + sepet) — sticky
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: var(--z-header); }

.header-main { background: var(--color-ink); color: var(--color-on-dark); }
.header-main__inner {
  display: flex; align-items: center; gap: var(--space-5);
  min-height: 64px; padding-block: var(--space-3);
}
.header-main__inner > a:first-child { flex: none; display: block; }
@media (max-width: 760px) { .header-main .brand__word { font-size: 1.1rem; } }

/* Arama çubuğu — Amazon imzası: nötr alan + sarı arama düğmesi */
.search {
  position: relative;                 /* otomatik-tamamlama açılır menüsü için */
  flex: 1 1 auto; max-width: 720px;
  display: flex; align-items: stretch;
  background: var(--color-bg); border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  border: 2px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-color),
              box-shadow var(--dur-fast) var(--ease-color);
}
.search:focus-within { border-color: var(--color-accent); box-shadow: var(--shadow-2); }
.search__cat {
  flex: none; border: none; background: var(--color-surface-2);
  color: var(--color-ink-soft); font-size: var(--fs-75); font-weight: var(--fw-medium);
  padding: 0 var(--space-3); cursor: pointer; max-width: 150px;
  border-right: 1px solid var(--color-border);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.search__input {
  flex: 1 1 auto; border: none; outline: none;
  padding: var(--space-3) var(--space-4); font-size: var(--fs-100);
  color: var(--color-ink); background: var(--color-bg); min-width: 0;
}
.search__input::placeholder { color: var(--color-ink-mute); }
.search__btn {
  flex: none; background: var(--color-accent); color: var(--color-on-accent);
  padding-inline: var(--space-4); display: grid; place-items: center;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  transition: background-color var(--dur-fast) var(--ease-color);
}
.search__btn .icon { width: 1.2rem; height: 1.2rem; }
@media (hover: hover) and (pointer: fine) {
.search__btn:hover { background: var(--color-accent-strong); }
}

/* Sadece mobilde g�r�nen arama tetikleyicisi (header men� i�i) */
.mobile-search-toggle { display: none; }

/* Header aksiyonları (hesap + sepet) */
.header-actions { display: flex; align-items: center; gap: var(--space-4); flex: none; }
.header-link {
  display: flex; flex-direction: column; line-height: 1.2;
  color: var(--color-on-dark); font-size: var(--fs-75);
  padding: var(--space-2); border-radius: var(--radius-sm);
}
.header-link small { color: var(--color-on-dark-soft); font-size: var(--fs-50); }
.header-link strong { font-weight: var(--fw-semibold); display: inline-flex; align-items: center; gap: var(--space-1); }
.header-link strong .icon { width: 1.05em; height: 1.05em; }
.header-link--accent strong { color: var(--color-accent); }
@media (hover: hover) and (pointer: fine) {
  .header-link:hover { outline: 1px solid rgba(244,244,245,.22); }
}

/* Hamburger (mobil) */
.nav-toggle {
  display: none; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: var(--radius-md);
  color: var(--color-on-dark); border: 1px solid rgba(244,244,245,.18);
  transition: background-color var(--dur-fast) var(--ease-color), transform var(--dur-press) var(--ease-out);
}
.nav-toggle .icon { width: 1.4rem; height: 1.4rem; }
.nav-toggle:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .nav-toggle:hover { background: rgba(244,244,245,.08); } }

.cart-btn {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--color-on-dark); font-weight: var(--fw-semibold); font-size: var(--fs-75);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  border: 1px solid rgba(244,244,245,.18);
  transition: transform var(--dur-press) var(--ease-out),
              border-color var(--dur-fast) var(--ease-color),
              background-color var(--dur-fast) var(--ease-color);
}
.cart-btn:active { transform: scale(0.97); }
.cart-btn .icon { width: 1.5rem; height: 1.5rem; color: var(--color-accent); }
.cart-btn--order {
  border-color: rgba(34,197,94,.4);
  background: rgba(34,197,94,.08);
}
.cart-btn--order .icon { color: #4ade80; }
.cart-btn--order .count { background: #22c55e; color: #07140c; }
@media (hover: hover) and (pointer: fine) {
  .cart-btn:hover { border-color: var(--color-accent); background: rgba(245,197,24,.08); }
  .cart-btn--order:hover { border-color: #4ade80; background: rgba(34,197,94,.14); }
}
.cart-btn .count {
  position: absolute; top: -7px; right: -7px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: var(--fw-bold);
  background: var(--color-accent); color: var(--color-on-accent);
  border-radius: var(--radius-pill); border: 2px solid var(--color-ink);
  transform: scale(0);
  transition: transform var(--dur-base) var(--ease-out);
}
.cart-btn[data-count]:not([data-count="0"]) .count { transform: scale(1); }

/* ----- DEPARTMAN BAR (kategoriler) ------------------------------------- */
.deptbar { background: var(--color-dark-2); color: var(--color-on-dark); }
.deptbar__inner {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 44px; overflow-x: auto; scrollbar-width: none;
}
.deptbar__inner::-webkit-scrollbar { display: none; }
.dept-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--color-on-dark); font-size: var(--fs-75); font-weight: var(--fw-medium);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-color);
}
.dept-link .icon { width: 1.1em; height: 1.1em; color: var(--color-accent); }
.dept-link--all { font-weight: var(--fw-semibold); }
/* Taby marka vitrini — deptbar'da accent pill ile öne çıkar */
.dept-link--taby {
  color: var(--color-on-accent); font-weight: var(--fw-bold);
  background: var(--color-accent); margin-left: var(--space-2);
}
.dept-link--taby .icon { color: var(--color-on-accent); }
.dept-link--taby.is-active { box-shadow: inset 0 0 0 2px rgba(22,22,26,.25); }
.dept-link--visit { font-weight: var(--fw-semibold); }
.dept-link--visit.is-active { background: rgba(244,244,245,.1); box-shadow: inset 0 -2px 0 var(--color-accent); }
@media (hover: hover) and (pointer: fine) {
  .dept-link:hover { background: rgba(244,244,245,.08); }
  .dept-link--taby:hover { background: var(--color-accent-strong); }
}
.nav-link--taby { color: var(--color-accent-strong) !important; font-weight: var(--fw-bold); }

/* Alt kategorili menü öğesi + açılır liste */
.dept-item { position: relative; }
.dept-link__caret {
  width: .85em !important; height: .85em !important;
  color: var(--color-on-dark-soft) !important; margin-left: -2px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.dept-drop {
  position: absolute; top: 100%; left: 0; z-index: var(--z-header);
  min-width: 230px; max-height: min(60vh, 480px); overflow-y: auto;
  padding: var(--space-2);
  background: var(--color-surface); color: var(--color-ink);
  border: var(--border-thin); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
}
.dept-item:hover .dept-drop,
.dept-item:focus-within .dept-drop {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition-delay: 0s;
}
.dept-item:hover .dept-link__caret,
.dept-item:focus-within .dept-link__caret { transform: rotate(180deg); }
.dept-drop__link {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  font-size: var(--fs-75); font-weight: var(--fw-medium); color: var(--color-ink);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-color);
}
.dept-drop__link .icon { width: 1.05em; height: 1.05em; color: var(--color-accent); flex: none; }
.dept-drop__link:hover { background: rgba(22, 22, 26, .06); }
.dept-drop__link--all {
  font-weight: var(--fw-semibold);
  border-bottom: var(--border-thin); border-radius: var(--radius-md) var(--radius-md) 0 0;
  margin-bottom: var(--space-1);
}
/* Mega menu (3. seviye — alt kategorilerin kendi çocukları varsa) */
.dept-drop--mega { min-width: 460px; max-height: min(75vh, 500px); overflow-y: auto; }
.dept-mega {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-3);
  border-top: var(--border-thin);
}
.dept-mega__group { flex: 0 0 auto; min-width: 150px; max-width: 200px; display: flex; flex-direction: column; }
.dept-mega__item  { flex: 0 0 auto; min-width: 150px; }
.dept-drop__link--heading {
  font-weight: var(--fw-semibold); color: var(--color-dark);
  border-bottom: 1px solid rgba(22,22,26,.1);
  margin-bottom: var(--space-1);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.dept-drop__link--child {
  padding-left: calc(var(--space-3) + var(--space-2));
  font-size: calc(var(--fs-75) * .95);
  color: var(--color-dark-soft);
}
.dept-drop__link--child .icon { color: var(--color-dark-soft) !important; }

/* Tüm Kategoriler dropdown — dar liste */
.dept-drop--allcats { min-width: 220px; max-height: none; }

/* Geniş masaüstünde tüm bağlantıları tek satırda tut. Daha dar ekranlarda
   kategori ve kurumsal bağlantılar hamburger menüsünden erişilir. */
@media (min-width: 1500px) {
  .deptbar__inner {
    gap: 5px;
    overflow-x: visible;
    flex-wrap: nowrap;
    padding-block: var(--space-1);
  }
  .deptbar__inner .dept-link {
    gap: 7px;
    padding: var(--space-2) 10px;
    font-size: .81rem;
  }
  .deptbar__inner .dept-link--taby { margin-left: 4px; }
}

/* Mobil arama (header altında ayrı satır) */
.search--mobile { display: none; }
@media (max-width: 1499px) {
  .nav-toggle { display: grid; }
  .deptbar { display: none; }            /* kategoriler hamburger panelinde */
}
/* Tablet başlığı: masaüstü arama + hesap aksiyonları iPad genişliğine sığmaz.
   Aramayı kontrollü ikinci satıra taşı, temel aksiyonları tek satırda tut. */
@media (max-width: 1024px) {
  .header-main__inner {
    gap: var(--space-3);
    min-width: 0;
  }
  .header-main .search { display: none; }
  /* Menü ikonunu (hamburger) en sağa, arama butonunun sağına al. */
  .nav-toggle { order: 5; }
  .header-actions {
    min-width: 0;
    margin-left: auto;
    gap: var(--space-2);
  }
  .header-actions .header-link { display: none; }
  .mobile-search-wrap { display: none; }
  .mobile-search-wrap.is-open { display: block; }
  .header-main .search--mobile {
    display: flex;
    max-width: none;
    margin: var(--space-3) 0;
    padding: 0;
  }
  .mobile-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: var(--color-on-dark);
    border: 1px solid rgba(244,244,245,.18);
    border-radius: var(--radius-md);
  }
  .mobile-search-toggle .icon {
    width: 1.4rem;
    height: 1.4rem;
    color: var(--color-accent);
  }
  .topbar__inner { min-width: 0; }
  .topbar__contact {
    width: 100%;
    min-width: 0;
    gap: var(--space-4);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .topbar__contact::-webkit-scrollbar { display: none; }
  .topbar__contact > * { flex: 0 0 auto; }
}
@media (max-width: 760px) {
  .header-main .search { display: none; }
  /* Mobil arama ba�l�kta tetiklenene kadar gizli */
  .mobile-search-wrap { display: none; }
  .mobile-search-wrap.is-open { display: block; }
  .header-main .search--mobile { display: flex; margin: var(--space-3) 0; padding: 0; }
  .header-actions .header-link { display: none; }   /* giri�/kay�t panelde */
  
  /* Mobil Arama Toggle Butonu */
  .mobile-search-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-on-dark); background: transparent;
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
    border: 1px solid rgba(244,244,245,.18); cursor: pointer;
    transition: all var(--dur-fast) var(--ease-color);
  }
  .mobile-search-toggle:active { transform: scale(0.97); }
  .mobile-search-toggle .icon { width: 1.5rem; height: 1.5rem; color: var(--color-accent); }
  
  /* Arama g�nder butonu mobilde daha k���k */
  .search--mobile .search__btn { padding-inline: var(--space-3); max-width: 48px; }
  .search--mobile .search__btn .icon { width: 1.15rem; height: 1.15rem; }
  .search--mobile .search__input { padding-block: var(--space-2); font-size: 0.95rem; }
}
@media (max-width: 560px) {
  /* Sepet butonunda yazıyı gizle (ikon+sayı) → logoya yer aç, logo ezilmesin */
  .cart-btn .label-text { display: none; }
  .nav-toggle,
  .mobile-search-toggle,
  .cart-btn { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .topbar__inner { min-height: 44px; }
  .topbar__contact a { min-width: 32px; min-height: 44px; justify-content: center; }
  .search--mobile .search__input { min-height: 44px; font-size: 16px; }
  .search--mobile .search__btn { min-width: 44px; }
  .header-brand .brand-img { max-width: none; height: 32px; }  /* doğal en-boy oranı korunur */
}

@media (max-width: 360px) {
  .header-main__inner { gap: var(--space-2); }
  .header-actions { gap: var(--space-2); }
  .header-brand .brand-img { height: 27px; }
  .header-brand .brand { gap: var(--space-2); }
  .header-main .brand__word { font-size: .95rem; }
}

/* ==========================================================================
   ÜRÜN KARTI
   ========================================================================== */
.pcard {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  border: 1px solid #e9eef7;
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(19, 32, 51, 0.08);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-color),
              border-color var(--dur-base) var(--ease-color);
}
@media (hover: hover) and (pointer: fine) {
  .pcard:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(19, 32, 51, 0.12); border-color: #d8e3f6; }
}
.pcard__media {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 4 / 3; background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  border-bottom: 1px solid #eef3fb; overflow: hidden;
}
.pcard__img { width: 100%; height: 100%; object-fit: contain; }
.pcard__thumb {
  display: grid; place-items: center; width: 76px; height: 76px;
  border-radius: var(--radius-xl); background: var(--color-bg);
  box-shadow: var(--shadow-1);
}
.pcard__thumb .icon { width: 40px; height: 40px; color: var(--color-ink-soft); }
/* Kategori renk ipuçları (ince) */
.pcard__thumb--kkd      .icon { color: #b8860b; }
.pcard__thumb--ambalaj  .icon { color: #8a6d3b; }
.pcard__thumb--temizlik .icon { color: #2563eb; }
.pcard__thumb--matbaa   .icon { color: #6d28d9; }

.pcard__badge {
  position: absolute; top: var(--space-3); left: var(--space-3);
  font-size: 0.7rem; font-weight: var(--fw-bold);
  letter-spacing: .02em; padding: 0.45rem 0.65rem;
  background: #ff6a3d; color: #fff;
  border-radius: 8px;
  text-transform: uppercase;
}
.pcard__badge--new { background: var(--color-ink); color: var(--color-on-dark); }

.pcard__body { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.15rem 1.2rem 1.2rem; flex: 1; }
.pcard__eyebrow {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #1565f8;
}
.pcard__title { font-size: var(--fs-100); font-weight: var(--fw-semibold);
  line-height: 1.28; letter-spacing: 0; margin: 0; overflow-wrap: anywhere; }
.pcard__title a { color: var(--color-ink); }
@media (hover: hover) and (pointer: fine) {
  .pcard__title a:hover { color: var(--color-ink-soft); text-decoration: underline; }
}
.pcard__desc {
  margin: 0;
  color: #425167;
  font-size: 0.98rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
}
.pcard__pricing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 10px;
  min-height: 48px;
  padding: 9px 10px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: linear-gradient(135deg, #eff6ff, #fff);
}
.pcard__pricing strong {
  grid-column: 1 / -1;
  min-width: 0;
  color: #0f172a;
  font-size: 1rem;
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: normal;
}
.pcard__pricing .pcard__price-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 5px;
}
.pcard__price-value .pcard__price-amount,
.pcard__price-value .pcard__price-separator {
  font: inherit;
  color: inherit;
  white-space: nowrap;
}
.pcard__pricing.has-discount {
  border-color: #fecaca;
  background: linear-gradient(135deg, #fff1f2, #fff 72%);
}
.pcard__pricing.has-discount del {
  color: #94a3b8;
  font-size: .78rem;
  font-weight: 700;
  text-decoration-color: #ef4444;
  text-decoration-thickness: 2px;
}
.pcard__pricing.has-discount mark {
  justify-self: end;
  padding: 2px 6px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  white-space: nowrap;
  animation: price-discount-pulse 2.4s ease-in-out infinite;
}
.pcard__pricing.has-discount strong { color: #b91c1c; }
@keyframes price-discount-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
  50% { box-shadow: 0 0 0 4px rgba(220,38,38,.12); }
}
@media (prefers-reduced-motion: reduce) {
  .pcard__pricing.has-discount mark { animation: none; }
}
.pcard__pricing span {
  grid-column: 1 / -1;
  min-width: 0;
  color: #475569;
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
}
.pcard__pricing small {
  grid-column: 1 / -1;
  color: #64748b;
  font-size: .68rem;
  line-height: 1.35;
}
.pcard__pricing--range {
  border-color: #fde68a;
  background: linear-gradient(135deg, #fffbeb, #fff);
}
.pcard__pricing--quote {
  border-color: #e2e8f0;
  background: #f8fafc;
}
.pcard__pricing--quote strong {
  font-size: .9rem;
}
.pcard__commerce-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .7rem;
  color: #475569;
  font-size: .72rem;
  font-weight: 700;
}
.pcard__stock {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.pcard__stock::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #d97706;
  box-shadow: 0 0 0 3px rgba(217,119,6,.12);
}
.pcard__stock--in_stock { color: #087a38; }
.pcard__stock--in_stock::before {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.14);
}
.pcard__delivery { display: inline-flex; align-items: center; gap: .3rem; }
.pcard__delivery .icon { width: .9rem; height: .9rem; }
.pcard__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pcard__chips li {
  font-size: 0.78rem;
  color: #173056;
  background: #f3f7ff;
  border: 1px solid #deebff;
  padding: 0.32rem 0.55rem;
  border-radius: 8px;
}
.pcard__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px;
  gap: 0.65rem;
  margin-top: auto;
  padding-top: 0.55rem;
}
.pcard__actions .btn { width: 100%; }
.pcard__actions :is(.add-to-quote, .add-to-order) {
  position: relative;
  min-height: 52px;
  border-radius: 16px;
  overflow: hidden;
  justify-content: flex-start;
  gap: 0.65rem;
  padding: 0.62rem 0.78rem;
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.34), transparent 34%),
    linear-gradient(135deg, #0b5cff 0%, #1565f8 45%, #0047d9 100%);
  box-shadow: 0 12px 26px rgba(21,101,248,.28), inset 0 1px 0 rgba(255,255,255,.3);
}
.pcard__actions :is(.add-to-quote, .add-to-order)::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 0 30%, rgba(255,255,255,.22) 45%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 620ms var(--ease-out);
}
.pcard__quote-ic {
  position: relative; z-index: 1;
  flex: none; display: grid; place-items: center;
}
.pcard__quote-ic {
  width: 28px; height: 28px;
  border-radius: 10px;
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
}
.pcard__quote-ic .icon { width: 1.05rem; height: 1.05rem; color: #fff; }
.pcard__quote-text {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  min-width: 0; line-height: 1.05;
}
.pcard__quote-text strong {
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.pcard__quote-text small {
  margin-top: 3px;
  font-size: 0.67rem;
  font-weight: 700;
  color: rgba(255,255,255,.72);
  letter-spacing: .015em;
  text-transform: uppercase;
}
.pcard__actions :is(.add-to-quote, .add-to-order).is-added {
  background: linear-gradient(135deg, #12a150 0%, #0b8a42 100%);
  box-shadow: 0 12px 26px rgba(18,161,80,.24), inset 0 1px 0 rgba(255,255,255,.25);
}
.pcard__wa {
  position: relative;
  min-height: 52px;
  padding-inline: 0;
  color: #0fa449;
  border-color: rgba(37,211,102,.35);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.95), transparent 38%),
    linear-gradient(180deg, #f2fff6 0%, #dcfce7 100%);
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(17,153,77,.14), inset 0 1px 0 rgba(255,255,255,.85);
}
@media (hover: hover) and (pointer: fine) {
  .pcard__actions :is(.add-to-quote, .add-to-order):hover {
    background:
      radial-gradient(circle at 18% 18%, rgba(255,255,255,.4), transparent 34%),
      linear-gradient(135deg, #2675ff 0%, #1258e8 45%, #003ec3 100%);
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(21,101,248,.34), inset 0 1px 0 rgba(255,255,255,.34);
  }
  .pcard__actions :is(.add-to-quote, .add-to-order):hover::after { transform: translateX(120%); }
  .pcard__wa:hover {
    color: #fff;
    border-color: rgba(37,211,102,.68);
    background: linear-gradient(135deg, #25d366 0%, #128c4b 100%);
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(18,140,75,.24);
  }
}
.pcard__wa .icon { width: 1.28rem; height: 1.28rem; }
.pcard__wa-pulse {
  position: absolute; right: 9px; top: 9px;
  width: 7px; height: 7px; border-radius: 999px;
  background: #25d366;
  box-shadow: 0 0 0 4px rgba(37,211,102,.14);
}
.pcard__qt-short { display: none; }
@media (max-width: 680px) {
  .pcard__pricing {
    grid-template-columns: 1fr;
    align-items: start;
    min-height: 0;
    padding: 8px;
  }
  .pcard__pricing span { text-align: left; }
  .pcard__actions { grid-template-columns: minmax(0, 1fr) 46px; gap: 0.5rem; }
  .pcard__quote-text small { display: none; }
  .pcard__quote-ic { display: none; }
  /* Uzun "Teklif Sepetine Ekle" dar butona sığmıyor → mobilde "Sepete Ekle" */
  .pcard__qt-full { display: none; }
  .pcard__qt-short { display: inline; }
  .pcard__actions :is(.add-to-quote, .add-to-order) { justify-content: center; padding-inline: 0.4rem; }
  .pcard__quote-text { align-items: center; }
  .pcard__quote-text strong { white-space: normal; text-align: center; font-size: 0.84rem; }
}

/* "Eklendi" geri bildirimi */
:is(.add-to-quote, .add-to-order).is-added { background: var(--color-success); color: #fff; }

/* Sepet rozeti bump (ekleme anı) */
.cart-btn.bump .count { animation: cart-bump 360ms var(--ease-out); }
@keyframes cart-bump {
  0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .cart-btn.bump .count { animation: none; } }

/* ==========================================================================
   TEKLİF SEPETİ DRAWER
   ========================================================================== */
.drawer-open { overflow: hidden; }   /* scroll kilidi */

.drawer-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(16, 16, 18, 0.55);
  opacity: 0;
  transition: opacity var(--dur-drawer) var(--ease-color);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.drawer-overlay.is-open { opacity: 1; }

.drawer {
  position: fixed; inset: 0 0 0 auto; z-index: var(--z-drawer);
  width: min(420px, 92vw);
  max-width: 100vw;
  display: flex; flex-direction: column;
  background: var(--color-bg);
  box-shadow: var(--shadow-3);
  transform: translate3d(100%, 0, 0);
  /* Giriş: yumuşak iOS drawer eğrisi */
  transition: transform var(--dur-drawer) var(--ease-drawer);
  will-change: transform;
}
.drawer.is-open { transform: translate3d(0, 0, 0); }
/* Mobilde tam ekran: yan şerit kalmasın, form ve paylaş butonları ferah olsun */
@media (max-width: 560px) {
  .drawer {
    inset: 0 0 0 auto !important; width: 100dvw; max-width: 100dvw;
    height: 100dvh; transform: translate3d(100%, 0, 0) !important;
  }
  #quoteDrawer.is-open, #orderDrawer.is-open { right: 0 !important; transform: translate3d(0, 0, 0) !important; }
}
/* Çıkış: daha hızlı (asimetrik) */
.drawer.is-closing { transition: transform var(--dur-drawer-exit) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .drawer { transition: none; }
  .drawer-overlay { transition: opacity var(--dur-base) var(--ease-color); }
}

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-thin); flex: none;
}
.drawer__head h2 { font-size: var(--fs-300); letter-spacing: 0;
  display: inline-flex; align-items: center; gap: var(--space-2); }
.drawer__head h2 .icon { width: 1.3rem; height: 1.3rem; }
.drawer__count {
  font-size: var(--fs-50); font-weight: var(--fw-bold);
  background: var(--color-accent); color: var(--color-on-accent);
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill);
  display: grid; place-items: center;
}
.drawer__close {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--radius-md); color: var(--color-ink-soft);
  transition: background-color var(--dur-fast) var(--ease-color), transform var(--dur-press) var(--ease-out);
}
.drawer__close .icon { width: 1.25rem; height: 1.25rem; }
.drawer__close:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) { .drawer__close:hover { background: var(--color-surface); } }

/* Boş durum */
.drawer__empty { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: var(--space-3); padding: var(--space-7) var(--space-5); }
.drawer__empty-icon { display: grid; place-items: center; width: 64px; height: 64px;
  border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-ink-mute); }
.drawer__empty-icon .icon { width: 30px; height: 30px; }
.drawer__empty p { color: var(--color-ink-soft); font-size: var(--fs-75); max-width: 32ch; }
.drawer__empty strong { color: var(--color-ink); font-size: var(--fs-200); }

/* Kalem listesi */
.drawer__items { flex: 1; overflow-y: auto; padding: var(--space-3) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2); }
.qitem {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border: var(--border-thin); border-radius: var(--radius-md);
  background: var(--color-bg);
}
.qitem__info { min-width: 0; }
.qitem__info strong { display: block; font-size: var(--fs-75); font-weight: var(--fw-semibold);
  line-height: var(--lh-snug); }
.qitem__info small { color: var(--color-ink-mute); font-size: var(--fs-50); }
.qitem__info .qitem__variant { display: block; margin-top: 2px; color: var(--color-ink); font-weight: var(--fw-semibold); }
.qitem__info .qitem__price {
  display: block;
  width: fit-content;
  margin-top: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #e0ecff;
  color: #164e9e;
  font-weight: var(--fw-semibold);
}
.qitem__info .qitem__price--range { background: #fef3c7; color: #92400e; }
.qitem__info .qitem__price--quote { background: #f1f5f9; color: #475569; }
.qitem__info .qitem__sample { display: block; width: fit-content; margin-top: 5px; padding: 3px 7px; border-radius: 999px; background: #fff3bf; color: #765500; font-weight: var(--fw-semibold); }
.order-item__total {
  display: block;
  margin-top: 6px;
  color: var(--color-ink);
  font-size: var(--fs-75);
}
.qitem__qty { display: inline-flex; align-items: center; gap: var(--space-1);
  border: var(--border-thin); border-radius: var(--radius-pill); padding: 2px; }
.qstep { width: 26px; height: 26px; border-radius: var(--radius-pill); font-weight: var(--fw-bold);
  color: var(--color-ink); display: grid; place-items: center; font-size: var(--fs-100);
  transition: background-color var(--dur-fast) var(--ease-color), transform var(--dur-press) var(--ease-out); }
.qstep:active { transform: scale(0.9); }
@media (hover: hover) and (pointer: fine) { .qstep:hover { background: var(--color-surface-2); } }
.qitem__count { min-width: 20px; text-align: center; font-size: var(--fs-75); font-weight: var(--fw-semibold); }
.qitem__remove { color: var(--color-ink-mute); width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: var(--radius-md); transition: color var(--dur-fast) var(--ease-color), background-color var(--dur-fast) var(--ease-color); }
.qitem__remove .icon { width: 1rem; height: 1rem; }
@media (hover: hover) and (pointer: fine) { .qitem__remove:hover { color: var(--color-danger); background: var(--color-surface); } }

/* Form sarmalayıcı */
.drawer__form-wrap { flex: none; border-top: var(--border-thin); padding: var(--space-4) var(--space-5); }
/* Teklif formu açıkken: kalem listesini gizle ve formu tek kaydırılır alan yap,
   böylece uzun form + kısa ekranda "Teklif Talebini Gönder" butonuna erişilir (mobil sorunu). */
.drawer--form-open .drawer__items { display: none; }
.drawer--form-open .order-cart-summary { display: none; }
.drawer--form-open .drawer__form-wrap {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.drawer__form-toggle {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  background: var(--color-accent); color: var(--color-on-accent);
  font-weight: var(--fw-semibold); padding: var(--space-4); border-radius: var(--radius-md);
  transition: background-color var(--dur-fast) var(--ease-color), transform var(--dur-press) var(--ease-out);
}
.drawer__form-toggle:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .drawer__form-toggle:hover { background: var(--color-accent-strong); } }
.drawer__form-toggle .icon { width: 1.15rem; height: 1.15rem; }
.drawer__items-sum { font-size: var(--fs-50); font-weight: var(--fw-medium); opacity: .75; }

.drawer__form { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.drawer__form-note { font-size: var(--fs-75); color: var(--color-ink-soft); }
#cartDeliveryFields, #cartQuoteFields { display: flex; flex-direction: column; gap: var(--space-3); }
#cartModeNotice { padding: var(--space-3); border: 1px solid #bfdbfe; border-radius: var(--radius-md); background: #eff6ff; color: #1e3a8a; line-height: 1.5; }
.drawer__sample-note { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); border: 1px solid #f0cf55; border-radius: var(--radius-md); background: #fff9df; color: #665424; font-size: var(--fs-75); line-height: 1.5; }
.drawer__sample-note[hidden] { display: none; }
.drawer__sample-note .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: #9a7100; }
.drawer__sample-note strong { color: #4d3d12; }
.field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
.field label { font-size: var(--fs-75); font-weight: var(--fw-medium); color: var(--color-ink-soft); }
.field__opt { font-weight: var(--fw-regular); color: var(--color-ink-mute); }
.field input, .field select, .field textarea {
  border: var(--border-base); border-radius: var(--radius-md);
  padding: var(--space-3); font-size: var(--fs-100); background: var(--color-bg);
  transition: border-color var(--dur-fast) var(--ease-color), box-shadow var(--dur-fast) var(--ease-color);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--color-accent); box-shadow: var(--focus-ring);
}
.field textarea { resize: vertical; min-height: 64px; }
.drawer__form-kvkk { font-size: var(--fs-50); color: var(--color-ink-mute); text-align: center; }
.drawer__form-kvkk a { color: var(--color-ink-soft); text-decoration: underline; }
/* Ödeme şekli seçimi (sepet teklif formu) */
.drawer__pay { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.drawer__pay-opt { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  border: var(--border-base); border-radius: var(--radius-md); cursor: pointer; font-size: var(--fs-75);
  transition: border-color var(--dur-fast) var(--ease-color); }
.drawer__pay-opt:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-soft); }
.drawer__pay-opt.is-locked { opacity: .6; cursor: not-allowed; }

.order-cart-summary {
  flex: none;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-top: var(--border-thin);
  background: var(--color-surface);
}
.order-cart-summary > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-ink-soft);
  font-size: var(--fs-75);
}
.order-cart-summary > div strong { color: var(--color-ink); }
.order-cart-summary__total {
  padding-top: var(--space-2);
  border-top: var(--border-thin);
  font-size: var(--fs-100) !important;
  font-weight: var(--fw-bold);
}
.order-cart-summary small {
  color: var(--color-ink-mute);
  font-size: var(--fs-50);
  line-height: 1.5;
}
.order-payment-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-md);
  background: #eff6ff;
  color: #1e3a8a;
}
.order-payment-note .icon { flex: none; width: 1.25rem; height: 1.25rem; }
.order-payment-note span { display: grid; gap: 3px; }
.order-payment-note small { color: #475569; font-size: var(--fs-50); }

/* Liste alt aksiyon */
.drawer__foot { flex: none; padding: var(--space-3) var(--space-5) var(--space-4); border-top: var(--border-thin); }
.drawer__clear { display: inline-flex; align-items: center; gap: var(--space-1);
  color: var(--color-ink-mute); font-size: var(--fs-75);
  transition: color var(--dur-fast) var(--ease-color); }
.drawer__clear .icon { width: 1rem; height: 1rem; }
@media (hover: hover) and (pointer: fine) { .drawer__clear:hover { color: var(--color-danger); } }

/* ==========================================================================
   MOBİL NAV PANELİ (hamburger) — soldan açılır, asimetrik
   ========================================================================== */
.nav-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(16,16,18,.55); opacity: 0;
  transition: opacity var(--dur-drawer) var(--ease-color);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.nav-overlay.is-open { opacity: 1; }

.nav-panel {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: var(--z-drawer);
  width: min(330px, 86vw); display: flex; flex-direction: column;
  background: var(--color-ink); color: var(--color-on-dark);
  box-shadow: var(--shadow-3);
  transform: translateX(-100%);
  transition: transform var(--dur-drawer) var(--ease-drawer);
  will-change: transform;
}
.nav-panel.is-open { transform: translateX(0); }
.nav-panel.is-closing { transition: transform var(--dur-drawer-exit) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .nav-panel { transition: none; } }

.nav-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid rgba(244,244,245,.10); flex: none;
}
.nav-panel__head .brand { color: var(--color-on-dark); --brand-mark-ink: var(--color-ink); }
.nav-panel__head .brand__word { color: var(--color-on-dark); font-size: 1.1rem; }
.nav-panel__head .brand__tld { color: var(--color-on-dark-soft); }
.nav-panel__close { display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--radius-md); color: var(--color-on-dark-soft);
  transition: background-color var(--dur-fast) var(--ease-color), transform var(--dur-press) var(--ease-out); }
.nav-panel__close .icon { width: 1.25rem; height: 1.25rem; }
.nav-panel__close:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) { .nav-panel__close:hover { background: rgba(244,244,245,.08); } }

.nav-panel__body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-3) var(--space-5); }
.nav-panel__title { font-size: var(--fs-50); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--color-on-dark-soft); padding: var(--space-4) var(--space-3) var(--space-2); }
.nav-panel__list { display: flex; flex-direction: column; }
.nav-panel__list a {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-md);
  color: var(--color-on-dark); font-weight: var(--fw-medium); font-size: var(--fs-100);
  transition: background-color var(--dur-fast) var(--ease-color);
}
.nav-panel__list a .icon { width: 1.25rem; height: 1.25rem; color: var(--color-accent); flex: none; }
@media (hover: hover) and (pointer: fine) { .nav-panel__list a:hover { background: rgba(244,244,245,.07); } }

/* Mobil panelde alt kategoriler: ad doğrudan link, ok aç/kapatır */
.nav-sub__row { display: flex; align-items: center; }
.nav-sub__link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-md);
  color: var(--color-on-dark); font-weight: var(--fw-medium); font-size: var(--fs-100);
  flex: 1 1 auto; min-width: 0;
  transition: background-color var(--dur-fast) var(--ease-color);
}
.nav-sub__link .icon { width: 1.25rem; height: 1.25rem; color: var(--color-accent); flex: none; }
.nav-sub__toggle {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; margin: 0;
  background: none; border: none; cursor: pointer; border-radius: var(--radius-md);
}
.nav-sub__caret {
  width: 1rem !important; height: 1rem !important;
  color: var(--color-on-dark-soft) !important;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav-sub__toggle[aria-expanded="true"] .nav-sub__caret { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .nav-sub__link:hover, .nav-sub__toggle:hover { background: rgba(244,244,245,.07); }
}
.nav-panel__list--sub  { padding-left: var(--space-5); }
.nav-panel__list--sub  a { font-size: var(--fs-75); padding: var(--space-2) var(--space-3); }
.nav-panel__list--sub2 { padding-left: var(--space-4); }
.nav-panel__list--sub2 a { font-size: calc(var(--fs-75) * .92); padding: var(--space-1) var(--space-3); color: var(--color-on-dark-soft); }

@media (max-width: 760px) {
  .nav-panel__close { width: 44px; height: 44px; }
  .nav-panel__list--sub a,
  .nav-panel__list--sub2 a { min-height: 44px; }
}

.nav-panel__foot { flex: none; display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5);
  border-top: 1px solid rgba(244,244,245,.10); }
.nav-panel__foot a { display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-75); color: var(--color-on-dark-soft); }
.nav-panel__foot a .icon { width: 1.05rem; height: 1.05rem; }
.nav-panel__foot a.is-accent { color: var(--color-accent); }

/* ==========================================================================
   AUTH SAYFALARI (giriş / kayıt)
   ========================================================================== */
.auth-wrap { display: grid; grid-template-columns: 1fr 0.85fr; gap: var(--space-6); align-items: start; max-width: 960px; margin-inline: auto; }
/* Grid/flex çocuklarının içerik genişliğiyle ızgarayı viewport'un dışına itmesini
   önle (iOS Safari'de sağda beyaz boşluk / yatay kayma nedeni). */
.auth-wrap > * { min-width: 0; }
.auth-card { background: var(--color-bg); border: var(--border-thin); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2); padding: var(--space-7); }
.auth-card--wide { grid-column: 1 / -1; max-width: 720px; margin-inline: auto; }
.auth-card h1 { font-size: var(--fs-500); }
.auth-card__lede { margin-top: var(--space-2); color: var(--color-ink-soft); font-size: var(--fs-100); }
.auth-form { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.auth-form__row { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-75); }
.auth-form__row a { color: var(--color-ink-soft); text-decoration: underline; }
.checkbox { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-75); color: var(--color-ink-soft); }
.checkbox input { width: 18px; height: 18px; accent-color: var(--color-accent); margin-top: 1px; flex: none; }
.checkbox a { color: var(--color-ink-soft); text-decoration: underline; }
.auth-card__alt { margin-top: var(--space-5); font-size: var(--fs-75); color: var(--color-ink-soft); text-align: center; }
.auth-card__alt a { color: var(--color-ink); font-weight: var(--fw-semibold); text-decoration: underline; }

.auth-aside { background: var(--color-ink); color: var(--color-on-dark); border-radius: var(--radius-xl);
  padding: var(--space-6); }
.auth-aside h2 { color: var(--color-on-dark); font-size: var(--fs-300); letter-spacing: 0; margin-bottom: var(--space-4); }
.auth-aside ul { display: flex; flex-direction: column; gap: var(--space-3); }
.auth-aside li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-75); color: var(--color-on-dark-soft); }
.auth-aside .icon { width: 1.15rem; height: 1.15rem; color: var(--color-accent); flex: none; margin-top: 1px; }

@media (max-width: 760px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-aside { order: -1; }
  .auth-card { padding: var(--space-5); }
}

/* Genel Mobil D�zeltmeleri */
@media (max-width: 480px) {
  .pcard__body { padding: 0.8rem !important; }
  .pcard__title { font-size: 0.9rem !important; }
  .pcard__actions :is(.add-to-quote, .add-to-order) { min-height: 44px !important; }
  .nav-panel { width: 85vw !important; }
}


/* Mobile Menu Overflow Fix */
.nav-panel__foot { flex-direction: column !important; padding: var(--space-5) !important; }
.nav-panel__foot a { overflow-wrap: anywhere; }
.nav-panel__foot a .icon { flex-shrink: 0; }

/* --- İade ve geri ödeme politikası ------------------------------------ */
.policy-hero{position:relative;overflow:hidden;padding-block:clamp(var(--space-6),5vw,var(--space-8));background:var(--color-dark);color:var(--color-on-dark)}
.policy-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 85% 20%,rgba(245,197,24,.2),transparent 32%),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 78px)}
.policy-hero__inner{position:relative}
.policy-breadcrumb{margin-bottom:var(--space-6)}
.policy-breadcrumb a,.policy-breadcrumb span{color:var(--color-on-dark-soft)}
.policy-hero .eyebrow{display:block;color:var(--color-accent);margin-bottom:var(--space-3)}
.policy-hero h1{max-width:18ch;color:var(--color-on-dark);font-size:clamp(2.1rem,5vw,4.2rem);line-height:1.02;letter-spacing:-.04em}
.policy-hero>div>p{max-width:72ch;margin-top:var(--space-4);color:var(--color-on-dark-soft);font-size:clamp(var(--fs-100),1.5vw,var(--fs-200));line-height:var(--lh-relaxed)}
.policy-hero__meta{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5)}
.policy-hero__meta span{display:inline-flex;align-items:center;gap:var(--space-2);padding:9px 13px;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-pill);background:rgba(255,255,255,.05);color:var(--color-on-dark);font-size:var(--fs-50);font-weight:var(--fw-semibold)}
.policy-hero__meta .icon{width:17px;height:17px;color:var(--color-accent)}
.policy-page{background:var(--color-surface)}
.policy-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:var(--space-6);align-items:start}
.policy-content{overflow:hidden;border:var(--border-thin);border-radius:var(--radius-xl);background:var(--color-bg);box-shadow:var(--shadow-1)}
.policy-summary{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4);padding:clamp(var(--space-4),3vw,var(--space-6));border-bottom:1px solid #f0d777;background:linear-gradient(135deg,#fff9df,#fffdf5)}
.policy-summary__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--radius-md);background:var(--color-accent);color:var(--color-on-accent)}
.policy-summary__icon .icon{width:24px;height:24px}
.policy-summary strong{display:block;color:var(--color-ink);font-size:var(--fs-200)}
.policy-summary p{max-width:82ch;margin-top:var(--space-2);color:var(--color-ink-soft);font-size:var(--fs-75);line-height:var(--lh-relaxed)}
.policy-section{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--space-4);padding:clamp(var(--space-5),4vw,var(--space-7));border-bottom:var(--border-thin);scroll-margin-top:110px}
.policy-section__no{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--radius-pill);background:var(--color-ink);color:var(--color-accent);font-size:var(--fs-50);font-weight:var(--fw-bold)}
.policy-section h2{font-size:clamp(var(--fs-300),2.3vw,var(--fs-400));letter-spacing:-.02em}
.policy-section p{max-width:82ch;margin-top:var(--space-3);color:var(--color-ink-soft);font-size:var(--fs-100);line-height:var(--lh-relaxed)}
.policy-section a{color:var(--color-accent-strong);font-weight:var(--fw-semibold);text-decoration:underline;text-underline-offset:3px}
.policy-section--legal{background:#f8fafc}
.policy-list{display:grid;gap:var(--space-2);margin-top:var(--space-4);padding-left:1.3rem;color:var(--color-ink-soft);font-size:var(--fs-100);line-height:var(--lh-relaxed)}
.policy-list--check{padding:0;list-style:none}
.policy-list--check li{position:relative;padding-left:28px}
.policy-list--check li:before{content:"✓";position:absolute;left:0;top:2px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e4f8ec;color:#12804a;font-size:12px;font-weight:800}
.policy-steps{display:grid;gap:var(--space-3);margin-top:var(--space-4);padding:0;list-style:none}
.policy-steps li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:var(--space-3);align-items:start;padding:var(--space-4);border:var(--border-thin);border-radius:var(--radius-lg);background:var(--color-surface)}
.policy-steps li>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--color-accent);color:var(--color-on-accent);font-weight:var(--fw-bold)}
.policy-steps strong{display:block;color:var(--color-ink);font-size:var(--fs-75)}
.policy-steps p{margin-top:4px;font-size:var(--fs-75)}
.policy-document-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4) clamp(var(--space-5),4vw,var(--space-7));color:var(--color-ink-mute);font-size:var(--fs-50);background:var(--color-surface-2)}
.policy-aside{position:sticky;top:98px;display:grid;gap:var(--space-4)}
.policy-aside__card,.policy-toc{padding:var(--space-5);border:var(--border-thin);border-radius:var(--radius-xl);background:var(--color-bg);box-shadow:var(--shadow-1)}
.policy-aside__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--radius-md);background:var(--color-accent-soft);color:var(--color-ink)}
.policy-aside__icon .icon{width:24px;height:24px}
.policy-aside h2{margin-top:var(--space-4);font-size:var(--fs-300)}
.policy-aside__card>p{margin-top:var(--space-2);color:var(--color-ink-soft);font-size:var(--fs-75);line-height:var(--lh-relaxed)}
.policy-aside .btn{width:100%;justify-content:center;margin-top:var(--space-3)}
.policy-aside__facts{display:grid;margin-top:var(--space-5);border-top:var(--border-thin)}
.policy-aside__facts div{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);padding-block:var(--space-3);border-bottom:var(--border-thin);font-size:var(--fs-50)}
.policy-aside__facts dt{color:var(--color-ink-mute)}
.policy-aside__facts dd{color:var(--color-ink);font-weight:var(--fw-semibold);text-align:right}
.policy-aside__contact{font-size:var(--fs-50)!important}
.policy-aside__contact a{color:var(--color-ink);font-weight:var(--fw-semibold)}
.policy-toc{display:grid;gap:var(--space-1)}
.policy-toc strong{display:block;margin-bottom:var(--space-2);font-size:var(--fs-75)}
.policy-toc a{padding:8px 10px;border-radius:var(--radius-md);color:var(--color-ink-soft);font-size:var(--fs-75);transition:background-color var(--dur-fast),color var(--dur-fast)}
.policy-toc a:hover{background:var(--color-surface);color:var(--color-ink)}
@media(max-width:960px){.policy-layout{grid-template-columns:1fr}.policy-aside{position:static;grid-row:1}.policy-toc{display:none}.policy-aside__card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--space-4)}.policy-aside__card>.policy-aside__icon{grid-row:1 / 4}.policy-aside__card>.btn,.policy-aside__facts,.policy-aside__contact{grid-column:1 / -1}}
@media(max-width:620px){.policy-hero__meta{display:grid}.policy-hero__meta span{width:100%}.policy-section{grid-template-columns:1fr;padding:var(--space-5)}.policy-section__no{width:36px;height:36px}.policy-summary{grid-template-columns:1fr}.policy-document-foot{align-items:flex-start;flex-direction:column}.policy-aside__card{display:block}.policy-aside__card>.policy-aside__icon{margin-bottom:var(--space-3)}}