/* Hesaplayıcı: görüntüleyici + seçenek kartı */
.hero { padding: 40px 0 28px; }
.hero-izgara { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.12fr) minmax(330px, 0.86fr); gap: 18px; align-items: stretch; }
.hero-metin { display: flex; flex-direction: column; justify-content: center; padding: 24px 8px 24px 20px; }
.hero-metin h1 { font-size: clamp(52px, 5.6vw, 92px); font-weight: 700; line-height: 0.95; letter-spacing: -0.06em; }
.hero-metin h1 em { display: block; font-size: 1.04em; line-height: 1; letter-spacing: -0.04em; margin-top: .04em; }
.hero-metin > p { font-size: 17px; color: var(--metin-2); margin: 26px 0 0; max-width: 34ch; line-height: 1.55; }
.hero-veri { list-style: none; padding: 0; margin: 48px 0 0; display: flex; gap: 26px; flex-wrap: wrap; }
.hero-veri li { display: grid; gap: 4px; }
.hero-veri .veri-ikon { width: 44px; height: 44px; border-radius: 50%; background: var(--ana-acik); color: var(--ana); display: grid; place-items: center; font-size: 21px; margin-bottom: 10px; }
.hero-veri b { font-size: 21px; font-weight: 650; letter-spacing: -0.03em; }
.hero-veri small { font-size: 13px; color: var(--metin-3); }

