/* =====================================================================
   Düzce Kuzey Diş Kliniği · "İnci" tasarım sistemi (v2)
   Derin deniz yeşili-siyah sahneler, inci beyazı yüzeyler, cam katmanlar,
   kutup ışığı parıltıları. Hareket: GSAP + ScrollTrigger + Lenis (assets/js/motion.js).
   ===================================================================== */
@font-face { font-family: "Geist"; src: url("../fonts/Geist-Variable.woff2") format("woff2-variations"), url("../fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
[x-cloak] { display: none !important; }

:root {
  --paper: 245 247 246;
  --surface: 255 255 255;
  --ice: 234 241 240;
  --ink: 7 27 31;
  --ink-soft: 58 79 85;
  --ink-mute: 107 125 130;
  --fiord: 13 124 122;
  --fiord-deep: 8 92 91;
  --fiord-text: 10 112 110;
  --aurora: 94 234 212;
  --amber: 232 196 128;
  --line: 7 27 31;
  --line-a: .09;
  --abyss: #03151a;
  --abyss-2: #082328;
  --shadow: 0 1px 1px rgba(7,27,31,.04), 0 12px 32px -16px rgba(7,27,31,.22);
  --shadow-lg: 0 40px 80px -40px rgba(7,27,31,.45);
  --ease: cubic-bezier(.22,1,.36,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  color-scheme: light;
}
html.dark {
  --paper: 4 19 23;
  --surface: 9 31 36;
  --ice: 16 44 50;
  --ink: 232 242 240;
  --ink-soft: 178 196 196;
  --ink-mute: 128 150 152;
  --fiord: 22 150 146;
  --fiord-deep: 14 120 117;
  --fiord-text: 110 226 206;
  --line: 255 255 255;
  --line-a: .08;
  --shadow: 0 1px 1px rgba(0,0,0,.3), 0 14px 34px -18px rgba(0,0,0,.7);
  color-scheme: dark;
}

html { -webkit-tap-highlight-color: transparent; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body.kd { background: rgb(var(--paper)); color: rgb(var(--ink)); font-family: Geist, "Segoe UI", system-ui, sans-serif; font-feature-settings: "ss01", "ss02"; letter-spacing: -.005em; }
body.kd ::selection { background: rgb(var(--aurora) / .4); color: rgb(var(--ink)); }
:focus-visible { outline: 2px solid rgb(var(--aurora)); outline-offset: 3px; border-radius: 10px; }
.font-display { font-family: Geist, system-ui, sans-serif; letter-spacing: -.035em; }
.tabular { font-variant-numeric: tabular-nums; }
.hairline { border-color: rgb(var(--line) / var(--line-a)); }
.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 20px; }
@media (min-width: 768px) { .wrap { padding-inline: 40px; } }

/* --------------------------------------------------------------- Tipografi */
.t-hero  { font-weight: 500; font-size: clamp(2.9rem, 6.6vw + .2rem, 6.6rem); line-height: .94; letter-spacing: -.055em; }
.t-h2    { font-weight: 500; font-size: clamp(2.1rem, 3.6vw + .6rem, 3.9rem); line-height: 1; letter-spacing: -.045em; }
.t-h3    { font-weight: 600; font-size: 1.3rem; line-height: 1.2; letter-spacing: -.025em; }
.t-lead  { font-size: clamp(1.05rem, .4vw + .95rem, 1.22rem); line-height: 1.6; color: rgb(var(--ink-soft)); max-width: 36em; }
.t-small { font-size: .8125rem; color: rgb(var(--ink-mute)); }
.t-tag   { display: inline-flex; align-items: center; gap: .55rem; height: 2.1rem; padding: 0 .9rem 0 .75rem; border-radius: 999px; font-size: .82rem; font-weight: 500; color: rgb(var(--ink-soft)); background: rgb(var(--surface)); box-shadow: inset 0 0 0 1px rgb(var(--line) / .1); }
.t-tag::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: rgb(var(--fiord)); box-shadow: 0 0 0 4px rgb(var(--fiord) / .15); }
.on-dark .t-tag { color: rgba(255,255,255,.75); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.on-dark .t-tag::before { background: #5eead4; box-shadow: 0 0 0 4px rgba(94,234,212,.18), 0 0 12px #5eead4; }
.grad-text { background: linear-gradient(100deg, #ffffff 0%, #d9fff6 40%, #a8f0e2 60%, #ffffff 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 8s linear infinite; }
@keyframes sheen { to { background-position: -200% 0; } }

/* Kelime kelime açılan başlık (motion.js .split) */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split .w > span { display: inline-block; will-change: transform; }

.prose { font-size: 1.0625rem; line-height: 1.8; color: rgb(var(--ink-soft)); max-width: 68ch; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { font-weight: 600; font-size: 1.75rem; line-height: 1.15; letter-spacing: -.035em; color: rgb(var(--ink)); margin-top: 1.9em; }
.prose h3 { font-weight: 600; font-size: 1.2rem; letter-spacing: -.02em; color: rgb(var(--ink)); margin-top: 1.5em; }
.prose strong { color: rgb(var(--ink)); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: rgb(var(--fiord)); }
.prose a { color: rgb(var(--fiord-text)); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* --------------------------------------------------------------- Düğmeler */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; height: 3.1rem; padding: 0 1.45rem; border-radius: 999px; font-weight: 500; font-size: .95rem; letter-spacing: -.01em; line-height: 1; white-space: nowrap; user-select: none; transition: transform .35s var(--ease), background-color .25s, box-shadow .35s var(--ease), color .25s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn i { font-size: 1.15em; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.btn:hover::after { transform: translateX(120%); }
.btn .arr { width: 1.9rem; height: 1.9rem; margin-right: -.85rem; border-radius: 99px; display: grid; place-items: center; overflow: hidden; position: relative; }
.btn .arr i { transition: transform .45s var(--ease); }
.btn .arr i + i { position: absolute; transform: translateX(-160%); }
.btn:hover .arr i:first-child { transform: translateX(160%); }
.btn:hover .arr i + i { transform: translateX(0); }
.btn-primary { background: linear-gradient(180deg, rgb(var(--fiord)) 0%, rgb(var(--fiord-deep)) 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 30px -12px rgb(var(--fiord) / .9); }
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 18px 40px -14px rgb(var(--fiord) / 1); }
.btn-primary .arr { background: rgba(255,255,255,.16); }
.btn-pearl { background: linear-gradient(180deg, #ffffff, #e6f2ef); color: #04161a; box-shadow: inset 0 -1px 0 rgba(0,0,0,.06), 0 12px 40px -12px rgba(94,234,212,.55); }
.btn-pearl .arr { background: #04161a; color: #fff; }
.btn-ink { background: rgb(var(--ink)); color: rgb(var(--paper)); }
.btn-ink .arr { background: rgb(var(--paper) / .14); }
.btn-soft { background: rgb(var(--ice)); color: rgb(var(--ink)); }
.btn-soft:hover { background: rgb(var(--ice) / .7); }
.btn-ghost { background: transparent; color: rgb(var(--ink)); box-shadow: inset 0 0 0 1px rgb(var(--line) / .16); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px rgb(var(--line) / .4); }
.btn-glass { background: rgba(255,255,255,.07); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn-glass:hover { background: rgba(255,255,255,.12); }
.btn-sm { height: 2.5rem; padding: 0 1.05rem; font-size: .875rem; }
.btn-lg { height: 3.6rem; padding: 0 1.8rem; font-size: 1rem; }
.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,.35); animation: ripple .7s ease-out forwards; pointer-events: none; z-index: 5; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
.link-u { position: relative; display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; }
.link-u::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(.25); transform-origin: left; opacity: .5; transition: transform .5s var(--ease), opacity .3s; }
.link-u:hover::after { transform: scaleX(1); opacity: 1; }

/* --------------------------------------------------------------- Alanlar */
.field { width: 100%; height: 3.25rem; border-radius: 16px; background: rgb(var(--surface)); border: 1px solid rgb(var(--line) / .13); padding: 0 1.05rem; font-weight: 450; color: rgb(var(--ink)); outline: none; transition: border-color .25s, box-shadow .25s; }
.field::placeholder { color: rgb(var(--ink-mute) / .75); }
.field:hover { border-color: rgb(var(--line) / .25); }
.field:focus { border-color: rgb(var(--fiord)); box-shadow: 0 0 0 4px rgb(var(--fiord) / .12); }
textarea.field { height: auto; padding: .85rem 1.05rem; line-height: 1.55; resize: vertical; }
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23687a8f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.05rem center; padding-right: 2.6rem; }
.label { display: block; font-size: .85rem; font-weight: 500; color: rgb(var(--ink-soft)); margin-bottom: .45rem; }
.check { width: 1.15rem; height: 1.15rem; accent-color: rgb(var(--fiord)); flex-shrink: 0; margin-top: .15rem; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.panel { background: rgb(var(--surface)); border-radius: 28px; box-shadow: var(--shadow); border: 1px solid rgb(var(--line) / calc(var(--line-a) * .8)); }
.chip { display: inline-flex; align-items: center; gap: .35rem; height: 2rem; padding: 0 .85rem; border-radius: 999px; font-size: .8125rem; font-weight: 500; background: rgb(var(--ice)); color: rgb(var(--ink-soft)); }

/* Cam katman ve spot ışığı */
.glass { background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035)); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 60px -30px rgba(0,0,0,.6); }
.spot { position: relative; isolation: isolate; }
.spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--aurora) / .16), transparent 45%); pointer-events: none; }
.spot:hover::before { opacity: 1; }
.spot-border { position: relative; }
.spot-border::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--aurora) / .7), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s; }
.spot-border:hover::after { opacity: 1; }

/* --------------------------------------------------------------- Karanlık sahne (hero, süreç, altbilgi) */
.on-dark { --ink: 236 245 243; --ink-soft: 184 204 203; --ink-mute: 130 156 157; --line: 255 255 255; --line-a: .1; color: rgb(var(--ink)); background: var(--abyss); }
.stage { position: relative; isolation: isolate; overflow: hidden; }
.aurora { position: absolute; inset: -20%; z-index: -2; pointer-events: none; filter: blur(70px) saturate(1.2); opacity: .9; }
.aurora i { position: absolute; border-radius: 50%; mix-blend-mode: screen; animation: drift 22s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { width: 46vw; height: 46vw; left: 42%; top: 2%; background: radial-gradient(circle, rgba(20,184,166,.55), transparent 65%); }
.aurora i:nth-child(2) { width: 38vw; height: 38vw; left: 62%; top: 34%; background: radial-gradient(circle, rgba(56,189,248,.28), transparent 65%); animation-duration: 28s; animation-delay: -6s; }
.aurora i:nth-child(3) { width: 34vw; height: 34vw; left: 14%; top: 50%; background: radial-gradient(circle, rgba(167,139,250,.22), transparent 65%); animation-duration: 32s; animation-delay: -12s; }
.aurora i:nth-child(4) { width: 26vw; height: 26vw; left: 30%; top: -6%; background: radial-gradient(circle, rgba(232,196,128,.16), transparent 65%); animation-duration: 26s; animation-delay: -3s; }
@keyframes drift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-6vw,4vh,0) scale(1.12); } 100% { transform: translate3d(4vw,-3vh,0) scale(.94); } }
.grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.gridlines { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 20%, transparent 75%); }
.stage-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: -1; background: linear-gradient(transparent, var(--abyss)); }

