/* Vakia Saat · vitrin. Krem kâğıt + bordo mürekkep; renk ürünün kendisinden gelir.
   Hareket: tek eğri (--yay), yalnız transform/opacity; prefers-reduced-motion'da kapanır. */

@property --zemin { syntax: '<color>'; inherits: true; initial-value: #F6F1E9; }
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }

:root {
  --krem: #F6F1E9;
  --kagit: #FFFDF9;
  --kagit-2: #FBF7F0;
  --murekkep: #1B1512;
  --ikincil: #4F4540;
  --soluk: #6B5F58;
  --bordo: #6B1F2A;
  --bordo-koyu: #531620;
  --bordo-acik: #F2E4E1;
  --altin: #A88552;
  --cizgi: #E6DDD1;
  --cizgi-koyu: #CFC2B2;
  --tamam: #2C6643;
  --tamam-acik: #E5F0E7;
  --uyari: #7E520F;
  --uyari-acik: #F8EEDC;
  --hata: #A1201F;

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --yay: cubic-bezier(.22, 1, .36, 1);
  --yay-git: cubic-bezier(.65, 0, .35, 1);
  --hiz: .2s;
  --hiz-orta: .45s;
  --hiz-yavas: .9s;

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 36px;
  --golge-sm: 0 1px 2px rgba(27, 21, 18, .06), 0 2px 8px rgba(27, 21, 18, .04);
  --golge: 0 12px 32px -12px rgba(27, 21, 18, .18), 0 2px 6px rgba(27, 21, 18, .05);
  --golge-lg: 0 40px 80px -30px rgba(27, 21, 18, .35), 0 12px 24px -12px rgba(27, 21, 18, .12);

  --kenar: clamp(16px, 4.5vw, 56px);
  --bolum-y: clamp(64px, 9vw, 128px);
  --dokun: 44px;
  --ust-y: 64px;

  --t-dev: clamp(2.6rem, 1.4rem + 5.4vw, 5.75rem);
  --t-h1: clamp(2.1rem, 1.3rem + 3.4vw, 3.75rem);
  --t-h2: clamp(1.85rem, 1.2rem + 2.6vw, 3.1rem);
  --t-h3: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);

  color-scheme: light;
}

/* ---------- temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ust-y) + 16px); }
body { margin: 0; background: var(--krem); color: var(--murekkep); font: 400 1rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 560; line-height: 1.08; letter-spacing: -.02em; font-optical-sizing: auto; text-wrap: balance; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--bordo); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--bordo); color: var(--kagit); }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); font-size: .95em; letter-spacing: .02em; }
.atla { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 10px 16px; background: var(--murekkep); color: var(--kagit); border-radius: 8px; }
.atla:focus { left: 8px; }
.kap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: var(--kenar); }
.kap.dar { max-width: 760px; }
.ust-etiket { display: inline-flex; align-items: center; gap: .45em; font: 600 .75rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bordo); }
.giris { font-size: clamp(1rem, .95rem + .3vw, 1.125rem); color: var(--ikincil); max-width: 52ch; }
.ince { font-size: .875rem; color: var(--soluk); }
.ipucu { font-size: .8125rem; color: var(--soluk); }
.ops { font-weight: 400; color: var(--soluk); font-size: .8125rem; }
.ikon { flex: none; }

/* ---------- düğmeler ---------- */
.btn { --b-zemin: var(--bordo); --b-metin: var(--kagit); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 50px; padding: 0 1.6rem; border: 1.5px solid var(--b-zemin); border-radius: 999px; background: var(--b-zemin); color: var(--b-metin); font: 600 .9375rem/1 var(--sans); letter-spacing: .01em; text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; transition: transform var(--hiz) var(--yay), background-color var(--hiz), border-color var(--hiz), color var(--hiz), box-shadow var(--hiz-orta) var(--yay); -webkit-tap-highlight-color: transparent; }
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--bordo-koyu); transform: translateY(101%); transition: transform var(--hiz-orta) var(--yay); }
.btn:hover::before { transform: none; }
.btn:hover { border-color: var(--bordo-koyu); box-shadow: 0 10px 24px -12px rgba(107, 31, 42, .55); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-cizgi { --b-zemin: transparent; --b-metin: var(--murekkep); border-color: var(--cizgi-koyu); }
.btn-cizgi::before { background: var(--murekkep); }
.btn-cizgi:hover { color: var(--kagit); border-color: var(--murekkep); box-shadow: none; }
.btn-kucuk { min-height: 40px; padding: 0 1.1rem; font-size: .875rem; }
.btn-buyuk { min-height: 56px; font-size: 1rem; }
.btn-tam { width: 100%; }
.btn-esnek { flex: 1; }
.btn-wa { --b-zemin: #1F7A4D; }
.btn-wa::before { background: #17603C; }
.btn-tutar { margin-left: auto; padding-left: 1rem; font-variant-numeric: tabular-nums; opacity: .92; }
.btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.btn[aria-busy="true"]::after { content: ''; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border: 2px solid var(--kagit); border-right-color: transparent; border-radius: 50%; animation: don .7s linear infinite; }
.btn .ikon { transition: transform var(--hiz-orta) var(--yay); }
.btn:hover .ikon-ok { transform: translateX(3px); }
@keyframes don { to { transform: rotate(360deg); } }
.baglanti { padding: 0; border: 0; background: none; text-decoration: underline; cursor: pointer; font-size: inherit; color: inherit; }

/* ---------- duyuru şeridi ---------- */
.ustbar { position: relative; z-index: 31; overflow: hidden; background: var(--bordo); color: #F6E9E6; font-size: .8125rem; letter-spacing: .01em; }
.ustbar-serit { display: flex; width: max-content; animation: kay calc(var(--n) * 7s) linear infinite; }
.ustbar:hover .ustbar-serit { animation-play-state: paused; }
.ustbar-grup { display: flex; flex: none; }
.ustbar-grup span { display: inline-flex; align-items: center; gap: .5rem; padding: 9px 28px; white-space: nowrap; }
.ustbar-grup span::after { content: '◆'; margin-left: 28px; font-size: .5rem; opacity: .5; }
@keyframes kay { to { transform: translateX(-50%); } }

/* ---------- üst menü ---------- */
.ust { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--krem) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--hiz-orta), background-color var(--hiz-orta); }
.ust.kaydi { border-bottom-color: var(--cizgi); }
.ana .ust:not(.kaydi) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.ust-ic { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--ust-y); }
.ust-nav { display: none; gap: 28px; font-size: .875rem; font-weight: 500; }
.ust-nav a, .ust-bag { position: relative; text-decoration: none; padding: 6px 0; }
.ust-nav a::after, .ust-bag::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--hiz-orta) var(--yay); }
.ust-nav a:hover::after, .ust-bag:hover::after { transform: scaleX(1); transform-origin: left; }
.ust-bag { display: none; font-size: .875rem; font-weight: 500; }
.logo { display: inline-flex; justify-self: center; text-decoration: none; color: var(--bordo); }
.logo-isaret { display: block; width: 92px; aspect-ratio: 600 / 242; background: currentColor; -webkit-mask: url(../img/logo-dark@1200.png) center / contain no-repeat; mask: url(../img/logo-dark@1200.png) center / contain no-repeat; }
.ust-sag { display: flex; align-items: center; justify-content: flex-end; gap: 22px; }
.ust-dugme { position: relative; display: inline-grid; place-items: center; width: var(--dokun); height: var(--dokun); margin: 0 -10px; border: 0; border-radius: 50%; background: none; cursor: pointer; text-decoration: none; transition: background-color var(--hiz); }
.ust-dugme:hover { background: rgba(27, 21, 18, .06); }
.ust-menu { justify-self: start; }
.sepet-sayi { position: absolute; top: 5px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bordo); color: var(--kagit); font: 700 .6875rem/18px var(--sans); text-align: center; }
.sepet-sayi.zipla { animation: zipla .6s var(--yay); }
@keyframes zipla { 0% { transform: scale(1); } 30% { transform: scale(1.45); } 100% { transform: scale(1); } }
.ust-sade .ust-ic { grid-template-columns: 1fr auto 1fr; }
.ust-geri { display: inline-flex; align-items: center; gap: 4px; font-size: .875rem; text-decoration: none; color: var(--ikincil); }
.ust-geri span { display: none; }
.guvenli { justify-self: end; display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--tamam); font-weight: 600; }
.guvenli span { display: none; }
@media (min-width: 990px) {
  :root { --ust-y: 76px; }
  .ust-nav, .ust-bag { display: flex; }
  .ust-menu { display: none; }
  .logo-isaret { width: 108px; }
  .ust-geri span, .guvenli span { display: inline; }
}

/* ---------- çekmeceler (menü ve sepet) ---------- */
.cekmece { position: fixed; inset: 0 auto 0 0; width: min(440px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--kagit); color: var(--murekkep); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateX(-100%); transition: transform .55s var(--yay), opacity .3s, overlay .55s allow-discrete, display .55s allow-discrete; }
.cekmece:not([open]) { display: none; }
.cekmece[open] { opacity: 1; transform: none; }
@starting-style { .cekmece[open] { opacity: 0; transform: translateX(-100%); } }
.cekmece-sag { inset: 0 0 0 auto; transform: translateX(100%); }
@starting-style { .cekmece-sag[open] { transform: translateX(100%); } }
.cekmece::backdrop { background: rgba(27, 21, 18, 0); backdrop-filter: blur(0); transition: background-color .45s, backdrop-filter .45s, overlay .45s allow-discrete, display .45s allow-discrete; }
.cekmece[open]::backdrop { background: rgba(27, 21, 18, .42); backdrop-filter: blur(3px); }
@starting-style { .cekmece[open]::backdrop { background: rgba(27, 21, 18, 0); backdrop-filter: blur(0); } }
.cekmece-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--cizgi); }
.cekmece-bas .logo { justify-self: start; }
.cekmece-baslik { font: 500 1.5rem/1.2 var(--serif); }
.cekmece-govde { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 22px 22px; }
.cekmece-alt { padding: 16px 22px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--cizgi); background: var(--kagit-2); }
.cekmece-alt:empty { display: none; }
.menu-liste { display: flex; flex-direction: column; padding: 8px 22px; }
.menu-liste a { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--cizgi); font: 500 1.5rem/1.2 var(--serif); text-decoration: none; }
.cekmece[open] .menu-liste a { animation: menu-gir .6s var(--yay) both; }
.cekmece[open] .menu-liste a:nth-child(2) { animation-delay: .04s; } .cekmece[open] .menu-liste a:nth-child(3) { animation-delay: .08s; } .cekmece[open] .menu-liste a:nth-child(4) { animation-delay: .12s; } .cekmece[open] .menu-liste a:nth-child(5) { animation-delay: .16s; }
@keyframes menu-gir { from { opacity: 0; transform: translateX(-18px); } }
.menu-renkler { padding: 20px 22px; }
.menu-renkler .ust-etiket { margin-bottom: 12px; }
.menu-alt { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding: 16px 22px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--cizgi); }
.menu-alt a { display: flex; align-items: center; gap: 10px; padding: 8px 0; text-decoration: none; color: var(--ikincil); }

