:root, [data-theme="light"] {
  --yellow: #ffe101;
  --yellow-2: #f5c400;
  --black: #111111;
  --bg: #ffffff;
  --bg-2: #f7f4e6;
  --ink: #111111;
  --muted: #5c5640;
  --line: #ece6c8;
  --accent: #ffe101;
  --accent-ink: #111111;
  --cyan: #ffe101;
  --teal: #c9a200;
  --navy: #111111;
  --gold: #ffe101;
  --gold-2: #f5c400;
  --pink: #111111;
  --card: #ffffff;
  --nav: #ffffff;
  --topbar: #fff8d6;
  --hero: linear-gradient(110deg, #ffe101 0%, #ffd400 48%, #e6b800 100%);
  --hero-ink: #111111;
  --hero-muted: rgba(17,17,17,.78);
  --cta: linear-gradient(110deg, #111111 0%, #2a2308 100%);
  --cta-ink: #ffe101;
  --shadow: 0 12px 30px rgba(17,17,17,.08);
  --font: "Nunito", system-ui, sans-serif;
}
[data-theme="dark"] {
  --bg: #111111;
  --bg-2: #1a1a1a;
  --ink: #f6f3e4;
  --muted: #b8b08a;
  --line: #333018;
  --accent: #ffe101;
  --accent-ink: #111111;
  --cyan: #ffe101;
  --teal: #ffe101;
  --navy: #ffe101;
  --gold: #ffe101;
  --gold-2: #f5c400;
  --pink: #ffe101;
  --card: #1c1c1c;
  --nav: #161616;
  --topbar: #0d0d0d;
  --hero: linear-gradient(110deg, #111111 0%, #1c1808 52%, #2a2300 100%);
  --hero-ink: #ffe101;
  --hero-muted: rgba(255,225,1,.78);
  --cta: linear-gradient(110deg, #ffe101 0%, #f5c400 100%);
  --cta-ink: #111111;
  --shadow: 0 12px 30px rgba(0,0,0,.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* hidden ozniteligi her zaman gizlesin.
   Buton ve kart siniflarimiz display: inline-flex / grid tanimladigi icin
   tarayicinin varsayilan [hidden] kurali eziliyordu; sihirbazin son adiminda
   islevsiz "Devam" butonu bu yuzden ekranda kaliyordu. */
[hidden] { display: none !important; }
/* Yatay tasma kalkani html'de duruyor, body'de DEGIL.
   body'ye overflow-x: hidden verildiginde CSS kurali geregi overflow-y
   de "auto"ya donusuyor ve body kendi kaydirma kabi oluyor. iOS Safari
   bu ic ice kaydiriciyi dogru yonetemedigi icin sayfa parmakla
   kaydirilamiyor, takilmis gibi duruyordu. Kokte tutunca belge
   kaydiricisi tarayicinin kendi kaydiricisi olarak kaliyor. */
html { scroll-behavior: smooth; color-scheme: light; overflow-x: hidden; }
[data-theme="dark"] { color-scheme: dark; }
html, body { background: var(--bg); color: var(--ink); }
body { font-family: var(--font); line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

.wrap { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.ico { display: inline-flex; color: var(--accent); vertical-align: middle; }
.ico svg { display: block; }
/* Ikon kabi <i> kendi rengini tanimladiginda icteki .ico onu devralsin.
   Yukaridaki ".ico" kurali .ico'yu dogrudan hedefledigi icin normal
   devralma islemiyordu; ikon, kabin rengine bakmadan sari kaliyor ve
   sari/krem zeminlerde hic gorunmuyordu. Bu tek kural .icon-row,
   .trust-strip, .order-flow, .product-facts ve .market-empty
   kutularindaki ikonlarin hepsini duzeltir. */
i > .ico { color: inherit; }

.label {
  color: var(--teal);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .45rem;
}
.label.light { color: var(--hero-muted); }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.03em; color: var(--ink); }
h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; }
h3 { font-size: 1.05rem; font-weight: 800; }
.lead { color: var(--muted); max-width: 46ch; font-size: 1.02rem; }
.lead.light { color: var(--hero-muted); }
.text-link { color: var(--ink); font-weight: 800; border-bottom: 2px solid var(--accent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 1.35rem; border: 0; border-radius: 999px;
  font-weight: 800; font-size: .9rem; cursor: pointer;
}
.btn-pink, .btn-gold, .btn-cyan, .btn-accent {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow);
}
.btn-white, .btn-ghost-hero {
  background: var(--black);
  color: var(--yellow);
}
[data-theme="dark"] .btn-white,
[data-theme="dark"] .btn-ghost-hero {
  background: var(--yellow);
  color: var(--black);
}
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-outline-light { background: transparent; color: var(--hero-ink); border: 2px solid var(--hero-ink); }
.btn-light { background: var(--card); color: var(--ink); }
.btn-sm { min-height: 38px; padding: 0 1rem; font-size: .82rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.3rem; }

.topbar { background: var(--topbar); border-bottom: 1px solid var(--line); font-size: .78rem; font-weight: 700; }
.topbar-inner { display: flex; justify-content: space-between; gap: 1rem; padding: .38rem 0; color: var(--muted); align-items: center; }
.topbar-left { display: flex; gap: .45rem; flex-wrap: wrap; }
.topbar-left a, .topbar-ig {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 28px;
  padding: 0 .7rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card);
}
.topbar-left a .ico svg, .topbar-ig .ico svg { width: 14px; height: 14px; }
.topbar a:hover { color: var(--ink); background: var(--bg); border-color: var(--line); }

.nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--nav);
  background: color-mix(in srgb, var(--nav) 88%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(17,17,17,.06);
}
.nav:after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--yellow) 18%, var(--yellow-2) 82%, transparent);
  pointer-events: none;
}
.nav-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .9rem;
  padding: .62rem 0;
}
.nav-brand { display: flex; align-items: center; gap: .7rem; color: var(--ink); }
.nav-logo {
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--yellow);
  box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--yellow);
}
.nav-tools { display: flex; align-items: center; gap: .55rem; justify-self: end; }
.theme-toggle {
  width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); cursor: pointer; font-size: 1.05rem;
  box-shadow: 0 4px 12px rgba(17,17,17,.05);
}
.theme-toggle:hover { border-color: var(--yellow-2); background: var(--bg-2); }
[data-theme="light"] .theme-toggle-sun,
[data-theme="dark"] .theme-toggle-moon { display: none; }
.nav-brand img { width: 44px; height: 44px; border-radius: 50%; }
.nav-brand span { display: grid; line-height: 1.1; }
.nav-brand b { font-size: 1.08rem; letter-spacing: -.02em; }
.nav-brand small { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nav-links { display: flex; justify-content: center; }
.nav-menu {
  display: flex; align-items: center; gap: .38rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.nav-menu a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 .95rem;
  color: var(--ink);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .015em;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 4px 12px rgba(17,17,17,.05);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}
.nav-menu a:hover {
  background: var(--yellow);
  color: var(--black);
  border-color: var(--yellow);
  box-shadow: 0 8px 18px rgba(255,225,1,.32);
  transform: translateY(-1px);
}
.nav-menu a.is-active {
  background: var(--yellow);
  color: var(--black);
  border-color: #ead000;
  box-shadow: 0 8px 18px rgba(255,225,1,.38);
}
[data-theme="dark"] .nav-menu a {
  background: #1a1a1a;
  border-color: #3a3618;
  color: #f3efd8;
}
[data-theme="dark"] .nav-menu a:hover,
[data-theme="dark"] .nav-menu a.is-active {
  background: var(--yellow);
  color: #111;
  border-color: var(--yellow);
}
/* ---- 97 Market butonu: akan gradient + periyodik parlama ---- */
.btn-market {
  position: relative;
  overflow: hidden;
  border: 0;
  color: var(--yellow);
  background: linear-gradient(115deg, #111111 0%, #3a3208 25%, #6b5a06 50%, #3a3208 75%, #111111 100%);
  background-size: 280% 100%;
  animation: marketFlow 7s linear infinite;
  box-shadow: 0 6px 18px rgba(17, 17, 17, .22);
}
.btn-market:hover { color: #fff; animation-duration: 2.5s; }
.btn-market .ico { position: relative; z-index: 2; }
.btn-market .ico svg { width: 18px; height: 18px; }
/* Butonun üzerinden düzenli aralıkla geçen ışık huzmesi */
.btn-market:after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 225, 1, .55), transparent);
  transform: skewX(-18deg);
  animation: marketShine 3.6s ease-in-out infinite;
  pointer-events: none;
}
.btn-market.is-active { box-shadow: 0 0 0 2px var(--yellow), 0 6px 18px rgba(17, 17, 17, .22); }
@keyframes marketFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 280% 50%; }
}
@keyframes marketShine {
  0%, 62% { left: -60%; }
  100% { left: 130%; }
}

