/* vimoxo.tr satış sitesi: açık, kurumsal çizgi. Tek mavi (#0854A0, ERP ile aynı), Inter, gerçek ekran görüntüleri.
   Hareket ölçülü: yalnız aşağıdan beliren bölümler (site.js). Düğmeler hover'da yerinden kalkmaz. */

:root {
    --mavi: #0854a0;
    --mavi-koyu: #063f78;
    --mavi-acik: #eaf2fb;
    --mavi-cizgi: #c5d9ef;
    --metin: #0f172a;
    --metin-2: #475569;
    --soluk: #64748b;
    --cizgi: #e2e8f0;
    --zemin: #ffffff;
    --zemin-2: #f8fafc;
    --koyu: #0b1526;
    --basari: #15803d;
    --hata: #dc2626;
    --r: 12px;
    --r-kontrol: 8px;
    --golge: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -12px rgba(15, 23, 42, .18);
    --golge-buyuk: 0 2px 4px rgba(15, 23, 42, .04), 0 40px 80px -24px rgba(15, 23, 42, .28);
    --yazi: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; font-family: var(--yazi); font-size: 16px; line-height: 1.6; color: var(--metin); background: var(--zemin); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; color: var(--metin); letter-spacing: -.02em; line-height: 1.15; font-weight: 700; }
p { margin: 0; }
main { overflow-x: clip; }
.kap { width: min(1200px, 100% - 48px); margin-inline: auto; }
.ikon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ikon.dolgulu { fill: currentColor; stroke: none; }
.sayisal { font-variant-numeric: tabular-nums; }

