/* Gastfood Bayi Paneli — mobil öncelikli arayüz.
   Saha kullanımı: tek elle, ayaküstü, güneş altında. Bu yüzden büyük dokunma
   alanları (min 48px), yüksek kontrast, az renk ve süs yok. */

:root {
    --kagit:    #F6F5F2;
    --yuzey:    #FFFFFF;
    --murekkep: #17181A;
    --ikincil:  #5C5B57;
    --soluk:    #6F6E69;
    --cizgi:    #E4E2DC;
    --cizgi-2:  #CFCCC3;
    --turuncu:  #C2681A;
    --turuncu-bg: #FBF0E3;
    --yesil:    #1F6B43;
    --yesil-bg: #E9F3ED;
    --kirmizi:  #A32A1C;
    --kirmizi-bg: #FBEAE7;
    --font:     'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --golge:    0 1px 2px rgba(23, 24, 26, .06), 0 8px 24px rgba(23, 24, 26, .05);
}

* , *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; background: var(--kagit); color: var(--murekkep);
    font: 400 15px/1.5 var(--font);
    -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
.ikon { flex-shrink: 0; }
.gizli-metin { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Sabit araç çubuğu (uygulama gibi) ---- */
.araclar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px;
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 10px 0;
    background: var(--murekkep); color: #F7F6F3;
}
.araclar__geri {
    display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: 12px; color: inherit; text-decoration: none;
}
.araclar__geri:active { background: rgba(255,255,255,.12); }
.araclar__logo { padding-left: 4px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.araclar__logo span { font-weight: 800; color: #F3A24A; }
.araclar__baslik {
    grid-column: 2; text-align: center; font-size: 16px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.araclar__bosluk { display: block; width: 44px; }
.kontor-rozet {
    justify-self: end; min-width: 40px; padding: 6px 10px; border-radius: 999px;
    background: rgba(255,255,255,.14); color: inherit;
    font-size: 13px; font-weight: 700; text-align: center; text-decoration: none;
}
.kontor-rozet--az { background: #7A2318; color: #FFE7E2; }

/* ---- Gövde ---- */
.govde {
    max-width: 640px; margin: 0 auto;
    padding: calc(72px + env(safe-area-inset-top, 0px)) 16px calc(96px + env(safe-area-inset-bottom, 0px));
}
.govde--genis { max-width: 980px; }

/* ---- Sabit sekme çubuğu ---- */
.sekmeler {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: grid; grid-template-columns: repeat(5, 1fr);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--yuzey); border-top: 1px solid var(--cizgi);
}
.sekmeler__oge {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 10px 2px 12px; font-size: 11px; font-weight: 600;
    color: var(--soluk); text-decoration: none;
}
.sekmeler__oge.is-aktif { color: var(--murekkep); }
.sekmeler__oge.is-aktif .ikon { color: var(--turuncu); }

/* ---- Başlıklar ---- */
h1, h2, h3 { margin: 0; letter-spacing: -.01em; }
.sayfa-baslik { font-size: 21px; font-weight: 700; }
.sayfa-alt { margin: 4px 0 0; font-size: 14px; color: var(--ikincil); }
.bolum-baslik {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 24px 0 10px; font-size: 12.5px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--soluk);
}

/* ---- Kart ---- */
.kart {
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 14px;
    padding: 16px; margin-bottom: 12px;
}
.kart--vurgu { border-color: var(--cizgi-2); box-shadow: var(--golge); }
.kart__baslik { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.kart__alt { font-size: 13.5px; color: var(--ikincil); }

/* ---- Düğmeler ---- */
.dugme {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 18px; width: auto;
    border: 1px solid transparent; border-radius: 12px;
    background: var(--murekkep); color: #FFF;
    font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.dugme:disabled { opacity: .55; cursor: default; }
.dugme--blok { display: flex; width: 100%; }
.dugme--ikincil { background: var(--yuzey); color: var(--murekkep); border-color: var(--cizgi-2); }
.dugme--turuncu { background: var(--turuncu); }
.dugme--tehlike { background: var(--yuzey); color: var(--kirmizi); border-color: rgba(163,42,28,.35); }
.dugme--kucuk { min-height: 38px; padding: 0 12px; font-size: 13.5px; border-radius: 9px; }
.dugme-satiri { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.dugme-satiri .dugme { flex: 1 1 160px; }

/* ---- Form ---- */
.alan { display: block; margin-bottom: 14px; }
.alan > span { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: var(--ikincil); }
.alan input, .alan select, .alan textarea {
    width: 100%; min-height: 48px; padding: 12px 14px;
    background: var(--yuzey); border: 1px solid var(--cizgi-2); border-radius: 12px;
}
.alan textarea { min-height: 84px; resize: vertical; }
.alan input:focus-visible, .alan select:focus-visible, .alan textarea:focus-visible,
.dugme:focus-visible, .sekmeler__oge:focus-visible {
    outline: 2px solid var(--turuncu); outline-offset: 2px;
}
.alan__ipucu { margin: 6px 0 0; font-size: 12.5px; color: var(--soluk); }
.ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---- Bildirim ---- */
.bildirim {
    margin: 0 0 14px; padding: 12px 14px; border-radius: 12px;
    font-size: 14px; line-height: 1.45;
}
.bildirim--iyi  { background: var(--yesil-bg); color: var(--yesil); }
.bildirim--kotu { background: var(--kirmizi-bg); color: var(--kirmizi); }
.bildirim--uyari{ background: var(--turuncu-bg); color: var(--turuncu); }

/* ---- Adım çubuğu ---- */
.adimlar {
    display: flex; gap: 4px; list-style: none; margin: 0 0 18px; padding: 0;
    overflow-x: auto; scrollbar-width: none;
}
.adimlar::-webkit-scrollbar { display: none; }
.adimlar__oge {
    display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
    padding: 6px 10px 6px 6px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; color: var(--soluk); background: var(--yuzey);
    border: 1px solid var(--cizgi);
}
.adimlar__no {
    display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    background: var(--cizgi); color: var(--soluk); font-size: 11.5px; font-weight: 700;
}
.adimlar__oge.is-aktif { color: var(--murekkep); border-color: var(--murekkep); }
.adimlar__oge.is-aktif .adimlar__no { background: var(--murekkep); color: #FFF; }
.adimlar__oge.is-bitti { color: var(--yesil); border-color: rgba(31,107,67,.3); }
.adimlar__oge.is-bitti .adimlar__no { background: var(--yesil); color: #FFF; }

/* ---- Panel özet kutuları ---- */
.ozet-izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
.ozet {
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 14px; padding: 14px;
}
.ozet__deger { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.ozet__etiket { margin-top: 2px; font-size: 12.5px; color: var(--soluk); }

/* ---- Liste satırı ---- */
.satir {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 14px 0; border-bottom: 1px solid var(--cizgi);
    background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left;
    text-decoration: none; cursor: pointer;
}
.satir:last-child { border-bottom: 0; }
.satir__govde { flex: 1; min-width: 0; }
.satir__ad { font-size: 15.5px; font-weight: 600; }
.satir__alt { margin-top: 2px; font-size: 13px; color: var(--soluk); }
.satir__sag { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rozet {
    display: inline-block; padding: 3px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}
.rozet--taslak { background: var(--turuncu-bg); color: var(--turuncu); }
.rozet--tamam  { background: var(--yesil-bg); color: var(--yesil); }
.rozet--iptal  { background: var(--kirmizi-bg); color: var(--kirmizi); }

/* ---- Fotoğraf yükleme ---- */
.foto-alan {
    display: grid; place-items: center; gap: 10px; padding: 28px 18px;
    border: 1.5px dashed var(--cizgi-2); border-radius: 16px; background: var(--yuzey);
    text-align: center;
}
.foto-alan .ikon { color: var(--turuncu); }
.foto-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.foto-izgara figure { position: relative; margin: 0; }
.foto-izgara img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 10px; background: var(--cizgi); }
.foto-sil {
    position: absolute; top: 4px; right: 4px; width: 28px; height: 28px;
    display: grid; place-items: center; border: 0; border-radius: 50%;
    background: rgba(23,24,26,.75); color: #FFF; cursor: pointer;
}

/* ---- Menü düzeltme ---- */
.menu-kategori { margin-bottom: 18px; }
.menu-kategori__bas {
    display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
    padding-bottom: 6px; border-bottom: 1px solid var(--cizgi-2);
}
.menu-kategori__ad {
    flex: 1; min-width: 0; padding: 4px 0; border: 0; background: none;
    font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.urun {
    display: grid; grid-template-columns: 1fr 96px; gap: 8px 12px;
    padding: 12px 0; border-bottom: 1px solid var(--cizgi);
}
.urun:last-child { border-bottom: 0; }
.urun input {
    width: 100%; min-height: 40px; padding: 8px 10px;
    border: 1px solid transparent; border-radius: 9px; background: transparent;
}
.urun input:hover { border-color: var(--cizgi); }
.urun input:focus { border-color: var(--murekkep); background: var(--yuzey); outline: none; }
.urun__ad { font-size: 15px; font-weight: 600; }
.urun__fiyat { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.urun__aciklama { grid-column: 1 / -1; font-size: 13.5px; color: var(--ikincil); }
.urun__araclar { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.urun--supheli { background: #FFFBF3; border-radius: 10px; }
.urun__uyari { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--turuncu); }
.urun__sil { border: 0; background: none; padding: 6px; color: var(--soluk); cursor: pointer; }
.kayit-durum { font-size: 12.5px; color: var(--soluk); }

/* ---- Tema seçimi ---- */
.tema-serit {
    display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px;
    scrollbar-width: none; scroll-snap-type: x proximity;
}
.tema-serit::-webkit-scrollbar { display: none; }
.tema-cip {
    flex: 0 0 auto; min-height: 40px; padding: 0 14px; scroll-snap-align: start;
    border: 1px solid var(--cizgi-2); border-radius: 999px; background: var(--yuzey);
    font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.tema-cip.is-secili { background: var(--murekkep); border-color: var(--murekkep); color: #FFF; }
.telefon {
    margin: 14px auto 0; width: 100%; max-width: 380px;
    border: 10px solid #1B1C1E; border-radius: 34px; overflow: hidden; background: #1B1C1E;
    box-shadow: var(--golge);
}
.telefon iframe { display: block; width: 100%; height: 62vh; min-height: 420px; border: 0; background: #FFF; }

/* ---- Fiyat özeti ---- */
.fiyat-satiri {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid var(--cizgi); font-size: 14.5px;
}
.fiyat-satiri:last-child { border-bottom: 0; }
.fiyat-satiri b { font-variant-numeric: tabular-nums; }
.fiyat-satiri--toplam { font-size: 16px; font-weight: 700; }
.kar { color: var(--yesil); font-weight: 700; }

/* ---- Kod/kopyalama ---- */
.kod {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 14px; border-radius: 12px; background: #1B1C1E; color: #F7F6F3;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px;
    word-break: break-all;
}
.kod > span { min-width: 0; word-break: normal; overflow-wrap: anywhere; }   /* IBAN boşluktan kırılsın */
.kod button {
    flex: 0 0 auto; border: 0; background: rgba(255,255,255,.14); color: #FFF; border-radius: 8px; padding: 8px 10px;
    font-family: var(--font); font-size: 13px; font-weight: 600; white-space: nowrap; word-break: normal; cursor: pointer;
}

/* ---- Boş durum ---- */
.bos-durum { padding: 32px 16px; text-align: center; color: var(--soluk); }
.bos-durum strong { display: block; margin-bottom: 4px; color: var(--murekkep); font-size: 16px; }

/* ---- Giriş ekranı ---- */
body.bos { background: var(--murekkep); }
.bos__govde {
    min-height: 100dvh; display: grid; place-items: center; padding: 24px;
}
.giris-kart {
    width: 100%; max-width: 380px; background: var(--yuzey);
    border-radius: 18px; padding: 26px 22px;
}
.giris-kart h1 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.giris-kart p.alt { margin: 0 0 20px; font-size: 14px; color: var(--ikincil); }

/* ---- Yükleniyor ---- */
.yukleniyor { display: inline-flex; align-items: center; gap: 10px; color: var(--ikincil); font-size: 14px; }
.donen {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--cizgi-2); border-top-color: var(--turuncu);
    animation: don 700ms linear infinite;
}
@keyframes don { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .donen { animation-duration: 2s; } }

@media (min-width: 720px) {
    .telefon iframe { height: 70vh; }
    .ozet-izgara { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Ürün seçimi (1. adım) ---- */
.urun-sec { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.urun-sec input { flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--turuncu); }
.urun-sec__govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.urun-sec__ad { font-size: 16px; font-weight: 700; }
.urun-sec__alt { font-size: 13.5px; color: var(--ikincil); }
.urun-sec__fiyat { margin-top: 4px; font-size: 13px; color: var(--soluk); }
.urun-sec:has(input:checked) { border-color: var(--turuncu); box-shadow: inset 0 0 0 1px var(--turuncu); }

/* ---- Kayıtlı işletme arama sonucu ---- */
.cari-sonuc .satir { padding: 12px 10px; }
.cari-sonuc .satir.is-secili { background: var(--turuncu-bg); border-radius: 10px; border-bottom-color: transparent; }

/* ---- Yan menü ek blokları (masaüstünde görünür) ---- */
.sekmeler__bas, .sekmeler__dip { display: none; }

/* ================================================================
   MASAÜSTÜ (≥1000px)
   ================================================================
   Aynı işaretleme, farklı düzen: alt sekme çubuğu sol yan menüye,
   koyu araç çubuğu da içeriğin üstündeki açık başlığa dönüşüyor.
   Saha telefonla çalışıyor, ofis ekranla — ikisi de aynı uygulama. */
@media (min-width: 1000px) {
    :root { --yan: 244px; }

    .araclar {
        left: var(--yan); height: 64px; padding: 0 28px;
        grid-template-columns: auto 1fr auto; gap: 14px;
        background: var(--yuzey); color: var(--murekkep);
        border-bottom: 1px solid var(--cizgi);
    }
    .araclar__logo { display: none; }
    .araclar__bosluk { display: none; }
    .araclar__baslik { grid-column: 2; text-align: left; font-size: 19px; font-weight: 700; }
    .araclar__geri { width: 38px; height: 38px; border: 1px solid var(--cizgi-2); border-radius: 10px; }
    .araclar__geri:hover { background: var(--kagit); }
    .kontor-rozet { background: var(--kagit); border: 1px solid var(--cizgi-2); padding: 8px 14px; }
    .kontor-rozet::after { content: ' kontör'; font-weight: 500; color: var(--ikincil); }
    .kontor-rozet--az { background: var(--kirmizi-bg); border-color: rgba(163,42,28,.3); color: var(--kirmizi); }

    .sekmeler {
        top: 0; right: auto; bottom: 0; width: var(--yan);
        display: flex; flex-direction: column; gap: 2px;
        padding: 18px 12px 16px; overflow-y: auto;
        border-top: 0; border-right: 1px solid var(--cizgi);
    }
    .sekmeler__bas { display: block; padding: 0 6px 16px; }
    .sekmeler__logo { display: block; margin-bottom: 14px; font-size: 15px; font-weight: 600; }
    .sekmeler__logo span { font-weight: 800; color: var(--turuncu); }
    .sekmeler__bas .dugme { min-height: 42px; }
    .sekmeler__oge {
        flex-direction: row; justify-content: flex-start; gap: 11px;
        padding: 11px 12px; border-radius: 10px; font-size: 14.5px;
    }
    .sekmeler__oge:hover { background: var(--kagit); color: var(--murekkep); }
    .sekmeler__oge.is-aktif { background: var(--turuncu-bg); color: var(--turuncu); }
    .sekmeler__oge.is-aktif .ikon { color: var(--turuncu); }
    .sekmeler__dip {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--cizgi);
    }
    .sekmeler__bayi { min-width: 0; font-size: 13px; line-height: 1.35; }
    .sekmeler__bayi strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sekmeler__bayi span { color: var(--soluk); }
    .sekmeler__cikis { font-size: 13px; font-weight: 600; color: var(--soluk); text-decoration: none; }
    .sekmeler__cikis:hover { color: var(--kirmizi); }

    .govde { max-width: none; margin-left: var(--yan); padding: 88px 28px 56px; }
    .govde__ic { max-width: 880px; margin: 0 auto; }
    .govde--genis .govde__ic { max-width: 1160px; }

    /* Sihirbaz adımları yatay şeritte rahat nefes alsın */
    .adimlar { margin-bottom: 22px; }


    .dugme--yalnizMobil { display: none; }

    /* Tablo benzeri listeler ferahlasın */
    .kart { padding: 18px; }
    .ikili { gap: 14px; }
}

/* ---- Katlanır bölüm (isteğe bağlı alanlar) ---- */
.katlanir { margin-bottom: 12px; }
.katlanir > summary {
    display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px;
    border: 1px dashed var(--cizgi-2); border-radius: 12px; background: var(--yuzey);
    font-size: 14.5px; font-weight: 600; cursor: pointer; list-style: none;
}
.katlanir > summary::-webkit-details-marker { display: none; }
.katlanir > summary::after { content: '+'; margin-left: auto; font-size: 19px; font-weight: 500; color: var(--soluk); }
.katlanir[open] > summary::after { content: '−'; }
.katlanir > summary span { font-weight: 400; color: var(--soluk); }

/* Premium rozeti — tema çipinin içinde küçük */
.tema-cip__rozet {
    margin-left: 6px; font-size: 10.5px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: var(--turuncu);
}
.tema-cip.is-secili .tema-cip__rozet { color: #F3A24A; }


/* ---- Adım çubuğu: geçilmiş adımlar bağlantı ---- */
.adimlar__oge a { display: flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.istege-bagli { margin-left: 6px; font-size: 11.5px; font-weight: 500; color: var(--soluk); }

/* ================================================================
   TASARIM KATALOĞU — temaları müşteriye tek tek gösterme
   ================================================================
   Sahne temanın kendi rengini alıyor; telefonun içindeki önizleme 390 px
   genişliğinde çizilip çerçeveye sığacak kadar küçültülüyor (JS --olcek). */
:root { --sekme-yuk: 65px; }
.katalog-not { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--ikincil); }
.katalog-not a { color: var(--turuncu); font-weight: 600; }

.katalog { padding-bottom: 78px; }                       /* sabit "seç" çubuğunun yeri */
.katalog__suzgec { margin: 0 -16px 12px; padding: 0 16px 6px; scroll-padding-inline: 16px; }
.katalog__suzgec::after { content: ''; flex: 0 0 8px; }
.katalog__suzgec .tema-cip { display: inline-flex; align-items: center; gap: 6px; }
.katalog__suzgec .tema-cip b { font-weight: 600; opacity: .55; font-variant-numeric: tabular-nums; }

.katalog__sahne {
    --k-zemin: #EFEDE8; --k-vurgu: #C2681A;
    position: relative; margin: 0 -16px; padding: 18px 0 28px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--k-zemin); transition: background-color .35s ease;
}
.katalog__sahne::before {                                  /* temanın vurgusuyla hafif ışık */
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .16;
    background: radial-gradient(70% 55% at 80% 12%, var(--k-vurgu), transparent 70%);
}
.katalog__telefon {
    position: relative; width: min(56vw, 250px); padding: 8px; border-radius: 36px;
    background: linear-gradient(155deg, #34343A, #0C0C0E 42%, #26262B);
    box-shadow: 0 22px 46px rgba(0, 0, 0, .30), inset 0 0 0 1.2px rgba(255, 255, 255, .14);
}
.katalog__ekran {
    --olcek: .66;
    position: relative; aspect-ratio: 390 / 844; overflow: hidden; border-radius: 29px; background: #FFF;
}
.katalog__kapak {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
}
.katalog__kapak.is-yok { visibility: hidden; }
.katalog__ekran iframe {
    position: absolute; top: 0; left: 0; width: 390px; height: 844px; border: 0; background: #FFF;
    transform: scale(var(--olcek)); transform-origin: top left;
    opacity: 0; transition: opacity .25s ease;
}
.katalog__ekran iframe.is-hazir { opacity: 1; }

.katalog__ok {
    position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
    display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
    border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--murekkep);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18); cursor: pointer;
}
.katalog__ok:active { transform: translateY(-50%) scale(.94); }
.katalog__ok--sol { left: 10px; }
.katalog__ok--sag { right: 10px; }
.katalog__ok:focus-visible { outline: 2px solid var(--turuncu); outline-offset: 2px; }
.katalog__ornek {
    position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
    font-size: 11px; font-weight: 600; letter-spacing: .04em; white-space: nowrap;
    color: rgba(20, 22, 26, .58);
}
.katalog__sahne.is-koyu .katalog__ornek { color: rgba(255, 255, 255, .62); }

.katalog__kunye { padding: 2px 0 12px; }
.katalog__bilgi { padding-top: 14px; }
.katalog__ust {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--soluk); font-variant-numeric: tabular-nums;
}
.katalog__rozet {
    padding: 2px 8px; border-radius: 999px; background: var(--murekkep); color: #FFF;
    font-size: 10.5px; letter-spacing: .08em;
}
.katalog__ad { margin: 6px 0 0; font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; }
.katalog__baslik { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -.015em; }
.katalog__yazi { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ikincil); }
.katalog__sektor { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; }
.katalog__sektor li {
    padding: 5px 11px; border: 1px solid var(--cizgi-2); border-radius: 999px; background: var(--yuzey);
    font-size: 12.5px; font-weight: 600;
}
.katalog__eylem { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.katalog__eylem .dugme.is-begenildi { border-color: rgba(163, 42, 28, .5); color: var(--kirmizi); }
.katalog__eylem .dugme.is-begenildi .ikon { fill: currentColor; }
.katalog__bos { padding: 34px 10px; text-align: center; color: var(--soluk); }

/* Telefonda "seç" düğmesi her zaman elin altında: sekme çubuğunun hemen üstünde. */
.katalog__sec {
    position: fixed; left: 0; right: 0; z-index: 25;
    bottom: calc(var(--sekme-yuk) + env(safe-area-inset-bottom, 0px));
    padding: 10px 16px; border-top: 1px solid var(--cizgi);
    background: rgba(246, 245, 242, .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

@media (prefers-reduced-motion: no-preference) {
    .katalog__kunye.is-gecis > *,
    .katalog__bilgi.is-gecis > :not(.katalog__sec) { animation: katalogGir .28s cubic-bezier(.3, .8, .35, 1) both; }
    .katalog__kunye[data-yon="geri"].is-gecis > *,
    .katalog__bilgi[data-yon="geri"].is-gecis > * { --kayma: -14px; }
    @keyframes katalogGir { from { opacity: 0; transform: translateX(var(--kayma, 14px)); } to { opacity: 1; transform: none; } }
}

/* ---- Tümünü gör: kapak ızgarası ---- */
.izgara-perde {
    position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center;
    background: rgba(23, 24, 26, .5);
}
.izgara-sayfa {
    display: flex; flex-direction: column; width: 100%; max-width: 780px; max-height: 88dvh;
    background: var(--kagit); border-radius: 18px 18px 0 0;
}
.izgara-sayfa__bas {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--cizgi);
}
.izgara-sayfa__kapat {
    display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px;
    background: none; cursor: pointer;
}
.izgara-sayfa__liste {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; overflow-y: auto;
    /* Satırlar içeriği kadar olmalı: kartta overflow:hidden olduğu için "auto"
       satırlar sayfanın boyuna sığacak şekilde eziliyordu. */
    grid-auto-rows: max-content; align-content: start;
    padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
}
.izgara-oge {
    display: block; padding: 0; overflow: hidden; border: 1px solid var(--cizgi); border-radius: 12px;
    background: var(--yuzey); color: inherit; text-align: left; cursor: pointer;
}
.izgara-oge.is-secili { border-color: var(--turuncu); box-shadow: inset 0 0 0 1px var(--turuncu); }
.izgara-oge__kapak { display: block; aspect-ratio: 5 / 7; overflow: hidden; }
.izgara-oge__kapak img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.izgara-oge__ad {
    display: block; padding: 7px 9px 8px; font-size: 12.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.izgara-oge__kalp {
    display: inline-block; width: 7px; height: 7px; margin-left: 4px; border-radius: 50%;
    background: var(--kirmizi); vertical-align: 1px;
}

/* ---- Tam ekran sunum ---- */
.sunum { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: #0E0F11; }
.sunum__ekran { flex: 1; min-height: 0; display: flex; justify-content: center; }
.sunum__ekran iframe { width: 100%; max-width: 480px; height: 100%; border: 0; background: #FFF; }
.sunum__cubuk {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: #17181A; color: #F7F6F3;
}
.sunum__dugme {
    display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; padding: 0;
    border: 0; border-radius: 12px; background: rgba(255, 255, 255, .1); color: inherit; cursor: pointer;
}
.sunum__dugme.is-begenildi { color: #FF8D7E; }
.sunum__dugme.is-begenildi .ikon { fill: currentColor; }
.sunum__sec {
    flex: 0 0 auto; min-height: 46px; padding: 0 16px; border: 0; border-radius: 12px;
    background: var(--turuncu); color: #FFF; font-weight: 700; cursor: pointer;
}
.sunum__ad { flex: 1; min-width: 0; text-align: center; line-height: 1.2; }
.sunum__ad strong { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sunum__ad span { font-size: 11.5px; color: rgba(247, 246, 243, .6); font-variant-numeric: tabular-nums; }

@media (min-width: 720px) {
    .izgara-perde { align-items: center; }
    .izgara-sayfa { border-radius: 18px; }
    .izgara-sayfa__liste { grid-template-columns: repeat(5, 1fr); }
}

@media (min-width: 1000px) {
    .katalog { padding-bottom: 0; }
    .katalog__suzgec { margin: 0 0 18px; padding: 0; flex-wrap: wrap; overflow: visible; }
    .katalog__suzgec::after { content: none; }
    .katalog__duzen {
        display: grid; grid-template-columns: minmax(0, 1fr) 430px; column-gap: 34px; align-items: start;
        grid-template-areas: "kunye sahne" "bilgi sahne"; grid-template-rows: auto 1fr;
    }
    .katalog__kunye { grid-area: kunye; padding: 4px 0 10px; }
    .katalog__sahne { grid-area: sahne; position: sticky; top: 88px; margin: 0; padding: 30px 0 36px; border-radius: 22px; }
    .katalog__telefon { width: 290px; }
    .katalog__bilgi { grid-area: bilgi; padding-top: 0; }
    .katalog__ad { font-size: 34px; }
    .katalog__baslik { font-size: 19px; }
    .katalog__yazi { font-size: 15.5px; max-width: 52ch; }
    .katalog__sec { position: static; margin-top: 22px; padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .katalog__sec .dugme { max-width: 420px; }
}

/* ================================================================
   TESLİM — tutar ve ödeme
   ================================================================
   Tutar okunuyor, yazılmıyor: fiyatlar bayinin listesinden hazır geliyor. */
.teslim-ozet { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tutar__satir {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 11px 0; border-bottom: 1px solid var(--cizgi); font-size: 15.5px; font-weight: 600;
}
.tutar__satir small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--soluk); }
.tutar__satir small b { font-weight: 600; }
.tutar__satir > b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tutar__toplam {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 14px 0 4px;
}
.tutar__toplam span { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--soluk); }
.tutar__toplam b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tutar__not { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--ikincil); }

.odeme-secim { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.odeme-secim label {
    position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 10px;
    border: 1px solid var(--cizgi-2); border-radius: 12px; background: var(--yuzey);
    font-size: 14.5px; font-weight: 600; text-align: center; cursor: pointer;
}
.odeme-secim input { position: absolute; opacity: 0; pointer-events: none; }
.odeme-secim label:has(input:checked) { background: var(--murekkep); border-color: var(--murekkep); color: #FFF; }
.odeme-secim label:has(input:focus-visible) { outline: 2px solid var(--turuncu); outline-offset: 2px; }
.onay-kutu { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 15px; font-weight: 600; cursor: pointer; }
.onay-kutu input { width: 22px; height: 22px; accent-color: var(--yesil); }

/* ================================================================
   KURULUM BELGESİ
   ================================================================ */
.makbuz__bas { padding: 6px 0 18px; text-align: center; }
.makbuz__tik {
    display: inline-grid; place-items: center; width: 58px; height: 58px; margin-bottom: 10px;
    border-radius: 50%; background: var(--yesil); color: #FFF;
}
.makbuz__bas h2 { font-size: 23px; font-weight: 800; letter-spacing: -.025em; }
.makbuz__bas p { margin: 4px 0 0; font-size: 14px; color: var(--ikincil); }
@media (prefers-reduced-motion: no-preference) {
    .makbuz__tik { animation: tikGel .5s cubic-bezier(.3, 1.5, .5, 1) both; }
    @keyframes tikGel { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
}

.makbuz__kagit {
    margin-bottom: 14px; overflow: hidden; background: var(--yuzey);
    border: 1px solid var(--cizgi-2); border-radius: 16px; box-shadow: var(--golge);
}
.makbuz__ust {
    display: flex; justify-content: space-between; gap: 14px; padding: 16px;
    border-bottom: 1px dashed var(--cizgi-2);
}
.makbuz__bayi { min-width: 0; }
.makbuz__bayi strong { display: block; font-size: 15.5px; }
.makbuz__bayi span { display: block; font-size: 12.5px; color: var(--soluk); overflow-wrap: anywhere; }
.makbuz__no {
    flex: 0 0 auto; text-align: right; font-size: 10.5px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--soluk);
}
.makbuz__no b {
    display: block; margin-top: 2px; font-size: 15px; letter-spacing: .02em; text-transform: none;
    color: var(--murekkep); font-variant-numeric: tabular-nums;
}
.makbuz__govde { padding: 4px 16px 14px; }
.makbuz__musteri { padding: 12px 0; border-bottom: 1px solid var(--cizgi); }
.makbuz__musteri strong { display: block; font-size: 16px; }
.makbuz__musteri span { font-size: 13px; color: var(--soluk); }
.makbuz__kalem {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 12px 0; border-bottom: 1px solid var(--cizgi); font-size: 15px; font-weight: 600;
}
.makbuz__kalem small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--soluk); }
.makbuz__kalem b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.makbuz__toplam {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 16px 0 10px;
}
.makbuz__toplam span { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--soluk); }
.makbuz__toplam b { font-size: 32px; font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.makbuz__satir {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 9px 0; border-top: 1px solid var(--cizgi); font-size: 14px;
}
.makbuz__satir span { color: var(--ikincil); }
.makbuz__satir b { text-align: right; font-variant-numeric: tabular-nums; }
.makbuz__satir .rozet { margin-left: 6px; color: var(--turuncu); }
.makbuz__satir .rozet--tamam { color: var(--yesil); }
.makbuz__dip {
    padding: 12px 16px; border-top: 1px dashed var(--cizgi-2); background: var(--kagit);
    font-size: 13.5px; line-height: 1.5; color: var(--ikincil);
}
.makbuz__eylem { margin-top: 18px; }

.odeme-bilgi__tutar {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding-bottom: 10px; border-bottom: 1px solid var(--cizgi);
}
.odeme-bilgi__tutar span { font-size: 13.5px; color: var(--ikincil); }
.odeme-bilgi__tutar b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.karekod { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 16px; align-items: center; }
.karekod__kod { padding: 6px; border: 1px solid var(--cizgi); border-radius: 12px; background: #FFF; }
.karekod__kod svg { display: block; width: 100%; height: auto; }
.karekod__yan strong { display: block; font-size: 15.5px; line-height: 1.3; }
.karekod__yan p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ikincil); }
.karekod__yan .dugme-satiri .dugme { flex: 1 1 120px; }

@media (min-width: 1000px) {
    .makbuz { max-width: 620px; margin: 0 auto; }
    .karekod { grid-template-columns: 150px minmax(0, 1fr); }
}

/* ---- Baskı: yalnızca belge ---- */
@media print {
    .araclar, .sekmeler, .yazdirilmaz, .bildirim, .makbuz__tik { display: none !important; }
    html, body { background: #FFF !important; }
    .govde { max-width: none; margin: 0; padding: 0; }
    .govde__ic { max-width: 560px; margin: 0 auto; }
    .makbuz__bas { padding-top: 0; text-align: left; }
    .makbuz__kagit, .kart { box-shadow: none; border-color: #999; break-inside: avoid; }
    .kod { background: #FFF; color: #000; border: 1px solid #999; }
    .kod button { display: none; }
    .bolum-baslik { margin-top: 16px; }
}