/* ---- Bölümlerin ekrana girerken animasyonla gelmesi ----
   .reveal sınıfı JS tarafından eklenir; JS kapalıysa hiçbir şey gizlenmez. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.22, .88, .3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal.is-in { will-change: auto; }

/* Hareket azaltma tercihi: tüm süsleme animasyonlarını durdur */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero, .hero-photo:before, .hero-photo:after,
  .btn-market, .btn-market:after { animation: none; }
  .hero-photo:after { opacity: 0; }
}

.nav-cta.is-active { border-color: var(--accent); color: var(--ink); background: var(--bg-2); }

/* Onam Formu: sarı ana butonla yarışmayan, çerçeveli ikincil aksiyon */
.btn-onam {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
  gap: .4rem;
}
.btn-onam:hover { background: var(--accent); color: var(--accent-ink); }
.btn-onam.is-active { background: var(--accent); color: var(--accent-ink); }
.btn-onam .ico svg { width: 18px; height: 18px; }
.nav-cta {
  min-height: 42px;
  padding: 0 1.1rem;
  border-radius: 12px;
  letter-spacing: .02em;
}
.nav-toggle {
  display: none; width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card); justify-self: end;
  box-shadow: 0 4px 12px rgba(17,17,17,.05);
}
.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after {
  display: block; height: 2px; background: var(--ink); position: relative; width: 18px;
}
.nav-toggle span:before, .nav-toggle span:after { content: ""; position: absolute; left: 0; right: 0; }
.nav-toggle span:before { top: -7px; } .nav-toggle span:after { top: 7px; }
.nav-mobile-only { display: none; }

.hero {
  position: relative;
  padding: 2.4rem 0 2.8rem;
  overflow: hidden;
  background: var(--hero);
  /* Zemin gradyanı yavaşça kayarak canlı bir ışık hissi verir */
  background-size: 220% 220%;
  animation: heroFlow 16s ease-in-out infinite alternate;
}
@keyframes heroFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.hero:before, .hero:after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.hero:before { width: 280px; height: 280px; left: -80px; bottom: -90px; background: rgba(17,17,17,.08); }
.hero:after { width: 180px; height: 180px; right: 18%; top: -50px; background: rgba(255,225,1,.22); }
[data-theme="dark"] .hero:before { background: rgba(255,225,1,.1); }
[data-theme="dark"] .hero:after { background: rgba(255,225,1,.16); }
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.4rem; align-items: center;
}
.hero-copy h1 { color: var(--hero-ink); max-width: 13ch; }
.hero-stage { position: relative; z-index: 1; }
.hero-stage .carousel-viewport { overflow: hidden; border-radius: 0; box-shadow: none; }
.hero-stage .carousel-track { gap: 0; }
.hero-stage .hero-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 2.4rem;
  align-items: center;
  cursor: default;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  text-align: left;
}
/* Hero görselinin üzerinden geçen parlaklık huzmesi */
.hero-photo {
  position: relative;
  border-radius: 36px;
  isolation: isolate;
}
.hero-photo:before {
  content: ""; position: absolute; inset: -14px; z-index: -1; border-radius: 44px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255, 255, 255, .55), transparent 70%);
  animation: heroGlow 5.5s ease-in-out infinite;
  pointer-events: none;
}
.hero-photo:after {
  content: ""; position: absolute; inset: 0; border-radius: 36px; overflow: hidden;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  background-size: 280% 100%;
  background-repeat: no-repeat;
  animation: heroShine 5.5s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
}
@keyframes heroGlow {
  0%, 100% { opacity: .35; transform: scale(.97); }
  50% { opacity: .7; transform: scale(1.02); }
}
@keyframes heroShine {
  0% { background-position: 180% 0; }
  55%, 100% { background-position: -80% 0; }
}
.hero-photo img {
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  object-position: center;
  border-radius: 36px;
  box-shadow: var(--shadow);
  display: block;
}
.hero-stage .carousel-dots { margin-top: 0; }