/* Görüntüleyici kartı */
.gorus-kart { padding: 10px; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(180deg, #fbfbfa, #f4f4f2); }
.sahne { position: relative; flex: 1; min-height: 420px; border-radius: var(--r-m); overflow: hidden;
  background: linear-gradient(rgba(17,17,20,.035) 1px, transparent 1px) 0 0/28px 28px, linear-gradient(90deg, rgba(17,17,20,.035) 1px, transparent 1px) 0 0/28px 28px, radial-gradient(90% 80% at 50% 20%, #ffffff, #efefec); }
.sahne canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; touch-action: none; cursor: grab; }
.sahne canvas:active { cursor: grabbing; }
.sahne-ust { position: absolute; inset: 12px 12px auto; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; pointer-events: none; }
.sahne-ust > * { pointer-events: auto; }
.dosya-cip { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: 0 0 0 1px rgba(17,17,20,.05), var(--golge-1); min-width: 0; max-width: 62%; }
.dosya-ikon { width: 38px; height: 38px; border-radius: 50%; background: var(--ana-acik); color: var(--ana); display: grid; place-items: center; font-size: 19px; flex: none; }
.dosya-yazi { display: grid; min-width: 0; line-height: 1.25; }
.dosya-yazi b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dosya-yazi small { font-size: 12px; color: var(--metin-3); }
.hap-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: 0 0 0 1px rgba(17,17,20,.05), var(--golge-1); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background-color .2s var(--ease); }
.hap-btn:hover { background: #fff; }
.hap-btn i { font-size: 16px; transition: transform .6s var(--ease); }
.hap-btn:hover i { transform: rotate(180deg); }
.sahne-yukleniyor { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 14px; background: rgba(246,246,244,.86); font-size: 14px; color: var(--metin-2); }
.katman-anim { display: grid; gap: 4px; justify-items: center; transform: scaleY(-1); }
.katman-anim i { height: 7px; border-radius: 3px; background: var(--ana); opacity: .15; animation: katman 1.5s var(--ease) infinite; }
.katman-anim i:nth-child(1) { width: 64px; } .katman-anim i:nth-child(2) { width: 54px; animation-delay: .12s; } .katman-anim i:nth-child(3) { width: 44px; animation-delay: .24s; }
.katman-anim i:nth-child(4) { width: 32px; animation-delay: .36s; } .katman-anim i:nth-child(5) { width: 18px; animation-delay: .48s; }
@keyframes katman { 0%, 100% { opacity: .15; } 40% { opacity: 1; } }
.surukle-perde { position: absolute; inset: 8px; z-index: 4; border-radius: 12px; border: 2px dashed var(--ana); background: rgba(238,241,255,.9); color: var(--ana); display: grid; place-content: center; justify-items: center; gap: 8px; opacity: 0; transform: scale(.98); transition: opacity .3s var(--ease), transform .4s var(--ease); pointer-events: none; }
.surukle-perde i { font-size: 40px; }
body.surukleniyor .surukle-perde { opacity: 1; transform: none; }

.olcu-serit { margin: 0; display: grid; grid-template-columns: 1.35fr 1fr 1fr 1.2fr; background: var(--yuzey); border-radius: var(--r-m); box-shadow: 0 0 0 1px rgba(17,17,20,.05); }
.olcu-serit > div { display: flex; gap: 10px; align-items: flex-start; padding: 14px 14px; position: relative; min-width: 0; }
.olcu-serit > div + div::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--cizgi); }
.olcu-serit i { font-size: 18px; color: var(--metin-2); margin-top: 1px; }
.olcu-serit span { min-width: 0; }
.olcu-serit dt { font-size: 12.5px; color: var(--metin-3); }
.olcu-serit dd { margin: 2px 0 0; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gorus-kart .uyari { margin: 0; }
.yukle-btn { align-self: center; display: flex; align-items: center; justify-content: center; gap: 16px; width: min(100%, 440px); min-height: 72px; margin: 8px auto 6px; padding: 10px 28px; border-radius: 999px; background: var(--ana); color: #fff; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 16px 30px -14px var(--ana-golge); transition: transform .45s var(--ease), background-color .25s var(--ease); }
.yukle-btn:hover { background: var(--ana-koyu); transform: translateY(-2px); }
.yukle-btn:active { transform: scale(.98); }
.yukle-btn:focus-within { outline: 2px solid var(--ana); outline-offset: 3px; }
.yukle-btn > i { font-size: 28px; }
.yukle-btn span { display: grid; line-height: 1.3; }
.yukle-btn b { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.yukle-btn small { font-size: 12.5px; opacity: .8; }
.ornekler { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; padding: 4px 6px 8px; font-size: 13px; color: var(--metin-3); }

/* Seçenek kartı */
.secenek-kart { padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.secenek-kart .etiket { font-size: 14px; font-weight: 600; }
.satir-arasi { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sekme-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sekme-2 button, .kalite-sec button { height: 44px; border-radius: var(--r-s); border: 1px solid var(--cizgi-2); background: var(--yuzey); cursor: pointer; font-weight: 550; font-size: 14.5px; color: var(--murekkep); transition: all .25s var(--ease); }
.sekme-2 button:hover, .kalite-sec button:hover { border-color: var(--metin-3); }
.sekme-2 button[aria-checked="true"], .kalite-sec button[aria-checked="true"] { border: 1.5px solid var(--ana); background: var(--ana-acik); color: var(--ana); }
.kalite-sec { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 8px; }
.kalite-sec button { height: auto; padding: 10px 6px; line-height: 1.3; }
.kalite-sec small { display: block; font-size: 12.5px; font-weight: 400; color: var(--metin-3); }
.kalite-sec button[aria-checked="true"] small { color: var(--ana); }

.acilir { position: relative; }
.acilir-btn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 10px; border-radius: var(--r-s); border: 1px solid var(--cizgi-2); background: var(--yuzey); cursor: pointer; text-align: left; transition: border-color .2s var(--ease); }
.acilir-btn:hover, .acilir-btn[aria-expanded="true"] { border-color: var(--ana); }
.acilir-btn > i { margin-left: auto; font-size: 16px; transition: transform .3s var(--ease); }
.acilir-btn[aria-expanded="true"] > i { transform: rotate(180deg); }
.acilir-yazi { display: grid; line-height: 1.3; }
.acilir-yazi b { font-weight: 600; font-size: 15px; }
.acilir-yazi small { font-size: 12.5px; color: var(--metin-3); }
.makara { width: 40px; height: 40px; flex: none; display: grid; place-items: center; }
.makara svg { width: 40px; height: 40px; }
.acilir-liste { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 10; list-style: none; margin: 0; padding: 6px; max-height: 340px; overflow-y: auto; background: var(--yuzey); border-radius: var(--r-m); box-shadow: 0 0 0 1px rgba(17,17,20,.06), var(--golge-3); animation: acil .25s var(--ease); }
@keyframes acil { from { opacity: 0; transform: translateY(-6px); } }
.acilir-liste li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.acilir-liste li:hover, .acilir-liste li.odak { background: var(--yuzey-2); }
.acilir-liste li[aria-selected="true"] { background: var(--ana-acik); }
.acilir-liste .makara, .acilir-liste .makara svg { width: 30px; height: 30px; }
.acilir-liste .li-yazi { display: grid; line-height: 1.3; flex: 1; min-width: 0; }
.acilir-liste .li-yazi b { font-weight: 550; font-size: 14px; }
.acilir-liste .li-yazi small { font-size: 12px; color: var(--metin-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acilir-liste .li-fiyat { font: 500 12.5px var(--mono); color: var(--metin-2); }

.renkler { display: flex; flex-wrap: wrap; gap: 9px; }
.renkler button { width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), inset 0 -5px 8px rgba(0,0,0,.1); transition: transform .4s var(--ease-yay); }
.renkler button:hover { transform: scale(1.1); }
.renkler button::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--ana); opacity: 0; transform: scale(.85); transition: all .3s var(--ease); }
.renkler button[aria-checked="true"]::after { opacity: 1; transform: none; }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; cursor: pointer; --p: 16%; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--ana) var(--p), var(--zemin-2) var(--p)); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: var(--zemin-2); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--ana); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--ana); box-shadow: 0 0 0 4px #fff, 0 2px 8px rgba(17,17,20,.25); transition: transform .3s var(--ease-yay); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 4px solid #fff; border-radius: 50%; background: var(--ana); box-shadow: 0 2px 8px rgba(17,17,20,.25); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
#dolulukDeger { font-size: 15px; }

