/* ============================================================
   Hacımirzaoğlu — anasayfa galerisi "Mutfaktan kareler" (20.10.2026). Tasarım teslimi design_handoff_gallery/gallery.html
   ile birebir (renk, yazı, ölçü, gölge, 3B halka). Her şey .hmg altında (hmg- önekli); tasarımın :root tokenları ve küresel
   kuralları (*, a, svg, button) bölüme kapsandı: sitenin --hm-* tokenları (Manrope, krem zemin) farklı.
   İşaretleme: templates/flow/hm-galeri.php · davranış: assets/js/hm-galeri.js · kararlar: docs/TASARIM.md "Anasayfa galerisi"
   ============================================================ */
.hmg{
  --hm-green-900:#142519;--hm-green-800:#1c3326;--hm-green-700:#24402f;--hm-green-600:#2f5a3f;--hm-green-500:#3a6c4c;
  --hm-gold:#d4b06a;--hm-gold-hover:#e8cd92;
  --hm-cream:#f6efe1;--hm-cream-2:#e9e2d2;--hm-sage:#c9d1c6;--hm-olive:#b9cc6e;
  --hm-serif:'Young Serif',Georgia,serif;--hm-sans:'Plus Jakarta Sans',system-ui,sans-serif;
  --hm-gutter:clamp(16px,4vw,40px);
  --hmg-card-w:clamp(150px,17vw,224px);
  font-family:var(--hm-sans);font-size:16px;line-height:normal;letter-spacing:normal;-webkit-font-smoothing:antialiased
}
/* Tasarımın küresel kuralları, bölüme kapsanmış (site sıfırlamaları :where ile 0,0,1; bunlar 0,1,1) */
.hmg *,.hmg *::before,.hmg *::after{box-sizing:border-box}
.hmg a{color:var(--hm-gold);text-decoration:none}
.hmg a:hover{color:var(--hm-gold-hover)}
.hmg svg{display:block;flex:none;max-width:none}
.hmg button{font:inherit}
/* Klavye odağı: koyu zeminde altın halka (sitenin fıstık yeşili halkası bu zeminde seçilmiyor); fareyle görünmez */
.hmg :is(a,button,[tabindex]):focus-visible{outline:2px solid var(--hm-gold)!important;outline-offset:3px!important;box-shadow:none!important}

/* Bölüm */
.hmg{background:var(--hm-green-800);color:var(--hm-cream);padding:clamp(56px,7vw,96px) 0 clamp(48px,6vw,80px);overflow:hidden}
/* Anasayfada yeri: sayfanın sonu, alt bilginin üstü (işletme isteği 20.10.2026; eski .hm-insta bölümüyle aynı kural):
   üstündeki krem bölümden ayrılır, koyu alt bilgiyle arada krem şerit kalmadan birleşir */
.hm-main>.hm-bolum~.hmg{margin-top:clamp(2.5rem,6vw,4.5rem)}
.hm-main:has(>.hmg+script:last-child)+.hm-footer{margin-top:0}
.hmg-wrap{max-width:1320px;margin:0 auto;padding-left:var(--hm-gutter);padding-right:var(--hm-gutter)}

