/* Shine Cafe — nargile.css: yalnız /nargile yükler (pages.css'ten sonra).
   Üstte Aroma Karıştırıcı (sahne + seçim + sonuç) → aroma kartları → katlanır nargile menüsü.
   Aile renkleri (ShineLib.FAMILY_COLORS) karta --fam, karıştırıcıya --fa/--fb; sahne çizim renkleri ShineLib.flavorArt. */
@property --fa { syntax: '<color>'; inherits: true; initial-value: #ec4899; }
@property --fb { syntax: '<color>'; inherits: true; initial-value: #10b981; }
@property --ring { syntax: '<color>'; inherits: true; initial-value: #38BDF8; }

/* ---------- Üst bölüm: karıştırıcı hero'nun yerinde ---------- */
.ng-top { --smoke-opacity: .08; padding: 28px 0 36px; }
.ng-top .hero-media {
  overflow: hidden;
  background:
    radial-gradient(50% 55% at 30% 40%, rgba(227,18,27,.16), transparent 70%),
    radial-gradient(34% 30% at 86% 14%, rgba(56,189,248,.08), transparent 70%),
    var(--bg);
}
.ng-top .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s var(--ease); }
.ng-top .hero-media.is-loaded img { opacity: .16; }
.ng-top .hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,10,10,.5), transparent 30%, transparent 60%, var(--bg)); }
.ng-top-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "stage" "controls"; gap: 16px; }
.ng-intro { grid-area: intro; text-align: center; }
.ng-intro h1 { margin: 10px 0 6px; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.05; text-wrap: balance; }
.ng-intro h1 em { text-shadow: 0 0 28px rgba(227,18,27,.45); }
.ng-intro p { max-width: 30em; margin: 0 auto; color: var(--gray-light); }
.ng-controls { grid-area: controls; min-width: 0; }
@media (min-width: 900px) {
  .ng-top { padding: 48px 0 56px; }
  .ng-top-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "stage intro" "stage controls"; grid-template-rows: auto 1fr; gap: 20px 48px; align-items: start; }
  .ng-intro { text-align: left; }
  .ng-intro p { margin: 0; }
}

