/* Yangın Önleyici · vitrin (V3, kurumsal). Kurallar: docs/tasarim-sistemi.md.
   Ana renk kırmızı, yan renk sarı, nötrler soğuk gri. Renk ve boşluk yalnız token'dan gelir. */

:root {
  --beyaz: #ffffff;
  --gri-50: #f5f7f9;
  --gri-100: #eceff3;
  --cizgi: #e2e6eb;
  --cizgi-koyu: #c7ced6;
  --murekkep: #0f1318;
  --grafit: #1a2028;
  --grafit-2: #252d37;
  --metin: #0f1318;
  --metin-yumusak: #3a434e;
  --metin-soluk: #5a6470;
  --kirmizi: #c8102e;
  --kirmizi-koyu: #a00d25;
  --kirmizi-acik: #fdeef0;
  --sari: #ffc72c;
  --sari-koyu: #f0b400;
  --sari-acik: #fff6d9;
  --yesil: #0b6b3a;
  --mavi: #1558c0;

  --baslik: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --govde: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-h1: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);
  --t-h2: clamp(1.625rem, 1.33rem + 1.25vw, 2.5rem);
  --t-h3: clamp(1.125rem, 1.08rem + 0.2vw, 1.3125rem);
  --t-spot: clamp(1.0625rem, 1.03rem + 0.19vw, 1.1875rem);
  --t-etiket: .875rem;
  --t-dipnot: .8125rem;
  --t-fiyat: clamp(1.875rem, 1.7rem + 0.7vw, 2.375rem);

  --b1: .25rem; --b2: .5rem; --b3: .75rem; --b4: 1rem; --b5: 1.25rem; --b6: 1.5rem; --b8: 2rem; --b10: 2.5rem; --b12: 3rem; --b16: 4rem;
  --bolum-y: 3rem;
  --bas-ara: 1.75rem;
  --yigin: .75rem;
  --dokun: 2.75rem;
  --ust: 4rem;
  --azami: 76rem;
  --kenar: clamp(1.125rem, 4vw, 2.5rem);

  /* Köşe ölçeği: sm etiket/rozet · md düğme ve form alanı · lg kart içi kutu, seçenek, küçük görsel · xl kart ve büyük görsel · tam hap.
     İç içe: içteki köşe = dıştaki köşe − aradaki boşluk (calc ile), böylece iki eğri eş merkezli kalır. */
  --r-sm: .25rem; --r-md: .5rem; --r-lg: .75rem; --r-xl: 1rem; --r-tam: 999px;
  --golge-sm: 0 1px 2px rgba(15, 19, 24, .06), 0 .375rem 1rem rgba(15, 19, 24, .06);
  --golge-md: 0 .25rem .75rem rgba(15, 19, 24, .08), 0 1.25rem 3rem rgba(15, 19, 24, .14);
  --golge-cta: 0 .5rem 1.25rem rgba(200, 16, 46, .26);
  --yay: cubic-bezier(.22, 1, .36, 1);

  /* Seçim bileşeni */
  --sc-kose: var(--r-md); --sc-vurgu: var(--murekkep); --sc-secili: var(--kirmizi); --sc-hata: var(--kirmizi); --sc-cizgi: var(--cizgi-koyu);
}
@media (min-width: 750px) { :root { --bolum-y: 5.5rem; --bas-ara: 2.5rem; --ust: 4.5rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; interpolate-size: allow-keywords; }
[id] { scroll-margin-top: calc(var(--ust) + .75rem); }
body { margin: 0; background: var(--beyaz); color: var(--metin); font: 400 1rem/1.6 var(--govde); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
main { overflow: clip; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--kirmizi); color: #fff; }
:focus-visible { outline: .1875rem solid var(--mavi); outline-offset: .125rem; border-radius: var(--r-sm); }

h1, h2, h3, h4 { font-family: var(--baslik); font-weight: 700; color: inherit; text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: 1.1; letter-spacing: -.025em; }
h2 { font-size: var(--t-h2); line-height: 1.12; letter-spacing: -.025em; }
h3 { font-size: var(--t-h3); line-height: 1.3; letter-spacing: -.012em; }
h4 { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -.01em; }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ikon { flex: none; }
.mono { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .01em; }

.kap { width: min(100%, var(--azami)); margin-inline: auto; padding-inline: var(--kenar); }
.kap.dar { max-width: 54rem; }
.kap.cok-dar { max-width: 31rem; padding-block: var(--b12); }
.atla { position: absolute; left: -999px; top: 0; background: var(--murekkep); color: #fff; padding: var(--b3) var(--b4); z-index: 100; }
.atla:focus { left: 0; }

/* Sayfa kaydırma göstergesi (destekleyen tarayıcıda) */
.ilerleme { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: var(--kirmizi); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
@supports (animation-timeline: scroll()) { .ilerleme { animation: ilerle linear both; animation-timeline: scroll(root); } }
@keyframes ilerle { to { transform: scaleX(1); } }

/* ---------- ortak parçalar ---------- */
.ust-yazi { display: inline-flex; align-items: center; gap: var(--b2); margin-bottom: var(--b3); color: var(--kirmizi); font-size: .8125rem; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; }
.ust-yazi::before { content: ''; width: 1.5rem; height: 2px; background: currentColor; }
.spot { color: var(--metin-yumusak); font-size: var(--t-spot); line-height: 1.6; max-width: 40rem; }
.bolum { padding-block: var(--bolum-y); }
.bolum-gri { background: var(--gri-50); }
.bolum-koyu { background: var(--murekkep); color: #fff; }
.bolum-kirmizi { background: var(--kirmizi); color: #fff; }
.bolum-koyu .ust-yazi, .bolum-kirmizi .ust-yazi { color: var(--sari); }
.bolum-koyu .spot { color: rgba(255, 255, 255, .78); }
.bolum-kirmizi .spot { color: rgba(255, 255, 255, .92); }
.bolum-bas { margin-bottom: var(--bas-ara); max-width: 44rem; }
.bolum-bas h2 + .spot { margin-top: var(--b4); }
.kap.bolum-bas { max-width: none; }
.kap.bolum-bas > * { max-width: 44rem; }
.bolum-bas.orta { text-align: center; margin-inline: auto; }
.bolum-bas.orta .ust-yazi::before { display: none; }
.bolum-bas.orta .spot { margin-inline: auto; }
.bolum-cta { margin-top: var(--bas-ara); display: flex; flex-wrap: wrap; gap: var(--b3); justify-content: center; }
.ikili { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--b8); }
@media (min-width: 990px) { .ikili { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b16); align-items: center; } .ikili.ust-hizali { align-items: start; } }
.toptan-metin { display: grid; gap: var(--b4); align-content: center; }
.toptan-metin .tik-liste { margin-top: var(--b2); }

/* Düğmeler */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--b2); min-height: 3.25rem; padding: .75rem 1.5rem; border: 1.5px solid var(--kirmizi); border-radius: var(--r-md); background: var(--kirmizi); box-shadow: var(--golge-cta); color: #fff; font: 600 1.0625rem/1.2 var(--baslik); letter-spacing: -.005em; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, transform .2s var(--yay), box-shadow .2s ease; }
.btn:hover { background: var(--kirmizi-koyu); border-color: var(--kirmizi-koyu); transform: translateY(-2px); box-shadow: 0 .75rem 1.75rem rgba(200, 16, 46, .32); }
.btn:active { transform: translateY(0) scale(.985); }
.btn .ikon { transition: transform .25s var(--yay); }
.btn:hover .ikon-ok { transform: translateX(4px); }
.btn-tam { width: 100%; }
.btn-sari { background: var(--sari); border-color: var(--sari); color: var(--murekkep); box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .18); }
.btn-sari:hover { background: var(--sari-koyu); border-color: var(--sari-koyu); box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, .24); }
.btn-siyah { background: var(--murekkep); border-color: var(--murekkep); box-shadow: none; }
.btn-siyah:hover { background: var(--grafit-2); border-color: var(--grafit-2); box-shadow: var(--golge-sm); }
.btn-cizgi { background: transparent; border-color: var(--cizgi-koyu); box-shadow: none; color: inherit; }
.btn-cizgi:hover { background: var(--gri-50); border-color: var(--murekkep); box-shadow: none; }
.bolum-koyu .btn-cizgi, .alt .btn-cizgi, .bolum-kirmizi .btn-cizgi { border-color: rgba(255, 255, 255, .4); }
.bolum-koyu .btn-cizgi:hover, .alt .btn-cizgi:hover, .bolum-kirmizi .btn-cizgi:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.btn-kucuk { min-height: var(--dokun); padding: .5rem 1.1rem; font-size: .9375rem; box-shadow: none; }
.btn-wa { background: var(--yesil); border-color: var(--yesil); box-shadow: none; }
.btn-wa:hover { background: #08522c; border-color: #08522c; box-shadow: none; }
.btn[aria-busy="true"] { background: var(--cizgi-koyu); border-color: var(--cizgi-koyu); box-shadow: none; pointer-events: none; color: var(--metin-yumusak); }
.baglanti { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: .2em; text-align: left; }
.ok-baglanti { display: inline-flex; align-items: center; gap: .4rem; min-height: var(--dokun); font-weight: 600; text-decoration: none; color: var(--kirmizi); }
.ok-baglanti .ikon { transition: transform .25s var(--yay); }
.ok-baglanti:hover .ikon { transform: translateX(4px); }

/* ---------- üst bilgi şeridi ---------- */
.ustbar { background: var(--murekkep); color: rgba(255, 255, 255, .9); font-size: .8125rem; font-weight: 500; }
.ustbar .kap { display: flex; align-items: center; gap: var(--b4); min-height: 2.25rem; }
.ustbar-serit { position: relative; flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent); }
.ustbar-iz { display: flex; width: max-content; animation: serit-kay calc(var(--n) * 5s) linear infinite; }
.ustbar-iz ul { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.ustbar-iz li { display: inline-flex; align-items: center; gap: .45rem; padding-inline: 1.25rem; min-height: 2.25rem; white-space: nowrap; }
.ustbar-iz li::after { content: ''; width: .25rem; height: .25rem; margin-left: 1.25rem; margin-right: -1.5rem; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.ustbar-iz .ikon { color: var(--sari); }
.ustbar-serit:hover .ustbar-iz, .ustbar.durdu .ustbar-iz { animation-play-state: paused; }
@keyframes serit-kay { to { transform: translateX(-50%); } }
.ustbar-dur { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border: 0; border-radius: var(--r-md); background: transparent; color: rgba(255, 255, 255, .72); transition: color .16s ease, background-color .16s ease; }
.ustbar-dur:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.ustbar-dur .oynat, .ustbar.durdu .ustbar-dur .dur { display: none; }
.ustbar.durdu .ustbar-dur .oynat { display: block; }
.ustbar-sag { display: none; align-items: center; gap: var(--b5); }
.ustbar-sag a { color: #fff; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; transition: color .16s ease; }
.ustbar-sag a:hover { color: var(--sari); }
@media (min-width: 990px) {
  .ustbar-sag { display: flex; }
}

/* ---------- üst çubuk ---------- */
.ust { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; }
.ust.kaydi { border-color: var(--cizgi); box-shadow: 0 .25rem 1.25rem rgba(15, 19, 24, .06); }
.ust-ic { display: grid; grid-template-columns: var(--dokun) minmax(0, 1fr) auto; align-items: center; gap: var(--b2); height: var(--ust); }
.ust-dugme { width: var(--dokun); height: var(--dokun); display: grid; place-items: center; background: none; border: 0; border-radius: var(--r-md); color: var(--murekkep); text-decoration: none; transition: background-color .16s ease; }
.ust-dugme:hover { background: var(--gri-100); }
.logo { justify-self: start; min-width: 0; display: inline-flex; align-items: center; gap: .55rem; font: 800 1.1875rem/1 var(--baslik); letter-spacing: -.02em; color: var(--murekkep); text-decoration: none; white-space: nowrap; }
.logo i { width: 2rem; height: 2rem; display: block; flex: none; }
.logo i svg { width: 100%; height: 100%; display: block; }
.logo b { font-weight: 800; color: var(--kirmizi); }
.logo img { height: 2.125rem; width: auto; display: block; }
.ust-nav { display: none; }
.ust-sag { display: flex; justify-content: flex-end; align-items: center; gap: var(--b2); }
.ust-sag .ust-toptan { display: none; }
.ust-sag .btn { min-height: 2.5rem; padding-inline: .875rem; }
@media (max-width: 379px) { .logo { font-size: 1rem; gap: .4rem; } .logo img { height: 1.5rem; } .ust-sag .btn { padding-inline: .7rem; font-size: .875rem; } }
.guvenli { grid-column: 2 / 4; justify-self: end; display: inline-flex; align-items: center; gap: .4rem; font-size: var(--t-etiket); font-weight: 600; color: var(--metin-yumusak); }
.ust-sade .ust-ic { grid-template-columns: auto 1fr; }
.ust-sade .logo { justify-self: start; }
@media (min-width: 990px) {
  .ust-ic { grid-template-columns: auto 1fr auto; gap: var(--b8); }
  .ust-menu { display: none; }
  .logo { justify-self: start; }
  .ust-nav { display: flex; gap: var(--b6); justify-content: center; }
  .ust-nav a { position: relative; color: var(--metin-yumusak); text-decoration: none; font-weight: 500; font-size: .9375rem; padding: var(--b2) 0; transition: color .16s ease; }
  .ust-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--kirmizi); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--yay); }
  .ust-nav a:hover { color: var(--murekkep); }
  .ust-nav a:hover::after { transform: scaleX(1); }
  .ust-sag .ust-toptan { display: inline-flex; }
  .ust-sag .btn { min-height: var(--dokun); padding-inline: 1.1rem; }
}
.cekmece { width: min(22rem, 88vw); height: 100dvh; max-height: none; margin: 0; padding: var(--b5); border: 0; background: var(--beyaz); color: var(--metin); box-shadow: var(--golge-md); transition: transform .32s var(--yay), opacity .2s ease, overlay .32s allow-discrete, display .32s allow-discrete; transform: translateX(-100%); opacity: 0; }
.cekmece[open] { transform: none; opacity: 1; }
@starting-style { .cekmece[open] { transform: translateX(-100%); opacity: 0; } }
.cekmece::backdrop { background: rgba(15, 19, 24, .6); }
.cekmece nav { display: grid; margin-top: var(--b10); }
.cekmece nav a span { display: inline-flex; align-items: center; gap: .6rem; }
.cekmece nav a { display: flex; align-items: center; min-height: 3.25rem; border-bottom: 1px solid var(--cizgi); font: 600 1.125rem/1.2 var(--baslik); text-decoration: none; }
.cekmece .btn { margin-top: var(--b4); }

/* ---------- ürün: galeri + satın alma kutusu ---------- */
.urun { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--b5); padding-bottom: var(--bolum-y); }
.galeri { min-width: 0; margin-inline: calc(var(--kenar) * -1); }
.galeri-ana { position: relative; aspect-ratio: 1 / 1; background: var(--gri-50); overflow: hidden; }
.galeri-ana img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity .45s ease, transform .9s var(--yay); }
.galeri-ana img.goster { opacity: 1; transform: none; }
.galeri-ana .slot { position: absolute; inset: 0; border-radius: 0; border: 0; }
.galeri-sayac { position: absolute; top: var(--b4); right: var(--b4); z-index: 2; padding: .3rem .75rem; border-radius: var(--r-tam); background: rgba(15, 19, 24, .72); color: #fff; font-size: var(--t-etiket); font-weight: 600; font-variant-numeric: tabular-nums; }
.galeri-rozet { position: absolute; left: var(--b4); bottom: var(--b4); z-index: 2; padding: .4rem .7rem; border-radius: var(--r-sm); background: var(--sari); color: var(--murekkep); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.galeri-ana:has(img) { cursor: zoom-in; }
.galeri-buyut { position: absolute; right: var(--b4); bottom: var(--b4); z-index: 2; width: var(--dokun); height: var(--dokun); display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--murekkep); box-shadow: var(--golge-sm); transition: transform .2s var(--yay); }
.galeri-buyut:hover { transform: scale(1.08); }
.galeri-kucuk { display: flex; gap: var(--b2); padding: var(--b2) var(--kenar) 0; overflow-x: auto; scrollbar-width: none; }
.galeri-kucuk button, .slot.slot-kucuk { flex: none; width: 4rem; height: auto; aspect-ratio: 1; padding: 0; border: 1.5px solid transparent; border-radius: var(--r-md); overflow: hidden; background: var(--gri-50); position: relative; transition: border-color .16s ease, opacity .16s ease; }
.galeri-kucuk button { opacity: .65; }
.galeri-kucuk button:hover, .galeri-kucuk button[aria-current] { opacity: 1; }
.galeri-kucuk button img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.galeri-kucuk button[aria-current] { border-color: var(--murekkep); }
.slot.slot-kucuk { border: 1px dashed var(--cizgi-koyu); }

.kutu { min-width: 0; display: grid; gap: var(--b5); align-content: start; }
.kutu-bas { display: grid; gap: var(--b3); }
.kutu-bas .ust-yazi { margin: 0; }
.puan { display: inline-flex; align-items: center; gap: var(--b2); font-weight: 600; font-size: .9375rem; text-decoration: none; }
.yildiz { color: #e09a00; letter-spacing: .12em; }
.kanca { color: var(--metin-yumusak); font-size: var(--t-spot); }
.faydalar { display: grid; gap: var(--b3); }
.faydalar li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--b3); line-height: 1.45; color: var(--metin-yumusak); }
.faydalar .ikon { color: var(--kirmizi); margin-top: .1rem; }
.faydalar b { color: var(--metin); font-weight: 600; }
@media (min-width: 990px) {
  .urun { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--b12); padding-top: var(--b6); align-items: start; }
  .galeri { margin-inline: 0; position: sticky; top: calc(var(--ust) + var(--b5)); }
  .galeri-ana { border-radius: var(--r-xl); }
  .galeri-kucuk { padding-inline: 0; padding-top: var(--b3); gap: var(--b3); }
  .galeri-kucuk button, .slot.slot-kucuk { width: 5.25rem; }
  .kutu { gap: var(--b5); }
  .faydalar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b3) var(--b5); }
  .faydalar li { font-size: .9375rem; gap: var(--b2); }
}

