/*
 * DijiDepo — Yeni vitrin telefon uygulama kabuğu + "Uygulamayı yükle" şeridi.
 * Markup: includes/layouts/vitrin/uygulama-serit.php, uygulama-kabuk.php, header.php (.vt-msearch), footer.php.
 * Davranış: assets/js/vitrin/uygulama.js. Yalnız vitrin.css token'ları (renk/köşe sabit yok).
 * Ölçü: pazar yeri (Trendyol/Hepsiburada) — gövde 13-14px, ince kenar, 8-12px köşe; gradyan/gölge süsü yok.
 * html sınıfları: vt-uygulama (kurulu uygulama), vt-sayfa-ana / vt-sayfa-kat, vt-kilit (katman açık),
 *                 vt-klavye (telefonda klavye açık), vt-appbar-acik (şerit görünür).
 */

/* ───────── Dokunma ve girdi (telefon) ───────── */
html.vt-html { -webkit-tap-highlight-color: transparent; }
html.vt-kilit, html.vt-kilit body.vt { overflow: hidden; }
@media (max-width: 767.98px) {
    /* iOS odakta yakınlaştırmasın */
    body.vt input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]),
    body.vt select, body.vt textarea { font-size: 16px; }
    body.vt .vt-container { padding-left: max(var(--vt-gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--vt-gutter), env(safe-area-inset-right, 0px)); }
    .vt-tabbar { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); user-select: none; -webkit-user-select: none; }
}

