/* HuQQabaz Garden — telefon arayüzü (v9b.72)
   Bu dosya yalnız <link media="(max-width: 767px)"> ile yüklenir: masaüstü ve tablet görünümünü hiçbir koşulda etkilemez.
   İlke: masaüstündeki her işlev telefonda da var; daha kısa kaydırma, başparmak erişimi, yatay kaydırılan içerikte yan kartın ucu görünür. */

/* ---------- Genel ---------- */
.eyebrow { font-size: 15px; letter-spacing: .14em; }
.form__submit .btn { width: 100%; justify-content: center; }   /* form gönder butonları tam genişlik (başparmak erişimi) */
.form__submit { gap: 12px; }
.form__submit .form__note { width: 100%; text-align: center; }

/* ---------- Ana sayfa · Lokasyonlar: başlık → bulucu → şube kartları → hemen altında ilerleme çubuğu + oklar
   (masaüstünde oklar başlığın sağında; telefonda kaydırdıkları kartlardan kopuk kalmasın diye kartların altına iner) ---------- */
.branches { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title title" "finder finder" "strip strip" "all arrows"; align-items: center; padding: 88px var(--edge) 72px; }
.branches__head, .branches__body, .branches__ctrl { display: contents; }
.branches__title { grid-area: title; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.finder { grid-area: finder; padding: 28px 0 0; }
.branches__right { grid-area: strip; margin-top: 36px; }
.branches__bar { margin-top: 16px; }
.branches__all { grid-area: all; justify-self: start; margin-top: 18px; }
.branches__arrows { grid-area: arrows; margin-top: 18px; }
.finder .h3 { font-size: 22.8px; line-height: 1.2; }
.finder__form { margin-top: 16px; }
.finder__form .field:not(.field--btn) { grid-column: 1 / -1; padding: 12px 0 10px; }
.finder__form .field:not(.field--btn) .field__input { font-size: 16.49px; }
.finder__form .field--btn { display: flex; justify-content: center; align-items: center; gap: 10px; height: 52px; margin-top: 18px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 15px; white-space: nowrap; }
.finder__form .field--btn .ic { width: 18px; height: 18px; }
.finder .btn { margin-top: 10px; width: 100%; justify-content: center; }
.branch__fig { aspect-ratio: 4 / 5; flex: 0 0 auto; }
.branches__track { height: auto; }

/* ---------- Ana sayfa · Menü: önce şube, sonra kategori; ürünler yana kaydırılan kartlar ---------- */
.menu__aside .menu__go { order: 3; margin-top: 4px; }
.menu__aside .cats { order: 4; }
.menu__main { order: 5; }
.menu__go { height: 56px; padding: 4px 4px 4px 18px; }
.menu__go-sel select { height: 46px; font-size: 15px; }
.menu__go-btn { height: 46px; padding: 0 18px; }
.products { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); scrollbar-width: none; margin-inline: calc(-1 * var(--edge)); padding: 20px var(--edge) 6px; }
.products::-webkit-scrollbar { display: none; }
.product { flex: 0 0 68vw; scroll-snap-align: start; }
.product__card { gap: 12px; }
.product__name { font-size: 16.49px; }
.product__desc { font-size: 14px; -webkit-line-clamp: 3; }

/* ---------- Ana sayfa · Atmosfer: görsel önce, daha yatay; aralıklar sıkı ---------- */
.moment { padding: 28px 0; row-gap: 16px; }
.moment__fig { order: -1; aspect-ratio: 16 / 10; }
.moment__text { gap: 10px; }
.moment__label { font-size: 27.9px; margin-bottom: 2px; }
.moment__title { font-size: 17.46px; }
.moment__p { font-size: 15px; }

/* ---------- Ana sayfa · Franchise: "Neden" 2 × 2, sıkı adımlar ---------- */
.franchise__head { gap: 18px; }
.fr-why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
.fr-why__i { gap: 6px; padding-top: 16px; }
.fr-why__i .ic { width: 22px; height: 22px; margin-bottom: 4px; }
.fr-why__t { font-size: 15.52px; }
.fr-why__p { font-size: 14px; line-height: 1.5; }
.franchise__formtitle { font-size: 29.76px; }

/* ---------- Grup logoları: müşterinin SVG şeridi olduğu gibi, telefonda yavaşça akan bant (kopyası ::after) ---------- */
.family { padding: 32px 0 28px; overflow: clip; }
.family__strip { --h: 50px; --w: calc(var(--h) * 3235 / 258); --g: 48px; display: flex; width: max-content; overflow: visible; margin: 0; padding: 0; }
.family__strip img { width: var(--w); min-width: 0; height: var(--h); flex: 0 0 auto; margin-left: var(--edge); }
.family__strip::after { content: ""; flex: 0 0 auto; width: var(--w); height: var(--h); margin-left: var(--g); background: url("../assets/brand/logo/q-fb-family-strip-dark.svg") center / contain no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  .family__strip img, .family__strip::after { animation: famRun 34s linear infinite; }
}
@keyframes famRun { to { transform: translateX(calc(-1 * (var(--w) + var(--g)))); } }
html[data-brand="huqqabaz"] .family__strip::after { background-image: url("../assets/brand/logo/q-fb-family-strip-light.svg"); }   /* HuQQabaz koyu tema: açık sürüm (v9d.2) */
@media (prefers-reduced-motion: reduce) { .family { overflow-x: auto; } }

/* ---------- Kurumsal: lokasyonlar küçük görselli satırlar; yaklaşım görselleri yatay ---------- */
.kr-apps { grid-template-columns: minmax(0, 1fr); }   /* WebKit (iPhone Safari/Chrome): "1fr" içerik genişliğine açılıp görselleri sağ kenara 22 px taşırıyordu */
.kr-app, .kr-app__fig { min-width: 0; }
.kr-group__logo { width: 100%; }   /* grup logoları özgün düzeniyle (q-fb-family-dark.png), yalnız telefona göre küçülür */
.kr-app__fig { aspect-ratio: 16 / 10; }
.kr-loclist { row-gap: 0; border-top: 1px solid var(--line); }
.kr-loc { grid-template-columns: 104px minmax(0, 1fr) auto; column-gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.kr-loc::before { display: none; }
.kr-loc__fig { grid-column: 1; grid-row: 1; border-radius: 12px; }
.kr-loc__meta { grid-column: 2; grid-row: 1; gap: 4px; }
.kr-loc__name { font-size: 16.49px; }
.kr-loc__addr { font-size: 13px; }
.kr-loc__go { grid-column: 3; grid-row: 1; width: 40px; height: 40px; }

/* ---------- Lokasyonlar: ülke sekmeleri tek bakışta (sarmalanan seçimler), kart görselleri daha kısa ---------- */
.tabs { flex-wrap: wrap; gap: 8px; overflow: visible; margin-inline: 0; padding: 18px 0 4px; border-bottom: 0; }
.tab { padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14px; }
.tab::after { display: none; }
.tab.is-active { background: var(--lime); border-color: var(--lime); color: var(--brown); }
html[data-brand="huqqabaz"] .tab.is-active, .dz--hq .tab.is-active { color: var(--hq-ink); }   /* HuQQabaz: altın zeminde koyu yazı (v9d.2) */
.loc-grid { padding-top: 24px; }
.locard__fig { aspect-ratio: 4 / 3; }

/* ---------- Lokasyon detay: butonlar düzenli (birincil tam genişlik, ikisi yan yana); galeri başlığı ile oklar ayrışır ---------- */
.dt-hero .actions, .info .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dt-hero .actions .btn, .info .actions .btn { width: 100%; justify-content: center; margin: 0; padding: 0 12px; }
.dt-hero .actions .btn:first-child, .info .actions .btn:first-child { grid-column: 1 / -1; }
/* galeri: başlık üstte, fotoğraflar, oklar fotoğrafların hemen altında sağda (ana sayfa lokasyon şeridiyle aynı düzen) */
.gal { display: grid; grid-template-areas: "title" "strip" "arrows"; padding-bottom: 64px; }
.gal__head { display: contents; }
.gal__head .h2 { grid-area: title; padding: 0 var(--edge) 24px; }
.gal__strip { grid-area: strip; padding-bottom: 0; }
.gal__arrows { grid-area: arrows; justify-self: end; margin-top: 16px; padding-right: var(--edge); }
/* sayfa yolu: üç seviyeli sayfalarda "Anasayfa" gizlenir, ayraç satır sonunda asılı kalmaz */
.dt-hero .crumb a:first-child, .dt-hero .crumb a:first-child + i { display: none; }
.faq__head .h2 { font-size: 29.76px; }

/* ---------- İletişim: fotoğraf daha kısa, konu seçimleri tek satır ---------- */
.ch-form .form { min-width: 0; }
.ch-hero__fig { aspect-ratio: 4 / 3; }
.ch-chips { gap: 8px; min-width: 0; }
.ch-chips__k { font-size: 19px; margin-bottom: 12px; }
.ch-chip span { height: 44px; padding: 0 13px 0 11px; gap: 7px; font-size: 14px; white-space: nowrap; }
.ch-chip span::before { width: 10px; height: 10px; }

/* ---------- Küçük telefonlar (320 px'e kadar): hiçbir şey taşmaz ---------- */
.franchise__title .h2 { font-size: clamp(24.18px, 8.37vw, 40.92px); }   /* "HuQQabaz Garden’ın" tek satırda kalır */
.crumb { flex-wrap: wrap; row-gap: 6px; }
.others__head { flex-wrap: wrap; row-gap: 12px; }

/* ---------- Giriş (hero) · telefon: video yalnız krem duvarın ÜSTÜNDEKİ alanda oynar (el ve kelebek duvarın arkasında kalmaz),
   dikey ekranı doldurmak için aşırı büyütülmez; oyma harflerin içi aynı sahnenin karesi (poster) ile dolar.
   --wallh: duvar yüksekliği (js heroLayout). Retina telefonlar 1920 videoyu alır (index.html <source>). ---------- */
/* oyma harfler şeffaf: ardında aynı filmin sade bir köşesi (sol üst yeşillik), büyütülmüş ve bulanık; ana filmle eş zamanlı oynar (js: .hero__blur) */
.hero__blur { display: block; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; width: 100%; height: calc(var(--wallh, 330px) + 2px); max-width: none; object-fit: cover; object-position: 8% 18%; transform: scale(1.25); transform-origin: 8% 18%; filter: blur(12px) saturate(1.08); pointer-events: none; }
.hero__media { bottom: calc(var(--wallh, 330px) - 2px); }
.hero__video { object-position: 46% 50%; }
/* oyma harflerin iç gölgesi telefonda daha hafif (masaüstü .32; harfler küçük olduğundan aynı gölge orantısız koyu kalıyordu) */
#heroCutDepth feDropShadow { flood-opacity: .14; }
/* üst satır ortalı: mürekkep 14.5756·--l1, sol boşluk .1125·--l1 (masaüstündeki optik sağa kayma burada yok) */
.hero__l1 { margin-left: calc((100% - var(--l1, 25px) * var(--l1ink, 14.5756)) / 2 - var(--l1, 25px) * var(--l1lb, .1125)); }   /* --l1ink/--l1lb: HuQQabaz üst satırının ölçüsü (site.js, data-cut); Garden varsayılanla aynı */
/* büyük yazı (oyma / dolu) telefonda %18 küçük (16 Eki 2026, kullanıcı: "slogandaki büyük yazıyı biraz küçült", sonra "biraz daha küçült"): "Günün Her" ortalı,
   üst satırdan biraz dar. js heroLayout yalnız telefonda okur; masaüstü ve tablet etkilenmez */
.hero { --cut-m: .82; }

/* ---------- Gizlilik Politikası: içindekiler tek sütun, tanım satırlarında terim üstte ---------- */
.lg { padding: 48px var(--edge) 88px; row-gap: 40px; }
.lg__toc ul { grid-template-columns: minmax(0, 1fr); }
.lg__toc a { padding: 10px 0; }
.lg__s { padding: 36px 0; }
.lg__s h2 { font-size: 22.8px; margin-bottom: 14px; }
.lg__s p, .lg__list li, .lg__dl dd { font-size: 15.52px; line-height: 1.65; }
.lg__dl > div { grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding: 14px 0; }
.lg__dl--time > div { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
.lg__dl--time dt { font-size: 15.52px; }

/* ---------- Duo sayfalar (v9c.1): kapılar alt alta; yapraklar daha az iç boşluk ---------- */
.dz-doors { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 8px; }
.dz-door { height: 64px; padding: 0 18px 0 22px; gap: 14px; }
.dz-door .ic { margin-left: auto; }
.dz-door__t { min-width: 0; font-size: 13px; line-height: 1.3; white-space: normal; text-align: left; }
.dz-door--hq .dz-mk { height: 17px; }
.dz-door--gd .dz-mk { height: 40px; margin-top: 6px; }
.dz { padding: 56px var(--edge) 80px; border-radius: 28px 28px 0 0; }
.dz--gd { margin-top: -28px; }
.dz--flush { padding: 0; }   /* içerikli bölümler kendi kenar boşluğunu taşır; yaprak da verince telefonda yazı 40 px içeride kalıyordu (Kurumsal Garden, Franchise) */
.dz__head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.dz__title .dz-mk--hq { height: 28px; }
.dz__title .dz-mk--gd { height: 66px; margin-bottom: -8px; }
.dz__line { font-size: 11px; }
/* HuQQabaz ülke seçimleri: tek satırda yana kayar (11 ülke) */
.dz .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--edge)); padding-inline: var(--edge); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.dz .tabs::-webkit-scrollbar { display: none; }
.dz .tab { flex: 0 0 auto; }   /* iki markada da ülke sekmeleri tek satır, yatay kayar (Garden iki satıra kırılıyordu) */
/* HuQQabaz şubeleri: küçük fotoğraflı satırlar (29 şube tek sütunda kısa kalır); arama, yol tarifi ve menü satırda */
.dz--hq .loc-grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 12px; }
.dz--gd .loc-grid { grid-template-columns: minmax(0, 1fr); }
.dz--hq .locard { grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.dz--hq .locard__fig { aspect-ratio: 1; border-radius: 14px; align-self: start; }
.dz--hq .locard__tag { display: none; }
.dz--hq .locard__soon { font-size: 13px; }
.dz--hq .locard__meta { gap: 4px; padding-top: 0; border-top: 0; align-content: start; }
.dz--hq .locard__name { font-size: 16px; }
.dz--hq .locard__name span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: var(--w-medium); color: var(--ink-2); }
.dz--hq .locard__addr { font-size: 13px; min-height: 0; }   /* adres tam görünür (… ile kesilmez) */
.dz--hq .locard__hours { font-size: 12px; }
.dz--hq .locard__acts { margin-top: 6px; }
.dz--hq .locard__acts .btn--line { display: none; }   /* görsel ve ad zaten detaya gider */
.dz--hq .iconrow a { width: 40px; height: 40px; }
/* Kurumsal duo: HuQQabaz yaprağı telefonda */
/* Kurumsal · iki marka (v9d.3): iki yaprak aynı ölçülerde; tanım cümlesi okunur boyda, görseller aynı oranda, kartlar tek sütun */
.kr-z { padding: 44px var(--edge) 88px; }
.kr-z > .dz__head { margin-bottom: 22px; }
.kr-state { font-size: 21px; line-height: 1.32; max-width: 30ch; }
.kr-state::after, .kr-sec .h2::after { margin-top: 22px; }
.kr-z__fig { margin-top: 32px; aspect-ratio: 4 / 3; }
.kr-sec { margin: 72px auto 36px; gap: 16px; }
.kr-sec .lead { font-size: 15.5px; }
.kr-z__fig + .kr-apps { margin-top: 44px; }
.kr-z__links { flex-direction: column; align-items: center; gap: 4px; margin-top: 40px; }
.kr-z .kr-locs__all { margin-top: 8px; }
.dz--flush > .dz__head { padding-top: 56px; }
/* İletişim duo: marka seçici ve HuQQabaz satırları telefonda */
.ch-brand__b, .ch-panetab { height: 42px; padding: 0 14px; }
.ch-brand__b .dz-mk--hq, .ch-panetab .dz-mk--hq { height: 12px; }
.ch-brand__b .dz-mk--gd, .ch-panetab .dz-mk--gd { height: 28px; }
.ch-panetabs { margin: 4px 0 0; }
.ch-pane .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--edge)); padding-inline: var(--edge); }
.ch-pane .tabs::-webkit-scrollbar { display: none; }
.ch-pane .tab { flex: 0 0 auto; }
.hqc { grid-template-columns: minmax(0, 1fr) 40px; grid-template-areas: "id go" "ways go" "hours go"; row-gap: 6px; padding: 16px 0; }
.hqc__ways, .hqc__hours { justify-self: start; }
.hqc__name { font-size: 16px; }