/* Hero kontrol şeridi: oklar ve noktalar metnin altında ortada durur */
.hero-controls {
  display: flex; align-items: center; justify-content: center;
  gap: .9rem; margin-top: 1.1rem;
}
.hero-controls .carousel-btn {
  position: static; transform: none;
  width: 38px; height: 38px; font-size: 1.2rem;
}
.hero-controls .carousel-btn:hover { transform: scale(1.08); }
.round-photo { border-radius: 32px; overflow: visible; }
.round-photo > img { width: 100%; height: 360px; object-fit: cover; border-radius: 32px; box-shadow: var(--shadow); }
.slider-about .carousel-viewport { border-radius: 32px; box-shadow: var(--shadow); }
.slider-about .carousel-track { gap: 0; }
.slider-about .carousel-slide {
  flex: 0 0 100%;
  cursor: default;
  border-radius: 0;
  box-shadow: none;
}
.slider-about .carousel-slide img { height: 360px; }

.band { padding: 4rem 0; background: var(--bg); position: relative; }
.band.soft { background: var(--bg-2); }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.6rem; }
.sec-head.center { flex-direction: column; align-items: center; text-align: center; }

.group-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.group-card {
  background: var(--card);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.group-media { background: var(--bg-2); padding: 1.2rem .8rem; }
.group-media.is-gif img { width: 100%; height: auto; object-fit: contain; }
.group-foot { padding: 1rem 1rem 1.1rem; color: #fff; }
.group-foot span { display: block; font-size: .78rem; opacity: .9; }
.tone-ink { background: #111; color: #ffe101; }
.tone-gold { background: #ffe101; color: #111; }
.tone-char { background: #2a2a2a; color: #ffe101; }
.tone-amber { background: #c9a200; color: #111; }

.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.about-split p { color: var(--muted); margin: .7rem 0 1rem; }
.check-list { list-style: none; display: grid; gap: .5rem; margin: 0 0 1.3rem; }
.check-list li { display: flex; align-items: center; gap: .45rem; }

.icon-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.icon-row article { text-align: center; padding: .4rem; }
.icon-row i {
  width: 72px; height: 72px; margin: 0 auto .7rem;
  display: grid; place-items: center;
  border-radius: 50%;
  /* Dolu sari daire + koyu ikon. Onceki hali (soluk krem zemin + sari ikon)
     acik temada neredeyse gorunmuyordu, cunku --bg-2 ile --accent'in
     parlaklik farki cok azdi. */
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 8px 18px rgba(255, 225, 1, .38);
}
.icon-row p { color: var(--muted); font-size: .9rem; }

.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.svc-card, .work-card, .course-card, .why-card, .glass-card, .form, .form-layout > aside, .post-tease {
  background: var(--card);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.svc-card { padding-bottom: 1rem; }
.svc-media { aspect-ratio: 16/10; }
.svc-media img, .work-media img, .course-media img { width: 100%; height: 100%; object-fit: cover; }
.svc-card h3, .work-card h3 { margin: .8rem 1rem 0; }
.svc-card p, .work-card p { color: var(--muted); margin: .25rem 1rem 0; font-size: .88rem; }
.time-list { list-style: none; margin: .7rem 1rem 0; }
.time-list li { padding: .3rem 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
.time-list b { color: var(--teal); margin-right: .3rem; }

.faq-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; align-items: start; }
details { border-bottom: 1px solid var(--line); padding: .75rem 0; }
summary { cursor: pointer; font-weight: 800; }
details p { color: var(--muted); margin-top: .35rem; }
.shot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.shot-grid.compact { grid-template-columns: 1fr 1fr; }
.shot-grid figure { overflow: hidden; border-radius: 20px; aspect-ratio: 4/3; }
.shot-grid img { width: 100%; height: 100%; object-fit: cover; }

.cta-bar {
  background: var(--cta);
  color: var(--cta-ink);
}
.cta-bar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 2.4rem 0; }
.cta-bar h2, .cta-bar .label.light { color: var(--cta-ink); }

.footer { background: var(--bg-2); padding: 2.6rem 0 0; color: var(--muted); }
.footer-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr 1fr; gap: 1.4rem; padding-bottom: 1.4rem; }
.footer-logo { width: 52px; border-radius: 50%; margin-bottom: .6rem; }
.footer h3 { color: var(--ink); margin-bottom: .45rem; }
.footer a { display: block; padding: .16rem 0; }
.footer a:hover { color: var(--yellow-2); }
.footer-copy { background: #111; color: var(--yellow); }
.footer-copy .wrap { display: flex; justify-content: space-between; padding: .75rem 0; font-size: .8rem; }

.page-hero { background: var(--bg-2); padding: 2.2rem 0 1.6rem; }
.page-hero h1 { color: var(--ink); }
.section { padding: 2.2rem 0 3rem; background: var(--bg); }
.rich { color: var(--muted); max-width: 760px; }
.rich p + p, .rich h3 { margin-top: 1rem; }
.rich h3 { color: var(--ink); }
.prose-wide { max-width: 800px; }
.mv-grid, .course-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; }
.contact-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  align-content: start;
}
.contact-btn {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 92px;
  padding: .9rem 1rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 8px 20px rgba(17,17,17,.06);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.contact-btn-ico {
  flex: 0 0 48px;
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: var(--yellow);
  color: var(--black);
  box-shadow: 0 6px 14px rgba(255,225,1,.35);
}
.contact-btn-ico .ico { color: var(--black); }
.contact-btn-copy { min-width: 0; display: grid; gap: .12rem; }
.contact-btn em {
  color: var(--muted);
  font-style: normal;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 800;
}
.contact-btn strong {
  display: block;
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.contact-btn small {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
}
.contact-btn:hover {
  background: var(--yellow);
  border-color: #ead000;
  color: var(--black);
  box-shadow: 0 12px 24px rgba(255,225,1,.32);
  transform: translateY(-2px);
}
.contact-btn:hover em,
.contact-btn:hover strong,
.contact-btn:hover small { color: var(--black); }
.contact-btn:hover .contact-btn-ico {
  background: var(--black);
  color: var(--yellow);
  box-shadow: none;
}
.contact-btn:hover .contact-btn-ico .ico { color: var(--yellow); }
[data-theme="dark"] .contact-btn {
  background: #1a1a1a;
  border-color: #3a3618;
}
.glass-card, .form, .form-layout > aside, .post-tease { padding: 1.2rem; }
.form-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.2rem; }
.form { display: grid; gap: .75rem; position: relative; }
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form label { display: grid; gap: .3rem; color: var(--muted); font-size: .88rem; }
.form input, .form select, .form textarea {
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: .75rem .85rem; color: var(--ink);
  /* min-width:0 sart: tarayicinin varsayilan input genisligi (~180px) grid
     hucresinin en kucuk boyutunu belirledigi icin mobilde iki kolonlu
     satirlar ekrani tasirip sayfayi yatay kaydiriyordu. */
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
/* Yari genislikli alanlarin bulundugu satir da kucule bilsin */
.form-2 > * { min-width: 0; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--accent); }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.alert { padding: .7rem .85rem; border-radius: 12px; }
.alert.ok { background: #e8f7ea; color: #1f7a36; }
.alert.err { background: #fdeeee; color: #b42323; }
.tiny { color: var(--muted); font-size: .86rem; margin-top: .8rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.chip { border: 1px solid var(--line); padding: .4rem .8rem; color: var(--muted); font-size: .86rem; border-radius: 999px; }
.chip.is-on, .chip:hover { border-color: var(--accent); color: var(--ink); background: var(--bg-2); }
.facility-list { display: grid; gap: 1.6rem; }
.facility-row { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.4rem; align-items: center; }
.facility-media img, .facility-media.xl img { width: 100%; min-height: 220px; max-height: 260px; object-fit: cover; border-radius: 24px; }
.facility-row em { color: var(--teal); font-style: normal; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; }
.facility-row p { color: var(--muted); margin: .4rem 0; }
.style-single { display: grid; gap: 1rem; }
.style-hero-gif, .style-hero-gif.is-gif, .work-media.is-gif {
  background: var(--bg-2);
  padding: 1.4rem 1rem;
  border-radius: 22px;
}
.style-hero-gif img, .work-media.is-gif img, .course-media.is-gif img {
  width: 100%; height: auto; object-fit: contain; margin: 0 auto;
}
.article-cover { width: 100%; border-radius: 22px; max-height: 380px; object-fit: cover; margin-bottom: 1rem; }
.gallery-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.gallery-mosaic figure { aspect-ratio: 4/3; overflow: hidden; border-radius: 20px; }
.gallery-mosaic img { width: 100%; height: 100%; object-fit: cover; }
.post-list { display: grid; gap: .8rem; }
.post-tease { padding: 1.1rem; }
.post-tease span { color: var(--teal); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; }
.post-tease h2, .post-tease h3 { margin: .3rem 0 .4rem; }
.post-tease p { color: var(--muted); }
.kicker { color: var(--teal); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; margin-bottom: .35rem; }
.display, .display-sm, .h2 { color: var(--ink); }
.display { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; }
.display-sm { font-size: clamp(1.6rem, 2.8vw, 2.1rem); font-weight: 800; }
.display em, .display-sm em { color: var(--yellow-2); font-style: normal; }
.deck { color: var(--muted); }
.course-info { margin-bottom: 1rem; }
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.work-media, .course-media { background: var(--bg-2); }
.work-card { padding-bottom: .9rem; }
.work-media i, .work-card em { display: none; }

.float-emojis { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.float-emojis span {
  position: absolute; font-size: 1.15rem; opacity: .22;
  animation: emoji-float ease-in-out infinite;
}
.float-emojis span:nth-child(1) { left: 8%; top: 22%; animation-duration: 28s; }
.float-emojis span:nth-child(2) { left: 78%; top: 18%; animation-duration: 32s; }
.float-emojis span:nth-child(3) { left: 14%; top: 68%; animation-duration: 30s; }
.float-emojis span:nth-child(4) { left: 86%; top: 62%; animation-duration: 34s; }
@keyframes emoji-float {
  0%, 100% { transform: translate3d(0, 8px, 0); }
  50% { transform: translate3d(8px, -12px, 0); }
}
@media (prefers-reduced-motion: reduce) { .float-emojis { display: none; } }
@media (max-width: 980px) { .float-emojis { display: none; } }

.wa-float {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 35;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; background: #25d366; color: #062;
}

.btn-lg { min-height: 52px; padding: 0 1.6rem; font-size: 1rem; }
.register-aside { align-self: start; position: sticky; top: 88px; }
.register-aside .btn { width: 100%; margin-top: .45rem; }

/* Ön başvuru sayfasının altındaki "2. adım: veli onay formu" kutusu */
.next-step {
  margin-top: 1.4rem;
  display: grid; grid-template-columns: 1fr auto; gap: 1.2rem; align-items: center;
}
.next-step h2 { margin: .2rem 0 .35rem; font-size: 1.35rem; }
.next-step p { margin: 0; color: var(--muted); }
.next-step .btn { white-space: nowrap; }
@media (max-width: 700px) {
  .next-step { grid-template-columns: 1fr; }
  .next-step .btn { width: 100%; }
}

.wizard-form { gap: 1rem; min-height: 420px; }
.wizard-progress { display: grid; gap: .45rem; }
.wizard-progress span { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wizard-bar { height: 6px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.wizard-bar i { display: block; height: 100%; width: 8%; background: var(--accent); border-radius: 99px; transition: width .35s ease; }
.wizard-step { display: none; gap: .55rem; min-height: 220px; align-content: start; }
.wizard-step.is-on { display: grid; animation: wizardIn .38s ease; }
.wizard-step.is-back { animation-name: wizardOut; }
.wizard-step h2 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); }
.wizard-help { color: var(--muted); max-width: 46ch; }
.wizard-bullets { list-style: none; display: grid; gap: .35rem; color: var(--muted); margin-top: .4rem; }
.wizard-bullets li { padding-left: 1.1rem; position: relative; }
.wizard-bullets li:before { content: ""; position: absolute; left: 0; top: .55rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); }
/* "Bu salona basvur" ile gelindiginde giris ekraninda gorunen secim satiri.
   Salon adimi atlandigi icin secimin gorunur ve geri alinabilir olmasi sart. */
/* Salon kartindaki sezon uyarisi: "(1 Haziran - 1 Ekim arasi aciktir)".
   Dikkat cekmeli ama kartin ana bilgisinin onune gecmemeli. */
.facility-note {
  display: flex; align-items: flex-start; gap: .4rem;
  margin-top: .7rem; padding: .5rem .7rem;
  border-radius: 12px; border: 1px dashed var(--accent);
  background: var(--bg-2); color: var(--ink);
  font-size: .9rem; line-height: 1.4;
}
/* Ikon rengi --ink: sari zeminde de koyu zeminde de okunur kalir. */
.facility-note .ico { color: var(--ink); flex: 0 0 auto; margin-top: .1rem; }
.facility-note b { font-weight: 800; }

.wizard-secili {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin-top: .8rem; padding: .6rem .8rem;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg-2); font-size: .92rem; font-weight: 700;
}
/* Tiklanabilir oldugu anlasilsin diye altini ciziyoruz; renk --ink
   kaldigi icin acik ve koyu temada da okunur. */
.wizard-secili .text-link {
  background: none; border: 0; padding: 0;
  font: inherit; font-weight: 800; cursor: pointer; color: inherit;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 2px; text-decoration-color: var(--accent);
}
.wizard-secili .text-link:hover { text-decoration-color: currentColor; }
.wizard-control input, .wizard-control select, .wizard-control textarea { width: 100%; font-size: 1.05rem; }
.wizard-nav { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .4rem; }
.wizard-nav .btn-lg { flex: 1; }
.wizard-step.is-shake { animation: wizardShake .38s ease; }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; }
.choice { display: grid; cursor: pointer; position: relative; }
.choice input {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; padding: 0; margin: 0; border: 0;
}
.choice span {
  display: grid; place-items: center; text-align: center;
  min-height: 64px; padding: .85rem 1rem; border-radius: 16px;
  border: 2px solid var(--line); background: var(--bg); font-weight: 800;
  transition: border-color .15s, background .15s, transform .15s;
}
.choice:hover span { border-color: var(--accent); }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice input:checked + span {
  border-color: var(--black); background: var(--accent); color: var(--accent-ink);
  box-shadow: var(--shadow);
}
[data-theme="dark"] .choice input:checked + span { border-color: var(--accent); }
.wizard-summary { list-style: none; display: grid; gap: .45rem; margin: .2rem 0 .6rem; }
.wizard-summary li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .7rem .85rem; border-radius: 14px; background: var(--bg-2);
  font-size: .92rem;
}
.wizard-summary span { color: var(--muted); flex: 0 1 auto; }
/* Uzun ve bosluksuz bir cevap (orn. yanlis yazilmis telefon) satiri
   tasirmasin: kelime gerekirse ortadan bolunur. */
.wizard-summary b {
  text-align: right; min-width: 0; flex: 1 1 auto;
  overflow-wrap: anywhere; word-break: break-word;
}
.wizard-captcha label { margin-top: .4rem; }

.site-popup { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; }
.site-popup[hidden] { display: none; }
.site-popup-backdrop {
  position: absolute; inset: 0; background: rgba(17,17,17,.55);
  backdrop-filter: blur(6px);
}
.site-popup-card {
  position: relative; z-index: 1; width: min(560px, 100%);
  /* Kart ekrandan uzun olursa kendi içinde kaydırılsın.
     Sınır yokken küçük telefonlarda kart ekranı aşıyor, kapatma düğmesi
     ekranın dışında kalıyor ve popup kapatılamadığı için sayfa
     kaydırılamıyordu (gövde kilidi açılmıyordu). */
  max-height: min(92vh, 860px); overflow: hidden auto;
  background: var(--card); border-radius: 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,.28);
  animation: popupIn .4s ease;
}
.site-popup-x {
  /* sticky + float: kart içi kaydırmada da hep görünür kalır. */
  position: sticky; top: .7rem; float: right; z-index: 2;
  margin: .7rem .7rem 0 0;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.92); color: #111; font-size: 1.4rem; cursor: pointer;
  box-shadow: 0 2px 10px rgba(17,17,17,.22);
}
.site-popup-media { aspect-ratio: 16/8; background: var(--bg-2); }
.site-popup-media img { width: 100%; height: 100%; object-fit: cover; }
.site-popup-body { padding: 1.3rem 1.4rem 1.5rem; }
.site-popup-body p { color: var(--muted); margin: .35rem 0 0; }
.site-popup-offer .site-popup-media { aspect-ratio: 16/10; }
.site-popup-announce .site-popup-media { display: none; }

.m-dock { display: none; }

.gallery-mosaic figure { position: relative; }
.gallery-hit {
  display: block; width: 100%; height: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in; color: inherit;
}
.gallery-mosaic figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .55rem .75rem;
  background: linear-gradient(transparent, rgba(17,17,17,.72));
  color: #fff; font-size: .8rem; font-weight: 800;
  pointer-events: none;
}

.carousel { position: relative; }
.carousel-viewport { overflow: hidden; border-radius: 28px; }
.carousel-track {
  display: flex; gap: .8rem;
  transition: transform .45s ease;
}
.carousel-slide {
  flex: 0 0 78%;
  position: relative; border: 0; padding: 0; background: none;
  border-radius: 28px; overflow: hidden; cursor: zoom-in;
  box-shadow: var(--shadow);
}
.carousel-slide img { width: 100%; height: 380px; object-fit: cover; display: block; }
.carousel-slide span {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .8rem 1rem;
  background: linear-gradient(transparent, rgba(17,17,17,.7));
  color: #fff; font-weight: 800; text-align: left;
}
.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-size: 1.5rem; cursor: pointer; z-index: 2;
  box-shadow: var(--shadow);
}
.carousel-btn.is-prev { left: .6rem; }
.carousel-btn.is-next { right: .6rem; }
.carousel-dots { display: flex; justify-content: center; gap: .4rem; margin-top: .9rem; }
.carousel-dots button {
  width: 8px; height: 8px; border-radius: 99px; border: 0;
  background: var(--line); cursor: pointer; padding: 0;
}
.carousel-dots button.is-on { width: 22px; background: var(--accent); }

/* ---- Kursiyer galerisi: üç görsel yan yana, üstte altyazı ---- */
.slider-students .carousel-viewport { border-radius: 26px; }
.slider-students .carousel-track { gap: 1rem; }
.slider-students .carousel-slide {
  flex: 0 0 calc((100% - 2rem) / 3);
  border-radius: 26px;
  transition: transform .35s ease;
}
.slider-students .carousel-slide img { height: 320px; }
.slider-students .carousel-slide:hover { transform: translateY(-6px); }
.slider-students .carousel-slide span {
  padding: 1.6rem 1rem .9rem;
  background: linear-gradient(transparent, rgba(17,17,17,.82));
  font-size: .95rem;
}
.slider-students.is-single .carousel-slide { flex: 0 0 100%; }
.sec-lead { color: var(--muted); margin-top: .4rem; max-width: 520px; }

/* ---- Salon fotograf carousel'i: tek gorselin kapladigi alanin aynisi ---- */
.slider-facility .carousel-viewport { border-radius: 24px; box-shadow: var(--shadow); }
.slider-facility .carousel-track { gap: 0; }
.slider-facility .carousel-slide { flex: 0 0 100%; border-radius: 24px; }
.slider-facility .carousel-slide img { height: 260px; min-height: 220px; }
.slider-facility .carousel-btn { width: 34px; height: 34px; font-size: 1.1rem; }
.slider-facility .carousel-dots { margin-top: .6rem; }

/* ---- 97 Market ---- */
.market-hero .kicker { display: inline-flex; align-items: center; gap: .4rem; }
.market-hero .kicker .ico svg { width: 18px; height: 18px; }

/* Guven seridi: orijinal urun / tek mesajla siparis / salondan teslim / degisim */
.trust-strip {
  list-style: none; padding: 0; margin: 1.6rem 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem;
}
.trust-strip li {
  display: flex; align-items: center; gap: .65rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: .7rem .85rem;
}
.trust-strip i {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; background: var(--bg-2); color: var(--teal);
}
.trust-strip span { display: grid; line-height: 1.25; font-size: .78rem; color: var(--muted); }
.trust-strip b { font-size: .88rem; color: var(--ink); }

.market-filters { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.6rem; }
.market-filters .chip { display: inline-flex; align-items: center; gap: .35rem; }
.market-filters .chip .ico svg { width: 16px; height: 16px; }
/* Beyaz zeminde sari ikon soluk kaliyor; koyu altin ton okunur oluyor. */
.market-filters .chip .ico { color: var(--teal); }

/* Urun bulunamadi durumu */
.market-empty {
  text-align: center; padding: 3rem 1.2rem;
  border: 1px dashed var(--line); border-radius: 24px; background: var(--card);
}
.market-empty i { display: inline-grid; place-items: center; color: var(--muted); margin-bottom: .6rem; }
.market-empty h2 { font-size: 1.25rem; margin-bottom: .35rem; }
.market-empty p { color: var(--muted); margin-bottom: 1rem; }
.market-empty .btn { display: inline-flex; }

/* Siparis akisi: 3 adim */
.order-flow {
  margin-top: 2.6rem; padding: 1.6rem 1.5rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 26px;
}
.order-flow > h2 { font-size: 1.3rem; margin-bottom: 1.1rem; }
.order-flow ol {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.order-flow li {
  display: grid; gap: .3rem; align-content: start;
  padding: 1rem; border-radius: 18px; background: var(--bg-2);
}
.order-flow li i {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: var(--card); color: var(--teal); margin-bottom: .3rem;
}
.order-flow li b { font-size: .96rem; }
.order-flow li span { color: var(--muted); font-size: .85rem; line-height: 1.45; }
.order-flow .tiny { margin-top: 1rem; display: flex; align-items: center; gap: .4rem; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.product-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 24px; overflow: hidden; display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.product-media { position: relative; display: block; }
.product-media img { width: 100%; height: 210px; object-fit: cover; display: block; background: var(--bg-2); }
.product-badge {
  position: absolute; top: .7rem; left: .7rem;
  background: var(--accent); color: var(--accent-ink);
  font-size: .72rem; font-weight: 800; padding: .25rem .6rem; border-radius: 999px;
}
.product-badge { display: inline-flex; align-items: center; gap: .25rem; }
.product-badge .ico svg { width: 14px; height: 14px; }
.product-badge.is-out { left: auto; right: .7rem; background: var(--black); color: #fff; }
.product-card.is-out .product-media img { filter: grayscale(1); opacity: .62; }
.product-body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.product-body em {
  color: var(--teal); font-style: normal; font-size: .7rem;
  letter-spacing: .08em; text-transform: uppercase; font-weight: 800;
  display: inline-flex; align-items: center; gap: .3rem;
}
.product-body em .ico svg { width: 14px; height: 14px; }
.product-body h3 { font-size: 1.02rem; line-height: 1.3; }
.product-body p { color: var(--muted); font-size: .86rem; }
.product-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin-top: auto; }
.product-price s { color: var(--muted); font-size: .85rem; }
.product-price strong { font-size: 1.15rem; }
.product-price.is-lg { margin: 1rem 0; }
.product-price.is-lg strong { font-size: 1.7rem; }
.pill-stock {
  font-size: .74rem; font-weight: 800; padding: .25rem .65rem; border-radius: 999px;
  border: 1px solid var(--line); display: inline-flex; align-items: center; gap: .25rem;
}
.pill-stock .ico svg { width: 13px; height: 13px; }
.pill-stock.is-on { color: #0a7d49; border-color: #0a7d49; }
.pill-stock.is-off { color: #b03030; border-color: #b03030; }
.btn-wa { background: #25d366; color: #05331a; gap: .45rem; }
.btn-wa:hover { background: #1fbb5a; }
.btn-wa .ico svg { width: 20px; height: 20px; }

/* Kart altindaki ikili buton: Siparis ver + Incele */
.product-actions { display: grid; grid-template-columns: 1fr auto; gap: .4rem; margin-top: .2rem; }
.product-actions .btn { min-height: 42px; padding: 0 .8rem; font-size: .88rem; }
.btn-detail { white-space: nowrap; }

.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.product-detail-media img { width: 100%; border-radius: 28px; box-shadow: var(--shadow); }

/* Urun sayfasindaki bilgi maddeleri */
.product-facts { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .55rem; }
.product-facts li { display: flex; align-items: center; gap: .65rem; font-size: .9rem; color: var(--muted); }
.product-facts i {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; background: var(--bg-2); color: var(--teal);
}

.crumbs { color: var(--muted); font-size: .85rem; margin-bottom: 1.2rem; }
.crumbs a { display: inline-flex; align-items: center; gap: .3rem; }
.crumbs .ico svg { width: 14px; height: 14px; }
.crumbs span { margin: 0 .35rem; }

@media (max-width: 980px) {
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .order-flow ol { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .trust-strip { grid-template-columns: 1fr; }
  .product-actions { grid-template-columns: 1fr; }
}

/* ---- Özel formlar ---- */
.file-input { padding: .7rem; border: 1px dashed var(--line); border-radius: 14px; background: var(--bg-2); }
/* Onay kutusu cumlenin basinda kalsin.
   Not: ".form label { display:grid }" kurali daha ozgun oldugu icin
   burada ".form .agree" seklinde yaziyoruz, aksi halde kutu tam
   genislige yayilip metin alt satira dusuyor. */
.agree,
.form .agree {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: .6rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.45;
}
.agree > input[type="checkbox"],
.form .agree > input[type="checkbox"] {
  flex: 0 0 20px;
  width: 20px;
  min-width: 20px;
  height: 20px;
  margin: .12rem 0 0;
  padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.agree > span,
.form .agree > span { flex: 1 1 auto; }
.choice-grid.is-multi .choice { cursor: pointer; }

.faq-wide { max-width: 720px; }
.faq-more { margin-top: 1rem; }

/* /sss sayfası: sorular solda, iletişim kutusu sağda */
.faq-layout { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; align-items: start; }
.faq-list { display: grid; gap: .6rem; }
.faq-list details { margin: 0; }
@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; }
}

.reg-modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 1rem; }
.reg-modal[hidden] { display: none; }
.reg-modal-backdrop { position: absolute; inset: 0; background: rgba(17,17,17,.58); backdrop-filter: blur(7px); }
.reg-modal-card {
  position: relative; z-index: 1; width: min(640px, 100%);
  max-height: min(92vh, 860px); overflow: auto;
  background: var(--card); border-radius: 28px;
  padding: 1.3rem 1.25rem 1.4rem;
  box-shadow: 0 30px 80px rgba(0,0,0,.3);
  animation: popupIn .35s ease;
}
.reg-modal-x {
  position: sticky; top: 0; float: right;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--bg-2); color: var(--ink); font-size: 1.4rem; cursor: pointer; z-index: 2;
}
.is-modal-form { min-height: 0; }
.is-modal-form .wizard-step { min-height: 180px; }

.lightbox { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1rem; }
.lightbox[hidden] { display: none; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(8,8,8,.88); }
.lightbox-frame { position: relative; z-index: 1; max-width: min(1100px, 100%); margin: 0; }
.lightbox-frame img {
  max-width: 100%; max-height: min(82vh, 900px);
  object-fit: contain; border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.lightbox-frame figcaption {
  color: #fff; text-align: center; margin-top: .6rem; font-weight: 800;
}
.lightbox-x, .lightbox-nav {
  position: absolute; z-index: 2; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
}
.lightbox-x {
  top: 1rem; right: 1rem; width: 44px; height: 44px; border-radius: 50%; font-size: 1.5rem;
}
.lightbox-nav {
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; font-size: 1.8rem;
}
.lightbox-nav.is-prev { left: .8rem; }
.lightbox-nav.is-next { right: .8rem; }

@keyframes wizardIn {
  from { opacity: 0; transform: translateX(22px); }
  to { opacity: 1; transform: none; }
}
@keyframes wizardOut {
  from { opacity: 0; transform: translateX(-22px); }
  to { opacity: 1; transform: none; }
}
@keyframes wizardShake {
  0%, 100% { transform: none; }
  30% { transform: translateX(-6px); }
  60% { transform: translateX(6px); }
}
@keyframes popupIn {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wizard-step.is-on, .site-popup-card { animation: none; }
  .nav-menu a, .contact-btn { transition: none; transform: none; }
}

/* Dar masaüstü: menü + üç aksiyon butonu tek satırda kalsın, yazılar kırılmasın */
@media (max-width: 1200px) and (min-width: 981px) {
  .nav-menu a { padding: 0 .55rem; font-size: .72rem; }
  .nav-brand small { display: none; }
  .nav-tools { gap: .4rem; }
  .nav-cta {
    min-height: 38px; padding: 0 .72rem;
    font-size: .72rem; white-space: nowrap;
  }
  .nav-cta .ico svg { width: 15px; height: 15px; }
}
@media (max-width: 1060px) and (min-width: 981px) {
  /* Son çare: bu aralıkta ikon yerine sadece yazı kalsın */
  .nav-cta .ico { display: none; }
  .nav-menu a { padding: 0 .42rem; }
}

@media (max-width: 980px) {
  .nav-inner { grid-template-columns: 1fr auto auto; }
  .nav-cta { display: none; }
  .nav-toggle { display: grid; place-items: center; }
  .nav-mobile-only { display: inline-flex; }
  .nav-links {
    display: none; position: absolute; top: calc(100% - 1px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: .7rem;
    background: var(--nav);
    padding: .9rem 1.1rem 1.15rem;
    box-shadow: 0 18px 32px rgba(17,17,17,.12);
    border-bottom: 1px solid var(--line);
  }
  .nav.is-open .nav-links { display: flex; }
  .nav-menu {
    flex-direction: column; align-items: stretch; gap: .35rem;
    width: 100%; border-radius: 18px; padding: .4rem;
  }
  .nav-menu a { width: 100%; justify-content: flex-start; min-height: 44px; padding: 0 1rem; }
  .hero-grid, .hero-stage .hero-slide, .about-split, .faq-split, .group-grid, .icon-row, .svc-grid,
  .form-layout, .facility-row, .mv-grid, .course-grid, .contact-cards, .footer-grid,
  .gallery-mosaic, .work-grid, .shot-grid {
    grid-template-columns: 1fr;
  }
  .group-grid, .icon-row, .svc-grid, .shot-grid, .gallery-mosaic, .work-grid { grid-template-columns: 1fr 1fr; }
  .product-grid { grid-template-columns: 1fr 1fr; }
  .product-detail { grid-template-columns: 1fr; }
  .slider-students .carousel-slide { flex: 0 0 82%; }
  .slider-students .carousel-slide img { height: 240px; }
  .hero-photo img, .round-photo img, .slider-about .carousel-slide img { max-height: 240px; height: auto; }
  .cta-bar .wrap { flex-direction: column; align-items: flex-start; }
  /* Üst bar mobilde: dört iletişim bilgisi 2x2 derli toplu bir ızgarada.
     Alt alta dört tam satır ekranın tepesinde çok yer kaplıyordu.
     display:contents ile .topbar-left'in üç bağlantısı da .topbar-ig ile
     aynı ızgaraya girer, böylece dört eşit hücre oluşur. */
  /* .68rem bilerek: e-posta adresi hücreye tam sığan en büyük boy. */
  .topbar { font-size: .68rem; }
  .topbar-inner {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: .3rem; padding: .45rem 0;
  }
  .topbar-left { display: contents; }
  .topbar-left a, .topbar-ig {
    width: auto; min-width: 0; min-height: 30px;
    justify-content: flex-start; gap: .3rem;
    padding: 0 .42rem; overflow: hidden;
  }
  .topbar-left a > span, .topbar-ig > span {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Numara zaten ikonla anlatıldığı için "WhatsApp:" yazısına gerek yok */
  .tb-etiket { display: none; }
  .register-aside { position: static; }
  .choice-grid { grid-template-columns: 1fr; }
  /* Yarim genislikli form alanlari mobilde alt alta gelsin; yan yana
     kaldiklarinda satir ekrandan tasiyor ve sagi kesik kaliyordu. */
  .form-2 { grid-template-columns: 1fr; }
  .wa-float { display: none; }
  body { padding-bottom: calc(4.4rem + env(safe-area-inset-bottom, 0px)); }
  .m-dock {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--card);
    border-top: 1px solid var(--line);
    padding: .28rem .35rem calc(.28rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 28px rgba(17,17,17,.12);
  }
  .m-dock a {
    display: grid; justify-items: center; gap: .12rem;
    padding: .28rem .15rem .2rem;
    color: var(--muted); font-size: .68rem; font-weight: 800;
    border-radius: 14px;
  }
  .m-dock a.is-active, .m-dock a:hover { color: var(--ink); }
  .m-dock-ico {
    width: 28px; height: 28px; display: grid; place-items: center;
  }
  .m-dock-wa { color: #128c7e; }
  .m-dock a.is-main {
    color: var(--ink);
  }
  .m-dock a.is-main .m-dock-ico {
    width: 36px; height: 28px;
    background: var(--accent); color: var(--accent-ink);
    border-radius: 999px;
  }
  .carousel-slide { flex: 0 0 88%; }
  .carousel-slide img { height: 240px; }
  .lightbox-nav.is-prev { left: .3rem; }
  .lightbox-nav.is-next { right: .3rem; }
  .reg-modal { padding: .6rem .6rem calc(.6rem + env(safe-area-inset-bottom, 0px)); align-items: end; }
  .reg-modal-card { width: 100%; max-height: min(90vh, 760px); border-radius: 24px 24px 16px 16px; }
}
@media (max-width: 620px) {
  .group-grid, .icon-row, .svc-grid, .shot-grid, .work-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
}

@media (min-width: 961px) and (max-width: 1200px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}