/* ---------- renk düğmeleri ---------- */
.renk-sira { display: flex; flex-wrap: wrap; gap: 10px; }
.renk-sira-orta { justify-content: center; }
.renk-nokta { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; flex: none; -webkit-tap-highlight-color: transparent; }
.renk-nokta i { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--kasa) 0 50%, var(--bezel) 50% 100%); box-shadow: inset 0 0 0 1px rgba(27, 21, 18, .14), 0 1px 2px rgba(27, 21, 18, .15); transition: transform var(--hiz-orta) var(--yay); }
.renk-nokta::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--murekkep); opacity: 0; transform: scale(.8); transition: opacity var(--hiz), transform var(--hiz-orta) var(--yay); }
.renk-nokta:hover i { transform: scale(1.1); }
.renk-nokta[aria-checked="true"]::after, .renk-nokta[aria-current="true"]::after { opacity: 1; transform: none; }
.renk-buyuk { width: 44px; height: 44px; }
.renk-buyuk i { width: 32px; height: 32px; }
.renk-mini { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--kasa) 0 50%, var(--bezel) 50% 100%); box-shadow: inset 0 0 0 1px rgba(27, 21, 18, .2); }

/* ---------- ana sahne: renk seçici ---------- */
.sahne { --kadran: min(78vw, 440px); position: relative; margin-top: calc(var(--ust-y) * -1); padding: calc(var(--ust-y) + 12px) 0 40px; background: var(--zemin); transition: --zemin 1.1s var(--yay-git); overflow: hidden; }
.sahne-zemin { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 50% 46%, color-mix(in srgb, var(--kagit) 70%, transparent), transparent 70%); }
.sahne-ic { position: relative; display: grid; gap: 22px; justify-items: center; text-align: center; }
.sahne-metin { display: grid; gap: 12px; justify-items: center; max-width: 34rem; }
p.sahne-baslik { margin: 0; font-family: var(--serif); font-optical-sizing: auto; text-wrap: balance; }
/* Ana sayfa H1'i anahtar kelimeli üst etikettir; büyük slogan görsel başlıktır. */
.sahne-baslik { font-size: var(--t-dev); line-height: 1; letter-spacing: -.035em; font-weight: 600; }
.sahne-alt { color: var(--ikincil); max-width: 30rem; font-size: clamp(.95rem, .9rem + .3vw, 1.0625rem); }
.sahne-saat { position: relative; display: grid; justify-items: center; gap: 18px; width: 100%; }
.kadran { position: relative; grid-area: 1 / 1; width: var(--kadran); aspect-ratio: 1; pointer-events: none; }
.kadran-cizgi { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kadran-cizgi circle { fill: color-mix(in srgb, var(--kagit) 38%, transparent); stroke: rgba(27, 21, 18, .12); stroke-width: 1; }
.kadran-cizgi line { stroke: rgba(27, 21, 18, .22); stroke-width: 1; }
.kadran-cizgi line.saat-cizgi { stroke: rgba(27, 21, 18, .45); stroke-width: 1.6; }
.kadran-ibre { position: absolute; left: 50%; bottom: 50%; width: 2px; height: 47%; margin-left: -1px; transform-origin: 50% 100%; transform: rotate(var(--ibre, 0deg)); transition: transform 1.1s var(--yay); }
.kadran-ibre::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 18%; border-radius: 2px; background: var(--bordo); }
.kadran-ibre::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--bordo); opacity: 0; }
.sahne-gorsel { position: relative; grid-area: 1 / 1; align-self: center; width: calc(var(--kadran) * .84); aspect-ratio: 1; }
.sahne-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; opacity: 0; transform: scale(.9) rotate(-8deg); filter: blur(6px); transition: opacity .7s var(--yay), transform 1.1s var(--yay), filter .7s var(--yay); will-change: transform, opacity; }
.sahne-gorsel img.aktif { opacity: 1; transform: none; filter: none; }
.sahne-gorsel img.cikis { opacity: 0; transform: scale(1.06) rotate(6deg); filter: blur(4px); transition-duration: .5s, .8s, .5s; }
.js .sahne-gorsel img.aktif { animation: suzul 7s ease-in-out infinite alternate; }
@keyframes suzul { from { translate: 0 -4px; } to { translate: 0 6px; } }
@media (max-width: 989px) {
  .sahne .renk-secici { padding: 4px 0; }
  .renk-secici .renk-buyuk { width: 40px; height: 40px; } .renk-secici .renk-buyuk i { width: 29px; height: 29px; }
  .sahne { --kadran: min(60vw, 400px); padding-top: calc(var(--ust-y) + 4px); padding-bottom: 28px; }
  .sahne-ic, .sahne-saat, .sahne-panel { gap: 12px; }
  .sahne-model { min-height: 0; }
}
@media (max-width: 359px) { .renk-secici .renk-buyuk { width: 34px; height: 34px; } .renk-secici .renk-buyuk i { width: 25px; height: 25px; } }
@media (max-width: 559px) {
  .sahne-alt, .sahne .fiyat-not, .sahne [data-s-url] { display: none; }
  .sahne-baslik { font-size: 2.5rem; }
  .sahne-al { grid-template-columns: auto 1fr; align-items: center; gap: 16px; }
  .sahne-fiyat { justify-items: start; }
  .sahne-dugmeler { grid-template-columns: 1fr; }
}
.renk-secici { display: flex; flex-wrap: nowrap; justify-content: safe center; gap: 2px; max-width: 100%; padding: 4px; overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; scrollbar-width: none; }
.renk-secici::-webkit-scrollbar { display: none; }
.renk-secici .renk-nokta[aria-checked="true"]::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(var(--bordo) calc(var(--p) * 1turn), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); }
.sahne[data-oynuyor] .renk-secici .renk-nokta[aria-checked="true"]::before { animation: ilerle var(--sure, 4s) linear forwards; }
@keyframes ilerle { from { --p: 0; } to { --p: 1; } }
.sahne-panel { display: grid; gap: 18px; justify-items: center; width: 100%; max-width: 30rem; }
.sahne-model { display: grid; gap: 2px; justify-items: center; min-height: 4.6rem; }
.sahne-ad { font: 500 clamp(1.9rem, 1.4rem + 2vw, 2.75rem)/1.05 var(--serif); font-style: italic; overflow: hidden; }
.sahne-ad span, .sahne-anlam { display: inline-block; transition: transform .6s var(--yay), opacity .4s; }
.sahne-ad.degisiyor span, .sahne-anlam.degisiyor { transform: translateY(60%); opacity: 0; transition-duration: .25s; }
.sahne-anlam { font-size: .9375rem; color: var(--ikincil); }
.tip-secici { --tip-i: 0; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; max-width: 360px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--kagit) 62%, transparent); box-shadow: inset 0 0 0 1px rgba(27, 21, 18, .08); }
.tip-secici button { position: relative; z-index: 1; min-height: 42px; border: 0; border-radius: 999px; background: none; font-size: .875rem; font-weight: 600; color: var(--ikincil); cursor: pointer; transition: color var(--hiz-orta); }
.tip-secici button[aria-checked="true"] { color: var(--kagit); }
.tip-isaret { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 999px; background: var(--murekkep); transform: translateX(calc(var(--tip-i) * 100%)); transition: transform .55s var(--yay); box-shadow: var(--golge-sm); }
.sahne-al { display: grid; gap: 14px; width: 100%; justify-items: center; }
.sahne-fiyat { display: grid; justify-items: center; gap: 2px; }
.fiyat { font: 600 1.375rem/1.1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.fiyat-not { font-size: .8125rem; color: var(--ikincil); }
.sahne-dugmeler { display: grid; grid-template-columns: 1fr auto; gap: 10px; width: 100%; }
@media (min-width: 990px) {
  .sahne { --kadran: min(44vw, 600px); min-height: min(100svh, 900px); padding: calc(var(--ust-y) + 24px) 0 56px; display: grid; align-items: center; }
  .sahne-ic { grid-template-columns: minmax(0, 1fr) var(--kadran); grid-template-areas: "metin saat" "panel saat"; column-gap: clamp(32px, 5vw, 96px); row-gap: 40px; justify-items: start; text-align: left; align-items: end; }
  .sahne-metin { grid-area: metin; justify-items: start; }
  .sahne-saat { grid-area: saat; align-self: center; }
  .sahne-panel { grid-area: panel; justify-items: start; align-self: start; max-width: 26rem; }
  .sahne-model, .sahne-fiyat, .sahne-al { justify-items: start; }
  .tip-secici { max-width: 340px; }
  .sahne-gorsel { width: calc(var(--kadran) * .7); }
  /* Masaüstünde renkler kadranın saat işaretleri gibi çemberde durur; ibre seçileni gösterir. */
  .renk-secici { position: absolute; inset: 0; display: block; overflow: visible; padding: 0; pointer-events: none; }
  .renk-secici .renk-nokta { position: absolute; left: 50%; top: 50%; margin: -22px; pointer-events: auto; transform: rotate(var(--a)) translateY(calc(var(--kadran) * -.5 - 34px)) rotate(calc(var(--a) * -1)); }
  .kadran-ibre::after { opacity: 1; }
}

/* ---------- güven şeridi ---------- */
.guven-serit { border-block: 1px solid var(--cizgi); background: var(--kagit); }
.guven-izgara { display: grid; grid-template-columns: repeat(2, 1fr); }
.guven-oge { display: flex; gap: 12px; align-items: flex-start; padding: 22px 8px; color: var(--bordo); }
.guven-oge div { display: grid; gap: 2px; color: var(--murekkep); }
.guven-oge b { font-size: .9375rem; }
.guven-oge span { font-size: .8125rem; color: var(--ikincil); line-height: 1.45; }
@media (min-width: 990px) { .guven-izgara { grid-template-columns: repeat(4, 1fr); } .guven-oge { padding: 28px 20px; border-left: 1px solid var(--cizgi); } .guven-oge:first-child { border-left: 0; padding-left: 0; } }

/* ---------- bölümler ---------- */
.bolum { padding-block: var(--bolum-y); }
.bolum-sik { padding-top: 24px; }
.bolum-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 48px); }
.bolum-bas > div:first-child { display: grid; gap: 14px; }
.bolum-bas-orta { justify-content: center; text-align: center; }
.bolum-bas-orta > div { justify-items: center; }
.ok-dugmeler { display: none; gap: 8px; }
.ok-dugme { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--cizgi-koyu); border-radius: 50%; background: none; cursor: pointer; transition: background-color var(--hiz), color var(--hiz), border-color var(--hiz), transform var(--hiz) var(--yay); }
.ok-dugme:hover { background: var(--murekkep); color: var(--kagit); border-color: var(--murekkep); }
.ok-dugme:active { transform: scale(.94); }
.ok-dugme:disabled { opacity: .35; pointer-events: none; }
@media (min-width: 768px) { .ok-dugmeler { display: flex; } }

