/* ============================================================================
   cinema.css — Duosy homepage CINEMATIC LAYER
   A scroll-driven film: "Boş Bir Akşam → Bir Anı".
   Loaded AFTER style.css. Drives the hero film + horizontal Keşfet gallery
   + memory parallax. GSAP ScrollTrigger choreographs it (cinema.js).
   Degrades: no JS / reduced-motion → readable static fallback.
   ============================================================================ */

:root {
  --film-night-1: #0B1220;       /* deepest night */
  --film-night-2: #15233B;
  --film-night-3: #1F385B;       /* duosy navy */
  --film-maroon:  #4D2D3D;
  --film-cream:   #F4EADB;
  --film-gold:    #F4C542;
  --film-pink:    #E8A0BF;
  --film-ink:     #F3ECDD;
  --film-ease:    cubic-bezier(.16,1,.3,1);
}

/* ───────────────────────────── FILM SHELL ───────────────────────────── */
.film { position: relative; background: var(--film-night-1); }
.film-pin {
  position: relative; height: 100vh; min-height: 640px;
  overflow: hidden; color: var(--film-ink);
}
.film-stage { position: absolute; inset: 0; }

/* atmosphere layers */
.film-sky {
  position: absolute; inset: -10%;
  background:
    radial-gradient(120% 80% at 50% 18%, rgba(31,56,91,.55), transparent 60%),
    radial-gradient(90% 70% at 78% 92%, rgba(77,45,61,.45), transparent 62%),
    linear-gradient(180deg, var(--film-night-1) 0%, var(--film-night-2) 55%, var(--film-night-3) 100%);
  will-change: opacity, transform;
}
.film-sky { transition: background 1.2s var(--film-ease); }
/* resolve "lift" — stays COOL (no warm tones), just brighter moonlit navy */
/* dedicated overlay sky for the resolve "moonlit lift" — scrub-safe via opacity */
.film-sky2 {
  position: absolute; inset: -10%; opacity: 0; will-change: opacity;
  background:
    radial-gradient(120% 80% at 50% 20%, rgba(61,123,196,.40), transparent 60%),
    radial-gradient(90% 70% at 74% 88%, rgba(124,209,196,.22), transparent 62%),
    linear-gradient(180deg, #122036 0%, #1b3052 48%, #22456f 100%);
}
.film-topo {
  position: absolute; inset: -8%;
  background: url("assets/topography.svg") center/1100px repeat;
  opacity: .06; mix-blend-mode: screen; will-change: transform;
}
.film-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 120% at 50% 45%, transparent 52%, rgba(0,0,0,.55) 100%);
}

/* generic stacked layer (centered) */
.film-layer {
  position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; padding: 24px; opacity: 0; will-change: transform, opacity;
}
.film-layer > * { max-width: min(92vw, 880px); }

