/* =====================================================================
   css/uygulama.css — "Uygulamayı İndir" (12.10.2026) · includes/uygulama.php + js/uygulama.js
   Üç parça: üst alandaki simge düğmesi (.uyg-ust), mobil menü kartı (.uyg-kart), adım penceresi (.uyg-pen).
   Vurgu YALNIZ tema değişkeninden (--primary-green) türer — mobil menüyle (#mobileMenu.mm-fullpage) aynı formül:
   açık tema rengi koyulaştırılır (beyaz zeminde okunur), koyu renk aynen kalır. Desteklemeyen eski tarayıcıda ham renk.
   Öğeler `hidden` ile gelir; Bootstrap `[hidden]{display:none!important}` → betik açarken özniteliği kaldırır.
   ===================================================================== */
.uyg-ust, .uyg-kart, .uyg-pen {
    --uyg-acc: var(--primary-green, #2ECC71);
    --uyg-soft: #f3f4f6;
    --uyg-line: #e5e7eb;
    --uyg-ink: #111827;
    --uyg-muted: #4b5563;
}
@supports (color: color-mix(in srgb, red 10%, white)) {
    .uyg-ust, .uyg-kart, .uyg-pen {
        --uyg-acc: color-mix(in srgb, var(--primary-green, #2ECC71) 58%, #000);
        --uyg-soft: color-mix(in srgb, var(--primary-green, #2ECC71) 9%, #fff);
        --uyg-line: color-mix(in srgb, var(--primary-green, #2ECC71) 28%, #fff);
    }
}
@supports (color: oklch(from red min(l, 0.5) c h)) {
    .uyg-ust, .uyg-kart, .uyg-pen { --uyg-acc: oklch(from var(--primary-green, #2ECC71) min(l, 0.56) c h); }
}

/* ── 1) Üst alan: yalnız simge (tasarım 2b) ─────────────────────────── */
.uyg-ust {
    flex: 0 0 auto;
    width: 38px;                         /* klasik üst alandaki öğelerle (.header-action, .mobil-menu-btn: 38 px) aynı → satır büyümez */
    height: 38px;
    margin: 0 4px 0 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--uyg-line);
    border-radius: 12px;
    background: var(--uyg-soft);
    color: var(--uyg-acc);
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s ease, box-shadow .15s ease;
}
.uyg-ust:not([hidden]) { display: inline-flex; }
.uyg-ust > svg { width: 20px; height: 20px; flex: none; pointer-events: none; }
.uyg-ust:active { transform: scale(.94); }
.uyg-ust:focus-visible { outline: 2px solid var(--uyg-acc); outline-offset: 2px; }

/* ── 2) Mobil menü kartı (Hızlı Erişim'in altında, tam genişlik) ───────── */
.uyg-kart {
    width: 100%;
    margin: 10px 0 0;
    padding: 12px;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--uyg-line);
    border-radius: 16px;
    background: var(--uyg-soft);
    color: var(--uyg-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow .18s ease, transform .18s ease;
}
.uyg-kart:not([hidden]) { display: flex; }
.uyg-kart:active { transform: scale(.98); }
.uyg-kart:focus-visible { outline: 2px solid var(--uyg-acc); outline-offset: 2px; }
.uyg-kart-ikon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--uyg-acc);
    color: #fff;
    font-size: 22px;
    box-shadow: 0 4px 10px rgba(17, 24, 39, .12);
}
.uyg-kart-yazi { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.uyg-kart-yazi > b { font-size: 14.5px; font-weight: 800; color: var(--uyg-ink); line-height: 1.25; }
.uyg-kart-yazi > span { font-size: 12.5px; font-weight: 600; color: var(--uyg-muted); line-height: 1.3; }
.uyg-kart-dugme {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 12px;
    background: var(--uyg-acc);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}
/* Dar kart: "İndir" yazısı başlığı ezmesin → yalnız ok. Ölçüt EKRAN değil KARTIN KENDİ genişliği (12.10.2026 ölçüldü:
   eski sürüm sitelerin mobil menüsü 279 px — 390 px telefonda bile "Uygulamayı" 3 px taşıyordu). Kapsayıcı sorgusunu
   bilmeyen eski tarayıcı için ekran ölçütü de kalır. */
.uyg-kart { container-type: inline-size; }
@container (max-width: 319.98px) {
    .uyg-kart-dugme { padding: 0 11px; font-size: 0; gap: 0; }
    .uyg-kart-dugme > svg { width: 18px; height: 18px; }
}
@media (max-width: 339.98px) {
    .uyg-kart { gap: 10px; padding: 10px; }
    .uyg-kart-dugme { padding: 0 11px; font-size: 0; gap: 0; }
    .uyg-kart-dugme > svg { width: 18px; height: 18px; }
}
/* Eski sürüm menüsüne elle eklenmişse (menü gövdesinin ilk öğesi) altındaki aramaya yapışmasın. Güncel menüde kart
   .mm-scroll içinde olduğu için bu kural eşleşmez. */
.offcanvas-body > .uyg-kart:first-child { margin: 0 0 16px; }

/* ── 3) Adım penceresi (iPhone / tarayıcı menüsü) ──────────────────── */
.uyg-pen {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;  /* `inset` iOS ≤14.0'da yok */
    z-index: 200060;                     /* çerez onayı (99999), sepet bildirimi (200020) ve yer paylaşan perdelerin üstü */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(17, 24, 39, .55);
    font-family: var(--font-family, 'Quicksand', -apple-system, 'Segoe UI', sans-serif);
    animation: uygPerde .2s ease;
}
.uyg-pen[hidden] { display: none !important; }
.uyg-pen-kutu {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 92vh;
    max-height: 92dvh;
    overflow: auto;
    overscroll-behavior: contain;        /* pencere sonuna gelince arkadaki sayfa kaymasın */
    box-sizing: border-box;
    padding: 10px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
    background: #fff;
    color: var(--uyg-ink);
    box-shadow: 0 -10px 40px rgba(17, 24, 39, .25);
    outline: none;
    animation: uygCik .28s cubic-bezier(.2, .9, .3, 1.1);
}
@media (min-width: 600px) {
    .uyg-pen { align-items: center; padding: 20px; }
    .uyg-pen-kutu { border-radius: 22px; padding-bottom: 22px; }
}
.uyg-pen-tutamak { display: block; width: 40px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: #e5e7eb; }
.uyg-pen-ust { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.uyg-pen-ikon {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: var(--uyg-acc);
    box-shadow: 0 6px 16px rgba(17, 24, 39, .15);
    object-fit: cover;
}
.uyg-pen-baslik { flex: 1 1 auto; min-width: 0; }
.uyg-pen-baslik h3 { margin: 0 0 3px; font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--uyg-ink); }
.uyg-pen-baslik p { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--uyg-muted); }
.uyg-pen-x {
    align-self: flex-start;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: -4px -6px 0 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #f3f4f6;
    color: var(--uyg-ink);
    cursor: pointer;
}
/* Pencere içi tek dokunuş düğmesi — yalnız tarayıcı yükleme izni verdiğinde görünür (js/uygulama.js penYukleGoster) */
.uyg-pen-yukle {
    width: 100%;
    min-height: 52px;
    margin: 0 0 14px;
    border: 0;
    border-radius: 14px;
    background: var(--uyg-acc);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    animation: uygCik .28s cubic-bezier(.2, .9, .3, 1.1);
}
.uyg-pen-yukle:not([hidden]) { display: flex; }
.uyg-pen-yukle[hidden] { display: none !important; }
.uyg-pen-yukle:focus-visible { outline: 2px solid var(--uyg-acc); outline-offset: 2px; }
.uyg-pen-adim { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.uyg-pen-adim li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #eef0f3;
    border-radius: 16px;
    background: #fff;
}
.uyg-pen-no {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--uyg-soft);
    color: var(--uyg-acc);
    font-size: 14px;
    font-weight: 800;
}
.uyg-pen-metin { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.uyg-pen-metin b { font-size: 14.5px; font-weight: 800; color: var(--uyg-ink); line-height: 1.3; }
.uyg-pen-metin span { font-size: 12.5px; font-weight: 600; color: var(--uyg-muted); line-height: 1.35; }
.uyg-pen-sembol {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f3f4f6;
    color: var(--uyg-ink);
}
.uyg-pen-sembol.mavi { color: #0a6fd8; }
.uyg-pen-not {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fdf6e3;
    color: #5a3e00;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
}
.uyg-pen-tamam {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 14px;
    background: var(--uyg-acc);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}
.uyg-pen-x:focus-visible, .uyg-pen-tamam:focus-visible { outline: 2px solid var(--uyg-acc); outline-offset: 2px; }
@keyframes uygPerde { from { opacity: 0; } to { opacity: 1; } }
@keyframes uygCik { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .uyg-pen, .uyg-pen-kutu, .uyg-pen-yukle { animation: none; }
    .uyg-ust, .uyg-kart { transition: none; }
}
html.uyg-pen-acik, html.uyg-pen-acik body { overflow: hidden; }