/* ---------- Reels şeridi ---------- */
.reels { overflow: hidden; }
.reels-serit { display: flex; gap: 14px; padding: 10px var(--kenar) 24px; overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; scroll-padding-inline: var(--kenar); scrollbar-width: none; overscroll-behavior-x: contain; }
.reels-serit::-webkit-scrollbar { display: none; }
@media (min-width: 1320px) { .reels-serit { padding-inline: calc((100vw - 1320px) / 2 + var(--kenar)); scroll-padding-inline: calc((100vw - 1320px) / 2 + var(--kenar)); } }
.reel { flex: none; width: clamp(200px, 58vw, 270px); margin: 0; scroll-snap-align: start; }
.reel-ac { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: var(--r-lg); overflow: hidden; background: #2A2320; cursor: pointer; box-shadow: var(--golge); transition: transform .6s var(--yay), box-shadow .6s var(--yay); }
.reel-ac:hover { transform: translateY(-6px); box-shadow: var(--golge-lg); }
.reel-ac video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-kapak { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: opacity .4s ease; }
.video-kapak.gizle { opacity: 0; }
.reel-ac::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .45), transparent 40%); pointer-events: none; }
.reel-oynat { position: absolute; z-index: 1; right: 12px; bottom: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 253, 249, .92); color: var(--murekkep); box-shadow: var(--golge-sm); transition: transform var(--hiz-orta) var(--yay); }
.reel-ac:hover .reel-oynat { transform: scale(1.12); }
.reel figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 4px 0; font-size: .875rem; font-weight: 500; }
.reel-urun { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--bordo); font-weight: 600; text-decoration: none; }

/* ---------- Bilekte görüldü: koyu sahne, saatin üstünde nabız atan nokta, üzerine gelince bileğe yaklaşan kare ---------- */
.bilekte { overflow: hidden; background: var(--murekkep); color: var(--kagit); }
.bilekte .ust-etiket { color: #E7C8A4; }
.bilekte h2 { color: var(--kagit); }
.bilekte .bolum-metin { max-width: 46ch; margin: 0; color: rgba(255, 253, 249, .74); }
.bilekte .ok-dugme { border-color: rgba(255, 253, 249, .3); color: var(--kagit); }
.bilekte .ok-dugme:hover { background: var(--kagit); color: var(--murekkep); border-color: var(--kagit); }
.bilekte-serit { display: flex; gap: 16px; padding: 10px var(--kenar) 8px; overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; scroll-padding-inline: var(--kenar); scrollbar-width: none; overscroll-behavior-x: contain; }
.bilekte-serit::-webkit-scrollbar { display: none; }
.bilekte-not { margin-top: 18px; font-size: .75rem; line-height: 1.5; color: rgba(255, 253, 249, .62); }
.bilekte-not a { color: rgba(255, 253, 249, .86); }
.bilek { flex: none; width: clamp(236px, 72vw, 320px); margin: 0; scroll-snap-align: start; }
.bilek-kare { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; background: #2A2320; color: var(--murekkep); text-decoration: none; }
.bilek-kare:focus-visible { outline: 2px solid var(--kagit); outline-offset: 3px; }
.bilek-sahne { position: absolute; inset: 0; transform-origin: var(--x) var(--y); transition: transform 1.6s var(--yay); }
.bilek-sahne > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.js .bilek[data-gir]:not(.gorundu) .bilek-sahne { transform: scale(1.16); }
.bilek-kare:hover .bilek-sahne, .bilek-kare:focus-visible .bilek-sahne { transform: scale(1.3); }
.bilek-nokta { position: absolute; z-index: 1; left: var(--nx); top: var(--ny); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--kagit); box-shadow: 0 0 0 4px rgba(255, 253, 249, .3), 0 2px 10px rgba(0, 0, 0, .4); transition: opacity .5s .7s; }
.bilek-nokta::before, .bilek-nokta::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--kagit); animation: bilek-nabiz 2.6s cubic-bezier(.2, .6, .3, 1) infinite; }
.bilek-nokta::after { animation-delay: 1.3s; }
@keyframes bilek-nabiz { from { transform: scale(1); opacity: .85; } to { transform: scale(2.6); opacity: 0; } }
.js .bilek[data-gir]:not(.gorundu) .bilek-nokta { opacity: 0; }
.bilek-urun { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 18px; background: rgba(255, 253, 249, .95); box-shadow: var(--golge); transition: transform .9s var(--yay) .9s, opacity .6s .9s; }
.bilek-ust .bilek-urun { top: 10px; bottom: auto; }
.bilek-alt-sol .bilek-urun { right: auto; max-width: calc(100% - 92px); }
.bilek-alt-sag .bilek-urun { left: auto; max-width: 56%; }
.bilek-alt-sol .bilek-urun .ikon, .bilek-alt-sag .bilek-urun .ikon { display: none; }
@media (max-width: 480px) { .bilek-alt-sag .bilek-urun > img { display: none; } .bilek-alt-sag .bilek-urun { padding-left: 12px; } }
.js .bilek[data-gir]:not(.gorundu) .bilek-urun { opacity: 0; transform: translateY(16px); }
.js .bilek-ust[data-gir]:not(.gorundu) .bilek-urun { transform: translateY(-16px); }
.bilek-urun > img { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--zemin); object-fit: contain; }
.bilek-urun > span { display: grid; gap: 2px; flex: 1; min-width: 0; line-height: 1.15; }
.bilek-urun small { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ikincil); }
.bilek-urun b { font: 500 1.0625rem/1.15 var(--serif); }
.bilek-urun .ikon { flex: none; transition: transform .4s var(--yay); }
.bilek-kare:hover .bilek-urun .ikon { transform: translateX(4px); }
.bilek figcaption { display: grid; gap: 3px; padding: 14px 4px 0; }
.bilek figcaption b { font: 500 1.25rem/1.2 var(--serif); }
.bilek figcaption span { font-size: .8125rem; line-height: 1.4; color: rgba(255, 253, 249, .74); }
@media (prefers-reduced-motion: reduce) {
  .bilek-sahne, .bilek-nokta, .bilek-urun, .bilek-urun .ikon { transition: none; }
  .bilek-kare:hover .bilek-sahne, .bilek-kare:focus-visible .bilek-sahne { transform: none; }
  .bilek-nokta::before, .bilek-nokta::after { animation: none; opacity: 0; }
}