/* ---------- Sahne: iki küre (ürün fotoğrafı ya da çizim) + ortada uyum halkası; renkler seçimle akar ---------- */
.mix-stage {
  --ring: var(--neon);
  grid-area: stage;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  padding: 18px 12px 14px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  background:
    radial-gradient(60% 80% at 10% 30%, color-mix(in srgb, var(--fa) 30%, transparent), transparent 70%),
    radial-gradient(60% 80% at 90% 70%, color-mix(in srgb, var(--fb) 26%, transparent), transparent 70%),
    var(--surface);
  transition: --fa .7s var(--ease), --fb .7s var(--ease), --ring .6s var(--ease);
}
/* İki rengin ortada buluşan dumanı: yavaşça yükselen, bulanık iki lekeden */
.mix-stage::before, .mix-stage::after {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: -30%;
  width: 55%;
  height: 90%;
  border-radius: 50%;
  filter: blur(36px);
  opacity: .5;
  pointer-events: none;
  animation: ms-smoke 9s ease-in-out infinite alternate;
}
.mix-stage::before { left: 12%; background: var(--fa); }
.mix-stage::after { right: 12%; background: var(--fb); animation-delay: -4.5s; }
@keyframes ms-smoke { from { translate: 0 10%; scale: .9; } to { translate: 0 -18%; scale: 1.1; } }
.ms-side { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.ms-orb {
  position: relative;
  width: min(100%, 220px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--fam, var(--red)) 38%, var(--surface-2)), var(--bg) 75%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 40px -6px color-mix(in srgb, var(--fam, var(--red)) 60%, transparent);
  transition: box-shadow .6s var(--ease);
}
.ms-art { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: 50%; opacity: 0; transform: scale(.86) rotate(-8deg); transition: opacity .55s var(--ease), transform .6s var(--ease); }
.ms-art.is-on { opacity: 1; transform: none; }
.ms-svg { width: 62%; height: 62%; filter: drop-shadow(0 6px 16px rgba(0,0,0,.45)) drop-shadow(0 0 18px color-mix(in srgb, var(--c) 45%, transparent)); animation: ms-float 5s ease-in-out infinite; }
.ms-side[data-s="b"] .ms-svg { animation-delay: -2.5s; }
@keyframes ms-float { 50% { translate: 0 -5px; rotate: 3deg; } }
.ms-photo { width: 100%; height: 100%; object-fit: cover; }
.ms-badge { position: absolute; right: 8%; bottom: 8%; width: 30%; height: 30%; padding: 5%; border-radius: 50%; background: rgba(11,10,10,.72); box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.ms-name { max-width: 100%; overflow: hidden; color: var(--cream); font-family: var(--font-head); font-size: clamp(.95rem, 2vw, 1.2rem); font-weight: 600; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.mix-stage.is-rolling .ms-art { transition-duration: .12s; }
.mix-stage.is-new .ms-orb { animation: ms-pop .7s var(--ease); }
@keyframes ms-pop { 40% { scale: 1.05; } }
.ms-cap { grid-column: 1 / -1; min-height: 1.5em; margin: 6px 0 0; color: var(--gray-light); font-size: .88rem; text-align: center; }

.mix-ring { position: relative; width: clamp(76px, 22vw, 124px); aspect-ratio: 1; margin-bottom: 28px; }
.mix-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring-track { fill: rgba(11,10,10,.55); stroke: rgba(255,255,255,.1); stroke-width: 8; }
.ring-fill { fill: none; stroke: var(--ring); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 6px var(--ring)); transition: stroke-dashoffset .9s var(--ease); }
.mix-score { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2px; }
.mix-score b { font-family: var(--font-head); font-size: clamp(1.8rem, 5vw, 2.7rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.mix-score small { align-self: flex-end; margin-bottom: 30%; color: var(--gray-light); font-size: .85rem; }
@media (min-width: 900px) {
  .mix-stage { position: sticky; top: calc(var(--header-h) + 16px); align-content: center; min-height: 440px; padding: 32px 20px 20px; }
}

/* ---------- Seçim: iki aroma + "Şansıma bırak" ---------- */
.mixer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 10px; }
.mixer-field { --fam: var(--red); position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mixer-field > span { color: var(--gray-light); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.mixer-field select {
  width: 100%;
  height: 48px;
  padding: 0 34px 0 34px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8b2ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
  color: var(--cream);
  font-size: 1rem;
  font-weight: 600;
  text-overflow: ellipsis;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.mixer-field select:hover { border-color: color-mix(in srgb, var(--fam) 60%, transparent); }
.mixer-field select:focus-visible { outline: none; border-color: var(--neon); box-shadow: 0 0 0 4px var(--neon-soft); background-color: #161414; }
.mixer-field select option, .mixer-field select optgroup { background: #161414; color: var(--cream); }
.mixer-field::after { content: ''; position: absolute; left: 13px; bottom: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--fam); box-shadow: 0 0 10px var(--fam); pointer-events: none; transition: background .4s, box-shadow .4s; }
.mixer-field.is-picked select { animation: mix-picked .9s var(--ease); }
@keyframes mix-picked { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fam) 70%, transparent); } to { box-shadow: 0 0 0 14px transparent; } }
.mixer-plus {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, var(--fa), var(--fb), var(--fa));
  color: #fff;
  font-family: var(--font-head);
  font-size: 1.4rem;
  line-height: 1;
  transition: --fa .6s var(--ease), --fb .6s var(--ease);
}
.mixer-plus::before { content: ''; position: absolute; inset: 3px; z-index: -1; border-radius: 50%; background: var(--bg-2); }
.mixer.is-mixing .mixer-plus { animation: mix-spin .7s var(--ease); }
@keyframes mix-spin { 40% { transform: rotate(120deg) scale(1.14); } to { transform: rotate(180deg); } }
.mixer-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.btn-lucky { flex: 1 1 220px; min-height: 56px; font-size: 1.08rem; box-shadow: 0 10px 30px -10px rgba(227,18,27,.7); }
.btn-lucky .ic { width: 20px; height: 20px; }
.mixer-tools .btn-sm { min-height: 56px; }
.mixer-tools [aria-disabled="true"] { opacity: .75; cursor: progress; }
#mix-random[aria-disabled="true"] .ic { animation: mix-spin .9s linear infinite; }

/* ---------- Sonuç kartı ---------- */
.mix-result { margin-top: 16px; }
.mix-card {
  --ring: var(--neon);
  padding: 18px 20px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background:
    radial-gradient(55% 90% at 0% 0%, color-mix(in srgb, var(--fa) 18%, transparent), transparent 70%),
    radial-gradient(55% 90% at 100% 100%, color-mix(in srgb, var(--fb) 14%, transparent), transparent 70%),
    var(--surface);
  transition: --fa .6s var(--ease), --fb .6s var(--ease), --ring .6s var(--ease);
}
.mix-card.is-new { animation: mix-glow 1s var(--ease); }
@keyframes mix-glow { from { border-color: color-mix(in srgb, var(--ring) 70%, transparent); box-shadow: 0 0 40px -8px color-mix(in srgb, var(--ring) 45%, transparent); } }
.mix-label { margin: 0; color: color-mix(in srgb, var(--ring) 30%, #fff); font-family: var(--font-head); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; line-height: 1.15; }
.mix-text { margin: 4px 0 0; color: var(--gray-light); font-size: .94rem; line-height: 1.5; }
.mix-card.is-new .mix-label, .mix-card.is-new .mix-text { animation: mix-in .55s var(--ease) both; }
@keyframes mix-in { from { opacity: 0; translate: 0 8px; } }
.mix-meters { display: grid; gap: 8px; margin-top: 14px; }
.mix-meter { display: grid; grid-template-columns: 76px minmax(0, 1fr) 30px; align-items: center; gap: 12px; font-size: .86rem; }
.mm-bar { position: relative; height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.mm-bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--fa), var(--fb)); transform: scaleX(calc(var(--v, 0) / 5)); transform-origin: left; transition: transform .8s var(--ease); }
.mm-val { color: var(--gray-light); font-variant-numeric: tabular-nums; text-align: right; }
.mix-products { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.mix-products:empty { display: none; }
.mix-products-label { color: var(--gray); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.mix-prod { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 14px; border: 1px solid color-mix(in srgb, var(--fam) 40%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--fam) 10%, transparent); font-size: .8rem; font-weight: 600; transition: border-color .2s, background .2s; }
.mix-prod:hover { border-color: var(--fam); background: color-mix(in srgb, var(--fam) 20%, transparent); }
.mix-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.mix-actions .btn { flex: 1 1 auto; }
.mix-actions .ic { width: 18px; height: 18px; }
.mix-empty { margin: 0; padding: 28px 20px; border: 1px dashed rgba(255,255,255,.18); border-radius: 18px; color: var(--gray-light); font-family: var(--font-head); font-size: 1.25rem; font-style: italic; text-align: center; }
@media (max-width: 420px) { .mixer-field select { padding-right: 28px; background-position: right 8px center; font-size: .95rem; } }

/* ---------- Marka çipleri + aroma kartları (dar ekranda yatay, sıkı) ---------- */
#flavor-brands { margin: -4px 0 16px; }
.chip-count { color: var(--gray); font-size: .78em; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip-count { color: var(--gray-light); }
.flavor-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .flavor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .flavor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 600px) { .flavor-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.flavor-grid > .skeleton { height: 220px; border-radius: var(--radius); }
.flavor-grid > .empty { grid-column: 1 / -1; }
.flavor-card {
  --fam: var(--red);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  transition: border-color .3s, box-shadow .35s var(--ease), translate .35s var(--ease);
}
.flavor-card:focus-within { border-color: color-mix(in srgb, var(--fam) 50%, transparent); }
@media (hover: hover) {
  .flavor-card:hover { translate: 0 -3px; border-color: color-mix(in srgb, var(--fam) 60%, transparent); box-shadow: 0 22px 50px -22px color-mix(in srgb, var(--fam) 55%, transparent); }
  .flavor-card:hover .flavor-photo img { transform: scale(1.045); }
}
.flavor-photo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    radial-gradient(70% 65% at 28% 78%, color-mix(in srgb, var(--fam) 45%, transparent), transparent 70%),
    radial-gradient(55% 55% at 82% 18%, color-mix(in srgb, var(--fam) 24%, transparent), transparent 70%),
    linear-gradient(160deg, var(--surface-2), var(--bg));
}
.flavor-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .3s; }
.flavor-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11,10,10,.35), transparent 32%, transparent 58%, rgba(11,10,10,.7)); }
.flavor-glyph { width: 46%; height: 70%; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--fam) 60%, transparent)); }
.flavor-fam { position: absolute; left: 10px; bottom: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(11,10,10,.6); color: var(--cream); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.flavor-fam i { width: 7px; height: 7px; border-radius: 50%; background: var(--fam); box-shadow: 0 0 8px var(--fam); }
.flavor-mix {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid rgba(56,189,248,.45);
  border-radius: 999px;
  background: rgba(11,10,10,.6);
  color: var(--cream);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
}
.flavor-mix span { font-size: 1.1em; line-height: 1; color: color-mix(in srgb, var(--fam) 65%, #fff); }
.flavor-mix:hover { border-color: var(--fam); background: color-mix(in srgb, var(--fam) 28%, rgba(11,10,10,.7)); }
.flavor-mix:active { transform: scale(.96); }
.flavor-body { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px 14px; }
.flavor-brand { margin: 0; color: color-mix(in srgb, var(--fam) 50%, #fff); font-family: var(--font-head); font-size: .9rem; font-style: italic; }
.flavor-body h3 { margin: -4px 0 0; font-size: 1.2rem; line-height: 1.2; overflow-wrap: anywhere; }
.flavor-body .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.flavor-notes { flex: 1; display: -webkit-box; margin: 0; overflow: hidden; color: var(--gray-light); font-size: .88rem; line-height: 1.45; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.flavor-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding-top: 8px; border-top: 1px solid var(--glass-border); }
.flavor-int { display: inline-flex; align-items: center; gap: 8px; color: var(--gray); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.flavor-card .intensity i.on { background: var(--fam); border-color: var(--fam); box-shadow: 0 0 6px var(--fam); }
.flavor-price { display: inline-flex; align-items: center; gap: 8px; }
.flavor-price:empty { display: none; }
.flavor-price .price { font-size: 1.1rem; }
.flavor-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.flavor-actions:empty { display: none; }
.flavor-actions .btn { flex: 1 1 auto; }
.flavor-actions .ic { width: 18px; height: 18px; }
.flavor-card.is-out .flavor-photo img { filter: grayscale(.75) brightness(.7); }
/* Telefonda yatay kart: solda kare görsel (+ Karıştır altta), sağda ad · notlar · fiyat · eylemler */
@media (max-width: 600px) {
  .flavor-card { flex-direction: row; }
  .flavor-photo { flex: none; width: 116px; aspect-ratio: auto; align-self: stretch; min-height: 150px; }
  .flavor-fam { display: none; }
  .flavor-mix { top: auto; right: 6px; bottom: 6px; left: 6px; padding: 6px; }
  .flavor-body { padding: 10px 12px 12px; }
  .flavor-body h3 { font-size: 1.1rem; }
  .flavor-int > span:first-child { display: none; }
  .flavor-actions .btn { padding-inline: 12px; }
  .flavor-actions .fa-l { display: none; }
}
.tag-klasik { color: #c4b5fd; background: rgba(139,92,246,.12); border-color: rgba(139,92,246,.32); }
.tag-sert { color: #ff6b3d; background: rgba(255,107,61,.12); border-color: rgba(255,107,61,.32); }

/* ---------- Nargile menüsü: katlanır (fiyat listesi /menu'de de var) ---------- */
.ng-menu summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; cursor: pointer; list-style: none; }
.ng-menu summary::-webkit-details-marker { display: none; }
.ng-menu summary h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); }
.ng-menu summary::after { content: ''; width: 10px; height: 10px; margin-left: 4px; border-right: 2px solid var(--gray-light); border-bottom: 2px solid var(--gray-light); transform: rotate(45deg); transition: transform .3s var(--ease); }
.ng-menu[open] summary::after { transform: rotate(-135deg); }
.ng-menu-n { margin-left: auto; color: var(--gray-light); font-size: .88rem; }
.ng-menu .menu-rows { margin: 16px 0; }
#ng-products .p-open { text-decoration: none; }
#ng-products .p-open:hover .price { color: #ffc070; }

/* ---------- Azaltılmış hareket: geçişler anında, sahne durağan ---------- */
@media (prefers-reduced-motion: reduce) {
  .mixer.is-mixing .mixer-plus, .mix-card.is-new, #mix-random .ic, .mix-card.is-new .mix-label, .mix-card.is-new .mix-text, .mixer-field.is-picked select,
  .mix-stage::before, .mix-stage::after, .ms-svg, .mix-stage.is-new .ms-orb { animation: none; }
  .ring-fill, .mm-bar i, .mix-card, .mix-stage, .mixer-plus, .ms-art, .ms-orb, .flavor-card, .flavor-photo img { transition: none; }
  .ms-art { transform: none; }
  .flavor-card:hover { translate: none; }
}