/* Kiler Eve Siparis — sunum demosu. Renkler Kiler logosundan olculdu (kiler-market ile ayni). */
:root {
  --kirmizi: #8e0809; --kirmizi-koyu: #6c0607; --kirmizi-acik: #f8ecea;
  --yaprak: #49a833; --yaprak-koyu: #2e7a1f; --yaprak-zemin: #eaf5e4;
  --murekkep: #1f1b18; --metin-2: #5c5752; --metin-3: #77716b;
  --zemin: #f2f4ef; --yuzey: #ffffff; --cizgi: #e4e7e0;
  --wp-koyu: #0b6b5c; --wp-giden: #d9fdd3; --wp-zemin: #efe7dd; --wp-mavi: #34b7f1;
  --baslik: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --govde: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --olcek: 1;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--govde); color: var(--murekkep); background: #dfe4da; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--yaprak); outline-offset: 2px; }

/* ---------- sahne: sunum | telefon | tablet ---------- */
.sahne { zoom: var(--olcek); min-height: calc(100vh / var(--olcek)); display: grid; grid-template-columns: 300px 390px 580px; gap: 34px; align-items: center; justify-content: center; padding: 24px 28px 44px; }
.sunum { max-width: 300px; }
.sunum-logo { width: 96px; mix-blend-mode: multiply; margin-bottom: 14px; }
.sunum h1 { font-family: var(--baslik); font-size: 34px; line-height: 1.03; letter-spacing: -.8px; margin: 0 0 12px; font-weight: 800; }
.sunum h2 { font-family: var(--baslik); font-size: 17px; margin: 22px 0 8px; font-weight: 800; }
.sunum-giris { font-size: 15px; line-height: 1.55; color: var(--metin-2); margin: 0; }
.kim { margin: 0; }
.kim dt { font-weight: 800; font-size: 14.5px; display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.kim dd { margin: 3px 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--metin-2); }
.nokta { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.telefon-renk { background: var(--kirmizi); }
.tablet-renk { background: var(--murekkep); }
.adimlar { margin: 0; padding: 0; list-style: none; counter-reset: a; }
.adimlar li { counter-increment: a; position: relative; padding: 0 0 10px 36px; font-size: 14px; line-height: 1.5; color: var(--metin-2); }
.adimlar li b { color: var(--murekkep); }
.adimlar li::before { content: counter(a); position: absolute; left: 0; top: 0; width: 25px; height: 25px; border-radius: 50%; background: var(--kirmizi); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.sifirla { border: 1px solid #c9cfc3; background: rgba(255,255,255,.65); border-radius: 99px; padding: 8px 14px; font-weight: 700; font-size: 13.5px; }
.sifirla:hover { background: #fff; }
.sunum-not { font-size: 12.5px; color: var(--metin-3); line-height: 1.5; margin-top: 18px; }
.cihaz-etiket { text-align: center; font-size: 13px; font-weight: 700; color: var(--metin-3); margin: 14px 0 0; }

/* ---------- telefon ---------- */
.telefon { width: 390px; }
.ekran { position: relative; width: 390px; height: 844px; border-radius: 54px; border: 12px solid #151311; box-shadow: 0 0 0 2px #3a3633, 0 40px 80px rgba(31,27,24,.28), 0 12px 24px rgba(31,27,24,.18); overflow: hidden; background: var(--zemin); isolation: isolate; }
.durum-cubugu { position: absolute; top: 0; left: 0; right: 0; z-index: 30; height: 46px; display: flex; justify-content: space-between; align-items: center; padding: 4px 28px 0; font-weight: 700; font-size: 15px; color: #fff; pointer-events: none; }
.durum-cubugu svg { fill: currentColor; }
.durum-ikon { display: flex; gap: 6px; align-items: center; }
.durum-cubugu.koyu { color: var(--murekkep); }
.telefon-govde { position: absolute; inset: 0; display: flex; flex-direction: column; }
.kaydir { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.kaydir::-webkit-scrollbar { display: none; }

/* magaza */
.bant { background: var(--kirmizi); color: #fff; padding: 54px 18px 18px; border-radius: 0 0 26px 26px; position: relative; overflow: hidden; }
.bant::after { content: ''; position: absolute; right: -60px; top: -40px; width: 220px; height: 220px; border-radius: 50%; border: 22px solid rgba(255,255,255,.08); }
.bant-ust { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.logo-cip { background: #fff; border-radius: 13px; padding: 5px 9px; display: flex; }
.logo-cip img { height: 28px; }
.teslim-cip { background: rgba(255,255,255,.16); border-radius: 99px; padding: 7px 12px; font-weight: 700; font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.bant h1 { font-family: var(--baslik); font-size: 26px; line-height: 1.06; letter-spacing: -.4px; margin: 16px 0 4px; font-weight: 800; position: relative; z-index: 1; }
.bant p { margin: 0 0 14px; font-size: 13.5px; opacity: .9; position: relative; z-index: 1; }
.arama { display: flex; align-items: center; gap: 10px; background: #fff; color: var(--metin-3); border-radius: 15px; padding: 0 14px; height: 48px; position: relative; z-index: 1; }
.arama input { border: 0; outline: 0; flex: 1; min-width: 0; font-size: 16px; color: var(--murekkep); background: transparent; }
.cipler { display: flex; gap: 8px; overflow-x: auto; padding: 14px 16px 10px; scrollbar-width: none; position: sticky; top: 0; z-index: 5; background: var(--zemin); }
.cipler::-webkit-scrollbar { display: none; }
.cip { flex: none; border: 0; background: #fff; border-radius: 99px; padding: 8px 13px; font-weight: 700; font-size: 13px; }
.cip.secili { background: var(--murekkep); color: #fff; }
.urun-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 120px; }
.urun { background: var(--yuzey); border-radius: 18px; padding: 8px 8px 10px; position: relative; display: flex; flex-direction: column; }
.urun-gorsel { aspect-ratio: 1; border-radius: 13px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.urun-gorsel img { width: 92%; height: 92%; object-fit: contain; }
.indirim { position: absolute; top: 14px; left: 14px; background: var(--yaprak); color: #fff; font-weight: 800; font-size: 12px; border-radius: 8px; padding: 3px 7px; }
.urun-ad { font-weight: 700; font-size: 14px; line-height: 1.25; margin: 8px 2px 0; min-height: 35px; }
.urun-birim { font-size: 12px; color: var(--metin-3); margin: 1px 2px 0; }
.urun-alt { display: flex; align-items: flex-end; justify-content: space-between; margin: 8px 2px 0; }
.fiyat { font-family: var(--baslik); font-weight: 800; font-size: 18px; letter-spacing: -.3px; line-height: 1; }
.fiyat.firsat { color: var(--kirmizi); }
.eski { display: block; font-size: 12px; color: var(--metin-3); text-decoration: line-through; font-weight: 600; margin-bottom: 2px; }
.ekle { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--murekkep); color: #fff; display: grid; place-items: center; flex: none; }
.adet { display: flex; align-items: center; background: var(--murekkep); color: #fff; border-radius: 99px; height: 36px; flex: none; }
.adet button { border: 0; background: none; color: #fff; width: 32px; height: 36px; font-size: 18px; font-weight: 800; }
.adet span { min-width: 18px; text-align: center; font-weight: 800; font-size: 14px; }
.bos-sonuc { grid-column: 1 / -1; text-align: center; color: var(--metin-3); padding: 40px 10px; }
.sepet-cubuk { position: absolute; left: 14px; right: 14px; bottom: 26px; z-index: 20; height: 60px; border: 0; border-radius: 18px; background: var(--murekkep); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; box-shadow: 0 14px 30px rgba(31,27,24,.35); animation: yukari .3s cubic-bezier(.2,.9,.3,1); }
.sepet-cubuk b { font-size: 16px; }
.sepet-cubuk span { font-size: 13.5px; opacity: .8; }
@keyframes yukari { from { transform: translateY(120%); } }

/* sepet / teslimat */
.baslik-ust { position: sticky; top: 0; z-index: 10; background: rgba(242,244,239,.95); backdrop-filter: blur(12px); padding: 52px 16px 10px; display: flex; align-items: center; gap: 10px; }
.baslik-ust h1 { font-family: var(--baslik); font-size: 23px; font-weight: 800; letter-spacing: -.4px; margin: 0; flex: 1; }
.geri { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; display: grid; place-items: center; flex: none; }
.satir { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 16px; padding: 8px 10px; margin: 0 16px 8px; }
.satir img { width: 52px; height: 52px; object-fit: contain; flex: none; }
.satir .bilgi { flex: 1; min-width: 0; }
.satir .bilgi b { font-size: 14px; display: block; }
.satir .bilgi small { color: var(--metin-3); font-size: 12.5px; }
.kutu { background: #fff; border-radius: 18px; padding: 14px 16px; margin: 12px 16px 0; }
.kutu h3 { margin: 0 0 10px; font-size: 15px; }
.secenekler { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.secenekler.uc { grid-template-columns: 1fr 1fr 1fr; }
.secenek { border: 1.5px solid var(--cizgi); background: #fff; border-radius: 13px; padding: 9px 10px; text-align: left; font-size: 12.5px; color: var(--metin-2); line-height: 1.3; }
.secenek b { display: block; color: var(--murekkep); font-size: 13.5px; }
.secenek.secili { border-color: var(--murekkep); background: #f7f7f5; }
.alan { display: block; font-size: 12.5px; font-weight: 700; color: var(--metin-3); margin-bottom: 8px; }
.alan input, .alan select { display: block; width: 100%; margin-top: 4px; border: 1.5px solid var(--cizgi); border-radius: 12px; padding: 10px 12px; font-size: 16px; font-weight: 600; color: var(--murekkep); background: #fff; }
.toplam-satir { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; color: var(--metin-2); }
.toplam-satir.genel { color: var(--murekkep); font-family: var(--baslik); font-size: 21px; font-weight: 800; border-top: 1px solid var(--cizgi); margin-top: 6px; padding-top: 10px; }
.wp-dugme { display: flex; align-items: center; justify-content: center; gap: 9px; width: calc(100% - 32px); margin: 14px 16px 34px; height: 56px; border: 0; border-radius: 16px; background: #1aa457; color: #fff; font-weight: 800; font-size: 16.5px; }
.wp-dugme:active { background: #138a48; }
.kucuk-not { text-align: center; font-size: 12px; color: var(--metin-3); margin: -24px 24px 30px; }

/* whatsapp sohbeti (genel sohbet arayuzu) */
.wp { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--wp-zemin); }
.wp-ust { background: var(--wp-koyu); color: #fff; padding: 50px 12px 10px; display: flex; align-items: center; gap: 10px; flex: none; }
.wp-ust .geri { background: none; color: #fff; width: 32px; }
.wp-ust .avatar { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; }
.wp-ust .avatar img { width: 34px; }
.wp-ust b { display: block; font-size: 16px; }
.wp-ust small { font-size: 12.5px; opacity: .8; }
.wp-akis { flex: 1; overflow-y: auto; padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 6px; scrollbar-width: none;
  background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1.2px); background-size: 14px 14px; }
.wp-akis::-webkit-scrollbar { display: none; }
.wp-gun { align-self: center; background: #fff; border-radius: 8px; padding: 4px 10px; font-size: 12px; color: var(--metin-2); margin: 4px 0; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.balon { max-width: 84%; border-radius: 12px; padding: 7px 10px 6px; font-size: 14.2px; line-height: 1.38; box-shadow: 0 1px 1px rgba(0,0,0,.08); position: relative; white-space: pre-line; }
@keyframes belir { from { opacity: 0; transform: translateY(6px); } }
.balon.giden { align-self: flex-end; background: var(--wp-giden); border-top-right-radius: 3px; }
.balon.gelen { align-self: flex-start; background: #fff; border-top-left-radius: 3px; }
.balon .zaman { float: right; font-size: 11px; color: #667781; margin: 6px 0 -3px 10px; display: flex; align-items: center; gap: 2px; }
.balon .tik { color: #8696a0; }
.balon .tik.mavi { color: var(--wp-mavi); }
.cevaplar { display: flex; flex-direction: column; gap: 4px; align-self: flex-start; width: 84%; }
.cevaplar button { border: 0; background: #fff; border-radius: 10px; padding: 9px; font-weight: 700; color: #0a7cff; font-size: 14px; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.yaziyor { align-self: flex-start; background: #fff; border-radius: 12px; padding: 10px 14px; display: flex; gap: 4px; }
.yaziyor i { width: 7px; height: 7px; border-radius: 50%; background: #9aa5ab; animation: zipla 1s infinite; }
.yaziyor i:nth-child(2) { animation-delay: .15s; } .yaziyor i:nth-child(3) { animation-delay: .3s; }
@keyframes zipla { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.wp-alt { flex: none; display: flex; gap: 8px; padding: 8px 10px 26px; align-items: center; }
.wp-alt span { flex: 1; background: #fff; border-radius: 22px; height: 44px; display: flex; align-items: center; padding: 0 16px; color: #8696a0; font-size: 15px; }
.wp-alt i { width: 44px; height: 44px; border-radius: 50%; background: var(--wp-koyu); display: grid; place-items: center; color: #fff; }
.takip-kart { align-self: flex-start; background: #fff; border-radius: 12px; padding: 10px 12px; width: 84%; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.takip-kart b { font-size: 13.5px; display: block; margin-bottom: 8px; }
.adim-cizgi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.adim-cizgi span { height: 5px; border-radius: 3px; background: #e5e7e3; }
.adim-cizgi span.dolu { background: #1aa457; }
.adim-adlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; font-size: 10.5px; color: var(--metin-3); margin-top: 5px; font-weight: 700; }
.adim-adlar .aktif { color: #138a48; }

/* tost */
.tost { position: absolute; left: 16px; right: 16px; bottom: 100px; z-index: 50; background: var(--murekkep); color: #fff; border-radius: 15px; padding: 12px 15px; font-weight: 700; font-size: 14px; transform: translateY(20px); opacity: 0; transition: .25s; pointer-events: none; }
.tost.goster { transform: none; opacity: 1; }

/* ---------- tablet (market) ---------- */
.tablet { width: 580px; }
.tablet-cihaz { position: relative; height: 844px; background: #24211f; border-radius: 30px; padding: 14px; box-shadow: 0 30px 60px rgba(31,27,24,.25); }
.tablet-ekran { height: 100%; background: #f7f6f3; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.tablet .tost { bottom: 30px; left: 30px; right: 30px; }
.t-ust { background: #fff; border-bottom: 1px solid var(--cizgi); padding: 14px 18px 0; flex: none; }
.t-ust-satir { display: flex; align-items: center; gap: 12px; }
.t-ust-satir img { height: 30px; mix-blend-mode: multiply; }
.t-ust-satir .baslik { flex: 1; }
.t-ust-satir b { font-family: var(--baslik); font-size: 19px; font-weight: 800; display: block; letter-spacing: -.2px; }
.t-ust-satir small { color: var(--metin-3); font-size: 12.5px; font-weight: 600; }
.canli { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--yaprak-koyu); background: var(--yaprak-zemin); padding: 5px 10px; border-radius: 99px; }
.canli i { width: 8px; height: 8px; border-radius: 50%; background: var(--yaprak); animation: nabiz 1.6s infinite; }
@keyframes nabiz { 50% { opacity: .3; } }
.t-sekmeler { display: flex; gap: 2px; margin-top: 12px; }
.t-sekmeler button { border: 0; background: none; padding: 10px 12px; font-weight: 700; font-size: 14px; color: var(--metin-3); border-bottom: 3px solid transparent; display: flex; align-items: center; gap: 6px; }
.t-sekmeler button.secili { color: var(--murekkep); border-bottom-color: var(--kirmizi); }
.t-sekmeler i { font-style: normal; background: #ecebe7; color: var(--metin-2); border-radius: 99px; font-size: 12px; padding: 1px 7px; }
.t-sekmeler button.secili i.dolu, .t-sekmeler i.yeni { background: var(--kirmizi); color: #fff; }
.t-govde { flex: 1; overflow-y: auto; padding: 14px 16px 20px; scrollbar-width: thin; }
.siparis-kart { width: 100%; border: 1px solid var(--cizgi); background: #fff; border-radius: 16px; padding: 12px 14px; text-align: left; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; margin-bottom: 10px; }
.siparis-kart:hover { border-color: #cfd4c9; }
.siparis-kart.yeni-gelen { border: 2px solid var(--kirmizi); animation: gelis .5s cubic-bezier(.2,1.4,.4,1), parla 1.6s 3; }
@keyframes gelis { from { transform: translateY(-14px) scale(.97); opacity: 0; } }
@keyframes parla { 50% { box-shadow: 0 0 0 6px rgba(142,8,9,.14); } }
.siparis-no { font-family: var(--baslik); font-weight: 800; font-size: 18px; grid-row: span 2; background: #f2f4ef; border-radius: 12px; padding: 10px 10px; min-width: 64px; text-align: center; }
.siparis-kart b { font-size: 15px; }
.siparis-kart small { color: var(--metin-3); font-size: 12.5px; font-weight: 600; }
.siparis-kart .tutar { font-family: var(--baslik); font-weight: 800; font-size: 17px; text-align: right; }
.siparis-kart .saat { text-align: right; }
.bos-liste { text-align: center; color: var(--metin-3); padding: 60px 20px; font-size: 14.5px; }
.bos-liste b { display: block; color: var(--murekkep); font-family: var(--baslik); font-size: 19px; margin-bottom: 4px; }

.detay-ust { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.detay-ust .geri { background: #fff; border: 1px solid var(--cizgi); }
.detay-ust h2 { font-family: var(--baslik); font-size: 21px; margin: 0; font-weight: 800; flex: 1; }
.durum-rozet { font-size: 12.5px; font-weight: 800; padding: 5px 10px; border-radius: 99px; }
.durum-rozet.yeni { background: var(--kirmizi-acik); color: var(--kirmizi-koyu); }
.durum-rozet.hazirlaniyor { background: #fef3c7; color: #854d0e; }
.durum-rozet.yolda { background: #e0f2fe; color: #075985; }
.durum-rozet.tamam { background: var(--yaprak-zemin); color: var(--yaprak-koyu); }
.musteri-kutu { background: #fff; border: 1px solid var(--cizgi); border-radius: 14px; padding: 11px 13px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 13.5px; margin-bottom: 12px; }
.musteri-kutu b { font-size: 15px; }
.musteri-kutu .etiketler { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.musteri-kutu .etiketler span { background: #f2f4ef; border-radius: 99px; padding: 3px 9px; font-size: 12px; font-weight: 700; color: var(--metin-2); }
.musteri-kutu .etiketler span.vurgu { background: #fef3c7; color: #854d0e; }
.toplama-bas { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 2px 8px; }
.toplama-bas h3 { margin: 0; font-size: 15px; }
.toplama-bas small { color: var(--metin-3); font-weight: 700; font-size: 12.5px; }
.ilerleme { height: 6px; background: #e5e7e3; border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
.ilerleme i { display: block; height: 100%; background: var(--yaprak); transition: width .3s; }
.reyon-bas { font-size: 11.5px; font-weight: 800; color: var(--metin-3); text-transform: uppercase; letter-spacing: .05em; margin: 10px 2px 5px; }
.kalem { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--cizgi); border-radius: 12px; padding: 6px 8px; margin-bottom: 6px; }
.kalem img { width: 44px; height: 44px; object-fit: contain; }
.kalem b { font-size: 14px; display: block; }
.kalem small { font-size: 12px; color: var(--metin-3); font-weight: 600; }
.kalem.alindi { background: #f6fbf3; border-color: #cfe7c4; }
.kalem.yok { opacity: .55; }
.kalem.yok b { text-decoration: line-through; }
.kalem .not { color: var(--yaprak-koyu); font-weight: 700; }
.kalem .not.bekle { color: #a16207; }
.k-dugme { border: 1.5px solid var(--cizgi); background: #fff; border-radius: 10px; height: 36px; padding: 0 11px; font-weight: 800; font-size: 13px; }
.k-dugme.tik { width: 40px; padding: 0; display: grid; place-items: center; }
.k-dugme.tik.on { background: var(--yaprak); border-color: var(--yaprak); color: #fff; }
.k-dugme.yokd.on { background: var(--kirmizi-acik); border-color: #ebc2bc; color: var(--kirmizi-koyu); }
.k-dugme:disabled { opacity: .4; cursor: not-allowed; }
.detay-toplam { display: flex; justify-content: space-between; font-family: var(--baslik); font-weight: 800; font-size: 19px; margin: 12px 2px; }
.eylem-cubuk { display: flex; gap: 8px; }
.t-ana { flex: 1; height: 52px; border: 0; border-radius: 14px; background: var(--kirmizi); color: #fff; font-weight: 800; font-size: 15.5px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.t-ana.yesil { background: var(--yaprak-koyu); }
.t-ana.turuncu { background: #c9640a; }   /* Hazirlamaya basla (patron 2026-10-17): turuncu; Teslim edildi yesil */
.t-ana.koyu { background: var(--murekkep); }
.t-ana:disabled { opacity: .45; cursor: not-allowed; }
.eylem-not { font-size: 12.5px; color: var(--metin-3); margin: 6px 2px 0; text-align: center; }
.kurye-sec { display: flex; gap: 8px; margin-bottom: 8px; }
.kurye-sec button { flex: 1; border: 1.5px solid var(--cizgi); background: #fff; border-radius: 12px; padding: 8px; font-weight: 700; font-size: 13.5px; }
.kurye-sec button.secili { border-color: var(--murekkep); background: #f7f7f5; }

/* ---------- dar ekranlar ---------- */
.gorunum-sec { display: none; }
@media (max-width: 1360px) { .sahne { grid-template-columns: 390px 580px; } .sunum { display: none; } }
@media (max-width: 1040px) {
  body { background: var(--zemin); }
  .sahne { zoom: 1; display: block; padding: 0; min-height: 100dvh; }
  .gorunum-sec { display: flex; position: fixed; z-index: 100; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom)); background: rgba(31,27,24,.92); border-radius: 99px; padding: 4px; gap: 2px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
  .gorunum-sec button { border: 0; background: none; color: #d4cec6; border-radius: 99px; padding: 9px 14px; font-weight: 700; font-size: 13.5px; white-space: nowrap; position: relative; }
  .gorunum-sec button[aria-pressed="true"] { background: #fff; color: var(--murekkep); }
  .gorunum-sec i { position: absolute; top: 4px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--kirmizi); }
  .telefon, .tablet { width: 100%; }
  .ekran { width: 100%; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
  .durum-cubugu { display: none; }
  .bant { padding-top: calc(env(safe-area-inset-top) + 16px); }
  .baslik-ust { padding-top: calc(env(safe-area-inset-top) + 12px); }
  .wp-ust { padding-top: calc(env(safe-area-inset-top) + 10px); }
  .sepet-cubuk { bottom: 78px; }
  .wp-alt { padding-bottom: 78px; }
  .tablet-cihaz { height: 100dvh; border-radius: 0; padding: 0; box-shadow: none; }
  .tablet-ekran { border-radius: 0; }
  .t-govde { padding-bottom: 90px; }
  .cihaz-etiket { display: none; }
  body[data-gorunum="telefon"] .tablet, body[data-gorunum="tablet"] .telefon { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.sunum-dugmeler { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.oynat { border: 0; background: var(--kirmizi); color: #fff; border-radius: 99px; padding: 9px 16px; font-weight: 800; font-size: 13.5px; box-shadow: 0 6px 14px rgba(142,8,9,.25); }
.oynat:hover { background: var(--kirmizi-koyu); }
/* sekmeler dar ekranda sigmazsa yana kayar */
.t-sekmeler { overflow-x: auto; scrollbar-width: none; }
.t-sekmeler::-webkit-scrollbar { display: none; }
.t-sekmeler button { flex: none; white-space: nowrap; }
@media (max-width: 480px) { .t-sekmeler button { padding: 10px 8px; font-size: 13.5px; } .t-ust { padding: 12px 12px 0; } .t-govde { padding: 12px 12px 90px; } }

/* ---------- sadelestirme (2026-10-12): adim seridi + yerlesim ---------- */
.sahne { grid-template-areas: "sunum hikaye hikaye" "sunum telefon tablet"; row-gap: 22px; }
.sunum { grid-area: sunum; }
.hikaye { grid-area: hikaye; }
.telefon { grid-area: telefon; }
.tablet { grid-area: tablet; }
.sunum h1 { font-size: 36px; }
.sunum-giris { font-size: 16px; margin-bottom: 18px; }
.sunum-not { margin-top: 14px; }
.hikaye { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-self: end; }
.hikaye li { background: rgba(255,255,255,.55); border: 1px solid #d3d9cd; border-radius: 16px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; transition: background .3s, border-color .3s, transform .3s; }
.hikaye .no { width: 30px; height: 30px; border-radius: 50%; background: #d3d9cd; color: #fff; font-weight: 800; display: grid; place-items: center; flex: none; font-size: 14px; }
.hikaye b { display: block; font-size: 14.5px; line-height: 1.2; }
.hikaye small { color: var(--metin-3); font-size: 12px; font-weight: 600; }
.hikaye li.simdi { background: #fff; border-color: var(--kirmizi); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(142,8,9,.12); }
.hikaye li.simdi .no { background: var(--kirmizi); }
.hikaye li.bitti .no { background: var(--yaprak); }
@media (max-width: 1360px) { .sahne { grid-template-areas: "hikaye hikaye" "telefon tablet"; } }
@media (max-width: 1040px) { .hikaye { display: none; } }
.t-ana { width: 100%; }
.teslimat { display: flex; align-items: center; gap: 12px; }
.teslimat > div { flex: 1; min-width: 0; }
.teslimat h3 { margin: 0 0 4px; font-size: 13px; color: var(--metin-3); }
.teslimat b { font-size: 15px; display: block; }
.teslimat span { font-size: 13.5px; color: var(--metin-2); }
.degistir { border: 1.5px solid var(--cizgi); background: #fff; border-radius: 99px; padding: 7px 12px; font-weight: 700; font-size: 13px; flex: none; }
.sepet-not { margin: 8px 0 0; font-size: 13px; color: var(--metin-3); line-height: 1.45; }
.adres-satir { display: flex; align-items: center; gap: 8px; margin: -2px 2px 14px; color: var(--metin-2); font-size: 14px; }

/* ---------- tarife gore alisveris (Kiler prototipiyle ayni sahne dili) ---------- */
.bolum { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 18px; margin: 20px 0 10px; }
.bolum h2 { font-family: var(--baslik); font-size: 20px; font-weight: 800; letter-spacing: -.3px; margin: 0; }
.bolum small { color: var(--metin-3); font-size: 12.5px; font-weight: 600; }
.yatay { display: flex; gap: 12px; overflow-x: auto; padding: 0 18px 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.yatay::-webkit-scrollbar { display: none; }
.yatay > * { scroll-snap-align: start; flex: none; }
.tarif-kart { width: 230px; background: var(--yuzey); border-radius: 20px; overflow: hidden; border: 0; text-align: left; padding: 0; display: flex; flex-direction: column; }
.tarif-sahne { position: relative; height: 130px; background: var(--ton, #f8ecea); overflow: hidden; flex: none; }
.sahne-tabak { position: absolute; left: 50%; top: 52%; width: 116px; height: 116px; transform: translate(-58%, -50%); border-radius: 50%; background: rgba(255,255,255,.75); box-shadow: 0 10px 24px rgba(31,27,24,.08); }
.sahne-ana { position: absolute; left: 50%; top: 52%; width: 108px; height: 108px; object-fit: contain; transform: translate(-58%, -50%); mix-blend-mode: multiply; border-radius: 50%; filter: brightness(1.05); }
.sahne-yan { position: absolute; width: 46px; height: 46px; border-radius: 50%; background: #fff; box-shadow: 0 6px 14px rgba(31,27,24,.12); display: grid; place-items: center; animation: suzul 4.2s ease-in-out infinite; }
.sahne-yan img { width: 80%; height: 80%; object-fit: contain; }
.sahne-yan.y1 { right: 12%; top: 12px; }
.sahne-yan.y2 { right: 5%; top: 60px; width: 40px; height: 40px; animation-delay: -1.4s; }
.sahne-yan.y3 { left: 8%; bottom: 12px; width: 38px; height: 38px; animation-delay: -2.8s; }
@keyframes suzul { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
.tarif-alt { display: block; padding: 10px 13px 12px; }
.tarif-alt b { font-family: var(--baslik); font-size: 16.5px; font-weight: 800; display: block; color: var(--murekkep); }
.tarif-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tarif-meta span { font-size: 12px; font-weight: 700; color: var(--metin-2); background: #f2f4ef; border-radius: 99px; padding: 4px 9px; }
.tarif-ust { position: relative; background: #fff; padding: 0 0 14px; border-radius: 0 0 26px 26px; }
.tarif-ust .tarif-sahne.buyuk { height: 270px; }
.tarif-sahne.buyuk .sahne-tabak { width: 180px; height: 180px; top: 58%; }
.tarif-sahne.buyuk .sahne-ana { width: 170px; height: 170px; top: 58%; }
.tarif-sahne.buyuk .sahne-yan { width: 64px; height: 64px; }
.tarif-sahne.buyuk .sahne-yan.y1 { top: 62px; }
.tarif-sahne.buyuk .sahne-yan.y2 { top: 136px; width: 56px; height: 56px; }
.tarif-sahne.buyuk .sahne-yan.y3 { width: 54px; height: 54px; bottom: 18px; }
.tarif-ust h1 { font-family: var(--baslik); font-size: 27px; font-weight: 800; margin: 14px 18px 6px; letter-spacing: -.5px; }
.tarif-ust p { margin: 0 18px; color: var(--metin-2); font-size: 14.5px; line-height: 1.45; }
.geri.yuzen { position: absolute; top: 52px; left: 14px; z-index: 2; box-shadow: 0 2px 10px rgba(31,27,24,.15); }
.malzeme-satir { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 7px 0; text-align: left; border-bottom: 1px solid #f0f1ed; }
.malzeme-satir:last-child { border-bottom: 0; }
.malzeme-satir img { width: 42px; height: 42px; object-fit: contain; flex: none; }
.malzeme-satir .ad { flex: 1; min-width: 0; }
.malzeme-satir .ad b { display: block; font-size: 14.5px; }
.malzeme-satir .ad small { color: var(--metin-3); font-size: 12.5px; }
.malzeme-satir .fiyat-k { font-weight: 800; font-size: 14px; }
.malzeme-satir:not(.secili) img, .malzeme-satir:not(.secili) .ad, .malzeme-satir:not(.secili) .fiyat-k { opacity: .45; }
.kutucuk { width: 26px; height: 26px; border-radius: 8px; border: 2px solid #c9cfc3; display: grid; place-items: center; flex: none; color: #fff; }
.malzeme-satir.secili .kutucuk { background: var(--yaprak); border-color: var(--yaprak); }
.kutucuk svg { width: 16px; height: 16px; }
.tarif-adim { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.5; color: var(--metin-2); }
.tarif-adim li { margin-bottom: 6px; }
.sepet-cubuk:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 1040px) { .geri.yuzen { top: calc(env(safe-area-inset-top) + 12px); } }

/* yalnizca yeni gelen mesaj belirir */
.balon.yeni, .cevaplar.yeni, .takip-kart.yeni { animation: belir .25s ease-out; }

/* ---------- acilis ekrani (telefon) ---------- */
.acilis { position: absolute; inset: 0; z-index: 60; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; cursor: pointer; }
.acilis[hidden] { display: none; }
/* logo ILK KAREDEN gorunur: acilista bir an bile baska bir sey (eski elma simgesi, urunler) gorunmesin */
.acilis-logo { width: 68%; max-width: 280px; height: auto; transform: scale(.96); }
.acilis-yazi { margin: 0; font-family: var(--baslik); font-weight: 700; font-size: 17px; color: var(--metin-2); opacity: 0; letter-spacing: -.1px; }
.acilis-cizgi { position: absolute; bottom: 64px; width: 72px; height: 4px; border-radius: 2px; background: #f1f1ef; overflow: hidden; opacity: 0; }
.acilis-cizgi i { display: block; height: 100%; width: 40%; border-radius: 2px; background: var(--kirmizi); }
.acilis.oyna .acilis-logo { animation: logoGel .9s cubic-bezier(.2,.9,.25,1) forwards; }
.acilis.oyna .acilis-yazi { animation: yaziGel .6s .45s ease-out forwards; }
.acilis.oyna .acilis-cizgi { animation: yaziGel .4s .5s ease-out forwards; }
.acilis.oyna .acilis-cizgi i { animation: yukle 1.1s .5s ease-in-out infinite; }
.acilis.kapan { animation: acilisKapan .45s ease-in forwards; }
@keyframes logoGel { to { transform: scale(1); } }
@keyframes yaziGel { to { opacity: 1; } }
@keyframes yukle { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
@keyframes acilisKapan { to { opacity: 0; transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .acilis-logo, .acilis-yazi, .acilis-cizgi { opacity: 1; transform: none; } }

/* ---------- 2026-10-12 duzeltmeleri: alt menu, arama, tarifler, sade WhatsApp ---------- */
/* alt menu: hep gorunur (Magaza · Tarifler · Sepet) */
.alt-menu { position: absolute; left: 0; right: 0; bottom: 0; z-index: 25; height: 78px; padding: 6px 10px 18px; background: rgba(255,255,255,.97); backdrop-filter: blur(14px); border-top: 1px solid var(--cizgi); display: grid; grid-template-columns: repeat(3, 1fr); }
.alt-menu button { position: relative; border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; font-weight: 700; color: #8a857f; }
.alt-menu button.aktif { color: var(--kirmizi); }
.alt-menu .rozet { position: absolute; top: 2px; left: calc(50% + 6px); background: var(--kirmizi); color: #fff; font-style: normal; font-size: 11px; font-weight: 800; min-width: 19px; height: 19px; border-radius: 10px; display: grid; place-items: center; padding: 0 5px; border: 2px solid #fff; }
.alt-bosluk { height: 96px; }
.sepet-cubuk.menu-ustu { bottom: 90px; }
/* arama */
.arama .temizle { border: 0; background: #ecebe7; color: var(--metin-2); width: 26px; height: 26px; border-radius: 50%; font-size: 17px; line-height: 1; display: grid; place-items: center; flex: none; }
.arama input:placeholder-shown + .temizle { display: none; }
.arama input::-webkit-search-cancel-button { display: none; }
.ara-ince { margin: 0 16px 6px; box-shadow: none; border: 1.5px solid var(--cizgi); }
.bolum-link { border: 0; background: none; color: var(--kirmizi); font-weight: 800; font-size: 13.5px; padding: 4px 0; }
.sonuc-sayi { margin: 8px 16px 10px; color: var(--metin-3); font-size: 13px; font-weight: 700; }
.bos-sonuc small { display: block; margin-top: 6px; font-size: 13px; }
/* tarifler sekmesi: tam genislik kartlar */
.tarif-liste { padding: 0 16px; display: grid; gap: 12px; }
.tarif-kart.tam { width: 100%; }
.tarif-kart.tam .tarif-sahne { height: 150px; }
.baslik-sag { color: var(--metin-3); font-weight: 700; font-size: 14px; }
/* bos sepet */
.bos-sepet { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 60px 34px; color: var(--metin-3); }
.bos-sepet svg { width: 46px; height: 46px; color: #c9cfc3; }
.bos-sepet b { color: var(--murekkep); font-family: var(--baslik); font-size: 21px; }
.bos-sepet span { font-size: 14px; line-height: 1.45; margin-bottom: 8px; }
.bos-sepet .degistir { padding: 10px 18px; font-size: 14px; }
/* magazada aktif siparis seridi */
.siparis-serit { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); margin: 14px 16px 0; background: #fff; border: 1.5px solid #bfe8cf; border-radius: 16px; padding: 12px 14px; text-align: left; }
.siparis-serit .ikon { width: 38px; height: 38px; border-radius: 50%; background: #e7f7ee; color: #138a48; display: grid; place-items: center; flex: none; }
.siparis-serit span:nth-child(2) { flex: 1; }
.siparis-serit b { display: block; font-size: 15px; }
.siparis-serit small { color: var(--metin-3); font-size: 12.5px; }
/* WhatsApp: ustte sabit durum karti, kisa mesajlar */
.durum-karti { flex: none; background: #fff; margin: 10px 10px 2px; border-radius: 16px; padding: 12px 14px 12px; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.dk-ust { display: flex; align-items: center; gap: 12px; }
.dk-ikon { width: 44px; height: 44px; border-radius: 50%; background: #e7f7ee; color: #138a48; display: grid; place-items: center; flex: none; }
.durum-karti.yolda .dk-ikon { background: #e0f2fe; color: #075985; }
.dk-metin { flex: 1; min-width: 0; }
.dk-metin b { display: block; font-family: var(--baslik); font-size: 19px; font-weight: 800; letter-spacing: -.2px; }
.dk-metin small { color: var(--metin-3); font-size: 12.5px; }
.dk-tutar { text-align: right; font-family: var(--baslik); font-weight: 800; font-size: 17px; }
.dk-tutar small { display: block; font-family: var(--govde); font-weight: 600; font-size: 11px; color: var(--metin-3); }
.dk-adimlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 12px; }
.dk-adimlar span { font-size: 11px; font-weight: 700; color: #a8a29b; padding-top: 7px; border-top: 4px solid #e8e8e4; border-radius: 2px; }
.dk-adimlar span.dolu { border-top-color: #1aa457; color: #4d7f61; }
.dk-adimlar span.simdi { color: #138a48; }
.balon { font-size: 15px; line-height: 1.4; }
.balon .soluk { color: #667781; font-size: 13px; }
.cevaplar button { padding: 11px; font-size: 14.5px; }
.cevaplar button.ana { background: #1aa457; color: #fff; }
.wp-donus { flex: none; margin: 8px 12px 24px; height: 46px; border: 0; border-radius: 23px; background: #fff; color: var(--murekkep); font-weight: 800; font-size: 14.5px; display: flex; align-items: center; justify-content: center; gap: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
/* dar ekran: gorunum anahtari uste (alttaki menuyle cakismasin) */
@media (max-width: 1040px) {
  .gorunum-sec { top: calc(8px + env(safe-area-inset-top)); bottom: auto; }
  .bant { padding-top: calc(env(safe-area-inset-top) + 64px); }
  .baslik-ust { padding-top: calc(env(safe-area-inset-top) + 62px); }
  .wp-ust { padding-top: calc(env(safe-area-inset-top) + 58px); }
  .tarif-ust .tarif-sahne.buyuk { padding-top: 40px; }
  .geri.yuzen { top: calc(env(safe-area-inset-top) + 60px); }
  .alt-menu { height: calc(70px + env(safe-area-inset-bottom)); padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .sepet-cubuk.menu-ustu { bottom: calc(82px + env(safe-area-inset-bottom)); }
  .wp-donus { margin-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .t-ust { padding-top: calc(env(safe-area-inset-top) + 58px); }
}

/* ---------- internetten tarif ---------- */
.web-liste { display: grid; gap: 8px; padding: 0 16px; }
.web-tarif { display: flex; align-items: center; gap: 12px; width: 100%; background: #fff; border: 0; border-radius: 16px; padding: 11px 12px; text-align: left; }
.web-tarif .ikon { width: 40px; height: 40px; border-radius: 12px; background: #fdf1d8; color: #a16207; display: grid; place-items: center; flex: none; }
.web-tarif span:nth-child(2) { flex: 1; min-width: 0; }
.web-tarif b { display: block; font-size: 15px; }
.web-tarif small { color: var(--metin-3); font-size: 12.5px; }
.web-tarif > svg:last-child { color: #b9b3ab; flex: none; }
.google-bag { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 16px 0; padding: 12px; border-radius: 14px; border: 1.5px dashed #c9cfc3; color: var(--metin-2); font-weight: 700; font-size: 13.5px; text-decoration: none; background: rgba(255,255,255,.5); text-align: center; }
.web-yukleniyor { display: flex; align-items: center; gap: 10px; margin: 0 16px; padding: 14px; background: #fff; border-radius: 16px; color: var(--metin-2); font-size: 14px; font-weight: 600; }
.web-not { margin: 0 16px; color: var(--metin-3); font-size: 14px; }
.donen { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid #e5e2dc; border-top-color: var(--kirmizi); animation: don .8s linear infinite; flex: none; }
.donen.buyuk { width: 38px; height: 38px; border-width: 4px; }
@keyframes don { to { transform: rotate(360deg); } }
.tarif-hazirlaniyor { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 80px 34px; color: var(--metin-3); font-size: 14px; }
.tarif-hazirlaniyor b { color: var(--murekkep); font-family: var(--baslik); font-size: 20px; }
.web-rozet { background: #fdf1d8 !important; color: #92400e !important; }
.web-kaynak { margin: 8px 18px 0 !important; font-size: 12.5px !important; color: var(--metin-3) !important; }
.web-kaynak a { color: var(--kirmizi); font-weight: 700; }
.malzeme-satir.yok-urun { cursor: default; }
.malzeme-satir.yok-urun .ad { opacity: .55; }
.malzeme-satir.yok-urun .kutucuk { border-style: dashed; }

/* sunum ekran goruntuleri: animasyon yok, her sey son hâliyle (bkz. uygulama.js #oynat/#tarif adresleri) */
.animsiz *, .animsiz *::before, .animsiz *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition: none !important; }