/* ==========================================================================
   qt. Studio — sepet, arama, iç sayfalar, hesap, ödeme
   ========================================================================== */

/* ---------- Ortak küçük bileşenler ---------- */
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.cart-count[data-n="0"] { transform: scale(0); }
.cart-count { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.link { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.link:hover { color: var(--red); }
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 99px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
  background: var(--cream); color: var(--ink);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.pill--processing { background: #fff4d9; color: #8a5a00; }
.pill--shipped { background: #e3edfb; color: #1f4f9a; }
.pill--delivered { background: #e2f3e8; color: #1d6b3f; }
.pill--returned { background: #f1ecea; color: #6d625f; }
.pill--red { background: var(--red); color: #fff; }

.switch { position: relative; display: inline-flex; flex: none; width: 42px; height: 24px; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: #ddd3ca; transition: background .25s; }
.switch span::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1);
}
.switch input:checked + span { background: var(--red); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }

.qty-step {
  display: inline-flex; align-items: center; height: 36px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line);
}
.qty-step button { width: 34px; height: 100%; font-size: 16px; border-radius: 99px; transition: background .2s; }
.qty-step button:hover { background: var(--cream); }
.qty-step span { min-width: 24px; text-align: center; font-size: 13px; font-weight: 600; }

/* Arka plan perdesi + yan paneller */
.panel-scrim { position: absolute; inset: 0; background: rgba(27, 21, 21, .42); opacity: 0; transition: opacity .4s; }
.side-panel { position: fixed; inset: 0; z-index: 90; visibility: hidden; }
.side-panel.is-open { visibility: visible; }
.side-panel.is-open .panel-scrim { opacity: 1; }

/* ==========================================================================
   Sepet (sağdan açılan)
   ========================================================================== */
.cart__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100vw);
  display: flex; flex-direction: column; background: var(--paper);
  transform: translateX(100%); transition: transform .5s var(--ease);
  box-shadow: -20px 0 60px rgba(0, 0, 0, .12);
}
.side-panel.is-open .cart__panel { transform: none; }
.cart__head { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.cart__head h2 { margin: 0; font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.cart__head h2 sup {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px;
  background: var(--red); color: #fff; font-size: 11px; vertical-align: 0;
}
.cart__ship { padding: 16px 24px 18px; background: var(--cream); font-size: 13px; }
.cart__ship p { margin: 0 0 12px; }
.cart__ship strong { color: var(--red); }
.cart__bar { position: relative; height: 6px; border-radius: 99px; background: #eadfd3; }
.cart__bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--red); transition: width .6s var(--ease); }
.cart__bar img {
  position: absolute; top: 50%; width: 26px; height: auto; margin: -13px 0 0 -13px;
  transition: left .6s var(--ease); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .15));
}
.cart__body { flex: 1; overflow-y: auto; padding: 8px 24px; }
.ci { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ci:last-child { border-bottom: 0; }
.ci__thumb { position: relative; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; }
.ci__thumb .ph { position: absolute; inset: 0; display: grid; place-items: center; }
.ci__thumb .ph img { width: 46%; opacity: .16; filter: grayscale(1); }
.ci__name { margin: 0; font-size: 13px; font-weight: 600; }
.ci__name a:hover { color: var(--red); }
.ci__tag { display: inline-block; margin-left: 4px; padding: 2px 7px; border-radius: 99px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; vertical-align: 1px; }
.ci__meta { margin: 2px 0 10px; font-size: 12px; color: var(--muted); }
.ci__actions { display: flex; align-items: center; gap: 12px; }
.ci__remove { font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.ci__remove:hover { color: var(--red); }
.ci__price { font-size: 13px; font-weight: 600; text-align: right; }
.cart__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; padding: 40px 10px; }
.cart__empty img { width: 120px; height: auto; margin-bottom: 18px; animation: bob 3s ease-in-out infinite; }
.cart__empty h3 { margin: 0 0 6px; font-size: 20px; }
.cart__empty p { margin: 0 0 22px; color: var(--muted); font-size: 14px; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-4deg); } }
.cart__upsell { padding: 14px 24px; border-top: 1px solid var(--line); }
.cart__upsell h4 { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cart__upsell-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.up { display: grid; gap: 6px; font-size: 11px; }
.up__thumb { position: relative; aspect-ratio: 1; border-radius: 4px; overflow: hidden; }
.up__thumb .ph { position: absolute; inset: 0; display: grid; place-items: center; }
.up__thumb .ph img { width: 44%; opacity: .16; filter: grayscale(1); }
.card__link { position: absolute; inset: 0; z-index: 1; }
.card__link .ph { position: absolute; inset: 0; }
.up__add {
  position: absolute; right: 6px; bottom: 6px; z-index: 3; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--paper); font-size: 16px; line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12); transition: background .2s, color .2s, transform .2s;
}
.up__add:hover { background: var(--ink); color: #fff; transform: scale(1.1); }
.up b { font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart__foot { padding: 18px 24px 22px; border-top: 1px solid var(--line); background: var(--paper); }
.cart__row { display: flex; justify-content: space-between; font-size: 15px; font-weight: 700; }
.cart__foot p { margin: 4px 0 14px; font-size: 12px; color: var(--muted); }
.cart__foot .btn { width: 100%; height: 50px; }
.cart__foot .btn + .btn { margin-top: 8px; }

/* ==========================================================================
   Arama
   ========================================================================== */
.search__panel {
  position: absolute; left: 0; right: 0; top: 0; max-height: 92vh; overflow-y: auto;
  background: var(--paper); transform: translateY(-104%); transition: transform .5s var(--ease);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .14);
}
.side-panel.is-open .search__panel { transform: none; }
.search__bar {
  display: flex; align-items: center; gap: 14px; padding: 22px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.search__bar > svg { flex: none; width: 24px; height: 24px; color: var(--red); }
.search__bar input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font-size: clamp(20px, 2.6vw, 32px); font-weight: 500; letter-spacing: -.01em;
}
.search__bar input::placeholder { color: #c4b8ae; }
.search__bar input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search__bar kbd {
  padding: 3px 8px; border-radius: 4px; border: 1px solid var(--line); font: 600 11px var(--sans); color: var(--muted);
}
.search__body { display: grid; grid-template-columns: 240px 1fr; gap: 40px; padding: 28px var(--gutter) 40px; }
.search__aside h4, .search__results h4 { margin: 0 0 14px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.search__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 30px; }
.search__chips button {
  height: 32px; padding: 0 13px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px;
  transition: background .2s, color .2s;
}
.search__chips button:hover { background: var(--ink); color: #fff; box-shadow: none; }
.search__links { display: grid; gap: 10px; font-size: 14px; font-weight: 500; }
.search__links a { display: flex; align-items: center; gap: 8px; }
.search__links a::before { content: "→"; color: var(--red); }
.search__links a:hover { color: var(--red); }
.search__head { display: flex; justify-content: space-between; align-items: baseline; }
.search__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sr { display: grid; gap: 8px; font-size: 13px; }
.sr__thumb { position: relative; aspect-ratio: 4 / 4.6; border-radius: 4px; overflow: hidden; }
.sr__thumb .ph { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .6s var(--ease); }
.sr__thumb .ph img { width: 40%; opacity: .14; filter: grayscale(1); }
.sr:hover .sr__thumb .ph { transform: scale(1.04); }
.sr b { font-weight: 600; }
.sr mark { background: var(--blush); color: var(--red); border-radius: 2px; padding: 0 1px; }
.sr span { color: var(--muted); }
.search__empty { padding: 30px 0; text-align: center; color: var(--muted); }
.search__empty img { width: 90px; margin: 0 auto 12px; }

/* ==========================================================================
   Toast & modal
   ========================================================================== */
.toast-wrap { position: fixed; left: 50%; bottom: 24px; z-index: 120; transform: translateX(-50%); display: grid; gap: 8px; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px 12px 12px; border-radius: 99px;
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 500; box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  animation: toast-in .45s cubic-bezier(.3, 1.4, .5, 1);
}
.toast img { width: 26px; height: 26px; object-fit: contain; border-radius: 50%; background: #fff; padding: 3px; }
.toast.is-out { opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }

.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; visibility: hidden; }
.modal.is-open { visibility: visible; }
.modal.is-open .panel-scrim { opacity: 1; }
.modal__box {
  position: relative; width: min(680px, 100%); max-height: 90vh; overflow-y: auto; padding: 30px;
  border-radius: 10px; background: var(--paper);
  opacity: 0; transform: translateY(20px) scale(.98); transition: opacity .35s, transform .45s var(--ease);
}
.modal.is-open .modal__box { opacity: 1; transform: none; }
.modal__close { position: absolute; top: 14px; right: 14px; }
.modal__box h3 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.01em; }

/* ==========================================================================
   Sayfa başlığı
   ========================================================================== */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--muted); }