/* Alım türü sekmeleri: bireysel / proje ve toptan */
.alim { border: 1px solid var(--cizgi); border-radius: var(--r-xl); background: var(--beyaz); box-shadow: var(--golge-sm); overflow: hidden; }
.sekmeler { --sekme-r: calc(var(--r-xl) - .25rem); position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--gri-100); padding: .25rem; gap: .25rem; }
.sekme { position: relative; z-index: 1; min-height: var(--dokun); padding: .5rem; border: 0; border-radius: var(--sekme-r); background: none; font: 600 .9375rem/1.2 var(--baslik); color: var(--metin-soluk); transition: color .2s ease; }
.sekme[aria-selected="true"] { color: var(--murekkep); }
.sekmeler::before { content: ''; position: absolute; top: .25rem; bottom: .25rem; left: .25rem; width: calc(50% - .375rem); border-radius: var(--sekme-r); background: var(--beyaz); box-shadow: 0 1px 3px rgba(15, 19, 24, .14); transition: transform .32s var(--yay); }
.sekmeler:has(.sekme:last-child[aria-selected="true"])::before { transform: translateX(calc(100% + .25rem)); }
.alim-panel { display: grid; gap: var(--b4); padding: var(--b5) var(--b4); animation: panel-gir .32s var(--yay); }
@keyframes panel-gir { from { opacity: 0; transform: translateY(.5rem); } }
@media (min-width: 480px) { .alim-panel { padding: var(--b5); } }
.alim-panel h3 { font-size: 1.125rem; }
.alim-panel > p { color: var(--metin-yumusak); font-size: .9375rem; }
.fiyat-satir { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--b1) var(--b3); }
.fiyat-satir strong { font: 700 var(--t-fiyat)/1 var(--baslik); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.fiyat-satir span { color: var(--yesil); font-weight: 600; font-size: .9375rem; }

.satinal { display: grid; gap: var(--yigin); }
.paketler { display: grid; gap: var(--b3); }
.paket { position: relative; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; align-items: center; gap: .25rem .75rem; padding: .875rem 1rem; border: 1.5px solid var(--cizgi-koyu); border-radius: var(--r-lg); background: var(--beyaz); cursor: pointer; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.paket:hover { border-color: var(--metin-soluk); }
.paket input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.paket-isaret { width: 1.375rem; height: 1.375rem; border: 1.5px solid var(--cizgi-koyu); border-radius: 50%; display: grid; place-items: center; background: #fff; transition: border-color .18s ease, background-color .18s ease; }
.paket-isaret::after { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .28s var(--yay); }
.paket:has(input:checked) { border-color: var(--kirmizi); background: var(--kirmizi-acik); box-shadow: 0 0 0 1px var(--kirmizi); }
.paket:has(input:checked) .paket-isaret { border-color: var(--kirmizi); background: var(--kirmizi); }
.paket:has(input:checked) .paket-isaret::after { transform: scale(1); }
.paket:has(input:focus-visible) { outline: .1875rem solid var(--mavi); outline-offset: .125rem; }
.paket-metin { display: grid; gap: .1rem; min-width: 0; }
.paket-ad { font: 600 1rem/1.3 var(--baslik); }
.paket-not { color: var(--metin-yumusak); font-size: var(--t-dipnot); line-height: 1.35; }
.paket-fiyat { font: 700 1.1875rem/1.2 var(--baslik); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.paket-fiyat small { display: block; font: 500 var(--t-dipnot)/1.3 var(--govde); color: var(--metin-yumusak); }
.paket-hesap { grid-column: 1 / -1; margin-top: .375rem; padding: .4rem .625rem; border-radius: var(--r-sm); background: var(--sari-acik); color: var(--murekkep); font-size: var(--t-dipnot); line-height: 1.35; }
.paket-hesap b { font-weight: 700; }
.paket-rozet { position: absolute; top: -.6875rem; right: .875rem; padding: .2rem .55rem; border-radius: var(--r-sm); background: var(--sari); color: var(--murekkep); font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.odeme-not { font-size: var(--t-dipnot); color: var(--metin-yumusak); text-align: center; }

.adet-cipler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b2); }
.adet-cip { position: relative; display: grid; place-items: center; min-height: 3rem; padding: .5rem; border: 1.5px solid var(--cizgi-koyu); border-radius: var(--r-md); font: 600 .9375rem/1.2 var(--baslik); font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .18s ease, background-color .18s ease, color .18s ease; }
.adet-cip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.adet-cip:hover { border-color: var(--metin-soluk); }
.adet-cip:has(input:checked) { border-color: var(--murekkep); background: var(--murekkep); color: #fff; }
.adet-cip:has(input:focus-visible) { outline: .1875rem solid var(--mavi); outline-offset: .125rem; }
.tik-liste { display: grid; gap: var(--b2); }
.tik-liste li { display: grid; grid-template-columns: 1.375rem minmax(0, 1fr); gap: var(--b2); line-height: 1.45; }
.tik-liste .ikon { color: var(--kirmizi); margin-top: .15rem; }
.bolum-koyu .tik-liste .ikon { color: var(--sari); }

.guven-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b4); }
.guven-izgara li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--b2); align-items: start; font-size: var(--t-dipnot); line-height: 1.35; color: var(--metin-yumusak); }
.guven-izgara .ikon { color: var(--murekkep); }
.guven-izgara b { display: block; color: var(--metin); font-weight: 600; font-size: .875rem; }
.wa-satir { display: flex; align-items: center; gap: var(--b3); padding: var(--b3) var(--b4); border: 1px solid var(--cizgi); border-radius: var(--r-lg); text-decoration: none; transition: border-color .18s ease, background-color .18s ease; }
.wa-satir:hover { border-color: var(--yesil); background: #f2faf5; }
.wa-satir > .ikon { color: #17964d; }
.wa-satir span { display: grid; line-height: 1.3; }
.wa-satir b { font-weight: 600; }
.wa-satir small { color: var(--metin-yumusak); font-size: var(--t-etiket); font-variant-numeric: tabular-nums; }

/* Sipariş bilgileri: açılır kapanır değil, hep görünür üç satır */
.bilgiler { display: grid; border: 1px solid var(--cizgi); border-radius: var(--r-lg); background: var(--gri-50); }
.bilgiler li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--b3); padding: var(--b4); font-size: .9375rem; line-height: 1.5; color: var(--metin-yumusak); }
.bilgiler li + li { border-top: 1px solid var(--cizgi); }
.bilgiler .ikon { color: var(--murekkep); margin-top: .1rem; }
.bilgiler b { display: block; color: var(--metin); font-weight: 600; }
.bilgiler a { color: var(--mavi); }