/* ── ACT 0 · the question ───────────────────────────── */
.film-kicker {
  display: inline-block; font-family: var(--font-sans, Inter), sans-serif;
  letter-spacing: .34em; text-transform: uppercase; font-size: .72rem;
  color: var(--film-maroon); opacity: 1; margin-bottom: 22px;
}
.film-q {
  font-family: "Fraunces", Georgia, serif; font-weight: 500;
  font-size: clamp(2.8rem, 8.6vw, 6.6rem); line-height: 1.02;
  letter-spacing: -.02em; color: var(--film-cream); margin: 0;
}
.film-q em { font-style: italic; color: var(--film-maroon); }
.film-cue {
  position: absolute; bottom: 6.5vh; left: 50%; transform: translateX(-50%);
  display: inline-flex;
}
.cue-btn {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: 1rem;
  background: linear-gradient(135deg, #1F385B, #3D7BC4);
  box-shadow: 0 14px 32px -10px rgba(31,56,91,.8), inset 0 0 0 1px rgba(255,255,255,.14);
  animation: cueBob 1.8s ease-in-out infinite;
}
@keyframes cueBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ── ACT 1 · the city wakes ─────────────────────────── */
.film-city { pointer-events: none; }
.city-dot {
  position: absolute; width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center; font-size: 1.15rem; color: #fff;
  background: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.6); opacity: 0; will-change: transform, opacity;
}
.city-dot.d1 { top: 20%; left: 16%; color: #9FB8E0; }
.city-dot.d2 { top: 30%; right: 18%; color: var(--film-pink); }
.city-dot.d3 { top: 58%; left: 12%; color: #7FD1C4; }
.city-dot.d4 { bottom: 20%; right: 14%; color: #B6C7E6; }
.city-dot.d5 { top: 14%; left: 50%; color: #E8A0BF; }
.city-dot.d6 { bottom: 26%; left: 42%; color: #8FB0DC; }
.film-sub {
  font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: clamp(1.3rem, 3.4vw, 2.4rem); line-height: 1.25;
  color: var(--film-cream); opacity: .96;
}

/* ── ACT 2 · the phone portal ───────────────────────── */
.film-portal { perspective: 1300px; }
.film-portal-inner { position: relative; display: grid; place-items: center; transform-style: preserve-3d; }
.film-device {
  position: relative; width: clamp(220px, 26vw, 320px); aspect-ratio: 9/19.3;
  border-radius: 42px; padding: 10px;
  background: linear-gradient(160deg, #2A2F3A, #0E1320);
  box-shadow: 0 60px 120px -40px rgba(0,0,0,.8), 0 0 0 2px rgba(255,255,255,.06) inset;
  will-change: transform, opacity;
}
.film-device-screen {
  position: relative; width: 100%; height: 100%; border-radius: 32px;
  overflow: hidden; background: #0E1320;
}
.film-screen {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  opacity: 0; will-change: opacity, transform;
}
.film-screen.is-on { opacity: 1; }

/* ===== Framed in-app screenshots (exported WITH device frame) =====
   The PNG/WebP already includes the phone bezel + transparent corners,
   so we drop the CSS mockup chrome and show the image directly. */
.app-shot { width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 34px 64px rgba(20,28,46,.30)); }

/* Hero portal — neutralise the .film-device bezel, image carries its own frame */
.film-device { background: none !important; box-shadow: none !important; padding: 0 !important;
  border-radius: 0; aspect-ratio: 752 / 1508; }
.film-device-screen { background: transparent; border-radius: 0; overflow: visible; }
.film-screen img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Showcase — sticky stack of framed shots (crossfade handled by .sc-screen) */
.phone-shots { position: relative; width: clamp(200px, 17vw, 248px); aspect-ratio: 752 / 1508; margin: 0 auto; }
html.cine-on .phone-shots { width: clamp(196px, 16vw, 240px); }

/* Duosy AI band — framed shot, gentle float */
.tour-visual .app-shot { width: clamp(220px, 22vw, 272px); height: auto; }
.js .ai-band .ai-shot { animation: floaty 6s ease-in-out 1.2s infinite; }

/* Features page hero + quick-jump pills */
.features-hero { padding-top: clamp(118px, 15vh, 172px); }
.features-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.features-jump a { font-size: .85rem; font-weight: 600; color: var(--navy); padding: 8px 16px; border-radius: 999px;
  background: rgba(255,255,255,.6); border: 1px solid rgba(31,56,91,.12);
  transition: transform .25s var(--film-ease), background .25s, box-shadow .25s; }
.features-jump a:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(31,56,91,.4); }

/* ===== Consistent vertical rhythm =====
   Feature tour-rows sit one-per-section, so the section band already supplies the
   spacing. Drop the tour-row's own padding to avoid double-padding (matches homepage). */
html.cine-on .tour-row { padding-top: 0; padding-bottom: 0; }
html.cine-on .tour-row + .tour-row { border-top: 0; }

/* ===== Pricing: stacked toggles ===== */
.price-toggles { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: clamp(30px, 4vw, 48px); }
.price-toggles .price-tabs { margin: 0 auto; }
.bill-tabs .price-tab { font-size: .82rem; }
.bill-save { font-size: .74rem; font-weight: 700; color: var(--navy); background: #fff;
  padding: 3px 9px; border-radius: 999px; margin-left: 8px; letter-spacing: .01em;
  border: 1px solid rgba(31,56,91,.12); box-shadow: 0 2px 8px -3px rgba(31,56,91,.45); }

/* ===== Pricing: compare-plans table ===== */
.compare { margin-top: clamp(46px, 6vw, 76px); }
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.55);
  box-shadow: 0 24px 60px -34px rgba(31,56,91,.4); }
.compare-table { width: 100%; min-width: 620px; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 13px 16px; text-align: center; border-bottom: 1px solid var(--line-soft); }
.compare-table thead th { padding: 20px 16px 16px; vertical-align: bottom; background: rgba(244,234,219,.5);
  font-family: var(--font-display); font-weight: 600; color: var(--maroon); font-size: 1.04rem; }
.compare-table thead th i { display: block; font-size: 1.2rem; margin-bottom: 7px; }
.compare-table thead th.col-free i { color: #8A8F98; }
.compare-table thead th.col-pro i { color: #FF8C42; }
.compare-table thead th.col-prem i { color: #1B5E20; }
.compare-table th.col-feat, .compare-table td.col-feat { text-align: left; font-weight: 500; color: var(--text); min-width: 190px; }
.compare-table td.col-pro, .compare-table th.col-pro { background: rgba(255,140,66,.06); }
.compare-table tbody tr:hover td { background: rgba(255,255,255,.6); }
.compare-table tbody tr:hover td.col-pro { background: rgba(255,140,66,.1); }
.cmp-sec td { text-align: left; background: rgba(31,56,91,.06); color: var(--navy);
  font-family: var(--font-display); font-weight: 600; font-size: .94rem; padding: 11px 16px; }
.cmp-yes { color: #1B5E20; font-size: 1rem; }
.cmp-no { color: var(--text-faint); }
.cmp-val { font-weight: 600; color: var(--maroon); font-size: .9rem; white-space: pre-line; line-height: 1.25; display: inline-block; }
.compare-note { text-align: center; margin-top: 16px; color: var(--text-soft); font-size: .9rem; }
@media (max-width: 600px) { .compare-hint { text-align: center; color: var(--text-faint); font-size: .82rem; margin-bottom: 10px; } }

/* ===== Navbar: download button (card-style 15px corners) + social cluster ===== */
.nav-cta { border-radius: 15px; }
.nav-links .nav-cta, .nav-links .nav-cta:hover { color: #fff; }
html.cine-on .nav-links .nav-cta { margin-left: 8px; padding: 10px 19px; font-size: .94rem; }
.nav-social { display: flex; align-items: center; gap: 3px; padding-left: 4px; }
.nav-social a { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-size: .98rem; color: var(--maroon); opacity: .58; transition: opacity .2s, color .2s, background .2s, transform .2s; }
.nav-social a:hover { opacity: 1; color: var(--blue-accent); background: rgba(31,56,91,.08); transform: translateY(-1px); }
@media (max-width: 920px) {
  .nav-social { display: none; }
  /* download button now lives in the menu → show it inside the mobile dropdown */
  .nav-links .nav-cta { display: inline-flex; margin: 8px 0 2px; }
  html.cine-on .nav-links .nav-cta { margin-left: 0; padding: 13px 20px; font-size: 1.02rem; }
}

/* ===== Footer: balanced columns ===== */
.footer-top { grid-template-columns: 1.6fr 1.1fr 1.2fr; gap: clamp(24px, 3vw, 44px); }
.footer-col h4 { color: #EAE0EC; }
.footer-links2-grid { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 0 26px; }
@media (max-width: 560px) {
  .footer-links2-grid { grid-template-columns: 1fr; }
}

/* ===== Contact: bento grid ===== */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(14px, 1.6vw, 20px); }
.bento-cell { background: rgba(255,255,255,.62); border: 1px solid var(--line); border-radius: 24px;
  padding: clamp(22px, 2.6vw, 34px); transition: transform .3s var(--film-ease), box-shadow .3s, border-color .3s; }
.bento-cell:hover { transform: translateY(-3px); box-shadow: 0 26px 54px -30px rgba(31,56,91,.4); border-color: rgba(31,56,91,.2); }
.bc-2 { grid-column: span 2; } .bc-3 { grid-column: span 3; } .bc-4 { grid-column: span 4; } .bc-6 { grid-column: span 6; }
.bento-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  font-size: 1.25rem; color: #fff; background: linear-gradient(135deg, var(--navy), var(--maroon)); margin-bottom: 16px; }
.bento-cell h3 { font-size: 1.2rem; }
.bento-cell > p { color: var(--text-soft); margin-top: 7px; font-size: .97rem; line-height: 1.55; }
.bento-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 15px; font-weight: 600; color: var(--blue-accent); transition: gap .25s var(--film-ease); }
.bento-link:hover { gap: 12px; }
.bento-link i { font-size: .85em; }
.social-row { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.social-row a { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem;
  color: var(--maroon); background: rgba(31,56,91,.06); border: 1px solid var(--line); transition: transform .25s var(--film-ease), background .25s, color .25s; }
.social-row a:hover { color: #fff; background: linear-gradient(135deg, var(--navy), var(--maroon)); transform: translateY(-3px); }
.contact-loc { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(22px, 2.6vw, 38px); align-items: stretch; }
.contact-loc .loc-info { display: flex; flex-direction: column; }
.contact-loc .addr-line { color: var(--text); line-height: 1.65; margin-top: 12px; max-width: 34ch; }
.contact-map { width: 100%; min-height: 320px; height: 100%; border: 0; border-radius: 18px; filter: saturate(1.05); }
@media (max-width: 820px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bc-2, .bc-3, .bc-4, .bc-6 { grid-column: span 2; }
  .contact-loc { grid-template-columns: 1fr; }
  .contact-map { min-height: 260px; }
}

/* Coming-soon screenshot placeholder (features page, missing shots) */
.shot-soon { width: clamp(220px, 22vw, 264px); aspect-ratio: 752 / 1508; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  text-align: center; padding: 26px; border-radius: 38px;
  border: 1.5px dashed rgba(31,56,91,.26);
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(244,234,219,.42)); }
.shot-soon .ph-icon { font-size: 2.1rem; color: var(--blue-accent); }
.shot-soon .ph-label { font-family: var(--font-display); font-weight: 600; font-size: 1.16rem; color: var(--maroon); }
.shot-soon .ph-note { font-size: .76rem; color: var(--text-faint); letter-spacing: .02em;
  border: 1px dashed rgba(77,45,61,.3); border-radius: 8px; padding: 5px 11px; }
.film-screen .sc-ic { font-size: 2rem; margin-bottom: 12px; }
.film-screen .sc-lbl { font-weight: 600; font-size: 1.02rem; letter-spacing: .01em; }
.film-screen .sc-note { display:block; margin-top: 8px; font-size: .72rem; opacity: .6; }
.scr-discover { background: radial-gradient(120% 90% at 50% 8%, rgba(31,122,110,.5), transparent 60%), linear-gradient(180deg,#13233a,#0e1320); color: #DDF4EF; }
.scr-plan     { background: radial-gradient(120% 90% at 50% 8%, rgba(244,197,66,.42), transparent 60%), linear-gradient(180deg,#241d10,#0e1320); color: #FBEBC4; }

.film-chip {
  position: absolute; display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 14px; font-size: .86rem; font-weight: 600; color: #1c2433;
  background: rgba(255,255,255,.94); box-shadow: 0 22px 50px -20px rgba(0,0,0,.55);
  opacity: 0; will-change: transform, opacity; white-space: nowrap;
}
.film-chip small { display: block; font-weight: 500; font-size: .72rem; color: #64748b; }
.film-chip .ci { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: .82rem; flex: none; }
.film-chip.fc1 { top: 16%; left: calc(50% - clamp(220px,26vw,320px)/2 - 130px); }
.film-chip.fc1 .ci { background: linear-gradient(135deg,#1F385B,#3D7BC4); }
.film-chip.fc2 { top: 42%; right: calc(50% - clamp(220px,26vw,320px)/2 - 120px); }
.film-chip.fc2 .ci { background: linear-gradient(135deg,#C25C84,#E8A0BF); }
.film-chip.fc3 { bottom: 18%; left: calc(50% - clamp(220px,26vw,320px)/2 - 96px); }
.film-chip.fc3 .ci { background: linear-gradient(135deg,#B0894F,#F4C542); }
.film-chip.fc4 { top: 18%; right: calc(50% - clamp(220px,26vw,320px)/2 - 110px); }
.film-chip.fc4 .ci { background: linear-gradient(135deg,#2C8C82,#7FD1C4); }
.film-chip.fc5 { top: 60%; left: calc(50% - clamp(220px,26vw,320px)/2 - 80px); }
.film-chip.fc5 .ci { background: linear-gradient(135deg,#3D7BC4,#9FB8E0); }

.film-line {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-family: "Fraunces", Georgia, serif; font-weight: 400;
  font-size: clamp(1.3rem, 3.2vw, 2.3rem); line-height: 1.25; color: var(--film-cream);
}
.film-line-2 { bottom: 9vh; }

/* ── ACT 3 · the night (live it) ────────────────────── */
.film-night { pointer-events: none; }
.night-blur {
  position: absolute; inset: 0;
  background:
    radial-gradient(40% 50% at 28% 40%, rgba(124,209,196,.42), transparent 60%),
    radial-gradient(45% 55% at 72% 60%, rgba(232,160,191,.40), transparent 62%),
    radial-gradient(60% 70% at 50% 50%, rgba(61,123,196,.48), transparent 65%),
    linear-gradient(180deg,#101a30,#181f3a);
  filter: blur(8px); opacity: 0; will-change: opacity, transform;
}
.film-word {
  position: relative; font-family: "Fraunces", Georgia, serif; font-weight: 400;
  font-size: clamp(2.1rem, 6vw, 4.4rem); line-height: 1.12; color: var(--film-cream);
  letter-spacing: -.01em; margin: 0; text-shadow: 0 10px 60px rgba(0,0,0,.4);
}
.film-word em { font-style: italic; font-weight: 500; color: var(--film-pink); }

/* ── ACT 4 · the memory ─────────────────────────────── */
.polaroid {
  position: relative; margin: 0 auto; width: clamp(210px, 26vw, 300px);
  background: #fff; padding: 14px 14px 52px; border-radius: 6px;
  box-shadow: 0 50px 100px -34px rgba(0,0,0,.7); transform: rotate(-4deg);
}
.polaroid-img {
  aspect-ratio: 1; border-radius: 3px; display: grid; place-items: center;
  background: linear-gradient(150deg,#2C8C82,#1F385B); color: #fff; font-size: .9rem; gap: 6px;
  background-size: cover; background-position: center;
}
.polaroid-img .pi-ic { font-size: 1.8rem; opacity: .9; }
.polaroid figcaption {
  position: absolute; bottom: 16px; left: 0; right: 0; text-align: center;
  font-family: "Caveat", "Fraunces", cursive, serif; color: #3a2f3a; font-size: 1.05rem;
}
.film-line-3 { bottom: 11vh; }

/* ── ACT 5 · resolve / tagline ──────────────────────── */
.film-resolve { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.film-eyebrow {
  display: inline-block; letter-spacing: .26em; text-transform: uppercase;
  font-size: .72rem; color: var(--film-gold); margin-bottom: 18px;
}
.film-title {
  font-family: "Fraunces", Georgia, serif; font-weight: 500;
  font-size: clamp(2.4rem, 7vw, 5.2rem); line-height: 1.04; letter-spacing: -.02em;
  margin: 0; color: var(--film-cream);
}
.film-tag { margin: 18px 0 30px; font-size: clamp(1.05rem,2.4vw,1.4rem); color: rgba(243,236,221,.82); }
.film-resolve .store-badges { display: flex; gap: 14px; justify-content: center; }
.film-resolve .store-badge img { height: 52px; width: auto; }
.film-resolve .store-badge[href*="play.google"] img { height: 58px; }

/* ───────── HORIZONTAL "KEŞFET" CINEMATIC GALLERY ───────── */
.cine-gallery { position: relative; background: var(--cream-grad, #f4eadb); overflow: hidden; }
.cg-pin { height: 100vh; min-height: 600px; display: flex; flex-direction: column; justify-content: center; }
.cg-head { padding: 0 max(24px, 5vw) 26px; max-width: 760px; }
.cg-head .eyebrow { color: var(--blue-accent, #3D7BC4); }
.cg-head h2 { font-family: "Fraunces", serif; font-weight: 600; font-size: clamp(1.9rem,4.6vw,3.2rem); color: var(--maroon,#4D2D3D); letter-spacing: -.02em; margin: 8px 0 0; }
.cg-head p { color: var(--text-soft,#5b5650); margin-top: 12px; font-size: 1.05rem; }
.cg-viewport { width: 100%; overflow: hidden; }
.cg-track { display: flex; gap: 20px; padding: 0 max(24px, 5vw); will-change: transform; align-items: stretch; }
.cg-card {
  position: relative; flex: 0 0 auto;
  height: min(54vh, 440px); aspect-ratio: 3/4; width: auto;
  border-radius: 22px; overflow: hidden; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 24px; box-shadow: 0 30px 70px -34px rgba(11,18,32,.6);
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(165deg, #21436f, #14243d);
}
/* cool-tone variety — NO warm tones */
.cg-card:nth-child(6n+1) { background: linear-gradient(165deg, #234b7a, #13233c); }
.cg-card:nth-child(6n+2) { background: linear-gradient(165deg, #1f6b63, #102a30); }
.cg-card:nth-child(6n+3) { background: linear-gradient(165deg, #3a3f6b, #16203a); }
.cg-card:nth-child(6n+4) { background: linear-gradient(165deg, #2c5f86, #122438); }
.cg-card:nth-child(6n+5) { background: linear-gradient(165deg, #4a4577, #1d2240); }
.cg-card:nth-child(6n+6) { background: linear-gradient(165deg, #1d3b63, #101d33); }
.cg-card .cg-img { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: 0; transition: transform .6s var(--film-ease); }
.cg-card.has-img .cg-img { opacity: 1; }
.cg-card.has-img::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11,18,32,.15) 0%, transparent 30%, rgba(11,18,32,.5) 64%, rgba(11,18,32,.9) 100%); }
.cg-card:hover.has-img .cg-img { transform: scale(1.07); }
.cg-card > * { position: relative; z-index: 2; }
.cg-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 1.45rem; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); }
.cg-foot { margin-top: auto; }
.cg-card h3 { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.5rem; margin: 0; letter-spacing: -.01em; color: #fff; }
.cg-card p { font-size: .88rem; color: rgba(255,255,255,.76); margin: 6px 0 0; line-height: 1.4; min-height: 2.5em; }
.cg-count { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.92); }
.cg-count i { color: var(--film-pink); }
.cg-progress { margin: 26px max(24px,5vw) 0; height: 3px; border-radius: 3px; background: rgba(31,56,91,.14); overflow: hidden; }
.cg-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#1F385B,#3D7BC4); }

/* ───────── reveal helper (gsap-driven) ───────── */
.cine-reveal { opacity: 0; transform: translateY(34px); }
html.cine-on .cine-reveal { will-change: transform, opacity; }

/* ───────────────────────── RESPONSIVE ───────────────────────── */
@media (max-width: 820px) {
  /* chips overlap the centered phone on small screens → hide, keep it clean */
  .film-chip { display: none !important; }
  .city-dot { width: 46px; height: 46px; border-radius: 13px; }
  .city-dot.d1 { left: 8%; } .city-dot.d2 { right: 8%; } .city-dot.d3 { left: 6%; }
  .city-dot.d4 { right: 8%; } .city-dot.d6 { left: 30%; }
  .film-line-2 { bottom: 12vh; width: 86%; }
  .cg-card { width: 78vw; }
  .film-device { width: clamp(200px, 60vw, 260px); }
}

/* ───────────────── FALLBACK · no-JS / reduced-motion ───────────────── */
html:not(.cine-on) .film-pin { height: auto; min-height: 0; padding: 80px 0; }
html:not(.cine-on) .film-stage { position: relative; }
html:not(.cine-on) .film-sky { position: absolute; }
html:not(.cine-on) .film-layer { position: relative; opacity: 1; inset: auto; }
html:not(.cine-on) .film-city,
html:not(.cine-on) .film-night,
html:not(.cine-on) .film-cue,
html:not(.cine-on) .film-chip,
html:not(.cine-on) .film-line,
html:not(.cine-on) .film-memory { display: none; }
html:not(.cine-on) .film-portal { margin: 30px 0; }
html:not(.cine-on) .film-device { opacity: 1; }
html:not(.cine-on) .film-screen.scr-discover { opacity: 1; }
html:not(.cine-on) .cine-reveal { opacity: 1; transform: none; }
html:not(.cine-on) .cg-track { flex-wrap: nowrap; overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
  .film-cue i { animation: none; }
}

/* ============================================================
   v2 ADDITIONS — media backdrop · multi-memory · custom DL buttons
   · floating glass nav · hidden scrollbars
   ============================================================ */

/* ── hide scrollbars (vertical + horizontal) — Lenis drives scroll ── */
html.cine-on, html.cine-on body { scrollbar-width: none; -ms-overflow-style: none; }
html.cine-on::-webkit-scrollbar,
html.cine-on body::-webkit-scrollbar,
.cg-viewport::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ── ACT 0 backdrop: optional video + living cool bokeh (no flat color) ── */
.film-media { position: absolute; inset: 0; overflow: hidden; will-change: opacity; }
/* photo-grid backdrop (Act 0 + Act 5 share it) */
.film-grid { position: absolute; inset: 0; display: grid;
  grid-template-columns: repeat(5, 1fr); grid-auto-rows: 1fr; gap: 3px;
  filter: blur(7px) brightness(.5) saturate(.95); transform: scale(1.05);
  will-change: filter, transform, opacity; }
.film-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fm-video { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.film-bokeh { position: absolute; inset: 0; }
.film-bokeh span {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s); transform: translate(-50%,-50%);
  border-radius: 50%; background: radial-gradient(circle, var(--c), transparent 70%);
  filter: blur(30px); animation: bokehDrift 22s ease-in-out var(--d, 0s) infinite;
}
@keyframes bokehDrift {
  0%, 100% { transform: translate(-50%,-50%) translate(0,0); }
  33% { transform: translate(-50%,-50%) translate(26px,-24px); }
  66% { transform: translate(-50%,-50%) translate(-22px,18px); }
}
.fm-overlay { position: absolute; inset: 0;
  background:
    radial-gradient(120% 100% at 50% 38%, rgba(8,13,22,.35) 30%, rgba(8,13,22,.66) 100%),
    linear-gradient(180deg, rgba(11,18,32,.5), rgba(11,18,32,.66)); }

/* ── ACT 4: fanned multi-photo memory stack ── */
.memory-stack { position: relative; width: min(68vw, 540px); height: clamp(280px, 44vh, 400px); margin: 0 auto; }
.mem-slot { position: absolute; top: 50%; left: 50%; }
.mem-slot .polaroid, .mem-scatter .polaroid { margin: 0; width: clamp(150px, 18vw, 200px); padding: 11px 11px 40px; }
.mem-slot .polaroid figcaption, .mem-scatter .polaroid figcaption { bottom: 13px; font-size: .9rem; }
.mem-slot .polaroid-img, .mem-scatter .polaroid-img { background-size: cover; background-position: center; }
/* central trio — center (s3) on top */
.mem-slot.s1 { transform: translate(-50%,-50%) translateX(-56%) rotate(-9deg); z-index: 3; }
.mem-slot.s2 { transform: translate(-50%,-50%) translateX(56%)  rotate(9deg);  z-index: 3; }
.mem-slot.s3 { transform: translate(-50%,-50%) translateY(-5%)  rotate(-1deg); z-index: 6; }
/* the rest, scattered across the screen */
.mem-scatter { position: absolute; z-index: 2; }
.mem-scatter .polaroid { width: clamp(108px, 12vw, 148px); }
.mem-scatter.sc1 { top: 15%;    left: 11%;  transform: rotate(-14deg); }
.mem-scatter.sc2 { top: 19%;    right: 9%;  transform: rotate(12deg); }
.mem-scatter.sc3 { bottom: 16%; right: 13%; transform: rotate(-9deg); }
.mem-scatter.sc4 { bottom: 17%; left: 13%;  transform: rotate(9deg); }

/* ── custom equal-size download buttons (replace official badges in hero) ── */
.dl-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.dl-btn {
  display: inline-flex; align-items: center; gap: 13px;
  min-width: 210px; padding: 13px 22px; border-radius: 15px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22);
  color: var(--film-cream); text-decoration: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .25s var(--film-ease), background .25s, border-color .25s;
}
.dl-btn:hover { transform: translateY(-3px); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.42); }
.dl-btn i { font-size: 1.7rem; line-height: 1; flex: none; }
.dl-btn .dl-tx { display: flex; flex-direction: column; line-height: 1.12; text-align: left; }
.dl-btn .dl-tx small { font-size: .68rem; opacity: .72; letter-spacing: .02em; }
.dl-btn .dl-tx b { font-size: 1.04rem; font-weight: 600; }

/* ── floating glass navbar — appears AFTER the hero film (cinematic top) ── */
html.cine-on .site-nav {
  position: fixed; top: 14px; left: 50%;
  width: min(1120px, calc(100% - 28px));
  transform: translateX(-50%) translateY(-150%); opacity: 0;
  border-radius: 18px;
  background: rgba(248,242,231,.72); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(31,56,91,.12); box-shadow: 0 20px 48px -22px rgba(31,56,91,.42);
  transition: transform .55s var(--film-ease), opacity .45s var(--film-ease);
  z-index: 200;
}
html.cine-on .site-nav.nav-show { transform: translateX(-50%) translateY(0); opacity: 1; }
html.cine-on .site-nav .nav-inner { padding-left: 22px; padding-right: 14px; }
html.cine-on .site-nav.scrolled { background: rgba(248,242,231,.82); }

@media (max-width: 820px) {
  html.cine-on .site-nav { top: 10px; width: calc(100% - 20px); }
  .dl-btn { min-width: 180px; }
  .mem-slot .polaroid { width: clamp(116px, 34vw, 158px); }
  .mem-slot.s1 { transform: translate(-50%,-50%) translateX(-46%) rotate(-8deg); }
  .mem-slot.s2 { transform: translate(-50%,-50%) translateX(46%) rotate(8deg); }
  .mem-scatter .polaroid { width: clamp(84px, 25vw, 116px); }
  .mem-scatter.sc1 { top: 9%; left: 5%; }
  .mem-scatter.sc2 { top: 11%; right: 4%; }
  .mem-scatter.sc3, .mem-scatter.sc4 { display: none; }
  .film-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   v3 — refined TRUST STRIP + editorial STATS (homepage)
   ============================================================ */
html.cine-on .trust-strip { background: transparent; border-color: rgba(31,56,91,.1); }
html.cine-on .trust-strip .container { gap: 14px clamp(22px, 4vw, 48px); padding-top: 22px; padding-bottom: 22px; }
html.cine-on .trust-item {
  position: relative; color: var(--navy); font-weight: 500; font-size: .8rem;
  letter-spacing: .08em; text-transform: uppercase; gap: 9px;
}
html.cine-on .trust-item i { color: var(--navy); opacity: .8; font-size: .95rem; }
html.cine-on .trust-item + .trust-item::before {
  content: ""; position: absolute; left: calc(clamp(22px, 4vw, 48px) / -2); top: 50%; transform: translate(-50%, -50%);
  width: 4px; height: 4px; border-radius: 50%; background: rgba(31,56,91,.28);
}

html.cine-on .stats-head { text-align: center; margin-bottom: clamp(30px, 4.5vw, 54px); }
html.cine-on .stats-head .eyebrow { color: var(--blue-accent); }
html.cine-on .stats-head h2 {
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.15rem);
  color: var(--maroon); letter-spacing: -.01em; margin: 10px 0 0; line-height: 1.1;
}
html.cine-on .stats-grid { gap: clamp(20px, 3vw, 36px); }
html.cine-on .stat { padding: 4px 14px; }
html.cine-on .stat .num {
  font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: clamp(2.7rem, 5vw, 4rem);
  letter-spacing: -.015em; line-height: 1;
  background: none !important; -webkit-text-fill-color: var(--maroon) !important;
  -webkit-background-clip: border-box !important; background-clip: border-box !important;
  color: var(--maroon) !important;
}
html.cine-on .stat .lbl { margin-top: 13px; font-size: .9rem; line-height: 1.45; color: var(--text-soft); max-width: 20ch; margin-inline: auto; }
html.cine-on .stat + .stat::before { top: 14%; height: 52%; width: 1px; background: rgba(31,56,91,.15); }

/* ============================================================
   v4 — showcase fit/chips · glass button · pullquote · AI band bg
   ============================================================ */
/* sticky phone + progress rail fully visible (chips were cut off) */
html.cine-on .showcase-sticky {
  position: sticky; top: calc(var(--nav-h) + 26px);
  height: calc(100vh - var(--nav-h) - 52px); min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(14px, 1.8vw, 22px);
}
html.cine-on .showcase-device { width: clamp(192px, 16vw, 234px); }
html.cine-on .showcase-progress { position: relative; flex-wrap: nowrap; justify-content: center; gap: 6px; max-width: none; }
html.cine-on .sc-dot { padding: 7px 11px; font-size: .75rem; }
html.cine-on .sc-dot > span { font-size: .72rem; }
/* first/last steps get extra lead-in/out so they activate while the phone is
   solidly pinned (otherwise they fire as the sticky engages/releases → misaligned) */
html.cine-on .showcase { padding-bottom: clamp(24px, 3.5vw, 48px); }
html.cine-on .sc-step { min-height: 60vh; }
html.cine-on .sc-step:first-child { min-height: 84vh; align-items: flex-end; padding-bottom: 4vh; }
html.cine-on .sc-step:last-child { min-height: 84vh; align-items: flex-start; padding-top: 4vh; }

/* Per-step screenshot — lives inside each showcase card; shown on mobile only. */
.sc-card-shot { display: none; }

/* ===== Mobile fixes (cine pages) ===== */
@media (max-width: 920px) {
  /* No horizontal drift: remove the hero sky's full-bleed (-10%) and clip at the root. */
  html, body { overflow-x: hidden; }
  .film-sky, .film-sky2 { inset: 0; }

  /* Open menu = floating glass panel that matches the pill (was a full-width cream block) */
  html.cine-on .site-nav .nav-links {
    position: absolute; inset: calc(100% + 8px) 0 auto 0;
    background: #F7F1E6;
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(31,56,91,.12); border-radius: 18px;
    box-shadow: 0 26px 54px -24px rgba(31,56,91,.45);
    padding: 10px 12px 14px;
  }
  html.cine-on .site-nav .nav-links .nav-cta { margin: 8px 4px 2px; width: auto; }

  /* Showcase → each card carries its own framed screenshot; drop the shared sticky phone. */
  html.cine-on .showcase-sticky,
  html.cine-on .showcase-progress { display: none; }
  html.cine-on .sc-step,
  html.cine-on .sc-step:first-child,
  html.cine-on .sc-step:last-child { min-height: 0; padding: 0 0 20px; align-items: stretch; }
  html.cine-on .sc-step:last-child { padding-bottom: 0; }
  html.cine-on .sc-card { opacity: 1; transform: none; }
  /* Footer: brand spans full width above the two link columns on phones */
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .sc-card-shot { display: block; width: min(64%, 218px); height: auto; margin: 2px auto 22px;
    filter: drop-shadow(0 22px 40px rgba(20,28,46,.26)); }
}

/* "Tüm özellikleri keşfet" → frosted glass, like the cards */
.btn-glass {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px; border-radius: 16px; font-weight: 600; font-size: 1rem;
  color: var(--navy); text-decoration: none; cursor: pointer;
  background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--glass-edge); box-shadow: 0 18px 42px -22px rgba(31,56,91,.42);
  transition: transform .25s var(--film-ease), background .25s, border-color .25s;
}
.btn-glass:hover { transform: translateY(-3px); background: rgba(255,255,255,.74); border-color: rgba(31,56,91,.24); }
.btn-glass i { font-size: .9em; transition: transform .25s var(--film-ease); }
.btn-glass:hover i { transform: translateX(4px); }

/* pull-quote → famous quote, top/bottom separators, refined cite */
html.cine-on .pullquote-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-top: clamp(60px,8vw,100px); padding-bottom: clamp(60px,8vw,100px); }
html.cine-on .pq-cite {
  display: block; margin-top: 26px; font-family: var(--font-sans, Inter), sans-serif; font-style: normal;
  font-weight: 600; font-size: .92rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft);
}

/* Duosy AI band → app cream gradient (transparent) + dark brand text */
html.cine-on .ai-band.section--navy { background: transparent !important; }
html.cine-on .ai-band h2 { color: var(--maroon) !important; -webkit-text-fill-color: var(--maroon) !important; background: none !important; }
html.cine-on .ai-band .eyebrow { color: var(--blue-accent); }
html.cine-on .ai-band .lead { color: var(--text-soft) !important; }
html.cine-on .ai-band .tour-list li { color: var(--text) !important; }
html.cine-on .ai-band .tour-list li i { color: var(--blue-accent) !important; }
html.cine-on .ai-band .ai-orb { opacity: 1; }

/* ============================================================
   v5 — Duosy AI orb (recreates the iOS metasidd/Orb, idle state)
   ============================================================ */
html.cine-on .ai-orb {
  position: relative; width: clamp(118px, 12vw, 146px); aspect-ratio: 1; border-radius: 50%;
  overflow: hidden; isolation: isolate; margin: 0 0 22px;
  /* Chrome clips border-radius+overflow but NOT blurred/blended children → square bleed.
     A circular mask forces the inner glows to stay inside the sphere. */
  -webkit-mask-image: radial-gradient(circle closest-side, #000 99%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 99%, transparent 100%);
  background:
    radial-gradient(120% 110% at 38% 22%, rgba(120,150,200,.55) 0%, rgba(120,150,200,0) 30%),
    radial-gradient(130% 130% at 50% 16%, #5d7cae 0%, #355681 22%, #1F385B 46%, #4D2D3D 78%, #2a1a24 100%);
  box-shadow: 0 28px 64px -18px rgba(31,56,91,.6);
}
html.cine-on .ai-orb span { position: absolute; border-radius: 50%; pointer-events: none; }
/* rotating plum depth glow — subtle accent inside the sphere */
.ai-orb .orb-glow {
  inset: 6%; opacity: .55; mix-blend-mode: screen; filter: blur(9px);
  background: radial-gradient(circle at 50% 66%, rgba(166,128,153,.9), rgba(166,128,153,0) 58%);
  animation: orbSpin 15s linear infinite;
}
/* soft moving specular highlights (small, not overpowering) */
.ai-orb .orb-blob {
  width: 34%; height: 34%; left: 14%; top: 16%; opacity: .4; mix-blend-mode: screen; filter: blur(6px);
  background: radial-gradient(circle, rgba(255,255,255,.7), rgba(255,255,255,0) 64%);
  transform-origin: 200% 240%;
}
.ai-orb .orb-blob.b1 { animation: orbSpin 7s linear infinite; }
.ai-orb .orb-blob.b2 { left: auto; right: 16%; top: auto; bottom: 20%; width: 26%; height: 26%; opacity: .28; transform-origin: -180% -160%; animation: orbSpin 10s linear infinite reverse; }
/* blue core glow, breathes */
.ai-orb .orb-core {
  inset: 30%; opacity: .6; mix-blend-mode: screen; filter: blur(7px);
  background: radial-gradient(circle, rgba(102,140,191,.85), rgba(102,140,191,0) 66%);
  animation: orbBreathe 3.6s ease-in-out infinite;
}
/* glossy sphere finish: bright top edge + darker bottom for depth */
.ai-orb .orb-rim {
  inset: 0;
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,.5), inset 0 -16px 30px rgba(11,18,32,.5), inset 0 0 0 1px rgba(255,255,255,.1);
}
@keyframes orbSpin { to { transform: rotate(360deg); } }
@keyframes orbBreathe { 0%,100% { opacity: .45; transform: scale(.9); } 50% { opacity: .75; transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .ai-orb .orb-glow, .ai-orb .orb-blob, .ai-orb .orb-core { animation: none; }
}

/* ============================================================
   v6 — AI band: remove purple glow + livelier orb
   ============================================================ */
html.cine-on .ai-band::after { display: none !important; }            /* purple top-right blob → gone */
html.cine-on .ai-band .eyebrow::before { background: linear-gradient(90deg, var(--blue-accent), transparent); }
/* override old purple orb pulse/float → gentle float only (no purple shadow) */
html.cine-on .ai-band .ai-orb { animation: orbFloat 6.5s ease-in-out infinite; }
@keyframes orbFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
/* rotating conic "energy" sheen inside the sphere → less flat, alive */
html.cine-on .ai-orb::before {
  content: ""; position: absolute; inset: -4%; border-radius: 50%; z-index: 1; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(124,162,222,.6) 55deg, transparent 132deg, rgba(166,128,153,.55) 214deg, transparent 300deg);
  mix-blend-mode: screen; filter: blur(7px); animation: orbSpin 9s linear infinite;
}
/* bright glassy specular highlight (top-left) → 3D sphere read */
html.cine-on .ai-orb::after {
  content: ""; position: absolute; left: 20%; top: 15%; right: auto; bottom: auto; inset: auto;
  width: 30%; height: 22%; border-radius: 50%; z-index: 5; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.92), rgba(255,255,255,0) 70%); filter: blur(2.5px); mix-blend-mode: screen;
}
html.cine-on .ai-orb .orb-rim { z-index: 6; }
@media (prefers-reduced-motion: reduce) {
  html.cine-on .ai-orb::before, html.cine-on .ai-band .ai-orb { animation: none; }
}

/* ============================================================
   v7 — final CTA: marquee-strip gradient + hero download buttons
   ============================================================ */
html.cine-on .cta-final { background: linear-gradient(135deg, #1F385B 0%, #1F385B 48%, #4D2D3D 100%) !important; }
html.cine-on .cta-final::after { background: radial-gradient(circle, rgba(232,160,191,.22), transparent 60%) !important; }
html.cine-on .cta-final .dl-row { justify-content: center; margin-top: 28px; }

/* ============================================================
   v8 — pricing Bireysel/Çift tab toggle
   ============================================================ */
.price-tabs { display: flex; width: max-content; margin: 0 auto clamp(26px, 3.5vw, 40px); gap: 4px; padding: 5px;
  border-radius: 999px; background: rgba(31,56,91,.06); border: 1px solid rgba(31,56,91,.12); }
.price-tab { appearance: none; border: 0; cursor: pointer; padding: 9px 28px; border-radius: 999px;
  font-family: inherit; font-weight: 600; font-size: .92rem; color: var(--text-soft); background: transparent;
  transition: color .25s var(--film-ease), background .25s, box-shadow .25s; }
.price-tab:hover { color: var(--navy); }
.price-tab.is-active { color: #fff; background: linear-gradient(135deg, #1F385B 0%, #4D2D3D 100%); box-shadow: 0 10px 22px -10px rgba(31,56,91,.55); }
.price-note { text-align: center; margin: 22px auto 0; max-width: 60ch; color: var(--text-soft); font-size: .92rem; }

/* ============================================================
   v9 — list ticks align with text + refined pricing cards
   ============================================================ */
/* remove default <ul> left indent so check ticks line up with the heading/paragraph above */
html.cine-on .tour-list, html.cine-on .price-features { padding-left: 0; margin-left: 0; }

/* nicer, evenly-aligned pricing cards */
html.cine-on .pricing-grid { gap: clamp(16px, 1.6vw, 22px); align-items: stretch; }
html.cine-on .price-card {
  padding: 34px 30px; border-radius: 22px;
  background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(31,56,91,.1); box-shadow: 0 18px 46px -26px rgba(31,56,91,.32);
  transition: transform .3s var(--film-ease), box-shadow .3s var(--film-ease);
}
html.cine-on .price-card:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -28px rgba(31,56,91,.42); }
html.cine-on .price-card.featured { background: rgba(255,255,255,.84); box-shadow: 0 34px 70px -26px rgba(31,56,91,.5); }
html.cine-on .price-card.featured::after { background: linear-gradient(140deg, #1F385B, #4D2D3D) !important; }
html.cine-on .price-amount .amt { color: var(--navy); }
html.cine-on .amt-free { font-size: 1.95rem; }
html.cine-on .price-desc { min-height: 48px; }       /* keep CTA buttons on the same line across cards */
/* "Popüler" badge sits ON the card (top-right pill) */
html.cine-on .price-card[data-tag]::before {
  top: 18px; left: auto; right: 18px;
  background: linear-gradient(135deg, #1F385B, #4D2D3D);
}

/* ============================================================
   v10 — pricing: iOS tier colors + badges + row alignment
   ============================================================ */
/* tier icon (leaf/star/crown) replaces the dot, colored like the iOS app */
html.cine-on .price-name::before { display: none; }
html.cine-on .price-name i { font-size: .92em; margin-right: 2px; }
html.cine-on .price-card.tier-free .price-name i { color: #8A8F98; }
html.cine-on .price-card.tier-pro .price-name i { color: #FF8C42; }       /* duosyOrange */
html.cine-on .price-card.tier-premium .price-name i { color: #1B5E20; }   /* duosyPremiumGreen */

/* badges → tier-colored, both Pro (En Popüler) & Premium (En Kapsamlı), on the card */
html.cine-on .price-card.tier-pro[data-tag]::before { background: linear-gradient(135deg, #FF8C42, #F26A2E); }
html.cine-on .price-card.tier-premium[data-tag]::before { background: linear-gradient(135deg, #2E7D32, #1B5E20); }

/* equal-height price row so the divider, button & features line up across all cards */
html.cine-on .price-amount { min-height: 52px; align-items: baseline; }
html.cine-on .amt-free { font-size: 1.85rem; }

/* v10.1 — equalize price row heights so buttons/divider line up exactly */
html.cine-on .price-amount { min-height: 62px; }
html.cine-on .price-desc { min-height: 52px; }