.sayac { display: inline-flex; align-items: center; height: 44px; border-radius: var(--r-s); border: 1px solid var(--cizgi-2); background: var(--yuzey); overflow: hidden; }
.sayac button { width: 44px; height: 100%; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; font-size: 15px; transition: background-color .2s var(--ease); }
.sayac button:hover { background: var(--yuzey-2); }
.sayac input { width: 64px; border: 0; border-inline: 1px solid var(--cizgi); height: 100%; text-align: center; font: 500 15px var(--mono); background: transparent; -moz-appearance: textfield; }
.sayac input:focus { outline: none; background: var(--ana-acik); }
.sayac input::-webkit-inner-spin-button { -webkit-appearance: none; }

.gelismis { border-radius: var(--r-s); background: var(--yuzey-2); box-shadow: inset 0 0 0 1px var(--cizgi); }
.gelismis summary { list-style: none; cursor: pointer; padding: 12px 14px; font-size: 14px; font-weight: 550; display: flex; gap: 8px; align-items: center; }
.gelismis summary::-webkit-details-marker { display: none; }
.gelismis summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg) translateY(-2px); transition: transform .3s var(--ease); }
.gelismis[open] summary::after { transform: rotate(-135deg); }
.gelismis-ic { padding: 2px 14px 14px; display: grid; gap: 12px; }
.gelismis .girdi, .gelismis .secim { height: 40px; font-size: 14px; }
.gelismis .alan > label { font-size: 12.5px; font-weight: 500; color: var(--metin-2); }

.fiyat-kutu { background: var(--yuzey-2); border-radius: var(--r-m); padding: 16px 18px; display: grid; gap: 6px; box-shadow: inset 0 0 0 1px var(--cizgi); }
.fiyat-satir { display: flex; justify-content: space-between; font-size: 14px; color: var(--metin-2); }
.fiyat-satir .mono { color: var(--murekkep); }
.yesil { color: var(--yesil) !important; }
.fiyat-toplam { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--cizgi); }
.fiyat-toplam span { font-size: 17px; font-weight: 650; }
.fiyat-toplam strong { font-size: clamp(28px, 2.4vw, 34px); font-weight: 600; letter-spacing: -0.04em; }
.fiyat-kutu .ipucu:empty { display: none; }
.siparis-btn { justify-content: space-between; padding: 0 26px 0 30px; }
.siparis-btn span { flex: 1; text-align: center; }
.guven-satir { text-align: center; font-size: 12.5px; color: var(--metin-3); margin: -6px 0 0; }

/* Adımlar şeridi */
.adim-serit { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 16px; padding: 26px 40px; margin-top: 18px; }
.adim { display: flex; gap: 22px; align-items: center; }
.adim-no { width: 76px; height: 76px; flex: none; border-radius: 50%; background: var(--ana-acik); color: var(--ana); display: grid; place-items: center; font: 600 22px var(--mono); }
.adim-ikon { width: 46px; height: 46px; border-radius: 50%; background: var(--ana-acik); color: var(--ana); display: grid; place-items: center; font-size: 22px; margin-bottom: 8px; }
.adim h3 { font-size: 21px; letter-spacing: -0.03em; }
.adim p { margin: 6px 0 0; color: var(--metin-2); font-size: 14.5px; line-height: 1.5; }
.adim-ok { width: 24px; height: 80px; color: var(--cizgi-2); }

/* /hesapla sayfası */
.hesap-izgara { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(340px, 1fr); gap: 18px; align-items: start; }
.hesap-izgara .gorus-kart { position: sticky; top: 100px; }
.hesap-izgara .sahne { min-height: 0; height: clamp(380px, calc(100dvh - 380px), 620px); flex: none; }

