@font-face { font-family: Cormorant; src: url('assets/fonts/cormorant-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Cormorant; src: url('assets/fonts/cormorant-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: Marcellus; src: url('assets/fonts/marcellus-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Marcellus; src: url('assets/fonts/marcellus-latin-ext.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Jakarta; src: url('assets/fonts/jakarta-latin.woff2') format('woff2'); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Jakarta; src: url('assets/fonts/jakarta-latin-ext.woff2') format('woff2'); font-weight: 200 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Digits only (U+0030-0039) come from Marcellus, whose figures sit on the baseline; Cormorant's woff2 has no lining figures. Declared after the Cormorant faces so these win for 0-9. */
@font-face { font-family: Cormorant; src: url('assets/fonts/marcellus-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0030-0039; size-adjust: 86%; }
@font-face { font-family: Cormorant; src: url('assets/fonts/marcellus-latin.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0030-0039; size-adjust: 86%; }

/* İkon "fresh clinic": white and ice-blue surfaces, navy ink, logo blue (#00a8ea → #0072a8) as the accent and gradient.
   One deep-blue band (international) and a logo-blue footer give rhythm. Section flow mirrors Dentsun. */
:root {
  --bg: #ffffff; --ice: #f2f8fc; --ice-2: #e6f2f9; --card: #ffffff;
  --ink: #0d2a3a; --text: #0d2a3a; --muted: #557081; --dim: #8aa0ad;
  --line: rgba(13, 42, 58, .09); --line-strong: rgba(13, 42, 58, .16);
  --blue: #0090cc; --blue-deep: #0072a8; --blue-bright: #00a8ea; --sky: #8fd8f7; --navy: #06344d;
  --grad: linear-gradient(120deg, #00a8ea 0%, #0090cc 45%, #0072a8 100%);
  --text-grad: linear-gradient(110deg, #00a8ea 0%, #0072a8 70%);
  --serif: Cormorant, Georgia, serif; --sans: Jakarta, 'Segoe UI', Arial, sans-serif;
  --gutter: clamp(20px, 5.5vw, 100px); --max: 1320px;
  --radius: 14px; --radius-lg: 22px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow: 0 1px 2px rgba(6, 52, 77, .05), 0 18px 40px -22px rgba(6, 52, 77, .28);
  --shadow-lift: 0 2px 6px rgba(6, 52, 77, .06), 0 30px 60px -28px rgba(0, 114, 168, .42);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 15.5px/1.75 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.modal-open { overflow: hidden; }
::selection { background: var(--blue-bright); color: #fff; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
img, video { display: block; max-width: 100%; height: auto; }
figure, p, h1, h2, h3, h4, ul, ol, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; color: var(--ink); }
h2 { font-size: clamp(38px, 4.4vw, 64px); line-height: 1.04; }
h1 em, h2 em, .footer-title em { font-style: normal; background: var(--text-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
h3 { font-size: 20px; line-height: 1.3; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 300; padding: 10px 14px; background: var(--blue-deep); color: #fff; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; font-size: 10.5px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--blue-deep); }
.eyebrow span { color: var(--dim); }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 18px; color: var(--ink); border-bottom: 1px solid var(--line-strong); padding-bottom: 3px; transition: color .25s, border-color .25s; }
.text-link:hover, .text-link:focus-visible { color: var(--blue-deep); border-color: var(--blue); }
.text-link span { color: var(--blue); transition: transform .3s var(--ease); }
.text-link:hover span { transform: translateX(4px); }

/* Buttons */
.button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 54px; padding: 14px 30px; border-radius: 999px; font-weight: 600; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; border: 1px solid transparent; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s, background-color .25s, color .25s, border-color .25s; }
.button span { font-size: 18px; letter-spacing: 0; }
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; }
.button-primary { background: var(--grad); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 16px 34px -16px rgba(0, 144, 204, .75); }
.button-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.button-primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 22px 40px -16px rgba(0, 144, 204, .85); }
.button-primary:hover::after { transform: translateX(120%); }
.button-outline { border-color: var(--line-strong); color: var(--ink); background: #fff; }
.button-outline:hover { border-color: var(--blue); color: #fff; background: var(--grad); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--line); transition: box-shadow .3s; }
.site-header.is-stuck { box-shadow: 0 12px 30px -22px rgba(6, 52, 77, .35); }
.topbar { background: var(--grad); color: #e9f7fe; font-size: 11.5px; letter-spacing: .03em; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 34px; }
.topbar-note .short { display: none; }
.topbar-note { display: flex; align-items: center; gap: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); flex: none; }
.topbar-links { display: flex; gap: 22px; }
.topbar-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.topbar-lang { font-weight: 700; letter-spacing: .16em; color: #fff; }
.header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 80px; }
.scroll-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--progress, 0) * 100%); background: var(--grad); pointer-events: none; }
.brand img { height: 46px; width: auto; }
.menu-toggle { display: none; align-items: center; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.menu-lines { position: relative; width: 24px; height: 1.5px; background: var(--ink); }
.menu-lines::before, .menu-lines::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: inherit; transition: transform .3s var(--ease); }
.menu-lines::before { top: -7px; } .menu-lines::after { top: 7px; }
.menu-toggle[aria-expanded="true"] .menu-lines { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-lines::before { background: var(--ink); transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-lines::after { background: var(--ink); transform: translateY(-7px) rotate(-45deg); }
#navigation { display: flex; align-items: center; gap: 24px; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-list > li { position: relative; }
.nav-list > li > a, .nav-trigger { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--ink); transition: color .25s, background-color .25s; white-space: nowrap; }
.nav-list > li > a:hover, .nav-trigger:hover, .nav-trigger[aria-expanded="true"] { color: var(--blue-deep); background: var(--ice-2); }
.nav-list > li > a:focus-visible, .nav-trigger:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.nav-trigger::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease); }
.nav-trigger[aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); }
/* Dropdown menus (Dentsun menu structure): one panel per group, two columns for Treatments. */
.menu-panel { position: absolute; left: 50%; top: calc(100% + 16px); z-index: 20; width: 300px; padding: 20px 22px 22px; background: #fff; border: 1px solid var(--line); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-lift); transform: translateX(-50%); animation: menu-in .3s var(--ease) both; }
.menu-panel[hidden] { display: none; }
.menu-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -17px; height: 17px; }
.menu-panel::after { content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--blue-bright), transparent); }
.menu-panel.is-wide { width: min(700px, calc(100vw - 40px)); padding: 26px 30px 28px; }
@keyframes menu-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.menu-heading { display: inline-flex; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line-strong); font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--blue-deep); transition: color .2s, border-color .2s; }
.menu-heading:hover, .menu-heading:focus-visible { color: var(--blue-bright); border-color: var(--blue); }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
.menu-column + .menu-column { padding-left: 30px; border-left: 1px solid var(--line); }
.menu-links a { display: block; padding: 7px 0; font-size: 14.5px; line-height: 1.35; color: var(--muted); transition: color .2s, transform .25s var(--ease); }
.menu-links a:hover, .menu-links a:focus-visible, .menu-links a[aria-current="page"] { color: var(--blue-deep); transform: translateX(4px); }
/* Clinic pages nested under "Our Clinics" (user, 15 Oct 2026) */
.menu-sub { margin: 0 0 4px 2px; padding-left: 14px; border-left: 1px solid rgba(0, 144, 204, .3); }
.menu-sub a { padding: 5px 0; font-size: 13.5px; }
.nav-list a[aria-current="page"] { color: var(--blue-deep); }
.nav-cta { min-height: 46px; padding-inline: 22px; font-size: 11px; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Hero: light wash over the clinic film */
.hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 720px; height: calc(100svh - 114px); max-height: 960px; overflow: hidden; background: var(--ice); }
.hero-image { position: absolute; inset: 0; z-index: -4; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero-shade { position: absolute; inset: 0; z-index: -3; background: linear-gradient(96deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .9) 36%, rgba(242, 248, 252, .55) 62%, rgba(230, 242, 249, .2) 100%), linear-gradient(0deg, #fff, transparent 26%); }
.hero-arc { position: absolute; z-index: -2; aspect-ratio: 1; border-radius: 50%; pointer-events: none; border: 1.5px solid transparent; background: linear-gradient(140deg, #00a8ea, #8fd8f755 45%, transparent 75%) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .7; }
.hero-arc-left { left: -350px; top: -440px; width: 490px; }
.hero-arc-right { right: -650px; top: 6%; width: 800px; background: linear-gradient(210deg, transparent 15%, #00a8ea 45%, #8fd8f744 70%, transparent) border-box; }
.hero-copy { padding: 30px 0 160px; }
.hero .eyebrow { margin-bottom: 34px; }
.hero .eyebrow::after { content: ""; width: 60px; height: 1.5px; background: var(--grad); }
.hero h1 { font-size: clamp(54px, 8vw, 126px); line-height: .98; letter-spacing: -.035em; max-width: 11ch; }
.hero-description { max-width: 600px; margin: 32px 0 32px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.7; color: var(--muted); }
.hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; margin: 0 0 36px; }
.hero-facts { display: flex; gap: 34px; }
.hero-facts li { display: grid; gap: 4px; }
.hero-facts b { font: 400 34px/1 var(--serif); background: var(--text-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-facts span { font-size: 9px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.hero-partners { display: flex; align-items: center; gap: 18px; padding-left: 30px; border-left: 1px solid var(--line-strong); }
.hero-partners-label { font-size: 9px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--blue-deep); white-space: nowrap; }
.partner-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.partner-logos img { display: block; width: auto; height: var(--h, 18px); filter: grayscale(1) contrast(1.1); opacity: .62; transition: filter .35s, opacity .35s; }
.partner-logos li:hover img { filter: none; opacity: 1; }
.hero-cta { min-width: 300px; justify-content: space-between; }
.hero-bottom { position: absolute; left: 0; right: 0; bottom: 82px; display: flex; justify-content: space-between; align-items: end; }
.scroll-cue, .explore { display: flex; align-items: center; gap: 20px; font-size: 9.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.scroll-cue > span { height: 56px; border-left: 1.5px solid var(--blue); padding-left: 12px; color: var(--blue); font-size: 24px; animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 50% { transform: translateY(6px); } }
.explore { text-align: right; color: var(--ink); }
.explore .circle { display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid var(--line-strong); border-radius: 50%; background: rgba(255, 255, 255, .7); backdrop-filter: blur(6px); font-size: 28px; color: var(--blue-deep); transition: background-color .3s, color .3s, transform .3s var(--ease), border-color .3s; }
.explore:hover .circle { background: var(--blue); color: #fff; border-color: transparent; transform: translate(2px, -2px); }
.film-toggle { position: absolute; right: calc(var(--gutter) + 230px); bottom: 98px; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255, 255, 255, .75); backdrop-filter: blur(6px); color: var(--ink); font-size: 9.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; transition: border-color .25s, color .25s; }
.film-toggle:hover { border-color: var(--blue); color: var(--blue-deep); }
.film-toggle-icon { font-size: 13px; letter-spacing: 0; }
.hero-tagline { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 30px; display: flex; align-items: center; gap: 24px; color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: .38em; text-transform: uppercase; }
.hero-tagline::before { content: ''; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong)); flex: 1; }
.hero-copy > * { opacity: 0; animation: rise .9s var(--ease) forwards; }
.hero-copy > :nth-child(1) { animation-delay: .15s } .hero-copy > :nth-child(2) { animation-delay: .3s } .hero-copy > :nth-child(3) { animation-delay: .45s } .hero-copy > :nth-child(4) { animation-delay: .6s } .hero-copy > :nth-child(5) { animation-delay: .75s }

/* Section furniture */
.section { position: relative; isolation: isolate; overflow: hidden; padding: clamp(72px, 8vw, 120px) 0; }
.sec-arc { position: absolute; top: -460px; right: -40px; z-index: -1; width: 580px; height: 790px; border-radius: 50%; border-right: 1.5px solid rgba(0, 168, 234, .2); pointer-events: none; }
.brand-mark { position: absolute; z-index: -1; width: clamp(220px, 20vw, 340px); height: auto; opacity: .07; pointer-events: none; right: -55px; top: 15px; transform: rotate(-9deg); border-radius: 50%; }
.stories .brand-mark, .international .brand-mark, .contact .brand-mark { left: -95px; right: auto; top: auto; bottom: 20px; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.strip-head { display: flex; justify-content: space-between; align-items: end; margin: clamp(40px, 4vw, 60px) 0 20px; }
.strip-title { display: flex; align-items: center; gap: 18px; font: 400 clamp(22px, 2vw, 28px)/1 var(--serif); }
.strip-title::after { content: ""; width: clamp(40px, 8vw, 120px); height: 1.5px; background: linear-gradient(90deg, var(--blue-bright), transparent); }
.strip-nav { display: flex; gap: 10px; }
.strip-btn { width: 46px; height: 46px; border: 1px solid var(--line-strong); border-radius: 50%; background: #fff; color: var(--ink); font-size: 17px; transition: background-color .25s, color .25s, border-color .25s; }
.strip-btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.image-link { position: relative; display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ice); }
.image-link img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.image-link:hover img { transform: scale(1.04); }
.image-expand { position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--blue-deep); font-size: 16px; box-shadow: var(--shadow); transition: background-color .25s, color .25s; }
.image-link:hover .image-expand { background: var(--blue); color: #fff; }

/* 01 Treatments */
.treatments { background: linear-gradient(180deg, #fff 0%, var(--ice) 100%); }
.package-head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 44px; margin: 0 0 52px; }
.package-head h2 { font-size: clamp(72px, 7vw, 118px); line-height: .86; letter-spacing: -.035em; }
.package-head-intro { max-width: 470px; margin-top: 30px; padding: 14px 0 4px 34px; border-left: 1.5px solid var(--blue-bright); }
.package-head-intro p { margin-bottom: 22px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.package-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.package-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); transition: transform .45s var(--ease), border-color .45s, box-shadow .45s; }
.package-card:hover, .package-card:focus-within { transform: translateY(-8px); box-shadow: var(--shadow-lift); border-color: rgba(0, 168, 234, .3); }
.package-photo { position: relative; aspect-ratio: 1.15; overflow: hidden; background: var(--ice); }
.package-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transition: transform 1.2s var(--ease); }
.package-card:hover .package-photo img { transform: scale(1.05); }
.package-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 52, 77, .5), transparent 34%); pointer-events: none; }
.package-num { position: absolute; z-index: 1; top: 18px; left: 20px; display: flex; align-items: center; gap: 14px; font: 22px/1 var(--serif); color: #fff; }
.package-num::after { content: ''; width: 34px; height: 1px; background: rgba(255, 255, 255, .7); }
.package-tag { position: absolute; z-index: 1; top: 18px; right: 18px; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); text-align: right; text-transform: uppercase; letter-spacing: .22em; font: 9px/1.8 var(--serif); }
.package-card-body { display: flex; flex: 1; flex-direction: column; padding: 22px 24px 24px; }
.package-title { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.package-title h3 { font-size: clamp(28px, 2.3vw, 36px); letter-spacing: -.03em; padding-right: 52px; }
.package-icon { position: absolute; right: 0; top: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--ice-2); color: var(--blue-deep); }
.package-icon svg { width: 100%; height: 100%; }
.package-meta { margin: 14px 0 18px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--blue-deep); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.8; min-height: 3.4em; }
.package-includes { display: grid; gap: 9px; margin: 0 0 24px; color: var(--muted); font-size: 14px; }
.package-includes li { display: flex; align-items: baseline; gap: 12px; line-height: 1.55; }
.package-includes li::before { content: '✓'; flex-shrink: 0; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ice-2); color: var(--blue-deep); font-size: 11px; transform: translateY(2px); }
.package-cta { margin-top: auto; width: 100%; min-height: 50px; justify-content: space-between; font-size: 11px; }
.package-card:hover .package-cta { background: var(--grad); color: #fff; border-color: transparent; }
.package-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.package-strip > p { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 9.5px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; white-space: nowrap; }
.package-strip span { font: 12px var(--serif); letter-spacing: .25em; color: var(--blue-deep); }
.package-strip i { width: 32px; height: 1.5px; background: var(--grad); }
.all-treatments { display: flex; flex-wrap: wrap; gap: 8px; }
.all-treatments li { padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 12.5px; color: var(--ink); transition: border-color .25s, color .25s, background-color .25s; }
.all-treatments li:hover { border-color: var(--blue); color: var(--blue-deep); background: var(--ice-2); }

/* 02 Stories */
.stories { background: var(--ice); }
.stories-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; z-index: -3; }
.stories-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, var(--ice) 0%, rgba(242, 248, 252, .9) 34%, rgba(242, 248, 252, .82) 66%, var(--ice) 100%); }
.stories-head { display: grid; grid-template-columns: auto 1fr; gap: clamp(28px, 4vw, 64px); align-items: end; margin-bottom: clamp(70px, 10vh, 130px); }
.stories-intro { margin: 0 0 12px; padding-left: clamp(28px, 4vw, 64px); border-left: 1.5px solid var(--blue-bright); max-width: 380px; color: var(--muted); }
.stories-grid { display: flex; gap: clamp(12px, 1.3vw, 20px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 18px; margin-inline: -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.stories-grid::-webkit-scrollbar { display: none; }
.stories-grid:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
.story-card { position: relative; flex: 0 0 clamp(210px, 19vw, 272px); scroll-snap-align: start; aspect-ratio: 9 / 16; border: 3px solid #fff; border-radius: var(--radius-lg); overflow: hidden; background: var(--navy); box-shadow: var(--shadow); transition: transform .45s var(--ease), box-shadow .45s; }
.story-card:hover, .story-card:focus-within { transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.story-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.story-play { position: absolute; inset: 0; }
.story-play::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 52, 77, .82), transparent 42%); transition: opacity .3s; }
.story-play::after { content: ""; position: absolute; left: 50%; top: 46%; width: clamp(52px, 4.2vw, 66px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230090cc' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center / 40% no-repeat; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); transition: transform .35s var(--ease); }
.story-card:hover .story-play::after, .story-play:focus-visible::after { transform: translate(-50%, -50%) scale(1.1); }
.story-card.is-playing .story-play::before, .story-card.is-playing .story-play::after, .story-card.is-playing figcaption { opacity: 0; }
.story-play:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.story-card figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #fff; pointer-events: none; transition: opacity .3s; }

/* 03 Why */
.why-head { display: flex; justify-content: space-between; align-items: center; gap: 40px; margin-bottom: clamp(36px, 3.6vw, 52px); }
.why-head h2 { font-size: clamp(52px, 6vw, 98px); line-height: .96; letter-spacing: -.03em; }
.why-intro { max-width: 380px; padding-left: 32px; border-left: 1.5px solid var(--blue-bright); }
.why-intro p { margin-bottom: 18px; color: var(--muted); font-size: 15px; }
.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.why-card { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; min-height: 440px; padding: 34px 30px 106px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: radial-gradient(ellipse at 92% 0%, var(--ice-2), transparent 55%), #fff; box-shadow: var(--shadow); transition: transform .45s var(--ease), box-shadow .45s, border-color .45s; }
.why-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.why-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.why-card:hover::after { transform: scaleX(1); }
.why-figure { display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.why-figure b { font: 400 clamp(58px, 4.8vw, 82px)/.92 var(--serif); letter-spacing: -.04em; background: var(--text-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.why-figure span { color: var(--blue-deep); font-size: 9.5px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }
.why-card h3 { font-size: clamp(24px, 2vw, 31px); line-height: 1.08; margin-bottom: 14px; }
.why-card > p:not(.why-figure) { color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.why-icon { position: absolute; right: 26px; bottom: 26px; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--ice-2); color: var(--blue-deep); transition: background-color .35s, color .35s; }
.why-card:hover .why-icon { background: var(--grad); color: #fff; }
.why-icon svg { width: 22px; height: 22px; }
.why-brands { overflow: hidden; display: grid; gap: 18px; margin-top: 24px; padding: 24px 34px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--ice); }
.why-brands > p { display: flex; align-items: center; gap: 26px; color: var(--blue-deep); font-size: 9.5px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; white-space: nowrap; }
.why-brands > p::after { content: ''; width: clamp(60px, 10vw, 150px); height: 1.5px; background: linear-gradient(90deg, var(--blue-bright), transparent); }
.brand-marquee { display: flex; overflow: hidden; margin: 0 -34px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.brand-marquee ul { flex: none; display: flex; align-items: center; animation: brand-marquee 46s linear infinite; }
.brand-marquee:hover ul { animation-play-state: paused; }
.brand-marquee li.is-logo img { width: auto; height: var(--h, 24px); filter: grayscale(1) contrast(1.1); opacity: .7; transition: filter .35s, opacity .35s; }
.brand-marquee:hover li.is-logo img { filter: none; opacity: 1; }
.brand-marquee li { flex: none; display: flex; align-items: center; min-height: 48px; padding: 0 clamp(28px, 3vw, 48px); border-right: 1px solid var(--line-strong); font-family: var(--serif); font-size: 18px; letter-spacing: .03em; color: var(--ink); white-space: nowrap; }
@keyframes brand-marquee { to { transform: translateX(-100%); } }

/* 04 Clinic */
.clinic { background: linear-gradient(180deg, #fff 0%, var(--ice) 100%); }
.clinic-head { display: grid; grid-template-columns: auto 1fr; gap: clamp(28px, 4vw, 64px); align-items: end; margin-bottom: clamp(36px, 3.6vw, 54px); }
.clinic-intro { margin: 0 0 14px; padding-left: clamp(28px, 4vw, 64px); border-left: 1.5px solid var(--blue-bright); max-width: 460px; color: var(--muted); }
.clinic-intro-wrap .text-link { margin: 4px 0 12px clamp(28px, 4vw, 64px); }
.clinic-film { position: relative; width: 82%; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); }
.clinic-film .image-link { border: 0; border-radius: 0; }
.clinic-film img { aspect-ratio: 16 / 9; max-height: 72vh; }
.clinic-film figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 22px 28px; font-size: 9.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #fff; background: linear-gradient(0deg, rgba(6, 52, 77, .7), transparent); pointer-events: none; }
.clinic-film-label::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 12px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 10px var(--sky); vertical-align: middle; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.clinic-strip { display: flex; gap: clamp(12px, 1.4vw, 20px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 6px 2px 18px; margin-inline: -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.clinic-strip::-webkit-scrollbar { display: none; }
.clinic-strip:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
.clinic-card { flex: 0 0 clamp(220px, 21vw, 300px); scroll-snap-align: start; }
.clinic-card .image-link { aspect-ratio: 3 / 4; border-radius: var(--radius-lg); transition: transform .45s var(--ease), box-shadow .45s; }
.clinic-card .image-link:hover, .clinic-card .image-link:focus-visible { transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.clinic-card figcaption { display: flex; gap: 12px; padding-top: 12px; font-size: 9.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.clinic-card figcaption span:first-child { color: var(--blue-deep); }

/* 05 Journey (.yk-): self-contained, tokens set on the section root */
.yk { --yk-accent: #00a8ea; --yk-accent-2: #0072a8; --yk-stroke: #0b5f8a; --yk-soft: #dcEFF8; --yk-rail: rgba(13, 42, 58, .12); --yk-dot: 54px; background: radial-gradient(ellipse at 0% 0%, var(--ice-2), transparent 50%), radial-gradient(ellipse at 100% 100%, #e3f4fb, transparent 55%), #fff; }
.yk-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: clamp(36px, 4vw, 56px); }
.yk-kicker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px; font-size: 10.5px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--blue-deep); }
.yk-kicker i { width: 28px; height: 1.5px; background: var(--grad); }
.yk-kicker span { display: inline-grid; place-items: center; min-width: 38px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--grad); color: #fff; letter-spacing: .1em; }
.yk h2 { font-size: clamp(48px, 5.6vw, 92px); line-height: .98; letter-spacing: -.03em; }
.yk-sub { max-width: 520px; margin-top: 20px; color: var(--muted); font-size: 16px; }
.yk-controls { display: flex; align-items: center; gap: 10px; flex: none; }
.yk-btn, .yk-play { display: inline-grid; place-items: center; min-width: 48px; height: 48px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255, 255, 255, .8); color: var(--ink); transition: border-color .25s, background-color .25s, color .25s; }
.yk-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.yk-play { display: inline-flex; gap: 10px; padding: 0 20px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.yk-play-icon { position: relative; width: 10px; height: 12px; }
.yk-play-icon::before, .yk-play-icon::after { content: ""; position: absolute; top: 0; width: 3px; height: 12px; border-radius: 1px; background: var(--blue-deep); }
.yk-play-icon::before { left: 0; } .yk-play-icon::after { right: 0; }
.yk-play[aria-pressed="false"] .yk-play-icon::before { left: 1px; width: 0; height: 0; border-radius: 0; background: none; border-left: 10px solid var(--blue-deep); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.yk-play[aria-pressed="false"] .yk-play-icon::after { display: none; }
.yk-btn:hover, .yk-play:hover { border-color: var(--blue); color: var(--blue-deep); background: #fff; }
.yk-btn:focus-visible, .yk-play:focus-visible, .yk-step:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; }

.yk-track { position: relative; margin-bottom: 30px; }
.yk-rail, .yk-fill { position: absolute; height: 2px; margin-top: -1px; border-radius: 2px; pointer-events: none; }
.yk-rail { background: var(--yk-rail); }
.yk-fill { background: linear-gradient(90deg, var(--yk-accent), var(--yk-accent-2)); box-shadow: 0 0 10px rgba(0, 168, 234, .55); transform-origin: left; transform: scaleX(0); }
.yk-runner { position: absolute; left: -5px; width: 10px; height: 10px; margin-left: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--yk-accent), 0 0 16px 4px rgba(0, 168, 234, .7); opacity: 0; pointer-events: none; transition: opacity .3s; }
.yk.is-playing .yk-runner { opacity: 1; }
.yk-steps { position: relative; display: grid; grid-template-columns: repeat(var(--yk-n, 5), 1fr); }
.yk-step { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; text-align: center; }
.yk-dot { position: relative; display: grid; place-items: center; width: var(--yk-dot); height: var(--yk-dot); margin-bottom: 6px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: #fff; font: 400 21px/1 var(--serif); color: var(--dim); transition: transform .4s var(--ease), background-color .4s, color .4s, border-color .4s, box-shadow .4s; }
.yk-name { font-family: var(--serif); font-size: 19px; line-height: 1.2; color: var(--muted); transition: color .3s; }
.yk-place { font-size: 9.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); transition: color .3s; }
.yk-step.is-done .yk-dot, .yk-step.is-active .yk-dot { border-color: transparent; background: linear-gradient(135deg, var(--yk-accent), var(--yk-accent-2)); color: #fff; }
.yk-step.is-active .yk-dot { transform: scale(1.1); box-shadow: 0 12px 26px -10px rgba(0, 144, 204, .8); }
.yk-step.is-active .yk-dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--yk-accent); animation: yk-ring 1.8s ease-out infinite; }
.yk-step.is-active .yk-name, .yk-step.is-done .yk-name { color: var(--ink); }
.yk-step.is-active .yk-place { color: var(--yk-accent); }
.yk-step:hover .yk-dot { border-color: var(--yk-accent); }
@keyframes yk-ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }

.yk-stage { position: relative; display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(24px, 3vw, 44px); border: 1px solid rgba(0, 168, 234, .22); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .72); backdrop-filter: blur(10px); box-shadow: var(--shadow-lift); overflow: hidden; touch-action: pan-y; }
.yk-art { display: grid; aspect-ratio: 4 / 3; }
.yk-scene { grid-area: 1 / 1; width: 100%; height: 100%; opacity: 0; transition: opacity .5s var(--ease); }
.yk-scene.is-on { opacity: 1; }
.yk-panels { display: grid; }
.yk-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s .45s; }
.yk-panel.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .55s var(--ease) .12s, transform .55s var(--ease) .12s, visibility 0s; }
.yk-meta { font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--blue-deep); }
.yk-meta span { color: var(--dim); margin: 0 6px; }
.yk-panel h3 { margin: 12px 0 14px; font-size: clamp(32px, 3.2vw, 50px); line-height: 1.04; letter-spacing: -.02em; }
.yk-panel > p:not(.yk-meta) { max-width: 560px; color: var(--muted); font-size: 16px; line-height: 1.75; }
.yk-gains { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.yk-gains li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; background: var(--ice-2); font-size: 13px; font-weight: 500; color: var(--ink); }
.yk-gains li::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--yk-accent), var(--yk-accent-2)); color: #fff; font-size: 11px; }
.yk-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--yk-rail); }
.yk-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--yk-accent), var(--yk-accent-2)); transform-origin: left; transform: scaleX(0); }