.crumbs a:hover { color: var(--red); }
.crumbs span::before { content: "/"; margin-right: 8px; opacity: .5; }
.page-head {
  position: relative; overflow: hidden; padding: 48px var(--gutter) 40px; background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.page-head h1 { margin: 14px 0 0; font-size: clamp(38px, 5.4vw, 76px); font-weight: 600; letter-spacing: -.035em; line-height: .95; }
.page-head h1 em { font-family: var(--script); font-style: normal; font-weight: 400; color: var(--red); font-size: 1.16em; letter-spacing: 0; }
.page-head p { max-width: 520px; margin: 14px 0 0; color: var(--muted); }
.page-head__logo {
  position: absolute; right: var(--gutter); bottom: -18px; width: clamp(110px, 14vw, 200px); height: auto;
  transform: rotate(-8deg); opacity: .95; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1);
}
.page-head:hover .page-head__logo { transform: rotate(4deg) scale(1.04); }

/* ==========================================================================
   Mağaza
   ========================================================================== */
.shop { padding: 0 var(--gutter) 90px; }
.shop__bar {
  position: sticky; top: var(--header-h); z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 0; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); transition: top .35s var(--ease);
}
.shop__cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.shop__cats::-webkit-scrollbar { display: none; }
.shop__cats button {
  flex: none; height: 36px; padding: 0 16px; border-radius: 99px; font-size: 13px; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, color .2s;
}
.shop__cats button:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.shop__cats button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.shop__tools { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.shop__tools select {
  height: 36px; padding: 0 30px 0 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--paper);
  appearance: none; -webkit-appearance: none; font-weight: 600; font-size: 13px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231b1515' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.tool-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 99px;
  box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 600;
}
.tool-btn svg { width: 16px; height: 16px; }
.tool-btn b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 99px; background: var(--red); color: #fff; font-size: 10px; }
.cols-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: 99px; background: var(--cream); }
.cols-toggle button { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--muted); }
.cols-toggle button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.cols-toggle svg { width: 14px; height: 14px; }
.shop__count { color: var(--muted); font-size: 13px; }

.shop__body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 36px; padding-top: 26px; transition: grid-template-columns .4s var(--ease); }
.shop.no-filters .shop__body { grid-template-columns: 0 minmax(0, 1fr); gap: 0; }
.shop.no-filters .filters { opacity: 0; pointer-events: none; }
.filters { position: sticky; top: calc(var(--header-h) + 80px); align-self: start; max-height: calc(100vh - var(--header-h) - 100px); overflow-y: auto; transition: opacity .3s; }
.filters__head { display: none; }
.filters-scrim { display: none; }
.fgroup { border-bottom: 1px solid var(--line); }
.fgroup summary {
  display: flex; justify-content: space-between; align-items: center; padding: 16px 0; cursor: pointer; list-style: none;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.fgroup summary::-webkit-details-marker { display: none; }
.fgroup summary::after { content: "+"; font-size: 18px; font-weight: 400; transition: transform .3s; }
.fgroup[open] summary::after { transform: rotate(45deg); }
.fgroup__body { padding: 0 0 18px; display: grid; gap: 10px; }
.fcheck { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.fcheck input { width: 16px; height: 16px; accent-color: var(--red); margin: 0; }
.fcheck small { margin-left: auto; color: var(--muted); font-size: 12px; }
.fsizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fsizes button, .size-btn {
  height: 38px; border-radius: 6px; font-size: 12px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line);
  transition: background .2s, color .2s, box-shadow .2s;
}
.fsizes button:hover, .size-btn:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--ink); }
.fsizes button[aria-pressed="true"], .size-btn[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.fcolors { display: flex; flex-wrap: wrap; gap: 8px; }
.fcolors button {
  width: 28px; height: 28px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
  transition: box-shadow .2s, transform .2s;
}
.fcolors button:hover { transform: scale(1.1); }
.fcolors button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
.ftoggle { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 0; font-size: 14px; font-weight: 500; }

.active-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.active-chips:empty { display: none; }
.active-chips button {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 99px;
  background: var(--blush); font-size: 12px; font-weight: 600;
}
.active-chips button::after { content: "×"; font-size: 15px; line-height: 1; }
.active-chips .clear { background: none; text-decoration: underline; text-underline-offset: 3px; }
.active-chips .clear::after { content: none; }

.pgrid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 34px 14px; }
.pgrid .card { text-align: left; }
.pgrid .card__sizes, .pgrid .card__swatches { justify-content: flex-start; }
.pgrid .card { animation: card-in .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes card-in { from { opacity: 0; transform: translateY(16px); } }
.promo-tile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  padding: 26px; border-radius: 4px; background: var(--red); color: #fff; overflow: hidden; min-height: 100%;
}
.promo-tile h3 { margin: 6px 0 0; font-family: var(--script); font-weight: 400; font-size: 52px; line-height: .95; }
.promo-tile p { margin: 10px 0 20px; font-size: 14px; opacity: .9; }
.promo-tile img { position: absolute; right: -20px; bottom: 60px; width: 60%; opacity: .9; transform: rotate(-10deg); }
.promo-tile .btn { position: relative; align-self: flex-start; }
.shop__empty { padding: 80px 20px; text-align: center; }
.shop__empty img { width: 110px; margin: 0 auto 16px; }
.shop__empty h3 { margin: 0 0 6px; font-size: 22px; }
.shop__empty p { margin: 0 0 20px; color: var(--muted); }