/* Düğmeler */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--r-kontrol); font: inherit; font-size: 15px; font-weight: 600; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
.dugme .ikon { width: 17px; height: 17px; }
.dugme.birincil { color: #fff; background: var(--mavi); }
.dugme.birincil:hover { background: var(--mavi-koyu); }
.dugme.ikincil { color: var(--metin); background: var(--zemin); border-color: var(--cizgi); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.dugme.ikincil:hover { border-color: #cbd5e1; background: var(--zemin-2); }
.dugme.beyaz { color: var(--mavi); background: #fff; }
.dugme.beyaz:hover { background: var(--mavi-acik); }
.dugme.cizgili-beyaz { color: #fff; border-color: rgba(255, 255, 255, .4); }
.dugme.cizgili-beyaz:hover { background: rgba(255, 255, 255, .1); }
.dugme.kucuk { height: 38px; padding: 0 14px; font-size: 14px; }
.dugme.buyuk { height: 50px; padding: 0 24px; font-size: 16px; }
.dugme.tam { width: 100%; }
.dugme:disabled { opacity: .6; cursor: not-allowed; }
.dugme:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--mavi); outline-offset: 2px; }
.baglanti { color: var(--mavi); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.baglanti:hover { color: var(--mavi-koyu); text-decoration: underline; text-underline-offset: 3px; }
.baglanti .ikon { width: 16px; height: 16px; }

/* Üst çubuk */
.ust { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--cizgi); }
.ust-ic { display: flex; align-items: center; gap: 36px; height: 68px; }
.marka { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.marka img { height: 20px; width: auto; }
.marka-ek { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: #fff; background: var(--mavi); padding: 3px 7px 2px; border-radius: 5px; }
.ust-menu { display: flex; gap: 4px; }
.ust-menu a { color: var(--metin-2); font-size: 15px; font-weight: 500; padding: 8px 12px; border-radius: 6px; transition: color .15s, background .15s; }
.ust-menu a:hover { color: var(--metin); background: var(--zemin-2); }
.ust-menu a.etkin { color: var(--mavi); }
.ust-eylem { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.ust-tel { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: var(--metin-2); }
.ust-tel:hover { color: var(--metin); }
.ust-tel .ikon { width: 16px; height: 16px; }
.menu-dugme { display: none; width: 42px; height: 42px; border-radius: var(--r-kontrol); border: 1px solid var(--cizgi); background: var(--zemin); color: var(--metin); cursor: pointer; place-items: center; }

/* Ortak bölüm başlıkları */
.bolum { padding: 72px 0; }
.bolum.gri { background: var(--zemin-2); border-block: 1px solid var(--cizgi); }
.ust-yazi { display: inline-block; font-size: 14px; font-weight: 600; color: var(--mavi); margin-bottom: 14px; }
.bolum-bas { max-width: 720px; margin-bottom: 44px; }
.bolum-bas.orta { margin-inline: auto; text-align: center; }
.bolum-bas h2 { font-size: clamp(30px, 3.6vw, 44px); }
.bolum-bas p { margin-top: 16px; font-size: 18px; color: var(--metin-2); }

/* Kahraman */
.kahraman { position: relative; isolation: isolate; padding: 88px 0 96px; background: linear-gradient(180deg, var(--mavi-acik) 0%, rgba(234, 242, 251, 0) 70%); overflow: hidden; }
.kahraman::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(8, 84, 160, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(8, 84, 160, .06) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(180deg, #000, transparent 75%); }
.kahraman-ic { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); gap: 56px; align-items: center; }
.rozet { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px; background: #fff; border: 1px solid var(--mavi-cizgi); font-size: 13.5px; font-weight: 500; color: var(--metin-2); }
.rozet b { font-size: 12px; font-weight: 600; color: #fff; background: var(--mavi); border-radius: 999px; padding: 2px 9px; }
.kahraman h1 { font-size: clamp(38px, 4.6vw, 58px); letter-spacing: -.035em; line-height: 1.06; margin-top: 22px; }
.kahraman h1 span { color: var(--mavi); }
.kahraman .giris { margin-top: 20px; font-size: 18.5px; color: var(--metin-2); max-width: 540px; }
.eylemler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.kontrol-liste { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14.5px; color: var(--metin-2); }
.kontrol-liste li { display: inline-flex; align-items: center; gap: 7px; }
.kontrol-liste .ikon { width: 17px; height: 17px; color: var(--basari); }
.kahraman-gorsel { position: relative; }
.kahraman-gorsel .telefon-cerceve { position: absolute; width: 21%; right: -2%; bottom: -8%; }

/* Ana sayfa kahramanı (iyonosfer düzeni): koyu zemin, sağda dönen gerçek ekranlar ve köşelerinde beliren bilgi kartları,
   altta ilerleme çubuklu ekran göstergeleri. Geçişi site.js yapar; is-canli her geçişte yeniden eklenir. */
.kahraman.koyu { background: radial-gradient(ellipse 70% 60% at 85% 20%, rgba(59, 130, 246, .22), transparent 60%), radial-gradient(ellipse 50% 50% at 0% 100%, rgba(8, 84, 160, .35), transparent 60%), var(--koyu); color: #e2e8f0; padding: 80px 0 0; }
.kahraman.koyu::before { background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); mask-image: radial-gradient(ellipse 80% 70% at 60% 30%, #000 20%, transparent 75%); }
.kahraman.koyu h1 { color: #fff; }
.kahraman.koyu h1 span { color: #7cb4ff; }
.kahraman.koyu .giris { color: #a8b3c7; }
.kahraman.koyu .rozet { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #cbd5e1; transition: border-color .15s, color .15s; }
.kahraman.koyu a.rozet:hover { border-color: rgba(255, 255, 255, .4); color: #fff; }
.kahraman.koyu .rozet b { flex: none; white-space: nowrap; background: #16a34a; }
.kahraman.koyu .kontrol-liste { color: #a8b3c7; }
.kahraman.koyu .kontrol-liste .ikon { color: #4ade80; }
.kahraman.koyu .dugme.ikincil { color: #fff; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22); box-shadow: none; }
.kahraman.koyu .dugme.ikincil:hover { background: rgba(255, 255, 255, .12); }
.kareler { display: grid; padding: 30px 40px 50px 30px; }
.kare { position: relative; grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s ease .4s, visibility 0s linear .75s; }
.kare.etkin { z-index: 1; opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.kare .ekran { border-color: rgba(255, 255, 255, .14); box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .7); }
.yuzen { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; min-width: 230px; max-width: 290px; padding: 12px 14px; border: 1px solid var(--cizgi); border-radius: 12px; background: #fff; color: var(--metin); box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .45); }
.yuzen .kart-ikon { width: 38px; height: 38px; flex: none; }
.yuzen .kart-ikon.yesil { background: #dcfce7; color: var(--basari); }
.yuzen .kart-ikon.turuncu { background: #ffedd5; color: #c2410c; }
.yuzen b { display: block; font-size: 14px; font-weight: 600; }
.yuzen span:not(.kart-ikon) { display: block; font-size: 12.5px; color: var(--metin-2); }
.yuzen.sag-ust { right: -10px; top: 0; }
.yuzen.sol-alt { left: -10px; bottom: 10px; }
.kare.canli .yuzen { animation: yuzen-gel .55s cubic-bezier(.2, .8, .2, 1) both; }
.kare.canli .yuzen.sag-ust { animation-delay: .35s; }
.kare.canli .yuzen.sol-alt { animation-delay: .7s; }
.kare.canli .ekran { animation: ekran-gel .6s ease both; }
@keyframes yuzen-gel { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes ekran-gel { from { opacity: .4; transform: scale(.985); } }
.gostergeler { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 22px 0 44px; }
.gosterge { position: relative; overflow: hidden; padding: 8px 16px 10px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(255, 255, 255, .04); color: #cbd5e1; font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.gosterge:hover, .gosterge.etkin { border-color: rgba(255, 255, 255, .55); color: #fff; background: rgba(255, 255, 255, .08); }
.gosterge i { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: #60a5fa; transform: scaleX(0); transform-origin: left; }
.gosterge.etkin i { animation: ilerle 6s linear forwards; }
@keyframes ilerle { to { transform: scaleX(1); } }
.kahraman.koyu .gercekler { margin-top: 0; background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .12); border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
.kahraman.koyu .gercekler > div { border-color: rgba(255, 255, 255, .12); }
.kahraman.koyu .gercekler strong { color: #fff; }
.kahraman.koyu .gercekler span { color: #a8b3c7; }

/* Bölüm üst yazısı, iyonosfer gibi solunda ince çizgiyle */
.ust-yazi.cizgili { display: inline-flex; align-items: center; gap: 14px; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; }
.ust-yazi.cizgili::before { content: ""; width: 32px; height: 1px; background: currentColor; }

/* Neden Vimoxo POS: bento (iyonosfer düzeni). Sahneler data-canlan görününce .canli ile bir kez oynar. */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.bento-kart { display: flex; flex-direction: column; padding: 28px; border-radius: 16px; background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(8, 84, 160, .05), transparent 60%), #fff; }
.bento-kart.b5 { grid-column: span 5; }
.bento-kart.b7 { grid-column: span 7; }
.bento-kart.b4 { grid-column: span 4; }
.bento-kart h3 { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 22px; font-size: 19px; }
.bento-kart h3 .ikon { color: var(--mavi); }
.bento-kart > p { margin-top: 8px; color: var(--metin-2); font-size: 15px; }
/* 22 yıl: rakam ve zaman çizgisi; noktalar sırayla dolar */
.sahne-yil > p { display: flex; align-items: baseline; gap: 6px; }
.sahne-yil strong { font-size: 104px; line-height: .9; letter-spacing: -.06em; color: var(--koyu); }
.sahne-yil > p span { font-size: 26px; font-weight: 700; color: var(--mavi); }
.yil-cizgi { position: relative; display: flex; justify-content: space-between; list-style: none; margin: 34px 0 0; padding: 0; }
.yil-cizgi::before { content: ""; position: absolute; left: 7px; right: 7px; top: 6px; height: 2px; background: var(--mavi-cizgi); }
.yil-cizgi::after { content: ""; position: absolute; left: 7px; right: 7px; top: 6px; height: 2px; background: var(--mavi); transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.2, .7, .2, 1) .2s; }
.canli .yil-cizgi::after { transform: scaleX(1); }
.yil-cizgi li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; font-size: 11.5px; color: var(--soluk); }
.yil-cizgi li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--mavi-cizgi); transition: background .3s, border-color .3s; }
.canli .yil-cizgi li::before { background: var(--mavi); border-color: var(--mavi); }
.yil-cizgi li:nth-child(2)::before { transition-delay: .4s; } .yil-cizgi li:nth-child(3)::before { transition-delay: .6s; }
.yil-cizgi li:nth-child(4)::before { transition-delay: .8s; } .yil-cizgi li:nth-child(5)::before { transition-delay: 1s; }
.yil-cizgi li:nth-child(6)::before { transition-delay: 1.2s; } .yil-cizgi li:nth-child(7)::before { transition-delay: 1.4s; }
.canli .yil-cizgi li:last-child::before { box-shadow: 0 0 0 6px rgba(8, 84, 160, .15); animation: nabiz 2s ease-in-out 1.8s infinite; }
@keyframes nabiz { 50% { box-shadow: 0 0 0 10px rgba(8, 84, 160, .05); } }
/* Tek program: merkezde mağaza, çevresinde modüller; çizgiler ve düğümler belirir */
.sahne-merkez { position: relative; width: min(400px, 100%); height: 230px; margin: 0 auto; }
.sahne-merkez::before { content: ""; position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; translate: -50% -50%; border-radius: 50%; border: 1px dashed var(--mavi-cizgi); }
.sahne-merkez .merkez { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 1; width: 76px; height: 76px; border-radius: 20px; display: grid; place-items: center; color: #fff; background: var(--koyu); box-shadow: 0 0 0 12px var(--mavi-acik); }
.sahne-merkez .merkez .ikon { width: 30px; height: 30px; }
.canli .sahne-merkez .merkez { animation: nabiz-merkez 2.6s ease-in-out infinite; }
@keyframes nabiz-merkez { 50% { box-shadow: 0 0 0 18px rgba(234, 242, 251, .6); } }
.dugum { position: absolute; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--cizgi); font-size: 13px; font-weight: 600; box-shadow: var(--golge); opacity: 0; scale: .8; transition: opacity .5s, scale .5s cubic-bezier(.2, .7, .2, 1); }
.canli .dugum { opacity: 1; scale: 1; }
.dugum.d1 { left: 50%; top: 0; translate: -50% 0; }
.dugum.d2 { right: 4%; top: 22%; transition-delay: .15s; }
.dugum.d3 { right: 4%; bottom: 22%; transition-delay: .3s; }
.dugum.d4 { left: 50%; bottom: 0; translate: -50% 0; transition-delay: .45s; }
.dugum.d5 { left: 4%; bottom: 22%; transition-delay: .6s; }
.dugum.d6 { left: 4%; top: 22%; transition-delay: .75s; }
/* Özellik anahtarları sırayla açılır */
.sahne-anahtar { display: grid; gap: 10px; }
.sahne-anahtar span { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border: 1px solid var(--cizgi); border-radius: 10px; background: #fff; font-size: 14px; font-weight: 600; }
.sahne-anahtar i { position: relative; width: 36px; height: 20px; border-radius: 999px; background: #e2e8f0; transition: background .3s; }
.sahne-anahtar i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: translate .3s cubic-bezier(.2, .7, .2, 1); }
.canli .sahne-anahtar i { background: var(--mavi); }
.canli .sahne-anahtar i::after { translate: 16px 0; }
.sahne-anahtar span:nth-child(2) i, .sahne-anahtar span:nth-child(2) i::after { transition-delay: .35s; }
.sahne-anahtar span:nth-child(3) i, .sahne-anahtar span:nth-child(3) i::after { transition-delay: .7s; }
.sahne-anahtar span:nth-child(4) i, .sahne-anahtar span:nth-child(4) i::after { transition-delay: 1.05s; }
/* İnternetsiz: fişler sıraya düşer */
.sahne-kuyruk { display: grid; gap: 8px; }
.sahne-kuyruk .wifi { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #ffedd5; color: #c2410c; margin-bottom: 4px; }
.sahne-kuyruk .fis { padding: 9px 14px; border: 1px solid var(--cizgi); border-radius: 10px; background: #fff; font-size: 13.5px; font-variant-numeric: tabular-nums; opacity: 0; translate: 0 10px; transition: opacity .5s, translate .5s cubic-bezier(.2, .7, .2, 1); }
.canli .sahne-kuyruk .fis { opacity: 1; translate: none; }
.sahne-kuyruk .fis:nth-child(3) { transition-delay: .3s; } .sahne-kuyruk .fis:nth-child(4) { transition-delay: .6s; }
/* Cihazlar */
.sahne-cihaz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sahne-cihaz span { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--cizgi); border-radius: 10px; background: #fff; font-size: 14px; font-weight: 600; opacity: 0; scale: .92; transition: opacity .5s, scale .5s cubic-bezier(.2, .7, .2, 1); }
.sahne-cihaz span .ikon { color: var(--mavi); }
.canli .sahne-cihaz span { opacity: 1; scale: 1; }
.sahne-cihaz span:nth-child(2) { transition-delay: .15s; } .sahne-cihaz span:nth-child(3) { transition-delay: .3s; } .sahne-cihaz span:nth-child(4) { transition-delay: .45s; }

/* Sektörler: fotoğraflı mozaik (iyonosfer düzeni) */
.mozaik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 240px; gap: 18px; }
.mozaik-kare { position: relative; margin: 0; overflow: hidden; border-radius: 16px; background: var(--koyu); }
.mozaik-kare.m1 { grid-row: span 2; }
.mozaik-kare:last-child { grid-column: 1 / -1; }
.mozaik-kare img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s cubic-bezier(.2, .7, .2, 1); }
.mozaik-kare:hover img { scale: 1.06; }
.mozaik-kare::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 21, 38, 0) 40%, rgba(11, 21, 38, .85)); }
.mozaik-kare figcaption { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1; color: #fff; display: grid; gap: 4px; }
.mozaik-kare figcaption b { font-size: 22px; letter-spacing: -.02em; }
.mozaik-kare figcaption span { font-size: 14px; color: rgba(255, 255, 255, .85); transition: translate .5s; }

/* Numaralı hizmet alanı (iyonosfer "Uzmanlık" düzeni); koyu zemin */
.bolum.koyu-bolum { background: var(--koyu); color: #e2e8f0; }
.uz-bas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: end; gap: 32px; margin-bottom: 40px; }
.uz-etiket { margin: 0 0 14px; color: #7cb4ff; font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.uz-etiket b { color: #94a3b8; font-weight: 500; }
.uz-baslik { color: #fff; font-size: clamp(36px, 5vw, 64px); letter-spacing: -.045em; line-height: 1; }
.uz-baslik em { color: #7cb4ff; font-style: normal; }
.uz-aciklama { color: #94a3b8; font-size: 16px; }
.uz-govde { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); align-items: start; gap: 56px; }
.uz-liste { margin: 0; padding: 0; list-style: none; }
.uz-satir { position: relative; border-top: 1px solid rgba(255, 255, 255, .12); }
.uz-satir:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.uz-satir::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: #60a5fa; transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.uz-satir.acik::before { transform: scaleX(1); }
.uz-dugme { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; padding: 22px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.uz-no { color: #64748b; font-size: 13px; letter-spacing: .2em; transition: color .4s; }
.uz-ad { color: #fff; font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; opacity: .55; transition: opacity .4s, translate .6s cubic-bezier(.2, .7, .2, 1); }
.uz-ok { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; color: #fff; transition: background .4s, border-color .4s; }
.uz-ok .ikon { rotate: -45deg; transition: rotate .45s cubic-bezier(.2, .7, .2, 1); }
.uz-dugme:hover .uz-ad { opacity: .8; }
.uz-satir.acik .uz-no { color: #7cb4ff; }
.uz-satir.acik .uz-ad { opacity: 1; translate: 12px 0; }
.uz-satir.acik .uz-ok { border-color: var(--mavi); background: var(--mavi); }
.uz-satir.acik .uz-ok .ikon { rotate: 0deg; }
.uz-detay { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.2, .7, .2, 1); }
.uz-detay > div { overflow: hidden; padding-left: 72px; }
.uz-satir.acik .uz-detay { grid-template-rows: 1fr; }
.uz-metin { max-width: 540px; margin: 0 0 14px; color: #a8b3c7; font-size: 15.5px; }
.uz-etiketler { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.uz-etiketler li { padding: 6px 13px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; font-size: 12.5px; color: #cbd5e1; opacity: 0; translate: 0 8px; transition: opacity .4s, translate .4s; }
.uz-satir.acik .uz-etiketler li { opacity: 1; translate: none; transition-delay: .25s; }
.uz-satir.acik .uz-etiketler li:nth-child(2) { transition-delay: .32s; } .uz-satir.acik .uz-etiketler li:nth-child(3) { transition-delay: .39s; } .uz-satir.acik .uz-etiketler li:nth-child(4) { transition-delay: .46s; }
.uz-satir-gorsel { display: none; }
.uz-ilerleme { position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: #60a5fa; transform: scaleX(0); transform-origin: left; opacity: .7; pointer-events: none; }
.uz.oynuyor .uz-satir.acik .uz-ilerleme { animation: ilerle 6s linear forwards; }
.uz-sahne { position: sticky; top: 110px; aspect-ratio: 16 / 11; overflow: hidden; border-radius: 16px; background: #0f1a30; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7); isolation: isolate; }
.uz-kare { position: absolute; inset: 0; margin: 0; clip-path: inset(0 0 0 100%); transition: clip-path 1s cubic-bezier(.7, 0, .2, 1); }
.uz-kare.onceki { z-index: 1; clip-path: inset(0); transition: none; }
.uz-kare.acik { z-index: 2; clip-path: inset(0); }
.uz-kare img { width: 100%; height: 100%; object-fit: cover; object-position: top left; scale: 1.12; transition: scale 2.2s cubic-bezier(.2, .7, .2, 1); }
.uz-kare.acik img { scale: 1; }
.uz-kare::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 14, 28, 0) 55%, rgba(8, 14, 28, .85)); }
.uz-kare figcaption { position: absolute; left: 24px; right: 24px; bottom: 20px; z-index: 1; display: flex; align-items: baseline; gap: 14px; color: #fff; }
.uz-kare figcaption b { font-size: 52px; font-weight: 800; letter-spacing: -.04em; line-height: .9; color: #7cb4ff; opacity: 0; translate: 0 24px; transition: opacity .6s .35s, translate .8s cubic-bezier(.2, .7, .2, 1) .35s; }
.uz-kare figcaption span { font-size: 20px; font-weight: 600; opacity: 0; translate: 0 14px; transition: opacity .6s .5s, translate .8s cubic-bezier(.2, .7, .2, 1) .5s; }
.uz-kare.acik figcaption b, .uz-kare.acik figcaption span { opacity: 1; translate: none; }
.uz-sayac { position: absolute; top: 16px; right: 18px; z-index: 3; padding: 5px 12px; border-radius: 999px; background: rgba(8, 14, 28, .6); backdrop-filter: blur(6px); color: rgba(255, 255, 255, .7); font-size: 12px; letter-spacing: .12em; }
.uz-sayac b { color: #fff; }

/* Sepet (ana sayfa uygulamaları): sağdan açılır */
.sepet-dugme { position: fixed; right: 24px; bottom: 24px; z-index: 55; display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--mavi); color: #fff; font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 16px 40px -12px rgba(8, 84, 160, .7); }
.sepet-dugme[hidden] { display: none; }
.sepet-dugme b { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: #fff; color: var(--mavi); font-size: 13px; }
.sepet-ort { position: fixed; inset: 0; z-index: 70; background: rgba(11, 21, 38, .45); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.sepet { position: fixed; z-index: 80; top: 0; right: 0; bottom: 0; width: min(420px, 100%); display: flex; flex-direction: column; background: #fff; border-left: 1px solid var(--cizgi); box-shadow: var(--golge-buyuk); transform: translateX(100%); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.sepet-acik .sepet-ort { opacity: 1; visibility: visible; }
.sepet-acik .sepet { transform: none; }
.sepet-ust { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--cizgi); }
.sepet-ust h2 { font-size: 18px; }
.sepet-govde { flex: 1; overflow-y: auto; padding: 20px 22px; display: grid; gap: 16px; align-content: start; }
.sepet-govde .donem { justify-self: start; }
.sepet-kalem { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--cizgi); border-radius: 10px; }
.sepet-kalem > span { flex: 1; display: grid; font-size: 14.5px; }
.sepet-kalem > span span { font-size: 13px; color: var(--soluk); }
.sepet-kalem .tutar { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sepet-kalem .cikar { width: 30px; height: 30px; border: 1px solid var(--cizgi); border-radius: 8px; background: #fff; color: var(--soluk); display: grid; place-items: center; cursor: pointer; }
.sepet-kalem .cikar:hover { color: var(--hata); border-color: #fecaca; }
.sepet-kalem .cikar .ikon { width: 15px; height: 15px; }
.sepet-oneri { font-size: 13.5px; color: var(--soluk); }
.sepet-alt { padding: 16px 22px 22px; border-top: 1px solid var(--cizgi); }
.sepet-alt .ozet-toplam { padding-top: 0; }

/* Ekran çerçeveleri: tarayıcı/uygulama penceresi ve telefon */
.ekran { border-radius: var(--r); background: #fff; border: 1px solid var(--cizgi); box-shadow: var(--golge-buyuk); overflow: hidden; }
.ekran-ust { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--cizgi); background: var(--zemin-2); }
.ekran-ust i { width: 9px; height: 9px; border-radius: 50%; background: #d7dde6; }
.ekran-ust span { margin-left: 10px; font-size: 12px; color: var(--soluk); }
.ekran img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.telefon-cerceve { padding: 6px; border-radius: 26px; background: #0f172a; box-shadow: var(--golge-buyuk); }
.telefon-cerceve img { border-radius: 21px; aspect-ratio: 390 / 844; object-fit: cover; }

/* Gerçekler şeridi */
.gercekler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--cizgi); border-radius: var(--r); background: #fff; margin-top: 72px; }
.gercekler > div { padding: 22px 24px; border-right: 1px solid var(--cizgi); }
.gercekler > div:last-child { border-right: 0; }
.gercekler strong { display: block; font-size: 28px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gercekler span { display: block; margin-top: 2px; font-size: 14px; color: var(--metin-2); }

/* Özellik satırları: metin + ekran görüntüsü, sırayla yer değiştirir */
.ozellik-satir { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: 72px; align-items: center; }
.ozellik-satir + .ozellik-satir { margin-top: 80px; }
.ozellik-satir.ters .ozellik-metin { order: 2; }
.ozellik-metin h3 { font-size: clamp(26px, 2.8vw, 34px); letter-spacing: -.025em; }
.ozellik-metin > p { margin-top: 16px; font-size: 17px; color: var(--metin-2); }
.madde { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.madde li { display: flex; gap: 12px; font-size: 15.5px; color: var(--metin-2); }
.madde li .ikon { width: 20px; height: 20px; color: var(--mavi); margin-top: 1px; }
.madde li strong { color: var(--metin); font-weight: 600; }

/* Kart ızgaraları */
.izgara { display: grid; gap: 20px; }
.izgara.uc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.izgara.dort { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kart { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r); padding: 28px; transition: border-color .15s, box-shadow .15s; }
.kart:hover { border-color: #cbd5e1; box-shadow: var(--golge); }
.kart-ikon { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--mavi-acik); color: var(--mavi); }
.kart h3 { font-size: 18px; margin-top: 18px; }
.kart p { margin-top: 8px; color: var(--metin-2); font-size: 15px; }

/* Uygulama kartları ve önizlemeleri (gerçek arayüz düzeninde) */
.uygulama-kart { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.uygulama-onizleme { height: 220px; display: grid; place-items: center; background: var(--zemin-2); border-bottom: 1px solid var(--cizgi); overflow: hidden; }
.uygulama-govde { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.uygulama-govde h3 { margin: 0; font-size: 20px; }
.uygulama-govde > p { margin-top: 10px; color: var(--metin-2); font-size: 15px; }
.uygulama-govde .madde { margin-bottom: 24px; }
.uygulama-alt { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--cizgi); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fiyat-etiket { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fiyat-etiket span { font-size: 14px; font-weight: 500; color: var(--soluk); }

/* Önizleme: sipariş listesi (Paket Servis) */
.onizleme-tablo { width: 86%; background: #fff; border: 1px solid var(--cizgi); border-radius: 10px; box-shadow: var(--golge); font-size: 12.5px; }
.onizleme-tablo div { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--cizgi); }
.onizleme-tablo div:last-child { border-bottom: 0; }
.onizleme-tablo div:first-child { font-size: 11px; font-weight: 600; color: var(--soluk); text-transform: uppercase; letter-spacing: .04em; background: var(--zemin-2); border-radius: 10px 10px 0 0; }
.onizleme-tablo b { font-weight: 600; font-variant-numeric: tabular-nums; }
.durum { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.durum.hazirlaniyor { color: #b45309; background: #fef3c7; }
.durum.yolda { color: var(--mavi); background: var(--mavi-acik); }
.durum.teslim { color: var(--basari); background: #dcfce7; }

/* Önizleme: QR menü (telefonda web menüsü + QR kod) */
.qr-onizleme { display: flex; align-items: center; gap: 28px; }
.menu-tel { width: 150px; padding: 5px; border-radius: 22px; background: #0f172a; box-shadow: var(--golge); }
.menu-tel-ekran { border-radius: 18px; background: #fff; overflow: hidden; }
.menu-tel-bas { padding: 10px 12px 8px; font-size: 11px; font-weight: 700; border-bottom: 1px solid var(--cizgi); }
.menu-tel-bas span { display: block; font-weight: 500; color: var(--soluk); font-size: 9.5px; }
.menu-tel-satir { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--cizgi); font-size: 10.5px; white-space: nowrap; }
.menu-tel-satir:last-child { border-bottom: 0; }
.menu-tel-satir i { width: 22px; height: 22px; border-radius: 6px; background: var(--mavi-acik); flex: none; }
.menu-tel-satir em { margin-left: auto; font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.qr-kod { width: 112px; height: 112px; padding: 9px; background: #fff; border: 1px solid var(--cizgi); border-radius: 10px; box-shadow: var(--golge); }
.qr-kod svg { width: 100%; height: 100%; display: block; }

/* Önizleme: TV menü panosu (yatay + dikey ekran) */
.tv-onizleme { display: flex; align-items: flex-end; gap: 12px; }
.tv { background: #0f172a; border: 5px solid #1e293b; border-radius: 6px; overflow: hidden; box-shadow: var(--golge); color: #fff; }
.tv.yatay { width: 230px; aspect-ratio: 16 / 9; padding: 12px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; align-content: start; }
.tv.yatay b { grid-column: 1 / -1; font-size: 10px; letter-spacing: .12em; color: #93c5fd; margin-bottom: 4px; }
.tv.yatay span, .tv.dikey span { display: flex; justify-content: space-between; font-size: 9.5px; padding-bottom: 3px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.tv.yatay span em, .tv.dikey span em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.tv.dikey { width: 76px; aspect-ratio: 9 / 16; padding: 10px 8px; display: flex; flex-direction: column; gap: 5px; background: var(--mavi); border-color: #1e293b; }
.tv.dikey b { font-size: 9px; letter-spacing: .1em; }
.tv.dikey span { flex-direction: column; border-color: rgba(255, 255, 255, .2); }

/* Önizleme: adisyon ve mali fiş (kâğıt fiş görünümü) */
.fis-onizleme { display: flex; align-items: flex-start; gap: 14px; }
.fis-kagit { width: 140px; padding: 12px 12px 18px; background: #fff; border: 1px solid var(--cizgi); box-shadow: var(--golge); font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; display: grid; gap: 4px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 90% 100%, 80% calc(100% - 6px), 70% 100%, 60% calc(100% - 6px), 50% 100%, 40% calc(100% - 6px), 30% 100%, 20% calc(100% - 6px), 10% 100%, 0 calc(100% - 6px)); }
.fis-kagit.genis { width: 210px; }
.fis-kagit b { text-align: center; font-size: 11.5px; letter-spacing: .1em; }
.fis-kagit span { text-align: center; color: var(--soluk); padding-bottom: 6px; border-bottom: 1px dashed var(--cizgi); }
.fis-kagit i { display: flex; justify-content: space-between; font-style: normal; }
.fis-kagit i em { font-style: normal; }
.fis-kagit i.toplam { margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--cizgi); font-weight: 700; }
/* Önizleme: elektronik raf etiketleri (e-kâğıt görünümü) */
.raf-onizleme { display: flex; gap: 12px; }
.raf-etiket { width: 112px; padding: 10px 12px; border-radius: 6px; background: #f1f1ec; border: 4px solid #1e293b; display: grid; gap: 2px; box-shadow: var(--golge); }
.raf-etiket span { font-size: 10.5px; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.raf-etiket b { font-size: 18px; white-space: nowrap; letter-spacing: -.02em; color: #0f172a; font-variant-numeric: tabular-nums; }
.raf-etiket i { height: 10px; background: repeating-linear-gradient(90deg, #0f172a 0 2px, transparent 2px 4px, #0f172a 4px 5px, transparent 5px 7px); }
.kart-ikon.buyuk-ikon { width: 72px; height: 72px; border-radius: 18px; }
.kart-ikon.buyuk-ikon .ikon { width: 32px; height: 32px; }

/* Fiyat */
.donem { display: inline-flex; padding: 4px; border-radius: 10px; background: var(--zemin-2); border: 1px solid var(--cizgi); }
.donem button { font: inherit; font-size: 14.5px; font-weight: 600; color: var(--metin-2); background: transparent; border: 0; padding: 8px 18px; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .15s, color .15s; }
.donem button[aria-pressed="true"] { color: var(--metin); background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.donem em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--basari); background: #dcfce7; padding: 1px 8px; border-radius: 999px; }
.fiyat-ortala { text-align: center; margin-bottom: 40px; }
.fiyat-izgara { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.fiyat-kart { padding: 36px; border: 2px solid var(--mavi); border-radius: 16px; background: #fff; box-shadow: var(--golge); }
.fiyat-kart:hover { border-color: var(--mavi); }
.fiyat-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fiyat-ust h3 { font-size: 22px; }
.etiket-mavi { font-size: 12.5px; font-weight: 600; color: var(--mavi); background: var(--mavi-acik); padding: 4px 10px; border-radius: 999px; }
.buyuk-fiyat { display: flex; align-items: baseline; gap: 8px; margin-top: 24px; }
.buyuk-fiyat strong { font-size: 52px; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.buyuk-fiyat span { color: var(--soluk); font-size: 16px; }
.fiyat-not { margin-top: 10px; font-size: 14.5px; color: var(--metin-2); }
.fiyat-kart .madde { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 28px 0 30px; padding-top: 26px; border-top: 1px solid var(--cizgi); }
.fiyat-kart .madde li { font-size: 14.5px; }
.ek-liste { display: grid; gap: 12px; }
.ek-satir { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--cizgi); border-radius: var(--r); background: #fff; }
.ek-satir .kart-ikon { width: 40px; height: 40px; }
.ek-satir strong { display: block; font-size: 15.5px; }
.ek-satir .alt-yazi { display: block; font-size: 13.5px; color: var(--soluk); }
.ek-satir .tutar { margin-left: auto; text-align: right; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ek-satir .tutar span { display: block; font-size: 12.5px; font-weight: 500; color: var(--soluk); }
.kucuk-not { margin-top: 14px; font-size: 13.5px; color: var(--soluk); }
[data-donem="monthly"] .yillik, [data-donem="yearly"] .aylik { display: none; }

/* SSS */
.sss { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--cizgi); }
.sss details { border-bottom: 1px solid var(--cizgi); }
.sss summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: 17px; font-weight: 600; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary .ikon { color: var(--soluk); transition: transform .2s; }
.sss details[open] summary .ikon { transform: rotate(45deg); color: var(--mavi); }
.sss details p { padding: 0 40px 22px 0; color: var(--metin-2); }

/* Kapanış bandı */
.cagri { border-radius: 16px; padding: 64px; background: var(--mavi); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.cagri h2 { color: #fff; font-size: clamp(28px, 3.2vw, 38px); }
.cagri p { margin-top: 10px; color: rgba(255, 255, 255, .82); font-size: 17px; }
.cagri .eylemler { margin: 0; flex: none; }

/* Alt bilgi */
.alt { background: var(--koyu); color: #94a3b8; padding: 72px 0 32px; font-size: 14.5px; }
.alt-izgara { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 40px; }
.alt h4 { color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.alt ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.alt a:hover { color: #fff; }
.alt-hakkinda > p { margin: 16px 0; max-width: 340px; }
.satici-bilgi { display: grid; gap: 4px; font-size: 13.5px; }
.alt-son { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; }
.kart-logolar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.kart-logo { display: inline-grid; place-items: center; width: 56px; height: 34px; border-radius: 6px; background: #fff; }
.kart-logo svg { height: 26px; width: auto; }
.kart-logo.visa svg { height: 34px; }
.kart-logo.troy { color: #1b3a6b; font-size: 17px; font-weight: 800; letter-spacing: -.04em; }
.kart-logolar .guvenli { background: none; color: #94a3b8; font-weight: 500; letter-spacing: 0; display: inline-flex; gap: 6px; }
.kart-logolar .guvenli .ikon { width: 15px; height: 15px; }

/* İç sayfa başlığı */
/* Hata sayfaları (errors._hata): koyu zemin, büyük kod, sağda okutulan ama bulunamayan barkod */
.hata-sayfa { position: relative; isolation: isolate; overflow: hidden; padding: 88px 0 96px; color: #e2e8f0;
    background: radial-gradient(ellipse 60% 70% at 85% 30%, rgba(59, 130, 246, .24), transparent 60%), radial-gradient(ellipse 50% 60% at 0% 100%, rgba(8, 84, 160, .35), transparent 60%), var(--koyu); }
.hata-sayfa::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 80% 80% at 70% 40%, #000 20%, transparent 75%); }
.hata-ic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; min-height: 440px; }
.hata-kod { display: block; font-size: clamp(96px, 14vw, 168px); font-weight: 800; line-height: .9; letter-spacing: -.06em; background: linear-gradient(180deg, #fff 10%, #7cb4ff); -webkit-background-clip: text; background-clip: text; color: transparent; animation: sahne-gel .6s cubic-bezier(.2, .8, .2, 1) both; }
.hata-metin h1 { margin-top: 18px; color: #fff; font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -.03em; animation: sahne-gel .6s cubic-bezier(.2, .8, .2, 1) .08s both; }
.hata-metin > p { margin-top: 14px; max-width: 520px; color: #a8b3c7; font-size: 17px; animation: sahne-gel .6s cubic-bezier(.2, .8, .2, 1) .16s both; }
.hata-metin .eylemler { margin-top: 28px; }
.hata-metin .dugme.ikincil { color: #fff; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22); box-shadow: none; }
.hata-metin .dugme.ikincil:hover { background: rgba(255, 255, 255, .12); }
.hata-baglantilar { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14.5px; }
.hata-baglantilar a { color: #a8b3c7; }
.hata-baglantilar a:hover { color: #fff; }
.hata-sahne { position: relative; height: 360px; }
.hata-sahne .kart-ikon { width: 38px; height: 38px; flex: none; }
.hata-sahne .kart-ikon .ikon { width: 19px; height: 19px; }
.hata-sahne .kart-ikon.turuncu { background: #fee2e2; color: #dc2626; }
.hata-barkod { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: 10px; width: min(360px, 90%); padding: 34px 30px 24px; border-radius: 18px; background: #fff; box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .75); overflow: hidden; animation: sahne-gel .7s ease .2s both, kart-egil 9s ease-in-out 1s infinite; }
.hata-barkod .cubuklar { display: flex; align-items: stretch; justify-content: center; gap: 3px; width: 100%; height: 130px; }
.hata-barkod .cubuklar i { width: 3px; background: var(--koyu); }
.hata-barkod .cubuklar i:nth-child(3n) { width: 6px; }
.hata-barkod .cubuklar i:nth-child(5n) { width: 2px; }
.hata-barkod .cubuklar i:nth-child(7n) { width: 8px; }
.hata-barkod .cubuklar i:nth-child(11n) { width: 1px; }
.hata-barkod .rakamlar { font-size: 17px; font-weight: 600; letter-spacing: .32em; color: var(--koyu); font-variant-numeric: tabular-nums; }
.hata-barkod .tarama { position: absolute; left: 14px; right: 14px; top: 30px; height: 3px; border-radius: 2px; background: #ef4444; box-shadow: 0 0 16px 4px rgba(239, 68, 68, .55); animation: tara 2.4s ease-in-out infinite alternate; }
@keyframes tara { to { top: 160px; } }
.hata-sahne .sahne-kart.s-sag-ust { right: 0; top: 18px; }
.hata-sahne .sahne-kart.s-sol-alt { left: 0; bottom: 22px; }

/* Bekleme katmanı (panel.js, POST formu gönderilince): ekranı kilitler, ikinci tıklamayı engeller. */
dialog.bekleme { margin: auto; outline: 0; border: 0; padding: 0; background: transparent; max-width: none; max-height: none; overflow: visible; }
dialog.bekleme::backdrop { background: rgba(11, 21, 38, .6); backdrop-filter: blur(3px); }
.bekleme-kutu { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(340px, calc(100vw - 32px)); padding: 28px 30px; border-radius: 16px; background: #fff; color: var(--metin); text-align: center; box-shadow: var(--golge-buyuk); }
.bekleme-kutu .donen { width: 40px; height: 40px; margin-bottom: 6px; border-radius: 50%; border: 3px solid var(--mavi-acik); border-top-color: var(--mavi); animation: donme .8s linear infinite; }
.bekleme-kutu strong { font-size: 16px; }
.bekleme-kutu p { margin: 0; color: var(--metin-2); font-size: 14px; }
.bekleme-kutu .sure { font-size: 12px; color: var(--soluk); font-variant-numeric: tabular-nums; }
@keyframes donme { to { transform: rotate(360deg); } }

/* İç sayfa kahramanı:ana sayfa kahramanının koyu zemini; sağda sayfaya özel sahne (site._sahne). */
.sayfa-bas { position: relative; isolation: isolate; overflow: hidden; padding: 64px 0; color: #e2e8f0;
    background: radial-gradient(ellipse 60% 70% at 85% 30%, rgba(59, 130, 246, .24), transparent 60%), radial-gradient(ellipse 50% 60% at 0% 100%, rgba(8, 84, 160, .35), transparent 60%), var(--koyu); }
.sayfa-bas::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 80% 80% at 70% 40%, #000 20%, transparent 75%); }
.sayfa-bas-ic { display: grid; gap: 48px; align-items: center; }
.sayfa-bas.sahneli { padding: 56px 0; }
.sayfa-bas.sahneli .sayfa-bas-ic { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 340px; }
.sayfa-bas h1 { color: #fff; font-size: clamp(34px, 4vw, 50px); letter-spacing: -.03em; line-height: 1.08; }
.sayfa-bas p { margin-top: 16px; color: #a8b3c7; font-size: 18px; max-width: 600px; }
.sayfa-bas .kirinti { color: #8392ab; }
.sayfa-bas .kirinti a:hover { color: #fff; }
.sayfa-bas-metin > * { animation: sahne-gel .6s cubic-bezier(.2, .8, .2, 1) both; }
.sayfa-bas-metin > h1 { animation-delay: .08s; }
.sayfa-bas-metin > p { animation-delay: .16s; }

/* Sahne ortak parçaları: konumlu kartlar ve yavaş süzülme */
.sahne { position: relative; height: 340px; }
.sahne .kart-ikon { width: 38px; height: 38px; flex: none; }
.sahne .kart-ikon .ikon { width: 19px; height: 19px; }
.sahne .kart-ikon.yesil { background: #dcfce7; color: var(--basari); }
.sahne .kart-ikon.turuncu { background: #ffedd5; color: #c2410c; }
.sahne-kart { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; max-width: 290px; padding: 12px 16px 12px 12px; border-radius: 12px; background: #fff; color: var(--metin); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .55); animation: sahne-gel .6s cubic-bezier(.2, .8, .2, 1) .5s both, suz 7s ease-in-out 1.1s infinite; }
.sahne-kart b { display: block; font-size: 14px; font-weight: 600; }
.sahne-kart span:not(.kart-ikon) { display: block; font-size: 12.5px; color: var(--metin-2); }
.sahne-kart.s-sag-ust { right: 0; top: 4px; }
.sahne-kart.s-sol-alt { left: 0; bottom: 6px; animation-delay: .8s, 2.4s; }
@keyframes sahne-gel { from { opacity: 0; transform: translateY(16px); } }
@keyframes suz { 50% { transform: translateY(-8px); } }

/* Özellikler: gerçek ekran, köşelerde bilgi kartları, altta modül çipleri */
.sahne-ekran { position: absolute; left: 6%; right: 4%; top: 30px; animation: sahne-gel .7s ease .2s both; }
.sahne-ekran .ekran { border-color: rgba(255, 255, 255, .14); box-shadow: 0 40px 90px -24px rgba(0, 0, 0, .75); }
.sahne-ekran .ekran img { aspect-ratio: 16 / 9; }
.sahne--ozellikler .sahne-kart.s-sol-alt { bottom: 40px; }
.sahne-cipler { position: absolute; left: 6%; right: 4%; bottom: -6px; z-index: 2; display: flex; justify-content: flex-end; gap: 8px; list-style: none; margin: 0; padding: 0; }
.sahne-cipler li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(15, 30, 55, .85); border: 1px solid rgba(255, 255, 255, .16); color: #e2e8f0; font-size: 12.5px; font-weight: 500; backdrop-filter: blur(6px); animation: sahne-gel .5s ease both; }
.sahne-cipler .ikon { width: 14px; height: 14px; color: #7cb4ff; }
.sahne-cipler li:nth-child(1) { animation-delay: .9s; } .sahne-cipler li:nth-child(2) { animation-delay: 1s; }
.sahne-cipler li:nth-child(3) { animation-delay: 1.1s; } .sahne-cipler li:nth-child(4) { animation-delay: 1.2s; }

/* Uygulamalar: merkezde lisans, çevresinde sırayla "eklenen" uygulamalar */
.sahne-uygulamalar { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 12px 150px; list-style: none; margin: 0; padding: 0; }
.sahne-uygulamalar li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: #e2e8f0; font-size: 13.5px; font-weight: 600; animation: sahne-gel .5s ease both, uygulama-ekle 12s ease-in-out infinite; }
.sahne-uygulamalar .kart-ikon { background: rgba(124, 180, 255, .14); color: #7cb4ff; }
.sahne-uygulamalar li i { display: grid; place-items: center; width: 20px; height: 20px; margin-left: auto; border-radius: 50%; background: #22c55e; color: #fff; opacity: 0; scale: .5; animation: tik-gel 12s ease-in-out infinite; }
.sahne-uygulamalar li i .ikon { width: 12px; height: 12px; }
.sahne-uygulamalar li:nth-child(2) { animation-delay: .1s, 1.5s; } .sahne-uygulamalar li:nth-child(2) i { animation-delay: 1.5s; }
.sahne-uygulamalar li:nth-child(3) { animation-delay: .2s, 3s; } .sahne-uygulamalar li:nth-child(3) i { animation-delay: 3s; }
.sahne-uygulamalar li:nth-child(4) { animation-delay: .3s, 4.5s; } .sahne-uygulamalar li:nth-child(4) i { animation-delay: 4.5s; }
.sahne-uygulamalar li:nth-child(5) { animation-delay: .4s, 6s; } .sahne-uygulamalar li:nth-child(5) i { animation-delay: 6s; }
.sahne-uygulamalar li:nth-child(6) { animation-delay: .5s, 7.5s; } .sahne-uygulamalar li:nth-child(6) i { animation-delay: 7.5s; }
@keyframes uygulama-ekle { 0%, 8% { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); } 12%, 70% { border-color: rgba(124, 180, 255, .55); background: rgba(8, 84, 160, .35); } 85%, 100% { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); } }
@keyframes tik-gel { 0%, 8% { opacity: 0; scale: .5; } 12%, 70% { opacity: 1; scale: 1; } 85%, 100% { opacity: 0; scale: .5; } }
.sahne-merkez-lisans { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 1; display: grid; justify-items: center; gap: 8px; width: 132px; padding: 22px 12px; border-radius: 20px; background: var(--mavi); box-shadow: 0 0 0 10px rgba(8, 84, 160, .25), 0 30px 60px -20px rgba(0, 0, 0, .6); animation: nabiz-lisans 3s ease-in-out infinite; }
.sahne-merkez-lisans img { width: 96px; height: auto; }
.sahne-merkez-lisans span { font-size: 12px; font-weight: 600; color: #cfe0f5; letter-spacing: .04em; }
@keyframes nabiz-lisans { 50% { box-shadow: 0 0 0 20px rgba(8, 84, 160, .1), 0 30px 60px -20px rgba(0, 0, 0, .6); } }

/* Fiyatlar: gerçek paket fiyatıyla kart, arkasında gölge kart */
.sahne-fiyat { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; width: min(330px, 92%); padding: 26px; border-radius: 16px; background: #fff; color: var(--metin); box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .7); animation: sahne-gel .6s ease .2s both; }
.sahne-fiyat.arka { z-index: 1; height: 300px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); box-shadow: none; transform: rotate(-6deg) translate(-26px, 6px); animation: none; }
.sahne-fiyat > b { font-size: 17px; }
.sahne-fiyat p { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 16px; }
.sahne-fiyat strong { font-size: 44px; letter-spacing: -.04em; color: var(--koyu); }
.sahne-fiyat p span { color: var(--soluk); font-size: 14px; }
.sahne-fiyat ul { display: grid; gap: 8px; list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--cizgi); font-size: 14px; }
.sahne-fiyat li { display: flex; align-items: center; gap: 8px; animation: sahne-gel .4s ease both; }
.sahne-fiyat li .ikon { width: 16px; height: 16px; color: var(--basari); }
.sahne-fiyat li:nth-child(1) { animation-delay: .6s; } .sahne-fiyat li:nth-child(2) { animation-delay: .75s; }
.sahne-fiyat li:nth-child(3) { animation-delay: .9s; } .sahne-fiyat li:nth-child(4) { animation-delay: 1.05s; }
.sahne-serit { position: absolute; right: 18px; top: -13px; padding: 5px 12px; border-radius: 999px; background: #22c55e; color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 8px 18px -6px rgba(34, 197, 94, .6); }
.sahne--fiyatlar .sahne-fiyat { left: 60%; }
.sahne--fiyatlar .sahne-kart.s-sol-alt { left: 0; bottom: 24px; }

/* SSS ve İletişim: sırayla gelen sohbet balonları, en sonda "yazıyor" */
.sahne-sohbet { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; gap: 10px; width: min(400px, 96%); }
.balon { max-width: 82%; margin: 0; padding: 11px 15px; border-radius: 16px; font-size: 14px; line-height: 1.45; opacity: 0; animation: balon-gel .45s cubic-bezier(.2, .8, .2, 1) forwards; }
.balon.soru { justify-self: end; border-bottom-right-radius: 4px; background: var(--mavi); color: #fff; }
.balon.cevap { justify-self: start; border-bottom-left-radius: 4px; background: #fff; color: var(--metin); box-shadow: 0 16px 32px -14px rgba(0, 0, 0, .5); }
.balon.cevap b { display: block; font-size: 12px; color: var(--mavi); margin-bottom: 2px; }
.balon:nth-of-type(1) { animation-delay: .3s; }
.balon:nth-of-type(2) { animation-delay: 1.1s; }
.balon:nth-of-type(3) { animation-delay: 2s; }
.balon:nth-of-type(4) { animation-delay: 2.8s; }
.balon.yaziyor { display: inline-flex; gap: 4px; padding: 14px 16px; }
.balon.yaziyor i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; animation: nokta 1.2s ease-in-out infinite; }
.balon.yaziyor i:nth-child(2) { animation-delay: .15s; } .balon.yaziyor i:nth-child(3) { animation-delay: .3s; }
@keyframes balon-gel { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes nokta { 50% { opacity: 1; transform: translateY(-3px); } }
.sahne-sohbet.whatsapp { padding: 0 0 14px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); width: min(380px, 92%); overflow: hidden; }
.sahne-sohbet.whatsapp .balon { margin: 0 14px; }
.sahne-sohbet.whatsapp .balon.soru { background: #16a34a; }
.sohbet-ust { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: rgba(255, 255, 255, .06); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.sohbet-ust .kart-ikon { background: #25d366; color: #fff; border-radius: 50%; }
.sohbet-ust b { display: block; color: #fff; font-size: 14px; }
.sohbet-ust span:not(.kart-ikon) { font-size: 12.5px; color: #a8b3c7; }
.sahne--iletisim .sahne-kart.s-sag-ust { top: -4px; }

/* SMS ile giriş ve üyelik: telefon, bildirim, sırayla dolan kod kutuları */
.sahne-telefon { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; align-content: start; gap: 18px; width: 220px; height: 330px; padding: 46px 14px 14px; border-radius: 34px; background: linear-gradient(160deg, #1e3a5f, #0f1f36); border: 6px solid #1c2a40; box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .8); }
.sahne-telefon::before { content: ""; position: absolute; left: 50%; top: 10px; translate: -50% 0; width: 70px; height: 18px; border-radius: 999px; background: #0b1526; }
.sahne-telefon .bildirim { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .94); color: var(--metin); animation: bildirim-gel .6s cubic-bezier(.2, .8, .2, 1) .5s both; }
.sahne-telefon .bildirim .kart-ikon { width: 32px; height: 32px; background: #22c55e; color: #fff; border-radius: 9px; }
.sahne-telefon .bildirim b { display: block; font-size: 12px; letter-spacing: .04em; }
.sahne-telefon .bildirim span:not(.kart-ikon) { display: block; font-size: 12px; color: var(--metin-2); }
@keyframes bildirim-gel { from { opacity: 0; transform: translateY(-24px); } }
.kod-kutulari { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 10px; }
.kod-kutulari i { height: 38px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); position: relative; animation: kutu-dol 6s ease infinite; }
.kod-kutulari i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; translate: -50% -50%; border-radius: 50%; background: #fff; opacity: 0; animation: kod-nokta 6s ease infinite; animation-delay: inherit; }
.kod-kutulari i:nth-child(1) { animation-delay: 1.2s; } .kod-kutulari i:nth-child(2) { animation-delay: 1.45s; } .kod-kutulari i:nth-child(3) { animation-delay: 1.7s; }
.kod-kutulari i:nth-child(4) { animation-delay: 1.95s; } .kod-kutulari i:nth-child(5) { animation-delay: 2.2s; } .kod-kutulari i:nth-child(6) { animation-delay: 2.45s; }
@keyframes kutu-dol { 0%, 4% { border-color: rgba(255, 255, 255, .2); } 8%, 70% { border-color: #60a5fa; background: rgba(96, 165, 250, .14); } 80%, 100% { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); } }
@keyframes kod-nokta { 0%, 4% { opacity: 0; } 8%, 70% { opacity: 1; } 80%, 100% { opacity: 0; } }
.kilit-rozet { display: inline-flex; align-items: center; justify-self: center; gap: 6px; margin-top: auto; font-size: 11.5px; color: #a8b3c7; }
.kilit-rozet .ikon { width: 13px; height: 13px; }
.sahne--sms .sahne-kart.s-sag-ust { right: -6px; top: 34px; }

/* Ödeme: dönen ışıklı kart, güvenlik kartları */
.sahne-kredi { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; align-content: space-between; width: min(340px, 90%); aspect-ratio: 1.586; padding: 22px 24px; border-radius: 18px; color: #fff; background: radial-gradient(ellipse 80% 90% at 100% 0%, rgba(124, 180, 255, .55), transparent 60%), linear-gradient(135deg, #0854a0, #062f5c 70%); border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .75); overflow: hidden; animation: kart-egil 8s ease-in-out infinite; }
.sahne-kredi::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%); transform: translateX(-100%); animation: parilti 4s ease-in-out 1s infinite; }
.sahne-kredi .cip { width: 44px; height: 32px; border-radius: 7px; background: linear-gradient(135deg, #f5d27a, #c99a2e); }
.sahne-kredi .kredi-no { font-size: 21px; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.sahne-kredi .kredi-alt { display: flex; justify-content: space-between; font-size: 12.5px; color: #cfe0f5; text-transform: uppercase; letter-spacing: .08em; }
@keyframes kart-egil { 50% { transform: rotate(-3deg) translateY(-6px); } }
@keyframes parilti { 60%, 100% { transform: translateX(100%); } }

/* Kurumsal ve yasal: belge yığını, satırlar yazılır, mühür basılır */
.belge-kagit { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; display: grid; align-content: start; gap: 12px; width: min(300px, 86%); height: 300px; padding: 28px 26px; border-radius: 14px; background: #fff; box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .7); animation: sahne-gel .6s ease .1s both; }
.belge-kagit.arka { z-index: 1; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); box-shadow: none; transform: rotate(7deg) translate(30px, 4px); animation: none; }
.belge-kagit b { margin-bottom: 8px; font-size: 16px; color: var(--koyu); }
.belge-kagit i { height: 8px; border-radius: 4px; background: #e2e8f0; transform-origin: left; animation: satir-yaz .6s ease both; }
.belge-kagit i:nth-of-type(1) { animation-delay: .5s; } .belge-kagit i:nth-of-type(2) { width: 92%; animation-delay: .65s; }
.belge-kagit i:nth-of-type(3) { width: 96%; animation-delay: .8s; } .belge-kagit i:nth-of-type(4) { width: 70%; animation-delay: .95s; }
.belge-kagit i:nth-of-type(5) { animation-delay: 1.1s; } .belge-kagit i:nth-of-type(6) { width: 88%; animation-delay: 1.25s; }
.belge-kagit i:nth-of-type(7) { width: 54%; animation-delay: 1.4s; }
@keyframes satir-yaz { from { transform: scaleX(0); } }
.sahne-muhur { position: absolute; z-index: 3; right: 16%; top: 52%; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: rgba(34, 197, 94, .14); border: 2px solid #22c55e; color: #16a34a; rotate: -14deg; animation: muhur-bas .5s cubic-bezier(.3, 1.6, .5, 1) 1.8s both; }
.sahne-muhur .ikon { width: 34px; height: 34px; }
@keyframes muhur-bas { from { opacity: 0; scale: 1.8; } }
.sahne--belge .sahne-kart.s-sol-alt { bottom: 0; }
.kirinti { display: flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--soluk); margin-bottom: 16px; }
.kirinti a:hover { color: var(--metin); }
.kirinti .ikon { width: 14px; height: 14px; }

/* Kurumsal ve yasal metin */
.metin-kap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; padding: 64px 0 112px; align-items: start; }
.yan-menu { position: sticky; top: 96px; display: grid; gap: 2px; }
.yan-menu a { padding: 8px 12px; border-radius: 6px; color: var(--metin-2); font-size: 14.5px; }
.yan-menu a:hover { background: var(--zemin-2); color: var(--metin); }
.yan-menu a.etkin { background: var(--mavi-acik); color: var(--mavi); font-weight: 600; }
.metin { color: var(--metin-2); font-size: 16px; line-height: 1.75; min-width: 0; max-width: 800px; }
.metin h2 { font-size: 21px; margin: 40px 0 12px; }
.metin h2:first-child { margin-top: 0; }
.metin h3 { font-size: 16.5px; margin: 22px 0 8px; }
.metin p, .metin ul, .metin ol { margin: 0 0 14px; }
.metin ul, .metin ol { padding-left: 22px; }
.metin li { margin-bottom: 6px; }
.metin strong { color: var(--metin); }
.metin a { color: var(--mavi); font-weight: 600; }
.guncelleme { font-size: 13.5px; color: var(--soluk); margin-bottom: 28px; }
.tablo-kap { overflow-x: auto; }
.bilgi-tablo { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 14.5px; }
.bilgi-tablo th, .bilgi-tablo td { text-align: left; padding: 10px 14px; border: 1px solid var(--cizgi); vertical-align: top; }
.bilgi-tablo th { width: 34%; background: var(--zemin-2); color: var(--metin); font-weight: 600; }
.bilgi-tablo thead th { width: auto; }
.bilgi-tablo .sag { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.iletisim-izgara { padding-top: 64px; }
.iletisim-kart strong { display: block; margin-top: 12px; color: var(--metin); font-size: 16px; }

/* Satın al sayfası */
.siparis-kap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; padding: 48px 0 112px; }
.siparis-blok { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r); padding: 28px; }
.siparis-blok + .siparis-blok { margin-top: 20px; }
.siparis-blok > h2 { font-size: 18px; display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.siparis-blok > h2 .no { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #fff; background: var(--mavi); }
.form-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-izgara > .tam-satir { grid-column: 1 / -1; }
.secim-kartlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.secim-kartlar.uc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bosluk-ust { margin-top: 16px; }
.form-baslik { font-size: 17px; margin-bottom: 14px; }
.ya-da { display: flex; align-items: center; gap: 12px; margin: 28px 0 20px; color: var(--soluk); font-size: 13.5px; font-weight: 500; }
.ya-da::before, .ya-da::after { content: ""; flex: 1; height: 1px; background: var(--cizgi); }
.ozet { position: sticky; top: 92px; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r); padding: 26px; box-shadow: var(--golge); }
.ozet h2 { font-size: 18px; margin-bottom: 14px; }
.ozet-satir { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cizgi); font-size: 14.5px; }
.ozet-satir span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 500; }
.ozet-satir.soluk { color: var(--soluk); }
.ozet-toplam { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 20px; }
.ozet-toplam span { font-weight: 600; }
.ozet-toplam strong { font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ozet .onay { font-size: 13.5px; margin-bottom: 12px; color: var(--metin-2); font-weight: 400; }
.ozet .onay a { color: var(--mavi); font-weight: 600; }
.guvenli-not { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; font-size: 13px; color: var(--soluk); }
.guvenli-not .ikon { width: 16px; height: 16px; color: var(--basari); margin-top: 2px; }
.hata-kutu { padding: 12px 16px; border-radius: var(--r-kontrol); border: 1px solid #fecaca; background: #fef2f2; color: #991b1b; margin-bottom: 20px; font-size: 14.5px; font-weight: 500; }
.ozet .alan .hata { margin: -6px 0 10px 29px; }
.kupon-satir { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 16px; }
.kupon-satir .alan { flex: 1; margin: 0; }
.kupon-satir .alan .hata { margin: 4px 0 0; }
.kupon-satir .dugme { flex: none; }
.kupon-mesaj { margin: -8px 0 16px; font-size: 13.5px; font-weight: 500; color: var(--basari); }
.kupon-mesaj.hata { color: var(--hata); }

/* Sözleşme modalı (satın alırken; formdaki bilgilerle dolu) */
.sozlesme-diyalog { width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--cizgi); border-radius: 14px; box-shadow: var(--golge-buyuk); color: var(--metin); }
.sozlesme-diyalog[open] { display: flex; flex-direction: column; }
.sozlesme-diyalog::backdrop { background: rgba(15, 23, 42, .5); }
.diyalog-ust { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--cizgi); }
.diyalog-ust h2 { font-size: 18px; }
.kapat { width: 36px; height: 36px; border-radius: var(--r-kontrol); border: 1px solid var(--cizgi); background: #fff; color: var(--metin-2); display: grid; place-items: center; cursor: pointer; flex: none; }
.kapat:hover { background: var(--zemin-2); color: var(--metin); }
.diyalog-govde { flex: 1; overflow-y: auto; padding: 24px; max-width: none; font-size: 15px; }
.diyalog-alt { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--cizgi); background: var(--zemin-2); border-radius: 0 0 14px 14px; }

/* Ödeme sayfası: özet solda, kart önizlemesi ve form sağda */
.odeme-kap { grid-template-columns: 380px minmax(0, 1fr); }
.odeme-kap .ozet { order: 0; }
.durum-kutu { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 10px; background: var(--mavi-acik); border: 1px solid var(--mavi-cizgi); color: var(--metin-2); }
.durum-kutu > .ikon { color: var(--mavi); margin-top: 2px; }
.durum-kutu h2 { font-size: 17px; margin-bottom: 4px; }
.durum-kutu.basarili { background: #f0fdf4; border-color: #bbf7d0; }
.durum-kutu.basarili > .ikon { color: var(--basari); }
/* Canlı kart önizlemesi: CVV alanına gelince arkası döner */
.kart-sahne { perspective: 1200px; width: min(380px, 100%); aspect-ratio: 1.586; margin: 0 auto 28px; }
.kart-cevir { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.kart-sahne.arkada .kart-cevir { transform: rotateY(180deg); }
.kart-yuz { position: absolute; inset: 0; border-radius: 16px; padding: 22px 24px; color: #fff; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; overflow: hidden;
    background: radial-gradient(ellipse 80% 90% at 100% 0%, rgba(124, 180, 255, .45), transparent 60%), linear-gradient(135deg, #0b2a52, var(--mavi) 55%, #0b1526); box-shadow: 0 24px 50px -18px rgba(8, 84, 160, .6); }
.kart-yuz.arka { transform: rotateY(180deg); padding: 22px 0; }
.kart-ust { display: flex; justify-content: space-between; align-items: center; }
.kart-cip { width: 42px; height: 32px; border-radius: 6px; background: linear-gradient(135deg, #f5d27a, #c9a14a); }
.kart-marka { font-size: 18px; font-weight: 800; letter-spacing: .04em; font-style: italic; min-height: 24px; }
.kart-no { margin-top: auto; font-size: clamp(17px, 2.4vw, 22px); letter-spacing: .12em; font-variant-numeric: tabular-nums; font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.kart-alt { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.kart-alt span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.kart-alt b { display: block; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.kart-serit { height: 42px; background: #0b1526; margin-top: 6px; }
.kart-imza { margin: 22px 24px 0; height: 38px; border-radius: 4px; background: repeating-linear-gradient(45deg, #f8fafc 0 6px, #e2e8f0 6px 12px); display: flex; align-items: center; justify-content: flex-end; padding: 0 12px; }
.kart-imza span { color: var(--metin); font-weight: 700; font-family: ui-monospace, Consolas, monospace; letter-spacing: .1em; }
.kart-yuz.arka p { margin: 14px 24px 0; font-size: 11.5px; opacity: .75; }

/* Müşteri girişi ve kayıt (panel ekranları panel.css'tedir) */
.giris-kap { max-width: 460px; padding: 48px 0 96px; display: grid; gap: 16px; align-content: start; }
.giris-kap > .siparis-blok { margin: 0; }
.giris-kap .siparis-blok { display: grid; gap: 4px; }
.giris-kap .secim-kartlar { margin-bottom: 12px; }
.giris-kap.deneme-kap { max-width: 640px; }
.deneme-baslik { margin-top: 18px; font-size: 17px; }
.deneme-not { margin: 2px 0 10px; }
.tuzak { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.durum-kutu.hatali { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.durum-kutu.hatali > .ikon { color: var(--hata); }
.etiket-durum { font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 999px; color: #991b1b; background: #fef2f2; }
.etiket-durum.gecerli { color: var(--basari); background: #dcfce7; }
.siparis-blok input[type="file"] { padding: 6px; height: auto; cursor: pointer; }
.siparis-blok input[type="file"]::file-selector-button { height: 32px; margin-right: 12px; padding: 0 14px; border: 1px solid var(--cizgi); border-radius: var(--r-kontrol); background: var(--zemin-2); color: var(--metin); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.siparis-blok input[type="file"]::file-selector-button:hover { border-color: var(--mavi-cizgi); background: var(--mavi-acik); }
.test-serit { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding: 14px 16px; border-radius: 10px; background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.test-serit .ikon { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.test-serit div { display: grid; gap: 2px; font-size: 14px; }
.test-serit strong { font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
/* İndirme sayfası */
.indir-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.indir-kart { display: flex; gap: 18px; align-items: flex-start; padding: 28px; border: 1px solid var(--cizgi); border-radius: var(--r); background: #fff; }
.indir-kart.one { grid-column: 1 / -1; background: radial-gradient(ellipse 70% 90% at 100% 0%, rgba(8, 84, 160, .07), transparent 60%), #fff; }
.indir-kart .kart-ikon { flex: none; }
.indir-kart h2 { font-size: 22px; margin-bottom: 8px; }
.indir-kart p { color: var(--metin-2); margin-bottom: 16px; max-width: 720px; }
.indir-kart .indir-bilgi { margin: 12px 0 0; font-size: 13px; color: var(--soluk); word-break: break-all; }
@media (max-width: 760px) { .indir-izgara { grid-template-columns: minmax(0, 1fr); } .indir-kart { flex-direction: column; } }

.mono-yazi { font-family: ui-monospace, Consolas, monospace; font-size: 13.5px; }
.hata-listesi { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }

/* Panel form bileşenleri (x-alan, x-onay, x-radyo) */
.alan { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.alan.tam { grid-column: 1 / -1; }
.alan > label, .alan > .etiket { font-weight: 600; font-size: 13.5px; color: var(--metin); }
.alan .zorunlu { color: var(--hata); margin-left: 2px; }
.alan .ipucu { font-size: 12.5px; color: var(--soluk); }
.alan .hata { font-size: 13px; color: var(--hata); font-weight: 500; }
.girdi { width: 100%; font: inherit; font-size: 15px; color: var(--metin); background: #fff; border: 1px solid #cbd5e1; border-radius: var(--r-kontrol); padding: 0 12px; height: 44px; transition: border-color .15s, box-shadow .15s; }
textarea.girdi { height: 88px; padding: 10px 12px; resize: vertical; }
.girdi:hover { border-color: #94a3b8; }
.girdi:focus { outline: none; border-color: var(--mavi); box-shadow: 0 0 0 3px rgba(8, 84, 160, .15); }
.girdi.hatali, .girdi-grup.hatali { border-color: var(--hata); }
.girdi:disabled { background: var(--zemin-2); color: var(--soluk); }
.girdi.mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.girdi-grup { display: flex; align-items: stretch; height: 44px; border: 1px solid #cbd5e1; border-radius: var(--r-kontrol); background: #fff; position: relative; transition: border-color .15s, box-shadow .15s; }
.girdi-grup:focus-within { border-color: var(--mavi); box-shadow: 0 0 0 3px rgba(8, 84, 160, .15); }
.girdi-grup > .girdi { border: 0; box-shadow: none; height: auto; flex: 1; min-width: 0; }
.girdi-grup > .ek { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; font: inherit; font-weight: 600; font-size: 14px; color: var(--metin); background: var(--zemin-2); border: 0; border-right: 1px solid #cbd5e1; border-radius: 7px 0 0 7px; cursor: pointer; }
.girdi-grup > .ek svg { width: 12px; height: 12px; }
.acilir { position: absolute; z-index: 60; top: calc(100% + 6px); left: -1px; min-width: 260px; max-width: min(400px, 90vw); background: #fff; border: 1px solid var(--cizgi); border-radius: 10px; box-shadow: var(--golge-buyuk); padding: 6px; }
.acilir .girdi { height: 38px; margin-bottom: 6px; }
.acilir ul { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; }
.acilir li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.acilir li:hover, .acilir li.vurgu { background: var(--mavi-acik); }
.acilir li .kod { margin-left: auto; font-size: 12.5px; color: var(--soluk); }
.acilir .bos-satir { padding: 10px; color: var(--soluk); font-size: 13.5px; }
.onay { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; line-height: 1.45; font-weight: 500; }
.onay .aciklama { display: block; font-size: 13px; font-weight: 400; color: var(--soluk); margin-top: 2px; }
.onay.onay-kart, .secim-kartlar .onay { padding: 14px 16px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; height: 100%; transition: border-color .15s, background .15s; }
.onay.onay-kart:hover, .secim-kartlar .onay:hover { border-color: #94a3b8; }
.onay.onay-kart:has(input:checked), .secim-kartlar .onay:has(input:checked) { border-color: var(--mavi); background: var(--mavi-acik); box-shadow: 0 0 0 1px var(--mavi) inset; }
.onay-kart .kart-govde { display: flex; flex-direction: column; min-width: 0; }
.onay-kart .kart-baslik { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.secim-kartlar .onay > span { display: flex; flex-direction: column; font-weight: 600; }
.secim-kartlar .onay > span em { font-style: normal; font-size: 13px; font-weight: 400; color: var(--metin-2); margin-top: 2px; }
input[type=checkbox], input[type=radio] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 2px 0 0; flex: none; border: 1.5px solid #94a3b8; background: #fff; border-radius: 4px; display: inline-grid; place-content: center; cursor: pointer; transition: background .12s, border-color .12s; }
input[type=radio] { border-radius: 50%; }
input[type=checkbox]::before { content: ""; width: 10px; height: 10px; background: #fff; clip-path: polygon(14% 50%, 2% 63%, 38% 96%, 98% 24%, 86% 12%, 37% 70%); transform: scale(0); transition: transform .1s; }
input[type=radio]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .1s; }
input[type=checkbox]:checked, input[type=radio]:checked { background: var(--mavi); border-color: var(--mavi); }
input[type=checkbox]:checked::before, input[type=radio]:checked::before { transform: scale(1); }

/* Aşağıdan belirme (yalnız ekranın altındaki öğeler; site.js işaretler) */
.belirecek { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.belirecek.gorundu { opacity: 1; transform: none; }

/* Dar ekran */
@media (max-width: 1080px) {
    .kahraman-ic, .ozellik-satir, .fiyat-izgara, .siparis-kap, .odeme-kap { grid-template-columns: minmax(0, 1fr); }
    .odeme-kap .ozet { order: 1; }
    .kahraman-ic { gap: 48px; }
    .ozellik-satir { gap: 36px; }
    .ozellik-satir.ters .ozellik-metin { order: 0; }
    .izgara.dort { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .izgara.uc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ozet { position: static; }
    .alt-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bento-kart.b5, .bento-kart.b7 { grid-column: span 12; }
    .bento-kart.b4 { grid-column: span 6; }
    .uz-bas, .uz-govde { grid-template-columns: minmax(0, 1fr); }
    .uz-sahne { display: none; }
    .uz-satir-gorsel { display: block; width: 100%; border-radius: 10px; margin-bottom: 14px; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
    .uz-detay > div { padding-left: 0; }
    .cagri { flex-direction: column; align-items: flex-start; padding: 48px; }
}
@media (max-width: 900px) {
    .ust-menu { position: fixed; inset: 68px 0 auto; flex-direction: column; gap: 0; padding: 8px 24px 20px; background: #fff; border-bottom: 1px solid var(--cizgi); box-shadow: var(--golge); display: none; }
    .ust.acik .ust-menu { display: flex; }
    .ust-menu a { padding: 14px 0; font-size: 16px; border-bottom: 1px solid var(--cizgi); border-radius: 0; }
    .menu-dugme { display: grid; }
    .ust-tel { display: none; }
    .ust-eylem { gap: 10px; }
    .metin-kap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .yan-menu { position: static; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
    .yan-menu::-webkit-scrollbar { display: none; }
    .yan-menu a { white-space: nowrap; border: 1px solid var(--cizgi); }
    .gercekler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gercekler > div:nth-child(2) { border-right: 0; }
    .gercekler > div:nth-child(-n+2) { border-bottom: 1px solid var(--cizgi); }
}
@media (max-width: 640px) {
    .kap { width: calc(100% - 32px); }
    .kahraman { padding: 56px 0 72px; }
    .bolum { padding: 56px 0; }
    .bolum-bas { margin-bottom: 32px; }
    .izgara.uc, .izgara.dort, .form-izgara, .secim-kartlar, .secim-kartlar.uc, .alt-izgara { grid-template-columns: minmax(0, 1fr); }
    .ozellik-satir + .ozellik-satir { margin-top: 56px; }
    .fiyat-kart { padding: 24px; }
    .fiyat-kart .madde { grid-template-columns: minmax(0, 1fr); }
    .cagri { padding: 36px 24px; }
    .siparis-blok, .ozet { padding: 20px; }
    .ust-eylem .dugme { height: 38px; padding: 0 14px; font-size: 14px; }
    .marka-ek { display: none; }
    .qr-onizleme { gap: 16px; }
    .tv.yatay { width: 190px; }
    .bento-kart.b4 { grid-column: span 12; }
    .sahne-yil strong { font-size: 80px; }
    .mozaik { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 200px; }
    .mozaik-kare.m1, .mozaik-kare:last-child { grid-row: auto; grid-column: auto; }
    .uz-dugme { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 18px 0; }
    .uz-ok { width: 40px; height: 40px; }
    .sepet-dugme { right: 16px; bottom: 16px; }
}
@media (max-width: 640px) {
    .kareler { padding: 20px 0 64px; }
    .yuzen { min-width: 0; max-width: 220px; padding: 9px 11px; }
    .yuzen .kart-ikon { width: 30px; height: 30px; }
    .yuzen.sag-ust { right: -4px; top: -6px; }
    .yuzen.sol-alt { left: -4px; bottom: 6px; }
    .gostergeler { padding-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .kare.canli .yuzen, .kare.canli .ekran { animation: none; }
    .gosterge.etkin i { animation: none; transform: scaleX(1); }
}
@media (max-width: 900px) {
    .sayfa-bas.sahneli .sayfa-bas-ic, .hata-ic { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 32px; }
    .sahne { height: 320px; max-width: 520px; width: 100%; margin: 0 auto; }
}
@media (max-width: 640px) {
    .sayfa-bas, .sayfa-bas.sahneli { padding: 40px 0 44px; }
    .sayfa-bas p { font-size: 16px; }
    .sahne { height: 290px; }
    .sahne-kart { max-width: 220px; padding: 9px 12px 9px 9px; }
    .sahne-kart .kart-ikon { width: 30px; height: 30px; }
    .sahne-kart b { font-size: 13px; }
    .sahne-uygulamalar { gap: 10px 104px; }
    .sahne-uygulamalar li { padding: 8px; font-size: 12px; gap: 8px; }
    .sahne-uygulamalar .kart-ikon { width: 28px; height: 28px; }
    .sahne-uygulamalar li i { display: none; }
    .sahne-merkez-lisans { width: 92px; padding: 16px 8px; }
    .sahne-merkez-lisans img { width: 70px; }
    .sahne-cipler li:nth-child(n+3) { display: none; }
    .sahne--sms .sahne-kart.s-sag-ust { top: auto; bottom: 8px; right: 0; }
    .hata-sayfa { padding: 48px 0 56px; }
    .hata-sahne { height: 300px; }
    .hata-sahne .sahne-kart.s-sol-alt { display: none; }
    .hata-barkod .cubuklar { height: 100px; }
    @keyframes tara { to { top: 128px; } }
    .sahne--fiyatlar .sahne-fiyat { left: 50%; }
    .sahne--fiyatlar .sahne-kart, .sahne-fiyat.arka { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sayfa-bas *, .sayfa-bas *::before, .sayfa-bas *::after, .hata-sayfa * { animation: none; }
    .balon { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .belirecek { opacity: 1; transform: none; transition: none; }
}