/* Akordeon */
.akordeon details { border-top: 1px solid var(--cizgi); }
.akordeon details:last-child { border-bottom: 1px solid var(--cizgi); }
.akordeon summary { display: flex; align-items: center; gap: var(--b3); min-height: 3.5rem; padding: var(--b3) 0; font: 600 1.0625rem/1.3 var(--baslik); cursor: pointer; list-style: none; transition: color .16s ease; }
.akordeon summary:hover { color: var(--kirmizi); }
.akordeon summary::-webkit-details-marker { display: none; }
.akordeon summary > .ikon:first-child { color: var(--metin-soluk); }
.akordeon summary > .ikon:last-child { margin-left: auto; transition: transform .3s var(--yay); }
.akordeon details[open] summary > .ikon:last-child { transform: rotate(45deg); }
.akordeon details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size .36s var(--yay), opacity .25s ease, content-visibility .36s allow-discrete; }
.akordeon details[open]::details-content { block-size: auto; opacity: 1; }
.akordeon .ic { padding-bottom: var(--b5); color: var(--metin-yumusak); max-width: 44rem; display: grid; gap: var(--b2); }
.akordeon .ic a { color: var(--mavi); }
.sss summary { font-size: var(--t-h3); min-height: 4rem; }
.sss details[open] summary > .ikon:last-child { transform: rotate(180deg); }

/* Yer tutucu (yalnız taslak modunda) */
.slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--b2); width: 100%; height: 100%; background: var(--gri-50); border: 1.5px dashed var(--cizgi-koyu); border-radius: var(--r-xl); color: var(--metin-soluk); font-size: var(--t-dipnot); font-weight: 600; text-align: center; padding: var(--b3); }
.bolum-koyu .slot { background: var(--grafit); border-color: rgba(255, 255, 255, .26); color: rgba(255, 255, 255, .7); }
.bolum-gri .slot { background: var(--beyaz); }