/* ───────── "Uygulamayı yükle" şeridi (header'ın üstü, yapışık değil) ───────── */
.vt-appbar { background: var(--vt-surface); border-bottom: 1px solid var(--vt-line); }
.vt-appbar[hidden] { display: none; }
.vt-appbar__in { display: flex; align-items: center; gap: 10px; min-height: 56px; padding-block: 8px; box-sizing: border-box; }
.vt-appbar__ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; border: 1px solid var(--vt-line); background: #fff; object-fit: cover; display: block; }
.vt-appbar__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.vt-appbar__txt b { font-size: 13px; font-weight: 700; color: var(--vt-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-appbar__txt span { font-size: 12px; color: var(--vt-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vt-appbar__btn {
    flex-shrink: 0; height: 32px; padding: 0 16px; border: 0; cursor: pointer;
    background: var(--c-primary); color: var(--vt-on-primary); border-radius: var(--vt-r-btn);
    font: inherit; font-size: 13px; font-weight: 600; transition: background var(--vt-dur);
}
.vt-appbar__btn:hover { background: var(--c-primary-dark); }
.vt-appbar__x { flex-shrink: 0; width: 32px; height: 32px; margin-right: -6px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; border-radius: var(--vt-r-sm); color: var(--vt-muted); cursor: pointer; }
.vt-appbar__x:hover { background: var(--vt-bg-2); color: var(--vt-ink); }
@media (min-width: 1024px) { .vt-appbar__in { min-height: 48px; padding-block: 6px; } .vt-appbar__ic { width: 32px; height: 32px; border-radius: 8px; } .vt-appbar__txt { flex-direction: row; align-items: baseline; gap: 10px; } }

/* ───────── Telefon üst çubuğu: logo + favori/sepet, altında arama alanı ───────── */
.vt-msearch { display: none; }
@media (max-width: 767.98px) {
    .vt-header__main {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "logo actions" "msearch msearch";
        gap: 4px 8px; padding-top: 4px; padding-bottom: 8px;
    }
    .vt-header__main .vt-search { display: none; }
    .vt-msearch {
        grid-area: msearch; display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; box-sizing: border-box;
        padding: 0 12px; border: 1px solid transparent; border-radius: var(--vt-r-btn);
        background: var(--vt-bg-2); color: var(--vt-faint); cursor: text; text-align: left;
        font: inherit; font-size: 14px;
    }
    .vt-msearch span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vt-msearch .vt-ic { color: var(--vt-muted); }
    .vt-actions { gap: 0; margin-right: -6px; }
    .vt-actions #headerFavLink { display: inline-flex !important; }
    .vt-actions .vt-action { min-height: 44px; min-width: 44px; justify-content: center; padding: 0; }
    .vt-actions .vt-action__txt { display: none; }
    .vt-header .vt-logo { min-height: 44px; }
}

/* ───────── Klavye açıkken yapışık çubuklar yok ───────── */
html.vt-klavye .vt-tabbar, html.vt-klavye .vtp-bar, html.vt-klavye .sp-mbar { display: none !important; }
html.vt-klavye body.vt { padding-bottom: 0; }

/* ───────── Yapraklar (ortak) ───────── */
.vt-sheet__panel {
    max-height: min(88vh, 720px);
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
    box-sizing: border-box;
}
.vt-sheet--hesap .vt-sheet__panel, .vt-sheet--kur .vt-sheet__panel { height: auto; }
.vt-sheet--kat .vt-sheet__panel { height: min(85vh, 720px); }
.vt-sheet__grip { width: 36px; height: 4px; margin: 6px auto 0; border-radius: 4px; background: var(--vt-line-strong); flex-shrink: 0; }
.vt-sheet__head { gap: 4px; min-height: 52px; box-sizing: border-box; padding: 4px 6px 4px 16px; }
.vt-sheet__head strong { flex: 1; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-sheet__head:has(.vt-katy__geri:not([hidden])) { padding-left: 4px; }
.vt-katy__geri[hidden] { display: none; }
.vt-sheet__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (min-width: 768px) {
    /* Yönerge yaprağı masaüstünde ortada kart */
    .vt-sheet--kur .vt-sheet__panel { left: 50%; right: auto; bottom: 50%; width: 400px; border-radius: var(--vt-r-lg); transform: translate(-50%, 54%); opacity: 0; transition: transform .2s var(--vt-ease), opacity .2s; }
    .vt-sheet--kur.is-open .vt-sheet__panel { transform: translate(-50%, 50%); opacity: 1; }
    .vt-sheet--kur .vt-sheet__grip { display: none; }
}

/* ───────── Kategori yaprağı: iki seviye, kayarak ───────── */
.vt-katy { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.vt-katy__ekran {
    position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    transition: transform .26s var(--vt-ease), opacity .2s var(--vt-ease), visibility 0s linear 0s;
}
.vt-katy__ekran--alt { transform: translateX(100%); visibility: hidden; transition: transform .26s var(--vt-ease), opacity .2s var(--vt-ease), visibility 0s linear .26s; }
.vt-katy.is-alt .vt-katy__ekran--ana { transform: translateX(-24%); opacity: 0; visibility: hidden; transition: transform .26s var(--vt-ease), opacity .2s var(--vt-ease), visibility 0s linear .26s; }
.vt-katy.is-alt .vt-katy__ekran--alt { transform: none; visibility: visible; transition: transform .26s var(--vt-ease), opacity .2s var(--vt-ease), visibility 0s linear 0s; }
.vt-katy__liste { list-style: none; margin: 0; padding: 0; }
.vt-katy__liste[hidden] { display: none; }
.vt-katy__oge {
    display: flex; align-items: center; gap: 12px; min-height: 52px; box-sizing: border-box;
    padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--vt-line-2);
    font-size: 14px; color: var(--vt-ink); line-height: 1.3;
}
.vt-katy__oge:active { background: var(--vt-bg-2); }
.vt-katy__oge > span:not(.vt-katy__ic) { flex: 1; min-width: 0; }
.vt-katy__img, .vt-katy__ic { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--vt-r-sm); background: var(--vt-bg-2); object-fit: cover; }
.vt-katy__ic { display: inline-flex; align-items: center; justify-content: center; color: var(--vt-muted); }
.vt-katy__ok { margin-left: auto; color: var(--vt-faint); }
.vt-katy__oge--vurgu { color: var(--vt-danger-ink); font-weight: 600; }
.vt-katy__oge--vurgu .vt-katy__ic { background: var(--vt-danger-50); color: var(--vt-danger-ink); }
.vt-katy__oge--tum { font-weight: 600; color: var(--vt-primary-ink); }
.vt-katy__ek { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 16px; }
.vt-katy__ek a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--vt-line); border-radius: var(--vt-r-sm); font-size: 13px; font-weight: 500; color: var(--vt-ink-2); }

/* ───────── Hesabım yaprağı ───────── */
.vt-hsp { padding: 12px 16px 12px; }
.vt-hsp__kim { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--vt-line); border-radius: var(--vt-r-md); color: var(--vt-ink); }
.vt-hsp__harf { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--vt-primary-50); color: var(--vt-primary-ink); font-weight: 700; font-size: 15px; }
.vt-hsp__kimtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.vt-hsp__kimtxt b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-hsp__kimtxt small { font-size: 12px; color: var(--vt-muted); }
.vt-hsp__giris { padding: 14px; border: 1px solid var(--vt-line); border-radius: var(--vt-r-md); }
.vt-hsp__giris b { display: block; font-size: 15px; font-weight: 600; color: var(--vt-ink); }
.vt-hsp__giris p { margin: 2px 0 12px; font-size: 13px; color: var(--vt-muted); }
.vt-hsp__dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vt-hsp__dugmeler .vt-btn { min-height: 42px; justify-content: center; }
.vt-hsp [data-vt-bildirim-yeri]:not(:empty) { margin-top: 12px; }
.vt-hsp__grup { margin: 16px 0 6px; font-size: 12px; font-weight: 600; color: var(--vt-muted); }
.vt-hsp__liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--vt-line); border-radius: var(--vt-r-md); overflow: hidden; }
.vt-hsp__liste li + li { border-top: 1px solid var(--vt-line-2); }
.vt-hsp__liste--cikis { margin-top: 16px; }
.vt-hsp__oge { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px 0 14px; font-size: 14px; color: var(--vt-ink-2); }
.vt-hsp__oge:active { background: var(--vt-bg-2); }
.vt-hsp__oge > .vt-ic:first-child { color: var(--vt-muted); }
.vt-hsp__oge > span { flex: 1; min-width: 0; }
.vt-hsp__ok { margin-left: auto; color: var(--vt-faint); }
.vt-hsp__oge--tehlike, .vt-hsp__oge--tehlike > .vt-ic:first-child { color: var(--vt-danger-ink); }