/* Başlık satırı */
.hmg-head{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap}
.hmg-intro{display:flex;flex-direction:column;gap:16px;max-width:560px}
.hmg-eyebrow{display:flex;align-items:center;gap:12px;color:var(--hm-olive);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.hmg-eyebrow::before{content:"";width:28px;height:1.5px;background:currentColor;flex:none}
.hmg-title{margin:0;font-family:var(--hm-serif);font-weight:400;font-size:clamp(36px,4.4vw,56px);line-height:1.05;letter-spacing:-.02em;color:var(--hm-cream)}
.hmg-rule{display:flex;flex-direction:column;gap:3px;width:64px}
.hmg-rule::before,.hmg-rule::after{content:"";height:1.5px;background:var(--hm-gold)}
.hmg-lead{margin:0;font-size:clamp(15px,1.2vw,17px);line-height:1.6;color:var(--hm-sage);text-wrap:pretty}
.hmg .hmg-follow{display:flex;align-items:center;gap:10px;border:1.5px solid rgba(212,176,106,.55);color:var(--hm-gold);font-weight:700;font-size:15px;padding:14px 22px;border-radius:999px;white-space:nowrap}
.hmg .hmg-follow:hover{background:var(--hm-gold);border-color:var(--hm-gold);color:var(--hm-green-800)}

/* Sahne (3B halka) */
.hmg-stage{position:relative;margin-top:clamp(28px,4vw,48px);height:clamp(300px,36vw,470px);overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.hmg-stage.is-dragging{cursor:grabbing}
.hmg-scene{position:absolute;inset:0;perspective:1100px;transform-style:preserve-3d}
.hmg-tray{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(212,176,106,.3);pointer-events:none;
  background:radial-gradient(circle,#142519 0%,rgba(20,37,25,.85) 60%,rgba(36,64,47,.55) 100%)}
.hmg-tray[hidden]{display:none}
.hmg-ring{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.hmg .hmg-card{position:absolute;left:50%;top:50%;width:var(--hmg-card-w);aspect-ratio:4/5;transform-style:preserve-3d;display:block;color:var(--hm-cream);transform:translate(-50%,-50%);-webkit-tap-highlight-color:transparent}
.hmg .hmg-card:hover{color:var(--hm-cream)}
/* Kartlar sunucuda basılır (tasarımda JS üretiyordu); JS halkaya dizene kadar üst üste ortada dururlar: yalnız ilki görünsün */
.hmg-ring:not(.is-ready) .hmg-card:not(:first-child){visibility:hidden}
.hmg-card__face{position:absolute;inset:0;border-radius:18px;overflow:hidden;background:var(--hm-green-700);box-shadow:0 0 0 1px rgba(212,176,106,.35),0 20px 50px rgba(0,0,0,.35)}
.hmg .hmg-card__face img,.hmg .hmg-card__face video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block;-webkit-user-drag:none;pointer-events:none}
.hmg-card__back{position:absolute;inset:0;border-radius:18px;background:rgba(20,37,25,.6);transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:none}
.hmg-tag{position:absolute;left:12px;bottom:12px;background:var(--hm-cream);color:var(--hm-green-800);border-radius:999px;padding:6px 12px 6px 7px;display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.hmg-tag__icon{width:18px;height:18px;border-radius:999px;background:var(--hm-green-600);color:var(--hm-gold);display:flex;align-items:center;justify-content:center}
.hmg-card--follow .hmg-card__face{background:radial-gradient(circle at 50% 30%,var(--hm-green-600),var(--hm-green-700) 72%);box-shadow:0 0 0 1px rgba(212,176,106,.45),0 20px 50px rgba(0,0,0,.35)}
.hmg-card__cta{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;text-align:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.hmg-card__ig{width:52px;height:52px;border-radius:999px;border:1.5px solid rgba(212,176,106,.6);display:flex;align-items:center;justify-content:center;color:var(--hm-gold)}
.hmg-card__handle{font-family:var(--hm-serif);font-size:clamp(15px,1.4vw,19px);line-height:1.2}
.hmg-card__more{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hm-olive)}

/* Denetimler */
.hmg-controls{margin-top:clamp(18px,2.5vw,28px);display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,24px)}
.hmg .hmg-btn{width:44px;height:44px;border-radius:999px;border:1.5px solid rgba(246,239,225,.3);background:transparent;color:var(--hm-cream);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;padding:0}
.hmg .hmg-btn:hover{border-color:var(--hm-cream);background:rgba(246,239,225,.08)}
.hmg-caption{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:200px;text-align:center}
.hmg-caption__num{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--hm-olive)}
.hmg-caption__label{font-family:var(--hm-serif);font-size:clamp(17px,1.5vw,20px);line-height:1.2;color:var(--hm-cream)}

/* Lightbox (z-index 50: sitenin alt barı 45, başlık 40; açılır menüler <dialog> üst katmanında) */
.hmg-lb{position:fixed;inset:0;z-index:50;background:rgba(20,37,25,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);animation:hmgIn .3s ease}
.hmg-lb.is-open{display:flex}
.hmg .hmg-lb__close{position:absolute;top:20px;right:20px}
.hmg-lb__fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:20px;max-width:100%;animation:hmgPop .4s cubic-bezier(.32,.72,0,1)}
.hmg-lb__media{position:relative;width:min(88vw,520px,calc((100vh - 230px) * .8));aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:var(--hm-green-700);box-shadow:0 0 0 1px rgba(212,176,106,.4),0 30px 80px rgba(0,0,0,.5)}
.hmg .hmg-lb__media img,.hmg .hmg-lb__media video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.hmg-lb__cap{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,24px)}
.hmg-lb__text{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:200px;text-align:center}
.hmg-lb__label{font-family:var(--hm-serif);font-size:clamp(20px,2.4vw,26px);line-height:1.2;color:var(--hm-cream)}
.hmg .hmg-lb__link{color:var(--hm-gold);font-size:14px;font-weight:600}
@keyframes hmgIn{from{opacity:0}to{opacity:1}}
@keyframes hmgPop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hmg-lb,.hmg-lb__fig{animation:none}}