/* ---------- rakamlar şeridi ---------- */
.rakamlar { background: var(--murekkep); color: #fff; }
.rakamlar ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rakamlar li { padding: var(--b6) var(--b4) var(--b6) 0; display: grid; gap: .35rem; align-content: start; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.rakamlar li:nth-child(even) { padding-left: var(--b5); border-left: 1px solid rgba(255, 255, 255, .12); }
.rakamlar li:nth-last-child(-n+2) { border-bottom: 0; }
.rakamlar b { font: 700 clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem)/1 var(--baslik); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rakamlar b small { font-size: .5em; font-weight: 600; letter-spacing: 0; color: var(--sari); margin-left: .15em; }
.rakamlar li > span { font-size: var(--t-etiket); color: rgba(255, 255, 255, .72); line-height: 1.4; }
@media (min-width: 750px) {
  .rakamlar ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rakamlar li, .rakamlar li:nth-child(even) { padding: var(--b10) var(--b6); border-bottom: 0; border-left: 1px solid rgba(255, 255, 255, .12); }
  .rakamlar li:first-child { padding-left: 0; border-left: 0; }
}

/* ---------- risk ---------- */
.nedenler { display: grid; gap: var(--b3); }
.neden { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .15rem var(--b4); padding: var(--b5); border: 1px solid var(--cizgi); border-radius: var(--r-lg); background: var(--beyaz); transition: border-color .2s ease, box-shadow .2s ease, transform .25s var(--yay); }
.neden:hover { border-color: var(--cizgi-koyu); box-shadow: var(--golge-sm); transform: translateY(-2px); }
.neden-ikon { grid-row: 1 / 3; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: var(--r-md); background: var(--kirmizi-acik); color: var(--kirmizi); }
.neden p { grid-column: 2; color: var(--metin-yumusak); font-size: .9375rem; line-height: 1.5; }

/* ---------- nasıl çalışır: canlı şema ---------- */
.sema { position: relative; border-radius: var(--r-xl); background: var(--murekkep); color: #fff; padding: var(--b5); overflow: hidden; }
.sema svg { width: 100%; height: auto; }
.sema-derece { position: absolute; top: var(--b5); right: var(--b5); display: grid; justify-items: end; line-height: 1; }
.sema-derece b { font: 700 2rem/1 var(--baslik); letter-spacing: -.03em; font-variant-numeric: tabular-nums; transition: color .4s ease; }
.sema-derece > span { margin-top: .3rem; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .64); }
.sema[data-faz="2"] .sema-derece b { color: var(--sari); }
.sema .s-pano { fill: #161c24; stroke: rgba(255, 255, 255, .22); stroke-width: 2; }
.sema .s-ray { fill: rgba(255, 255, 255, .16); }
.sema .s-sigorta { fill: #2b3542; stroke: rgba(255, 255, 255, .18); }
.sema .s-mandal { fill: rgba(255, 255, 255, .5); }
.sema .s-cihaz { fill: var(--kirmizi); }
.sema .s-cihaz-ust { fill: #e8344e; }
.sema .s-kordon { fill: none; stroke: #6aa6ff; stroke-width: 3; stroke-linecap: round; transition: stroke .5s ease; }
.sema .s-isi { fill: url(#isi); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity .8s ease, transform 1.6s var(--yay); }
.sema .s-alev { fill: var(--sari); opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transform: scale(.3); transition: opacity .4s ease, transform .6s var(--yay); }
.sema .s-duman circle { fill: rgba(255, 255, 255, .55); opacity: 0; transform-box: fill-box; transform-origin: center; }
.sema[data-faz="1"] .s-isi, .sema[data-faz="2"] .s-isi { opacity: 1; transform: scale(1); }
.sema[data-faz="1"] .s-alev { opacity: .9; transform: scale(.7); }
.sema[data-faz="2"] .s-alev { opacity: 1; transform: scale(1.15); }
.sema[data-faz="2"] .s-kordon, .sema[data-faz="3"] .s-kordon { stroke: var(--sari); }
.sema[data-faz="2"] .s-kordon { stroke-dasharray: 6 5; animation: kordon .5s linear infinite; }
.sema[data-faz="3"] .s-duman circle { animation: yayil 2.8s var(--yay) both; animation-delay: calc(var(--d) * 90ms); }
.sema[data-faz="3"] .s-isi { opacity: 0; transform: scale(.2); }
.sema[data-faz="3"] .s-alev { opacity: 0; transform: scale(0); }
@keyframes kordon { to { stroke-dashoffset: -11; } }
@keyframes yayil { 0% { opacity: 0; transform: translate(0, 0) scale(.2); } 25% { opacity: .8; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(var(--s)); } }
.sema-durum { display: flex; align-items: center; gap: var(--b2); margin-top: var(--b3); font-size: var(--t-etiket); font-weight: 600; color: rgba(255, 255, 255, .86); min-height: 1.5rem; }
.sema-durum i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--sari); animation: nabiz 1.2s ease-in-out infinite; }
.sema[data-faz="3"] .sema-durum i { background: #43d18a; animation: none; }
@keyframes nabiz { 50% { opacity: .35; transform: scale(.7); } }

.fazlar { display: grid; gap: var(--b3); }
.faz { position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: .2rem var(--b4); width: 100%; padding: var(--b5); border: 1px solid var(--cizgi); border-radius: var(--r-lg); background: var(--beyaz); text-align: left; overflow: hidden; cursor: pointer; transition: border-color .25s ease, box-shadow .25s ease, opacity .25s ease; }
.faz .no { grid-row: 1 / 3; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: var(--r-md); background: var(--gri-100); font: 700 1rem/1 var(--baslik); font-variant-numeric: tabular-nums; transition: background-color .25s ease, color .25s ease; }
.faz b { font: 600 1.0625rem/1.3 var(--baslik); }
.faz span:last-child { grid-column: 2; color: var(--metin-yumusak); font-size: .9375rem; line-height: 1.5; }
.faz::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--kirmizi); transform: scaleX(0); transform-origin: left; }
.fazlar[data-oynuyor] .faz:not(.etkin) { opacity: .6; }
.faz.etkin { border-color: var(--kirmizi); box-shadow: var(--golge-sm); }
.faz.etkin .no { background: var(--kirmizi); color: #fff; }
.fazlar[data-oynuyor] .faz.etkin::after { animation: faz-sure var(--sure, 3.4s) linear forwards; }
@keyframes faz-sure { to { transform: scaleX(1); } }

/* ---------- yatay raf ---------- */
.raf { display: flex; gap: var(--b3); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; padding-inline: var(--kenar); scroll-padding-inline: var(--kenar); }
.raf::-webkit-scrollbar, .galeri-kucuk::-webkit-scrollbar { display: none; }
.raf > * { flex: none; scroll-snap-align: start; }
.raf-kap { width: min(100%, var(--azami)); margin-inline: auto; }
@media (min-width: 990px) { .raf.raf-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--b5); overflow: visible; } }

.yorum-ozet { display: inline-flex; align-items: center; gap: var(--b2); margin-top: var(--b4); padding: .4rem .9rem; border: 1px solid var(--cizgi-koyu); border-radius: var(--r-tam); font-weight: 600; font-size: .9375rem; }
.yorum-ozet .ikon { color: #e09a00; }
.yorum { width: min(82vw, 22rem); display: grid; gap: var(--b4); align-content: space-between; padding: var(--b5); border-radius: var(--r-lg); background: var(--beyaz); border: 1px solid var(--cizgi); }
.yorum blockquote { color: var(--metin-yumusak); }
.yorum figcaption { display: flex; align-items: center; gap: var(--b3); padding-top: var(--b4); border-top: 1px solid var(--cizgi); font-weight: 600; }
.yorum figcaption i { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--kirmizi-acik); color: var(--kirmizi); font-style: normal; font-weight: 700; }
.yorum figcaption small { display: block; font-weight: 400; color: var(--metin-soluk); }

.an { width: min(72vw, 17.5rem); display: grid; gap: var(--b3); align-content: start; }
.an-gorsel { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden; background: var(--gri-50); }
.an-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--yay); }
.an:hover .an-gorsel img { transform: scale(1.04); }
.an-etiket { position: absolute; left: var(--b3); top: var(--b3); z-index: 2; padding: .3rem .6rem; border-radius: var(--r-sm); background: var(--beyaz); color: var(--murekkep); font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; box-shadow: var(--golge-sm); }
.an p { color: var(--metin-yumusak); font-size: .9375rem; line-height: 1.5; }
@media (min-width: 990px) { .an { width: auto; } }

.reel { position: relative; width: min(72vw, 17.5rem); aspect-ratio: 9 / 16; border-radius: var(--r-xl); overflow: hidden; background: var(--grafit); }
.reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.reel-etiket { position: absolute; top: var(--b3); left: var(--b3); z-index: 2; padding: .3rem .7rem; border-radius: var(--r-sm); background: var(--sari); color: var(--murekkep); font-size: var(--t-dipnot); font-weight: 700; }
/* Kayar video şeridi: masaüstünde dört video görünür, oklarla ya da kaydırarak ilerler. */
.kayar-ok { display: none; }
@media (min-width: 990px) {
  .raf-dortlu { gap: var(--b5); scroll-snap-type: x mandatory; scroll-behavior: smooth; }
  .raf-dortlu > .reel { width: calc((100% - 3 * var(--b5)) / 4); }
  .kayar { position: relative; padding-inline: var(--kenar); }
  .kayar .raf { padding-inline: 0; scroll-padding-inline: 0; }
  .kayar-ok { display: flex; gap: var(--b2); position: absolute; right: var(--kenar); top: calc(-1 * var(--bas-ara) - 3rem); }
  .kayar-ok button { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .28); color: #fff; background: transparent; cursor: pointer; transition: background-color .16s ease, border-color .16s ease, opacity .16s ease; }
  .kayar-ok button:hover:not(:disabled) { background: #fff; border-color: #fff; color: var(--murekkep); }
  .kayar-ok button:disabled { opacity: .32; cursor: default; }
  .kayar-ok button:focus-visible { outline: 2px solid var(--sari); outline-offset: 2px; }
}

/* ---------- kimler için ---------- */
.kitle { display: grid; gap: var(--b4); }
.kitle-kart { display: grid; gap: var(--b4); align-content: start; padding: var(--b6); border-radius: var(--r-xl); background: var(--beyaz); border: 1px solid var(--cizgi); transition: transform .3s var(--yay), box-shadow .3s ease; }
.kitle-kart:hover { transform: translateY(-4px); box-shadow: var(--golge-md); }
.kitle-kart p { color: var(--metin-yumusak); }
.kitle-kart.koyu { background: var(--murekkep); border-color: var(--murekkep); color: #fff; }
.kitle-kart.koyu .tik-liste .ikon { color: var(--sari); }
.kitle-kart.koyu p { color: rgba(255, 255, 255, .78); }
.kitle-rozet { justify-self: start; padding: .3rem .65rem; border-radius: var(--r-sm); background: var(--kirmizi-acik); color: var(--kirmizi); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.kitle-kart.koyu .kitle-rozet { background: var(--sari); color: var(--murekkep); }
.kitle-kart .btn { justify-self: start; margin-top: var(--b2); }
@media (min-width: 750px) { .kitle { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b6); } .kitle-kart { padding: var(--b10); } }

/* ---------- karşılaştırma ---------- */
.vs-sar { border: 1px solid var(--cizgi); border-radius: var(--r-xl); background: var(--beyaz); overflow: hidden; }
.vs { width: 100%; border-collapse: collapse; table-layout: fixed; }
.vs th, .vs td { padding: .875rem .375rem; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--cizgi); }
.vs thead th { font: 600 .8125rem/1.25 var(--baslik); vertical-align: bottom; padding-block: var(--b4) var(--b3); background: var(--gri-50); color: var(--metin-yumusak); hyphens: auto; }
.vs thead th:first-child { width: 42%; }
.vs thead .biz { background: var(--kirmizi); color: #fff; }
.vs tbody th { text-align: left; font: 600 .9375rem/1.3 var(--govde); padding-left: var(--b4); }
.vs .biz { background: var(--kirmizi-acik); }
.vs tbody tr:last-child > * { border-bottom: 0; }
.vs .ikon { margin-inline: auto; }
.vs .var { color: var(--yesil); }
.vs .biz .var { color: var(--kirmizi); }
.vs .yok { color: #8b95a1; }
@media (min-width: 750px) { .vs th, .vs td { padding: 1.1rem 1rem; } .vs tbody th { font-size: 1rem; padding-left: var(--b6); } .vs thead th { font-size: .9375rem; } }

/* ---------- montaj ---------- */
.adimlar { display: grid; gap: var(--b3); }
.adimlar li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .15rem var(--b4); align-items: center; padding: var(--b4) var(--b5); border-radius: var(--r-lg); background: var(--grafit); border: 1px solid rgba(255, 255, 255, .08); }
.adimlar .no { grid-row: 1 / 3; font: 700 1.5rem/1 var(--baslik); color: var(--sari); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.adimlar h3 { font-size: 1.0625rem; }
.adimlar p { grid-column: 2; color: rgba(255, 255, 255, .72); font-size: .9375rem; line-height: 1.45; }
.cipler { display: flex; flex-wrap: wrap; gap: var(--b2); }
.cip { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.25rem; padding: .25rem .8rem; border: 1px solid var(--cizgi-koyu); border-radius: var(--r-tam); font-size: var(--t-etiket); font-weight: 600; background: var(--beyaz); }
.uyumlu { margin-top: var(--b8); }
.uyumlu h3 { font-size: 1rem; margin-bottom: var(--b3); color: rgba(255, 255, 255, .72); font-weight: 600; }
.uyumlu .cip { border-color: rgba(255, 255, 255, .26); background: transparent; color: #fff; }
.uyumlu .cip .ikon { color: var(--sari); }
.medya-kart { aspect-ratio: 4 / 5; max-width: 26rem; width: 100%; margin-inline: auto; border-radius: var(--r-xl); overflow: hidden; position: relative; }
.medya-kart video, .medya-kart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- teknik veriler ---------- */
.teknik-tablo { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--cizgi); border-radius: var(--r-xl); overflow: hidden; background: var(--beyaz); }
.teknik-tablo > div { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--b3); padding: .8rem var(--b5); border-bottom: 1px solid var(--cizgi); font-size: .9375rem; transition: background-color .16s ease; }
.teknik-tablo > div:hover { background: var(--gri-50); }
.teknik-tablo dt { color: var(--metin-yumusak); }
.teknik-tablo dd { font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
@media (min-width: 750px) { .teknik-tablo { grid-template-columns: repeat(2, minmax(0, 1fr)); } .teknik-tablo > div:nth-child(odd) { border-right: 1px solid var(--cizgi); } }
.teknik-tablo { margin-bottom: -1px; }
.belge-not { display: flex; gap: var(--b3); align-items: flex-start; margin-top: var(--b5); padding: var(--b4) var(--b5); border-radius: var(--r-lg); background: var(--sari-acik); font-size: .9375rem; }

/* ---------- proje / toptan ---------- */
.proje-kart { display: grid; gap: var(--b5); padding: var(--b5); border-radius: var(--r-xl); background: var(--beyaz); color: var(--metin); box-shadow: var(--golge-md); }
@media (min-width: 620px) { .proje-kart { padding: var(--b8); } }
.proje-kart .sekmeler { border-radius: var(--r-lg); --sekme-r: calc(var(--r-lg) - .25rem); }
.proje-kart h3 { font-size: 1.1875rem; }
.hesap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b3); animation: panel-gir .32s var(--yay); }
.hesap.uclu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hesap-sonuc { display: grid; gap: var(--b3); padding: var(--b5); border-radius: var(--r-lg); background: var(--gri-50); border: 1px solid var(--cizgi); }
.hesap-sonuc p { font-size: var(--t-etiket); color: var(--metin-yumusak); line-height: 1.4; }
.hesap-adet { display: flex; align-items: baseline; gap: .5rem; font-weight: 600; color: var(--metin); }
.hesap-adet b { font: 700 2.75rem/1 var(--baslik); letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--kirmizi); }

/* ---------- kapanış ---------- */
.kapanis { text-align: center; }
.kapanis .spot { margin: var(--b4) auto var(--b6); }
.kapanis .bolum-cta { margin-top: 0; }
.kapanis .guven-not { margin-top: var(--b5); display: flex; gap: var(--b2); justify-content: center; align-items: flex-start; font-size: var(--t-etiket); color: rgba(255, 255, 255, .92); text-align: left; }

/* ---------- alt bilgi ---------- */
.alt { background: var(--murekkep); color: rgba(255, 255, 255, .74); padding-block: var(--b12) var(--b8); }
.alt .logo { color: #fff; margin-bottom: var(--b5); }
.alt .logo b { color: #ff6b81; }
.alt-ust { display: grid; gap: var(--b6); }
.alt-ust p { max-width: 28rem; }
.alt .akordeon { margin-top: var(--b6); }
.alt .akordeon details, .alt .akordeon details:last-child { border-color: rgba(255, 255, 255, .14); }
.alt .akordeon summary, .alt .akordeon summary:hover { color: #fff; font: 600 1rem/1.3 var(--govde); }
.alt .akordeon summary > .ikon:last-child { color: var(--sari); }
.alt .akordeon .ic { gap: 0; }
.alt .akordeon a, .alt .akordeon .baglanti { display: flex; align-items: center; min-height: var(--dokun); color: rgba(255, 255, 255, .74); text-decoration: none; transition: color .16s ease; }
.alt .akordeon a:hover, .alt .akordeon .baglanti:hover { color: #fff; }
.alt-dip { margin-top: var(--b6); padding-top: var(--b5); border-top: 1px solid rgba(255, 255, 255, .14); }
.alt-yasal { display: flex; flex-wrap: wrap; gap: 0 var(--b5); font-size: var(--t-etiket); }
.alt-yasal a, .alt-yasal .baglanti { display: inline-flex; align-items: center; min-height: var(--dokun); color: rgba(255, 255, 255, .62); text-decoration: none; }
.alt-yasal a:hover, .alt-yasal .baglanti:hover { color: #fff; }
.alt-kunye { margin-top: var(--b3); font-size: var(--t-etiket); color: rgba(255, 255, 255, .62); display: grid; gap: var(--b1); }
body.anasayfa .alt { padding-bottom: 6rem; }
@media (min-width: 990px) {
  body.anasayfa .alt { padding-bottom: var(--b8); }
  .alt-dip { display: flex; align-items: center; justify-content: space-between; gap: var(--b6); }
  .alt-dip .alt-kunye { margin-top: 0; text-align: right; }
  .alt-ust { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: var(--b16); }
  .alt .akordeon { margin-top: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--b8); }
  .alt .akordeon details, .alt .akordeon details:last-child { border: 0; }
  .alt .akordeon summary { pointer-events: none; min-height: 0; padding-top: 0; }
  .alt .akordeon summary > .ikon:last-child { display: none; }
}

/* ---------- sabit alt katmanlar ----------
   Telefonda yüzen koyu kapsül: kenardan boşluklu, ekranı kaplamaz; paket + fiyat solda, WhatsApp ve sipariş sağda. */
.yapiskan { position: fixed; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 45; display: flex; align-items: center; gap: var(--b2); padding: .375rem .375rem .375rem 1rem; border-radius: var(--r-xl); background: rgba(15, 19, 24, .94); backdrop-filter: blur(14px) saturate(1.3); color: #fff; box-shadow: 0 .75rem 2rem rgba(15, 19, 24, .32), 0 0 0 1px rgba(255, 255, 255, .08) inset; transform: translateY(calc(100% + 2rem)); opacity: 0; transition: transform .45s var(--yay), opacity .3s ease; }
.yapiskan.gorunur { transform: none; opacity: 1; }
.yapiskan-bilgi { position: relative; flex: 1; min-width: 0; display: grid; line-height: 1.15; cursor: pointer; }
.yapiskan-paket { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 500; color: rgba(255, 255, 255, .72); white-space: nowrap; overflow: hidden; }
.yapiskan-bilgi b { font: 700 1.125rem/1.2 var(--baslik); font-variant-numeric: tabular-nums; }
.yapiskan-bilgi select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 1rem; cursor: pointer; }
.yapiskan-wa { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: calc(var(--r-xl) - .375rem); background: rgba(255, 255, 255, .1); color: #4ade80; }
.yapiskan .btn { flex: none; min-height: 2.75rem; border-radius: calc(var(--r-xl) - .375rem); box-shadow: none; }
.wa-balon { position: fixed; right: var(--b4); bottom: var(--b4); z-index: 44; width: 3.5rem; height: 3.5rem; display: grid; place-items: center; background: #17964d; color: #fff; border-radius: 50%; box-shadow: var(--golge-md); transition: transform .25s var(--yay); }
.wa-balon:hover { transform: scale(1.06); }
body.anasayfa .wa-balon { display: none; }
@media (min-width: 990px) { .yapiskan { display: none; } body.anasayfa .wa-balon { display: grid; } }

/* ---------- ürün görseli büyük görünüm ----------
   Boşluğa dokununca kapanır; görsele dokununca yakınlaşır ve kaydırılır; iki parmakla yakınlaştırma da çalışır. */
.buyuk { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(10, 12, 15, .96); color: #fff; opacity: 0; transition: opacity .25s ease, overlay .25s allow-discrete, display .25s allow-discrete; }
.buyuk[open] { opacity: 1; }
@starting-style { .buyuk[open] { opacity: 0; } }
.buyuk::backdrop { background: transparent; }
.buyuk-sahne { position: absolute; inset: 0; display: grid; place-items: center; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; padding: 3.75rem 0 3.5rem; cursor: zoom-out; }
.buyuk-sahne img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: zoom-in; user-select: none; -webkit-user-drag: none; transition: opacity .2s ease; }
.buyuk-sahne.yakin { display: block; padding: 0; }
.buyuk-sahne.yakin img { max-width: none; max-height: none; width: 250vw; cursor: zoom-out; }
@media (min-width: 990px) { .buyuk-sahne.yakin img { width: 180vw; } }
.buyuk-dugme { position: absolute; z-index: 2; width: 3rem; height: 3rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; backdrop-filter: blur(8px); transition: background-color .16s ease, transform .2s var(--yay); }
.buyuk-dugme:hover { background: rgba(255, 255, 255, .26); }
.buyuk-kapat { top: calc(.75rem + env(safe-area-inset-top)); right: .75rem; }
.buyuk-once { left: .75rem; top: 50%; translate: 0 -50%; }
.buyuk-sonra { right: .75rem; top: 50%; translate: 0 -50%; }
.buyuk-ipucu { position: absolute; left: 0; right: 0; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 2; margin: 0; padding-inline: 1rem; text-align: center; font-size: var(--t-dipnot); color: rgba(255, 255, 255, .72); pointer-events: none; }
.buyuk-ipucu span { display: block; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.buyuk-sahne.yakin ~ .buyuk-ipucu, .buyuk-sahne.yakin ~ .buyuk-once, .buyuk-sahne.yakin ~ .buyuk-sonra { opacity: 0; pointer-events: none; }

/* ---------- formlar ---------- */
.form { display: grid; gap: var(--b4); }
.form-bas h2 { font-size: var(--t-h3); margin-bottom: var(--b2); }
.form-bas p { color: var(--metin-yumusak); }
.form-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--b4) var(--b3); }
@media (min-width: 560px) { .form-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } .alan-genis { grid-column: 1 / -1; } }
.alan { position: relative; display: grid; gap: .4rem; font-weight: 600; font-size: .875rem; min-width: 0; color: var(--metin); align-content: start; }
.alan:has(> .ops) { grid-template-columns: max-content minmax(0, 1fr); column-gap: .4rem; align-items: baseline; }
.alan:has(> .ops) > :not(.ops) { grid-column: 1 / -1; }
.ops { font-weight: 400; color: var(--metin-soluk); font-size: var(--t-dipnot); }
.alan input, .alan select, .alan textarea { width: 100%; min-height: 3.25rem; padding: .75rem 1rem; background: var(--beyaz); border: 1.5px solid var(--cizgi-koyu); border-radius: var(--r-md); font-weight: 400; font-size: 1rem; transition: border-color .16s ease, box-shadow .16s ease; }
.alan textarea { min-height: 6rem; resize: vertical; line-height: 1.5; }
.alan input::placeholder, .alan textarea::placeholder { color: #6b7580; }
.alan input:hover, .alan textarea:hover { border-color: #8d98a5; }
.alan input:focus, .alan select:focus, .alan textarea:focus { outline: 0; border-color: var(--murekkep); box-shadow: 0 0 0 4px rgba(15, 19, 24, .12); }
.alan [aria-invalid="true"] { border-color: var(--kirmizi); }
.alan [aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(200, 16, 46, .16); }
.alan input[type=number] { -moz-appearance: textfield; appearance: textfield; font-variant-numeric: tabular-nums; }
.alan input[type=number]::-webkit-inner-spin-button { appearance: none; }
.alan .secim { font-size: 1rem; }
.hata { display: block; color: var(--kirmizi-koyu); font-weight: 500; font-size: var(--t-etiket); line-height: 1.35; animation: hata-gir .25s var(--yay); }
.hata:empty { display: none; }
@keyframes hata-gir { from { opacity: 0; transform: translateY(-.25rem); } }
.bal { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.onay { display: flex; gap: var(--b3); align-items: flex-start; min-height: var(--dokun); padding-block: var(--b2); font-size: .9375rem; font-weight: 400; line-height: 1.45; cursor: pointer; }
.onay input { appearance: none; -webkit-appearance: none; flex: none; width: 1.5rem; height: 1.5rem; margin: 0; border: 1.5px solid var(--cizgi-koyu); border-radius: var(--r-sm); background: var(--beyaz) center / 0 no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.500' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.500 4.500 4.500L19 7.500'/%3E%3C/svg%3E"); cursor: pointer; transition: background-color .18s ease, border-color .18s ease, background-size .25s var(--yay); }
.onay input:checked { background-color: var(--kirmizi); border-color: var(--kirmizi); background-size: 1rem; }
.onay input:focus-visible { outline: .1875rem solid var(--mavi); outline-offset: .125rem; }
.onay a { color: var(--mavi); }
.ipucu { font-size: var(--t-etiket); color: var(--metin-yumusak); }
.ipucu a { color: var(--mavi); }
.uyari { background: var(--kirmizi-acik); border-left: .25rem solid var(--kirmizi); color: #6b0717; padding: var(--b3) var(--b4); border-radius: var(--r-sm); }
.form-tamam { display: grid; gap: var(--b3); justify-items: center; text-align: center; padding: var(--b6) 0; }
.form-tamam > .ikon { color: var(--yesil); animation: tamam .5s var(--yay); }
@keyframes tamam { from { transform: scale(.4); opacity: 0; } }
.form-tamam h2 { font-size: var(--t-h3); }

/* ---------- pencereler ---------- */
.pencere { width: min(40rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); padding: var(--b6) var(--b5); border: 0; border-radius: var(--r-xl); background: var(--beyaz); color: var(--metin); box-shadow: 0 1.5rem 4rem rgba(15, 19, 24, .4); overflow-y: auto; overscroll-behavior: contain; opacity: 0; translate: 0 1rem; transition: opacity .25s ease, translate .35s var(--yay), overlay .35s allow-discrete, display .35s allow-discrete; }
.pencere[open] { opacity: 1; translate: 0 0; }
@starting-style { .pencere[open] { opacity: 0; translate: 0 1rem; } }
.pencere::backdrop { background: rgba(15, 19, 24, 0); transition: background-color .3s ease, overlay .35s allow-discrete, display .35s allow-discrete; }
.pencere[open]::backdrop { background: rgba(15, 19, 24, .62); }
@starting-style { .pencere[open]::backdrop { background: rgba(15, 19, 24, 0); } }
.pencere-kapat { position: sticky; top: 0; z-index: 2; width: var(--dokun); height: var(--dokun); margin: -.5rem -.25rem -2.25rem auto; display: grid; place-items: center; background: var(--gri-100); border: 0; border-radius: 50%; color: var(--murekkep); transition: background-color .16s ease, transform .25s var(--yay); }
.pencere-kapat:hover { background: var(--cizgi); transform: rotate(90deg); }
.pencere .form-bas, .pencere .yasal h1 { padding-right: 3rem; }
@media (min-width: 620px) { .pencere { padding: var(--b8); } }
html:has(dialog[open]) { overflow: hidden; }

.yasal { padding-block: var(--b8) var(--b12); }
.yasal h1 { margin-bottom: var(--b5); }
.yasal h2 { font: 600 1.125rem/1.3 var(--govde); letter-spacing: 0; margin: var(--b6) 0 var(--b2); }
.yasal p, .yasal li { margin-bottom: var(--b2); max-width: 46rem; color: var(--metin-yumusak); }
.yasal a { color: var(--mavi); }
.yasal ul, .yasal ol { padding-left: var(--b5); list-style: revert; }
.yasal .surum { font-size: var(--t-dipnot); font-weight: 600; color: var(--metin-soluk); }
.pencere .yasal { padding: 0; }

.cerez { position: fixed; left: var(--b3); right: var(--b3); bottom: var(--b3); z-index: 60; max-width: 35rem; margin-inline: auto; background: var(--beyaz); border: 1px solid var(--cizgi-koyu); border-radius: var(--r-lg); box-shadow: var(--golge-md); padding: var(--b4); display: grid; gap: var(--b3); font-size: .9375rem; }
.cerez a { color: var(--mavi); }
.cerez-secim { display: grid; gap: var(--b2); }
.cerez-secim label { display: flex; gap: var(--b2); align-items: center; min-height: var(--dokun); }
.cerez-dugme { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--b2); }
.cerez-dugme .btn { min-height: var(--dokun); padding-inline: var(--b2); font-size: .9375rem; }

/* ---------- ödeme ---------- */
body.odeme-sayfa { background: var(--gri-50); }
.odeme { padding-block: var(--b6) var(--b12); }
.odeme h1 { margin-bottom: var(--b5); }
.odeme-form { grid-template-columns: minmax(0, 1fr); gap: var(--b5); align-items: start; }
.odeme-sol { display: grid; gap: var(--b5); min-width: 0; }
.grup, .ozet { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-xl); padding: var(--b5); display: grid; gap: var(--b4); }
@media (min-width: 620px) { .grup, .ozet { padding: var(--b6); } }
.grup legend { float: left; width: 100%; display: flex; align-items: center; gap: var(--b3); font: 700 1.1875rem/1.2 var(--baslik); letter-spacing: -.012em; margin-bottom: var(--b4); }
.grup legend i { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%; background: var(--murekkep); color: #fff; font: 700 .8125rem/1 var(--baslik); font-style: normal; }
.grup legend + * { clear: both; }
.grup a { color: var(--mavi); }
.secenekler { display: grid; gap: var(--b3); }
.secenek { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--b3); min-height: 3.75rem; padding: var(--b3) var(--b4); border: 1.5px solid var(--cizgi-koyu); border-radius: var(--r-lg); cursor: pointer; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.secenek:hover { border-color: var(--metin-soluk); }
.secenek:has(input:checked) { border-color: var(--kirmizi); background: var(--kirmizi-acik); box-shadow: 0 0 0 1px var(--kirmizi); }
.secenek input { appearance: none; -webkit-appearance: none; width: 1.375rem; height: 1.375rem; margin: 0; border: 1.5px solid var(--cizgi-koyu); border-radius: 50%; background: #fff; transition: border-color .18s ease, border-width .25s var(--yay); }
.secenek input:checked { border: .4rem solid var(--kirmizi); }
.secenek b { display: block; font-weight: 600; }
.secenek small { display: block; color: var(--metin-yumusak); font-size: var(--t-dipnot); line-height: 1.35; }
.secenek strong { font: 700 1.125rem/1 var(--baslik); white-space: nowrap; font-variant-numeric: tabular-nums; }
.adet-satir { display: flex; align-items: center; justify-content: space-between; gap: var(--b4); font-weight: 600; }
.adet { display: inline-grid; grid-template-columns: 2.875rem 3.25rem 2.875rem; border: 1.5px solid var(--cizgi-koyu); border-radius: var(--r-md); overflow: hidden; background: var(--beyaz); }
.adet button { height: 2.875rem; border: 0; background: var(--gri-50); font-size: 1.25rem; font-weight: 600; transition: background-color .16s ease; }
.adet button:hover { background: var(--gri-100); }
.adet input { width: 100%; height: 2.875rem; border: 0; text-align: center; font-weight: 600; -moz-appearance: textfield; appearance: textfield; background: transparent; font-variant-numeric: tabular-nums; }
.adet input::-webkit-inner-spin-button { appearance: none; }
.ozet h2 { font-size: 1.1875rem; }
.ozet-urun { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--b3); align-items: center; padding-bottom: var(--b4); border-bottom: 1px solid var(--cizgi); }
.ozet-urun-gorsel { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--r-lg); background: var(--gri-50); border: 1px solid var(--cizgi); color: var(--metin-soluk); overflow: hidden; }
.ozet-urun-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.ozet-urun b { display: block; font-weight: 600; line-height: 1.35; }
.ozet-urun small { color: var(--metin-soluk); font-size: var(--t-etiket); }
.ozet-onaylar { display: grid; margin: 0; padding: 0 var(--b4); border: 1px solid var(--cizgi); border-radius: var(--r-lg); background: var(--gri-50); }
.ozet-onaylar .onay { padding-block: var(--b3); font-size: var(--t-etiket); line-height: 1.5; }
.ozet-onaylar .onay + .onay, .ozet-onaylar .hata + .onay { border-top: 1px solid var(--cizgi); }
.ozet-onaylar .onay span > small { display: block; color: var(--metin-soluk); }
.ozet-onaylar .hata { margin: 0 0 var(--b3); }
.ozet-guven { display: grid; gap: var(--b3); justify-items: center; text-align: center; }
.ozet .odeme-rozet { justify-content: center; margin-top: 0; }
.ozet .odeme-rozet .r-guven { flex: 1 1 100%; justify-content: center; margin: 0; }
.ozet-guven .ipucu { font-size: var(--t-dipnot); max-width: 24rem; }
.ozet dl { display: grid; gap: var(--b2); }
.ozet dl > div { display: flex; justify-content: space-between; gap: var(--b4); color: var(--metin-yumusak); }
.ozet dd { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--metin); font-weight: 600; }
.ozet dt small { color: var(--metin-soluk); }
.ozet-toplam dt { white-space: nowrap; }
.ozet .ozet-toplam { margin-top: var(--b2); padding-top: var(--b3); border-top: 1px solid var(--cizgi); font-weight: 600; align-items: baseline; color: var(--metin); }
.ozet-toplam dd { font: 700 1.625rem/1 var(--baslik); letter-spacing: -.02em; }
.ozet a { color: var(--mavi); }
@media (min-width: 990px) { .odeme-form { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--b8); } .odeme-sag { position: sticky; top: calc(var(--ust) + var(--b4)); } }

/* ---------- sipariş, iletişim, toptan sayfası ---------- */
.siparis { padding-block: var(--b8) var(--b12); display: grid; gap: var(--b5); }
/* Sipariş onayı: başlık + iki sütun (ürün ve adımlar | adres, ödeme, yardım). */
.kap.sip { max-width: 62rem; padding-block: var(--b8) var(--b12); display: grid; gap: var(--b6); }
.sip-bas { display: grid; gap: var(--b2); justify-items: start; }
.sip-rozet { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: var(--r-tam); background: var(--yesil); color: #fff; margin-bottom: var(--b2); animation: tamam .5s var(--yay); }
.sip-no { font-size: var(--t-etiket); color: var(--metin-soluk); }
.sip-no b { color: var(--metin); }
.sip-bas h1 { font-size: var(--t-h1); }
.sip-spot { font-size: var(--t-spot); color: var(--metin-yumusak); max-width: 40rem; }
.sip-eposta { font-size: var(--t-etiket); color: var(--metin-soluk); overflow-wrap: anywhere; }
.sip-eposta b { color: var(--metin); font-weight: 600; }
.sip-bas .btn { margin-top: var(--b2); }
.sip-izgara, .sip-ana, .sip-yan { display: grid; gap: var(--b4); align-content: start; min-width: 0; }
@media (min-width: 860px) { .sip-izgara { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--b5); } .sip-yan { position: sticky; top: calc(var(--ust) + var(--b4)); } }
.sip-kart { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: var(--r-xl); padding: var(--b5); display: grid; gap: var(--b4); min-width: 0; }
@media (min-width: 620px) { .sip-kart { padding: var(--b6); } }
.sip-kart h2 { font-size: 1.1875rem; }
.sip-kart-bas { display: flex; justify-content: space-between; align-items: baseline; gap: var(--b3); }
.sip-kart-bas span { font-size: var(--t-etiket); color: var(--metin-soluk); }
.sip-kart.havale { background: var(--gri-50); border-radius: var(--r-xl); }
.sip-urun { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: var(--b4); align-items: center; }
.sip-gorsel { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: var(--r-md); background: var(--gri-50); border: 1px solid var(--cizgi); color: var(--metin-soluk); overflow: hidden; }
.sip-gorsel img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 479px) { .sip-urun { grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: var(--b3); } .sip-gorsel { width: 3.5rem; height: 3.5rem; } }
.sip-urun-ad { display: grid; gap: .125rem; min-width: 0; }
.sip-urun-ad b { font-weight: 600; line-height: 1.35; }
.sip-urun-ad small { font-size: var(--t-etiket); color: var(--metin-soluk); }
.sip-urun-fiyat { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sip-toplam { display: grid; gap: var(--b2); padding-top: var(--b4); border-top: 1px solid var(--cizgi); }
.sip-toplam > div { display: flex; justify-content: space-between; gap: var(--b4); color: var(--metin-yumusak); }
.sip-toplam dd { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--metin); font-weight: 600; }
.sip-toplam .sip-genel { margin-top: var(--b2); padding-top: var(--b3); border-top: 1px solid var(--cizgi); align-items: baseline; color: var(--metin); font-weight: 600; }
.sip-genel dd { font: 700 1.625rem/1 var(--baslik); letter-spacing: -.02em; }
.sip-adimlar { display: grid; }
.sip-adimlar li { position: relative; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--b3); padding-bottom: var(--b5); }
.sip-adimlar li:last-child { padding-bottom: 0; }
.sip-adimlar li:not(:last-child)::before { content: ""; position: absolute; left: calc(.75rem - 1px); top: 1.5rem; bottom: 0; width: 2px; background: var(--cizgi); }
.sip-adimlar li.is-bitti:not(:last-child)::before { background: var(--yesil); }
.sip-nokta { position: relative; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: var(--r-tam); border: 2px solid var(--cizgi-koyu); background: var(--beyaz); color: #fff; }
.is-bitti .sip-nokta { background: var(--yesil); border-color: var(--yesil); }
.is-simdi .sip-nokta { border-color: var(--kirmizi); box-shadow: 0 0 0 .25rem var(--kirmizi-acik); }
.is-simdi .sip-nokta::after { content: ""; width: .5rem; height: .5rem; border-radius: var(--r-tam); background: var(--kirmizi); }
.sip-adim { display: grid; gap: .125rem; min-width: 0; }
.sip-adim b { font-weight: 600; line-height: 1.5; }
.sip-adim span { font-size: var(--t-etiket); color: var(--metin-soluk); overflow-wrap: anywhere; }
.is-sonra .sip-adim b { color: var(--metin-soluk); }
.sip-bilgi { gap: 0; padding-block: var(--b2); }
.sip-bilgi > div { padding-block: var(--b4); border-bottom: 1px solid var(--cizgi); display: grid; gap: var(--b1); }
.sip-bilgi > div:last-child { border-bottom: 0; }
.sip-bilgi p { overflow-wrap: anywhere; }
.sip-etiket { font-size: var(--t-dipnot); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--metin-soluk); }
.sip-yardim { gap: var(--b3); }
.sip-yardim p { font-size: var(--t-etiket); color: var(--metin-yumusak); }
.tamam-bas { display: grid; gap: var(--b2); }
.tamam-bas .ikon { color: var(--yesil); animation: tamam .5s var(--yay); }
.tamam-bas p { color: var(--metin-yumusak); }
.izle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--b1); }
.izle li { padding-top: var(--b3); border-top: .25rem solid var(--cizgi-koyu); font-size: var(--t-dipnot); font-weight: 600; color: var(--metin-soluk); }
.izle li.gecti { border-color: var(--yesil); color: var(--metin); }
.kargo-bilgi, .havale { background: var(--gri-50); border-radius: var(--r-lg); padding: var(--b5); }
.havale { display: grid; gap: var(--b3); }
.havale h2 { font-size: var(--t-h3); }
.havale dl, .bilgi-liste { display: grid; }
.havale dl > div, .bilgi-liste > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--b3); padding: var(--b3) 0; border-bottom: 1px solid var(--cizgi); }
.havale dt, .bilgi-liste dt { color: var(--metin-yumusak); }
.havale dd, .bilgi-liste dd { font-weight: 600; overflow-wrap: break-word; }
.havale dl > div { align-items: center; }
.havale dd { display: flex; align-items: center; justify-content: space-between; gap: var(--b3); min-width: 0; }
.havale dd > span { min-width: 0; overflow-wrap: anywhere; }
.kopya { flex: none; min-height: var(--dokun); padding: 0 var(--b4); border: 1px solid var(--cizgi-koyu); border-radius: var(--r-md); background: var(--beyaz); color: var(--metin); font: 600 var(--t-etiket)/1 var(--govde); cursor: pointer; transition: background .16s ease, border-color .16s ease, color .16s ease; }
.kopya:hover { border-color: var(--murekkep); }
.kopya:focus-visible { outline: 2px solid var(--mavi); outline-offset: 2px; }
.kopya.is-tamam { background: var(--yesil); border-color: var(--yesil); color: #fff; }
@media (max-width: 479px) { .havale dl > div { grid-template-columns: 1fr; gap: var(--b1); } }
.bilgi-liste a { color: var(--mavi); }
.dugmeler { display: flex; flex-wrap: wrap; gap: var(--b3); }
.bos, .iletisim { padding-block: var(--b12); display: grid; gap: var(--b4); }
.iletisim > p, .bos > p, .cok-dar > p { color: var(--metin-yumusak); }
.cok-dar h1 { margin-bottom: var(--b2); }
.cok-dar .form { margin-top: var(--b5); }
.toptan-ust h1 { margin-bottom: var(--b4); }
.toptan-ust .tik-liste { margin-top: var(--b6); }
.toptan-kart { background: var(--beyaz); color: var(--metin); border-radius: var(--r-xl); padding: var(--b6) var(--b5); scroll-margin-top: calc(var(--ust) + var(--b4)); box-shadow: var(--golge-md); }
.toptan-kart .ust-yazi, .pencere .ust-yazi { color: var(--kirmizi); }
@media (min-width: 620px) { .toptan-kart { padding: var(--b8); } }

/* ---------- görünürken beliren öğeler ---------- */
.js-hareket [data-gir] { opacity: 0; transform: translateY(1.25rem); transition: opacity .7s ease, transform .9s var(--yay); transition-delay: calc(var(--i, 0) * 70ms); }
.js-hareket [data-gir="olcek"] { transform: scale(.96); }
.js-hareket [data-gir].gorundu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-hareket [data-gir] { opacity: 1; transform: none; }
  .ustbar-iz { animation: none; } .ustbar-iz ul[aria-hidden] { display: none; } .ustbar-dur { display: none; }
  .ilerleme { display: none; }
}

/* Güvenli ödeme işaretleri */
.odeme-rozet { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: var(--b4); list-style: none; padding: 0; }
.odeme-rozet li { display: inline-flex; align-items: center; justify-content: center; height: 1.75rem; }
.odeme-rozet .r-guven { flex: 1 1 100%; justify-content: flex-start; gap: .3rem; font-size: var(--t-dipnot); font-weight: 600; color: var(--metin-yumusak); }
.odeme-rozet .r-kart { min-width: 2.75rem; padding: 0 .45rem; border: 1px solid var(--cizgi); border-radius: var(--r-sm); background: #fff; font: 800 .75rem/1 var(--baslik); letter-spacing: .02em; }
.r-visa { color: #1a1f71; font-style: italic; }
.r-paytr { color: #0b3d91; } .r-paytr b { color: #17a34a; }
.r-mc i { width: .9rem; height: .9rem; border-radius: 50%; background: #eb001b; } .r-mc i + i { background: #f79e1b; margin-left: -.35rem; mix-blend-mode: multiply; }
.alt .odeme-rozet { margin-top: var(--b6); } .alt .odeme-rozet .r-guven { color: rgba(255, 255, 255, .72); }
@media (min-width: 750px) { .odeme-rozet .r-guven { flex: 0 1 auto; margin-right: auto; } .alt .odeme-rozet .r-guven { margin-right: var(--b3); } }
.kart-odeme h1 { margin-bottom: var(--b2); }

/* Bölüm altı notlar ve tamamlayıcı koruma katmanları */
.dip-not { margin-top: var(--b5); font-size: var(--t-dipnot); line-height: 1.5; color: var(--metin-yumusak); max-width: 44rem; }
.bolum-koyu .dip-not { color: rgba(255, 255, 255, .72); }
.kap.dar > .dip-not { margin-inline: auto; text-align: center; }
.neden.biz { border-color: var(--kirmizi); background: var(--kirmizi-acik); }
.neden.biz .neden-ikon { background: var(--kirmizi); color: #fff; }