.video-sahne { position: fixed; inset: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: rgba(12, 9, 8, .94); color: #fff; opacity: 0; transition: opacity .35s, overlay .35s allow-discrete, display .35s allow-discrete; }
.video-sahne[open] { opacity: 1; display: grid; place-items: center; }
@starting-style { .video-sahne[open] { opacity: 0; } }
.video-sahne::backdrop { background: transparent; }
.video-sahne-ic { position: relative; width: min(100vw, calc(100dvh * 9 / 16)); height: min(100dvh, calc(100vw * 16 / 9)); }
.video-sahne-ic video { width: 100%; height: 100%; object-fit: cover; background: #000; }
@media (min-width: 640px) { .video-sahne-ic { height: min(88dvh, 860px); width: auto; aspect-ratio: 9 / 16; } .video-sahne-ic video { border-radius: var(--r-lg); } }
.video-sahne .pencere-kapat { z-index: 3; color: #fff; background: rgba(255, 255, 255, .14); }
.vs-ilerleme { position: absolute; z-index: 2; left: 12px; right: 12px; top: 10px; display: flex; gap: 4px; }
.vs-ilerleme i { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.vs-ilerleme i b { display: block; height: 100%; width: calc(var(--p) * 100%); background: #fff; }
.vs-alt { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 16px calc(18px + env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent); }
.vs-baslik { font-weight: 600; }
.vs-gec { position: absolute; z-index: 1; top: 0; bottom: 90px; width: 35%; border: 0; background: none; cursor: pointer; }
.vs-gec[data-yon="-1"] { left: 0; } .vs-gec[data-yon="1"] { right: 0; }
.vs-ses { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; }
.vs-alt .btn { --b-zemin: var(--kagit); --b-metin: var(--murekkep); min-height: 44px; }
.vs-alt .btn::before { background: #fff; }

/* ---------- ikisi bir arada ---------- */
.donusum { background: var(--kagit); }
.donusum-izgara { display: grid; gap: 40px; align-items: center; }
.donusum-gorsel { position: relative; aspect-ratio: 1; border-radius: var(--r-xl); background: var(--zemin); overflow: hidden; }
.donusum-gorsel img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; transition: opacity .8s var(--yay), transform 1.1s var(--yay), filter .8s; }
.donusum-gorsel .d-set { opacity: 0; transform: scale(.88) rotate(10deg); filter: blur(4px); }
.donusum[data-gorunum="set"] .d-saat { opacity: 0; transform: scale(1.06) translateY(-4%); filter: blur(4px); }
.donusum[data-gorunum="set"] .d-set { opacity: 1; transform: none; filter: none; }
.donusum-anahtar { position: absolute; left: 50%; bottom: 18px; display: flex; padding: 4px; border-radius: 999px; background: rgba(255, 253, 249, .86); backdrop-filter: blur(8px); box-shadow: var(--golge-sm); transform: translateX(-50%); }
.donusum-anahtar button { min-height: 38px; padding: 0 16px; white-space: nowrap; border: 0; border-radius: 999px; background: none; font-size: .8125rem; font-weight: 600; cursor: pointer; transition: background-color var(--hiz-orta), color var(--hiz-orta); }
.donusum-anahtar button[aria-pressed="true"] { background: var(--murekkep); color: var(--kagit); }
.donusum-metin { display: grid; gap: 18px; justify-items: start; }
.adimlar { display: grid; gap: 0; margin: 8px 0; padding: 0; list-style: none; width: 100%; }
.adimlar li { display: flex; gap: 18px; padding: 16px 0; border-top: 1px solid var(--cizgi); }
.adimlar li:last-child { border-bottom: 1px solid var(--cizgi); }
.adim-no { font: italic 500 1.25rem/1.3 var(--serif); color: var(--bordo); }
.adimlar b { display: block; margin-bottom: 2px; }
.adimlar p { font-size: .9375rem; color: var(--ikincil); }
@media (min-width: 990px) { .donusum-izgara { grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 120px); } }

/* ---------- ürün kartları ---------- */
.urun-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
@media (min-width: 990px) { .urun-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.urun-kart { position: relative; display: flex; flex-direction: column; gap: 12px; }
.urun-kart-gorsel { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r-lg); background: var(--zemin); overflow: hidden; isolation: isolate; }
.urun-kart-gorsel img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; transition: opacity .6s var(--yay), transform .9s var(--yay); }
.urun-kart-gorsel .ikinci { opacity: 0; transform: scale(.94); }
.urun-kart:hover .urun-kart-gorsel img:first-child { transform: scale(1.04); }
@media (hover: hover) { .urun-kart:hover .urun-kart-gorsel .ikinci { opacity: 1; transform: none; } .urun-kart:hover .urun-kart-gorsel img:first-child:not(:only-of-type) { opacity: 0; } }
.urun-kart-bilgi { display: grid; gap: 6px; padding-inline: 2px; }
@media (min-width: 990px) { .urun-kart-bilgi { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } }
.urun-kart h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); }
.urun-kart h3 a { text-decoration: none; }
.urun-kart h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.urun-kart-alt { margin-top: 4px; font-size: .8125rem; color: var(--ikincil); }
.fiyat-kucuk { font-size: .9375rem; white-space: nowrap; }
.hizli-ekle { position: absolute; z-index: 2; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(255, 253, 249, .92); box-shadow: var(--golge-sm); font-size: .8125rem; font-weight: 600; cursor: pointer; transition: transform var(--hiz-orta) var(--yay), background-color var(--hiz), color var(--hiz); }
.hizli-ekle span { display: none; }
.hizli-ekle:hover { background: var(--murekkep); color: var(--kagit); }
@media (hover: hover) and (min-width: 990px) { .hizli-ekle { opacity: 0; transform: translateY(-6px); } .urun-kart:hover .hizli-ekle, .hizli-ekle:focus-visible { opacity: 1; transform: none; } .hizli-ekle span { display: inline; } }
.rozet { position: absolute; z-index: 1; left: 12px; top: 12px; display: inline-flex; padding: 6px 12px; border-radius: 999px; background: var(--bordo); color: var(--kagit); font-size: .75rem; font-weight: 600; letter-spacing: .01em; }
.rozet-pasif { background: var(--murekkep); }
.urun-serit { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 44%); gap: 16px; padding-top: 4px; overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.urun-serit::-webkit-scrollbar { display: none; }
.urun-serit > * { scroll-snap-align: start; }
@media (min-width: 990px) { .urun-serit { grid-auto-columns: calc((100% - 48px) / 4); } }

/* ---------- üç seçenek ---------- */
.uc-secenek { background: var(--kagit); }
.secim-izgara { display: grid; gap: 16px; }
@media (min-width: 768px) { .secim-izgara { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.secim-kart { position: relative; display: grid; gap: 6px; padding: 24px; border: 1px solid var(--cizgi); border-radius: var(--r-lg); background: var(--krem); text-decoration: none; transition: transform .6s var(--yay), box-shadow .6s var(--yay), border-color var(--hiz); }
.secim-kart:hover { transform: translateY(-6px); box-shadow: var(--golge); border-color: var(--cizgi-koyu); }
.secim-kart.one { background: var(--bordo-acik); border-color: color-mix(in srgb, var(--bordo) 22%, transparent); }
.secim-kart img { width: 64%; max-width: 220px; height: auto; margin: 18px auto 8px; mix-blend-mode: multiply; transition: transform .9s var(--yay); }
.secim-kart:hover img { transform: scale(1.05) rotate(-3deg); }
.secim-kart .rozet { position: static; justify-self: start; }
.secim-kart p { font-size: .9375rem; color: var(--ikincil); }
.secim-fiyat { margin-top: 8px; font-weight: 600; font-size: 1.125rem; }
@media (max-width: 767px) {
  .secim-kart { grid-template-columns: 104px 1fr; column-gap: 16px; padding: 18px; }
  .secim-kart > :not(img) { grid-column: 2; }
  .secim-kart img { grid-column: 1; grid-row: 1 / span 6; width: 104px; margin: 0; align-self: center; }
  .secim-kart .rozet { font-size: .6875rem; }
}
.secim-git { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 600; color: var(--bordo); }

/* ---------- hediye ---------- */
.hediye-izgara { display: grid; gap: 40px; align-items: center; }
.hediye-medya { position: relative; justify-self: center; width: min(100%, 420px); aspect-ratio: 9 / 14; border-radius: var(--r-xl); overflow: hidden; background: #2A2320; box-shadow: var(--golge-lg); }
.hediye-medya video, .hediye-medya img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hediye-metin { display: grid; gap: 18px; justify-items: start; }
.tik-liste { display: grid; gap: 10px; margin: 6px 0 10px; padding: 0; list-style: none; }
.tik-liste li { display: flex; align-items: center; gap: 10px; }
.tik-liste .ikon { color: var(--bordo); }
@media (min-width: 990px) { .hediye-izgara { grid-template-columns: .9fr 1.1fr; gap: clamp(48px, 7vw, 120px); } .hediye-medya { order: 2; } }

/* ---------- yorumlar ---------- */
.yorum-izgara { display: grid; gap: 16px; }
@media (min-width: 768px) { .yorum-izgara { grid-template-columns: repeat(3, 1fr); } }
.yorum { display: grid; gap: 12px; margin: 0; padding: 24px; border-radius: var(--r-lg); background: var(--kagit); border: 1px solid var(--cizgi); }
.yildizlar { display: flex; gap: 2px; color: var(--altin); }
.yorum blockquote { margin: 0; font: 400 1.125rem/1.45 var(--serif); }
.yorum figcaption { font-size: .8125rem; color: var(--ikincil); }

/* ---------- SSS / akordeon ---------- */
.sss { background: var(--kagit); }
.sss-izgara { display: grid; gap: 32px; }
.sss-izgara > div:first-child { display: grid; gap: 14px; align-content: start; }
@media (min-width: 990px) { .sss-izgara { grid-template-columns: .8fr 1.2fr; gap: 80px; } .sss-izgara > div:first-child { position: sticky; top: calc(var(--ust-y) + 32px); } }
.akordeon details { border-bottom: 1px solid var(--cizgi); }
.akordeon details:first-child { border-top: 1px solid var(--cizgi); }
.akordeon summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font-weight: 500; font-size: 1.0625rem; cursor: pointer; list-style: none; }
.akordeon summary::-webkit-details-marker { display: none; }
.akordeon summary .ikon { transition: transform var(--hiz-orta) var(--yay); }
.akordeon details[open] summary .ikon { transform: rotate(45deg); }
.akordeon details::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--yay), content-visibility .45s allow-discrete; }
.akordeon details[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }
.akordeon .ic { padding: 0 0 22px; color: var(--ikincil); display: grid; gap: 10px; }

/* ---------- kapanış ---------- */
.kapanis { padding-block: var(--bolum-y); background: var(--bordo); color: var(--kagit); text-align: center; }
.kapanis-ic { display: grid; gap: 18px; justify-items: center; }
.kapanis h2 { font-size: var(--t-dev); font-style: italic; }
.kapanis p { color: #EAD7D4; }
.kapanis .renk-nokta::after { border-color: var(--kagit); }
.kapanis .renk-nokta:hover::after { opacity: 1; transform: none; }

/* ---------- alt bilgi ---------- */
.alt { padding: 64px 0 28px; background: var(--murekkep); color: #E9E1D8; font-size: .875rem; }
.alt .logo { justify-self: start; color: var(--kagit); }
.alt .logo-isaret { width: 120px; }
.alt-ust { display: grid; gap: 36px; padding-bottom: 40px; }
.alt-marka { display: grid; gap: 16px; max-width: 26rem; justify-items: start; }
.alt-marka p { color: #BDB1A6; }
.alt-ig { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.alt-kolon { display: grid; gap: 10px; align-content: start; }
.alt-kolon .ust-etiket { color: #C9A9A4; margin-bottom: 4px; }
.alt-kolon a { text-decoration: none; color: #E9E1D8; }
.alt-kolon a:hover { text-decoration: underline; }
.alt-kolon span { color: #BDB1A6; }
@media (min-width: 768px) { .alt-ust { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.alt-dip { display: grid; gap: 14px; padding-top: 24px; border-top: 1px solid rgba(233, 225, 216, .14); }
@media (min-width: 990px) { .alt-dip { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .alt-kunye { text-align: right; } }
.alt-yasal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.alt-yasal a, .alt-yasal button { color: #BDB1A6; text-decoration: none; font-size: .8125rem; }
.alt-yasal a:hover { color: var(--kagit); }
.alt-kunye { font-size: .75rem; color: #9C9087; }
.alt-sade { padding-top: 28px; }
.odeme-rozet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.odeme-rozet li { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; background: #fff; color: #1a1f71; font: 800 .75rem/1 var(--sans); letter-spacing: .02em; }
.odeme-rozet .r-guven { background: transparent; color: inherit; font-weight: 500; padding: 0; }
.odeme-rozet .r-mc i { width: 14px; height: 14px; border-radius: 50%; background: #eb001b; } .odeme-rozet .r-mc i + i { margin-left: -10px; background: #f79e1b; mix-blend-mode: multiply; }
.odeme-rozet .r-troy { color: #00a2a0; text-transform: lowercase; }

/* ---------- sepet çekmecesi içi ---------- */
.sepet-liste { margin: 0; padding: 0; list-style: none; }
.sepet-satir { display: grid; grid-template-columns: 84px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--cizgi); }
.cekmece[open] .sepet-satir { animation: satir-gir .55s var(--yay) both; animation-delay: calc(var(--i) * 50ms + 120ms); }
.sepet-satir.yeni { animation: satir-yeni .9s var(--yay) both !important; }
@keyframes satir-gir { from { opacity: 0; transform: translateX(16px); } }
@keyframes satir-yeni { 0% { opacity: 0; transform: translateY(-10px) scale(.97); } 60% { opacity: 1; } 100% { transform: none; } }
.sepet-gorsel { position: relative; display: block; width: 84px; height: 84px; border-radius: 14px; background: var(--zemin); overflow: hidden; }
.sepet-gorsel img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; mix-blend-mode: multiply; }
.sepet-bilgi { display: grid; gap: 2px; align-content: start; }
.sepet-ad { font: 500 1.2rem/1.2 var(--serif); text-decoration: none; }
.sepet-tip { font-size: .8125rem; color: var(--ikincil); }
.sepet-alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.sepet-tutar { font-weight: 600; font-variant-numeric: tabular-nums; }
.adet { display: inline-flex; align-items: center; height: 48px; border: 1px solid var(--cizgi-koyu); border-radius: 999px; background: var(--kagit); }
.adet button { display: grid; place-items: center; width: 44px; height: 100%; border: 0; background: none; cursor: pointer; border-radius: 999px; color: var(--ikincil); transition: background-color var(--hiz); }
.adet button:hover:not(:disabled) { background: rgba(27, 21, 18, .06); }
.adet button:disabled { opacity: .3; cursor: not-allowed; }
.adet input, .adet output { width: 32px; border: 0; background: none; text-align: center; font: 600 1rem var(--sans); color: var(--murekkep); -moz-appearance: textfield; }
.adet input::-webkit-inner-spin-button { -webkit-appearance: none; }
.adet-kucuk { height: 38px; }
.adet-kucuk button { width: 36px; }
.sepet-oneri { display: grid; grid-template-columns: 64px 1fr; gap: 6px 12px; align-items: center; margin-top: 18px; padding: 14px; border-radius: var(--r); background: var(--bordo-acik); border: 1px solid color-mix(in srgb, var(--bordo) 18%, transparent); animation: satir-gir .6s var(--yay) .3s both; }
.sepet-oneri img { border-radius: 10px; background: var(--kagit); mix-blend-mode: multiply; }
.sepet-oneri p { font-size: .875rem; }
.sepet-oneri .btn { grid-column: 1 / -1; }
.sepet-hediye { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px; border-radius: var(--r); background: var(--krem); font-size: .8125rem; color: var(--ikincil); }
.sepet-hediye .ikon { color: var(--bordo); }
.sepet-hediye b { color: var(--murekkep); }
.sepet-toplam { display: grid; gap: 6px; margin: 0 0 14px; font-size: .9375rem; }
.sepet-toplam div { display: flex; justify-content: space-between; }
.sepet-toplam dt { color: var(--ikincil); } .sepet-toplam dd { margin: 0; font-weight: 600; }
.ucretsiz { color: var(--tamam); }
.sepet-yontem { margin-top: 10px; text-align: center; font-size: .75rem; color: var(--soluk); }
.cekmece-bos { display: grid; gap: 12px; justify-items: center; padding: 48px 8px; text-align: center; color: var(--ikincil); }
.bos-isaret { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--krem); color: var(--bordo); }
.bos-baslik { font: 500 1.6rem/1.2 var(--serif); color: var(--murekkep); }
.sepet-tam { padding-block: 40px 80px; }
.sepet-tam h1 { font-size: var(--t-h1); margin-bottom: 16px; }
.sepet-tam-alt { margin-top: 24px; }

/* ---------- ürün sayfası ---------- */
.urun { padding-bottom: 24px; }
.kirinti { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0; font-size: .8125rem; color: var(--soluk); }
.kirinti a { text-decoration: none; } .kirinti a:hover { text-decoration: underline; }
.urun-duzen { display: grid; gap: 28px; }
@media (min-width: 990px) { .urun-duzen { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 5vw, 80px); align-items: start; } .galeri { position: sticky; top: calc(var(--ust-y) + 16px); } }
.galeri { display: grid; gap: 12px; min-width: 0; }
.galeri-ana { display: flex; overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r-xl); background: var(--zemin); overscroll-behavior-x: contain; }
.galeri-ana::-webkit-scrollbar { display: none; }
.galeri-kare { position: relative; flex: 0 0 100%; aspect-ratio: 1; margin: 0; scroll-snap-align: start; }
/* aspect-ratio kutusunda yüzde yükseklik iOS Safari'de çözülmeyebilir: medya mutlak konumla kutuya oturur. */
.galeri-kare img { position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; }
.galeri-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 989px) { .galeri-kare { aspect-ratio: 1 / .86; } .galeri-kare img { inset: 8% 14%; width: 72%; height: 84%; } }
.galeri-kucuk { display: none; gap: 10px; }
.galeri-kucuk button { position: relative; width: 76px; aspect-ratio: 1; padding: 0; border: 1.5px solid transparent; border-radius: 14px; background: var(--zemin); overflow: hidden; cursor: pointer; transition: border-color var(--hiz); }
.galeri-kucuk button img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.galeri-kucuk .kucuk-video img { object-fit: cover; mix-blend-mode: normal; }
.galeri-kucuk .kucuk-video .ikon { position: absolute; inset: 0; margin: auto; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.galeri-kucuk button[aria-current="true"] { border-color: var(--murekkep); }
.galeri-nokta { display: flex; justify-content: center; gap: 6px; }
.galeri-nokta i { width: 6px; height: 6px; border-radius: 3px; background: var(--cizgi-koyu); transition: width var(--hiz-orta) var(--yay), background-color var(--hiz); }
.galeri-nokta i.etkin { width: 20px; background: var(--murekkep); }
@media (min-width: 990px) { .galeri-kucuk { display: flex; } .galeri-nokta { display: none; } }
.alim { display: grid; gap: 14px; align-content: start; }
.urun-ad { font-size: var(--t-h1); line-height: 1; }
.urun-tip-ad { font: italic 500 1.25rem/1.2 var(--serif); color: var(--ikincil); margin-top: -4px; }
.urun-fiyat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 6px; }
.fiyat-buyuk { font-size: 1.75rem; }
.avantaj { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: var(--tamam-acik); color: var(--tamam); font-size: .8125rem; font-weight: 600; }
.urun-kisa { color: var(--ikincil); }
.secenek-grup { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--cizgi); }
.secenek-baslik { font-size: .875rem; color: var(--ikincil); }
.alim .renk-sira { flex-wrap: nowrap; gap: 4px; }
.alim .renk-sira .renk-buyuk { width: 40px; height: 40px; }
.alim .renk-sira .renk-buyuk i { width: 29px; height: 29px; }
@media (max-width: 359px) { .alim .renk-sira .renk-buyuk { width: 34px; height: 34px; } .alim .renk-sira .renk-buyuk i { width: 25px; height: 25px; } }
.secenek-baslik b { color: var(--murekkep); font-weight: 600; margin-left: 4px; }
/* Tip seçimi: üç kart yan yana; seçim çerçevesi (gösterge) seçilen karta kayar, onay işareti yaylanarak belirir. */
.tip-secim { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tip-kart { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 0; padding: 10px 8px 14px; border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--kagit); text-align: center; text-decoration: none; cursor: pointer; transition: border-color var(--hiz), background-color var(--hiz-orta), transform .35s var(--yay); -webkit-tap-highlight-color: transparent; }
.tip-kart:hover { border-color: var(--cizgi-koyu); }
.tip-kart:active { transform: scale(.97); }
.tip-kart[aria-checked="true"] { background: #fff; border-color: transparent; }
.tip-kart.pasif { opacity: .55; }
.tip-kart-gorsel { position: relative; display: block; width: 100%; height: 92px; border-radius: 12px; background: var(--zemin); overflow: hidden; }
.tip-kart-gorsel img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; mix-blend-mode: multiply; transition: transform .7s var(--yay); }
.tip-kart[aria-checked="true"] .tip-kart-gorsel img { transform: scale(1.1) rotate(-5deg); }
.tip-kart-ad { margin-top: 4px; font-size: .875rem; font-weight: 600; line-height: 1.25; }
.tip-kart-fiyat { font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--ikincil); }
.tip-kart[aria-checked="true"] .tip-kart-fiyat { color: var(--murekkep); font-weight: 600; }
.tip-kart-rozet { position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--bordo); color: var(--kagit); font-size: .6875rem; font-weight: 600; }
.tip-kart.pasif .tip-kart-rozet { background: var(--murekkep); }
.tip-tik { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--murekkep); color: var(--kagit); transform: scale(0); opacity: 0; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .2s; }
.tip-kart[aria-checked="true"] .tip-tik { transform: scale(1); opacity: 1; transition-delay: .12s; }
.tip-gosterge { position: absolute; z-index: 2; top: 0; left: 0; border: 2px solid var(--murekkep); border-radius: var(--r); box-shadow: 0 10px 28px -14px rgba(27, 21, 18, .45); pointer-events: none; transition: transform .55s var(--yay), width .55s var(--yay), height .55s var(--yay); }
.tip-secim:not(.hazir) .tip-gosterge { opacity: 0; }
.tip-not { font-size: .875rem; color: var(--ikincil); transition: opacity .25s; }
.tip-not.degisiyor, .urun-tip-ad.degisiyor, .fiyat-buyuk.degisiyor { opacity: 0; }
.urun-tip-ad, .fiyat-buyuk { transition: opacity .25s; }
.galeri-ana.degisiyor .galeri-kare img { opacity: 0; transform: scale(.94); }
.galeri-kare img { transition: opacity .35s var(--yay), transform .5s var(--yay); }
@media (min-width: 990px) { .tip-kart-gorsel { height: 110px; } }
.al-satir { display: flex; gap: 10px; margin-top: 6px; }
.al-satir .adet { height: 56px; }
.alim-guven { display: grid; gap: 12px; margin: 10px 0 0; padding: 18px; list-style: none; border-radius: var(--r); background: var(--kagit); border: 1px solid var(--cizgi); font-size: .875rem; color: var(--ikincil); }
.alim-guven li { display: flex; gap: 12px; align-items: flex-start; }
.alim-guven .ikon { color: var(--bordo); margin-top: 1px; }
.alim-guven b { color: var(--murekkep); margin-right: 4px; }
.alim-odeme { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .75rem; color: var(--soluk); }
.alim-wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: .875rem; color: #1F7A4D; font-weight: 600; text-decoration: none; }
.urun-detay { margin-top: 10px; }
.ozellik { display: grid; margin: 0; }
.ozellik div { display: grid; grid-template-columns: 40% 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--cizgi); font-size: .9375rem; }
.ozellik dt { color: var(--soluk); } .ozellik dd { margin: 0; color: var(--murekkep); }
.reels-urun { padding-top: clamp(48px, 6vw, 88px); padding-bottom: 0; }
.yapiskan { position: fixed; z-index: 25; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 8px; border-radius: 22px; background: rgba(255, 253, 249, .9); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: var(--golge-lg); border: 1px solid rgba(27, 21, 18, .06); transform: translateY(140%); transition: transform .6s var(--yay); }
.yapiskan.gorunur { transform: none; }
.yapiskan img { width: 48px; height: 48px; border-radius: 14px; background: var(--zemin); object-fit: contain; mix-blend-mode: multiply; }
.yapiskan-bilgi { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.yapiskan-bilgi b { font: 500 1.05rem var(--serif); }
.yapiskan-bilgi span { font-size: .75rem; color: var(--ikincil); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yapiskan .btn { min-height: 46px; padding: 0 18px; }
@media (min-width: 990px) { .yapiskan { display: none; } }
.urun-sayfa .wa-balon { bottom: 92px; }
@media (min-width: 990px) { .urun-sayfa .wa-balon { bottom: 24px; } }

/* ---------- koleksiyon sayfası ---------- */
.sayfa-bas { padding: clamp(32px, 6vw, 72px) 0 24px; }
.sayfa-bas .kap { display: grid; gap: 14px; justify-items: center; text-align: center; }
.sayfa-bas h1 { font-size: var(--t-h1); }
.filtre { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.filtre a { display: inline-flex; align-items: baseline; gap: 6px; min-height: 42px; align-items: center; padding: 0 16px; border: 1px solid var(--cizgi-koyu); border-radius: 999px; font-size: .875rem; font-weight: 500; text-decoration: none; transition: background-color var(--hiz), color var(--hiz), border-color var(--hiz); }
.filtre a small { color: var(--soluk); font-size: .75rem; }
.filtre a:hover { border-color: var(--murekkep); }
.filtre a[aria-current="page"] { background: var(--murekkep); color: var(--kagit); border-color: var(--murekkep); }
.filtre a[aria-current="page"] small { color: #CFC5BB; }
.koleksiyon-not { margin-top: 28px; text-align: center; font-size: .875rem; color: var(--soluk); }

/* ---------- formlar ---------- */
.form { display: grid; gap: 16px; }
.form-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.alan { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; grid-column: 1 / -1; min-width: 0; font-size: .875rem; font-weight: 500; }
.alan > :is(input, textarea, select, .secim, .hata, .ipucu) { flex: 1 0 100%; min-width: 0; }
@media (min-width: 560px) { .alan:not(.alan-genis) { grid-column: auto; } }
.alan input, .alan textarea, .alan select { width: 100%; min-height: 52px; padding: 14px 16px; border: 1.5px solid var(--cizgi-koyu); border-radius: 14px; background: var(--kagit); color: var(--murekkep); font: 400 1rem/1.4 var(--sans); transition: border-color var(--hiz), box-shadow var(--hiz); }
.alan textarea { resize: vertical; min-height: 84px; }
.alan input:hover, .alan textarea:hover { border-color: #B3A694; }
.alan input:focus, .alan textarea:focus { outline: 0; border-color: var(--murekkep); box-shadow: 0 0 0 4px rgba(27, 21, 18, .08); }
.alan [aria-invalid="true"] { border-color: var(--hata); }
.hata { color: var(--hata); font-size: .8125rem; font-weight: 500; }
.hata:empty { display: none; }
.uyari { padding: 14px 16px; border-radius: 14px; background: var(--uyari-acik); color: var(--uyari); font-size: .9375rem; }
.bilgi { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--tamam-acik); color: var(--tamam); font-size: .875rem; font-weight: 500; }
.bal { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.onay { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; cursor: pointer; }
.onay input { -webkit-appearance: none; appearance: none; flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; margin: 1px 0 0; border: 1.5px solid var(--cizgi-koyu); border-radius: 7px; background: var(--kagit); cursor: pointer; transition: background-color var(--hiz), border-color var(--hiz), box-shadow var(--hiz), transform .12s; }
.onay input::after { content: ''; width: 11px; height: 6px; margin-top: -2px; border: 2px solid var(--kagit); border-top: 0; border-right: 0; transform: rotate(-45deg) scale(0); transition: transform .22s cubic-bezier(.34, 1.56, .64, 1); }
.onay input:checked { background: var(--bordo); border-color: var(--bordo); }
.onay input:checked::after { transform: rotate(-45deg) scale(1); }
.onay:hover input { border-color: var(--bordo); }
.onay input:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(107, 31, 42, .25); }
.onay input:active { transform: scale(.9); }
.onay input[aria-invalid="true"] { border-color: var(--hata); box-shadow: 0 0 0 3px rgba(161, 32, 31, .15); }
.onay-kucuk { font-size: .8125rem; color: var(--ikincil); }
.onay-kucuk a { color: var(--murekkep); }
.onay-kart { padding: 14px 16px; border: 1.5px solid var(--cizgi); border-radius: var(--r); background: var(--kagit); transition: border-color var(--hiz), background-color var(--hiz); }
.onay-kart:has(input:checked) { border-color: var(--bordo); background: var(--bordo-acik); }
.onay-kart > span { display: flex; gap: 12px; align-items: flex-start; }
.onay-kart > span > .ikon { color: var(--bordo); }
.onay-kart span span { display: grid; gap: 2px; }
.onay-kart small { font-size: .8125rem; color: var(--ikincil); }
.acilir:not([hidden]) { animation: acil .45s var(--yay); }
@keyframes acil { from { opacity: 0; transform: translateY(-6px); } }
.secim { --sc-zemin: var(--kagit); --sc-cizgi: var(--cizgi-koyu); --sc-cizgi-koyu: #B3A694; --sc-vurgu: var(--murekkep); --sc-metin: var(--murekkep); --sc-soluk: var(--soluk); --sc-secili: var(--bordo); --sc-etkin: var(--krem); --sc-kose: 14px; --sc-yukseklik: 52px; --sc-hata: var(--hata); }

/* ---------- ödeme sayfası ---------- */
.odeme-sayfa { background: var(--krem); }
.odeme { padding-block: 16px 64px; }
.odeme-form { display: grid; gap: 20px; }
@media (min-width: 990px) { .odeme { padding-top: 40px; } .odeme-form { grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: start; } .odeme-sag { position: sticky; top: calc(var(--ust-y) + 20px); } .ozet-mobil { display: none; } }
.odeme-sol { display: grid; gap: 20px; }
.grup { display: grid; gap: 16px; margin: 0; padding: 22px; border: 1px solid var(--cizgi); border-radius: var(--r-lg); background: var(--kagit); min-width: 0; }
.grup legend { display: flex; align-items: center; gap: 10px; float: left; width: 100%; margin-bottom: 4px; font: 500 1.4rem/1.2 var(--serif); }
.grup legend i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--murekkep); color: var(--kagit); font: 600 .8125rem/1 var(--sans); font-style: normal; }
.grup legend + * { clear: both; }
.odeme-secenek { display: grid; gap: 10px; }
.secenek { display: block; cursor: pointer; }
.secenek input { position: absolute; opacity: 0; pointer-events: none; }
.secenek-ic { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1.5px solid var(--cizgi); border-radius: var(--r); background: var(--kagit); transition: border-color var(--hiz), box-shadow var(--hiz), background-color var(--hiz); }
.secenek:hover .secenek-ic { border-color: var(--cizgi-koyu); }
.secenek input:checked + .secenek-ic { border-color: var(--murekkep); box-shadow: 0 0 0 1px var(--murekkep); background: #fff; }
.secenek input:focus-visible + .secenek-ic { border-color: var(--bordo); box-shadow: 0 0 0 4px var(--bordo-acik); }
.secenek input:checked:focus-visible + .secenek-ic { border-color: var(--bordo); box-shadow: 0 0 0 1px var(--bordo), 0 0 0 5px var(--bordo-acik); }
.secenek-ikon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--krem); color: var(--bordo); flex: none; }
.secenek input:checked + .secenek-ic .secenek-ikon { background: var(--bordo); color: var(--kagit); }
.secenek-yazi { display: grid; gap: 2px; flex: 1; }
.secenek-yazi small { font-size: .8125rem; color: var(--ikincil); line-height: 1.45; }
.secenek-ek { font-size: .8125rem; font-weight: 600; color: var(--ikincil); white-space: nowrap; }
.ozet { display: grid; gap: 14px; padding: 22px; border: 1px solid var(--cizgi); border-radius: var(--r-lg); background: var(--kagit); }
.ozet h2 { font-size: 1.5rem; }
.ozet-liste { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ozet-liste li { display: grid; grid-template-columns: 60px 1fr auto; gap: 12px; align-items: center; }
.ozet-gorsel { position: relative; display: block; width: 60px; height: 60px; border-radius: 12px; background: var(--zemin); }
.ozet-gorsel img { width: 100%; height: 100%; object-fit: contain; padding: 4px; mix-blend-mode: multiply; }
.ozet-gorsel b { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--murekkep); color: var(--kagit); font: 700 .6875rem/20px var(--sans); text-align: center; }
.ozet-ad { display: grid; font: 500 1.05rem/1.25 var(--serif); }
.ozet-ad small { font: 400 .75rem var(--sans); color: var(--ikincil); }
.ozet-tutar { font-weight: 600; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.ozet-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ozet-duzenle { display: inline-flex; align-items: center; gap: 5px; font-size: .8125rem; font-weight: 500; color: var(--ikincil); text-decoration: none; }
.ozet-duzenle:hover { color: var(--bordo); }
.kupon { padding: 12px 14px; border: 1px dashed var(--cizgi-koyu); border-radius: var(--r-sm); background: var(--kagit-2); }
.kupon summary { display: flex; align-items: center; gap: 8px; }
.kupon summary span { flex: 1; }
.ozet .ozet-tutarlar { padding: 14px 16px; border: 0; border-radius: var(--r-sm); background: var(--kagit-2); }
.ozet-onaylar { display: grid; gap: 10px; }
.ozet-onaylar .onay { align-items: flex-start; line-height: 1.45; }
.ozet-onaylar .onay-zorunlu { padding: 12px 14px; border: 1.5px solid var(--cizgi); border-radius: var(--r-sm); background: var(--kagit); color: var(--murekkep); transition: border-color var(--hiz), background-color var(--hiz); }
.ozet-onaylar .onay-zorunlu:has(input:checked) { border-color: var(--tamam); background: var(--tamam-acik); }
.ozet-onaylar .onay:not(.onay-zorunlu) { padding: 0 14px; }
.ozet-onaylar .hata:empty { display: none; }
.guven-logolar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gl { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 28px; min-width: 44px; padding: 0 8px; border: 1px solid var(--cizgi); border-radius: 7px; background: #fff; color: #3A322E; font: 600 .6875rem/1 var(--sans); white-space: nowrap; }
.gl svg { display: block; }
.gl-yazi .ikon { color: var(--tamam); }
.ozet .guven-logolar, .alim .guven-logolar, .cekmece-alt .guven-logolar { justify-content: center; }
.alim .guven-logolar { justify-content: flex-start; }
.alt .guven-logolar { margin-bottom: 22px; }
.cekmece-alt .guven-logolar { margin-top: 14px; }
.kupon summary { cursor: pointer; font-size: .875rem; font-weight: 500; color: var(--bordo); list-style: none; }
.kupon summary::-webkit-details-marker { display: none; }
.kupon summary::after { content: '+'; font-size: 1.1rem; line-height: 1; }
.kupon details[open] summary::after { content: '−'; }
.kupon-alan { display: flex; gap: 8px; margin-top: 10px; }
.kupon-alan input { flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 0 14px; border: 1.5px solid var(--cizgi-koyu); border-radius: var(--r-sm); background: var(--kagit); font: 600 .9375rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--murekkep); }
.kupon-alan input:focus-visible { outline: 2px solid var(--bordo); outline-offset: 1px; }
.kupon-alan .btn { min-height: 46px; padding: 0 1.1rem; }
.kupon.uygulandi .kupon-alan input { border-color: var(--tamam); background: var(--tamam-acik); }
.kupon-durum { min-height: 1.2em; margin: 6px 0 0; font-size: .8125rem; color: var(--tamam); }
.kupon.hatali .kupon-durum { color: var(--hata); }
.ozet .ozet-indirim dt small { margin-left: 6px; padding: 2px 6px; border-radius: 6px; background: var(--tamam-acik); color: var(--tamam); font: 600 .6875rem var(--mono); }
.ozet .ozet-indirim dd { color: var(--tamam); }
.ozet dl { display: grid; gap: 8px; margin: 0; padding-top: 14px; border-top: 1px solid var(--cizgi); }
.ozet dl div { display: flex; justify-content: space-between; gap: 12px; font-size: .9375rem; }
.ozet dt { color: var(--ikincil); } .ozet dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.ozet .ozet-toplam { padding-top: 10px; border-top: 1px solid var(--cizgi); font-size: 1.125rem; }
.ozet .ozet-toplam dt { color: var(--murekkep); font-weight: 600; } .ozet .ozet-toplam dt small { font-weight: 400; font-size: .75rem; color: var(--soluk); margin-left: 4px; }
.ozet .ozet-toplam dd { font-weight: 700; }
.ozet-guven { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: .8125rem; color: var(--ikincil); }
.ozet-guven li { display: flex; gap: 8px; align-items: center; }
.ozet-guven .ikon { color: var(--tamam); }
.ozet-mobil { border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--kagit); }
.ozet-mobil summary { display: flex; align-items: center; gap: 8px; padding: 14px 16px; font-size: .875rem; font-weight: 500; cursor: pointer; list-style: none; }
.ozet-mobil summary::-webkit-details-marker { display: none; }
.ozet-mobil summary b { margin-left: auto; font-size: 1rem; }
.ozet-mobil[open] summary .ikon-asagi { transform: rotate(180deg); }
.ozet-mobil-ic { padding: 0 16px 16px; }
.ozet-mobil-ic .ozet { padding: 0; border: 0; }
.ozet-mobil-ic .ozet h2, .ozet-mobil-ic .onay, .ozet-mobil-ic .btn, .ozet-mobil-ic .ozet-guven, .ozet-mobil-ic .ipucu, .ozet-mobil-ic .hata { display: none; }

/* ---------- sipariş sayfası ---------- */
.siparis { padding-block: 32px 72px; display: grid; gap: 20px; }
.tamam-bas { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 16px 0 8px; }
.tamam-isaret { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--bordo); color: var(--kagit); animation: belir .8s var(--yay) both; }
.tamam-isaret .ikon path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: ciz .7s var(--yay) .35s forwards; }
@keyframes belir { from { transform: scale(.4); opacity: 0; } }
@keyframes ciz { to { stroke-dashoffset: 0; } }
.tamam-bas h1, .siparis-baslik { font-size: var(--t-h1); }
.tamam-bas p { color: var(--ikincil); max-width: 34rem; }
.havale { display: grid; gap: 14px; padding: 22px; border-radius: var(--r-lg); background: var(--kagit); border: 1.5px solid var(--bordo); box-shadow: 0 0 0 6px var(--bordo-acik); }
.havale h2 { display: flex; align-items: center; gap: 10px; font-size: 1.4rem; color: var(--bordo); }
.havale dl { display: grid; margin: 0; }
.havale dl div { display: grid; grid-template-columns: 84px 1fr auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--cizgi); }
.havale dt { font-size: .8125rem; color: var(--soluk); } .havale dd { margin: 0; font-weight: 500; word-break: break-word; }
@media (max-width: 640px) {
  .havale dl div { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .havale dd { grid-column: 1 / -1; grid-row: 2; min-width: 0; word-break: normal; }
  .havale .kopyala { grid-column: 2; grid-row: 1; }
}
.kopyala { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--cizgi-koyu); border-radius: 999px; background: none; font-size: .75rem; font-weight: 600; cursor: pointer; transition: background-color var(--hiz), color var(--hiz), border-color var(--hiz); }
.kopyala:hover { background: var(--murekkep); color: var(--kagit); border-color: var(--murekkep); }
.kopyala.kopyalandi { background: var(--tamam); border-color: var(--tamam); color: #fff; }
.havale-bildir { display: grid; gap: 12px; padding-top: 6px; }
.puan-sec { margin: 0; padding: 0; border: 0; }
.puan-sec legend { padding: 0; margin-bottom: 6px; font-weight: 500; }
.puan-yildiz { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.puan-yildiz input { position: absolute; opacity: 0; pointer-events: none; }
.puan-yildiz label { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; color: var(--ikincil); cursor: pointer; transition: color var(--hiz), transform var(--hiz) var(--yay); }
.puan-yildiz label .ikon path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.puan-yildiz input:checked ~ label, .puan-yildiz label:hover, .puan-yildiz label:hover ~ label { color: #9A6412; }
.puan-yildiz input:checked ~ label .ikon path, .puan-yildiz label:hover .ikon path, .puan-yildiz label:hover ~ label .ikon path { fill: currentColor; }
.puan-yildiz label:active { transform: scale(.9); }
.puan-yildiz input:focus-visible + label { outline: 2px solid var(--bordo); outline-offset: 2px; }
.kart-adim { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: adim; }
.kart-adim li { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; row-gap: 2px; counter-increment: adim; }
.kart-adim li::before { content: counter(adim); grid-row: 1 / span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bordo-acik); color: var(--bordo); font: 700 .875rem/1 var(--sans); }
.kart-adim b { font-weight: 600; }
.kart-adim span { grid-column: 2; font-size: .875rem; line-height: 1.5; color: var(--ikincil); }
.kart-wa .btn-wa .ikon { flex: none; }
.kart-wa .guven-logolar { justify-content: center; }
@media (min-width: 560px) { .havale-bildir { grid-template-columns: 1fr auto; align-items: end; } .havale-bildir .alan { grid-column: auto; } }
.izle { display: grid; grid-template-columns: repeat(4, 1fr); margin: 8px 0; padding: 0; list-style: none; counter-reset: a; }
.izle li { position: relative; display: grid; justify-items: center; gap: 8px; font-size: .75rem; text-align: center; color: var(--soluk); }
.izle li span { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: var(--krem); border: 2px solid var(--cizgi-koyu); }
.izle li::before { content: ''; position: absolute; top: 7px; left: -50%; right: 50%; height: 2px; background: var(--cizgi-koyu); }
.izle li:first-child::before { display: none; }
.izle li.gecti span, .izle li.simdi span { background: var(--bordo); border-color: var(--bordo); }
.izle li.gecti::before, .izle li.simdi::before { background: var(--bordo); }
.izle li.simdi { color: var(--murekkep); font-weight: 600; }
.izle li.simdi span { box-shadow: 0 0 0 6px var(--bordo-acik); }
.kargo-bilgi { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r); background: var(--kagit); border: 1px solid var(--cizgi); }
.kargo-bilgi > div { display: grid; flex: 1; font-size: .875rem; }
.hediye-notu { display: flex; gap: 8px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--krem); font: italic 1rem/1.4 var(--serif); }
.sozlesme-kopya { border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--kagit); }
.sozlesme-kopya summary { padding: 14px 16px; font-size: .875rem; cursor: pointer; }
.sozlesme-kopya .yasal { padding: 0 16px 16px; max-height: 60vh; overflow: auto; }
.dugmeler { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---------- metin sayfaları ---------- */
.sayfa-dar { padding-block: clamp(40px, 6vw, 80px); display: grid; gap: 16px; }
.sayfa-dar h1 { font-size: var(--t-h1); }
.kutu-form { padding: 22px; border-radius: var(--r-lg); background: var(--kagit); border: 1px solid var(--cizgi); }
.iletisim-kartlar { display: grid; gap: 12px; margin-top: 8px; }
@media (min-width: 560px) { .iletisim-kartlar { grid-template-columns: 1fr 1fr; } }
.iletisim-kart { display: grid; gap: 4px; padding: 22px; border-radius: var(--r-lg); background: var(--kagit); border: 1px solid var(--cizgi); text-decoration: none; transition: transform .5s var(--yay), box-shadow .5s var(--yay); }
.iletisim-kart:hover { transform: translateY(-4px); box-shadow: var(--golge); }
.iletisim-kart .ikon { color: var(--bordo); margin-bottom: 8px; }
.iletisim-kart span { font-size: .875rem; color: var(--ikincil); word-break: break-word; }
.bulunamadi { justify-items: center; text-align: center; }
.yasal-sayfa { padding-block: 40px 80px; }
.yasal-sayfa > h1 { font-size: var(--t-h1); margin-bottom: 24px; }
.yasal { font-size: .9375rem; color: var(--ikincil); }
.yasal h2 { margin: 28px 0 10px; font-size: 1.35rem; color: var(--murekkep); }
.yasal p, .yasal ul, .yasal ol { margin: 0 0 12px; }
.yasal ul, .yasal ol { padding-left: 1.2rem; }
.yasal li { margin-bottom: 4px; }
.yasal b { color: var(--murekkep); }
.yasal .surum { font-size: .75rem; color: var(--soluk); }
.yasal-ayrac { font-size: 1.6rem !important; margin-top: 32px !important; padding-top: 20px; border-top: 1px solid var(--cizgi); }
.yasal-sayfa .pencere-baslik { display: none; }

/* ---------- pencereler ---------- */
.pencere { width: min(720px, calc(100vw - 24px)); max-height: min(86dvh, 900px); padding: 0; border: 0; border-radius: var(--r-xl); background: var(--kagit); color: var(--murekkep); box-shadow: var(--golge-lg); opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .35s, transform .5s var(--yay), overlay .5s allow-discrete, display .5s allow-discrete; }
.pencere[open] { opacity: 1; transform: none; }
@starting-style { .pencere[open] { opacity: 0; transform: translateY(16px) scale(.98); } }
.pencere::backdrop { background: rgba(27, 21, 18, 0); transition: background-color .35s, overlay .35s allow-discrete, display .35s allow-discrete; }
.pencere[open]::backdrop { background: rgba(27, 21, 18, .45); }
@starting-style { .pencere[open]::backdrop { background: rgba(27, 21, 18, 0); } }
.pencere-dar { width: min(460px, calc(100vw - 24px)); }
.takip-ikon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 50%; background: var(--bordo-acik); color: var(--bordo); }
.pencere-dar .form { margin-top: 18px; }
.pencere-dar .pencere-baslik { font-size: 1.75rem; margin-bottom: 6px; }
.pencere-govde { padding: 32px clamp(20px, 4vw, 40px) 40px; overflow-y: auto; max-height: inherit; }
.pencere-baslik { font-size: var(--t-h2); margin-bottom: 8px; padding-right: 40px; }
.pencere-kapat { position: absolute; z-index: 2; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--krem); cursor: pointer; transition: transform var(--hiz) var(--yay); }
.pencere-kapat:hover { transform: rotate(90deg); }

/* ---------- WhatsApp balonu, çerez ---------- */
.wa-balon { position: fixed; z-index: 24; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #1F7A4D; color: #fff; box-shadow: var(--golge-lg); transition: transform .5s var(--yay); }
.wa-balon { transform: translateY(var(--kay, 0px)); transition: transform .55s var(--yay); }
.wa-balon:hover { transform: translateY(var(--kay, 0px)) scale(1.08) rotate(-6deg); }
/* "Sipariş ver" görününce WhatsApp onun üstüne kayar; düğme alt köşeye yerleşir. */
body.git-acik .wa-balon { --kay: -58px; }
/* Çerez bilgisi: ekranı kapatmayan ince şerit (örtülü onay); tercihler açılınca alt satıra iner. */
.cerez { position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: 560px; margin-inline: auto; padding: 12px 12px 12px 16px; border: 1px solid var(--cizgi); border-radius: 16px; background: #FFFDF9; color: var(--ikincil); font-size: .8125rem; line-height: 1.5; box-shadow: 0 8px 28px rgba(27, 21, 18, .18); animation: acil .5s var(--yay); }
.cerez[hidden], .cerez [hidden] { display: none; }
.cerez-metin { flex: 1 1 220px; min-width: 0; margin: 0; }
.cerez-ek { white-space: nowrap; }
.cerez a, .cerez-bag { color: var(--bordo); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cerez-bag { position: relative; padding: 0; border: 0; background: none; cursor: pointer; }
.cerez-bag::after { content: ""; position: absolute; inset: -12px -6px; }
.cerez-dugme { flex: 0 0 auto; display: flex; }
.cerez-dugme .btn { min-height: 44px; min-width: 88px; padding: 0 18px; }
.cerez-dugme[data-cerez-kayit] { flex: 1 1 100%; }
.cerez-dugme[data-cerez-kayit] .btn { flex: 1; }
.cerez-secim { flex: 1 1 100%; display: grid; gap: 4px; }
.cerez-secim label { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 4px 0; cursor: pointer; }
.cerez-secim input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--bordo); }
.cerez-secim label > span { display: grid; gap: 2px; }
.cerez-secim b { color: var(--murekkep); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .cerez { animation: none; } }
/* Çerez şeridi açıkken WhatsApp balonu ve yukarı düğmesi gizlenir; ürün sayfasında şerit yapışkan sepet çubuğunun üstüne çıkar (çubuk görünür kalır). */
body:has(#cerez:not([hidden])) .wa-balon, body:has(#cerez:not([hidden])) .siparis-git { visibility: hidden; }
@media (max-width: 989px) { body:has(.yapiskan.gorunur) .cerez { bottom: calc(92px + env(safe-area-inset-bottom)); } }
.cerez { transition: bottom .35s var(--yay); }
@media (max-width: 560px) { .cerez { flex-wrap: nowrap; left: 8px; right: 8px; padding: 10px 10px 10px 14px; } .cerez:has(.cerez-secim:not([hidden])) { flex-wrap: wrap; } .cerez-metin { flex-basis: auto; } .cerez-dugme .btn { min-width: 76px; padding: 0 14px; } }
/* Sipariş alanına dön: WhatsApp balonunun üstünde. Ürün sayfasında mobilde bu işi yapışkan çubuk üstlenir. */
.siparis-git { position: fixed; z-index: 24; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 12px; border: 1px solid rgba(27, 21, 18, .08); border-radius: 999px; background: rgba(255, 253, 249, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--murekkep); font: 600 .8125rem var(--sans); box-shadow: var(--golge); cursor: pointer; opacity: 0; transform: translateY(12px) scale(.96); pointer-events: none; transition: opacity .35s var(--yay), transform .5s var(--yay), background-color var(--hiz); }
.siparis-git.gorunur { opacity: 1; transform: none; pointer-events: auto; }
.siparis-git:hover { background: var(--murekkep); color: var(--kagit); }
.siparis-git:focus-visible { outline: 2px solid var(--bordo); outline-offset: 2px; }
@media (max-width: 989px) { .urun-sayfa .siparis-git { display: none; } }
@media (min-width: 990px) { .urun-sayfa .siparis-git { bottom: 24px; } }
.siparis-git { transform: translateY(20px) scale(.9); }
@media (max-width: 989px) { body.git-acik.urun-sayfa .wa-balon, body.git-acik .urun-sayfa .wa-balon { --kay: 0px; } }
.siparis-git.gorunur { transition-delay: .08s; }
.wa-yazi { position: absolute; right: calc(100% + 10px); top: 50%; padding: 7px 12px; border-radius: 999px; background: var(--murekkep); color: #fff; font: 600 .8125rem var(--sans); white-space: nowrap; opacity: 0; transform: translate(6px, -50%); pointer-events: none; transition: opacity .25s, transform .35s var(--yay); }
@media (hover: hover) { .wa-balon:hover .wa-yazi, .wa-balon:focus-visible .wa-yazi { opacity: 1; transform: translate(0, -50%); } }
@media (hover: none) { .wa-yazi { display: none; } }
.vurgu-nabiz { animation: vurguNabiz 1.2s var(--yay) 1; }
@keyframes vurguNabiz { 0% { box-shadow: 0 0 0 0 rgba(107, 31, 42, .45); } 70% { box-shadow: 0 0 0 14px rgba(107, 31, 42, 0); } 100% { box-shadow: 0 0 0 0 rgba(107, 31, 42, 0); } }
@media (prefers-reduced-motion: reduce) { .siparis-git, .wa-yazi { transition: none; } .vurgu-nabiz { animation: none; } }

/* ---------- belirme hareketi ---------- */
.js [data-gir] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--yay), transform 1.1s var(--yay); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-gir].gorundu { opacity: 1; transform: none; }

.js [data-acilis] { animation: acilis 1s var(--yay) both; animation-delay: calc(var(--i, 0) * 90ms + 60ms); }
.js .kadran { animation: kadran-acilis 1.4s var(--yay) both; }
@keyframes acilis { from { opacity: 0; transform: translateY(18px); } }
@keyframes kadran-acilis { from { opacity: 0; transform: scale(.9) rotate(-30deg); } }

/* Sayfa geçişi: ürünler arası renk değişimi yumuşak akar (destekleyen tarayıcılarda). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: var(--yay); }
::view-transition-group(urun-gorsel) { animation-duration: .6s; animation-timing-function: var(--yay); }

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

/* ---------- rehber ---------- */
.rehber-yazi { padding-block: clamp(24px, 4vw, 48px) clamp(56px, 8vw, 96px); display: grid; gap: 28px; }
.kirinti { display: flex; flex-wrap: wrap; gap: 8px; font-size: .8125rem; color: var(--soluk); }
.kirinti a { color: var(--ikincil); }
.rehber-bas { display: grid; gap: 12px; }
.rehber-bas h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); }
.rehber-tarih { margin: 0; font-size: .8125rem; color: var(--soluk); }
.rehber-kapak { margin: 0; aspect-ratio: 16 / 10; border-radius: var(--r-lg); background: var(--zemin); overflow: hidden; position: relative; }
.rehber-kapak img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; }
.rehber-govde { display: grid; gap: 18px; font-size: 1.0625rem; line-height: 1.7; color: var(--murekkep); }
.rehber-govde h2 { margin-top: 18px; font-size: var(--t-h3); line-height: 1.2; }
.rehber-govde p, .rehber-govde ul, .rehber-govde ol { margin: 0; }
.rehber-govde ul { padding-left: 1.2em; display: grid; gap: 8px; }
.rehber-govde a:not(.btn):not(.rehber-urun) { color: var(--bordo); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rehber-ozet { padding: 18px 20px; border-radius: var(--r); background: var(--bordo-acik); border-left: 3px solid var(--bordo); }
.rehber-renkler { list-style: none; padding: 0 !important; gap: 10px !important; }
.rehber-renkler li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--ikincil); font-size: .9375rem; }
.rehber-renkler a { display: inline-flex; align-items: center; gap: 8px; color: var(--murekkep) !important; text-decoration: none !important; }
.rehber-nokta { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--kasa) 0 50%, var(--bezel) 50% 100%); box-shadow: inset 0 0 0 1px rgba(27, 21, 18, .14); transform: translateY(2px); }
.rehber-tablo { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: var(--r); }
.rehber-tablo table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.rehber-tablo th, .rehber-tablo td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.rehber-tablo tr:last-child > * { border-bottom: 0; }
.rehber-tablo thead th { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--soluk); background: var(--kagit-2); }
.rehber-tablo td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.rehber-urun { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 10px 16px 10px 10px; border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--kagit); color: var(--murekkep); text-decoration: none; transition: border-color var(--hiz), box-shadow var(--hiz-orta) var(--yay), transform var(--hiz) var(--yay); }
.rehber-urun:hover { border-color: var(--cizgi-koyu); box-shadow: var(--golge); transform: translateY(-2px); }
.rehber-urun img { width: 64px; height: 64px; border-radius: 12px; background: var(--zemin); object-fit: contain; padding: 4px; mix-blend-mode: multiply; }
.rehber-urun span { display: grid; line-height: 1.3; }
.rehber-urun b { font: 500 1.1rem var(--serif); }
.rehber-urun small { color: var(--ikincil); font-size: .8125rem; }
.rehber-urunler { display: grid; gap: 10px; }
.rehber-gorseller { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rehber-gorseller figure { margin: 0; display: grid; gap: 8px; }
.rehber-gorseller img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 8%; border-radius: var(--r); background: var(--zemin); mix-blend-mode: multiply; }
.rehber-gorseller figcaption { font-size: .8125rem; color: var(--soluk); text-align: center; }
.rehber-adimlar { list-style: none; padding: 0 !important; counter-reset: adim; display: grid; gap: 12px; }
.rehber-adimlar li { counter-increment: adim; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: start; }
.rehber-adimlar li::before { content: counter(adim); grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bordo); color: var(--kagit); font: 600 1rem var(--sans); }
.rehber-adimlar b { font-weight: 600; }
.rehber-adimlar span { color: var(--ikincil); }
.rehber-modeller { display: grid; gap: 14px; }
.rehber-model { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; padding: 14px; border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--kagit); }
.rehber-model-gorsel img { width: 96px; height: 96px; border-radius: 14px; background: var(--zemin); object-fit: contain; padding: 6px; mix-blend-mode: multiply; }
.rehber-model h3 { font-size: 1.35rem; }
.rehber-model h3 a { color: var(--murekkep) !important; text-decoration: none !important; }
.rehber-model p { font-size: .9375rem; line-height: 1.55; margin-top: 4px !important; }
.rehber-model-anlam { color: var(--bordo); font-weight: 600; }
.rehber-model-renk { color: var(--soluk); font-size: .875rem !important; }
.rehber-diger { display: grid; gap: 14px; justify-items: start; padding: 24px; border-radius: var(--r-lg); background: var(--kagit-2); border: 1px solid var(--cizgi); }
.rehber-diger h2 { font-size: var(--t-h3); }
.rehber-diger ul { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; }
.rehber-diger a:not(.btn) { color: var(--bordo); }
.rehber-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.rehber-kart { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--cizgi); border-radius: var(--r-lg); overflow: hidden; background: var(--kagit); color: var(--murekkep); text-decoration: none; transition: transform var(--hiz-orta) var(--yay), box-shadow var(--hiz-orta) var(--yay); }
.rehber-kart:hover { transform: translateY(-4px); box-shadow: var(--golge); }
.rehber-kart-gorsel { aspect-ratio: 16 / 10; background: var(--zemin); position: relative; }
.rehber-kart-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; transition: transform var(--hiz-yavas) var(--yay); }
.rehber-kart:hover .rehber-kart-gorsel img { transform: scale(1.05); }
.rehber-kart-yazi { display: grid; gap: 8px; align-content: start; padding: 18px 20px 22px; }
.rehber-kart-yazi b { font: 500 1.25rem/1.25 var(--serif); }
.rehber-kart-yazi small { color: var(--ikincil); font-size: .875rem; line-height: 1.5; }
.rehber-kart-git { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--bordo); font-weight: 600; font-size: .875rem; }
.sss-rehber { font-size: .9375rem; color: var(--ikincil); }
.sss-rehber a, .urun-rehber a { color: var(--bordo); text-decoration: underline; text-underline-offset: 3px; }
.urun-rehber { font-size: .875rem; color: var(--ikincil); }
@media (prefers-reduced-motion: reduce) { .rehber-urun, .rehber-kart, .rehber-kart-gorsel img { transition: none; } }
.ozet > .ipucu { margin: 0; text-align: center; }
.ozet .btn-buyuk { padding: 0 1.15rem; white-space: nowrap; }
.ozet .btn-buyuk .btn-tutar { padding-left: .6rem; }
@media (max-width: 380px) { .ozet .btn-buyuk { font-size: .9375rem; } }