/* Scene drawing vocabulary */
.yk-scene .ln { fill: none; stroke: var(--yk-stroke); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.yk-scene .ln.pp { fill: #fff; }
.yk-scene .ln-soft { stroke: #9cc8de; }
.yk-scene .ln-dash { stroke: var(--yk-accent); stroke-width: 2.5; stroke-dasharray: 6 9; }
.yk-scene .sf { fill: var(--yk-soft); }
.yk-scene .ac { fill: var(--yk-accent); }
.yk-scene .wt { fill: #fff; }
.yk-scene .cl { fill: #fff; stroke: #9cc8de; stroke-width: 2; }
.yk-scene .wl { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.yk-scene .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.yk-scene .pop { opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; }
.yk-scene .rise { opacity: 0; transform: translateY(16px); }
.yk-scene.is-on .draw { animation: yk-draw 1.1s var(--d, 0s) var(--ease) forwards; }
.yk-scene.is-on .pop { animation: yk-pop .55s var(--d, 0s) cubic-bezier(.3, 1.6, .5, 1) forwards; }
.yk-scene.is-on .rise { animation: yk-rise .7s var(--d, 0s) var(--ease) forwards; }
@keyframes yk-draw { to { stroke-dashoffset: 0; } }
@keyframes yk-pop { to { opacity: 1; transform: scale(1); } }
@keyframes yk-rise { to { opacity: 1; transform: none; } }
.yk-typing circle { animation: yk-blink 1.2s ease-in-out infinite; }
.yk-typing circle:nth-of-type(2) { animation-delay: .2s; } .yk-typing circle:nth-of-type(3) { animation-delay: .4s; }
@keyframes yk-blink { 50% { opacity: .25; } }
.yk-plane { offset-path: path('M40 236C110 120 230 96 300 132'); offset-rotate: auto; offset-distance: 0%; opacity: 0; }
.yk-scene.is-on .yk-plane { animation: yk-fly 3.4s .6s ease-in-out infinite; }
@keyframes yk-fly { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.yk-cloud { animation: yk-drift 9s ease-in-out infinite alternate; }
.yk-cloud-2 { animation-duration: 12s; }
@keyframes yk-drift { to { transform: translateX(26px); } }
.yk-wins rect { fill: var(--yk-soft); }
.yk-scene.is-on .yk-wins rect { animation: yk-light .4s var(--d) forwards; }
@keyframes yk-light { to { fill: #8fd8f7; } }
.yk-scan { transform: translateY(54px); opacity: 0; }
.yk-scan-glow { fill: rgba(0, 168, 234, .14); }
.yk-scene.is-on .yk-scan { animation: yk-scan 2.6s 1s ease-in-out infinite; }
@keyframes yk-scan { 0% { transform: translateY(58px); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(196px); opacity: 0; } }
.yk-ping { offset-path: path('M150 150C190 90 230 90 250 112'); offset-distance: 0%; opacity: 0; }
.yk-scene.is-on .yk-ping { animation: yk-ping 2.2s 1.2s ease-in-out infinite; }
@keyframes yk-ping { 0% { offset-distance: 0%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.yk-scene.is-on .yk-heart { animation: yk-pop .55s var(--d) cubic-bezier(.3, 1.6, .5, 1) forwards, yk-beat 1.4s 2.8s ease-in-out infinite; }
@keyframes yk-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .yk-scene .draw { stroke-dashoffset: 0; }
  .yk-scene .pop, .yk-scene .rise { opacity: 1; transform: none; }
  .yk-plane { offset-distance: 70%; opacity: 1; }
  .yk-wins rect { fill: #8fd8f7; }
  .yk-panel, .yk-scene { transition: none; }
}

/* 06 International: the one deep-blue band */
.international { background: radial-gradient(ellipse at 100% 0%, rgba(0, 168, 234, .45), transparent 50%), linear-gradient(135deg, #06456a, var(--navy) 60%, #052c42); color: #dcedf6; }
.international .eyebrow { color: var(--sky); }
.international h2 { color: #fff; font-size: clamp(46px, 5.4vw, 86px); line-height: .98; letter-spacing: -.03em; }
.international h2 em { background: linear-gradient(110deg, #8fd8f7, #ffffff); -webkit-background-clip: text; background-clip: text; }
.intl-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 7%; align-items: center; }
.intl-grid p:not(.eyebrow) { color: #bcd8e7; margin-top: 22px; }
.intl-grid .certificate-label { color: #fff; font-size: 13px; letter-spacing: .05em; padding-left: 16px; border-left: 2px solid var(--sky); }
.intl-grid .button { margin-top: 32px; background: #fff; color: var(--blue-deep); border-color: #fff; }
.intl-grid .button:hover { background: var(--sky); color: var(--navy); }
.certificate-frame { padding: 10px; border: 0; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .14); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6); transition: transform .45s var(--ease); }
.certificate-frame:hover { transform: translateY(-6px); }
.certificate-frame img { width: 100%; border-radius: 10px; }
.intl-marks { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: clamp(40px, 5vw, 64px); padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .16); }
.intl-marks img { width: 140px; height: auto; background: #fff; border-radius: 10px; padding: 6px 10px; }
.intl-marks p { font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #bcd8e7; }
.intl-marks b { color: #fff; }

/* 07 Doctors */
.doctors { background: linear-gradient(180deg, #fff 0%, var(--ice) 100%); }
.doctors > .wrap > .eyebrow { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; }
.doctors > .wrap > .eyebrow::before { content: ''; width: 46px; height: 1.5px; background: var(--grad); }
.doctor-heading { display: grid; grid-template-columns: 1.45fr 1fr auto; align-items: end; gap: 38px; margin-bottom: 34px; }
.doctor-heading h2 { font-size: clamp(52px, 5.4vw, 90px); line-height: .96; letter-spacing: -.03em; }
.doctor-heading > p { align-self: center; color: var(--muted); max-width: 360px; border-left: 1.5px solid var(--blue-bright); padding-left: 30px; font-size: 15px; line-height: 1.7; }
.doctor-heading .text-link { white-space: nowrap; margin-bottom: 7px; }
.doctor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 80px; gap: 30px; align-items: start; }
.team-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.team-tab { display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 10px 20px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; transition: background-color .25s, color .25s, border-color .25s; }
.team-tab span { display: grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--ice-2); color: var(--blue-deep); font-size: 10.5px; letter-spacing: 0; }
.team-tab:hover { border-color: var(--blue); color: var(--blue-deep); }
.team-tab[aria-selected="true"] { background: var(--grad); border-color: transparent; color: #fff; }
.team-tab[aria-selected="true"] span { background: rgba(255, 255, 255, .22); color: #fff; }
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.team-member .image-link { aspect-ratio: 4 / 5; border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow); transition: transform .45s var(--ease), box-shadow .45s; }
.team-member .image-link img { object-position: 50% 0%; }
.team-member .image-link:hover, .team-member .image-link:focus-visible { transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.team-member figcaption { padding: 18px 2px 0; }
.team-member h3 { font-size: 21px; }
.team-member figcaption p { margin-top: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--blue-deep); }
.team-member figcaption small { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.team-member.is-lead { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
.team-member.is-lead .image-link { flex: 1; min-height: 0; aspect-ratio: auto; }
.team-member.is-lead .image-link img { position: absolute; inset: 0; object-position: 50% 8%; }
.team-member.is-lead h3 { font-size: 30px; }
.doctor-rail { display: flex; flex-direction: column; align-items: start; gap: 22px; padding-top: 74px; color: var(--muted); font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3em; line-height: 2; }
.doctor-rail i { height: 56px; width: 1.5px; background: linear-gradient(180deg, var(--blue-bright), transparent); }
.brand-signoff { display: flex; align-items: center; gap: 28px; margin-top: 44px; color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .3em; line-height: 1.9; }
.brand-signoff > span { height: 1.5px; flex: 1; background: linear-gradient(90deg, transparent, var(--blue-bright), transparent); opacity: .6; }
.brand-signoff > p:first-child { border-left: 1.5px solid var(--blue-bright); padding-left: 24px; }

/* 08 Contact */
.contact { background: #fff; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.contact-note { margin: 22px 0 36px; font-size: 17px; line-height: 1.7; color: var(--muted); }
.contact-lines { display: grid; margin-bottom: 30px; border-top: 1px solid var(--line); }
.contact-lines li { display: grid; grid-template-columns: 100px 1fr; align-items: baseline; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact-lines span { font-size: 9.5px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--blue-deep); }
.contact-lines a { font-family: var(--serif); font-size: 22px; transition: color .25s; }
.contact-lines a:hover { color: var(--blue-deep); }
.clinic-addresses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 30px; }
.clinic-addresses > div { padding: 18px 18px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ice); font-size: 13px; line-height: 1.6; color: var(--muted); transition: border-color .3s, box-shadow .3s; }
.clinic-addresses > div:hover { border-color: rgba(0, 168, 234, .35); box-shadow: var(--shadow); }
.clinic-addresses h3 { font-size: 20px; margin-bottom: 6px; }
.clinic-addresses address { margin-bottom: 8px; }
.clinic-addresses a { color: var(--blue-deep); font-weight: 600; }
.clinic-addresses > div { display: flex; flex-direction: column; align-items: flex-start; }
.clinic-addresses .addr-map { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 8px 14px; border: 1px solid var(--blue); border-radius: 12px; background: #fff; color: var(--blue-deep); font-size: 12.5px; font-weight: 600; line-height: 1.2; transition: background-color .25s, color .25s, border-color .25s; }
.clinic-addresses .addr-map svg { width: 16px; height: 16px; color: var(--blue); transition: color .25s; }
.clinic-addresses .addr-map:hover, .clinic-addresses .addr-map:focus-visible { background: var(--blue); border-color: var(--blue); color: #fff; }
.clinic-addresses .addr-map:hover svg, .clinic-addresses .addr-map:focus-visible svg { color: #fff; }
.social { display: flex; gap: 10px; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); transition: color .25s, border-color .25s, background-color .25s; }
.social a:hover, .social a:focus-visible { color: #fff; background: var(--blue); border-color: var(--blue); }
.social svg { width: 17px; height: 17px; }
.consult-form { position: relative; display: grid; gap: 18px; padding: 40px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); overflow: hidden; }
.consult-form::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad); }
.consult-form h3 { font-size: 28px; margin-bottom: 4px; }
.field { display: grid; gap: 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label { font-size: 9.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.field label small { font-weight: 400; letter-spacing: .08em; color: var(--dim); text-transform: none; }
.field input, .field select, .field textarea { width: 100%; padding: 13px 16px; border: 1px solid var(--line-strong); border-radius: 12px; font: inherit; font-size: 15px; color: var(--ink); background: var(--ice); transition: border-color .25s, box-shadow .25s, background-color .25s; }
.field select { appearance: none; background: var(--ice) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230072a8' stroke-width='1.8' d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 16px no-repeat; }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); background-color: #fff; box-shadow: 0 0 0 4px rgba(0, 168, 234, .14); }
.field textarea { resize: vertical; min-height: 92px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--muted); }
.consent input { margin-top: 4px; accent-color: var(--blue); }
.form-status { min-height: 1.2em; font-size: 13.5px; color: var(--blue-deep); }
.form-status.is-error { color: #c62f3a; }
.form-note { font-size: 12px; color: var(--dim); }

/* Footer: logo-blue */
.site-footer { background: radial-gradient(ellipse at 0% 0%, rgba(143, 216, 247, .25), transparent 45%), linear-gradient(140deg, #0081bb 0%, #0072a8 45%, #05547d 100%); color: #d7eef9; padding: 64px 0 30px; }
.footer-cta { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title actions" "title facts"; align-items: end; gap: 24px 48px; padding: clamp(34px, 3.6vw, 56px); border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .1); backdrop-filter: blur(8px); margin-bottom: 64px; }
.footer-cta > div:first-child { grid-area: title; }
.footer-cta .eyebrow { color: #cdeefc; }
.footer-title { color: #fff; font-size: clamp(34px, 3.8vw, 56px); line-height: 1.04; }
.footer-title em { background: linear-gradient(110deg, #bfeaff, #fff); -webkit-background-clip: text; background-clip: text; }
.footer-cta-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.footer-cta-actions .button-primary { background: #fff; color: var(--blue-deep); box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .4); }
.footer-cta-actions .button-outline { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
.footer-cta-actions .button-outline:hover { background: #fff; color: var(--blue-deep); }
.footer-facts { grid-area: facts; display: flex; justify-content: flex-end; gap: 30px; }
.footer-facts li { display: grid; gap: 4px; text-align: right; }
.footer-facts b { font: 400 28px/1 var(--serif); color: #fff; }
.footer-facts span { font-size: 9px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #cdeefc; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.footer-logo { height: 48px; width: auto; margin-bottom: 20px; }
.footer-about p { font-size: 13.5px; max-width: 380px; }
.footer-mark { width: 130px; height: auto; margin-top: 20px; background: #fff; border-radius: 10px; padding: 6px 10px; }
.footer-col h3 { font-family: var(--sans); font-size: 9.5px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.footer-col li + li { margin-top: 9px; }
.footer-col a { font-size: 14px; color: #d7eef9; transition: color .25s; }
.footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 24px 0 14px; font-size: 12px; color: #b8dff2; }
.footer-bottom a { color: #fff; letter-spacing: .14em; text-transform: uppercase; font-size: 10px; font-weight: 600; }

/* Floating elements */
.whatsapp-float { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 12px 14px; border-radius: 999px; background: #25d366; color: #fff; font-weight: 600; font-size: 13.5px; box-shadow: 0 14px 30px -10px rgba(37, 211, 102, .6); transition: transform .3s var(--ease); }
.whatsapp-float:hover { transform: translateY(-2px); }
.whatsapp-float svg { width: 22px; height: 22px; }
.journey-tab { position: fixed; left: 0; top: 50%; z-index: 9; padding: 26px 11px; border-radius: 0 12px 12px 0; background: var(--grad); color: #fff; box-shadow: 0 14px 34px -12px rgba(0, 114, 168, .7); opacity: 0; pointer-events: none; transform: translate(-100%, -50%); transition: opacity .35s, transform .35s var(--ease); }
.journey-tab.is-visible { opacity: 1; pointer-events: auto; transform: translate(0, -50%); }
.journey-tab span { display: block; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.contact-bar { display: none; }

/* Lightbox */
.lightbox { padding: 56px 24px 18px; border: 0; border-radius: var(--radius-lg); background: #fff; color: var(--ink); width: min(1200px, 95vw); max-width: 95vw; max-height: 95svh; box-shadow: var(--shadow-lift); }
.lightbox::backdrop { background: rgba(6, 52, 77, .8); backdrop-filter: blur(8px); }
.lightbox-stage { display: flex; justify-content: center; }
.lightbox-stage img { max-height: 72svh; max-width: 100%; width: auto; object-fit: contain; border-radius: 10px; }
.lightbox-close { position: absolute; top: 10px; right: 15px; width: 40px; height: 40px; font-size: 20px; color: var(--muted); }
.lightbox-close:hover { color: var(--ink); }
.lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 18px; }
.lightbox-bar button { width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 18px; }
.lightbox-bar p { text-align: center; font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.lightbox-bar button:disabled { opacity: .25; cursor: default; }

/* ==== Dentsun layout language (10 Oct 2026): framed panels, Cormorant italic accents, cut-corner cards,
   square buttons, dark-over-film hero. Colours stay İkon (white / ice / navy / logo blue). ==== */
body { background: #e9f2f8; }
.section { margin: clamp(14px, 1.6vw, 24px) auto; width: calc(100% - 2 * clamp(14px, 1.6vw, 24px)); max-width: 1800px; border: 1px solid rgba(0, 144, 204, .26); border-radius: 26px; }
h1, h2, h3 { letter-spacing: -.02em; }
h1 em, h2 em, .footer-title em { font-style: italic; display: inline-block; padding-bottom: .24em; margin-bottom: -.24em; padding-right: .06em; }   /* .24em: the italic g and p descenders were cut by background-clip (20 Oct 2026) */
h2 { font-size: clamp(44px, 5vw, 76px); line-height: 1; }

/* Buttons: square, sentence case (Dentsun) */
.button { border-radius: 3px; gap: 26px; padding: 15px 26px; min-height: 50px; font-size: 13.5px; font-weight: 500; letter-spacing: .01em; text-transform: none; }
.button span { font-size: 20px; }
.button-outline { background: transparent; border-color: var(--blue); color: var(--ink); }
.button-outline:hover { background: var(--grad); border-color: transparent; color: #fff; }

/* Header */
.header-inner { min-height: 92px; }
.site-header { border-bottom-color: rgba(0, 144, 204, .35); }
.nav-cta { background: transparent; color: var(--blue-deep); border: 1px solid var(--blue); box-shadow: none; font-size: 13px; min-height: 48px; }
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--grad); color: #fff; border-color: transparent; }
.nav-list > li > a, .nav-trigger { border-radius: 3px; }

/* Hero: navy veil over the film so the clinic stays visible, white type */
.hero { background: #04202f; height: calc(100svh - 128px); min-height: 760px; }
.hero-copy { padding-top: 64px; }
.hero-shade { background: linear-gradient(90deg, rgba(3, 24, 36, .92), rgba(3, 24, 36, .74) 31%, rgba(3, 24, 36, .28) 66%, rgba(3, 24, 36, .14)), linear-gradient(0deg, rgba(3, 24, 36, .88), transparent 36%, rgba(3, 24, 36, .18)); }
.hero h1 { color: #fff; font-size: clamp(60px, 8.6vw, 146px); line-height: 1.02; letter-spacing: -.035em; max-width: 12ch; }
.hero h1 em { background: linear-gradient(110deg, #8fd8f7 0%, #e9f7fe 48%, #5cc6f2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.hero .eyebrow { color: #8fd8f7; }
.hero .eyebrow span { color: rgba(255, 255, 255, .4); }
.hero .eyebrow::after { background: #8fd8f7; height: 1px; }
.hero-description { color: #e3f0f7; }
.hero-facts b { background: linear-gradient(110deg, #8fd8f7, #ffffff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-facts span { color: #b7d9ea; }
.hero-partners { border-left-color: rgba(255, 255, 255, .25); }
.hero-partners-label { color: #8fd8f7; }
.partner-logos img, .partner-logos li:hover img { filter: brightness(0) invert(1); opacity: .82; }
.partner-logos li:hover img { opacity: 1; }
.scroll-cue, .explore { color: #d6ecf7; }
.scroll-cue > span { border-left-color: #8fd8f7; color: #8fd8f7; }
.explore .circle { background: transparent; border-color: rgba(143, 216, 247, .7); color: #fff; backdrop-filter: none; }
.explore:hover .circle { background: #fff; color: var(--blue-deep); }
.film-toggle { border-radius: 3px; background: rgba(3, 24, 36, .35); border-color: rgba(143, 216, 247, .5); color: #fff; }
.film-toggle:hover { border-color: #fff; color: #fff; }
.hero-tagline { color: #9fdcf7; }
.hero-tagline::before { background: #00a8ea; opacity: .7; }
.hero-arc { opacity: .9; background: linear-gradient(140deg, #8fd8f7, #0090cc55 45%, transparent 75%) border-box; }
.hero-arc-right { background: linear-gradient(210deg, transparent 15%, #8fd8f7 45%, #0090cc44 70%, transparent) border-box; }

/* 01 Treatments: cut-corner cards with a blue hairline */
.package-head h2 { font-size: clamp(84px, 7.6vw, 130px); line-height: .84; }
.package-head-intro .text-link { font-size: 21px; }
.package-card { padding: 1px; border: 0; border-radius: 0; overflow: visible; box-shadow: none; background: linear-gradient(135deg, #8fd8f7, #0090cc 30%, #0b5f8a 72%, #8fd8f7); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); }
.package-card-inner { display: flex; flex: 1; flex-direction: column; min-width: 0; background: linear-gradient(160deg, #ffffff, #f6fbfe 60%, #eef6fb); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); }
.package-card:hover, .package-card:focus-within { transform: translateY(-6px); box-shadow: none; filter: drop-shadow(0 0 18px rgba(0, 144, 204, .28)); }
.package-photo { border-bottom: 1px solid rgba(0, 144, 204, .25); }
.package-title h3 { font-size: clamp(32px, 2.6vw, 42px); }
.package-icon { border-radius: 0; background: none; border-left: 1px solid rgba(0, 144, 204, .3); padding: 0 0 0 14px; color: var(--blue); }
.package-includes li::before { width: auto; height: auto; background: none; color: var(--blue); font-size: 16px; transform: none; }
.package-cta { justify-content: center; gap: 14px; padding: 14px 16px; white-space: nowrap; font-size: 13px; }
.package-strip span { font-size: 13px; }

/* 03 Why: arc line across each card (Dentsun), outlined icon */
.why-head h2 { font-size: clamp(60px, 6.4vw, 106px); }
.why-card { border-radius: 16px; border-color: rgba(0, 144, 204, .3); box-shadow: none; background: radial-gradient(ellipse at 88% 4%, rgba(0, 168, 234, .12), transparent 46%), linear-gradient(170deg, #fff, #f3f9fd); }
.why-card::after { left: 0; right: 0; bottom: 0; height: 46%; z-index: -1; transform: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%2300a8ea' stop-opacity='0'/%3E%3Cstop offset='.55' stop-color='%2300a8ea'/%3E%3Cstop offset='1' stop-color='%230072a8' stop-opacity='.35'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 100C30 72 62 48 100 30' fill='none' stroke='url(%23g)' stroke-opacity='.18' stroke-width='7' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 100C30 72 62 48 100 30' fill='none' stroke='url(%23g)' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%; }
.why-card:hover { border-color: rgba(0, 144, 204, .55); box-shadow: 0 24px 50px -28px rgba(0, 114, 168, .5); }
.why-card:hover::after { transform: none; }
.why-card h3 { font-size: clamp(28px, 2.3vw, 36px); }
.why-icon { background: #fff; border: 1px solid rgba(0, 144, 204, .45); }
.why-brands { border-radius: 16px; border-color: rgba(0, 144, 204, .3); background: #fff; }

/* 04 Clinic */
.image-expand { border-radius: 2px; border: 1px solid var(--blue); box-shadow: none; }
.clinic-card .image-link, .clinic-film { border-radius: 16px; }

/* 05 Journey */
.yk h2 { font-size: clamp(54px, 6vw, 100px); }
.yk-panel h3 { font-size: clamp(36px, 3.6vw, 58px); }
.yk-name { font-size: 22px; }
.yk-btn, .yk-play { border-color: var(--blue); }

/* 06 International */
.international h2 { font-size: clamp(52px, 5.8vw, 92px); }
.intl-grid .button { border-radius: 3px; }
.certificate-frame { border-radius: 4px; border: 1px solid rgba(143, 216, 247, .55); }

/* 07 Doctors: uniform square portraits in one row (Dentsun team grid) */
.doctor-heading h2 { font-size: clamp(58px, 5.8vw, 96px); }
.team-tab { border-radius: 999px; }
.team-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 22px; }
.team-member .image-link { aspect-ratio: 1; border: 1px solid rgba(0, 144, 204, .38); border-radius: 14px; box-shadow: none; }
.team-member .image-link img { object-position: 50% 10%; }
.team-member.is-lead { grid-column: auto; grid-row: auto; display: block; }
.team-member.is-lead .image-link { flex: none; aspect-ratio: 1; }
.team-member.is-lead .image-link img { position: static; object-position: 50% 10%; }
.team-member h3, .team-member.is-lead h3 { font-size: 24px; }
.team-member figcaption small { font-size: 13px; }

/* 08 Contact + footer */
.contact-lines a { font-size: 25px; }
.consult-form { border-radius: 16px; border-color: rgba(0, 144, 204, .3); }
.consult-form h3 { font-size: 32px; }
.field input, .field select, .field textarea { border-radius: 4px; }
.footer-cta { border-radius: 26px; }
.footer-title { font-size: clamp(40px, 4.2vw, 64px); }
.footer-title em { display: block; }
.footer-cta-actions .button { border-radius: 3px; }


/* ==== 10 Oct: hero clinics + ratings, cycling partner logos, Dentsun-style WhatsApp ==== */
.hero { height: auto; min-height: calc(100svh - 128px); max-height: none; }
.hero-copy { padding: 64px 0 96px; }
.hero h1 { max-width: none; }
.partner-logos { position: relative; display: block; width: 150px; height: 40px; }
.partner-logos li { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; animation: logo-cycle 12.5s linear infinite; animation-delay: calc(var(--i) * 2.5s); }
.partner-logos img { height: calc(var(--h, 18px) * 1.15); max-width: 100%; object-fit: contain; }
@keyframes logo-cycle { 0% { opacity: 0; transform: translateY(14px); } 3%, 17% { opacity: 1; transform: none; } 20%, 100% { opacity: 0; transform: translateY(-14px); } }
.hero-clinics { margin: 0 0 36px; }
.hero-clinics-label { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; font-size: 9.5px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: #8fd8f7; }
.hero-clinics-label::after { content: ""; width: 60px; height: 1px; background: rgba(143, 216, 247, .6); }
.hero-clinics ul { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); gap: 12px; }
.hc { display: flex; align-items: stretch; border: 1px solid rgba(143, 216, 247, .35); border-radius: 6px; background: rgba(3, 24, 36, .45); backdrop-filter: blur(10px); transition: border-color .25s, background-color .25s; }
.hc:hover { border-color: rgba(143, 216, 247, .8); background: rgba(3, 24, 36, .62); }
.hc-main { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px; color: #fff; }
.hc-name { font-family: var(--serif); font-size: 22px; line-height: 1.05; }
.hc-name small { display: block; margin-top: 3px; font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #9fc9dc; }
.hc-rate { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.hc-rate b { font: 400 21px/1 var(--serif); color: #fff; }
.hc-g { width: 15px; height: 15px; padding: 1.5px; border-radius: 50%; background: #fff; }
.hc-stars { color: #fbbc05; letter-spacing: 1px; font-size: 12px; }
.hc-main:focus-visible, .hc-wa:focus-visible { outline: 2px solid #8fd8f7; outline-offset: -3px; }
.hc-wa { display: grid; place-items: center; flex: none; width: 54px; border-left: 1px solid rgba(143, 216, 247, .3); color: #25d366; transition: background-color .25s, color .25s; }
.hc-wa:hover { background: #25d366; color: #fff; }
.hc-wa svg { width: 24px; height: 24px; }
.whatsapp-float { right: 20px; bottom: 20px; display: grid; place-items: center; width: 58px; height: 58px; padding: 0; gap: 0; border: 1px solid var(--blue); border-radius: 50%; background: radial-gradient(circle at 30% 25%, #ffffff, #e6f2f9 70%); color: var(--blue-deep); box-shadow: 0 12px 30px -10px rgba(0, 114, 168, .55), inset 0 0 0 4px #fff, inset 0 0 0 5px rgba(0, 144, 204, .2); transition: background .25s, color .25s, transform .3s, border-color .25s, opacity .3s; }
.whatsapp-float::after { content: ""; position: absolute; top: 3px; right: 3px; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; background: #25d366; }
.whatsapp-float:hover, .whatsapp-float:focus-visible { background: var(--grad); color: #fff; border-color: transparent; transform: translateY(-3px); }
.whatsapp-float svg { width: 28px; height: 28px; }
.whatsapp-float span { display: none; }

/* Responsive */
@media (max-width: 1180px) {
  .nav-list > li > a, .nav-trigger { padding: 9px 8px; font-size: 12.5px; }
  #navigation { gap: 14px; }
  .package-grid, .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .doctor-layout { grid-template-columns: 1fr; }
  .doctor-rail { display: none; }
  .clinic-addresses { grid-template-columns: 1fr; }
  .film-toggle { right: calc(var(--gutter) + 210px); }
}
@media (max-width: 1100px) {
  .yk h2 { font-size: clamp(44px, 5.4vw, 64px); }
  .yk-stage { grid-template-columns: minmax(0, 340px) 1fr; }
  .yk-name { font-size: 17px; }
}
/* 13 Oct: the full desktop menu needs ~900 px next to the logo, so below 1181 px the menu folds into the drawer
   (was 960 px; between 961 and 1180 px the menu ran off the page and squeezed the logo to nothing). script.js matches 1181. */
@media (max-width: 1180px) {
  .menu-toggle { display: inline-flex; }
  #navigation { position: absolute; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: 100%; display: none; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px var(--gutter) 28px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lift); max-height: calc(100vh - 114px); overflow: auto; }
  #navigation.is-open { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li > a, .nav-trigger { width: 100%; justify-content: space-between; padding: 16px 0; border-radius: 0; border-bottom: 1px solid var(--line); font-size: 15px; }
  .nav-list > li > a:hover, .nav-trigger:hover, .nav-trigger[aria-expanded="true"] { background: transparent; }
  .menu-panel, .menu-panel.is-wide { position: static; width: auto; padding: 14px 7px 20px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; transform: none; animation: none; }
  .menu-panel::before, .menu-panel::after { display: none; }
  .menu-grid { grid-template-columns: 1fr; gap: 18px; }
  .menu-column + .menu-column { padding-left: 0; border-left: 0; }
  .menu-links a { padding: 9px 0; font-size: 15px; }
  .menu-sub a { padding: 7px 0; font-size: 14px; }
  .nav-cta { margin-top: 10px; }
  .topbar-links li:not(.topbar-lang) { display: none; }
}
@media (max-width: 960px) {
  .hero { height: auto; min-height: 0; max-height: none; }
  .hero-shade { background: linear-gradient(180deg, rgba(3, 24, 36, .82) 0%, rgba(3, 24, 36, .7) 55%, rgba(3, 24, 36, .9) 100%); }
  .hero-copy { padding: 72px 0 64px; }
  .hero-clinics ul { grid-template-columns: 1fr; max-width: 420px; }
  .hero-bottom { bottom: 70px; }
  .film-toggle { right: auto; left: var(--gutter); bottom: 24px; }
  .hero-tagline { display: none; }
  .explore .circle { width: 56px; height: 56px; font-size: 22px; }
  .package-head, .clinic-head, .stories-head, .why-head, .contact-grid, .intl-grid { grid-template-columns: 1fr; display: grid; }
  .why-head { gap: 22px; }
  .package-head-intro { margin-top: 0; }
  .stories-head { margin-bottom: 44px; }
  .doctor-heading { grid-template-columns: 1fr; gap: 20px; }
  .clinic-film { width: 100%; }
  .intl-grid { gap: 36px; }
  .contact-grid { gap: 48px; }
}
@media (max-width: 760px) {
  /* Journey fits one screen: dots only, art above text, controls at the bottom */
  .yk { --yk-dot: 40px; min-height: max(560px, 100svh); padding: 28px 0 22px; display: flex; flex-direction: column; }
  .yk-wrap { display: flex; flex-direction: column; flex: 1; }
  .yk-head { display: contents; }
  .yk-intro { order: 0; }
  .yk-kicker { margin-bottom: 10px; }
  .yk h2 { font-size: clamp(38px, 10.5vw, 52px); }
  .yk-sub { display: none; }
  .yk-track { order: 1; margin: 18px 0 16px; }
  .yk-name, .yk-place { display: none; }
  .yk-step { padding: 0; }
  .yk-dot { margin-bottom: 0; font-size: 17px; }
  .yk-stage { order: 2; flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 20px; min-height: 0; }
  .yk-art { flex: 1 1 auto; min-height: 150px; aspect-ratio: auto; }
  .yk-panel h3 { margin: 6px 0 8px; font-size: 28px; }
  .yk-panel > p:not(.yk-meta) { font-size: 14.5px; line-height: 1.6; }
  .yk-gains { margin-top: 12px; gap: 6px; }
  .yk-gains li { font-size: 12px; padding: 5px 12px 5px 6px; }
  .yk-controls { order: 3; justify-content: space-between; margin-top: 14px; }
  .yk-btn, .yk-play { height: 48px; }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  .package-grid, .why-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .team-member h3, .team-member.is-lead h3 { font-size: 20px; }
  .team-member figcaption small { font-size: 12.5px; }
  .why-card { min-height: 0; padding-bottom: 96px; }
  .field-row { grid-template-columns: 1fr; }
  .consult-form { padding: 30px 22px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-cta { grid-template-columns: 1fr; grid-template-areas: "title" "actions" "facts"; }
  .footer-cta-actions, .footer-facts { justify-content: flex-start; }
  .footer-facts li { text-align: left; }
  .hero h1 { font-size: clamp(52px, 14vw, 72px); }
  .hero h1 em { white-space: normal; }
  .hero .eyebrow { gap: 8px; font-size: 9px; letter-spacing: .2em; white-space: nowrap; }
  .hero .eyebrow::after { display: none; }
  .hero-facts b { font-size: 28px; }
  .hero-partners { padding-left: 0; border-left: 0; flex-wrap: wrap; }
  .partner-logos { gap: 10px 20px; }
  .hero-cta { min-width: 0; width: 100%; }
  .scroll-cue { display: none; }
  .hero-bottom { justify-content: flex-end; }
  .topbar-note { font-size: 11px; }
  .topbar-note .long { display: none; } .topbar-note .short { display: inline; }
  .whatsapp-float { display: none; }
  .contact-lines li { grid-template-columns: 1fr; gap: 4px; }
  .contact-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .95); border-top: 1px solid var(--line); backdrop-filter: blur(12px); }
  .contact-bar-cta { flex: 1; display: grid; place-items: center; min-height: 48px; border-radius: 999px; background: var(--grad); color: #fff; font-weight: 700; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }
  .contact-bar-circle { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--blue-deep); }
  .contact-bar-circle.is-wa { background: #25d366; border-color: #25d366; color: #fff; }
  .contact-bar svg { width: 20px; height: 20px; }
  body { padding-bottom: 72px; }
  .journey-tab { display: none; }
}

/* ==== 10 Oct: header + hero = exactly one screen (no top bar). --hh is the measured header height (script.js).
   Sizes scale with viewport height so the hero content always fits. ==== */
html { scroll-padding-top: calc(var(--hh, 92px) + 4px); }
.hero { height: calc(100svh - var(--hh, 92px)); min-height: 520px; max-height: none; align-items: stretch; }
.hero-copy { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: clamp(18px, 4vh, 56px) 0 clamp(52px, 8vh, 84px); }
.hero .eyebrow { margin-bottom: clamp(10px, 2.6vh, 34px); }
.hero h1 { font-size: clamp(44px, min(8.6vw, 11vh), 146px); }
.hero-description { margin: clamp(10px, 2.4vh, 32px) 0; font-size: clamp(15px, min(1.3vw, 2.2vh), 19px); }
.hero-proof { margin-bottom: clamp(10px, 2.4vh, 34px); }
.hero-facts b { font-size: clamp(24px, 3.8vh, 34px); }
.hero-clinics { margin-bottom: clamp(12px, 2.8vh, 36px); }
.hero-clinics-label { margin-bottom: clamp(6px, 1.4vh, 14px); }
.hc-main { padding: clamp(8px, 1.3vh, 12px) 14px; gap: clamp(2px, .6vh, 6px); }
.hero-tagline { bottom: clamp(14px, 3vh, 30px); }

/* WhatsApp: same round button in the float and the phone contact bar, green status dot blinks */
@keyframes wa-blink { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); } 50% { opacity: .35; box-shadow: 0 0 0 5px rgba(37, 211, 102, 0); } }
.whatsapp-float::after { animation: wa-blink 1.6s ease-in-out infinite; }

@media (max-width: 960px) {
  .hero { height: calc(100svh - var(--hh, 92px)); min-height: 520px; }
  .hero-copy { padding: clamp(14px, 3vh, 40px) 0 clamp(16px, 3vh, 40px); }
}
@media (max-width: 640px) {
  /* the fixed contact bar (72px) sits over the bottom of the screen: keep hero content above it */
  .hero-copy { padding: clamp(10px, 2.2vh, 24px) 0 calc(72px + clamp(10px, 2vh, 20px)); justify-content: center; }
  .hero h1 { font-size: clamp(38px, min(12.5vw, 6.4vh), 60px); }
  .hero-description { font-size: clamp(13.5px, 1.85vh, 15.5px); line-height: 1.55; }
  .hero-proof { gap: clamp(8px, 1.6vh, 18px) 24px; }
  .hero-facts { gap: 26px; }
  .hero-facts b { font-size: clamp(22px, 3.2vh, 28px); }
  .hero-partners { width: 100%; justify-content: space-between; gap: 12px; flex-wrap: nowrap; }
  .partner-logos { width: 120px; height: 34px; }
  .hero-clinics ul { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: 8px; }
  .hc { flex-direction: column; }
  .hc-main { padding: 8px 9px; gap: 3px; }
  .hc-name { font-size: 17px; }
  .hc-name small { display: none; }
  .hc-rate { gap: 5px; }
  .hc-rate b { font-size: 16px; }
  .hc-stars { display: none; }
  .hc-g { width: 13px; height: 13px; }
  .hc-wa { width: auto; height: 32px; border-left: 0; border-top: 1px solid rgba(143, 216, 247, .3); }
  .hc-wa svg { width: 20px; height: 20px; }
  .hero-cta { min-height: 46px; }
  .contact-bar-circle.is-wa { position: relative; background: radial-gradient(circle at 30% 25%, #ffffff, #e6f2f9 70%); border: 1px solid var(--blue); color: var(--blue-deep); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(0, 144, 204, .2); }
  .contact-bar-circle.is-wa svg { width: 24px; height: 24px; }
  .contact-bar-circle.is-wa::after { content: ""; position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #25d366; animation: wa-blink 1.6s ease-in-out infinite; }
}
@media (max-height: 560px) and (min-width: 641px) { .hero-clinics-label, .hero-tagline { display: none; } }
@media (max-width: 640px) and (max-height: 720px) {
  .hero .eyebrow { margin-bottom: 8px; }
  .hero h1 { font-size: clamp(34px, 6vh, 44px); }
  .hero-description { margin: 8px 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .hero-clinics-label { display: none; }
  .hero-proof { margin-bottom: 10px; gap: 6px 20px; }
  .hero-clinics { margin-bottom: 10px; }
  .hc-main { padding: 6px 8px; }
  .hc-name { font-size: 15px; }
  .hc-wa { height: 28px; }
}
.hero-cta { align-self: flex-start; }
@media (max-width: 640px) { .hero-cta { align-self: stretch; } }

/* ==== 10 Oct: hero = main column + clinic column on the right; WhatsApp is one round button style everywhere,
   the float waits until the hero has scrolled away and opens a clinic chooser ==== */
.hero-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 340px); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero-main { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.hero-clinics { align-self: end; margin: 0 0 clamp(4px, 1vh, 12px); }
.hero-clinics-label { margin-bottom: 12px; }
.hero-clinics ul { grid-template-columns: 1fr; gap: 10px; }
.hc { align-items: center; gap: 4px; padding-right: 14px; border: 1px solid rgba(143, 216, 247, .3); border-radius: 14px; background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); backdrop-filter: blur(14px); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .6); }
.hc:hover { border-color: rgba(143, 216, 247, .7); background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06)); }
.hc-main { padding: clamp(10px, 1.6vh, 15px) 16px; gap: 6px; }
.hc-name { font-size: clamp(21px, 2.8vh, 26px); }
.hc-name small { letter-spacing: .2em; }
.hc-rate { flex-wrap: wrap; row-gap: 2px; }
.hc-maps { margin-left: 4px; font-size: 10px; letter-spacing: .06em; color: #9fc9dc; transition: color .2s; }
.hc-main:hover .hc-maps { color: #fff; }
.wa-round, .hc-wa.wa-round { position: relative; display: grid; place-items: center; flex: none; width: 46px; height: 46px; border: 1px solid var(--blue); border-radius: 50%; background: radial-gradient(circle at 30% 25%, #ffffff, #e6f2f9 70%); color: var(--blue-deep); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(0, 144, 204, .2), 0 10px 24px -12px rgba(0, 0, 0, .55); transition: background .25s, color .25s, transform .25s, border-color .25s; }
.wa-round::after { content: ""; position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #25d366; animation: wa-blink 1.6s ease-in-out infinite; }
.wa-round:hover, .wa-round:focus-visible { background: var(--grad); color: #fff; border-color: transparent; transform: translateY(-2px); }
.wa-round svg, .hc-wa.wa-round svg { width: 22px; height: 22px; }

.whatsapp-float { cursor: pointer; }
.whatsapp-float.is-waiting { opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; }
.whatsapp-float[aria-expanded="true"] { background: var(--grad); color: #fff; border-color: transparent; }
.wa-menu { position: fixed; right: 20px; bottom: 92px; z-index: 60; width: min(340px, calc(100vw - 28px)); padding: 16px; border: 1px solid rgba(0, 144, 204, .28); border-radius: 18px; background: #fff; box-shadow: 0 30px 60px -24px rgba(6, 52, 77, .45); transform-origin: bottom right; animation: wa-pop .28s var(--ease); }
.wa-menu[hidden] { display: none; }
@keyframes wa-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.wa-menu-title { margin: 2px 4px 12px; font-size: 9.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--blue-deep); }
.wa-menu ul { display: grid; gap: 8px; }
.wa-menu a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); transition: border-color .2s, background-color .2s; }
.wa-menu a:hover, .wa-menu a:focus-visible { border-color: var(--blue); background: var(--ice); outline: none; }
.wa-menu-icon { position: relative; display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--ice-2); color: var(--blue-deep); }
.wa-menu-icon::after { content: ""; position: absolute; top: 0; right: 0; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: #25d366; }
.wa-menu-icon svg { width: 19px; height: 19px; }
.wa-menu b { display: block; font: 400 21px/1.1 var(--serif); }
.wa-menu small { font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.wa-menu-go { margin-left: auto; color: var(--blue); font-size: 18px; transition: transform .25s var(--ease); }
.wa-menu a:hover .wa-menu-go { transform: translateX(3px); }

@media (max-width: 1100px) {
  .hero-copy { grid-template-columns: minmax(0, 1fr) 280px; }
  .hc-maps { display: none; }
}
@media (max-width: 960px) {
  .hero-copy { grid-template-columns: 1fr; align-content: center; gap: clamp(12px, 2.4vh, 28px); }
  .hero-clinics { align-self: auto; margin: 0; }
  .hero-clinics ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .wa-menu { left: 14px; right: 14px; width: auto; bottom: calc(80px + env(safe-area-inset-bottom)); }
  .hero-copy { gap: clamp(10px, 2vh, 18px); }
  .hero-clinics-label { margin-bottom: 8px; }
  .hc { flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 10px; border-radius: 12px; }
  .hc-main { padding: 9px 10px 6px; gap: 3px; }
  .hc-name { font-size: 17px; }
  .hc-maps, .hc-stars, .hc-name small { display: none; }
  .hc-wa.wa-round { align-self: center; width: 36px; height: 36px; border: 1px solid var(--blue); border-top: 1px solid var(--blue); }
  .hc-wa.wa-round svg { width: 18px; height: 18px; }
  .wa-round::after { width: 9px; height: 9px; }
}
@media (max-width: 640px) and (max-height: 720px) {
  .hc-main { padding: 6px 8px 4px; }
  .hc-name { font-size: 15px; }
  .hc { padding-bottom: 7px; }
  .hc-wa.wa-round { width: 32px; height: 32px; }
}
.hc { background: linear-gradient(135deg, rgba(4, 32, 47, .78), rgba(4, 32, 47, .58)); border-color: rgba(143, 216, 247, .32); }
.hc:hover { background: linear-gradient(135deg, rgba(4, 32, 47, .9), rgba(4, 32, 47, .7)); }
@media (max-width: 1100px) { .hero-partners { padding-left: 0; border-left: 0; } }

/* ==== 10 Oct (late): lining figures everywhere (Cormorant's old-style 3/4/5/9 dropped below the line and were
   clipped in gradient text), compact clinic cards, no hero CTA on phones ==== */
html { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.hero-facts b, .why-figure b, .footer-facts b, .package-num, .hcard-rate b { line-height: 1.05; padding-bottom: .06em; }

.hero-clinics ul { gap: 10px; }
.hcard { display: grid; gap: 8px; padding: 14px 16px 14px; border: 1px solid rgba(143, 216, 247, .32); border-radius: 14px; background: linear-gradient(135deg, rgba(4, 32, 47, .8), rgba(4, 32, 47, .6)); backdrop-filter: blur(14px); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .6); color: #fff; transition: border-color .25s; }
.hcard:hover { border-color: rgba(143, 216, 247, .7); }
.hcard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hcard-name { font: 400 clamp(21px, 2.8vh, 25px)/1.05 var(--serif); }
.hcard-name small { display: block; margin-top: 3px; font: 600 8.5px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #9fc9dc; }
.wa-round.hcard-wa { width: 38px; height: 38px; }
.wa-round.hcard-wa svg { width: 19px; height: 19px; }
.hcard-wa.wa-round::after { width: 9px; height: 9px; }
.hcard-rate { display: flex; align-items: center; gap: 7px; }
.hcard-rate .hc-g { width: 15px; height: 15px; padding: 1.5px; border-radius: 50%; background: #fff; }
.hcard-rate b { font: 400 20px/1 var(--serif); }
.hcard-stars { color: #fbbc05; font-size: 12px; letter-spacing: 1px; }
.hcard-reviews { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid rgba(143, 216, 247, .4); border-radius: 999px; font-size: 10.5px; font-weight: 500; letter-spacing: .04em; color: #cfe8f5; transition: background-color .2s, color .2s, border-color .2s; }
.hcard-reviews:hover, .hcard-reviews:focus-visible { background: #fff; color: var(--blue-deep); border-color: #fff; outline: none; }
.hcard-reviews span { font-size: 11px; }

@media (max-width: 960px) {
  .hero-clinics ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hero-cta { display: none; }
  .hcard { gap: 6px; padding: 9px 9px 10px; border-radius: 12px; }
  .hcard-top { gap: 4px; align-items: flex-start; }
  .hcard-name { font-size: 16px; }
  .hcard-name small { display: none; }
  .wa-round.hcard-wa { width: 30px; height: 30px; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px rgba(0, 144, 204, .2); }
  .wa-round.hcard-wa svg { width: 16px; height: 16px; }
  .hcard-wa.wa-round::after { width: 8px; height: 8px; top: -1px; right: -1px; }
  .hcard-rate { gap: 5px; }
  .hcard-rate b { font-size: 16px; }
  .hcard-rate .hc-g { width: 13px; height: 13px; }
  .hcard-stars { display: none; }
  .hcard-reviews { padding: 3px 9px; font-size: 9.5px; }
}
.hcard-reviews { white-space: nowrap; }
@media (max-width: 640px) { .hcard-reviews { padding: 3px 8px; font-size: 9px; gap: 4px; } }

/* ==== 11 Oct: hero redesign after the client's mockup ====
   left: pill eyebrow, big serif headline, stats with dividers, CTA + "watch video";
   right: frosted "Our Clinics in Istanbul" panel with branch photos; bottom: feature bar. Header + hero = one screen. */
.lang-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 4px; font-size: 13px; font-weight: 600; color: var(--ink); }
.lang-pill svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.nav-cta, .nav-cta:hover { border-radius: 14px; background: var(--grad); color: #fff; border: 0; min-height: 50px; padding: 12px 22px; gap: 14px; font-size: 14px; box-shadow: 0 14px 30px -14px rgba(0, 144, 204, .8); }
.nav-cta:hover { transform: translateY(-1px); }

.hero { display: flex; flex-direction: column; align-items: stretch; }
.hero-shade { background: linear-gradient(90deg, rgba(3, 30, 46, .9) 0%, rgba(3, 30, 46, .7) 34%, rgba(3, 30, 46, .25) 62%, rgba(3, 30, 46, .1) 100%), linear-gradient(0deg, rgba(3, 30, 46, .7), transparent 30%); }
.hero-copy { flex: 1; min-height: 0; height: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); gap: clamp(28px, 4vw, 72px); align-items: center; padding: clamp(14px, 3vh, 44px) 0; }
.hero-copy > * { animation: rise .9s var(--ease) both; opacity: 1; }
.hero-main { display: flex; flex-direction: column; align-items: flex-start; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 16px; margin-bottom: clamp(12px, 3vh, 34px); }
.hero-eyebrow span { padding: 9px 18px; border: 1px solid rgba(143, 216, 247, .35); border-radius: 999px; background: rgba(4, 32, 47, .55); backdrop-filter: blur(8px); font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #e3f0f7; }
.hero-eyebrow i { font-style: normal; margin: 0 8px; color: rgba(255, 255, 255, .5); }
.hero-eyebrow::after { content: ""; width: 34px; height: 1px; background: rgba(143, 216, 247, .7); }
.hero h1 { font-size: clamp(44px, min(7vw, 10.5vh), 128px); line-height: 1; max-width: none; }
.hero h1 em { padding-right: .08em; }
.hero-description { max-width: 520px; margin: clamp(10px, 2.4vh, 28px) 0 clamp(12px, 3vh, 34px); color: #dcecf5; font-size: clamp(15px, min(1.35vw, 2.3vh), 20px); line-height: 1.55; }
.hero-facts { display: flex; gap: 0; margin-bottom: clamp(14px, 3.4vh, 40px); }
.hero-facts li { display: grid; gap: 2px; padding: 0 clamp(18px, 2.2vw, 34px); border-left: 1px solid rgba(255, 255, 255, .25); }
.hero-facts li:first-child { padding-left: 0; border-left: 0; }
.hero-facts b { font-size: clamp(28px, 4.6vh, 42px); color: #fff; background: none; -webkit-text-fill-color: currentColor; }
.hero-facts span { font-size: 14px; font-weight: 400; letter-spacing: .01em; text-transform: none; color: #cfe3ee; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
.hero-btn { display: inline-flex; align-items: center; gap: 18px; min-height: clamp(52px, 7.4vh, 64px); padding: 0 34px; border-radius: 16px; background: var(--grad); color: #fff; font-size: 17px; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 20px 40px -18px rgba(0, 168, 234, .9); transition: transform .25s var(--ease), box-shadow .25s; }
.hero-btn span { font-size: 20px; transition: transform .25s var(--ease); }
.hero-btn:hover { transform: translateY(-2px); }
.hero-btn:hover span { transform: translateX(4px); }
.hero-watch { display: inline-flex; align-items: center; gap: 14px; color: #fff; font-size: 15px; font-weight: 500; }
.hero-watch-icon { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 50%; transition: background-color .25s, border-color .25s; }
.hero-watch-icon::before { content: ""; margin-left: 4px; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.hero-watch:hover .hero-watch-icon { background: var(--blue); border-color: var(--blue); }
.hero-watch:focus-visible { outline: 2px solid #8fd8f7; outline-offset: 4px; border-radius: 999px; }

.cl-panel { align-self: center; padding: clamp(14px, 2.2vh, 22px) 14px clamp(10px, 1.6vh, 16px); border: 1px solid rgba(255, 255, 255, .6); border-radius: 22px; background: rgba(240, 247, 252, .82); backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 30px 70px -30px rgba(3, 30, 46, .7); }
.cl-title { margin: 0 8px clamp(8px, 1.6vh, 14px); font: 400 clamp(20px, 2.8vh, 24px)/1.15 var(--serif); color: var(--ink); }
.cl-panel ul { display: grid; gap: clamp(6px, 1vh, 10px); }
.cl-row { display: flex; align-items: center; gap: 10px; padding: clamp(7px, 1.1vh, 10px); padding-right: 12px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(6, 52, 77, .06), 0 10px 24px -18px rgba(6, 52, 77, .35); transition: box-shadow .25s, transform .25s var(--ease); }
.cl-row:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(6, 52, 77, .06), 0 18px 30px -18px rgba(0, 114, 168, .45); }
.cl-link { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0; color: var(--ink); }
.cl-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 10px; }
.cl-photo { flex: none; width: clamp(64px, 10vh, 86px); height: clamp(64px, 10vh, 86px); border-radius: 12px; object-fit: cover; }
.cl-text { display: grid; gap: 2px; min-width: 0; }
.cl-name { font: 400 clamp(19px, 2.6vh, 22px)/1.1 var(--serif); }
.cl-district { font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.cl-rate { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.cl-rate .hc-g { width: 15px; height: 15px; padding: 0; background: none; }
.cl-rate b { font: 600 15px/1 var(--sans); color: var(--ink); }
.cl-stars { color: #f5b400; font-size: 12px; letter-spacing: 1px; }
.wa-round.cl-wa { width: 40px; height: 40px; }
.wa-round.cl-wa svg { width: 19px; height: 19px; }
.cl-wa.wa-round::after { width: 9px; height: 9px; }
.cl-all { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: clamp(8px, 1.4vh, 14px); padding: 6px; font-size: 14px; font-weight: 600; color: var(--blue-deep); }
.cl-all span { transition: transform .25s var(--ease); }
.cl-all:hover span { transform: translateX(4px); }

.hero-features { position: relative; background: linear-gradient(180deg, rgba(3, 30, 46, .55), rgba(3, 30, 46, .82)); border-top: 1px solid rgba(143, 216, 247, .22); backdrop-filter: blur(10px); }
.hero-features ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hero-features li { display: flex; align-items: center; gap: 14px; min-width: 0; padding: clamp(14px, 2.4vh, 24px) clamp(12px, 1.6vw, 24px); border-left: 1px solid rgba(255, 255, 255, .14); }
.hero-features li:first-child { padding-left: 0; border-left: 0; }
.hf-icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border: 1px solid rgba(143, 216, 247, .45); border-radius: 50%; color: #fff; }
.hf-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.hero-features b { display: block; font-size: 14.5px; font-weight: 600; color: #fff; }
.hero-features small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: #b9d5e3; }
.hf-logos { display: block; margin-top: 4px; }
.hf-logos .partner-logos { width: 120px; height: 24px; }
.hf-logos .partner-logos img { height: calc(var(--h, 18px) * .95); }

.video-dialog { width: min(1100px, 94vw); padding: 0; border: 0; border-radius: 18px; background: #000; overflow: hidden; }
.video-dialog::backdrop { background: rgba(3, 30, 46, .88); backdrop-filter: blur(6px); }
.video-frame { aspect-ratio: 16 / 9; }
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-close { position: absolute; top: 10px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 18px; }

@media (max-width: 1180px) {
  .hero-features li { gap: 10px; }
  .hf-icon { width: 42px; height: 42px; }
  .hf-icon svg { width: 20px; height: 20px; }
  .hero-features small { font-size: 11.5px; }
}
@media (max-width: 960px) {
  .hero-copy { grid-template-columns: 1fr; align-content: center; gap: clamp(14px, 2.6vh, 28px); }
  .cl-panel { align-self: stretch; }
  .cl-panel ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cl-row { flex-direction: column; align-items: stretch; padding: 8px; }
  .cl-link { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cl-photo { width: 100%; height: clamp(60px, 9vh, 110px); }
  .wa-round.cl-wa { position: absolute; top: 14px; right: 14px; }
  .cl-row { position: relative; }
  .hero-features ul { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .hero-features ul::-webkit-scrollbar { display: none; }
  .hero-features li { flex: 0 0 260px; scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .lang-pill { display: none; }
  .hero-features { display: none; }
  .hero-copy { padding: clamp(10px, 2vh, 20px) 0 calc(72px + clamp(8px, 1.6vh, 16px)); gap: clamp(10px, 1.8vh, 18px); }
  .hero-eyebrow { margin-bottom: clamp(8px, 1.8vh, 16px); }
  .hero-eyebrow::after { display: none; }
  .hero-eyebrow span { padding: 7px 12px; font-size: 9px; letter-spacing: .16em; white-space: nowrap; }
  .hero-eyebrow i { margin: 0 5px; }
  .hero h1 { font-size: clamp(36px, min(11.5vw, 6.2vh), 56px); }
  .hero-description { margin: clamp(8px, 1.6vh, 14px) 0; font-size: clamp(13.5px, 1.9vh, 15.5px); }
  .hero-facts { margin-bottom: clamp(8px, 1.8vh, 18px); }
  .hero-facts li { padding: 0 18px; }
  .hero-facts b { font-size: clamp(24px, 3.6vh, 30px); }
  .hero-facts span { font-size: 12px; }
  .hero-watch { font-size: 13.5px; gap: 10px; }
  .hero-watch-icon { width: 38px; height: 38px; }
  .hero-watch-icon::before { border-left-width: 10px; border-top-width: 6px; border-bottom-width: 6px; }
  .cl-panel { padding: 10px; border-radius: 16px; }
  .cl-title { margin: 0 2px 8px; font-size: 17px; }
  .cl-panel ul { gap: 6px; }
  .cl-row { padding: 6px; border-radius: 12px; gap: 6px; }
  .cl-link { gap: 6px; }
  .cl-photo { height: clamp(44px, 7vh, 72px); border-radius: 8px; }
  .cl-name { font-size: 15px; }
  .cl-district, .cl-stars { display: none; }
  .cl-rate b { font-size: 13px; }
  .cl-rate .hc-g { width: 13px; height: 13px; }
  .wa-round.cl-wa { top: 9px; right: 9px; width: 28px; height: 28px; box-shadow: inset 0 0 0 2px #fff; }
  .wa-round.cl-wa svg { width: 15px; height: 15px; }
  .cl-wa.wa-round::after { width: 8px; height: 8px; top: -2px; right: -2px; }
  .cl-all { margin-top: 6px; padding: 2px; font-size: 12.5px; }
}
@media (max-width: 640px) and (max-height: 720px) {
  .hero-description { display: none; }
  .cl-photo { height: 40px; }
  .cl-title { display: none; }
  .cl-all { display: none; }
}
.nav-cta { white-space: nowrap; }
.hf-logos .partner-logos { height: 30px; }
@media (max-width: 1280px) {
  #navigation { gap: 14px; }
  .nav-list > li > a, .nav-trigger { padding: 9px 7px; font-size: 13px; }
  .nav-cta { padding: 12px 18px; font-size: 13px; }
  .hero-features b { font-size: 13px; }
  .hero-features small { font-size: 11.5px; }
}
@media (max-width: 640px) { .hero-cta { display: none; } }

/* 11 Oct: clinic photos are landscape (16:9) — show them landscape instead of a portrait crop */
.clinic-card { flex: 0 0 clamp(300px, 34vw, 480px); }
.clinic-card .image-link { aspect-ratio: 16 / 10; }
@media (max-width: 640px) { .clinic-card { flex-basis: 82vw; } }

/* 11 Oct: smaller clinic panel on desktop, more transparent glass */
@media (min-width: 961px) {
  .hero-copy { grid-template-columns: minmax(0, 1fr) minmax(270px, 300px); }
  .cl-panel { padding: clamp(10px, 1.6vh, 16px) 10px clamp(8px, 1.2vh, 12px); border-radius: 18px; background: rgba(240, 247, 252, .5); border-color: rgba(255, 255, 255, .45); backdrop-filter: blur(14px) saturate(140%); }
  .cl-title { margin: 0 6px clamp(6px, 1.2vh, 10px); font-size: clamp(17px, 2.3vh, 20px); }
  .cl-panel ul { gap: clamp(5px, .8vh, 8px); }
  .cl-row { gap: 8px; padding: clamp(5px, .8vh, 7px); padding-right: 9px; border-radius: 13px; background: rgba(255, 255, 255, .88); }
  .cl-link { gap: 11px; }
  .cl-photo { width: clamp(50px, 7.6vh, 66px); height: clamp(50px, 7.6vh, 66px); border-radius: 10px; }
  .cl-name { font-size: clamp(17px, 2.2vh, 19px); }
  .cl-district { font-size: 8px; }
  .cl-rate b { font-size: 13.5px; }
  .cl-stars { font-size: 11px; }
  .cl-rate .hc-g { width: 13px; height: 13px; }
  .wa-round.cl-wa { width: 34px; height: 34px; }
  .wa-round.cl-wa svg { width: 17px; height: 17px; }
  .cl-all { margin-top: clamp(4px, 1vh, 10px); font-size: 13px; }
}
.doctor-rail { gap: 12px; padding-top: 6px; }
.doctor-rail i { height: 26px; }
.brand-signoff { margin-top: 34px; }
/* 11 Oct: one team grid, no tabs. 13 Oct: 7 dentists + patient rights manager = 8 cards, two even rows of four */
.team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 18px; }
.team-member h3, .team-member.is-lead h3 { font-size: 21px; }
@media (max-width: 640px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .team-member h3, .team-member.is-lead h3 { font-size: 19px; } }

.image-expand { display: none !important; }

/* 11 Oct: treatment cards with soft rounded frame (no cut corners); product photos */
.package-card { clip-path: none; border-radius: 22px; padding: 1px; background: linear-gradient(140deg, rgba(0, 168, 234, .55), rgba(0, 144, 204, .18) 40%, rgba(0, 114, 168, .3)); box-shadow: 0 1px 2px rgba(6, 52, 77, .05), 0 22px 44px -30px rgba(6, 52, 77, .35); }
.package-card-inner { clip-path: none; border-radius: 21px; overflow: hidden; }
.package-card:hover, .package-card:focus-within { filter: none; box-shadow: 0 2px 6px rgba(6, 52, 77, .06), 0 30px 60px -30px rgba(0, 114, 168, .5); }
.package-photo { border-bottom: 0; }
.package-photo img { object-position: center 55%; }
#package-implants .package-photo img { object-position: 64% 55%; }
.package-photo::after { background: linear-gradient(180deg, rgba(6, 52, 77, .42), transparent 30%); }
.package-cta { border-radius: 12px; }
.package-photo::after { background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, 0) 32%); }
.package-num { color: var(--blue-deep); background: none; -webkit-text-fill-color: currentColor; }
.package-num::after { background: rgba(0, 114, 168, .5); }
.package-tag { color: var(--ink); text-shadow: none; font-weight: 600; }

/* ==== 11 Oct: foreign patient stories only (2 larger cards) ==== */
.story-card { flex: 0 0 clamp(240px, 22vw, 320px); }

/* ==== 11 Oct: hero feature strip redesigned — light floating glass bar inside the content width,
   small line icons without circles, one quiet line per item ==== */
.hero-features { background: none; border-top: 0; backdrop-filter: none; padding: 0 0 clamp(14px, 2.4vh, 28px); }
.hero-features ul { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0 6px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 18px; background: rgba(255, 255, 255, .08); backdrop-filter: blur(14px) saturate(130%); }
.hero-features li { gap: 12px; padding: clamp(12px, 1.8vh, 16px) clamp(12px, 1.4vw, 20px); border-left: 1px solid rgba(255, 255, 255, .14); }
.hero-features li:first-child { padding-left: clamp(12px, 1.4vw, 20px); border-left: 0; }
.hf-icon { width: auto; height: auto; border: 0; border-radius: 0; color: #8fd8f7; }
.hf-icon svg { width: 22px; height: 22px; stroke-width: 1.5; }
.hero-features b { font-size: 13.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.hero-features small { margin-top: 1px; font-size: 12px; color: #c4dbe7; }
.hf-logos { margin-top: 3px; }
.hf-logos .partner-logos { width: 104px; height: 22px; }

/* ==== 11 Oct: clinic panel more transparent; its bottom lines up with the bottom of the main CTA ==== */
@media (min-width: 961px) {
  .hero-copy { align-items: end; }
  .cl-panel { align-self: end; margin-bottom: 0; background: rgba(240, 247, 252, .26); border-color: rgba(255, 255, 255, .35); }
  .cl-title { color: #fff; }
  .cl-all { color: #fff; }
  .cl-row { background: rgba(255, 255, 255, .86); }
}
@media (max-width: 1180px) {
  .hero-features b { white-space: normal; }
}
@media (max-width: 960px) {
  .hero-features ul { display: flex; overflow-x: auto; }
  .hero-features li { flex: 0 0 240px; }
}

/* ==== 11 Oct: seven treatment cards (client list): photo, title, subtitle, CTA; 4 + 3 centred ==== */
.tgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.tgrid .tcard { flex: 0 0 calc((100% - 3 * 18px) / 4); }
.tcard .package-photo { display: block; aspect-ratio: 3 / 2; }
.tcard .package-card-body { padding: 20px 22px 22px; }
.tcard h3 { font-size: clamp(24px, 1.9vw, 30px); line-height: 1.1; letter-spacing: -.02em; }
.tcard-sub { flex: 1; margin: 10px 0 20px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.tcard .package-cta { font-size: 12.5px; }
@media (max-width: 1180px) { .tgrid .tcard { flex-basis: calc((100% - 2 * 18px) / 3); } }
@media (max-width: 960px) { .tgrid .tcard { flex-basis: calc((100% - 18px) / 2); } }
@media (max-width: 640px) { .tgrid .tcard { flex-basis: 100%; } .tcard .package-cta { white-space: normal; } }

/* ==== 11 Oct: layout re-balance ====
   1) the strip's ul styles were leaking into the nested logo list (box around logos, logos pushed out) */
.hf-logos .partner-logos { display: block; width: 112px; height: 26px; padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; }
.hf-logos .partner-logos li { padding: 0; border: 0; }
.hf-logos .partner-logos img { height: calc(var(--h, 18px) * .95); }
/* 2) wider content on large screens, header aligned with it */
.site-header .wrap, .hero .wrap { width: min(100% - 2 * var(--gutter), 1600px); }
/* 3) hero content centred vertically between header and strip; clinic panel still bottom-aligned with the CTA */
@media (min-width: 961px) {
  .hero-copy { align-content: center; align-items: end; padding: clamp(16px, 3.4vh, 48px) 0; grid-template-columns: minmax(0, 1fr) clamp(290px, 22vw, 380px); }
  .hero h1 { font-size: clamp(48px, min(7.4vw, 11vh), 150px); }
  .hero-description { max-width: 600px; }
  .cl-photo { width: clamp(56px, 8.2vh, 84px); height: clamp(56px, 8.2vh, 84px); }
  .cl-name { font-size: clamp(18px, 2.4vh, 23px); }
}
@media (min-width: 1600px) {
  .hero-description { font-size: 21px; }
  .hero-facts b { font-size: 46px; }
  .hero-facts span { font-size: 15px; }
  .hero-features b { font-size: 15px; }
  .hero-features small { font-size: 13px; }
}
@media (min-width: 961px) {
  .hero-copy { padding: clamp(14px, 2.6vh, 40px) 0 clamp(26px, 5vh, 64px); }
  .hero-eyebrow { margin-bottom: clamp(14px, 3.4vh, 40px); }
  .hero-description { margin: clamp(12px, 2.8vh, 32px) 0 clamp(16px, 3.6vh, 42px); }
  .hero-facts { margin-bottom: clamp(18px, 4vh, 48px); }
}

/* 11 Oct: treatment cards show illustrative lifestyle portraits — frame on the face */
.tcard .package-photo img, #package-implants .package-photo img { object-position: 50% 22%; }
.tcard .package-photo::after { background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 26%); }
.contact-lines .wa-open { font-family: var(--serif); font-size: 25px; text-align: left; color: var(--ink); transition: color .25s; }
.contact-lines .wa-open:hover, .contact-lines .wa-open:focus-visible { color: var(--blue-deep); }
.tcard .package-photo img { object-position: 50% 30%; }

/* ==== 11 Oct: treatments as a horizontal strip — 6 cards on screen on desktop, the rest by arrows/scroll; swipe on phones ==== */
.tstrip-head { margin: 0 0 14px; }
.tgrid { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 10px 2px 22px; margin-inline: -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tgrid::-webkit-scrollbar { display: none; }
.tgrid:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.tgrid .tcard { flex: 0 0 calc((100% - 5 * 14px) / 6); scroll-snap-align: start; }
.tcard .package-photo { aspect-ratio: 1 / 1; }
.tcard .package-photo img { object-position: 50% 20%; }
.tcard .package-card-body { padding: 16px 16px 18px; }
.tcard h3 { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.12; }
.tcard-sub { margin: 8px 0 16px; font-size: 13px; line-height: 1.5; }
.tcard .package-cta { min-height: 44px; padding: 10px 12px; gap: 10px; font-size: 12px; white-space: nowrap; }
.tcard .package-num { top: 13px; left: 14px; font-size: 17px; gap: 10px; }
.tcard .package-num::after { width: 22px; }
@media (max-width: 1180px) { .tgrid .tcard { flex-basis: calc((100% - 3 * 14px) / 4); } }
@media (max-width: 960px) { .tgrid .tcard { flex-basis: calc((100% - 2 * 14px) / 3); } }
@media (max-width: 640px) {
  .tgrid .tcard { flex-basis: 72vw; }
  .tcard .package-photo { aspect-ratio: 4 / 3; }
  .tcard h3 { font-size: 23px; }
  .tcard-sub { font-size: 14px; }
  .tcard .package-cta { white-space: nowrap; font-size: 13px; }
}

/* ==== 12 Oct: desktop = 4 x 2 grid (no scrolling); tablets and phones keep the swipe strip ==== */
@media (min-width: 961px) {
  .tstrip-head .strip-nav { display: none; }
  .tgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; overflow: visible; padding: 4px 0 0; margin-inline: 0; scroll-snap-type: none; }
  .tgrid .tcard { flex: none; }
  .tcard .package-photo { aspect-ratio: 3 / 2; }
  .tcard .package-photo img { object-position: 50% 25%; }
  .tcard .package-card-body { padding: 20px 22px 22px; }
  .tcard h3 { font-size: clamp(22px, 1.9vw, 29px); }
  .tcard-sub { margin: 10px 0 18px; font-size: 14.5px; }
  .tcard .package-cta { min-height: 48px; font-size: 13px; }
  .tcard .package-num { top: 17px; left: 20px; font-size: 20px; gap: 14px; }
  .tcard .package-num::after { width: 30px; }
}

/* ==== 10 Oct: patient story covers (scripts/story-covers.cjs). The cover image carries logo, flag and treatment,
   so the card needs no caption or bottom shade; it fades out while the video plays and returns on pause.
   The play button sits in the top right corner, level with the logo, so it never covers the face. ==== */
.story-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; pointer-events: none; }
.story-card.is-playing .story-cover { opacity: 0; }
.story-play::before { content: none; }
.story-play::after { left: auto; right: 14px; top: 14px; width: 46px; transform: none; background-color: rgba(255, 255, 255, .94); box-shadow: 0 8px 22px rgba(4, 34, 52, .32); }
.story-card:hover .story-play::after, .story-play:focus-visible::after { transform: scale(1.1); }

/* ==== 10 Oct: patient story pop-up (pattern from Dentsun's video library, İkon navy). One screen tall:
   the playing video + its details on top, the other stories in a sideways strip below. ==== */
.video-modal { width: min(1280px, 100vw); max-width: 100vw; height: 100svh; max-height: 100svh; margin: auto; padding: 0; border: 0; background: transparent; color: #fff; overflow: hidden; overscroll-behavior: contain; }
.video-modal[open] { display: flex; flex-direction: column; }
.video-modal::backdrop { background: rgba(3, 26, 39, .94); backdrop-filter: blur(8px); }
.vm-close { position: absolute; top: 14px; right: 16px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(143, 216, 247, .4); border-radius: 50%; background: rgba(4, 32, 47, .9); color: #fff; font-size: 18px; transition: border-color .2s, background-color .2s; }
.vm-close:hover { border-color: #fff; background: var(--blue-deep); }
.vm-top { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: auto minmax(260px, 340px); justify-content: center; grid-template-rows: minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: 58px clamp(16px, 4vw, 56px) 14px; }
.vm-stage { position: relative; justify-self: center; height: 100%; width: auto; max-width: 100%; max-height: 100%; aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid rgba(143, 216, 247, .35); border-radius: 20px; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.vm-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #031a27; }
.vm-info .eyebrow { margin-bottom: 14px; color: var(--sky); }
.vm-info h2 { font-size: clamp(34px, 3vw, 52px); line-height: 1.02; color: #fff; }
.vm-info > p:not(.eyebrow) { margin-top: 12px; font-size: 15px; color: rgba(255, 255, 255, .78); }
.vm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.vm-actions .button { min-height: 48px; padding: 12px 20px; gap: 12px; font-size: 13px; }
.vm-actions .vm-whatsapp { gap: 9px; border: 1px solid rgba(255, 255, 255, .5); background: transparent; color: #fff; transition: border-color .2s, background-color .2s; }
.vm-actions .vm-whatsapp:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
.vm-whatsapp svg { width: 17px; height: 17px; flex: none; }
.vm-library { flex: none; padding: 12px clamp(16px, 4vw, 56px) 16px; border-top: 1px solid rgba(143, 216, 247, .22); border-radius: 20px 20px 0 0; background: linear-gradient(#06344d, #04202f); }
.vm-lib-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.vm-lib-head .eyebrow { margin: 0; color: var(--sky); }
.vm-arrows { flex: none; display: flex; gap: 8px; }
.vm-arrows button { width: 38px; height: 38px; border: 1px solid rgba(143, 216, 247, .4); border-radius: 50%; background: none; color: #fff; font-size: 16px; transition: border-color .2s; }
.vm-arrows button:hover { border-color: #fff; }
.vl-grid { --strip-h: clamp(120px, 20svh, 210px); display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(143, 216, 247, .45) transparent; padding: 3px 3px 6px; }
.vl-grid > :first-child { margin-left: auto; }
.vl-grid > :last-child { margin-right: auto; }
.vl-thumb { position: relative; flex: 0 0 auto; height: var(--strip-h); aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 12px; background: #031a27; overflow: hidden; scroll-snap-align: start; opacity: .82; transition: opacity .25s; }
.vl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vl-thumb:hover, .vl-thumb:focus-visible, .vl-thumb[aria-current="true"] { opacity: 1; }
.vl-thumb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vl-thumb[aria-current="true"] { box-shadow: 0 0 0 2px var(--blue-bright); }
.vl-thumb[aria-current="true"]::after { content: "Now playing"; position: absolute; top: 8px; left: 8px; padding: 4px 9px; border-radius: 999px; background: var(--grad); color: #fff; font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 900px) {
  .vm-top { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; padding-top: 62px; }
  .vm-info { text-align: center; }
  .vm-info .eyebrow, .vm-info > p:not(.eyebrow) { display: none; }
  .vm-info h2 { font-size: 24px; }
  .vm-info h2::after { content: attr(data-sub); display: block; margin-top: 4px; font: 500 12px/1.3 var(--sans); letter-spacing: .04em; color: rgba(255, 255, 255, .75); }
  .vm-actions { margin-top: 10px; flex-wrap: nowrap; }
  .vm-actions .button { flex: 1 1 0; min-height: 42px; padding: 8px 12px; font-size: 12.5px; justify-content: center; }
}
@media (max-width: 640px) {
  .vm-lib-head { display: none; }
  .vl-grid { --strip-h: clamp(110px, 20svh, 170px); gap: 8px; }
  .vl-thumb[aria-current="true"]::after { font-size: 8px; padding: 3px 7px; }
}

/* Before & after (#results): cards in a sideways strip; each card is a small carousel of the post's photos
   (clinic composite first, then close-ups and portraits). Photos open in the lightbox. */
.results { background: linear-gradient(180deg, var(--ice) 0%, #fff 100%); }
.results-strip { display: flex; gap: clamp(12px, 1.4vw, 20px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 12px 2px 18px; margin-inline: -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.results-strip::-webkit-scrollbar { display: none; }
.results-strip:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
.result-card { flex: 0 0 clamp(280px, 27vw, 390px); scroll-snap-align: start; }
.result-media { position: relative; aspect-ratio: 1080 / 1031; border: 3px solid #fff; border-radius: 16px; overflow: hidden; background: var(--ice); box-shadow: var(--shadow); transition: transform .45s var(--ease), box-shadow .45s; }
.result-media:hover, .result-media:focus-within { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.result-slides { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.result-slides::-webkit-scrollbar { display: none; }
.result-slides:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.result-slides .image-link { flex: 0 0 100%; height: 100%; scroll-snap-align: start; border: 0; border-radius: 0; }
.result-slides .image-link + .image-link img { object-position: 50% 30%; }
.result-tag { position: absolute; top: 12px; left: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(6, 52, 77, .72); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; line-height: 1.2; pointer-events: none; }
.result-tag.is-after { left: calc(50% + 12px); background: var(--grad); }
.result-nav { position: absolute; top: 50%; z-index: 1; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 15px; line-height: 1; box-shadow: 0 4px 14px -6px rgba(6, 52, 77, .5); transition: background-color .25s, color .25s; }
.result-nav.is-prev { left: 10px; }
.result-nav.is-next { right: 10px; }
.result-nav:hover { background: var(--blue); color: #fff; }
.result-nav[hidden] { display: none; }
.result-count { position: absolute; right: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(6, 52, 77, .72); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .08em; line-height: 1.3; pointer-events: none; }
.result-card figcaption { display: grid; gap: 6px; padding: 14px 4px 0; }
.result-country { display: flex; align-items: center; gap: 9px; font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--blue-deep); }
.result-country img { width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px var(--line-strong); object-fit: cover; }
.result-card strong { font: 400 clamp(21px, 1.7vw, 25px)/1.15 var(--serif); color: var(--ink); }
@media (max-width: 640px) { .result-card { flex-basis: 82vw; } }

/* Clinics (#clinic): one tab panel per branch, each with its own large photo, address line and photo strip. */
.clinic-tabs { justify-content: center; margin-bottom: clamp(22px, 2.4vw, 34px); }
.clinic-panel[hidden] { display: none; }
.clinic-facts { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 28px; width: 82%; margin: 16px auto 0; padding: 14px 16px 14px 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.clinic-facts-addr { display: flex; align-items: center; gap: 14px; min-width: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.clinic-facts-addr b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.clinic-facts-pin { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ice-2); color: var(--blue-deep); }
.clinic-facts-pin svg { width: 20px; height: 20px; }
.clinic-facts-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 15px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: border-color .25s, color .25s, background-color .25s; }
.cf-btn svg { flex: none; width: 17px; height: 17px; color: var(--blue); }
.cf-btn:hover, .cf-btn:focus-visible { border-color: var(--blue); background: var(--ice); color: var(--blue-deep); }
.cf-btn.is-wa svg { color: #1fa855; }
.cf-btn.is-rating b { font-weight: 700; }
.cf-btn.is-rating i { margin: 0 4px 0 -5px; font-style: normal; font-size: 12px; color: #f5b400; }
@media (max-width: 1180px) { .clinic-facts { justify-content: center; } }
@media (max-width: 960px) { .clinic-facts { width: 100%; } }
@media (max-width: 640px) {
  .clinic-tabs { flex-wrap: nowrap; gap: 6px; }
  .clinic-tabs .team-tab { flex: 1 1 0; min-width: 0; justify-content: center; flex-direction: column; gap: 3px; padding: 9px 6px; font-size: 10px; letter-spacing: .08em; border-radius: 16px; }
  .clinic-tabs .team-tab span { height: auto; padding: 1px 6px; font-size: 9px; }
  .clinic-facts { justify-content: flex-start; gap: 14px; padding: 14px; }
  .clinic-facts-addr { flex-basis: 100%; }
  .clinic-facts-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .clinic-facts-actions .cf-btn:first-child { grid-column: 1 / -1; }
  .cf-btn { justify-content: center; gap: 5px; min-width: 0; padding: 8px 4px; overflow: hidden; font-size: clamp(10.5px, 3vw, 12px); }
  .cf-btn svg { width: 15px; height: 15px; }
}

/* Credit lines: copyright on its own row, below it the agency line (same pattern as Dentsun): logo + link · badge; stacks on phones. */
.footer-credit { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 6px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .18); text-align: center; color: #b8dff2; font-size: 13px; }
.footer-credit .copyright { flex-basis: 100%; }
.footer-credit-agency { display: inline-flex; align-items: center; gap: 10px; color: #b8dff2; transition: color .2s; }
.footer-credit-agency:hover { color: #fff; }
.footer-credit-agency img { width: 32px; height: 32px; object-fit: contain; flex: none; }
.footer-credit-agency b { font-weight: 600; color: #fff; }
.footer-credit-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border: 1px solid rgba(255, 255, 255, .32); border-radius: 999px; background: rgba(255, 255, 255, .08); font: 400 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; color: #fff; white-space: nowrap; }
.footer-credit-badge i { width: 4px; height: 4px; border-radius: 50%; background: var(--sky); }
@media (max-width: 640px) { .footer-credit { flex-direction: column; gap: 10px; } .footer-credit-dot { display: none; } }

/* Footer link columns on phones: tap a heading to open its list (script.js adds the buttons; without JS the lists stay open). */
.footer-toggle { all: unset; display: block; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.footer-chevron { display: none; width: 7px; height: 7px; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(45deg) translateY(-2px); transition: transform .16s; }
@media (max-width: 640px) {
  .footer-grid { row-gap: 0; }
  .footer-about { margin-bottom: 26px; }
  .footer-contact { margin-top: 30px; }
  .footer-grid > nav.footer-col { border-bottom: 1px solid rgba(255, 255, 255, .2); }
  .footer-grid > nav.footer-col:first-of-type { border-top: 1px solid rgba(255, 255, 255, .2); }
  .footer-col.has-toggle h3 { margin: 0; }
  .footer-col.has-toggle .footer-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; padding: 18px 2px; cursor: pointer; }
  .footer-toggle:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
  .footer-col.has-toggle .footer-chevron { display: inline-block; margin-right: 4px; }
  .footer-col.is-open .footer-chevron { transform: rotate(225deg) translate(-1px, -1px); }
  .footer-col.has-toggle:not(.is-open) ul { display: none; }
  .footer-col.is-open ul { padding: 2px 2px 20px; }
}

/* ── Treatment pages (.tp-*): Dentsun's treatment-page flow in İkon colours (10 Oct 2026).
   Pages are written by scripts/treatment-pages.cjs; header, contact and footer are the homepage's own. ── */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:has(.tp) { scroll-padding-top: calc(var(--hh, 92px) + 70px); }
.tp { --tp-line: rgba(0, 144, 204, .26); --tp-ok: #14845a; --tp-warn: #b4611c; --inset: clamp(14px, 1.6vw, 24px); width: calc(100% - 2 * var(--inset)); max-width: 1800px; margin-inline: auto; }
.tp h2, .tp h3 { letter-spacing: -.02em; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 18px 8px 14px; font-size: 11.5px; letter-spacing: .06em; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 12px; color: var(--blue); }
.crumbs a { transition: color .2s; }
.crumbs a:hover { color: var(--blue-deep); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

.tp-hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); min-height: clamp(440px, 41vw, 620px); border-radius: 26px; overflow: hidden; background: var(--navy); box-shadow: var(--shadow-lift); }
.tp-hero-copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 4.4vw, 72px); background: radial-gradient(ellipse at 0 0, rgba(0, 168, 234, .3), transparent 58%), linear-gradient(160deg, #06344d, #052a3e); color: #fff; }
.tp-hero-copy .eyebrow { margin-bottom: 20px; color: var(--sky); }
.tp-hero h1 { color: #fff; font-size: clamp(42px, 4.5vw, 78px); line-height: 1; }
.tp-hero h1 span { display: block; margin-top: 16px; color: #b6d8ea; font-size: .46em; line-height: 1.16; letter-spacing: -.01em; }
.tp-ratings { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 28px 0 30px; font-size: 13.5px; color: #d7e8f1; }
.tp-ratings a { display: inline-flex; align-items: center; gap: 7px; transition: color .2s; }
.tp-ratings a:hover, .tp-ratings a:focus-visible { color: #fff; }
.tp-ratings .stars { color: #f5b400; font-size: 13px; }
.tp-ratings b { color: #fff; font-weight: 700; }
.tp-ratings-src { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .22); color: #9fc3d6; font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.tp-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.tp-hero-actions .button { min-height: 54px; padding: 14px 24px; border-radius: 14px; font-size: 13.5px; letter-spacing: .02em; text-transform: none; }
.button-ghost { border-color: rgba(255, 255, 255, .42); color: #fff; background: rgba(255, 255, 255, .06); }
.button-ghost:hover, .button-ghost:focus-visible { border-color: #fff; background: rgba(255, 255, 255, .16); }
.tp-hero-media { position: relative; min-height: 320px; overflow: hidden; }
.tp-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }   /* treatment card portrait: keep the face in frame */
.tp-hero-media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #052a3e, transparent 26%); pointer-events: none; }
.tp-hero-media figcaption { position: absolute; left: 24px; bottom: 20px; z-index: 2; padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; background: rgba(5, 42, 62, .78); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }

.tp-tabs { position: sticky; top: var(--hh, 92px); z-index: 8; margin: 18px calc(var(--inset) * -1) 0; padding: 0 calc(var(--inset) + 8px); border-bottom: 1px solid var(--tp-line); background: rgba(233, 242, 248, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.tp-tabs ol { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tp-tabs ol::-webkit-scrollbar { display: none; }
.tp-tabs a { display: block; padding: 16px 14px 14px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; transition: color .2s, border-color .2s; }
.tp-tabs a:hover { color: var(--ink); }
.tp-tabs a[aria-current="true"] { color: var(--blue-deep); border-bottom-color: var(--blue); }

.tp-sec { margin-top: var(--inset); padding: clamp(26px, 3.2vw, 48px); border: 1px solid var(--tp-line); border-radius: 26px; background: #fff; }
.tp-sec:last-of-type { margin-bottom: var(--inset); }
.tp-kicker { display: block; margin-bottom: 6px; background: var(--text-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font: 400 clamp(26px, 2.1vw, 34px)/1.1 var(--serif); letter-spacing: -.02em; }
.tp-split, .tp-journey { display: grid; grid-template-columns: minmax(270px, 380px) minmax(0, 1fr); gap: clamp(18px, 2vw, 28px); align-items: start; }
.tp-side, .tp-plan { position: sticky; top: calc(var(--hh, 92px) + 74px); padding: clamp(26px, 2.5vw, 38px); border: 1px solid var(--tp-line); border-radius: 22px; background: radial-gradient(ellipse at 100% 0, var(--ice-2), transparent 60%), var(--ice); }
.tp-side h2, .tp-plan h2 { font-size: clamp(30px, 2.5vw, 42px); line-height: 1.04; }
.tp-side > p { margin-top: 16px; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.tp-side-media { margin-top: 22px; }
.tp-side-media .image-link { border-radius: 14px; }
.tp-side-media img { aspect-ratio: 4 / 3; }
.tp-panel { min-width: 0; }
.tp-panel > * + * { margin-top: 18px; }
.tp-panel p, .tp-stage p { color: #3d596a; font-size: 15px; line-height: 1.72; }
.tp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px 60px; margin-bottom: 28px; }
.tp-head h2 { font-size: clamp(34px, 3.2vw, 54px); line-height: 1.03; }
.tp-head h2 .tp-kicker { font-size: .62em; }
.tp-head > p { max-width: 540px; color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.tp-note { margin-top: 18px; color: var(--muted) !important; font-size: 13px !important; font-style: italic; }
.tp-more { margin-top: 22px; }
.tp-head .strip-nav { align-self: end; }
.tp-head:has(.strip-nav) > p { margin-right: auto; }

.tp-short { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 5vw, 90px); }
.tp-short h2 { margin-bottom: 18px; font: 700 11px/1.4 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--blue-deep); }
.tp-short p { color: #2f4c5d; font-size: 16.5px; line-height: 1.75; }
.tp-short p + p { margin-top: 14px; }
.tp-mini-steps { display: grid; gap: 20px; counter-reset: ms; }
.tp-mini-steps li { counter-increment: ms; display: grid; grid-template-columns: 46px 1fr; gap: 18px; align-items: start; }
.tp-mini-steps li::before { content: counter(ms); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--grad); color: #fff; font: 400 20px/1 var(--serif); box-shadow: 0 10px 22px -12px rgba(0, 144, 204, .9); }
.tp-mini-steps strong { display: block; color: var(--ink); font-weight: 600; font-size: 15.5px; }
.tp-mini-steps span { display: block; margin-top: 3px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.tp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: clamp(34px, 4vw, 56px) 0 0; }
.tp-fact { padding: 22px 24px 24px; border: 1px solid var(--tp-line); border-radius: 18px; background: linear-gradient(160deg, #fff, var(--ice) 75%); }
.tp-fact dt { color: var(--blue-deep); font-size: 9.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.tp-fact dd { margin: 12px 0 0; }
.tp-fact dd b { display: block; color: var(--ink); font: 400 clamp(26px, 2vw, 32px)/1.08 var(--serif); }
.tp-fact dd span { display: block; margin-top: 6px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.tp-fact dd em { display: block; margin-top: 8px; color: var(--tp-warn); font-style: normal; font-size: 12.5px; line-height: 1.5; }

.tp-plan { max-height: calc(100vh - var(--hh, 92px) - 94px); overflow-y: auto; scrollbar-width: thin; }
.tp-plan ol { position: relative; display: grid; gap: 2px; margin-top: 20px; }
.tp-plan ol::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 1px; background: linear-gradient(var(--blue), rgba(0, 144, 204, .12)); }
.tp-plan li a { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; padding: 9px 12px 9px 0; border-radius: 14px; transition: background-color .2s; }
.tp-plan li a:hover, .tp-plan li a:focus-visible { background: rgba(0, 144, 204, .08); }
.tp-plan li i { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--blue); border-radius: 50%; background: #fff; color: var(--blue-deep); font: normal 400 18px/1 var(--serif); }
.tp-plan li.is-key i { background: var(--grad); color: #fff; border-color: transparent; }
.tp-plan li strong { display: block; color: var(--ink); font-weight: 600; font-size: 14px; line-height: 1.35; }
.tp-plan li small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.tp-plan > p { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--tp-line); color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.tp-stages { display: grid; gap: 16px; min-width: 0; }
.tp-stage { padding: clamp(22px, 2.4vw, 36px); border: 1px solid var(--line-strong); border-radius: 22px; background: #fff; }
.tp-stage.is-visit { border-color: var(--tp-line); background: radial-gradient(ellipse at 100% 0, var(--ice-2), transparent 55%), var(--ice); }
.tp-stage-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; color: var(--blue-deep) !important; font-size: 10px !important; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.tp-stage-meta i { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--blue); border-radius: 50%; background: #fff; font: normal 400 13px/1 var(--serif); letter-spacing: 0; }
.tp-stage h3 { margin-top: 12px; font-size: clamp(26px, 2.1vw, 34px); line-height: 1.08; }
.tp-stage h3 + p { margin-top: 12px; }
.tp-stage p + p { margin-top: 12px; }
:is(.tp-stage, .tp-card, .tp-fit, .tp-short, .faq) a:not(.button) { color: var(--blue-deep); border-bottom: 1px solid rgba(0, 144, 204, .4); transition: border-color .2s, color .2s; }
:is(.tp-stage, .tp-card, .tp-fit, .tp-short, .faq) a:not(.button):hover { color: var(--blue); border-color: var(--blue); }
.tp-timeline { position: relative; display: grid; gap: 16px; margin-top: 20px; }
.tp-timeline::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px; width: 1px; background: rgba(0, 144, 204, .3); }
.tp-timeline li { position: relative; padding-left: 40px; color: #3d596a; font-size: 14.5px; line-height: 1.65; }
.tp-timeline li::before { content: ""; position: absolute; left: 0; top: 2px; width: 23px; height: 23px; border: 1px solid rgba(0, 144, 204, .55); border-radius: 50%; background: #fff radial-gradient(circle, var(--blue) 0 3px, transparent 3.5px); }
.tp-timeline li b { color: var(--ink); font-weight: 600; }
.tp-ask { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.tp-ask > div { padding: 20px 22px; border: 1px solid var(--tp-line); border-radius: 16px; background: var(--ice); }
.tp-ask h4 { color: var(--blue-deep); font: 700 10px/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; }

.tp-checks, .tp-cross { display: grid; gap: 13px; margin-top: 16px; }
.tp-checks li, .tp-cross li { position: relative; padding-left: 36px; color: #3d596a; font-size: 14.5px; line-height: 1.6; }
.tp-checks li::before, .tp-cross li::before { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 700; }
.tp-checks li::before { content: "✓"; background: rgba(20, 132, 90, .13); color: var(--tp-ok); }
.tp-cross li::before { content: "?"; background: rgba(180, 97, 28, .13); color: var(--tp-warn); }
.tp-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tp-fit > div { padding: 24px 26px 26px; border-radius: 18px; }
.tp-fit .is-ok { border: 1px solid rgba(20, 132, 90, .3); background: linear-gradient(160deg, rgba(20, 132, 90, .08), transparent 60%), #fff; }
.tp-fit .is-alt { border: 1px solid rgba(180, 97, 28, .3); background: linear-gradient(160deg, rgba(180, 97, 28, .08), transparent 60%), #fff; }
.tp-fit h3 { font-size: 25px; }
.tp-fit .is-ok h3 { color: var(--tp-ok); }
.tp-fit .is-alt h3 { color: var(--tp-warn); }
.tp-unsure { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; padding: 20px 24px; border: 1px solid var(--tp-line); border-radius: 16px; background: linear-gradient(100deg, var(--ice-2), var(--ice)); }
.tp-unsure p { max-width: 560px; color: var(--ink); font-size: 14.5px; }
.tp-unsure p b { color: var(--blue-deep); }
.tp-unsure div { display: flex; flex-wrap: wrap; gap: 10px; }
.tp-unsure .button { min-height: 46px; padding: 12px 20px; gap: 9px; border-radius: 12px; font-size: 13px; letter-spacing: .02em; text-transform: none; }
.tp-unsure .button svg { width: 17px; height: 17px; color: #1fa855; }
.tp-unsure .button-outline:hover svg { color: #fff; }

.tp-compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.tp-compare th, .tp-compare td { padding: 15px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tp-compare thead th { color: var(--blue-deep); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.tp-compare tbody th { color: var(--muted); font-weight: 500; }
.tp-compare td { color: #3d596a; }
.tp-compare .is-this { background: var(--ice-2); color: var(--ink); font-weight: 600; }
.tp-compare thead .is-this { border-radius: 14px 14px 0 0; }
.tp-compare tr:last-child > * { border-bottom: 0; }
.tp-compare tr:last-child .is-this { border-radius: 0 0 14px 14px; }
.tp-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.tp-pills a { padding: 9px 18px; border: 1px solid var(--blue); border-radius: 999px; color: var(--blue-deep); font-size: 13px; font-weight: 500; transition: background-color .25s, color .25s, border-color .25s; }
.tp-pills a:hover, .tp-pills a:focus-visible { background: var(--blue); color: #fff; }

.tp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tp-card { padding: 22px 24px 24px; border: 1px solid var(--line-strong); border-radius: 18px; background: #fff; }
.tp-card.is-warm { border-color: var(--tp-line); background: linear-gradient(160deg, var(--ice-2), var(--ice) 70%); }
.tp-card h3 { font-size: 23px; line-height: 1.15; }
.tp-card p { margin-top: 10px; font-size: 14px; line-height: 1.65; }
.tp-life { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 14px; }
.tp-life th, .tp-life td { padding: 11px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.5; }
.tp-life th { width: 46%; padding-right: 16px; color: var(--muted); font-weight: 500; }
.tp-life td { color: var(--ink); }
.tp-life tr:last-child > * { border-bottom: 0; }

.tp-stories { padding-top: 10px; }
.tp-stories > :first-child { margin-left: auto; }
.tp-stories > :last-child { margin-right: auto; }
.faq { display: grid; gap: 12px; }
.faq details { border: 1px solid var(--line-strong); border-radius: 16px; background: #fff; transition: border-color .2s, background-color .2s; }
.faq details[open] { border-color: var(--blue); background: var(--ice); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 19px 24px; cursor: pointer; list-style: none; color: var(--ink); font: 400 22px/1.2 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--blue-deep); font: 300 20px/1 var(--sans); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 16px; }
.faq details > div { padding: 0 24px 22px; }
.faq details p { max-width: 860px; color: #3d596a; font-size: 14.5px; line-height: 1.7; }

.tp-why-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.tp-why-photos .image-link { aspect-ratio: 3 / 2; border-radius: 18px; }
.tp-why-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 22px; }
.tp-why-figure { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px !important; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.tp-why-figure b { background: var(--text-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font: 400 44px/1.05 var(--serif); padding-bottom: .06em; }
.tp-why-figure span { color: var(--muted); font-size: 9.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.tp-others-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tp-card-link { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 18px; background: #fff; transition: transform .35s var(--ease), border-color .3s, box-shadow .35s; }
.tp-card-link:hover, .tp-card-link:focus-visible { transform: translateY(-5px); border-color: var(--blue); box-shadow: var(--shadow-lift); }
.tp-card-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ice); }
.tp-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.tp-card-link > span:last-child { display: block; padding: 18px 20px 20px; }
.tp-card-link strong { display: block; color: var(--ink); font: 400 24px/1.1 var(--serif); }
.tp-card-link small { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.5; }

@media (max-width: 1180px) {
  .tp-split, .tp-journey { grid-template-columns: minmax(0, 1fr); }
  .tp-side, .tp-plan { position: static; max-height: none; }
  .tp-side-media { display: none; }
  .tp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-why-grid, .tp-others-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .tp-hero { grid-template-columns: 1fr; min-height: 0; }
  .tp-hero-media { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
  .tp-hero-media::before { background: linear-gradient(0deg, #06344d, transparent 34%); }
  .tp-short, .tp-fit, .tp-ask { grid-template-columns: 1fr; }
  .tp-why-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .crumbs { margin: 12px 4px 10px; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
  .crumbs li:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .tp-hero { border-radius: 20px; }
  .tp-hero-copy { padding: 22px 20px 24px; }
  .tp-hero h1 { font-size: clamp(34px, 9.6vw, 46px); }
  .tp-hero h1 span { margin-top: 10px; font-size: .52em; }
  .tp-ratings { margin: 18px 0 20px; gap: 6px 16px; font-size: 12.5px; }
  .tp-ratings-src { display: none; }
  .tp-hero-actions .button { flex: 1 1 100%; min-height: 50px; }
  .tp-hero-media figcaption { left: 12px; bottom: 10px; padding: 5px 11px; font-size: 9px; }
  .tp-tabs a { padding: 14px 11px 12px; font-size: 12.5px; }
  .tp-sec { padding: 22px 16px; border-radius: 18px; }
  .tp-side, .tp-plan { padding: 20px 18px; border-radius: 16px; }
  .tp-short p { font-size: 15px; }
  .tp-facts, .tp-grid, .tp-why-grid { grid-template-columns: 1fr; }
  .tp-others-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 2px 16px 10px; scrollbar-width: none; }
  .tp-others-grid::-webkit-scrollbar { display: none; }
  .tp-others-grid .tp-card-link { flex: 0 0 72vw; scroll-snap-align: start; }
  .tp-unsure .button { flex: 1 1 auto; justify-content: center; }
  .tp-fit > div, .tp-card, .tp-fact { padding: 20px 18px; }
  .faq summary { padding: 17px 18px; font-size: 19px; }
  .faq details > div { padding: 0 18px 18px; }
  .tp-compare.is-stack thead { display: none; }
  .tp-compare.is-stack tr { display: block; margin-bottom: 12px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 16px; background: #fff; }
  .tp-compare.is-stack :is(th, td) { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border: 0; border-radius: 0 !important; background: none; text-align: right; font-weight: 400; }
  .tp-compare.is-stack th[scope="row"] { display: block; padding: 0 0 8px; color: var(--ink); font: 400 21px/1.15 var(--serif); text-align: left; }
  .tp-compare.is-stack td::before { content: attr(data-label); flex: 0 1 46%; color: var(--muted); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; text-align: left; }
  .tp-compare.is-stack td.is-this { color: var(--blue-deep); font-weight: 600; }
}

/* ── "Treatment at a glance" (.gl-*, 12 Oct 2026): layout after the step panel on Dentsun's treatment pages, in İkon colours.
   Illustration on the left, all steps as cards beside it (active one lit, the rest dimmed), one progress line and the note
   under the picture. Phones show the picture with one step card under it. Driven by script.js; markup by treatment-pages.cjs. ── */
.tp-sec.tp-glance { padding: clamp(16px, 1.9vw, 30px); background: radial-gradient(ellipse at 50% 0, var(--ice-2), transparent 55%), #fff; }
.gl { display: grid; grid-template-columns: minmax(0, 1fr) clamp(290px, 24vw, 360px); grid-template-areas: "head head" "stage steps" "bar steps" "note steps"; column-gap: clamp(18px, 2vw, 32px); }
.gl-head { grid-area: head; margin-bottom: clamp(12px, 1.3vw, 18px); }
.gl-kicker { margin-bottom: 6px; color: var(--blue-deep); font-size: 10px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
.gl-head h2 { font-size: clamp(25px, 2.4vw, 38px); line-height: 1.06; }
.gl-stage { grid-area: stage; position: relative; align-self: center; justify-self: center; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100svh - var(--hh, 92px) - 290px); min-height: 200px; overflow: hidden; border: 1px solid var(--tp-line); border-radius: 18px; background: #e7f5fe; }   /* = the flat background of the illustrations */
.gl-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .7s var(--ease); }
.gl-img.is-on { opacity: 1; }
.gl-scan { position: absolute; left: 8%; right: 8%; top: 16%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(0, 168, 234, .8) 14%, #00a8ea 50%, rgba(0, 168, 234, .8) 86%, transparent); box-shadow: 0 0 14px 2px rgba(0, 168, 234, .5); opacity: 0; transition: opacity .4s; pointer-events: none; }
.gl.is-scanning .gl-scan { opacity: 1; animation: gl-scan 3s ease-in-out infinite; }
@keyframes gl-scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(min(26vw, 300px)); } }
.gl-tag { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(6, 52, 77, .86); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: 0; transform: translateY(-4px); transition: opacity .4s, transform .4s var(--ease); pointer-events: none; }
.gl-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sky); }
.gl.has-tag .gl-tag { opacity: 1; transform: none; }
.gl-bar { grid-area: bar; display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.gl-bar-track { flex: 1; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(0, 144, 204, .16); }
.gl-bar-track i { display: block; height: 100%; background: var(--grad); transform: scaleX(0); transform-origin: left; }
.gl-play { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--tp-line); border-radius: 50%; background: #fff; color: var(--blue-deep); transition: background-color .25s, color .25s, border-color .25s; }
.gl-play:hover, .gl-play:focus-visible { background: var(--blue); border-color: var(--blue); color: #fff; }
.gl-play-icon { width: 9px; height: 10px; margin-left: 2px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.gl-play[aria-pressed="true"] .gl-play-icon { margin-left: 0; clip-path: polygon(0 0, 36% 0, 36% 100%, 0 100%, 0 0, 64% 0, 100% 0, 100% 100%, 64% 100%, 64% 0); }
.gl-note { grid-area: note; margin-top: 8px; color: var(--dim); font-size: 11.5px; font-style: italic; line-height: 1.5; }
.gl-steps { grid-area: steps; display: grid; align-content: center; gap: 10px; }
.gl-step { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 13px 15px; border: 1px solid var(--line-strong); border-radius: 16px; background: #fff; text-align: left; opacity: .5; transition: opacity .35s, transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.gl-step:hover, .gl-step:focus-visible { opacity: .85; }
.gl-step:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.gl-step.is-active { opacity: 1; transform: translateY(-2px); border-color: var(--blue); box-shadow: var(--shadow); }
.gl-no { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--blue); border-radius: 50%; background: #fff; color: var(--blue-deep); font: 700 13px/1 var(--sans); transition: background-color .35s, color .35s; }
.gl-step.is-active .gl-no { border-color: transparent; background: var(--grad); color: #fff; }
.gl-step-text { min-width: 0; }
.gl-step b { display: block; color: var(--ink); font: 400 19px/1.15 var(--serif); }
.gl-step em { display: block; margin-top: 5px; color: var(--muted); font-style: normal; font-size: 13px; line-height: 1.5; }
/* Without script (or before it runs) every step is fully readable. */
.gl:not(.is-ready) .gl-step { opacity: 1; }
.gl:not(.is-ready) .gl-bar { display: none; }
@media (min-width: 1181px) and (max-height: 860px) {
  .gl-steps { gap: 7px; }
  .gl-step { padding: 9px 12px; }
  .gl-step b { font-size: 17px; }
  .gl-step em { margin-top: 3px; font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .gl-no { width: 26px; height: 26px; font-size: 12px; }
}
@media (max-width: 1180px) {
  /* Tablets: the step titles sit in a row under the picture. */
  .gl { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "bar" "steps" "note"; }
  .gl-stage { max-height: calc(100svh - var(--hh, 92px) - 370px); min-height: 170px; }
  .gl-steps { grid-template-columns: repeat(var(--gl-n), minmax(0, 1fr)); align-content: start; margin-top: 12px; }
  .gl-step { flex-direction: column; gap: 8px; height: 100%; padding: 11px 12px; }
  .gl-step b { font-size: 16px; }
  .gl-step em { display: none; }
  .gl-note { margin-top: 10px; }
}
@media (max-width: 640px) {
  /* Phones: one step card at a time under the picture. */
  .tp-sec.tp-glance { padding: 16px; }
  .gl-head h2 { font-size: 24px; }
  .gl-stage { max-height: none; min-height: 0; border-radius: 14px; }
  .gl-tag { left: 10px; top: 10px; padding: 5px 11px; font-size: 9px; }
  .gl-steps { grid-template-columns: minmax(0, 1fr); margin-top: 10px; }
  .gl.is-ready .gl-steps > li { grid-area: 1 / 1; }
  .gl.is-ready .gl-step { opacity: 0; visibility: hidden; transform: none; transition: opacity .4s, visibility 0s .4s; }
  .gl.is-ready .gl-step.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
  .gl-step { flex-direction: row; gap: 12px; padding: 13px 14px; }
  .gl-step b { font-size: 20px; }
  .gl-step em { display: block; font-size: 13.5px; }
}

/* The homepage's "Your treatment journey" section inside a treatment page: same panel, the page's own inset. */
.tp > .section { width: 100%; margin: var(--inset) 0 0; }

/* ── Info pages and doctor biographies (.page-hero, .block, …; 13 Oct 2026). Dentsun's info-page layout in İkon colours.
   Pages are written by scripts/info-pages.cjs from scripts/pages/<key>.cjs. ── */
.page-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4.5vw, 80px); align-items: center; width: calc(100% - 2 * clamp(14px, 1.6vw, 24px)); max-width: 1800px; margin: clamp(14px, 1.6vw, 24px) auto 0; padding: clamp(30px, 4.5vw, 72px) clamp(22px, 4.5vw, 72px); border: 1px solid rgba(0, 144, 204, .26); border-radius: 26px; background: radial-gradient(ellipse at 0 0, var(--ice-2), transparent 55%), #fff; }
.page-hero .brand-mark { position: absolute; z-index: -1; right: -60px; bottom: -50px; width: 300px; opacity: .06; border-radius: 50%; pointer-events: none; }
.page-hero .crumbs { margin: 0 0 22px; }
.page-hero .eyebrow { margin-bottom: 18px; }
.page-hero h1 { font-size: clamp(46px, 5.2vw, 90px); line-height: .98; }
.page-hero h1 em { font-style: italic; }
.page-lead { max-width: 640px; margin-top: 24px; color: var(--muted); font-size: clamp(15px, 1.12vw, 18px); line-height: 1.7; }
.page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.page-actions .button, .aside-card .button { min-height: 52px; padding: 14px 24px; border-radius: 14px; font-size: 13.5px; letter-spacing: .02em; text-transform: none; }
.page-hero-side { display: grid; gap: 16px; min-width: 0; }
.page-hero-media { position: relative; overflow: hidden; border-radius: 20px; aspect-ratio: 16 / 10; background: var(--ice); box-shadow: var(--shadow); }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-media figcaption { position: absolute; left: 14px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(6, 52, 77, .78); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
/* Doctor pages: the portrait with the "at a glance" card under it (user, 13 Oct 2026). */
.page-hero.is-doctor { grid-template-columns: minmax(0, 1.3fr) minmax(300px, 400px); align-items: start; }
.page-hero.is-doctor .page-hero-side { grid-template-columns: 1fr; }
.page-hero.is-doctor .page-hero-copy .hero-card { max-width: 620px; margin-top: 26px; }
.page-hero.is-doctor { align-items: center; }
.page-hero.is-doctor .page-hero-media { aspect-ratio: 4 / 5; }
.page-hero.is-doctor .page-hero-media img { object-position: 50% 0; }
.hero-card { padding: clamp(20px, 2vw, 30px); border: 1px solid rgba(0, 144, 204, .26); border-radius: 18px; background: linear-gradient(165deg, #fff, var(--ice) 80%); box-shadow: var(--shadow); }
.hero-card .eyebrow { margin-bottom: 10px; }
.hero-card > p:not(.eyebrow) { color: var(--ink); font-size: 14.5px; line-height: 1.6; }
.checks { display: grid; gap: 10px; margin-top: 16px; }
.checks li { position: relative; padding-left: 28px; color: #3d596a; font-size: 14px; line-height: 1.55; }
.checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border: 1px solid var(--blue); border-radius: 50%; background: radial-gradient(circle, var(--blue) 0 3px, transparent 3.5px); }

.page-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 330px); gap: clamp(30px, 4.5vw, 80px); align-items: start; width: calc(100% - 2 * clamp(14px, 1.6vw, 24px)); max-width: 1800px; margin: clamp(14px, 1.6vw, 24px) auto 0; padding: clamp(32px, 4.5vw, 72px) clamp(22px, 4.5vw, 72px); border: 1px solid rgba(0, 144, 204, .26); border-radius: 26px; background: #fff; }
.page-content { min-width: 0; }
.page-aside { position: sticky; top: calc(var(--hh, 92px) + 20px); display: grid; gap: 16px; }
.aside-card { display: grid; gap: 10px; padding: 24px; border: 1px solid rgba(0, 144, 204, .26); border-radius: 18px; background: var(--ice); }
.aside-card .button { width: 100%; }
.aside-card .button-outline { background: #fff; }
.aside-card h3 { font-size: 22px; }
.aside-card .checks { margin-top: 8px; }
.facts { display: grid; gap: 0; margin: 4px 0 0; }
.facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.facts > div:last-child { border-bottom: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; }

.toc { margin-bottom: clamp(34px, 4vw, 54px); border: 1px solid rgba(0, 144, 204, .26); border-radius: 16px; background: var(--ice); }
.toc summary { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; cursor: pointer; list-style: none; color: var(--blue-deep); font-size: 10.5px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--blue); border-bottom: 1.5px solid var(--blue); transform: rotate(45deg); transition: transform .2s; }
.toc[open] summary::after { transform: rotate(225deg); }
.toc ol { columns: 2; column-gap: 40px; padding: 16px 24px 22px 46px; border-top: 1px solid var(--line); list-style: decimal; }
.toc li { break-inside: avoid; padding: 4px 0; color: var(--blue); font-size: 13.5px; }
.toc a { color: var(--ink); transition: color .2s; }
.toc a:hover { color: var(--blue-deep); }

.block { scroll-margin-top: calc(var(--hh, 92px) + 24px); }
.block + .block { margin-top: clamp(48px, 5vw, 76px); }
.block > h2 { position: relative; margin-bottom: 24px; padding-bottom: 18px; font-size: clamp(32px, 3.1vw, 50px); line-height: 1.04; }
.block > h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 72px; height: 2px; background: var(--grad); }
.block h3 { margin: 28px 0 10px; font-size: clamp(22px, 1.8vw, 28px); line-height: 1.12; }
.block p { max-width: 780px; color: #3d596a; font-size: 15.5px; line-height: 1.75; }
.block p + p { margin-top: 14px; }
.block > :is(ul, ol, div) + p { margin-top: 20px; }
.block p strong, .block li strong { color: var(--ink); font-weight: 600; }
.block a:not(.button):not(.image-link):not(.person-card):not(.rating-card):not(.cf-btn):not(.addr-map):not(.certificate-frame) { color: var(--blue-deep); border-bottom: 1px solid rgba(0, 144, 204, .4); transition: color .2s, border-color .2s; }
.block a:not(.button):not(.image-link):not(.person-card):not(.rating-card):not(.cf-btn):not(.addr-map):not(.certificate-frame):hover { color: var(--blue); border-color: var(--blue); }
.snippet { padding-left: 20px; border-left: 3px solid var(--blue); color: var(--ink) !important; font-size: 17px !important; }
.callout { margin-top: 22px; padding: 22px 24px; border: 1px solid rgba(0, 144, 204, .26); border-left: 3px solid var(--blue); border-radius: 4px 16px 16px 4px; background: linear-gradient(90deg, var(--ice-2), var(--ice) 70%); }
.callout h3 { margin: 0 0 10px; font-size: 22px; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.split > .callout { margin-top: 0; }
.block .checks, .block .pill-row, .block .faq, .block .timeline, .block .pub-list { margin-top: 18px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-row li { padding: 8px 15px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; }
.pill-row li a { border: 0 !important; }
.timeline { position: relative; display: grid; gap: 0; }
.timeline li { position: relative; display: grid; grid-template-columns: 130px 1fr; gap: 18px; padding: 14px 0 14px 26px; border-bottom: 1px solid var(--line); }
.timeline li::before { content: ""; position: absolute; left: 0; top: 21px; width: 11px; height: 11px; border-radius: 50%; background: var(--grad); }
.timeline b { color: var(--blue-deep); font-size: 13.5px; font-weight: 700; }
.timeline span { color: #3d596a; font-size: 14.5px; line-height: 1.6; }
.timeline strong { display: block; color: var(--ink); font-weight: 600; }
.pub-list { display: grid; gap: 12px; }
.pub-list li { padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--ice); color: #3d596a; font-size: 14px; line-height: 1.6; }
.pub-list strong { color: var(--ink); font-weight: 600; }
.media-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.media-row .image-link { aspect-ratio: 3 / 2; border-radius: 14px; }
.block .clinic-addresses { margin: 22px 0 0; }
.block-certificate { max-width: 460px; margin-top: 20px; }
.block-certificate .certificate-frame { display: block; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px; margin-top: 20px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--ice); }
.logo-row img { width: auto; height: var(--h, 24px); }
.rating-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.rating-card { display: grid; gap: 8px; padding: 18px 20px; border: 1px solid var(--line-strong); border-radius: 16px; background: #fff; transition: border-color .25s, box-shadow .25s, transform .25s var(--ease); }
.rating-card:hover, .rating-card:focus-visible { border-color: var(--blue); box-shadow: var(--shadow); transform: translateY(-3px); }
.rating-card-name { color: var(--ink); font: 400 22px/1.1 var(--serif); }
.rating-card-name small { display: block; margin-top: 3px; color: var(--muted); font: 700 9.5px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.rating-card-score { display: flex; align-items: center; gap: 8px; }
.rating-card-score b { color: var(--ink); font: 400 34px/1 var(--serif); }
.rating-card-score i { color: #f5b400; font-style: normal; font-size: 13px; letter-spacing: 1px; }
.rating-card-link { color: var(--blue-deep); font-size: 12.5px; font-weight: 600; }
.people-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.person-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 16px; background: #fff; transition: border-color .25s, box-shadow .25s, transform .25s var(--ease); }
a.person-card:hover, a.person-card:focus-visible { border-color: var(--blue); box-shadow: var(--shadow); transform: translateY(-3px); }
.person-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0; }
.person-text { display: grid; gap: 3px; padding: 14px 16px 16px; }
.person-text strong { color: var(--ink); font: 400 19px/1.15 var(--serif); }
.person-text small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.person-text em { margin-top: 6px; color: var(--blue-deep); font-style: normal; font-size: 12.5px; font-weight: 600; }
.page-body + .section, .page-body + .related, .section + .related { margin-top: clamp(14px, 1.6vw, 24px); }
.related { width: calc(100% - 2 * clamp(14px, 1.6vw, 24px)); max-width: 1800px; margin: clamp(14px, 1.6vw, 24px) auto; padding: clamp(32px, 4.5vw, 64px) clamp(22px, 4.5vw, 72px); border: 1px solid rgba(0, 144, 204, .26); border-radius: 26px; background: radial-gradient(ellipse at 100% 0, var(--ice-2), transparent 55%), #fff; }
.related h2 { margin-bottom: 26px; font-size: clamp(34px, 3.2vw, 52px); }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.related-card { display: flex; flex-direction: column; gap: 10px; min-height: 160px; padding: 24px; border: 1px solid var(--line-strong); border-radius: 18px; background: #fff; transition: border-color .3s, box-shadow .3s, transform .3s var(--ease); }
.related-card:hover, .related-card:focus-visible { border-color: var(--blue); box-shadow: var(--shadow-lift); transform: translateY(-5px); }
.related-card span { color: var(--blue-deep); font-size: 9.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.related-card strong { color: var(--ink); font: 400 26px/1.08 var(--serif); }
.related-card em { margin-top: auto; color: var(--blue); font-style: normal; font-size: 13px; font-weight: 600; }
@media (max-width: 1180px) {
  .page-body { grid-template-columns: minmax(0, 1fr); }
  .page-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .page-hero { grid-template-columns: 1fr; }
  .toc ol { columns: 1; }
  .split, .rating-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .page-hero, .page-body, .related { padding: 22px 16px; border-radius: 18px; }
  .page-hero h1 { font-size: clamp(38px, 11vw, 56px); }
  .page-actions .button { flex: 1 1 100%; }
  .media-row { grid-template-columns: 1fr 1fr; }
  .timeline li { grid-template-columns: 1fr; gap: 4px; }
  .people-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .person-text strong { font-size: 17px; }
  .block > h2 { font-size: clamp(28px, 8vw, 38px); }
}

.footer-legal { display: flex; gap: 8px; }
.footer-legal a { text-decoration: underline; text-underline-offset: 3px; }
.team-member figcaption h3 a { color: inherit; transition: color .2s; }
.team-member figcaption h3 a:hover, .team-member figcaption h3 a:focus-visible { color: var(--blue-deep); }

.media-row.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Info pages: wide layout (galleries first, no side card) and in-block galleries (13 Oct 2026). */
.page-body.is-wide { grid-template-columns: minmax(0, 1fr); }
.page-body.is-wide .block p { max-width: 860px; }
.block .note { margin-top: 18px; color: var(--muted); font-size: 13.5px; font-style: italic; }
.stories-grid.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; overflow: visible; margin-top: 22px; padding: 0; scroll-snap-type: none; }
.stories-grid.is-grid .story-card { flex: none; width: auto; }
.results-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; margin-top: 22px; }
.results-grid .result-card { flex: none; }
.data-table { width: 100%; max-width: 860px; margin-top: 20px; border-collapse: collapse; font-size: 14.5px; }
.data-table th, .data-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.55; }
.data-table thead th { color: var(--blue-deep); font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; background: var(--ice); }
.data-table tbody th { width: 32%; color: var(--ink); font-weight: 600; }
.data-table td { color: #3d596a; }
@media (max-width: 960px) { .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .results-grid { grid-template-columns: 1fr; }
  .stories-grid.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .data-table tbody th { width: 40%; }
  .data-table th, .data-table td { padding: 11px 10px; font-size: 13.5px; }
}

/* Doctor pages on tablets and phones: name, portrait, "at a glance", then the buttons (user, 13 Oct 2026).
   The two hero columns dissolve (display: contents) so their children can be put in this order. */
@media (max-width: 960px) {
  .page-hero.is-doctor { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .page-hero.is-doctor :is(.page-hero-copy, .page-hero-side) { display: contents; }
  .page-hero.is-doctor .crumbs { order: 1; }
  .page-hero.is-doctor .eyebrow { order: 2; }
  .page-hero.is-doctor h1 { order: 3; }
  .page-hero.is-doctor .page-hero-media { order: 4; width: 100%; max-width: 420px; margin-top: 22px; }
  .page-hero.is-doctor .hero-card { order: 5; margin-top: 22px; }
  .page-hero.is-doctor .page-actions { order: 6; }
}

/* Doctor pages: certificate gallery and the full publication list with DOI / PubMed links (13 Oct 2026). */
.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 20px; }
.cert-card .image-link { aspect-ratio: 4 / 3; border-radius: 12px; background: #fff; }
.cert-card .image-link img { object-fit: contain; padding: 6px; }
.cert-card figcaption { display: grid; gap: 2px; padding: 9px 2px 0; }
.cert-card strong { color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.4; }
.cert-card span { color: var(--muted); font-size: 12px; }
.pub-list.is-full { counter-reset: pub; }
.pub-list.is-full li { display: grid; gap: 6px; }
.pub-meta { color: var(--muted); font-size: 13px; }
.pub-note { color: var(--muted); font-size: 12.5px; }
.pub-links { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.block .pub-links a { display: inline-flex; padding: 4px 10px; border: 1px solid rgba(0, 144, 204, .4); border-radius: 999px; background: #fff; font-size: 12px; font-weight: 600; }
.block .pub-links a:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
@media (max-width: 640px) { .cert-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }

/* Info and doctor pages: the section tabs under the header, as on the treatment pages (13 Oct 2026). */
html:has(.page-tabs) { scroll-padding-top: calc(var(--hh, 92px) + 70px); }
.tp-tabs.page-tabs { --tp-line: rgba(0, 144, 204, .26); margin: clamp(14px, 1.6vw, 24px) 0 0; padding: 0 calc(clamp(14px, 1.6vw, 24px) + 8px); }
.page-tabs + .page-body { margin-top: clamp(14px, 1.6vw, 24px); }
html:has(.page-tabs) .block { scroll-margin-top: 0; }
html:has(.page-tabs) .page-aside { top: calc(var(--hh, 92px) + 74px); }

/* Clinic cards: the phone number and the map button sit at the same height in every card (address takes the spare room). */
.clinic-addresses > div { height: 100%; }
.clinic-addresses address { flex: 1 1 auto; }
.block .pub-links a:hover, .block .pub-links a:focus-visible { color: #fff !important; border-color: var(--blue) !important; background: var(--blue); }

/* Clinics page: three clinic cards (13 Oct 2026). */
.branch-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.branch-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 20px; background: #fff; box-shadow: var(--shadow); transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.branch-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: rgba(0, 144, 204, .4); }
.block .branch-photo { position: relative; display: block; aspect-ratio: 4 / 3; border: 0; border-radius: 0; }
.branch-tag { position: absolute; left: 12px; top: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(6, 52, 77, .82); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.branch-body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 20px 20px 22px; }
.block .branch-body h3 { margin: 0; font-size: 30px; line-height: 1.05; }
.branch-body h3 small { display: block; margin-top: 6px; color: var(--blue-deep); font: 700 10px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.block .branch-body p { flex: 1; font-size: 14.5px; line-height: 1.6; }
.block a.branch-rating { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; border: 0; color: var(--ink); }
.branch-rating b { font: 400 26px/1 var(--serif); }
.branch-rating i { color: #f5b400; font-style: normal; font-size: 12.5px; letter-spacing: 1px; }
.branch-rating span { color: var(--muted); font-size: 12px; font-weight: 600; }
.branch-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.block a.branch-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--blue); border-radius: 12px; background: #fff; color: var(--blue-deep); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background-color .25s, color .25s; }
.block a.branch-btn svg { width: 16px; height: 16px; }
.block a.branch-btn.is-primary { border-color: transparent; background: var(--grad); color: #fff; }
.block a.branch-btn:hover, .block a.branch-btn:focus-visible { background: var(--blue); border-color: var(--blue); color: #fff !important; }
@media (max-width: 1180px) and (min-width: 641px) { .branch-actions { grid-template-columns: 1fr; } }
@media (max-width: 960px) and (min-width: 641px) { .branch-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .block .branch-body h3 { font-size: 24px; } }
@media (max-width: 640px) { .branch-cards { grid-template-columns: 1fr; } }
.block a.branch-btn.is-primary { color: #fff !important; }
.block a.branch-btn:not(.is-primary) { color: var(--blue-deep) !important; }
.block a.branch-btn:not(.is-primary):hover, .block a.branch-btn:not(.is-primary):focus-visible { color: #fff !important; }
.block a.branch-rating { border-bottom: 0 !important; color: var(--ink) !important; }
.block a.branch-btn { border-bottom-width: 1px !important; }

/* Phone field: country code and number side by side. The native select (empty by default) sits invisibly over a label that
   shows only the chosen code, so the list can name the country while the field stays narrow. */
.tel-group { display: grid; grid-template-columns: 104px 1fr; gap: 10px; }
.tel-code { position: relative; display: flex; align-items: center; padding: 13px 34px 13px 16px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--ice) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230072a8' stroke-width='1.8' d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 16px no-repeat; font-size: 15px; color: var(--ink); transition: border-color .25s, box-shadow .25s, background-color .25s; }
.tel-code-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.tel-code.is-empty .tel-code-value { color: var(--dim); }
.field .tel-code select { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.tel-code:focus-within { border-color: var(--blue); background-color: #fff; box-shadow: 0 0 0 4px rgba(0, 168, 234, .14); }

/* Turkish homepage (tr.html): map link in place of the Google rating in the hero panel */
.cl-map { gap: 5px; font-size: 12px; font-weight: 600; color: var(--blue-deep); }
.cl-map svg { width: 14px; height: 14px; }

/* Reviews page: Google reviews by clinic (user, 13 Oct 2026). One row per clinic: name, rating and contact on the left,
   that clinic's reviews in a sideways strip on the right (arrows, swipe or keyboard). Long reviews fold to 8 lines. */
.gr-rows { display: grid; gap: 18px; margin-top: 24px; }
.gr-row { display: grid; grid-template-columns: minmax(230px, 270px) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: #fff; }
.gr-clinic { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.gr-clinic h3 { color: var(--ink); font: 400 30px/1.05 var(--serif); }
.gr-clinic h3 small { display: block; margin-top: 6px; color: var(--muted); font: 700 9.5px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.gr-score { display: flex; align-items: center; gap: 8px; margin: 0; }
.gr-score b { color: var(--ink); font: 400 38px/1 var(--serif); }
.gr-score i { color: #f5b400; font-style: normal; font-size: 13px; letter-spacing: 1px; }
.gr-score span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.gr-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gr-actions .button { padding: 11px 20px; font-size: 13.5px; }
.block a.gr-all { justify-self: start; color: var(--blue-deep); border-bottom: 0 !important; font-size: 13px; font-weight: 600; }
.block a.gr-all:hover { color: var(--blue); }
.gr-clinic .strip-nav { margin-top: auto; }
.gr-clinic .strip-btn { width: 40px; height: 40px; font-size: 15px; }
.gr-strip { display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px; margin: -2px; }
.gr-strip::-webkit-scrollbar { display: none; }
.gr-strip:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.gr-card { flex: 0 0 clamp(250px, 31%, 300px); display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 20px 20px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ice); scroll-snap-align: start; }
.gr-card .gr-stars { margin: 0; color: #f5b400; font-size: 14px; letter-spacing: 2px; }
.gr-card .gr-stars span { color: rgba(13, 42, 58, .2); }
.gr-text { margin: 0; }
.gr-text p { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; margin: 0; color: var(--text); font-size: 14px; line-height: 1.6; }
.gr-card.is-open .gr-text p { display: block; }
.gr-more { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--blue-deep); font: 600 13px/1.4 var(--sans); cursor: pointer; }
.gr-more:hover { color: var(--blue); }
.gr-card figcaption { display: grid; gap: 2px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.gr-card figcaption b { color: var(--ink); font-size: 14px; font-weight: 600; }
.gr-card figcaption span { color: var(--muted); font-size: 12px; }
@media (max-width: 900px) {
  .gr-row { grid-template-columns: 1fr; }
  .gr-clinic { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px 16px; }
  .gr-clinic h3, .gr-actions, .gr-all { grid-column: 1 / -1; }
  .gr-clinic .strip-nav { margin-top: 0; grid-column: 2; grid-row: 2; }
  .gr-card { flex-basis: min(300px, 84%); }
}

/* 13 Oct: keep the logo from being squeezed to zero width by the menu between ~1000 and ~1200 px */
.site-header .brand { flex: none; }

/* Language switch with flags (13 Oct): TR · EN · FR (French page not built yet, shown as "soon").
   Desktop: a button opens the list; in the drawer (<= 1180 px) the three languages sit in one row. */
.lang-switch { position: relative; }
.lang-current { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 10px 0 11px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; font: 600 13px/1 var(--sans); color: var(--ink); cursor: pointer; transition: border-color .2s var(--ease); }
.lang-current:hover, .lang-current[aria-expanded="true"] { border-color: var(--blue); }
.lang-switch img { width: 22px; height: 15px; flex: none; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(13, 42, 58, .14); }
.lang-caret { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.lang-current[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; display: grid; gap: 2px; min-width: 200px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lift); }
.lang-switch:not(.is-open) .lang-menu { display: none; }
.lang-menu a, .lang-soon { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--ink); }
.lang-menu a:hover { background: var(--ice); color: var(--ink); }
.lang-menu a[aria-current] { background: var(--ice-2); font-weight: 600; }
.lang-soon { color: var(--muted); cursor: default; }
.lang-soon img { opacity: .55; }
.lang-soon small { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
@media (max-width: 1180px) {
  .lang-current { display: none; }
  .lang-switch:not(.is-open) .lang-menu, .lang-menu { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; padding: 14px 0 2px; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .lang-menu a, .lang-soon { justify-content: center; gap: 8px; min-width: 0; padding: 10px 6px; border: 1px solid var(--line-strong); font-size: 13.5px; }
  .lang-menu a[aria-current] { border-color: var(--blue); }
  .lang-soon { border-style: dashed; }
  .lang-soon small { display: none; }
}

/* Treatment cards with two buttons (tr.html, 13 Oct): "Tedaviyi incele" (filled) above "Randevu alın" (outline).
   The card hover no longer fills the outline button, so the two stay distinct. */
.tcard-actions { display: grid; gap: 8px; margin-top: auto; }
.tcard-actions .package-cta { margin-top: 0; }
.package-card:hover .tcard-actions .button-outline { background: transparent; color: var(--ink); border-color: var(--blue); }
.tcard-actions .button-outline:hover, .package-card:hover .tcard-actions .button-outline:hover { background: var(--grad); color: #fff; border-color: transparent; }
.tcard-more, .tcard-more:hover { background: var(--grad); color: #fff; border-color: transparent; }
.tcard-more:hover { box-shadow: 0 12px 26px -14px rgba(0, 144, 204, .9); }

/* Turkish treatment pages have no Google ratings under the hero title: keep the button off the subtitle */
.tp-hero-copy h1 + .tp-hero-actions { margin-top: clamp(22px, 3vh, 34px); }

/* "Also at our clinics" pills that have their own page (14 Oct): the whole pill reads as the link */
.all-treatments li:has(> a) { padding: 0; }
.all-treatments li > a { display: block; padding: 8px 15px; color: inherit; }

/* Doctor pages: under the "at a glance" card, a reminder that every dentist also provides general treatment (user, 14 Oct) */
.hero-card-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.55; color: var(--muted); }

/* ==== Neon light layer (14 Oct 2026; user: "the design is too plain, too much white: neon-like light behind the white areas,
   livelier frames"). Two sources of light: (1) a still aurora fixed behind every panel, (2) a glowing logo-blue rim on the framed
   panels and cards, stronger on hover. The moving parts (drifting aurora, a light running along each panel edge) were removed on
   the user's request the same day ("the moving blue cloud: remove it"). Previous stylesheet: kaynak/styles-v10-before-neon.css. ==== */
:root {
  --neon: 0, 168, 234; --neon-2: 92, 214, 255; --neon-deep: 0, 114, 168;
  --rim: rgba(var(--neon), .5);
  --glow: 0 0 0 1px rgba(var(--neon), .08), 0 0 26px -6px rgba(var(--neon), .38), 0 22px 46px -30px rgba(var(--neon-deep), .5);
  --glow-strong: 0 0 0 1px rgba(var(--neon), .3), 0 0 38px -4px rgba(var(--neon), .55), 0 28px 60px -30px rgba(var(--neon-deep), .6);
}
body { background: #dfecf5; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34vmax 26vmax at 16% 18%, rgba(var(--neon), .34), transparent 70%),
    radial-gradient(30vmax 24vmax at 86% 28%, rgba(var(--neon-2), .36), transparent 70%),
    radial-gradient(36vmax 26vmax at 62% 82%, rgba(var(--neon-deep), .26), transparent 70%),
    radial-gradient(26vmax 22vmax at 22% 88%, rgba(110, 160, 255, .22), transparent 70%); }
/* Panels: neon rim, light spilling onto the page behind them, a faint blue tint in place of flat white */
.section, .page-hero, .page-body, .related { border-color: rgba(var(--neon), .7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), inset 0 0 60px -14px rgba(var(--neon), .34), 0 0 0 1px rgba(var(--neon), .16), 0 0 22px -2px rgba(var(--neon), .5), 0 0 70px -10px rgba(var(--neon-2), .45); }
.contact, .page-body { background: radial-gradient(55% 45% at 100% 0, rgba(var(--neon), .09), transparent 70%), radial-gradient(45% 40% at 0 100%, rgba(var(--neon-2), .1), transparent 70%), #fff; }

/* Cards: glowing rim instead of a thin grey line; on hover the light grows and the card lifts */
.why-card, .why-brands, .consult-form, .branch-card, .related-card, .rating-card, .person-card, .aside-card, .hero-card, .tp-card, .tp-card-link, .gr-card, .team-member .image-link { border-color: var(--rim); box-shadow: var(--glow); }
.why-card, .branch-card, .related-card, .rating-card, .person-card, .tp-card-link { transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.why-card:hover, .branch-card:hover, .related-card:hover, .rating-card:hover, .person-card:hover, .tp-card-link:hover,
.why-card:focus-within, .branch-card:focus-within, .related-card:focus-visible, .rating-card:focus-visible, .person-card:focus-visible, .tp-card-link:focus-visible { border-color: rgba(var(--neon), .85); box-shadow: var(--glow-strong); transform: translateY(-5px); }
.team-member .image-link:hover, .team-member .image-link:focus-visible { box-shadow: var(--glow-strong); }
.package-card { filter: drop-shadow(0 0 14px rgba(var(--neon), .26)); }
.package-card:hover, .package-card:focus-within { filter: drop-shadow(0 0 26px rgba(var(--neon), .5)); }
.story-card { box-shadow: 0 0 0 1px rgba(var(--neon), .35), 0 0 26px -6px rgba(var(--neon), .4); }

/* Clinic pages (14 Oct 2026): the clinic's homepage tab inside the article. Team photo large on top, the other photos in a grid
   under it (three a row, the last ones two a row: .is-half), then the address strip (user, 14 Oct 2026). */
.clinic-panel.is-page { display: grid; gap: clamp(16px, 1.6vw, 22px); margin-top: 22px; }
.clinic-panel.is-page .clinic-card { flex: none; min-width: 0; }
.clinic-panel.is-page .clinic-card .image-link { aspect-ratio: 4 / 3; box-shadow: var(--glow); }
.clinic-panel.is-page .clinic-card.is-team .image-link { aspect-ratio: 3 / 2; }
.clinic-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px); }
.clinic-grid .clinic-card { grid-column: span 2; }
.clinic-grid .clinic-card.is-half { grid-column: span 3; }
.clinic-grid .clinic-card.is-half .image-link { aspect-ratio: 16 / 10; }
.clinic-panel.is-page .clinic-facts { width: 100%; margin: 6px 0 0; border-color: var(--rim); box-shadow: var(--glow); }
@media (max-width: 640px) {
  .clinic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clinic-grid .clinic-card, .clinic-grid .clinic-card.is-half { grid-column: span 1; }
  .clinic-grid .clinic-card.is-half .image-link { aspect-ratio: 4 / 3; }
  .clinic-grid .clinic-card:last-child:nth-child(odd) { grid-column: span 2; }
  .clinic-grid .clinic-card:last-child:nth-child(odd) .image-link { aspect-ratio: 16 / 10; }
}

/* "Neden İkon Diş" video (15 Oct 2026; Turkish homepage only: the video is spoken Turkish, and Turkish videos go on Turkish pages
   only, user 15 Oct): the clinic's YouTube video behind a poster frame (16.6 s of the video). The
   player loads from youtube-nocookie.com only when the poster is clicked (script.js, "YouTube videos"); without JS the link opens
   YouTube. */
.why-video { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 60px); align-items: center; margin: 0 0 clamp(34px, 4vw, 60px); }
.yt-embed { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--rim); border-radius: 18px; background: #04202f; box-shadow: var(--glow); }
.yt-embed img, .yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.yt-embed img { transition: transform .6s var(--ease); }
.yt-embed:hover img { transform: scale(1.03); }
.yt-play { position: absolute; z-index: 1; left: clamp(16px, 2.2vw, 28px); bottom: clamp(16px, 2.2vw, 28px); display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--grad); color: #fff; box-shadow: 0 0 0 10px rgba(255, 255, 255, .28), 0 0 40px rgba(var(--neon), .6); transition: transform .3s var(--ease); }
.yt-play svg { width: 32px; height: 32px; margin-left: 4px; }
.yt-embed:hover .yt-play, .yt-embed:focus-visible .yt-play { transform: scale(1.08); }
.yt-embed::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(0deg, rgba(4, 32, 47, .45), transparent); pointer-events: none; }
.yt-embed.is-playing::after { display: none; }
.yt-embed:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 4px; }
.why-video-text .eyebrow { margin-bottom: 14px; }
.why-video-text h3 { margin-bottom: 16px; font-size: clamp(30px, 2.7vw, 44px); line-height: 1.08; }
.why-video-text h3 em { display: block; font-style: italic; color: var(--blue-deep); }
.why-video-text p:not(.eyebrow) { margin-bottom: 20px; color: var(--muted); }
@media (max-width: 960px) { .why-video { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .yt-play { width: 56px; height: 56px; box-shadow: 0 0 0 7px rgba(255, 255, 255, .28), 0 0 30px rgba(var(--neon), .6); } .yt-play svg { width: 24px; height: 24px; } }

/* Page hero film (15 Oct 2026, Bahçeşehir clinic page): muted looping film in the hero frame, pause button bottom right */
.page-hero-media.is-video { aspect-ratio: 16 / 9; background: #04202f; }
.page-hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-toggle { position: absolute; right: 12px; bottom: 10px; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%; background: rgba(6, 52, 77, .6); color: #fff; transition: background-color .25s, transform .25s var(--ease); }
.media-toggle:hover { background: var(--blue-deep); transform: scale(1.06); }
.media-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.media-toggle svg { width: 16px; height: 16px; }
.media-toggle .i-play, .media-toggle.is-paused .i-pause { display: none; }
.media-toggle.is-paused .i-play { display: inline; }
/* A YouTube video inside a page block ({{youtube:…}}, Turkish doctor pages, 15 Oct 2026) */
.yt-embed.is-block { margin-top: 26px; }
/* A designed cover with its title on the left (scripts/video-covers/): play button bottom right, over the photo */
.yt-embed.is-cover .yt-play { left: auto; right: clamp(16px, 2.2vw, 28px); }
.yt-embed.is-cover::after { inset: 55% 0 0 45%; background: linear-gradient(0deg, rgba(4, 32, 47, .4), transparent); }

/* Vertical (Shorts) videos and the Turkish treatment pages' technology section (15 Oct 2026) */
.yt-embed.is-vertical { aspect-ratio: 9 / 16; }
.yt-embed.is-block.is-vertical { max-width: 340px; }
.tp-tech { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 80px); align-items: center; }
.tp-tech-copy h2 { margin-bottom: 18px; font-size: clamp(34px, 3.2vw, 54px); line-height: 1.03; }
.tp-tech-copy h2 .tp-kicker { font-size: .62em; }
.tp-tech-copy > p { max-width: 620px; margin-bottom: 14px; color: var(--muted); }
.tp-tech-copy > p.tp-tech-intro { color: var(--ink); font-size: 17px; }
.tp-tech-copy .checks { margin: 18px 0 22px; }
@media (max-width: 760px) {
  .tp-tech { grid-template-columns: minmax(0, 1fr); }
  .tp-tech-video { width: min(100%, 320px); margin-inline: auto; }
}
/* Vertical cover: play button centred between the photo and the title panel, clear of the cover text */
.yt-embed.is-cover.is-vertical .yt-play { left: calc(50% - 38px); right: auto; top: calc(47% - 38px); bottom: auto; }
.yt-embed.is-cover.is-vertical::after { display: none; }
@media (max-width: 640px) { .yt-embed.is-cover.is-vertical .yt-play { left: calc(50% - 28px); top: calc(47% - 28px); } }

/* Clinic cards with their own photo ({{branches:…}}, contact pages, 15 Oct 2026) */
.clinic-addresses > div.has-photo { overflow: hidden; }
.clinic-addresses .addr-photo { display: block; align-self: stretch; margin: -18px -18px 16px; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line); }
.clinic-addresses .addr-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.clinic-addresses .addr-photo:hover img { transform: scale(1.04); }
.clinic-addresses .addr-photo + h3 { margin-top: 0; }

/* Hero (15 Oct 2026, mobile performance): the poster picture paints first; the film is fetched after load and fades in over it */
.hero-film { opacity: 0; transition: opacity .8s var(--ease); }
.hero-film.is-ready { opacity: 1; }

/* Compact header on phones and small tablets (15 Oct 2026; user: "on mobile the header shrinks to half its height when scrolling
   down, and grows back over 2 s when scrolling up"). Transform only: the bar slides up by half its height while the logo and
   buttons slide down and shrink, so only the lower half shows; the sticky section tabs move with it. */
@media (max-width: 960px) {
  .site-header { transition: transform 2s var(--ease), box-shadow .3s; }
  .site-header .header-inner > :not(.scroll-progress) { transition: transform 2s var(--ease); }
  .site-header .brand { transform-origin: 0 50%; }
  .site-header .header-inner > :last-child { transform-origin: 100% 50%; }
  html.hdr-compact .site-header { transform: translateY(calc(var(--hh, 80px) * -.5)); }
  /* the scroll progress line is excluded: it stays on the header's bottom edge and keeps its full width (user, 15 Oct: it was left behind when the header shrank) */
  html.hdr-compact .site-header .header-inner > :not(.scroll-progress) { transform: translateY(calc(var(--hh, 80px) * .25)) scale(.72); }
  /* the section tabs stick under the compact header (sticky top), they are not moved: a transform also shifted them while
     not stuck, over the bottom of the hero above them (user, 15 Oct: "no space between the tabs and the section above") */
  html.hdr-compact .tp-tabs { top: calc(var(--hh, 80px) * .5); }
  html.hdr-compact .site-header, html.hdr-compact .site-header .header-inner > :not(.scroll-progress) { transition-duration: .35s; }
}
@media (prefers-reduced-motion: reduce) { html.hdr-compact .site-header, html.hdr-compact .site-header .header-inner > * { transform: none; } html.hdr-compact .tp-tabs { top: var(--hh, 92px); } }

/* Phones (15 Oct 2026; user: "on mobile, each section together with the header should fit the screen as far as possible").
   Tighter section spacing and headings, and the long stacks become sideways swipe strips (snap): the "why" cards, the team,
   the extra treatment pills and the contact page's clinic cards. The consultation form stays a form. */
@media (max-width: 640px) {
  .section { padding: 40px 0 36px; }
  .package-head h2, .why-head h2, .doctor-heading h2, .international h2, .yk h2, .contact-copy h2, .section h2 { font-size: clamp(36px, 10.5vw, 44px); line-height: 1; }
  .package-head, .why-head, .doctor-heading, .clinic-head, .stories-head { gap: 14px; margin-bottom: 22px; }
  .why-grid, .team-grid, .contact .clinic-addresses, .all-treatments {
    display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px; scroll-padding-inline: var(--gutter);
  }
  .why-grid::-webkit-scrollbar, .team-grid::-webkit-scrollbar, .contact .clinic-addresses::-webkit-scrollbar, .all-treatments::-webkit-scrollbar { display: none; }
  .why-grid > *, .contact .clinic-addresses > * { flex: 0 0 82%; scroll-snap-align: start; }
  .team-grid > * { flex: 0 0 44%; scroll-snap-align: start; }
  .all-treatments > li { flex: none; white-space: nowrap; scroll-snap-align: start; }
  .why-card { min-height: 0; padding: 26px 22px 84px; }
  .why-figure b { font-size: 46px; }
  .package-strip { margin-top: 24px; padding-top: 18px; }
  .why-brands { margin-top: 18px; }
  .contact .clinic-addresses { margin-bottom: 22px; }
}

/* ==== Phone screens as app screens (15 Oct 2026; user: "sections should be seen on screen without scrolling down, like a
   mobile app: the form must fit the screen, the journey animation must fit, the doctors' photos visible without scrolling,
   treatment cards four at a time with a bar underneath, before & after two across, patient videos three across").
   Everything below is ≤ 640 px only and overrides the earlier phone rules. Budget: 100svh − compact header − contact bar. ==== */
@media (max-width: 640px) {
  .section { padding: 26px 0 24px; }
  .section .eyebrow { margin-bottom: 10px; }
  .package-head h2, .why-head h2, .doctor-heading h2, .international h2, .yk h2, .contact-copy h2, .section h2 { font-size: clamp(30px, 8.8vw, 36px); line-height: 1; letter-spacing: -.025em; }
  .package-head, .why-head, .doctor-heading, .clinic-head, .stories-head { gap: 10px; margin-bottom: 14px; }
  .package-head-intro, .stories-intro, .clinic-intro, .why-intro, .doctor-heading > p { padding-left: 16px; }
  .package-head-intro { padding: 4px 0 2px 16px; }
  .package-head-intro p, .stories-intro, .clinic-intro, .why-intro p, .doctor-heading > p, .intl-grid p:not(.eyebrow), .contact-note { font-size: 13.5px; line-height: 1.5; margin-bottom: 8px; }
  .package-head-intro p br { display: none; }
  .package-head-intro .text-link { display: none; }   /* the pills it points to are right below */
  .stories-intro, .clinic-intro { margin-bottom: 6px; }
  .clinic-intro-wrap .text-link { margin: 0 0 0 16px; }
  .text-link { font-size: 15px; }
  .strip-head { margin: 8px 0 10px; }
  .strip-title { font-size: 18px; gap: 12px; }
  .strip-nav { display: none; }                 /* swipe on touch; the bar below the strip shows the position */
  .tstrip-head { display: none; }

  /* Strip position bar (script.js adds .strip-bar after .tgrid, .stories-grid and .results-strip) */
  .strip-bar { position: relative; height: 3px; margin: 2px 0 0; border-radius: 3px; background: rgba(13, 42, 58, .1); overflow: hidden; }
  .strip-bar i { position: absolute; top: 0; bottom: 0; left: calc(var(--pos, 0) * (100% - var(--size, 100%))); width: var(--size, 100%); border-radius: 3px; background: var(--grad); }

  /* 01 Treatments: 2 × 2 cards per screen, further columns by swiping */
  .tgrid { display: grid; grid-auto-flow: column; grid-template-rows: 1fr 1fr; grid-template-columns: calc((100% - 10px) / 2); grid-auto-columns: calc((100% - 10px) / 2); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 0; padding: 4px 0 8px; margin-inline: 0; }
  .tgrid .tcard { flex: none; scroll-snap-align: start; border-radius: 16px; }
  .tgrid .package-card-inner { border-radius: 15px; }
  .tcard .package-photo { aspect-ratio: 3 / 2; }
  .tcard .package-card-body { padding: 9px 11px 11px; }
  .tcard h3 { font-size: 14.5px; line-height: 1.15; }
  .tcard-sub { margin: 5px 0 0; font-size: 11.5px; line-height: 1.4; }
  .tcard .package-cta { display: none; }        /* the whole card opens the treatment; the fixed bar is the CTA */
  .tcard .package-num { top: 9px; left: 10px; font-size: 13px; gap: 7px; }
  .tcard .package-num::after { width: 14px; }
  .package-strip { margin-top: 14px; padding-top: 12px; gap: 8px 16px; }
  .package-strip > p { font-size: 8.5px; letter-spacing: .2em; }
  .all-treatments { padding: 2px var(--gutter) 6px; }
  .all-treatments li { padding: 6px 12px; font-size: 12px; }

  /* 02 Patient stories: three covers across */
  .stories-head { margin-bottom: 12px; }
  .stories-grid { gap: 8px; padding: 4px 0 8px; margin-inline: 0; }
  .story-card { flex: 0 0 calc((100% - 16px) / 3); border-width: 2px; border-radius: 12px; }
  .story-play::after { right: 7px; top: 7px; width: 30px; }

  /* 03 Before & after: two cards across, swipe for more; the slides inside are swiped too */
  .results-strip { gap: 10px; padding: 6px 0 8px; margin-inline: 0; }
  .result-card { flex: 0 0 calc((100% - 10px) / 2); }
  .result-media { border-width: 2px; border-radius: 12px; }
  .result-tag { top: 7px; left: 7px; padding: 3px 7px; font-size: 7.5px; letter-spacing: .12em; }
  .result-tag.is-after { left: calc(50% + 7px); }
  .result-nav { display: none; }
  .result-count { right: 6px; bottom: 6px; padding: 2px 7px; font-size: 8.5px; }
  .result-card figcaption { gap: 3px; padding: 8px 2px 0; }
  .result-country { gap: 6px; font-size: 8.5px; letter-spacing: .16em; }
  .result-country img { width: 16px; height: 11px; }
  .result-card strong { font-size: 15px; line-height: 1.15; }

  /* 04 Why: shorter cards, figure and label on one line */
  .why-head { margin-bottom: 12px; }
  .why-grid { gap: 10px; padding: 4px var(--gutter) 8px; }
  .why-grid > * { flex: 0 0 78%; }
  .why-card { padding: 18px 18px 58px; border-radius: 16px; }
  .why-figure { flex-direction: row; align-items: baseline; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; }
  .why-figure b { font-size: 34px; }
  .why-figure span { font-size: 8.5px; letter-spacing: .2em; }
  .why-card h3 { font-size: 20px; margin-bottom: 8px; }
  .why-card > p:not(.why-figure) { font-size: 13px; line-height: 1.55; }
  .why-icon { right: 16px; bottom: 14px; width: 38px; height: 38px; }
  .why-icon svg { width: 17px; height: 17px; }
  .why-brands { margin-top: 12px; padding: 14px 18px; gap: 10px; border-radius: 16px; }
  .why-brands > p { font-size: 8.5px; letter-spacing: .24em; }
  .brand-marquee { margin: 0 -18px; }
  .brand-marquee li { min-height: 36px; font-size: 15px; }

  /* 05 Clinics: film, facts and a small photo row on one screen */
  .clinic-head { margin-bottom: 12px; }
  .clinic-tabs { margin-bottom: 12px; }
  .clinic-film { border-radius: 14px; }
  .clinic-film img { max-height: none; }
  .clinic-film figcaption { padding: 12px 14px; font-size: 8.5px; }
  .clinic-facts { gap: 8px; padding: 10px; margin-top: 10px; }
  .clinic-facts-actions { grid-template-columns: 1.4fr 1fr 1fr; gap: 6px; }
  .clinic-facts-actions .cf-btn:first-child { grid-column: auto; font-size: 10px; letter-spacing: 0; }
  .cf-btn { padding: 7px 3px; font-size: 10.5px; }
  .clinic-facts-addr { font-size: 13px; }
  .clinic-intro-wrap .text-link { display: none; }   /* the fixed bar is the CTA */
  .clinic-panel .strip-head { display: none; }
  .clinic-strip { gap: 8px; padding: 2px 0 8px; margin-inline: 0; }
  .clinic-card { flex: 0 0 calc((100% - 16px) / 3); }
  .clinic-card .image-link { aspect-ratio: 4 / 3; border-radius: 10px; }
  .clinic-card figcaption { padding-top: 6px; font-size: 7.5px; gap: 6px; letter-spacing: .12em; }

  /* 06 Journey: natural height, small scene, one-line gains */
  .yk { min-height: 0; padding: 24px 0 20px; }
  .yk-kicker { margin-bottom: 8px; font-size: 9.5px; }
  .yk-track { margin: 14px 0 12px; }
  .yk-stage { flex: none; gap: 10px; padding: 14px 20px 18px; border-radius: 16px; }
  .yk-panels, .yk-panel { min-width: 0; }      /* the one-line gains row scrolls inside the panel instead of widening it (user, 15 Oct: text sat on the card edge) */
  .yk-art { flex: none; min-height: 0; height: clamp(120px, 20svh, 180px); }
  .yk-meta { font-size: 9px; }
  .yk-panel h3 { margin: 4px 0 6px; font-size: 24px; }
  .yk-panel > p:not(.yk-meta) { font-size: 13.5px; line-height: 1.5; }
  .yk-gains { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 10px -20px 0; padding: 0 20px; gap: 6px; scroll-padding-inline: 20px; }
  .yk-gains::-webkit-scrollbar { display: none; }
  .yk-gains li { flex: none; font-size: 11.5px; padding: 4px 10px 4px 5px; }
  .yk-gains li::before { width: 17px; height: 17px; font-size: 10px; }
  .yk-controls { margin-top: 12px; }
  .yk-btn, .yk-play { height: 44px; min-width: 44px; }

  /* 07 International: certificate beside the text, marks in one row */
  .intl-grid { gap: 14px; }
  .intl-grid .certificate-label { font-size: 12px; margin-top: 10px; }
  .intl-grid p:not(.eyebrow):not(.certificate-label) { margin-top: 10px; }
  .intl-grid .button { margin-top: 14px; min-height: 44px; }
  .certificate-frame { width: min(100%, 250px); margin-inline: auto; padding: 5px; }
  .intl-marks { flex-wrap: nowrap; gap: 14px; margin-top: 16px; padding-top: 14px; }
  .intl-marks img { width: 96px; flex: none; }
  .intl-marks p { font-size: 8.5px; letter-spacing: .14em; }

  /* 08 Doctors: two columns, down the page (user, 15 Oct evening; earlier the same day four across) */
  .doctors > .wrap > .eyebrow { margin-bottom: 10px; gap: 12px; }
  .doctors > .wrap > .eyebrow::before { width: 28px; }
  .doctor-heading { gap: 10px; margin-bottom: 14px; }
  .doctor-heading .text-link { margin-bottom: 0; }
  .doctor-layout { display: block; }
  .doctor-rail { display: none; }
  .team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; overflow: visible; margin-inline: 0; padding: 0; }
  .team-grid > *, .team-member.is-lead { flex: none; grid-column: auto; grid-row: auto; display: block; }
  .team-member .image-link, .team-member.is-lead .image-link { aspect-ratio: 4 / 5; border-radius: 14px; flex: none; }
  .team-member.is-lead .image-link img { position: static; object-position: 50% 0%; }
  .team-member figcaption { padding: 10px 2px 0; }
  .team-member h3, .team-member.is-lead h3 { font-size: 17px; line-height: 1.2; letter-spacing: 0; }
  .team-member figcaption p { margin-top: 4px; font-size: 8.5px; letter-spacing: .14em; line-height: 1.4; }
  .team-member figcaption small { display: none; }
  .brand-signoff { gap: 10px; margin-top: 16px; font-size: 7.5px; letter-spacing: .16em; line-height: 1.5; }
  .brand-signoff > p:first-child { padding-left: 10px; }

  /* 09 Contact: the form first and alone on its screen; the details follow underneath */
  .contact { scroll-margin-top: 0; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .contact-grid > * { min-width: 0; }            /* the long select options no longer push the form past the screen edge */
  .consult-form { order: -1; gap: 10px; padding: 18px 16px 16px; border-radius: 16px; }
  .consult-form h3 { font-size: 22px; margin-bottom: 0; }
  .field { gap: 5px; }
  .field-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .field label { font-size: 8.5px; letter-spacing: .16em; }
  .field input, .field select, .field textarea, .tel-code { padding: 10px 12px; border-radius: 10px; font-size: 16px; }   /* 16 px: iOS does not zoom in */
  .field select { background-position: right 10px center; }
  .tel-group { grid-template-columns: 96px 1fr; gap: 8px; }
  .tel-code { padding-right: 30px; border-radius: 10px; }
  .field textarea { min-height: 54px; }
  .consent { gap: 10px; font-size: 12px; line-height: 1.4; }
  .consent input { margin-top: 2px; }
  .consult-form .button-primary { min-height: 46px; }
  .form-status { min-height: 0; font-size: 12.5px; }
  .form-status:empty { display: none; }
  .form-note { font-size: 11px; line-height: 1.4; }
  .contact-copy .eyebrow { margin-bottom: 8px; }
  .contact-note { margin: 12px 0 18px; }
  .contact-lines { margin-bottom: 18px; }
  .contact-lines li { padding: 10px 0; }
  .contact-lines a, .contact-lines .wa-open { font-size: 19px; }
  .contact .clinic-addresses { margin-bottom: 16px; }

  /* The fixed contact bar slides away while the form is on screen (script.js toggles body.form-in-view) */
  .contact-bar { transition: transform .35s var(--ease); }
  body.form-in-view .contact-bar { transform: translateY(110%); }
}
@media (max-width: 640px) {
  /* Turkish "Neden İkon Diş" video: the cover already carries the title, so only the eyebrow, one line and the link stay */
  .why-video { gap: 10px; margin-bottom: 14px; }
  .why-video-text h3 { display: none; }
  .why-video-text .eyebrow { margin-bottom: 6px; }
  .why-video-text p:not(.eyebrow) { margin-bottom: 8px; font-size: 13.5px; line-height: 1.5; }
}
/* Short phones (≤ 700 px tall): the form still fits one screen */
@media (max-width: 640px) and (max-height: 700px) {
  .consult-form { gap: 8px; padding: 14px 14px 12px; }
  .consult-form h3 { font-size: 19px; }
  .field input, .field select, .tel-code { padding: 8px 12px; }
  .field textarea { min-height: 44px; }
  .form-note { display: none; }
  .consult-form .button-primary { min-height: 42px; }
}

/* Homepage "On this page" tabs (user, 15 Oct 2026): the treatment pages' sticky tabs, placed right under the hero so the first
   screen stays header + hero. Full width, centred on wide screens; anchors land below header + tabs. */
.tp-tabs.home-tabs { --tp-line: rgba(0, 144, 204, .2); margin: 0; padding: 0 var(--gutter); box-shadow: 0 10px 24px -22px rgba(6, 52, 77, .5); }
.home-tabs ol { width: fit-content; max-width: 100%; margin-inline: auto; }
html:has(.home-tabs) { scroll-padding-top: calc(var(--hh, 92px) + 56px); }
@media (max-width: 960px) {
  /* scrolling down to a section makes the header compact (half height), and the tabs move up with it */
  html:has(.home-tabs) { scroll-padding-top: calc(var(--hh, 92px) * .5 + 44px); }
}
@media (max-width: 640px) {
  .tp-tabs.home-tabs { padding: 0 6px; }
  .home-tabs ol { gap: 0; }
  .home-tabs a { padding: 11px 10px 9px; font-size: 12.5px; }
}

/* Touch screens (user, 15 Oct 2026: "while scrolling, images and sections wobble up and down; they should move on one axis").
   A tap counts as hover on phones, so the desktop lift / zoom effects made cards jump while swiping: none of them on touch.
   The journey panel slides sideways (the swipe axis) instead of up. */
@media (hover: none) {
  .package-card:hover, .package-card:focus-within, .story-card:hover, .story-card:focus-within, .why-card:hover, .why-card:focus-within,
  .clinic-card .image-link:hover, .clinic-card .image-link:focus-visible, .team-member .image-link:hover, .team-member .image-link:focus-visible,
  .result-media:hover, .result-media:focus-within, .certificate-frame:hover, .tp-card-link:hover, .tp-card-link:focus-visible,
  .rating-card:hover, .rating-card:focus-visible, a.person-card:hover, a.person-card:focus-visible, .person-card:hover,
  .related-card:hover, .related-card:focus-visible, .branch-card:hover, .branch-card:focus-within, .cl-row:hover,
  .button-primary:hover, .hero-btn:hover, .nav-cta:hover, .wa-round:hover, .wa-round:focus-visible, .whatsapp-float:hover, .whatsapp-float:focus-visible,
  .image-link:hover img, .package-card:hover .package-photo img, .yt-embed:hover img, .addr-photo:hover img, .media-toggle:hover { transform: none !important; }
}
@media (max-width: 760px) {
  .yk-panel { transform: translateX(18px); }
  .yk-panel.is-active { transform: none; }
}

/* Phones / tablets: the header is compact below the top of the page, so anchors land under the half-height header + tabs */
@media (max-width: 960px) {
  html:has(.tp), html:has(.page-tabs) { scroll-padding-top: calc(var(--hh, 92px) * .5 + 58px); }
  html:has(.page-tabs) .page-aside { top: calc(var(--hh, 92px) * .5 + 62px); }
}

/* Info-page hero with a YouTube video in place of the photo (hero.youtube, scripts/info-pages.cjs; user, 16 Oct 2026).
   A vertical (Shorts) video stands beside the "at a glance" card; on phones it is centred above the card. */
.page-hero-media.is-yt { aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; box-shadow: none; }
.page-hero-media.is-yt .yt-embed { margin: 0; }
.page-hero-media.is-short .yt-embed { width: 100%; max-width: none; }
.page-hero-side.has-short { grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: clamp(16px, 1.8vw, 26px); align-items: center; }
@media (max-width: 640px) {
  .page-hero-side.has-short { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .page-hero-side.has-short .page-hero-media { width: min(100%, 270px); }
  .page-hero-side.has-short .hero-card { width: 100%; }
}

/* Clinics & technology hero (user, 16 Oct 2026: "work on the design of this part"): video and "at a glance" card are one
   navy showcase panel (same navy as the cover's title panel), equal height; numbered points with thin rules; a line under them
   plays the video. The side column takes its own width, so the copy is not pushed away by an empty gap. */
.page-hero:has(.page-hero-side.has-short) { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 3.6vw, 64px); }
.page-hero-side.has-short { grid-template-columns: 270px minmax(280px, 340px); gap: 0; align-items: stretch; padding: 12px; border: 1px solid rgba(143, 216, 247, .35); border-radius: 28px;
  background: radial-gradient(ellipse at 100% 0, rgba(0, 168, 234, .38), transparent 58%), linear-gradient(155deg, #06456a, #052c42 72%);
  box-shadow: 0 0 0 1px rgba(var(--neon), .18), 0 0 30px -4px rgba(var(--neon), .45), 0 34px 70px -34px rgba(4, 32, 47, .75); }
.page-hero-side.has-short .yt-embed { border: 1px solid rgba(143, 216, 247, .3); border-radius: 18px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); }
.page-hero-side.has-short .hero-card { display: flex; flex-direction: column; padding: 22px 16px 14px 28px; border: 0; border-radius: 0; background: none; box-shadow: none; color: #dcedf6; }
.page-hero-side.has-short .hero-card .eyebrow { color: var(--sky); }
.page-hero-side.has-short .hero-card > p:not(.eyebrow) { color: #fff; font: 400 clamp(21px, 1.5vw, 25px)/1.22 var(--serif); letter-spacing: -.01em; }
.page-hero-side.has-short .checks { counter-reset: hc; gap: 0; margin-top: 18px; }
.page-hero-side.has-short .checks li { counter-increment: hc; display: flex; align-items: center; min-height: 54px; padding: 10px 0 10px 46px; border-top: 1px solid rgba(143, 216, 247, .18); color: #dcedf6; font-size: 14px; line-height: 1.45; }
.page-hero-side.has-short .checks li::before { content: counter(hc, decimal-leading-zero); top: 50%; width: 32px; height: 32px; margin-top: -16px; display: grid; place-items: center; border: 1px solid rgba(143, 216, 247, .5); background: rgba(0, 168, 234, .14); color: var(--sky); font: 600 11.5px/1 var(--sans); letter-spacing: .04em; }
.hero-card-video { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 14px 0 4px; border-top: 1px solid rgba(143, 216, 247, .18); color: var(--sky); font-size: 12.5px; font-weight: 600; letter-spacing: .03em; text-align: left; transition: color .25s; }
.hero-card-video span { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 16px rgba(0, 168, 234, .6); }
.hero-card-video span::before { content: ""; margin-left: 2px; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.hero-card-video:hover, .hero-card-video:focus-visible { color: #fff; }
.hero-card-video:focus-visible { outline: 2px solid var(--sky); outline-offset: 4px; border-radius: 4px; }
/* Up to 1180 px: copy above, the panel across the full width under it */
@media (max-width: 1180px) {
  .page-hero:has(.page-hero-side.has-short) { grid-template-columns: minmax(0, 1fr); }
  .page-hero-side.has-short { grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .page-hero-side.has-short { grid-template-columns: minmax(0, 1fr); justify-items: stretch; padding: 10px; border-radius: 22px; }
  .page-hero-side.has-short .page-hero-media { width: min(100%, 260px); justify-self: center; margin-top: 4px; }
  .page-hero-side.has-short .hero-card { width: auto; padding: 18px 10px 8px; }
  .page-hero-side.has-short .checks li { min-height: 48px; }
}
.hero-card-video b { display: grid; gap: 2px; font-weight: 600; }
.hero-card-video small { font-size: 11px; font-weight: 500; letter-spacing: .06em; color: rgba(220, 237, 246, .7); }

/* Header mega menu "Hekimlerimiz" (TR, 16 Oct 2026): the dentists' portraits in a 4 × 2 grid, the last tile links to the team. */
.menu-panel.is-people { width: min(760px, calc(100vw - 40px)); padding: 22px 24px 24px; }
.menu-people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 14px; margin-top: 14px; }
.menu-people a { display: grid; gap: 8px; color: var(--ink); font: 400 15.5px/1.2 var(--serif); }
.menu-people img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0; border: 1px solid var(--rim, var(--line)); border-radius: 12px; background: var(--ice); transition: transform .3s var(--ease), box-shadow .3s; }
.menu-people a:hover img, .menu-people a:focus-visible img { transform: translateY(-3px); box-shadow: var(--glow, var(--shadow)); }
.menu-people a:hover span, .menu-people a:focus-visible span { color: var(--blue-deep); }
.menu-people a:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 12px; }
.menu-people .is-more a { align-content: center; justify-items: center; aspect-ratio: 4 / 5; border: 1px dashed rgba(0, 144, 204, .45); border-radius: 12px; background: linear-gradient(165deg, #fff, var(--ice-2)); color: var(--blue-deep); text-align: center; }
.menu-people .is-more i { font-style: normal; font-size: 20px; transition: transform .3s var(--ease); }
.menu-people .is-more a:hover i { transform: translateX(4px); }
@media (max-width: 1180px) {
  .menu-panel.is-people { width: auto; padding: 14px 7px 20px; }
  .menu-people { gap: 12px 10px; }
  .menu-people a { font-size: 13.5px; }
}
@media (max-width: 640px) {
  .menu-people { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; }
  .menu-people a { gap: 5px; font-size: 11.5px; line-height: 1.2; }
  .menu-people img, .menu-people .is-more a { border-radius: 9px; }
  .menu-people .is-more a { font-size: 11.5px; }
}
@media (min-width: 1181px) { .menu-people img, .menu-people .is-more a { aspect-ratio: 1 / 1; object-position: 50% 8%; } }

/* Treatment groups (TR, 17 Oct 2026; user: new groups in the Tedaviler menu and in "01 / Kişiye özel diş hekimliği", treatments as
   sub-headings). Built from scripts/treatments/tr/_shared.cjs CATEGORIES; an item without a page yet is plain text. */
.menu-panel.is-cats { width: min(1080px, calc(100vw - 40px)); padding: 24px 28px 18px; }
.menu-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 26px; }
.menu-cats .menu-column + .menu-column { padding-left: 0; border-left: 0; }
.menu-cats .menu-column:nth-child(4n + 2), .menu-cats .menu-column:nth-child(4n + 3), .menu-cats .menu-column:nth-child(4n + 4) { padding-left: 22px; border-left: 1px solid var(--line); }
.menu-cats .menu-heading { margin-bottom: 6px; color: var(--blue-deep); }
.menu-cats .menu-links a, .menu-cats .menu-links span { padding: 5px 0; font-size: 13.5px; }
.menu-links span { display: block; padding: 7px 0; font-size: 14.5px; line-height: 1.35; color: var(--dim); }
.menu-all { display: inline-flex; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); width: 100%; font-size: 13px; font-weight: 600; color: var(--blue-deep); }
@media (max-width: 1180px) {
  .menu-panel.is-cats { width: auto; }
  .menu-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
  .menu-cats .menu-column:nth-child(n) { padding-left: 0; border-left: 0; }
}
@media (max-width: 640px) { .menu-cats { grid-template-columns: minmax(0, 1fr); } }

.tcats { margin-top: clamp(28px, 3.4vw, 48px); padding-top: clamp(20px, 2.4vw, 30px); border-top: 1px solid var(--line); }
.tcats-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; color: var(--muted); font-size: 9.5px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; }
.tcats-head span { font: 12px var(--serif); letter-spacing: .25em; color: var(--blue-deep); }
.tcats-head i { width: 32px; height: 1.5px; background: var(--grad); }
.tcats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tcat { position: relative; padding: 20px 20px 18px; border: 1px solid var(--rim, var(--line)); border-radius: 18px; background: linear-gradient(165deg, #fff, var(--ice) 85%); box-shadow: var(--glow, var(--shadow)); }
.tcat-num { position: absolute; top: 18px; right: 20px; font: 400 15px/1 var(--serif); color: var(--blue); }
.tcat h3 { margin: 0 34px 10px 0; font-size: clamp(19px, 1.45vw, 22px); line-height: 1.15; }
.tcat-list li { border-top: 1px solid var(--line); }
.tcat-list a, .tcat-list span { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; font-size: 13.5px; line-height: 1.35; }
.tcat-list a { color: var(--ink); transition: color .2s; }
.tcat-list a::after { content: "→"; color: var(--blue); transition: transform .25s var(--ease); }
.tcat-list a:hover, .tcat-list a:focus-visible { color: var(--blue-deep); }
.tcat-list a:hover::after { transform: translateX(3px); }
.tcat-list span { color: var(--muted); }
@media (max-width: 1180px) { .tcats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .tcats { margin-top: 16px; padding-top: 14px; }
  .tcats-head { margin-bottom: 10px; font-size: 8.5px; letter-spacing: .2em; }
  .tcats-grid { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 8px; scroll-padding-inline: var(--gutter); }
  .tcats-grid::-webkit-scrollbar { display: none; }
  .tcat { flex: 0 0 74%; scroll-snap-align: start; padding: 16px 16px 12px; border-radius: 16px; }
  .tcat h3 { font-size: 18px; }
  .tcat-list a, .tcat-list span { padding: 7px 0; font-size: 13px; }
}
/* Desktop: the groups panel is wider than the space around its button, so it is centred on the header bar, not on the button */
@media (min-width: 1181px) {
  .nav-item:has(> .menu-panel.is-cats) { position: static; }
  .menu-panel.is-cats { top: 100%; }
  .menu-panel.is-cats::before { top: -28px; height: 28px; }
}
.tcat-num { font: 600 12px/1 var(--sans); letter-spacing: .06em; top: 22px; }
/* Footer treatments (TR, 19 Oct 2026): the eight groups, then a link to the full list on the homepage */
.footer-col a.footer-all { display: inline-flex; gap: 8px; margin-top: 6px; font-weight: 600; color: #fff; }
/* Form honeypot (send.php): off screen for people, filled by bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Cookie notice (19 Oct 2026; script.js "Cookie notice"): informs only, bottom left on wider screens (the WhatsApp button
   sits bottom right), above the fixed contact bar on phones. */
.cookie-notice { position: fixed; left: 18px; bottom: 18px; z-index: 45; display: flex; align-items: center; gap: 16px; width: min(440px, calc(100vw - 36px)); padding: 14px 14px 14px 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .97); box-shadow: 0 24px 48px -22px rgba(6, 52, 77, .4); font-size: 13px; line-height: 1.5; color: var(--muted); }
.cookie-notice p { margin: 0; }
.cookie-notice a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 2px; }
.cookie-notice-ok { flex: none; min-height: 40px; padding: 8px 18px; border: 0; border-radius: 999px; background: var(--grad); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
@media (max-width: 640px) {
  .cookie-notice { left: 12px; right: 12px; width: auto; bottom: calc(80px + env(safe-area-inset-bottom)); padding: 12px 12px 12px 14px; font-size: 12.5px; }
}

/* Price pages (20 Oct 2026; scripts/prices/, tokens {{currency}} and {{prices:…}}): the price list as two-column tables in the
   .data-table style, prices right-aligned in the serif; the € / £ / $ switch above them (script.js "Currency switch"). */
.currency-switch { display: inline-flex; align-items: center; gap: 6px; margin: 18px 0 6px; padding: 5px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; }
.currency-switch span { padding: 0 8px 0 10px; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.currency-switch button { min-height: 36px; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s; }
.currency-switch button[aria-pressed="true"] { background: var(--grad); color: #fff; }
.currency-switch button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.price-table-wrap { max-width: 860px; margin-top: 18px; border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; background: #fff; }
.price-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.price-table th, .price-table td { padding: 13px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; line-height: 1.45; }
.price-table tbody tr:last-child th, .price-table tbody tr:last-child td { border-bottom: 0; }
.price-table thead th { color: var(--blue-deep); font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; background: var(--ice); }
.price-table thead th:last-child, .price-table td { text-align: right; }
.price-table tbody th { color: var(--ink); font-weight: 600; }
.price-table td { white-space: nowrap; }
.price-table td .price { font-family: var(--serif); font-size: 22px; color: var(--ink); font-variant-numeric: lining-nums; }
.price-table td small { display: block; color: var(--muted); font-size: 11.5px; }
.block h3 + .price-table-wrap { margin-top: 12px; }
@media (max-width: 640px) {
  .currency-switch { display: flex; width: 100%; justify-content: space-between; }
  .currency-switch span { padding-left: 6px; }
  .price-table th, .price-table td { padding: 11px 12px; font-size: 13.5px; }
  .price-table td .price { font-size: 19px; }
}
.aside-card .currency-switch { display: flex; justify-content: space-between; margin: 16px 0 0; }
.aside-card .currency-switch span { display: none; }

/* Package cards (20 Oct 2026; {{packages:…}}, scripts/prices/packages.cjs): three a row on wide screens, two on tablets, a
   swipe strip with the position bar on phones (script.js). The photo carries the treatment and brand (scripts/package-images). */
.pkg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 22px; }
.page-content .pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pkg-card { display: flex; flex-direction: column; border: 1px solid var(--line-strong); border-radius: 22px; background: #fff; overflow: hidden; box-shadow: 0 28px 56px -38px rgba(6, 52, 77, .4); }
.pkg-card header { padding: 18px 22px 16px; background: var(--ice); border-bottom: 1px solid var(--line); }
.pkg-card .pkg-no { margin: 0 0 4px; color: var(--blue-deep); font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.pkg-card h3 { margin: 0; font-size: 26px; line-height: 1.12; }
.pkg-card h3 em { color: var(--blue); }
.pkg-media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.pkg-meta { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-bottom: 1px solid var(--line); }
.pkg-meta div { padding: 12px 22px; }
.pkg-meta div + div { border-left: 1px solid var(--line); }
.pkg-meta dt { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.pkg-meta dd { margin: 3px 0 0; font-weight: 600; font-size: 14px; color: var(--ink); }
.pkg-body { padding: 16px 22px 0; flex: 1; }
.pkg-body h4 { margin: 0 0 10px; font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--ink); }
.pkg-body .checks { margin: 0; }
.pkg-card .pkg-note { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.pkg-price { display: grid; margin: 18px 22px 0; padding: 14px 18px; border-radius: 16px; background: var(--ice); }
.pkg-price > span { color: var(--blue-deep); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.pkg-price strong { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.05; color: var(--ink); }
.pkg-price small { color: var(--muted); font-size: 12.5px; }
.pkg-actions { display: grid; gap: 10px; padding: 16px 22px 22px; }
.pkg-actions .button { justify-content: center; }
@media (max-width: 1180px) { .pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .pkg-grid, .page-content .pkg-grid { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 86%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 10px; scrollbar-width: none; }
  .pkg-grid::-webkit-scrollbar { display: none; }
  .pkg-card { scroll-snap-align: start; }
  .pkg-card h3 { font-size: 23px; }
  .pkg-price strong { font-size: 34px; }
}
.pkg-card .pkg-note.is-pending { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #fff3c4; color: #7a5b00; font-size: 12px; font-weight: 600; }

/* Homepage packages (20 Oct 2026; section 02, cards from scripts/home-packages.cjs): the package card in a shorter form, one per
   kind, "from" price, no brand. */
.home-packages .pkg-grid { margin-top: clamp(24px, 3vw, 40px); }
.pkg-card.is-home h3 { font-size: 30px; }
.pkg-card.is-home .pkg-body { padding-top: 18px; }
.home-pkg-more { margin: 26px 0 0; text-align: center; }
@media (max-width: 640px) { .home-pkg-more { display: none; } }   /* secondary link hidden on phones, as in the other sections */
@media (max-width: 640px) {
  /* app-screen budget (~800 px a section): on phones the home package cards drop the kicker and the second button */
  .pkg-card.is-home .pkg-no, .pkg-card.is-home .pkg-actions .button-outline { display: none; }
  .pkg-card.is-home header { padding: 12px 18px; }
  .pkg-card.is-home h3 { font-size: 24px; }
  .pkg-card.is-home .pkg-body { padding: 12px 18px 0; }
  .pkg-card.is-home .checks li { font-size: 13.5px; }
  .pkg-card.is-home .pkg-price { margin: 12px 18px 0; padding: 10px 14px; }
  .pkg-card.is-home .pkg-actions { padding: 12px 18px 16px; }
}

/* Price pages without the side card (user, 20 Oct 2026): the € / £ / $ switch sticks under the header and the section tabs while
   the reader is in the package cards or the price tables (info-pages.cjs stickyCurrency → .currency-group > .currency-bar), and
   the package cards run three a row. */
.currency-group { position: relative; }
.currency-bar { position: sticky; top: calc(var(--hh, 92px) + 74px); z-index: 7; display: flex; align-items: flex-start; justify-content: flex-end; margin-bottom: 8px; pointer-events: none; }
/* the group keeps the gap between blocks (user, 20 Oct 2026: the switch sat beside a heading and the heading touched the text) */
.currency-group { margin-top: 28px; }
.currency-group + .block { margin-top: clamp(48px, 5vw, 76px); }
.page-content > .currency-group:first-child { margin-top: 0; }
.currency-group > .block:first-of-type { margin-top: 0; }
.currency-bar .currency-switch { margin: 0; pointer-events: auto; box-shadow: 0 16px 34px -18px rgba(6, 52, 77, .45); }
.page-body.is-wide .page-content .pkg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1180px) { .page-body.is-wide .page-content .pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .currency-bar { top: calc(var(--hh, 92px) * .5 + 62px); } }
@media (max-width: 640px) {
  .page-body.is-wide .page-content .pkg-grid { grid-template-columns: none; }
  .currency-bar { justify-content: center; }
  .currency-bar .currency-switch { width: auto; }
}
.currency-bar { margin-bottom: 18px; }
/* EN footer contact (22 Oct 2026): international patient line, email, then the Bahçeşehir clinic as plain text in the link size */
.footer-col .footer-addr { margin-top: 14px; font-size: 13px; line-height: 1.55; color: rgba(215, 238, 249, .78); }

/* Hero card contact links (22 Oct 2026; info-pages card.links): address, phone, email and WhatsApp as tappable lines with icons. */
.card-links { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; }
.card-links a { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 0; border-radius: 12px; color: var(--ink); font-size: 14.5px; line-height: 1.45; transition: color .2s, background-color .2s; }
.card-links a:hover, .card-links a:focus-visible { color: var(--blue-deep); background: rgba(0, 144, 204, .06); }
.card-links a small { display: block; color: var(--muted); font-size: 12px; }
.card-link-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ice-2); color: var(--blue-deep); }
.card-link-icon svg { width: 18px; height: 18px; }
.card-link-icon.is-wa { background: #25d366; color: #fff; }
.card-links + .checks { margin-top: 12px; }
/* WhatsApp line of the hero card in the floating WhatsApp button's design (user, 22 Oct 2026) */
.card-link-icon.is-wa { position: relative; background: radial-gradient(circle at 30% 25%, #ffffff, #e6f2f9 70%); border: 1px solid var(--blue); color: var(--blue-deep); box-shadow: 0 8px 20px -10px rgba(0, 114, 168, .55), inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(0, 144, 204, .2); }
.card-link-icon.is-wa::after { content: ""; position: absolute; top: 1px; right: 1px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #25d366; }