@media (max-width: 1240px) {
  .hero-izgara { grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.9fr); }
  .hero-metin { grid-column: 1 / -1; padding: 8px 4px 16px; }
  .hero-metin h1 em { display: inline; }
  .hero-veri { margin-top: 28px; }
}
@media (max-width: 900px) {
  .hero-izgara, .hesap-izgara { grid-template-columns: 1fr; }
  .hesap-izgara .gorus-kart { position: static; }
  .sahne, .hesap-izgara .sahne { min-height: 0; height: auto; aspect-ratio: 1 / 1; flex: none; }
  .adim-serit { grid-template-columns: 1fr; padding: 22px; gap: 22px; }
  .adim-ok { display: none; }
  .adim-no { width: 56px; height: 56px; font-size: 18px; }
}
@media (max-width: 560px) {
  .hero-metin h1 { font-size: 48px; }
  .olcu-serit { grid-template-columns: 1fr 1fr; }
  .olcu-serit > div:nth-child(3)::before { display: none; }
  .olcu-serit > div:nth-child(n+3) { border-top: 1px solid var(--cizgi); }
  .hap-btn span { display: none; }
  .hap-btn { width: 40px; padding: 0; justify-content: center; }
  .dosya-cip { max-width: calc(100% - 56px); }
  .secenek-kart { padding: 16px; }
  .yukle-btn { min-height: 64px; }
}

/* ---- Ekrana sığdırma: hero ilk ekranda tamamen görünür ---- */
@media (min-width: 901px) {
  .hero { padding: 16px 0 24px; }
  .hero-izgara { height: calc(100dvh - 112px); min-height: 600px; max-height: 900px; }
  .hero-izgara > .gorus-kart, .hero-izgara > .secenek-kart { min-height: 0; }
  .gorus-kart { gap: 8px; }
  .gorus-kart .sahne { flex: 1 1 auto; min-height: 0; }
  .yukle-btn { min-height: 60px; margin: 2px auto 2px; padding: 8px 24px; }
  .yukle-btn > i { font-size: 24px; }
  .yukle-btn b { font-size: 16.5px; }
  .olcu-serit > div { padding: 10px 12px; }
  /* Seçenek kartı: içerik kayar, fiyat ve buton altta sabit */
  .secenek-kart { overflow: hidden; padding: 0; gap: 0; }
  .secenek-kaydir { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 18px 12px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; }
  .secenek-alt { flex: none; padding: 12px 18px 14px; display: grid; gap: 10px; border-top: 1px solid var(--cizgi); background: var(--yuzey); }
  .secenek-alt .fiyat-kutu { padding: 12px 14px; gap: 4px; }
  .secenek-alt .fiyat-toplam { padding-top: 6px; }
  .secenek-alt .siparis-btn { height: 50px; }
  .secenek-alt .guven-satir { margin: -2px 0 0; }
  .hero-metin { padding: 8px 8px 8px 12px; }
  .hero-metin h1 { font-size: min(5.6vw, 10.5vh, 92px); }
  .hero-metin > p { margin-top: 18px; }
  .hero-veri { margin-top: min(48px, 4vh); }
}
@media (min-width: 901px) and (max-width: 1240px) {
  .hero-izgara { height: auto; max-height: none; }
  .hero-izgara > .gorus-kart, .hero-izgara > .secenek-kart { height: calc(100dvh - 196px); min-height: 520px; max-height: 820px; }
  .hero-metin { padding: 0 4px 2px; }
  .hero-metin h1 { font-size: clamp(36px, 4.6vw, 52px); white-space: nowrap; }
  .hero-metin > p, .hero-veri { display: none; }
}
/* /hesapla sayfasında da seçenek kartı ekrana sığsın */
@media (min-width: 901px) {
  .hesap-izgara .secenek-kart { position: sticky; top: 92px; max-height: calc(100dvh - 108px); }
  .hesap-izgara .gorus-kart { top: 92px; }
  .hesap-izgara .sahne { height: clamp(320px, calc(100dvh - 330px), 640px); }
}
@media (max-width: 900px) {
  .secenek-kaydir, .secenek-alt { display: flex; flex-direction: column; gap: 16px; }
  .secenek-alt { gap: 12px; }
}

/* ---- Mobil: sayfa doğrudan yükleme alanıyla başlar ---- */
@media (max-width: 900px) {
  .hero { padding-top: 10px; }
  .hero-izgara { gap: 12px; }
  .hero-izgara > .gorus-kart { order: 1; }
  .hero-izgara > .secenek-kart { order: 2; }
  .hero-izgara > .hero-metin { order: 3; padding: 20px 4px 4px; }
  .hero-metin h1 { font-size: 40px; }
  .hero-metin h1 em { display: inline; }
  .hero-veri { margin-top: 24px; gap: 18px; }
  .gorus-kart .sahne { order: 1; aspect-ratio: 4 / 3; }
  .gorus-kart .yukle-btn { order: 2; margin: 0 auto; width: 100%; }
  .gorus-kart .uyari { order: 3; }
  .gorus-kart .olcu-serit { order: 4; }
  .gorus-kart .ornekler { order: 5; }
}