/* ───────── Tam ekran arama ───────── */
.vt-arama {
    position: fixed; inset: 0; z-index: 99985; display: flex; flex-direction: column;
    background: var(--vt-surface); opacity: 0; transform: translateY(8px);
    transition: opacity .18s var(--vt-ease), transform .18s var(--vt-ease);
}
.vt-arama[hidden] { display: none; }
.vt-arama.is-open { opacity: 1; transform: none; }
.vt-arama__ust {
    display: flex; align-items: center; gap: 2px; margin: 0; flex-shrink: 0;
    padding: max(6px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 6px max(4px, env(safe-area-inset-left, 0px));
    border-bottom: 1px solid var(--vt-line);
}
.vt-arama__alan { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.vt-arama__alan > .vt-ic { position: absolute; left: 11px; color: var(--vt-muted); pointer-events: none; }
.vt-arama__alan input {
    width: 100%; height: 40px; box-sizing: border-box; padding: 0 38px 0 36px;
    border: 1px solid transparent; border-radius: var(--vt-r-btn); background: var(--vt-bg-2); color: var(--vt-ink);
    font: inherit; font-size: 16px; outline: none; -webkit-appearance: none; appearance: none;
}
.vt-arama__alan input::-webkit-search-cancel-button { -webkit-appearance: none; }
.vt-arama__alan input:focus { border-color: var(--c-primary); background: #fff; box-shadow: 0 0 0 3px var(--vt-ring); }
.vt-arama__temizle { position: absolute; right: 2px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--vt-muted); cursor: pointer; border-radius: var(--vt-r-sm); }
.vt-arama__temizle[hidden] { display: none; }
.vt-arama__govde { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.vt-arama__bolum { padding-top: 12px; }
.vt-arama__bolum[hidden] { display: none; }
.vt-arama__baslik { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--vt-muted); }
.vt-arama__baslik button { border: 0; background: none; padding: 6px 0 6px 12px; font: inherit; font-size: 12px; font-weight: 600; color: var(--vt-primary-ink); cursor: pointer; }
.vt-arama__son { list-style: none; margin: 0; padding: 0; }
.vt-arama__sonsatir { display: flex; align-items: center; border-bottom: 1px solid var(--vt-line-2); }
.vt-arama__sonsatir a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; color: var(--vt-ink-2); }
.vt-arama__sonsatir a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-arama__sonsatir a .vt-ic { color: var(--vt-faint); }
.vt-arama__sil { width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--vt-faint); cursor: pointer; border-radius: var(--vt-r-sm); margin-right: -8px; }
.vt-arama__cipler { display: flex; flex-wrap: wrap; gap: 8px; }
.vt-arama__cipler .vt-chip { height: 32px; }
.vt-arama__cipler .vt-chip:first-child { color: var(--vt-ink-2); }
.vt-arama__liste { list-style: none; margin: 0; padding: 0; }
.vt-arama__oge { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--vt-line-2); color: var(--vt-ink); }
.vt-arama__gorsel { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--vt-r-sm); background: var(--vt-bg-2); display: inline-flex; align-items: center; justify-content: center; color: var(--vt-muted); overflow: hidden; }
.vt-arama__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.vt-arama__ad { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vt-arama__ad small { display: block; font-size: 12px; color: var(--vt-muted); }
.vt-arama__ad mark { background: none; color: inherit; font-weight: 700; }
.vt-arama__fiyat { flex-shrink: 0; text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vt-arama__fiyat s { display: block; font-size: 11px; font-weight: 400; color: var(--vt-faint); }
.vt-arama__tum { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; font-size: 14px; font-weight: 600; color: var(--vt-primary-ink); }
.vt-arama__bos { margin: 8px 0; font-size: 13px; color: var(--vt-muted); }

/* ───────── Yükleme yönergesi yaprağı ───────── */
.vt-kur { padding: 12px 16px 12px; }
.vt-kur__kim { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--vt-line-2); }
.vt-kur__kim img { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--vt-line); flex-shrink: 0; }
.vt-kur__kim span { display: flex; flex-direction: column; line-height: 1.3; }
.vt-kur__kim b { font-size: 14px; font-weight: 600; }
.vt-kur__kim small { font-size: 12px; color: var(--vt-muted); }
.vt-kur__adimlar { list-style: none; margin: 0; padding: 0; }
.vt-kur__adimlar[hidden] { display: none; }
.vt-kur__adimlar li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--vt-line-2); font-size: 14px; color: var(--vt-ink-2); }
.vt-kur__adimlar b { color: var(--vt-ink); font-weight: 600; }
.vt-kur__ic { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--vt-r-sm); background: var(--vt-bg-2); color: var(--vt-primary-ink); }
.vt-kur__dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.vt-kur__dugmeler .vt-btn { min-height: 42px; justify-content: center; }

