/* ═══════════════════════════════════════════════════════════
   METİN2 MOBİL TANITIM SAYFASI (/metin2-mobil)
   Mobil öncelikli: temel stiller telefon içindir; tablet (≥640px)
   ve masaüstü (≥980px) kırılımları üstüne eklenir.
   Sitenin style.css token'larını (renk, font, gölge) kullanır.
═══════════════════════════════════════════════════════════ */
.mg-page {
  --mg-ink:       #140f09;
  --mg-ink-2:     #211810;
  --mg-cream:     #f3e6c9;
  --mg-cream-dim: rgba(243, 230, 201, .76);
  --mg-line-dark: rgba(243, 230, 201, .14);
  --mg-android:   #3ddc84;
  --mg-overlap:   clamp(44px, 11vw, 130px);
}
.mg-page [hidden] { display: none !important; }
body.mg-noscroll { overflow: hidden; }

.mg-container { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }
.mg-container--narrow { width: min(820px, 100% - 2.5rem); }

.mg-section { padding: 3.5rem 0; }
.mg-section-head { text-align: center; margin-bottom: 2rem; }
.mg-section-head .eyebrow { margin-bottom: .5rem; }
.mg-section-head--row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; text-align: left;
}
.mg-h2 {
  font-family: var(--ff-h);
  font-size: clamp(1.3rem, 5.2vw, 2.3rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--text);
  text-wrap: balance;
}
.mg-h3 {
  font-family: var(--ff-h);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: .8rem;
}

/* Butonlar (site .btn üstüne) */
.mg-btn-lg { min-height: 50px; padding: .85rem 1.6rem; font-size: .76rem; justify-content: center; }
.mg-btn-glass {
  background: rgba(243, 230, 201, .08);
  color: var(--mg-cream);
  border: 1px solid rgba(243, 230, 201, .38);
  backdrop-filter: blur(6px);
}
.mg-btn-glass:hover { background: rgba(243, 230, 201, .16); transform: translateY(-2px); }
.mg-page .btn:focus-visible,
.mg-round-btn:focus-visible,
.mg-shot-btn:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }

.mg-round-btn {
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--bg-card); color: var(--gold-dark);
  border: 1px solid var(--border-s); cursor: pointer;
  box-shadow: var(--shadow); transition: background .2s, transform .2s;
}
.mg-round-btn:hover { background: rgba(184, 146, 42, .1); transform: translateY(-1px); }

/* ═══ HERO ═══════════════════════════════════════════════ */
.mg-hero {
  position: relative;
  isolation: isolate;
  background: var(--mg-ink);
  color: var(--mg-cream);
  text-align: center;
}
.mg-hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.mg-hero-bg,
.mg-hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 24% 35%;
}
.mg-hero-video { opacity: 0; transition: opacity .9s ease; }
.mg-hero-video.is-ready { opacity: 1; }
.mg-hero-media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20,15,9,.55) 0%, rgba(20,15,9,.78) 45%, rgba(20,15,9,.97) 100%);
}

.mg-hero-inner {
  width: min(1100px, 100% - 2.5rem);
  margin-inline: auto;
  padding: 2.75rem 0 0;
}
.mg-hero-copy { max-width: 760px; margin-inline: auto; }

.mg-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--ff-h); font-size: .62rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--mg-cream);
  padding: .4rem .9rem;
  border: 1px solid rgba(243, 230, 201, .25);
  border-radius: 999px;
  background: rgba(20, 15, 9, .45);
  margin-bottom: 1.1rem;
}
.mg-live {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--mg-android);
  box-shadow: 0 0 0 0 rgba(61, 220, 132, .6);
  animation: mgPulse 2.2s ease-out infinite;
}
@keyframes mgPulse {
  0%   { box-shadow: 0 0 0 0 rgba(61, 220, 132, .55); }
  70%  { box-shadow: 0 0 0 .55rem rgba(61, 220, 132, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); }
}