/* ---------- HuQQabaz ana sayfası (v9d.1, 15 Eki 2026): Garden telefon düzeniyle aynı dil ---------- */
.hqh-hero { height: 78svh; min-height: 440px; }
.hqh-loc { margin-top: -28px; padding: 64px var(--edge) 88px; border-radius: 28px 28px 0 0; }
.hqh-head { gap: 18px; margin-bottom: 36px; }
.hqh-head .giant { font-size: clamp(36px, 11vw, 46px); }
.hqh-head .giant::after { margin-top: 18px; }
.hqh-countries { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hqh-country__fig { aspect-ratio: 1; border-radius: 14px; }
.hqh-country .franchise__tag { left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 5px 9px 5px 8px; font-size: 10px; letter-spacing: .1em; }
.hqh-country__soon { font-size: 15px; }
.hqh-world { row-gap: 36px; padding: 80px var(--edge) 88px; }
.hqh-world__head { gap: 24px; }
.hqh-world .h2 { font-size: clamp(30px, 8.6vw, 38px); }
.hqh-social { gap: 10px; }
.hqh-social a { width: 52px; height: 52px; }
.hqh-reel__frame { border-radius: 18px; }
.hqh-reel__sound { right: 10px; bottom: 10px; width: 44px; height: 44px; }
.hqh-reel__dots { right: 12px; }
.hqh-branch { row-gap: 24px; padding: 80px var(--edge) 88px; }
.hqh-branch__media { aspect-ratio: 4 / 3; }
.hqh-branch__fig { border-radius: 18px; }
.hqh-branch__top { gap: 16px; }
.hqh-branch__name { font-size: 24px; }
.hqh-branch__acts .btn--ink { flex: 1 1 auto; justify-content: center; }
.hqh-branch__map { display: none; }   /* orijinaldeki gibi: harita telefonda yok (adres, telefon ve yol tarifi satırda) */
.hqh-partners { padding: 44px var(--edge) 40px; }
.hqh-partners__list { justify-content: center; gap: 14px 22px; }
.hqh-partners__list .is-q { flex: 1 0 100%; justify-content: center; gap: 0; }
.hqh-partners__list .is-q::after { display: none; }
.hqh-partners__list img { height: 38px; }
.hqh-partners__list .is-q img { height: 50px; }
.fr-z .franchise { padding-top: 56px; }   /* franchise sayfası: yaprak başında logo yok, manşet yukarıda */

/* ---------- Site geneli telefon düzeltmeleri (v9d.3, 15 Eki 2026 tasarım denetimi) ---------- */
/* dokunma alanları: simge düğmeleri 40 px; metin bağlantılarının görünmez dokunma payı (yerleşim değişmez) */
.branch__acts { gap: 6px; }
.branch__acts a, .iconrow a { width: 40px; height: 40px; }
.hqc__ways a, .hqc__name a { position: relative; }
.hqc__ways a::after { content: ""; position: absolute; inset: -11px -5px; }
.hqc__name a::after { content: ""; position: absolute; inset: -9px 0; }
/* Garden lokasyon kartı: tek sütunda adresin altında boşluk kalmaz (masaüstünde satır hizası için ayrılan yer) */
.locard__addr { min-height: 0; }
/* Kurumsal: lokasyon başlığı ile liste arası */
.kr-z .kr-locs > .kr-sec { margin-bottom: 0; }
.kr-z .kr-loc { grid-template-columns: 104px minmax(0, 1fr) auto; column-gap: 14px; padding: 14px 0; }   /* tablet satır listesinin telefon ölçüsü */
.kr-z .kr-loc__fig { border-radius: 12px; }
.kr-z .kr-loc__name span { display: block; }
/* HuQQabaz ana sayfası girişi (16 Eki 2026, kullanıcı: "videoda alttan üstten blur istemiyorum, yeteri kadar zoom yapıp dolduralım, tüm telefonlarda stabil"):
   film duvarın üstündeki alanı ortadan büyüyerek doldurur (cover; her telefon oranında boşluk kalmaz), bulanık ikinci film yok (data-blur="off": tek video çözülür).
   Önceki çözüm (15 Eki): film 16:9 bütün + bulanık dolgu; geri almak için object-fit: contain ve data-blur ile .hero__blur kuralı. */
html[data-brand="huqqabaz"] .hero__video { object-fit: cover; object-position: 50% 50%; }