/* ==========================================================================
   Ürün detay
   ========================================================================== */
.pdp { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; padding: 24px var(--gutter) 80px; }
.pdp__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
.pdp__shot { position: relative; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; cursor: zoom-in; }
.pdp__shot:first-child { grid-column: span 2; aspect-ratio: 5 / 5.2; }
.pdp__shot .ph { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .8s var(--ease); }
.pdp__shot .ph > img { width: 34%; opacity: .12; filter: grayscale(1); }
.pdp__shot:hover .ph { transform: scale(1.03); }
.pdp__info { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
.pdp__info .crumbs { margin-bottom: 20px; }
.pdp__badges { display: flex; gap: 6px; margin-bottom: 12px; }
.pdp__badges .card__badge { position: static; background: var(--cream); }
.pdp__badges .card__badge--red { background: var(--red); }
.pdp h1 { margin: 0; font-size: clamp(26px, 2.6vw, 38px); font-weight: 600; letter-spacing: -.025em; line-height: 1.05; }
.pdp__price { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 4px; font-size: 20px; font-weight: 600; }
.pdp__price small { font-size: 12px; font-weight: 500; color: var(--muted); }
.pdp__install { margin: 0 0 24px; font-size: 12px; color: var(--muted); }
.pdp__opt { margin-bottom: 22px; }
.pdp__opt-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 13px; }
.pdp__opt-head b { font-weight: 700; }
.pdp__opt-head button { font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pdp__opt-head button:hover { color: var(--red); }
.pdp__sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.size-btn:disabled { color: #c9bfb6; cursor: not-allowed; background: repeating-linear-gradient(135deg, transparent 0 6px, #f4eee8 6px 7px); }
.pdp__opt.is-error .pdp__sizes { animation: shake .4s; }
.pdp__opt.is-error .pdp__opt-head b { color: var(--red); }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.pdp__buy { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; margin-bottom: 18px; }
.pdp__buy .qty-step { height: 52px; }
.pdp__buy .btn { height: 52px; }
.pdp__fav { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); }
.pdp__fav svg { width: 20px; height: 20px; fill: transparent; stroke: var(--ink); stroke-width: 1.6; transition: fill .2s, stroke .2s; }
.pdp__fav[aria-pressed="true"] svg { fill: var(--red); stroke: var(--red); }
.pdp__stock { display: flex; align-items: center; gap: 8px; margin: 0 0 22px; font-size: 13px; font-weight: 500; }
.pdp__stock i { width: 8px; height: 8px; border-radius: 50%; background: #2f9e5f; box-shadow: 0 0 0 4px rgba(47, 158, 95, .15); }
.pdp__stock.is-low i { background: #e08a00; box-shadow: 0 0 0 4px rgba(224, 138, 0, .15); }
.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 24px; }
.perks div { padding: 12px; border-radius: 6px; background: var(--cream); font-size: 11px; line-height: 1.35; }
.perks svg { display: block; width: 18px; height: 18px; margin-bottom: 6px; color: var(--red); }
.perks b { display: block; font-size: 12px; }
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  display: flex; justify-content: space-between; padding: 16px 0; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-size: 18px; font-weight: 400; line-height: 1; transition: transform .3s; }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc details > div { padding: 0 0 18px; font-size: 14px; color: #5d5250; }
.acc details > div p { margin: 0 0 8px; }
.wp-cross {
  display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 16px; border-radius: 8px; background: var(--blush);
  transition: transform .3s var(--ease);
}
.wp-cross:hover { transform: translateY(-2px); }
.wp-cross img { flex: none; width: 74px; height: auto; }
.wp-cross b { display: block; font-size: 14px; }
.wp-cross span { font-size: 12px; color: #5d5250; }
.size-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.size-table th, .size-table td { padding: 11px 10px; text-align: center; border-bottom: 1px solid var(--line); }
.size-table th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; background: var(--cream); }
.size-table td:first-child, .size-table th:first-child { text-align: left; font-weight: 700; }
.size-table tbody tr:hover { background: #fdf9f5; }

/* ==========================================================================
   Koleksiyonlar
   ========================================================================== */
.col-intro { padding: 70px var(--gutter) 30px; text-align: center; }
.col-intro h1 { margin: 0; font-family: var(--script); font-weight: 400; font-size: clamp(62px, 9.6vw, 138px); line-height: .95; letter-spacing: 0; color: var(--red); }
.col-intro p { max-width: 560px; margin: 34px auto 0; color: var(--muted); font-size: 16px; }
.col-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.col-nav a { height: 36px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 600; }
.col-nav a:hover { background: var(--ink); color: #fff; box-shadow: none; }
.col-block { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; padding: 12px var(--gutter); scroll-margin-top: 100px; }
.col-block:nth-of-type(even) .col-block__media { order: 2; }
.col-block__media { position: relative; min-height: 640px; border-radius: 6px; overflow: hidden; }
.col-block__media .ph { position: absolute; inset: 0; }
.col-block__media .ph__label { top: 16px; bottom: auto; }
.col-block__sticker { position: absolute; right: 22px; bottom: 22px; z-index: 3; width: 120px; height: auto; transform: rotate(-10deg); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .18)); }
.col-block__copy {
  display: flex; flex-direction: column; justify-content: center; padding: 50px clamp(24px, 4vw, 64px);
  border-radius: 6px; background: var(--cream);
}
.col-block__copy .eyebrow { color: var(--red); }
.col-block__copy h2 { margin: 6px 0 10px; font-family: var(--script); font-weight: 400; font-size: clamp(50px, 5.6vw, 86px); line-height: .95; letter-spacing: 0; }
.col-block__date { font-size: 13px; color: var(--muted); }
.col-block__copy > p { margin: 18px 0 26px; max-width: 460px; font-size: 16px; color: #5d5250; }
.col-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 28px; }
.col-thumbs a { display: grid; gap: 6px; font-size: 12px; }
.col-thumbs .sr__thumb { aspect-ratio: 1; }
.col-thumbs b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.countdown { display: flex; gap: 8px; margin: 4px 0 26px; }
.countdown div { min-width: 74px; padding: 14px 10px 10px; border-radius: 8px; background: var(--paper); text-align: center; box-shadow: inset 0 0 0 1px var(--line); }
.countdown strong { display: block; font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown span { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.notify .field-row input { border-width: 1px; }

/* ==========================================================================
   Hakkımızda
   ========================================================================== */
.about-hero { position: relative; isolation: isolate; padding: 80px var(--gutter) 90px; text-align: center; background: radial-gradient(60% 70% at 50% 40%, #fff 0, var(--cream) 70%); overflow: hidden; }
.about-hero__logo { width: clamp(180px, 22vw, 300px); height: auto; margin: 0 auto 30px; }
.about-hero h1 { max-width: 900px; margin: 0 auto; font-size: clamp(32px, 4.4vw, 62px); font-weight: 600; letter-spacing: -.03em; line-height: 1.02; }
.about-hero h1 em { font-family: var(--script); font-style: normal; font-weight: 400; color: var(--red); font-size: 1.16em; letter-spacing: 0; }
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 12px var(--gutter); }
.story__media { position: relative; min-height: 620px; border-radius: 6px; overflow: hidden; }
.story__media .ph { position: absolute; inset: 0; }
.story__copy { display: flex; flex-direction: column; justify-content: center; padding: 50px clamp(24px, 5vw, 80px); }
.story__copy .eyebrow { color: var(--red); }
.story__copy h2 { margin: 8px 0 20px; font-size: clamp(28px, 3vw, 42px); font-weight: 600; letter-spacing: -.025em; line-height: 1.05; }
.story__copy p { margin: 0 0 14px; font-size: 16px; color: #5d5250; max-width: 520px; }
.story__sign { margin-top: 14px; font-family: var(--script); font-size: 42px; color: var(--red); line-height: 1; }

.playground { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.playground > div:first-child { display: flex; justify-content: center; }
.playground__stage {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; width: min(400px, 100%); border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #fff 0, var(--blush) 70%);
  perspective: 900px; overflow: hidden;
}
.playground__stage::after { content: ""; position: absolute; inset: 6%; border-radius: 50%; border: 1.5px dashed rgba(212, 45, 45, .3); animation: spin 40s linear infinite; }
/* logolar kendi gerçek boyutundan büyük gösterilmez (bulanıklaşmasın) */
.playground__stage img { width: auto; height: auto; max-width: 44%; max-height: 40%; object-fit: contain; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), opacity .25s; }
.playground__stage.is-flip img { transform: rotateY(90deg) scale(.8); opacity: 0; transition-duration: .22s; }
.playground__stage.is-dark { background: radial-gradient(circle at 50% 45%, #e2574f 0, var(--red-deep) 75%); }
.playground__name { position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 99px; background: var(--paper); font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.playground__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 26px; max-width: 560px; }
.playground__grid button {
  display: flex; align-items: center; justify-content: center; height: 66px; padding: 12px 14px; border-radius: 10px;
  background: var(--cream); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s;
}
.playground__grid button:hover { transform: rotate(-4deg) scale(1.05); }
.playground__grid button[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--paper); }
.playground__grid button.is-dark { background: var(--red); }
.playground__grid img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pillar { padding: 34px 30px; border-radius: 8px; background: var(--paper); border: 1px solid var(--line); }
.pillar img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 26px; }
.pillar h3 { margin: 0 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.pillar p { margin: 0; color: var(--muted); }

.timeline { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: linear-gradient(90deg, var(--red) 0 70%, var(--line) 70%); }
.tl { position: relative; padding-top: 40px; }
.tl::before { content: ""; position: absolute; top: 4px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px var(--paper); }
.tl.is-future::before { background: var(--paper); box-shadow: inset 0 0 0 2px var(--red), 0 0 0 5px var(--paper); }
.tl small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.tl h3 { margin: 6px 0 6px; font-size: 17px; font-weight: 600; }
.tl p { margin: 0; font-size: 13px; color: var(--muted); }

.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.member__photo { position: relative; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; margin-bottom: 12px; }
.member__photo .ph { position: absolute; inset: 0; }
.member h3 { margin: 0; font-size: 15px; font-weight: 600; }
.member p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }

.cta-band {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 90px var(--gutter); background: var(--red); color: #fff; isolation: isolate;
}
.cta-band h2 { margin: 0 0 26px; font-family: var(--script); font-weight: 400; font-size: clamp(54px, 7.2vw, 106px); line-height: .95; letter-spacing: 0; }
.cta-band .btn--ghost span { color: #fff; }
.cta-band .btn--ghost:hover span { color: var(--red); }

/* ==========================================================================
   Yardım
   ========================================================================== */
.help { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; padding: 50px var(--gutter) 90px; }
.help__nav { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; display: grid; gap: 4px; }
.help__nav a {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 8px; font-size: 14px; font-weight: 600;
  transition: background .2s, color .2s;
}
.help__nav a svg { width: 18px; height: 18px; color: var(--muted); }
.help__nav a:hover { background: var(--cream); }
.help__nav a[aria-current="true"] { background: var(--ink); color: #fff; }
.help__nav a[aria-current="true"] svg { color: var(--pink); }
.help__panel { display: none; animation: card-in .5s var(--ease); }
.help__panel.is-active { display: block; }
.help__panel > h2 { margin: 0 0 8px; font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: -.025em; }
.help__panel > p.muted { margin: 0 0 30px; max-width: 620px; }
.help__panel .faq { margin: 0; max-width: none; }
.info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 30px; }
.info-card { padding: 22px; border-radius: 8px; background: var(--cream); }
.info-card strong { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.info-card span { font-size: 13px; color: var(--muted); }
.prose h3 { margin: 28px 0 8px; font-size: 18px; }
.prose p, .prose li { color: #5d5250; }
.prose ol { padding-left: 20px; display: grid; gap: 8px; }
.unit-toggle { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--cream); margin-bottom: 18px; }
.unit-toggle button { padding: 6px 14px; border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--muted); }
.unit-toggle button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.contact { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; }
.contact__cards { display: grid; gap: 10px; align-content: start; }
.contact__card { display: flex; gap: 14px; padding: 18px; border-radius: 8px; border: 1px solid var(--line); }
.contact__card svg { flex: none; width: 22px; height: 22px; color: var(--red); }
.contact__card b { display: block; font-size: 14px; }
.contact__card span { font-size: 13px; color: var(--muted); }

/* ==========================================================================
   Hesabım
   ========================================================================== */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - var(--header-h) - 44px); }
.auth__brand {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 56px clamp(24px, 5vw, 70px); background: var(--blush);
}
.auth__brand > img { position: absolute; top: 12%; left: 50%; width: min(300px, 50%); transform: translateX(-50%) rotate(-6deg); animation: bob 5s ease-in-out infinite; }
.auth__brand h2 { margin: 0 0 20px; font-family: var(--script); font-weight: 400; font-size: clamp(46px, 5vw, 72px); line-height: .95; color: var(--red); }
.auth__perks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 15px; font-weight: 500; }
.auth__perks li { display: flex; align-items: center; gap: 10px; }
.auth__perks img { width: 26px; height: 26px; object-fit: contain; }
.auth__forms { display: flex; flex-direction: column; justify-content: center; padding: 56px clamp(24px, 6vw, 100px); }
.auth__tabs { display: inline-flex; align-self: flex-start; padding: 4px; border-radius: 99px; background: var(--cream); margin-bottom: 30px; }
.auth__tabs button { padding: 9px 20px; border-radius: 99px; font-size: 13px; font-weight: 700; color: var(--muted); }
.auth__tabs button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.auth__forms h1 { margin: 0 0 6px; font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: -.025em; }
.auth__forms form { display: grid; gap: 14px; max-width: 440px; margin-top: 26px; }
.auth__forms form[hidden] { display: none; }
.auth__forms label.field { display: grid; gap: 6px; font-size: 12px; font-weight: 600; }
.auth__forms input:not([type="checkbox"]) { width: 100%; padding: 13px 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--paper); }
.auth__forms input:not([type="checkbox"]):focus { outline: none; border-color: var(--ink); }
.auth__two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth__row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.auth__social { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.auth__social button { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 600; }
.auth__social button:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.auth__or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.acct { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; padding: 40px var(--gutter) 90px; background: #fdfbf8; min-height: 80vh; }
.acct__side { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
.acct__user { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); margin-bottom: 10px; }
.avatar {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--red); color: #fff; font-size: 18px; font-weight: 700; position: relative;
}
.avatar img { position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; padding: 3px; border-radius: 50%; background: #fff; object-fit: contain; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.acct__user b { display: block; font-size: 15px; }
.acct__user span { font-size: 12px; color: var(--muted); }
.acct__nav { display: grid; gap: 2px; padding: 8px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); }
.acct__nav a, .acct__nav button {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 6px; font-size: 14px; font-weight: 500; text-align: left; width: 100%;
  transition: background .2s, color .2s;
}
.acct__nav svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.acct__nav a:hover, .acct__nav button:hover { background: var(--cream); }
.acct__nav a[aria-current="true"] { background: var(--blush); color: var(--red); font-weight: 600; }
.acct__nav a[aria-current="true"] svg { color: var(--red); }
.acct__nav small { margin-left: auto; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 6px; border-radius: 99px; background: var(--cream); font-size: 11px; font-weight: 700; color: var(--ink); }
.acct__nav hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.acct__main { min-width: 0; }
.acct__view { display: none; animation: card-in .45s var(--ease); }
.acct__view.is-active { display: block; }
.acct__title { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.acct__title h1 { margin: 0; font-size: clamp(26px, 2.6vw, 36px); font-weight: 600; letter-spacing: -.025em; }
.acct__title h1 em { font-family: var(--script); font-style: normal; font-weight: 400; font-size: 1.18em; color: var(--red); }
.acct__title p { margin: 4px 0 0; color: var(--muted); }
.box { padding: 24px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); }
.box + .box { margin-top: 12px; }
.box__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.box__head h2 { margin: 0; font-size: 16px; font-weight: 700; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.kpi { padding: 20px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); }
.kpi span { font-size: 12px; color: var(--muted); font-weight: 500; }
.kpi strong { display: block; margin-top: 6px; font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.ov-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; }
.club-card {
  position: relative; overflow: hidden; padding: 24px; border-radius: 10px; background: var(--red); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between; min-height: 240px;
}
.club-card > img { position: absolute; right: -14px; top: -10px; width: 150px; transform: rotate(12deg); opacity: .95; }
.club-card small { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.club-card h3 { margin: 6px 0 0; font-family: var(--script); font-weight: 400; font-size: 44px; line-height: .95; }
.club-card strong { font-size: 36px; font-weight: 600; letter-spacing: -.02em; }
.club-card .bar { height: 6px; margin: 10px 0 6px; border-radius: 99px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.club-card .bar span { display: block; height: 100%; border-radius: 99px; background: #fff; }
.club-card p { margin: 0; font-size: 12px; opacity: .9; }

.tracker { display: grid; grid-template-columns: repeat(4, 1fr); margin: 20px 0 6px; }
.tracker div { position: relative; padding-top: 30px; font-size: 12px; color: var(--muted); }
.tracker div::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 3px; background: var(--line); }
.tracker div::after { content: ""; position: absolute; top: 3px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); }
.tracker div.is-done { color: var(--ink); font-weight: 600; }
.tracker div.is-done::before { background: var(--red); }
.tracker div.is-done::after { background: var(--red); box-shadow: none; }
.tracker div.is-current::after { box-shadow: 0 0 0 5px rgba(212, 45, 45, .18); animation: pulse 1.8s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(212, 45, 45, 0); } }
.tracker b { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }

.thumbs { display: flex; gap: 8px; }
.thumb { position: relative; width: 60px; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; flex: none; }
.thumb .ph { position: absolute; inset: 0; display: grid; place-items: center; }
.thumb .ph img { width: 50%; opacity: .16; filter: grayscale(1); }
.thumb sup { position: absolute; top: 3px; right: 3px; z-index: 3; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }

.filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-pills button { height: 34px; padding: 0 14px; border-radius: 99px; font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); background: var(--paper); }
.filter-pills button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.order { border-radius: 10px; background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.order + .order { margin-top: 12px; }
.order__head { display: grid; grid-template-columns: repeat(4, auto) 1fr; gap: 30px; align-items: center; padding: 16px 22px; background: #fbf7f2; border-bottom: 1px solid var(--line); font-size: 13px; }
.order__head small { display: block; font-size: 11px; color: var(--muted); font-weight: 500; }
.order__head b { font-weight: 700; }
.order__head .pill { justify-self: end; }
.order__body { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 22px; }
.order__body p { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.order__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.order__actions .btn { height: 38px; padding: 0 16px; font-size: 10.5px; }
.order__detail { display: none; padding: 0 22px 22px; }
.order.is-open .order__detail { display: block; animation: card-in .4s var(--ease); }
.order__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; padding-top: 20px; border-top: 1px dashed var(--line); }
.oline { display: grid; grid-template-columns: 60px 1fr auto; gap: 14px; align-items: center; padding: 10px 0; font-size: 13px; }
.oline b { display: block; font-weight: 600; }
.oline span { color: var(--muted); font-size: 12px; }
.sum-rows { display: grid; gap: 8px; font-size: 13px; }
.sum-rows div { display: flex; justify-content: space-between; }
.sum-rows .total { padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 700; }
.sum-rows .disc { color: var(--red); }
.addr-sm { font-size: 13px; line-height: 1.6; color: #5d5250; }
.addr-sm b { color: var(--ink); }

.addr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.addr { position: relative; padding: 22px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); font-size: 14px; line-height: 1.6; }
.addr.is-default { border-color: var(--ink); }
.addr h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; }
.addr p { margin: 0 0 16px; color: #5d5250; }
.addr__actions { display: flex; gap: 14px; font-size: 13px; font-weight: 600; }
.addr__actions button { text-decoration: underline; text-underline-offset: 3px; }
.addr__actions button:hover { color: var(--red); }
.addr-new {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 200px;
  border-radius: 10px; border: 1.5px dashed #d8ccc0; color: var(--muted); font-weight: 600; font-size: 14px; transition: border-color .2s, color .2s, background .2s;
}
.addr-new:hover { border-color: var(--red); color: var(--red); background: var(--paper); }
.addr-new span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cream); font-size: 22px; }

.paycards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.paycard {
  position: relative; overflow: hidden; aspect-ratio: 1.586; padding: 22px; border-radius: 14px; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(135deg, #2a1d1d, #5e1214);
  box-shadow: 0 14px 30px rgba(94, 18, 20, .25);
}
.paycard--red { background: linear-gradient(135deg, #e2574f, #a81f22); }
.paycard > img { position: absolute; right: -10px; bottom: -14px; width: 46%; opacity: .2; }
.paycard__top { display: flex; justify-content: space-between; align-items: center; }
.paycard__chip { width: 38px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #f3dca3, #c9a55b); }
.paycard__num { font-size: clamp(16px, 1.8vw, 21px); font-weight: 500; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.paycard__foot { display: flex; justify-content: space-between; align-items: flex-end; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.paycard__foot b { display: block; font-size: 13px; letter-spacing: .04em; }
.paycard__brand { font-size: 18px; font-weight: 700; font-style: italic; letter-spacing: -.02em; }

.set-list { display: grid; }
.set-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: 0; }
.set-row b { display: block; font-size: 14px; }
.set-row span { font-size: 13px; color: var(--muted); }

/* ==========================================================================
   Ödeme
   ========================================================================== */
.co-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 76px; padding: 0 var(--gutter); border-bottom: 1px solid var(--line); background: var(--paper); }
.co-header a:first-child { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.co-header img { height: 58px; width: auto; }
.co-header > span { justify-self: end; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.co-header svg { width: 16px; height: 16px; }
.co { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); min-height: calc(100vh - 76px); }
.co__main { padding: 40px clamp(16px, 5vw, 80px) 80px; }
.co__steps { display: flex; gap: 8px; align-items: center; margin-bottom: 32px; font-size: 12px; font-weight: 600; color: var(--muted); }
.co__steps b { color: var(--ink); }
.co__steps i { width: 24px; height: 1px; background: var(--line); }
.co-sec { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.co-sec:last-of-type { border-bottom: 0; }
.co-sec h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 18px; font-weight: 700; }
.co-sec h2 span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; }
.radio-cards { display: grid; gap: 8px; }
.rcard { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 8px; border: 1px solid var(--line); cursor: pointer; transition: border-color .2s, background .2s; }
.rcard input { width: 18px; height: 18px; margin: 0; accent-color: var(--red); }
.rcard:has(input:checked) { border-color: var(--ink); background: #fdfaf6; }
.rcard b { display: block; font-size: 14px; }
.rcard span { font-size: 12px; color: var(--muted); }
.rcard strong { margin-left: auto; font-size: 14px; }
.card-form { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; align-items: start; margin-top: 14px; }
.card-form .form { grid-template-columns: 1fr 1fr; }
.co__aside { padding: 40px clamp(16px, 4vw, 60px); background: var(--cream); border-left: 1px solid var(--line); }
.co__sticky { position: sticky; top: 30px; }
.co__aside h2 { margin: 0 0 18px; font-size: 16px; font-weight: 700; }
.co-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 10px 0; font-size: 13px; }
.co-item .thumb { width: 64px; }
.co-item b { display: block; font-weight: 600; }
.co-item span { color: var(--muted); font-size: 12px; }
.coupon { display: flex; gap: 8px; margin: 18px 0; }
.coupon input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--paper); }
.coupon .btn { height: 46px; border-radius: 6px; }
.coupon-note { margin: -10px 0 14px; font-size: 12px; min-height: 16px; }
.trust { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; font-size: 12px; color: var(--muted); }
.trust span { display: inline-flex; align-items: center; gap: 6px; }
.trust svg { width: 16px; height: 16px; color: var(--red); }
.co-success { display: none; max-width: 620px; margin: 0 auto; padding: 80px var(--gutter); text-align: center; }
.co-success img { width: 150px; margin: 0 auto 20px; animation: pop .7s cubic-bezier(.3, 1.8, .5, 1); }
.co-success h1 { margin: 0 0 14px; font-family: var(--script); font-weight: 400; font-size: clamp(52px, 6.6vw, 84px); line-height: .95; color: var(--red); }
.co-success p { color: var(--muted); }
.co-success .order-no { display: inline-block; margin: 16px 0 28px; padding: 10px 18px; border-radius: 99px; background: var(--cream); font-weight: 700; }
body.is-ordered .co { display: none; }
body.is-ordered .co-success { display: block; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 130; overflow: hidden; }
.confetti img { position: absolute; top: -80px; width: 44px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(115vh) rotate(540deg); } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .search__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .timeline { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
  .timeline::before { display: none; }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order__head { grid-template-columns: repeat(2, auto) 1fr; gap: 12px 24px; }
  .order__head > div:nth-child(4) { display: none; }
  .card-form { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .search__body { grid-template-columns: 1fr; gap: 20px; }
  .search__aside .search__links { display: none; }
  .search__chips { margin-bottom: 0; }
  .search__bar kbd { display: none; }
  .search__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .shop__body, .shop.no-filters .shop__body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .filters, .shop.no-filters .filters {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 95; width: min(340px, 88vw); max-height: none;
    padding: 0 20px 20px; background: var(--paper); opacity: 1; pointer-events: auto;
    transform: translateX(-102%); transition: transform .45s var(--ease); box-shadow: 20px 0 60px rgba(0, 0, 0, .15);
  }
  .shop.filters-open .filters { transform: none; }
  .shop.filters-open .filters-scrim { display: block; position: fixed; inset: 0; z-index: 94; background: rgba(27, 21, 21, .42); }
  .filters__head { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; padding: 18px 0; background: var(--paper); border-bottom: 1px solid var(--line); z-index: 2; }
  .filters__head h3 { margin: 0; font-size: 18px; }
  .shop__bar { top: var(--header-h); }
  .cols-toggle { display: none; }
  .pgrid { --cols: 2 !important; gap: 26px 10px; }

  .pdp { grid-template-columns: 1fr; gap: 26px; padding-top: 12px; }
  .pdp__gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); gap: 8px; scrollbar-width: none; }
  .pdp__gallery::-webkit-scrollbar { display: none; }
  .pdp__shot, .pdp__shot:first-child { flex: none; width: 82%; aspect-ratio: 4 / 5; scroll-snap-align: center; }
  .pdp__info { position: static; }

  .col-block { grid-template-columns: 1fr; }
  .col-block:nth-of-type(even) .col-block__media { order: 0; }
  .col-block__media { min-height: 420px; }

  .story { grid-template-columns: 1fr; }
  .story__media { min-height: 380px; }
  .playground { grid-template-columns: 1fr; gap: 24px; }
  .playground__stage { width: min(320px, 100%); margin: 0 auto; }
  .playground__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
  .pillars { grid-template-columns: 1fr; }

  .help { grid-template-columns: 1fr; gap: 24px; padding-top: 24px; }
  .help__nav { position: static; display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .help__nav a { flex: none; padding: 10px 14px; box-shadow: inset 0 0 0 1px var(--line); border-radius: 99px; }
  .help__nav a svg { display: none; }
  .info-cards { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }

  .auth { grid-template-columns: 1fr; }
  .auth__brand { min-height: 320px; }
  .auth__brand > img { top: 8%; width: 150px; }

  .acct { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 20px; }
  .acct__side { min-width: 0; }
  .acct__side { position: static; }
  .acct__nav { display: flex; overflow-x: auto; scrollbar-width: none; }
  .acct__nav a, .acct__nav button { flex: none; width: auto; }
  .acct__nav hr, .acct__nav small { display: none; }
  .ov-grid { grid-template-columns: 1fr; }
  .addr-grid, .paycards { grid-template-columns: 1fr; }
  .order__grid { grid-template-columns: 1fr; }
  .order__body { flex-direction: column; align-items: flex-start; }

  .co { grid-template-columns: 1fr; }
  .co__aside { order: -1; border-left: 0; border-bottom: 1px solid var(--line); }
  .co-header img { height: 46px; }
  .co-header > span b { display: none; }
}

@media (max-width: 560px) {
  .kpis { grid-template-columns: 1fr; }
  .perks { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr 1fr; }
  .countdown div { min-width: 0; flex: 1; }
  .order__head { grid-template-columns: 1fr 1fr; }
  .order__head .pill { justify-self: start; }
  .tracker { font-size: 11px; }
  .card-form .form { grid-template-columns: 1fr; }
  .page-head__logo { width: 90px; }
  .shop__tools .shop__count { display: none; }
}

/* ==========================================================================
   Telefon uyumu: alt menü, dokunmatik hızlı ekle, yapışkan satın al çubuğu
   ========================================================================== */
html { -webkit-tap-highlight-color: transparent; }
.tabbar { display: none; }
.card__plus { display: none; }
.pdp-sticky { display: none; }
.co__toggle { display: none; }

/* Görünmezken tıklanamasın */
.card__quick { pointer-events: none; }
.card:hover .card__quick, .card:focus-within .card__quick { pointer-events: auto; }

/* Dokunmatik ekranlar: hızlı ekle "+" butonuyla açılır */
@media (hover: none) {
  .card:hover .card__quick, .card:focus-within .card__quick { opacity: 0; transform: translateY(10px); pointer-events: none; }
  .card.is-quick .card__quick { opacity: 1; transform: none; pointer-events: auto; }
  .card:hover .ph__label { opacity: 1; }
  .card.is-quick .ph__label { opacity: 0; }
  .card__plus {
    position: absolute; right: 8px; bottom: 8px; z-index: 4; display: grid; place-items: center;
    width: 36px; height: 36px; border-radius: 50%; background: var(--paper); color: var(--ink);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .12); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), background .2s, color .2s;
  }
  .card__plus svg { width: 16px; height: 16px; }
  .card.is-quick .card__plus { transform: rotate(45deg); background: var(--ink); color: #fff; bottom: auto; top: 50px; }
  .card.is-quick .card__quick { bottom: 10px; }
  .card__quick button { min-width: 38px; height: 34px; }
}

@media (max-width: 900px) {
  /* iOS, 16px altı yazı kutularında sayfayı yakınlaştırır */
  input, select, textarea { font-size: 16px !important; }
  .search__bar input { font-size: 22px !important; }

  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  body[data-page="checkout"] { padding-bottom: env(safe-area-inset-bottom); }
  .header__actions [data-search-open] { display: none; }

  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
    display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .95); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--line);
  }
  .tabbar a, .tabbar button {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 0 4px; border-radius: 10px; font-size: 10.5px; font-weight: 600; color: var(--muted);
  }
  .tabbar svg { width: 22px; height: 22px; }
  .tabbar [aria-current="page"] { color: var(--red); }
  .tabbar a:active, .tabbar button:active { background: var(--cream); }
  .tabbar i {
    position: absolute; top: 1px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 99px;
    background: var(--red); color: #fff; font-style: normal; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  }
  .tabbar i:empty { display: none; }

  .toast-wrap { bottom: calc(80px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 32px); }
  .cart__foot, .drawer__panel { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  .search__panel { max-height: 100vh; max-height: 100dvh; }
  .filters { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }

  /* Ürün sayfası: alttaki satın al çubuğu */
  .pdp-sticky {
    position: fixed; left: 10px; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 44;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 10px 10px 16px; border-radius: 14px; background: var(--ink); color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    transform: translateY(calc(100% + 100px)); transition: transform .4s var(--ease);
  }
  .pdp-sticky.is-on { transform: none; }
  .pdp-sticky b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
  .pdp-sticky span { font-size: 12px; opacity: .75; }
  .pdp-sticky .btn { height: 42px; padding: 0 18px; flex: none; }

  /* Ödeme: sipariş özeti açılır kapanır */
  .co__aside { padding-top: 0; padding-bottom: 0; }
  .co__toggle {
    display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 16px 0;
    font-size: 14px; font-weight: 600; color: var(--red);
  }
  .co__toggle i { display: inline-block; font-style: normal; transition: transform .3s; }
  .co__aside.is-open .co__toggle i { transform: rotate(180deg); }
  .co__toggle b { color: var(--ink); font-size: 16px; }
  .co__aside .co__sticky { display: none; padding-bottom: 22px; }
  .co__aside.is-open .co__sticky { display: block; }
  .co__main { padding-bottom: 40px; }

  /* Hero yükseklikleri: tarayıcı çubuğu değişse de zıplamasın */
  .hero { min-height: 78svh; }
  .wp-hero__media { min-height: 340px; }

  .kpis { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .kpi { padding: 14px; }
  .kpi strong { font-size: 22px; }
  .kpi span { font-size: 11px; }
}

@media (max-width: 560px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .shop__bar { gap: 10px; }
  .shop__tools { width: 100%; }
  .shop__tools select { flex: 1; }
  .pdp__buy { grid-template-columns: auto 1fr auto; }
  .pdp__buy .btn { padding: 0 14px; font-size: 10.5px; }
}

@media (max-width: 900px) {
  .cart__panel { overflow-y: auto; }
  .cart__body { flex: none; overflow: visible; }
  .cart__foot { position: sticky; bottom: 0; margin-top: auto; box-shadow: 0 -10px 20px rgba(255, 255, 255, .9); }
  .search__aside h4:nth-of-type(2) { display: none; }
}

/* ==========================================================================
   Yasal metinler penceresi
   ========================================================================== */
.legal-modal .modal__box { width: min(760px, 100%); padding: 34px 34px 30px; }
.legal-modal h3 { padding-right: 40px; }
.legal { font-size: 13.5px; line-height: 1.65; color: #4a403e; }
.legal h4 { margin: 22px 0 6px; font-size: 14.5px; color: var(--ink); }
.legal p { margin: 0 0 10px; }
.legal ul { margin: 0 0 10px; padding-left: 20px; }
.legal li { margin-bottom: 4px; }
.legal .legal-missing { padding: 0 4px; border-radius: 4px; background: #fff3d6; color: #8a5a00; }
.legal-table { width: 100%; margin: 6px 0 12px; border-collapse: collapse; font-size: 13px; }
.legal-table th, .legal-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.legal-table td:nth-child(2), .legal-table th:nth-child(2) { text-align: center; }
.legal-table td:last-child, .legal-table th:last-child { text-align: right; white-space: nowrap; }
.legal-table .tot td { font-weight: 700; color: var(--ink); border-bottom: 0; }
.footer__legal a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(246, 233, 227, .3); }
.footer__legal a:hover { color: #fff; }
@media (max-width: 760px) { .legal-modal .modal__box { padding: 26px 20px; } }

/* ==========================================================================
   Hesap: giriş/kayıt (Google, Apple), qt. club 3D kartı
   ========================================================================== */
.auth__forms > form { display: grid; gap: 12px; }
.auth__social { grid-template-columns: minmax(0, 1fr); }
.auth__social button { gap: 10px; background: var(--paper); transition: box-shadow .2s, background .2s; }
.auth__social button[data-oauth="apple"] { background: var(--ink); color: #fff; box-shadow: none; }
.auth__social button[data-oauth="apple"]:hover { background: #000; }
.auth__fine { margin: -2px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.auth__check { align-items: flex-start; font-size: 12.5px; line-height: 1.45; }
.auth__check input { margin-top: 2px; flex: none; }
.auth__forms .link { font-size: inherit; }
.auth .form-note.is-ok { color: #1d6b3f; }
.acct-loading { display: grid; place-items: center; gap: 12px; min-height: 50vh; text-align: center; }
.acct-loading img { width: 70px; animation: spin 2.4s linear infinite; }
.ov-empty { display: grid; justify-items: center; align-content: center; gap: 6px; text-align: center; }
.ov-empty img { width: 64px; } .ov-empty h2 { margin: 6px 0 0; } .ov-empty p { margin: 0 0 10px; }

.club-box { display: grid; gap: 14px; overflow: visible; }
.club3d { perspective: 1100px; --rx: 0deg; --ry: 0deg; --mx: 30%; --my: 20%; padding: 4px 0; }
.club3d__card {
  position: relative; aspect-ratio: 1.586; width: 100%; max-width: 420px; margin: 0 auto; border-radius: 18px; padding: 20px 22px; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto auto; color: #fff; transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 -2px 0 rgba(0, 0, 0, .18) inset, 0 22px 40px rgba(94, 18, 20, .28), 0 6px 12px rgba(94, 18, 20, .18);
  animation: club-float 6s ease-in-out infinite;
}
.club3d.is-hover .club3d__card { animation: none; transition: transform .08s linear; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 30px 60px rgba(94, 18, 20, .34); }
@keyframes club-float { 0%, 100% { transform: rotateX(8deg) rotateY(-12deg) translateY(0); } 50% { transform: rotateX(4deg) rotateY(10deg) translateY(-6px); } }
/* seviye renkleri */
.club3d--friend { background: radial-gradient(120% 140% at 0% 0%, #ffc4dc 0%, #ff7fb0 45%, #e2457f 100%); }
.club3d--bestie { background: radial-gradient(120% 140% at 0% 0%, #ff8a7a 0%, #e8322f 45%, #8f1520 100%); }
.club3d--soulmate { background: radial-gradient(120% 140% at 0% 0%, #5a4870 0%, #2a1f3a 50%, #120c18 100%); }
.club3d__holo { /* hologram parıltısı */
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .35;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .55) 35%, rgba(150, 220, 255, .5) 42%, rgba(255, 170, 230, .5) 50%, transparent 62%);
  background-size: 250% 250%; background-position: var(--mx) var(--my); transition: background-position .2s;
}
.club3d--soulmate .club3d__holo { opacity: .55; }
.club3d__glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at var(--mx) var(--my), rgba(255, 255, 255, .35), transparent 60%); mix-blend-mode: overlay; }
.club3d__card::after { /* kabartma desen */
  content: ""; position: absolute; right: -30px; bottom: -40px; width: 220px; height: 220px; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, rgba(255, 255, 255, .12) 0 2px, transparent 2px 12px);
}
.club3d__lift { position: relative; z-index: 1; transform: translateZ(40px); }
.club3d__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.club3d__logo { width: 30px; height: auto; filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); }
.club3d__tier { font-family: var(--script); font-size: clamp(28px, 3vw, 38px); line-height: 1; text-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.club3d__chip {
  align-self: center; width: 44px; height: 34px; border-radius: 7px; transform: translateZ(30px);
  background: linear-gradient(135deg, #f8e3a6, #d8b360 50%, #f3d98f); box-shadow: inset 0 0 0 1px rgba(120, 84, 20, .35);
  background-image: linear-gradient(135deg, #f8e3a6, #d8b360 50%, #f3d98f), linear-gradient(transparent 48%, rgba(120, 84, 20, .35) 48% 52%, transparent 52%);
}
.club3d__no { font: 600 clamp(14px, 1.5vw, 17px)/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .14em; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); margin: 6px 0 12px; }
.club3d__foot { align-items: flex-end; }
.club3d__foot small { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.club3d__foot b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; display: block; }
.club-next__bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.club-next__bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--pink), var(--red)); }
.club-next p { margin: 8px 0 0; font-size: 12.5px; }
.club-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.club-tiers div { display: grid; gap: 2px; padding: 9px 10px; border-radius: 10px; background: var(--cream); font-size: 12px; opacity: .65; }
.club-tiers div.is-on { opacity: 1; box-shadow: inset 0 0 0 1.5px var(--red); background: var(--paper); }
.club-tiers b { font-size: 12.5px; } .club-tiers span { color: var(--muted); font-size: 11px; }
.club-dot { width: 10px; height: 10px; border-radius: 50%; }
.club-dot--friend { background: #ff7fb0; } .club-dot--bestie { background: #e8322f; } .club-dot--soulmate { background: #2a1f3a; }
@media (prefers-reduced-motion: reduce) { .club3d__card { animation: none; } }
.auth__forms > .auth__social, .auth__forms > .auth__or, .auth__forms > .auth__fine { max-width: 440px; margin-top: 18px; }
.auth__forms > .auth__fine { margin-top: 10px; }
.auth__forms > .auth__or + form { margin-top: 14px; }
.auth__forms > .btn { align-self: flex-start; margin-top: 18px; }