/* ───────── Footer: telefonda açılır-kapanır sütunlar ───────── */
.vt-footer__tog { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: default; pointer-events: none; text-align: left; }
.vt-footer__tog .vt-ic { display: none; }
@media (max-width: 767.98px) {
    .vt-news__in { padding-block: 14px; }
    .vt-footer__grid { gap: 0; padding-block: 20px 8px; }
    .vt-footer__brand { padding-bottom: 16px; }
    .vt-footer__col { grid-column: 1 / -1; border-top: 1px solid var(--vt-line); }
    .vt-footer .vt-footer__h { margin: 0; }
    .vt-footer__tog { display: flex; justify-content: space-between; width: 100%; min-height: 46px; font-size: 14px; font-weight: 600; color: var(--vt-ink); cursor: pointer; pointer-events: auto; }
    .vt-footer__tog .vt-ic { display: block; color: var(--vt-muted); transition: transform var(--vt-dur) var(--vt-ease); }
    .vt-footer__tog[aria-expanded="true"] .vt-ic { transform: rotate(180deg); }
    .vt-footer__col ul { display: none; padding-bottom: 14px; }
    .vt-footer__col.is-open ul { display: flex; }
    .vt-footer__trust { padding-block: 14px; }
}

/* ───────── Kurulu uygulama (standalone) ───────── */
.vt-appfoot { display: none; }
[data-vt-bildirim-yeri="uygulama"] { display: none; }
html.vt-uygulama.vt-sayfa-ana [data-vt-bildirim-yeri="uygulama"]:not(:empty) { display: block; padding-top: 10px; }
html.vt-uygulama { overscroll-behavior-y: none; }
html.vt-uygulama .vt-topbar { display: none; }
@media (max-width: 1023.98px) {
    html.vt-uygulama .vt-news, html.vt-uygulama .vt-footer { display: none; }
    html.vt-uygulama .vt-appfoot { display: block; margin-top: 16px; border-top: 1px solid var(--vt-line); padding: 12px 0 16px; font-size: 13px; color: var(--vt-ink-2); }
}
.vt-appfoot__iletisim { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 0 16px; }
.vt-appfoot__iletisim a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--vt-ink-2); }
.vt-appfoot__iletisim .vt-ic { color: var(--vt-muted); }
.vt-appfoot__acilir { border-top: 1px solid var(--vt-line-2); }
.vt-appfoot__acilir summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-weight: 600; color: var(--vt-ink); cursor: pointer; list-style: none; }
.vt-appfoot__acilir summary::-webkit-details-marker { display: none; }
.vt-appfoot__acilir summary .vt-ic { color: var(--vt-muted); transition: transform var(--vt-dur) var(--vt-ease); }
.vt-appfoot__acilir[open] summary .vt-ic { transform: rotate(180deg); }
.vt-appfoot__acilir nav { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }
.vt-appfoot__acilir nav a { color: var(--vt-ink-2); }
.vt-appfoot__telif { margin: 8px 0 0; font-size: 12px; color: var(--vt-muted); }

@media (prefers-reduced-motion: reduce) {
    .vt-katy__ekran, .vt-arama, .vt-sheet--kur .vt-sheet__panel { transition: none !important; }
}