.mg-hero-title {
  font-family: var(--ff-d);
  font-size: clamp(2.3rem, 11.5vw, 5.4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: .01em;
  margin-bottom: 1rem;
  color: #e9c979;
  background: linear-gradient(180deg, #fbeec6 0%, #e2bb62 52%, #a67a22 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 22px rgba(0, 0, 0, .55));
  text-wrap: balance;
}
.mg-hero-lead {
  font-family: var(--ff-s);
  font-style: italic;
  font-size: clamp(1rem, 3.6vw, 1.22rem);
  line-height: 1.6;
  color: var(--mg-cream-dim);
  max-width: 34rem;
  margin: 0 auto 1.7rem;
  text-wrap: pretty;
}
.mg-hero-actions {
  display: flex; flex-direction: column; gap: .7rem;
  width: min(100%, 22rem); margin: 0 auto;
}
.mg-hero-specs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem .9rem;
  margin-top: 1.2rem;
  font-size: .68rem; letter-spacing: .08em;
  color: rgba(243, 230, 201, .62);
  font-variant-numeric: tabular-nums;
}
.mg-hero-specs li + li::before {
  content: '·'; margin-right: .9rem; color: var(--gold-light);
}

/* Telefon çerçevesi — hero'nun altından bir sonraki bölüme taşar */
.mg-phone {
  margin: 2.4rem auto calc(-1 * var(--mg-overlap));
  width: min(100%, 900px);
  position: relative;
  z-index: 2;
}
.mg-phone-body {
  position: relative;
  padding: clamp(6px, 1.25vw, 13px);
  border-radius: clamp(16px, 3.2vw, 36px);
  background: linear-gradient(145deg, #3a2d1f 0%, #16100a 45%, #0b0805 100%);
  box-shadow:
    0 0 0 1px rgba(212, 170, 74, .38),
    0 28px 70px -18px rgba(0, 0, 0, .8),
    0 0 70px -12px rgba(212, 170, 74, .28);
}
.mg-phone-body::before {
  content: '';
  position: absolute;
  left: clamp(2px, .5vw, 5px); top: 50%;
  width: clamp(3px, .55vw, 7px); height: clamp(3px, .55vw, 7px);
  border-radius: 50%;
  background: #000;
  transform: translateY(-50%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.mg-phone-body img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 1280 / 576;
  object-fit: cover;
  border-radius: clamp(11px, 2.3vw, 26px);
  background: #000;
}
/* Telefon varsa ilk bölüm, taşan yüksekliği kadar boşluk bırakır */
.mg-hero--phone + .mg-section { padding-top: calc(var(--mg-overlap) + 3rem); }

/* ═══ GALERİ ═════════════════════════════════════════════ */
.mg-gallery-section { background: var(--bg); overflow: hidden; }
.mg-gallery-nav { display: none; gap: .6rem; flex-shrink: 0; }
.mg-gallery {
  --mg-edge: max(1.25rem, calc((100% - 1200px) / 2));
  list-style: none;
  display: flex; gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--mg-edge);
  padding: .4rem var(--mg-edge) 1.2rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(184, 146, 42, .45) transparent;
  -webkit-overflow-scrolling: touch;
}
.mg-gallery::-webkit-scrollbar { height: 6px; }
.mg-gallery::-webkit-scrollbar-thumb { background: rgba(184, 146, 42, .45); border-radius: 3px; }
.mg-shot { flex: 0 0 min(84%, 560px); scroll-snap-align: start; min-width: 0; }
.mg-shot-btn {
  display: block; width: 100%;
  padding: 0; border: 0; background: #000;
  border-radius: 14px; overflow: hidden;
  cursor: zoom-in;
  box-shadow: var(--shadow-md);
}
.mg-shot-btn img {
  width: 100%; height: auto;
  aspect-ratio: 1280 / 576;
  object-fit: cover;
  transition: transform .45s ease;
}
.mg-shot-btn:hover img { transform: scale(1.035); }
.mg-shot-cap {
  font-size: .72rem; line-height: 1.5;
  color: var(--muted);
  margin-top: .55rem; padding-inline: .15rem;
}

/* ═══ ÖZELLİKLER ═════════════════════════════════════════ */
.mg-features-section { background: var(--bg-card2); }
.mg-features { list-style: none; display: grid; gap: .9rem; grid-template-columns: 1fr; }
.mg-feature {
  position: relative; overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem 1.25rem 1.35rem;
  box-shadow: var(--shadow);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.mg-feature::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0; transition: opacity .25s;
}
.mg-feature:hover { border-color: var(--border-s); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mg-feature:hover::before { opacity: 1; }
.mg-feature-icon {
  display: inline-grid; place-items: center;
  width: 2.8rem; height: 2.8rem;
  font-size: 1.35rem; line-height: 1;
  border-radius: 12px;
  background: rgba(184, 146, 42, .09);
  border: 1px solid rgba(184, 146, 42, .24);
  margin-bottom: .8rem;
}
.mg-feature-title {
  font-family: var(--ff-h);
  font-size: .92rem; font-weight: 700;
  letter-spacing: .02em; line-height: 1.35;
  color: var(--text);
  margin-bottom: .35rem;
}
.mg-feature-desc { font-size: .8rem; line-height: 1.7; color: var(--muted); }

/* ═══ TANITIM METNİ + VİDEO ══════════════════════════════ */
.mg-about-section { background: var(--bg); }
.mg-about { display: grid; gap: 2rem; }
.mg-about:not(.mg-about--video) .mg-prose { margin-inline: auto; }
.mg-prose { max-width: 68ch; min-width: 0; }
.mg-prose h2 {
  font-family: var(--ff-h);
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  font-weight: 700; line-height: 1.3;
  color: var(--text);
  margin: 2.1rem 0 .7rem;
  text-wrap: balance;
}
.mg-prose h2:first-child { margin-top: 0; }
.mg-prose h3 { font-family: var(--ff-h); font-size: 1rem; margin: 1.5rem 0 .5rem; color: var(--text); }
.mg-prose p { font-size: .9rem; line-height: 1.8; color: var(--text); margin-bottom: 1rem; }
.mg-prose ul, .mg-prose ol { margin: 0 0 1.2rem; display: grid; gap: .5rem; }
.mg-prose ul li { position: relative; padding-left: 1.5rem; font-size: .88rem; line-height: 1.65; color: var(--muted); }
.mg-prose ul li::before {
  content: ''; position: absolute; left: .1rem; top: .6em;
  width: .5rem; height: .5rem; transform: rotate(45deg);
  background: var(--gold);
}
.mg-prose ol { list-style: decimal; padding-left: 1.3rem; }
.mg-prose ol li { font-size: .88rem; color: var(--muted); }
.mg-prose a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 3px; }
.mg-prose img { max-width: 100%; height: auto; border-radius: 10px; margin: 1rem 0; }
.mg-prose blockquote { border-left: 3px solid var(--gold); padding-left: 1rem; color: var(--muted); font-style: italic; margin: 1rem 0; }
.mg-prose-cta { margin-top: 1.6rem; }
.mg-video-card { align-self: start; }

/* ═══ DEMO İNDİR ═════════════════════════════════════════ */
.mg-demo-section { background: linear-gradient(180deg, var(--bg) 0%, #f2ead7 100%); scroll-margin-top: calc(var(--nav-h) + .5rem); }
.mg-demo {
  display: grid;
  background: var(--bg-card);
  border: 1px solid var(--border-s);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.mg-demo-main,
.mg-demo-side { padding: 1.5rem 1.25rem 1.75rem; min-width: 0; }
.mg-demo-main .eyebrow { margin-bottom: .45rem; }
.mg-demo-side { background: var(--mg-ink); color: var(--mg-cream); }
.mg-demo-side .mg-h3 { color: var(--gold-light); }

.mg-specs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem; margin: 1.3rem 0 1.4rem;
}
.mg-spec {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .6rem .75rem;
  min-width: 0;
}
.mg-spec dt {
  font-family: var(--ff-h); font-size: .56rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.mg-spec dd {
  font-weight: 600; font-size: .84rem; color: var(--text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.mg-btn-download {
  width: 100%; min-height: 58px;
  justify-content: center;
  font-size: .82rem; letter-spacing: .12em;
  box-shadow: 0 10px 26px -10px rgba(184, 146, 42, .75);
}
.mg-btn-download small {
  font-family: var(--ff-b); font-weight: 500;
  letter-spacing: 0; text-transform: none;
  opacity: .85; margin-left: .3rem; font-size: .78em;
}
.mg-demo-soon { margin: 0; }
.mg-price-note { margin-top: .9rem; font-size: .8rem; line-height: 1.6; color: var(--muted); }
.mg-price-note a { color: var(--gold-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.mg-notes { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed var(--border-s); }
.mg-notes ul { list-style: none; display: grid; gap: .45rem; }
.mg-notes li { position: relative; padding-left: 1.5rem; font-size: .82rem; line-height: 1.55; color: var(--text); }
.mg-notes li::before {
  content: ''; position: absolute; left: .15rem; top: .38em;
  width: .45rem; height: .75rem;
  border: solid var(--green); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.mg-steps { list-style: none; counter-reset: mgstep; display: grid; gap: 1.05rem; }
.mg-steps li {
  counter-increment: mgstep;
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr);
  column-gap: .85rem; align-items: start;
}
.mg-steps li::before {
  content: counter(mgstep);
  grid-row: span 2;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(212, 170, 74, .6);
  background: rgba(212, 170, 74, .08);
  color: var(--gold-light);
  font-family: var(--ff-h); font-size: .8rem; font-weight: 700;
}
.mg-steps strong { font-family: var(--ff-h); font-size: .84rem; letter-spacing: .03em; color: var(--mg-cream); }
.mg-steps span { font-size: .78rem; line-height: 1.6; color: var(--mg-cream-dim); }

.mg-qr {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 1.6rem; padding-top: 1.4rem;
  border-top: 1px solid var(--mg-line-dark);
}
.mg-qr-code { flex: 0 0 116px; width: 116px; height: 116px; padding: 8px; background: #fff; border-radius: 10px; }
.mg-qr-code svg { display: block; width: 100%; height: 100%; }
.mg-qr p { font-size: .78rem; line-height: 1.6; color: var(--mg-cream-dim); }
.mg-qr strong { color: var(--mg-cream); display: block; }

/* ═══ SSS + ETİKETLER ════════════════════════════════════ */
.mg-faq-section { background: var(--bg-card2); padding-bottom: 2.5rem; }
.mg-faq { display: grid; gap: .6rem; }
.mg-faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.mg-faq-item[open] { border-color: var(--border-s); box-shadow: var(--shadow); }
.mg-faq-item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 1rem 3.1rem 1rem 1.1rem;
  font-family: var(--ff-h); font-size: .86rem; font-weight: 600;
  line-height: 1.45; color: var(--text);
  min-height: 3.2rem;
}
.mg-faq-item summary::-webkit-details-marker { display: none; }
.mg-faq-item summary::after {
  content: '+';
  position: absolute; right: 1.1rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.35rem; line-height: 1; color: var(--gold);
  transition: transform .25s;
}
.mg-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.mg-faq-item summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.mg-faq-a { padding: 0 1.1rem 1.1rem; }
.mg-faq-a p { font-size: .84rem; line-height: 1.75; color: var(--muted); }

.mg-tags-section { background: var(--bg-card2); padding: 0 0 3.5rem; }
.mg-tags-title {
  font-family: var(--ff-h); font-size: .66rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .7rem; text-align: center;
}
.mg-tags { justify-content: center; margin-bottom: 0; }

/* ═══ SON ÇAĞRI ══════════════════════════════════════════ */
.mg-final {
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(212, 170, 74, .2), transparent 70%),
    var(--mg-ink);
  color: var(--mg-cream);
  text-align: center;
  padding: 3.5rem 0;
}
.mg-final-title {
  font-family: var(--ff-d);
  font-size: clamp(1.45rem, 6vw, 2.6rem);
  line-height: 1.15;
  color: var(--gold-light);
  text-wrap: balance;
}
.mg-final-text {
  font-family: var(--ff-s); font-style: italic;
  font-size: clamp(.95rem, 3.4vw, 1.1rem);
  color: var(--mg-cream-dim);
  max-width: 44ch; margin: .75rem auto 1.7rem;
}
.mg-final-actions { display: flex; flex-direction: column; gap: .7rem; width: min(100%, 22rem); margin: 0 auto; }

/* ═══ LIGHTBOX ═══════════════════════════════════════════ */
.mg-lightbox {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 4rem .6rem 5.5rem;
  background: rgba(8, 6, 3, .95);
}
.mg-lb-figure { margin: 0; max-width: min(1400px, 100%); }
.mg-lb-figure img {
  display: block; margin: 0 auto;
  max-width: 100%; max-height: calc(100vh - 11rem);
  width: auto; height: auto;
  border-radius: 10px;
}
.mg-lb-figure figcaption {
  margin-top: .8rem; text-align: center;
  font-size: .8rem; line-height: 1.5; color: var(--mg-cream-dim);
}
.mg-lb-close,
.mg-lb-arrow {
  position: absolute;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--mg-cream);
  background: rgba(243, 230, 201, .1);
  border: 1px solid rgba(243, 230, 201, .25);
  cursor: pointer;
  transition: background .2s;
}
.mg-lb-close:hover, .mg-lb-arrow:hover { background: rgba(243, 230, 201, .2); }
.mg-lb-close:focus-visible, .mg-lb-arrow:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }
.mg-lb-close { top: calc(env(safe-area-inset-top, 0px) + .75rem); right: .75rem; }
.mg-lb-arrow { bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); }
.mg-lb-prev { left: calc(50% - 58px); }
.mg-lb-next { right: calc(50% - 58px); }

/* ═══ TABLET ≥ 640px ═════════════════════════════════════ */
@media (min-width: 640px) {
  .mg-section { padding: 4.5rem 0; }
  .mg-section-head { margin-bottom: 2.5rem; }
  .mg-hero-inner { padding-top: 4rem; }
  .mg-hero-actions { flex-direction: row; justify-content: center; width: auto; }
  .mg-gallery-nav { display: flex; }
  .mg-shot { flex-basis: min(62%, 560px); }
  .mg-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
  .mg-feature { padding: 1.5rem 1.5rem 1.6rem; }
  .mg-specs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mg-btn-download { width: auto; padding-inline: 2.4rem; }
  .mg-demo-main, .mg-demo-side { padding: 2rem 2rem 2.2rem; }
  .mg-final { padding: 4.5rem 0; }
  .mg-final-actions { flex-direction: row; justify-content: center; width: auto; }
}

/* ═══ MASAÜSTÜ ≥ 980px ═══════════════════════════════════ */
@media (min-width: 980px) {
  .mg-section { padding: 6rem 0; }
  .mg-hero-inner { padding-top: 5.5rem; }
  .mg-hero-media::after {
    background:
      radial-gradient(ellipse 60% 70% at 50% 38%, rgba(20,15,9,.8) 0%, rgba(20,15,9,.45) 55%, rgba(20,15,9,.2) 80%),
      linear-gradient(180deg, rgba(20,15,9,.35) 0%, rgba(20,15,9,.25) 45%, rgba(20,15,9,.95) 100%);
  }
  .mg-phone { margin-top: 3.2rem; }
  .mg-shot { flex-basis: 520px; }
  .mg-features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .mg-about--video { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3.5rem; align-items: start; }
  .mg-demo { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .mg-demo-main, .mg-demo-side { padding: 2.6rem 2.6rem 2.8rem; }
  .mg-lightbox { padding: 3.5rem 5.5rem; }
  .mg-lb-arrow { bottom: auto; top: 50%; transform: translateY(-50%); }
  .mg-lb-prev { left: 1.25rem; }
  .mg-lb-next { right: 1.25rem; }
  .mg-lb-figure img { max-height: calc(100vh - 8rem); }
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  .mg-live { animation: none; }
  .mg-page *, .mg-page *::before, .mg-page *::after { transition: none !important; }
  .mg-shot-btn:hover img, .mg-feature:hover, .mg-round-btn:hover, .mg-btn-glass:hover { transform: none; }
}

/* ═══ TEST HESABI OLUŞTUR ════════════════════════════════ */
.mg-demo-actions { display: flex; flex-direction: column; gap: .6rem; }
.mg-btn-register {
  width: 100%; min-height: 58px;
  justify-content: center;
  font-size: .82rem; letter-spacing: .12em;
  background: var(--bg-card); color: var(--gold-dark);
  border: 1.5px solid var(--gold);
  padding-inline: .9rem; letter-spacing: .07em; white-space: nowrap;
}
.mg-btn-register:hover { background: #fbf5e6; color: #6f540f; transform: translateY(-2px); box-shadow: 0 8px 22px -12px rgba(184, 146, 42, .7); }

.mg-reg {
  position: fixed; inset: 0; z-index: 2100;
  display: flex; align-items: flex-end; justify-content: center;
}
.mg-reg-backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 8, 5, .6);
  opacity: 0; transition: opacity .3s ease;
}
.mg-reg.is-open .mg-reg-backdrop { opacity: 1; }
.mg-reg-card {
  position: relative;
  width: 100%; max-height: 94vh; max-height: 94dvh;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-card); color: var(--text);
  border-top: 3px solid var(--gold);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -16px 50px rgba(0, 0, 0, .35);
  padding: 1.4rem 1.2rem calc(env(safe-area-inset-bottom, 0px) + 1.2rem);
  transform: translateY(105%);
  transition: transform .38s cubic-bezier(.2, .8, .2, 1);
}
.mg-reg.is-open .mg-reg-card { transform: translateY(0); }
.mg-reg-close {
  position: absolute; top: .55rem; right: .55rem;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: var(--muted); background: transparent; border: 0;
}
.mg-reg-close:hover { background: var(--bg-card2); color: var(--text); }

.mg-reg-kicker {
  font-family: var(--ff-h); font-size: .58rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.mg-reg-title {
  font-family: var(--ff-h); font-size: 1.2rem; font-weight: 700; line-height: 1.25;
  color: var(--text); margin: .2rem 2.6rem .35rem 0; text-wrap: balance;
}
.mg-reg-title:focus { outline: none; }
.mg-reg-lead { font-size: .84rem; line-height: 1.55; color: var(--muted); }
.mg-reg-alert {
  margin-top: .9rem; padding: .7rem .9rem; border-radius: var(--r);
  font-size: .82rem; line-height: 1.5;
  background: var(--red-bg); border: 1px solid var(--red-border); color: var(--red);
}

.mg-reg-form { display: flex; flex-direction: column; gap: .95rem; margin-top: 1.1rem; }
.mg-reg-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mg-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.mg-field label {
  font-family: var(--ff-h); font-size: .62rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.mg-field input {
  width: 100%; min-height: 48px;
  padding: .65rem .85rem;
  font-family: var(--ff-b); font-size: 16px; /* 16px altı iOS'ta sayfayı yakınlaştırır */
  color: var(--text); background: #fff;
  border: 1px solid rgba(0, 0, 0, .18); border-radius: var(--r);
  transition: border-color .2s, box-shadow .2s;
}
.mg-field input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184, 146, 42, .18); }
.mg-field input#mgr-social { font-variant-numeric: tabular-nums; letter-spacing: .18em; }
.mg-field-hint { font-size: .74rem; line-height: 1.45; color: var(--muted); }
.mg-field-err { font-size: .76rem; line-height: 1.45; color: var(--red); }
.mg-field.is-invalid input { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-bg); }
.mg-field.is-invalid .mg-field-hint { display: none; }

.mg-pass { position: relative; }
.mg-pass input { padding-right: 3.2rem; }
.mg-pass-toggle {
  position: absolute; top: 2px; right: 2px; bottom: 2px; width: 44px;
  display: grid; place-items: center; cursor: pointer;
  color: var(--muted); background: transparent; border: 0; border-radius: var(--r);
}
.mg-pass-toggle[aria-pressed="true"] { color: var(--gold-dark); }

.mg-reg-submit { width: 100%; min-height: 52px; justify-content: center; font-size: .8rem; margin-top: .2rem; }
.mg-reg-submit small { font-family: var(--ff-b); font-weight: 500; letter-spacing: 0; text-transform: none; opacity: .85; margin-left: .3rem; }
.mg-reg-submit:disabled { opacity: .7; cursor: progress; transform: none; }
.mg-reg-legal { font-size: .72rem; line-height: 1.5; color: var(--muted); text-align: center; }
.mg-reg-legal a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 2px; }

.mg-reg-check {
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; background: var(--green);
  margin-bottom: .8rem;
}
.mg-reg-summary {
  display: grid; gap: .5rem; margin: 1rem 0;
}
.mg-reg-summary > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .7rem .9rem; border-radius: var(--r);
  background: var(--bg-card2); border: 1px solid var(--border);
}
.mg-reg-summary dt {
  font-family: var(--ff-h); font-size: .58rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.mg-reg-summary dd {
  font-weight: 700; font-size: .95rem; color: var(--text);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-align: right;
}
.mg-reg-done-actions { display: flex; flex-direction: column; gap: .3rem; margin-top: 1.1rem; }
.mg-reg-later {
  min-height: 44px; cursor: pointer; background: none; border: 0;
  font-family: var(--ff-h); font-size: .66rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.mg-reg-later:hover { color: var(--text); }
.mg-reg-close:focus-visible, .mg-pass-toggle:focus-visible, .mg-reg-later:focus-visible,
.mg-reg-legal a:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }

@media (min-width: 640px) {
  .mg-demo-actions { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  .mg-btn-register { width: auto; padding-inline: 2rem; letter-spacing: .12em; }
  .mg-reg { align-items: center; padding: 1.25rem; }
  .mg-reg-card {
    width: min(460px, 100%); max-height: calc(100vh - 2.5rem);
    border-radius: 16px;
    padding: 1.8rem 1.9rem 1.7rem;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
    transform: translateY(16px) scale(.98); opacity: 0;
    transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
  }
  .mg-reg.is-open .mg-reg-card { transform: none; opacity: 1; }
  .mg-reg-title { font-size: 1.35rem; }
}
@media (max-width: 639px) and (max-height: 700px) {
  .mg-reg-card { padding-top: 1.1rem; }
  .mg-reg-lead { display: none; }
  .mg-reg [data-reg-view="done"] .mg-reg-lead { display: block; }
  .mg-reg-form { gap: .75rem; margin-top: .8rem; }
  .mg-field-hint { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mg-reg-card, .mg-reg-backdrop { transition: none !important; }
  .mg-btn-register:hover { transform: none; }
}