/* --------------------------------------------------------------- Yüzen menü */
.ann-bar { position: relative; z-index: 701; background: #04161a; color: #e6f2ef; }
.nav-shell { position: fixed; left: 0; right: 0; top: calc(12px + env(safe-area-inset-top)); z-index: 700; pointer-events: none; transition: transform .5s var(--ease); }
.has-ann .nav-shell { top: calc(54px + env(safe-area-inset-top)); }
.has-ann.ann-closed .nav-shell, .has-ann.scrolled .nav-shell { top: calc(12px + env(safe-area-inset-top)); }
.nav-shell.is-hidden { transform: translateY(-140%); }
.nav-pill { pointer-events: auto; position: relative; display: flex; align-items: center; gap: .5rem; height: 64px; padding: 0 10px 0 14px; border-radius: 22px; color: #fff; background: rgba(4,22,26,.62); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 50px -20px rgba(0,0,0,.55); transition: background-color .4s, box-shadow .4s, height .4s var(--ease); }
.scrolled .nav-pill, .light-top .nav-pill { background: rgba(4,22,26,.86); }
.scrolled .nav-pill { height: 58px; }
.brand-word { font-weight: 600; font-size: 1.12rem; letter-spacing: -.035em; line-height: 1; }
.brand-sub { font-size: .7rem; font-weight: 450; color: rgba(255,255,255,.55); letter-spacing: 0; }
.nav-a { position: relative; padding: .55rem .85rem; border-radius: 12px; font-weight: 450; font-size: .92rem; color: rgba(255,255,255,.72); transition: color .25s, background-color .25s; }
.nav-a:hover, .nav-a[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.07); }
.nav-a.is-on { color: #fff; }
.nav-a.is-on::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 9px; background: #5eead4; box-shadow: 0 0 10px #5eead4; }
.icon-btn { position: relative; width: 2.75rem; height: 2.75rem; border-radius: 14px; display: grid; place-items: center; color: rgb(var(--ink)); background: rgb(var(--ice) / .8); transition: background-color .25s, transform .3s var(--ease); flex-shrink: 0; }
.icon-btn:hover { background: rgb(var(--ice)); }
.icon-btn > i { font-size: 1.25rem; }
.nav-pill .icon-btn { color: #fff; background: rgba(255,255,255,.07); }
.nav-pill .icon-btn:hover { background: rgba(255,255,255,.13); }
.nav-phone { display: inline-flex; align-items: center; gap: .55rem; padding: 0 .8rem; height: 2.75rem; border-radius: 14px; font-weight: 500; font-size: .92rem; color: rgba(255,255,255,.85); transition: background-color .25s; }
.nav-phone:hover { background: rgba(255,255,255,.07); color: #fff; }

/* Tedaviler açılır menüsü */
.mega { position: absolute; left: 0; right: 0; top: calc(100% + 10px); padding: 10px; border-radius: 24px; background: rgba(4,22,26,.92); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); display: grid; grid-template-columns: repeat(4, 1fr) 1.15fr; gap: 6px; }
.mega a.mi { display: flex; gap: .8rem; padding: 14px; border-radius: 16px; transition: background-color .25s; }
.mega a.mi:hover { background: rgba(255,255,255,.06); }
.mega .mi-ic { width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; background: rgba(94,234,212,.1); color: #5eead4; flex-shrink: 0; transition: transform .45s var(--spring); }
.mega a.mi:hover .mi-ic { transform: rotate(-8deg) scale(1.08); }
.mega .mi-ic svg { width: 1.5rem; height: 1.5rem; }
.mega .mi b { display: block; font-weight: 500; font-size: .92rem; color: #fff; }
.mega .mi span { display: block; font-size: .78rem; line-height: 1.35; color: rgba(255,255,255,.5); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mega .mega-cta { grid-row: span 2; border-radius: 18px; padding: 20px; position: relative; overflow: hidden; background: radial-gradient(120% 90% at 100% 0%, rgba(20,184,166,.45), transparent 60%), #06262b; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }

.theme-btn { position: relative; overflow: hidden; }
.theme-btn i, .theme-btn .ic-auto { transition: transform .6s var(--spring), opacity .3s; }
.theme-btn .ic-sun, .theme-btn .ic-moon, .theme-btn .ic-auto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; line-height: 1; }
.theme-btn .ic-sun { color: #f5c062; } .theme-btn .ic-moon { color: #a5c4ff; } .theme-btn .ic-auto { color: #5eead4; }
.theme-btn .ic-auto b { position: absolute; font-size: 8px; font-weight: 800; right: 8px; bottom: 8px; }
html[data-mode="light"] .theme-btn .ic-moon, html[data-mode="light"] .theme-btn .ic-auto { opacity: 0; transform: translateY(18px) rotate(-90deg); }
html[data-mode="dark"] .theme-btn .ic-sun, html[data-mode="dark"] .theme-btn .ic-auto { opacity: 0; transform: translateY(18px) rotate(-90deg); }
html[data-mode="auto"] .theme-btn .ic-sun, html[data-mode="auto"] .theme-btn .ic-moon, html:not([data-mode]) .theme-btn .ic-sun, html:not([data-mode]) .theme-btn .ic-moon { opacity: 0; transform: translateY(18px) rotate(-90deg); }
.theme-sweep { position: fixed; z-index: 3000; pointer-events: none; border-radius: 50%; transform: scale(0); animation: sweep .7s var(--ease) forwards; }
@keyframes sweep { 0% { transform: scale(0); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), fill .45s var(--ease) !important; }

/* Mobil menü: tam ekran perde */
.drawer { position: fixed; inset: 0; z-index: 800; color: #fff; }
.drawer-bg { position: absolute; inset: 0; background: var(--abyss); }
.drawer-panel { position: relative; height: 100%; overflow-y: auto; padding: calc(16px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.drawer-a { display: flex; align-items: center; justify-content: space-between; padding: .7rem 0; font-weight: 500; font-size: 1.85rem; letter-spacing: -.04em; border-bottom: 1px solid rgba(255,255,255,.08); }
.drawer-a i { font-size: 1.2rem; color: rgba(255,255,255,.4); transition: transform .4s var(--ease); }
.drawer-a:hover i { transform: translateX(4px); color: #5eead4; }

/* Alt menü (mobil) */
.dock { position: fixed; z-index: 690; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 6px; border-radius: 26px; background: rgba(4,22,26,.78); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); box-shadow: 0 20px 50px -18px rgba(0,0,0,.65); transition: transform .5s var(--ease); }
.dock.is-hidden { transform: translate(-50%, 140%); }
.dock a { display: grid; justify-items: center; gap: 2px; width: 60px; padding: 7px 0 5px; border-radius: 18px; color: rgba(255,255,255,.6); font-size: 10.5px; font-weight: 500; }
.dock a i { font-size: 21px; }
.dock a.is-on { color: #fff; background: rgba(255,255,255,.07); }
.dock a.is-on i { color: #5eead4; }
.dock .dock-fab { width: 56px; height: 52px; margin: 0 4px; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(180deg, #fff, #dff3ee); color: #04161a; box-shadow: 0 8px 24px -8px rgba(94,234,212,.7); }
.dock .dock-fab i { font-size: 24px; }
@media (min-width: 1024px) { .dock { display: none !important; } }

/* --------------------------------------------------------------- HERO */
.hero-home { min-height: 100svh; padding-top: 128px; padding-bottom: 40px; display: flex; flex-direction: column; }
.hero-title { color: #fff; }
.tooth-stage { position: relative; aspect-ratio: 1 / 1.02; width: 100%; max-width: 620px; margin-inline: auto; perspective: 1200px; }
.tooth-3d { position: absolute; inset: 4% 17% 17%; transform-style: preserve-3d; will-change: transform; }
.tooth-3d svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 60px 60px rgba(0,0,0,.55)) drop-shadow(0 0 80px rgba(94,234,212,.18)); animation: floatY 7s ease-in-out infinite; }
@keyframes floatY { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-18px) rotate(1.5deg); } }
.tooth-3d .spec { mix-blend-mode: screen; transition: transform .2s linear; }
.orbit { position: absolute; inset: 0; pointer-events: none; }
.orbit ellipse { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 1; }
.orbit .dot { fill: #5eead4; filter: drop-shadow(0 0 6px #5eead4); }
.float-chip { position: absolute; display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .95rem .55rem .55rem; border-radius: 16px; font-size: .85rem; font-weight: 500; color: #fff; will-change: transform; white-space: nowrap; }
.float-chip .fc-ic { width: 2rem; height: 2rem; border-radius: 10px; display: grid; place-items: center; background: rgba(94,234,212,.14); color: #5eead4; }
.float-chip .fc-ic svg { width: 1.2rem; height: 1.2rem; }
.slot-glass { position: absolute; right: -2%; bottom: -3%; width: min(320px, 78%); border-radius: 24px; padding: 18px; color: #fff; }
.slot-chip { display: grid; gap: 1px; padding: .6rem .75rem; border-radius: 14px; text-align: left; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transition: background-color .25s, border-color .25s, transform .35s var(--ease); color: #fff; }
.slot-chip:hover { background: rgba(94,234,212,.14); border-color: rgba(94,234,212,.5); transform: translateY(-2px); }
.slot-chip b { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.slot-chip span { font-size: .72rem; color: rgba(255,255,255,.55); }
.open-dot { position: relative; width: .5rem; height: .5rem; border-radius: 999px; background: #22c58b; flex-shrink: 0; box-shadow: 0 0 10px #22c58b; }
.open-dot::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 1.5px solid #22c58b; opacity: 0; animation: beacon 2s ease-out infinite; }
.open-dot.is-off { background: #e0795e; box-shadow: 0 0 10px #e0795e; } .open-dot.is-off::after { display: none; }
@keyframes beacon { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
.avatars { display: flex; }
.avatars > * { width: 2.4rem; height: 2.4rem; border-radius: 99px; margin-left: -.6rem; box-shadow: 0 0 0 2px var(--abyss); overflow: hidden; display: grid; place-items: center; font-size: .72rem; font-weight: 600; color: #fff; }
.avatars > *:first-child { margin-left: 0; }
.scroll-cue { display: inline-flex; align-items: center; gap: .7rem; font-size: .8rem; color: rgba(255,255,255,.5); }
.scroll-cue .m { width: 22px; height: 34px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.3); position: relative; }
.scroll-cue .m::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 3px; background: #5eead4; animation: wheel 1.8s var(--ease) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

/* Kayan şerit */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marq 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track > * { flex-shrink: 0; }
@keyframes marq { to { transform: translateX(-50%); } }
.marquee-word { display: inline-flex; align-items: center; gap: 2.2rem; padding-right: 2.2rem; font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 500; letter-spacing: -.04em; color: rgba(255,255,255,.88); }
.marquee-word svg { width: 1.1em; height: 1.1em; color: #5eead4; opacity: .8; }

/* --------------------------------------------------------------- Bölümler */
.sec { padding-block: 96px; }
@media (min-width: 768px) { .sec { padding-block: 140px; } }
.sec-tight { padding-block: 56px; }
.rule-list > * + * { border-top: 1px solid rgb(var(--line) / var(--line-a)); }
.sec-head { display: grid; gap: 1.25rem; }
@media (min-width: 1024px) { .sec-head { grid-template-columns: 1.1fr .9fr; align-items: end; gap: 4rem; } }

/* İstatistik */
.stat-n { font-weight: 400; font-size: clamp(3rem, 5.5vw, 5.2rem); line-height: 1; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.stat-n sup { font-size: .38em; top: -1.3em; margin-left: .1em; color: rgb(var(--fiord-text)); font-weight: 500; letter-spacing: 0; }

/* Bento */
.bento { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(210px, auto); } }
.bento > * { border-radius: 30px; padding: 28px; overflow: hidden; }
.b-card { background: rgb(var(--surface)); border: 1px solid rgb(var(--line) / calc(var(--line-a) * .8)); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.b-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.b-ic { width: 3.2rem; height: 3.2rem; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; color: rgb(var(--fiord-text)); background: rgb(var(--fiord) / .09); transition: transform .6s var(--spring); }
.b-card:hover .b-ic { transform: rotate(-10deg) scale(1.08); }

/* Tedavi kartları (yatay kaydırma) */
.treat-rail { display: flex; gap: 16px; }
.treat { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: .8rem; padding: 26px; border-radius: 30px; background: rgb(var(--surface)); border: 1px solid rgb(var(--line) / calc(var(--line-a) * .8)); transition: transform .6s var(--ease), box-shadow .6s var(--ease), color .4s; min-height: 100%; }
.treat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 100% 0%, rgba(20,184,166,.55), transparent 55%), linear-gradient(160deg, #0a2b30, #03151a); opacity: 0; transition: opacity .6s var(--ease); }
.treat:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); color: #fff; }
.treat:hover::after { opacity: 1; }
.treat .ti { width: 3.6rem; height: 3.6rem; border-radius: 18px; display: grid; place-items: center; background: rgb(var(--fiord) / .09); color: rgb(var(--fiord-text)); transition: background-color .5s, color .5s, transform .6s var(--spring); }
.treat .ti svg { width: 2.1rem; height: 2.1rem; }
.treat:hover .ti { background: rgba(94,234,212,.14); color: #5eead4; transform: rotate(-8deg) scale(1.06); }
.treat p { transition: color .4s; }
.treat:hover p { color: rgba(255,255,255,.7); }
.treat .cat { font-size: .78rem; font-weight: 500; color: rgb(var(--ink-mute)); transition: color .4s; }
.treat:hover .cat { color: rgba(255,255,255,.55); }
.treat .go { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; font-weight: 500; font-size: .9rem; }
.treat .go span.c { width: 2.6rem; height: 2.6rem; border-radius: 99px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgb(var(--line) / .15); transition: background-color .4s, box-shadow .4s, transform .5s var(--ease); }
.treat:hover .go span.c { background: #fff; color: #04161a; box-shadow: none; transform: rotate(-45deg); }
.treat-big { width: min(82vw, 360px); min-height: 440px; flex-shrink: 0; padding: 30px; }
.treat-big .t-h3 { font-size: 1.6rem; letter-spacing: -.035em; }
.rail-progress { height: 2px; background: rgb(var(--line) / .1); border-radius: 2px; overflow: hidden; }
.rail-progress i { display: block; height: 100%; width: 0; background: rgb(var(--fiord)); }

/* Süreç */
.step-n { font-weight: 400; font-size: 1rem; font-variant-numeric: tabular-nums; color: #5eead4; }
.proc-line { position: absolute; left: 19px; top: 8px; bottom: 8px; width: 1px; background: rgba(255,255,255,.12); }
.proc-line i { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: linear-gradient(#5eead4, #38bdf8); transform-origin: top; transform: scaleY(0); box-shadow: 0 0 12px #5eead4; }
.proc-step { position: relative; padding-left: 64px; }
.proc-step .dot { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 99px; display: grid; place-items: center; background: #062328; border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.6); font-size: .85rem; font-weight: 500; transition: .5s var(--ease); }
.proc-step.is-on .dot { background: #5eead4; color: #04161a; border-color: #5eead4; box-shadow: 0 0 0 6px rgba(94,234,212,.12), 0 0 30px rgba(94,234,212,.5); }

/* Hekimler */
.doc { display: block; }
.doc .pic { position: relative; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: rgb(var(--ice)); isolation: isolate; }
.doc .pic img { transition: transform 1s var(--ease), filter .6s; }
.doc:hover .ph img { transform: scale(1.06); }
.doc .pic .ov { position: absolute; inset: auto 12px 12px 12px; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 10px 16px; border-radius: 18px; color: #fff; font-size: .85rem; font-weight: 500; transform: translateY(calc(100% + 16px)); transition: transform .6s var(--ease); }
.doc:hover .ph .ov { transform: none; }
.doc-ph { display: grid; place-items: center; position: relative; background: radial-gradient(90% 70% at 30% 10%, rgba(94,234,212,.5), transparent 60%), linear-gradient(165deg, #0f4c52, #04161a); }
.doc-ph-1 { background: radial-gradient(90% 70% at 80% 10%, rgba(232,196,128,.45), transparent 60%), linear-gradient(165deg, #173f55, #04161a); }
.doc-ph-2 { background: radial-gradient(90% 70% at 50% 0%, rgba(167,139,250,.38), transparent 60%), linear-gradient(165deg, #123f45, #04161a); }
.doc-ph::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 70%); mask-image: radial-gradient(circle at 50% 40%, #000, transparent 70%); }
.doc-ph span { position: relative; font-weight: 300; font-size: clamp(2.6rem, 6vw, 4.2rem); letter-spacing: -.06em; color: rgba(255,255,255,.92); }

/* Yorumlar */
.stars { color: rgb(var(--amber)); letter-spacing: 1px; }
.review-body { font-size: 1.15rem; line-height: 1.55; letter-spacing: -.015em; }

/* SSS */
.faq { border-top: 1px solid rgb(var(--line) / var(--line-a)); }
.faq:last-child { border-bottom: 1px solid rgb(var(--line) / var(--line-a)); }
.faq summary { list-style: none; display: flex; align-items: center; gap: 1rem; padding: 1.35rem 0; cursor: pointer; font-weight: 500; font-size: 1.08rem; letter-spacing: -.015em; transition: color .3s; }
.faq summary:hover { color: rgb(var(--fiord-text)); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { margin-left: auto; width: 2.2rem; height: 2.2rem; border-radius: 99px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgb(var(--line) / .15); transition: transform .5s var(--ease), background-color .3s, color .3s; flex-shrink: 0; }
.faq[open] summary .pm { transform: rotate(135deg); background: rgb(var(--ink)); color: rgb(var(--paper)); box-shadow: none; }
.faq-a { padding: 0 3.5rem 1.4rem 0; color: rgb(var(--ink-soft)); line-height: 1.75; animation: faqIn .5s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.hours-row { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid rgb(var(--line) / var(--line-a)); font-weight: 450; }
.hours-row.is-today { color: rgb(var(--fiord-text)); font-weight: 600; }
.hours-row.is-closed span:last-child { color: rgb(var(--ink-mute)); }
.map-frame { filter: grayscale(.35) contrast(1.05); transition: filter .6s; }
.map-frame:hover { filter: none; }
html.dark .map-frame { filter: invert(.9) hue-rotate(180deg) saturate(.6) brightness(.95); }

/* Altbilgi */
.site-foot { position: relative; overflow: hidden; isolation: isolate; color: rgba(255,255,255,.72); background: var(--abyss); }
.site-foot a { transition: color .25s; }
.site-foot a:hover { color: #fff; }
.foot-word { font-weight: 600; font-size: clamp(4rem, 17vw, 16rem); line-height: .82; letter-spacing: -.07em; white-space: nowrap; background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.015)); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }

/* Sayfa başlığı (alt sayfalar) */
.page-hero { padding-top: 140px; padding-bottom: 72px; }
@media (min-width: 768px) { .page-hero { padding-top: 168px; padding-bottom: 96px; } }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .85rem; color: rgba(255,255,255,.5); }
.crumbs a:hover { color: #fff; }
.crumbs i { font-size: .7rem; }

/* Randevu çağrısı */
.cta-panel { position: relative; isolation: isolate; overflow: hidden; border-radius: 40px; color: #fff; background: var(--abyss); }

/* --------------------------------------------------------------- Randevu sihirbazı */
.steps-bar { display: flex; gap: 6px; }
.steps-bar i { flex: 1; height: 3px; border-radius: 9px; background: rgb(var(--line) / .1); overflow: hidden; position: relative; }
.steps-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--fiord)), #38bdf8); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.steps-bar i.on::after { transform: scaleX(1); }
.pick { min-width: 0; position: relative; display: flex; align-items: center; gap: .9rem; width: 100%; padding: 1rem 1.1rem; border-radius: 20px; text-align: left; background: rgb(var(--surface)); border: 1px solid rgb(var(--line) / .1); transition: border-color .25s, background-color .25s, transform .4s var(--ease), box-shadow .4s var(--ease); }
.pick:hover { border-color: rgb(var(--fiord) / .45); transform: translateY(-2px); box-shadow: var(--shadow); }
.pick.is-on { border-color: rgb(var(--fiord)); background: rgb(var(--fiord) / .06); box-shadow: 0 0 0 4px rgb(var(--fiord) / .1); }
.pick .pi { width: 2.8rem; height: 2.8rem; border-radius: 14px; display: grid; place-items: center; background: rgb(var(--fiord) / .08); color: rgb(var(--fiord-text)); flex-shrink: 0; overflow: hidden; }
.pick .pi svg { width: 1.7rem; height: 1.7rem; }
.pick .ok { margin-left: auto; width: 1.5rem; height: 1.5rem; border-radius: 999px; border: 1.5px solid rgb(var(--line) / .2); display: grid; place-items: center; color: transparent; flex-shrink: 0; transition: .3s var(--spring); }
.pick.is-on .ok { background: rgb(var(--fiord)); border-color: rgb(var(--fiord)); color: #fff; transform: scale(1.1); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal .dow { text-align: center; font-size: .72rem; font-weight: 500; color: rgb(var(--ink-mute)); padding-bottom: 2px; }
.cal button { position: relative; aspect-ratio: 1; border-radius: 16px; font-weight: 500; font-variant-numeric: tabular-nums; background: rgb(var(--surface)); border: 1px solid rgb(var(--line) / .09); transition: .25s var(--ease); display: grid; place-items: center; }
.cal button small { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 9px; background: #22c58b; }
.cal button.is-few small { background: rgb(var(--amber)); }
.cal button:disabled { opacity: .3; background: transparent; cursor: not-allowed; }
.cal button:not(:disabled):hover { border-color: rgb(var(--fiord) / .55); transform: translateY(-2px); }
.cal button.is-on { background: rgb(var(--ink)); border-color: rgb(var(--ink)); color: rgb(var(--paper)); transform: scale(1.04); }
.cal button.is-on small { background: #5eead4; }
.cal button.is-today { box-shadow: inset 0 0 0 1.5px rgb(var(--amber)); }
.times { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.times button { height: 3rem; border-radius: 14px; font-weight: 500; font-variant-numeric: tabular-nums; background: rgb(var(--surface)); border: 1px solid rgb(var(--line) / .11); transition: .25s var(--ease); }
.times button:hover:not(:disabled) { border-color: rgb(var(--fiord)); transform: translateY(-2px); }
.times button:disabled { opacity: .3; text-decoration: line-through; cursor: not-allowed; }
.times button.is-on { background: rgb(var(--fiord)); border-color: rgb(var(--fiord)); color: #fff; animation: pop .45s var(--spring); }
@keyframes pop { 0% { transform: scale(.85); } 100% { transform: scale(1); } }
.ticket { position: relative; border-radius: 28px; background: rgb(var(--surface)); box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid rgb(var(--line) / var(--line-a)); }
.ticket::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #0d7c7a, #5eead4, #38bdf8, #a78bfa); }
.ticket .cut { position: relative; border-top: 1.5px dashed rgb(var(--line) / .14); }
.ticket .cut::before, .ticket .cut::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 99px; background: rgb(var(--paper)); }
.ticket .cut::before { left: -11px; } .ticket .cut::after { right: -11px; }
.code-big { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 600; font-size: 1.9rem; letter-spacing: .22em; }
.flip-in { animation: flipIn .9s var(--spring) both; }
@keyframes flipIn { from { opacity: 0; transform: perspective(800px) rotateX(-24deg) translateY(24px); } to { opacity: 1; transform: none; } }
.step-in { animation: stepIn .55s var(--ease) both; }
@keyframes stepIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

.st-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.st-pill i { font-size: 1rem; }
.st-amber { background: #fbf0d9; color: #85580a; } .st-emerald { background: #daf5ea; color: #0b6b45; }
.st-sky { background: #ddeefb; color: #12507e; } .st-rose { background: #fbe2e5; color: #9b1c2f; } .st-slate { background: #e7ecef; color: #3d4b5c; }
html.dark .st-amber { background: rgba(232,196,128,.15); color: #f2d49a; } html.dark .st-emerald { background: rgba(34,197,139,.15); color: #7ee8b9; }
html.dark .st-sky { background: rgba(80,160,230,.15); color: #9fd0ff; } html.dark .st-rose { background: rgba(230,80,100,.15); color: #ffa3b0; } html.dark .st-slate { background: rgba(255,255,255,.07); color: #c2cfdb; }

/* Test */
.q-opt { display: flex; align-items: center; gap: .9rem; width: 100%; padding: 1.05rem 1.15rem; border-radius: 20px; text-align: left; font-weight: 500; background: rgb(var(--surface)); border: 1px solid rgb(var(--line) / .11); transition: .3s var(--ease); }
.q-opt:hover:not(:disabled) { border-color: rgb(var(--fiord) / .6); transform: translateX(4px); }
.q-opt .k { width: 2.1rem; height: 2.1rem; border-radius: 12px; display: grid; place-items: center; background: rgb(var(--ice)); font-size: .85rem; flex-shrink: 0; }
.q-opt.is-right { border-color: #22c58b; background: rgba(34,197,139,.09); }
.q-opt.is-right .k { background: #22c58b; color: #fff; }
.q-opt.is-wrong { border-color: #d9485f; background: rgba(217,72,95,.07); animation: shake .4s; }
.q-opt.is-wrong .k { background: #d9485f; color: #fff; }
@keyframes shake { 20%,60% { transform: translateX(-5px); } 40%,80% { transform: translateX(5px); } }
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
.score-ring { --p: 0; width: 9.5rem; height: 9.5rem; border-radius: 999px; display: grid; place-items: center; background: conic-gradient(rgb(var(--fiord)) calc(var(--p) * 1%), rgb(var(--ice)) 0); transition: --p 1.2s var(--ease); }
.score-ring > div { width: 8rem; height: 8rem; border-radius: 999px; background: rgb(var(--paper)); display: grid; place-items: center; }

/* YouTube */
.yt { position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: #04161a; cursor: pointer; }
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .4s, transform 1s var(--ease); }
.yt:hover img { opacity: 1; transform: scale(1.05); }
.yt .play { position: absolute; inset: 0; margin: auto; width: 4.4rem; height: 4.4rem; border-radius: 999px; background: rgba(255,255,255,.92); color: #04161a; display: grid; place-items: center; font-size: 1.6rem; box-shadow: 0 0 0 10px rgba(255,255,255,.15); transition: transform .5s var(--spring), box-shadow .5s; }
.yt:hover .play { transform: scale(1.1); box-shadow: 0 0 0 16px rgba(255,255,255,.1); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------------- Bildirim balonu, açılış, perde, imleç */
.toasts { position: fixed; top: calc(88px + env(safe-area-inset-top, 0px)); left: 0; right: 0; z-index: 900; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
.toast { position: relative; overflow: hidden; pointer-events: auto; width: 100%; max-width: 420px; padding: 13px 15px; border-radius: 18px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 11px; color: #eef6f4; background: rgba(4,22,26,.94); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); animation: toastIn .6s var(--spring) both; }
.toast.is-error { background: rgba(140,24,40,.96); }
.toast .ti { width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; background: rgba(94,234,212,.16); color: #5eead4; flex-shrink: 0; }
.toast.is-error .ti { background: rgba(255,255,255,.18); color: #fff; }
.toast.is-info .ti { background: rgba(232,196,128,.18); color: #e8c480; }
.toast .prog { position: absolute; left: 0; bottom: 0; height: 2px; background: #5eead4; animation: toastProg 3.4s linear both; }
.toast.is-error .prog { background: #fff; } .toast.is-info .prog { background: #e8c480; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-24px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes toastProg { from { width: 100%; } to { width: 0; } }

.splash { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: var(--abyss); color: #fff; }
.splash-inner { display: grid; justify-items: center; gap: 22px; }
.splash-logo { width: 72px; height: 72px; }
.splash-word { font-weight: 500; font-size: 22px; letter-spacing: -.03em; overflow: hidden; }
.splash-bar { width: 180px; height: 1px; background: rgba(255,255,255,.12); overflow: hidden; }
.splash-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #5eead4, #38bdf8); transform-origin: left; transform: scaleX(0); }
.splash-n { font-size: 12px; color: rgba(255,255,255,.45); font-variant-numeric: tabular-nums; }
html.no-js .splash, .splash.is-done { display: none; }
@media (prefers-reduced-motion: reduce) { .splash { display: none; } }

.curtain { position: fixed; inset: 0; z-index: 1900; pointer-events: none; background: var(--abyss); transform: scaleY(0); transform-origin: bottom; }
.cursor { position: fixed; left: 0; top: 0; z-index: 2500; pointer-events: none; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 99px; border: 1px solid rgba(94,234,212,.7); transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .35s, border-color .35s, opacity .3s; mix-blend-mode: difference; opacity: 0; }
.cursor.is-on { opacity: 1; }
.cursor.is-hover { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(94,234,212,.25); border-color: transparent; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

.reveal { opacity: 0; }
html.no-motion .reveal, html.no-js .reveal { opacity: 1; }
.animate-drop { animation: drop .5s var(--ease) both; }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 1500; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 13px; border-radius: 2px; animation: confetti 1.8s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes confetti { to { transform: translate3d(var(--x), 105vh, 0) rotate(var(--r)); opacity: .2; } }
.skeleton { background: linear-gradient(90deg, rgb(var(--ice)) 0%, rgb(var(--ice) / .45) 50%, rgb(var(--ice)) 100%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.wa-float { position: fixed; right: 24px; bottom: 24px; z-index: 650; width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center; background: #1fae5b; color: #fff; font-size: 28px; box-shadow: 0 16px 34px -12px rgba(16,120,60,.8); transition: transform .5s var(--spring); }
.wa-float:hover { transform: scale(1.08) rotate(-6deg); }
@media (max-width: 1023px) { .wa-float { display: none !important; } }
.skip { position: fixed; left: 8px; top: -60px; z-index: 999; padding: .6rem 1rem; border-radius: 999px; background: rgb(var(--fiord)); color: #fff; font-weight: 600; transition: top .2s; }
.skip:focus { top: 8px; }
/* Eski şablon uyumluluğu (yönetim girişi) */
.meridians { position: absolute; color: #5eead4; pointer-events: none; z-index: -1; }
.meridians path { fill: none; stroke: currentColor; stroke-width: 1; }
.meridians .pole { fill: #e8c480; stroke: none; }

@media (prefers-reduced-motion: reduce) {
  .aurora i, .marquee-track, .tooth-3d svg, .grad-text { animation: none !important; }
  .reveal { opacity: 1 !important; }
}
@media print {
  .nav-shell, .dock, .wa-float, .site-foot, .no-print, .ann-bar, .cursor { display: none !important; }
  body.kd { background: #fff; }
}

/* Büyük tedavi kartı: üstte ikonlu ışık küresi */
.treat-big .ti { width: 100%; height: 200px; border-radius: 22px; background: radial-gradient(70% 80% at 25% 15%, rgba(94,234,212,.45), transparent 60%), radial-gradient(70% 80% at 95% 100%, rgba(56,189,248,.22), transparent 60%), linear-gradient(160deg, #eef8f6, #d6ebe8); color: #0a6f6c; position: relative; overflow: hidden; }
.treat-big[data-cat="estetik"] .ti { background: radial-gradient(70% 80% at 25% 15%, rgba(232,196,128,.5), transparent 60%), radial-gradient(70% 80% at 95% 100%, rgba(167,139,250,.28), transparent 60%), linear-gradient(160deg, #fbf6ee, #ece4f4); color: #7a5418; }
.treat-big .ti::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); transform: translateX(-100%); transition: transform 1.1s var(--ease); }
.treat-big:hover .ti::after { transform: translateX(100%); }
.treat-big .ti svg { width: 5.5rem; height: 5.5rem; stroke-width: 1.2; transition: transform .9s var(--spring); }
.treat-big:hover .ti { transform: none; background: rgba(255,255,255,.06); color: #5eead4; }
.treat-big:hover .ti svg { transform: scale(1.12) rotate(-6deg); }
.treat-big .cat { position: absolute; top: 44px; right: 46px; padding: .3rem .7rem; border-radius: 99px; background: rgba(255,255,255,.75); color: #2d4a4f; backdrop-filter: blur(6px); }
.treat-big:hover .cat { background: rgba(255,255,255,.1); color: #fff; }
html.dark .treat-big .ti { background: radial-gradient(70% 80% at 25% 15%, rgba(94,234,212,.25), transparent 60%), linear-gradient(160deg, #0d343a, #082328); color: #5eead4; }
html.dark .treat-big[data-cat="estetik"] .ti { background: radial-gradient(70% 80% at 25% 15%, rgba(232,196,128,.25), transparent 60%), linear-gradient(160deg, #2a2a33, #15232a); color: #e8c480; }
html.dark .treat-big .cat { background: rgba(0,0,0,.3); color: #d6e6e4; }