/* ===== Tokens ===== */
:root{
  --navy-900:#0E2A47; --navy-800:#13314F; --navy-700:#1B3A5C;
  --teal-500:#17A2A8; --teal-600:#138E94; --teal-400:#22B8BE; --teal-100:#E6F6F6; --teal-50:#F1FAFA;
  --bg:#F5F7FA; --bg-soft:#EEF2F6; --surface:#FFFFFF; --border:#E2E8F0;
  --text:#1A2B48; --muted:#6B7785; --star:#F5B301; --success:#16A34A; --wa:#25D366;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 10px 30px rgba(15,23,42,.08);
  --shadow-lg:0 24px 50px rgba(15,23,42,.12);
  --shadow-xl:0 30px 60px -10px rgba(14,42,71,.25);
  --r-card:18px; --r-btn:12px;
  --grad-teal:linear-gradient(135deg,#17A2A8 0%,#22B8BE 50%,#0E8A91 100%);
  --grad-hero:radial-gradient(900px 500px at 0% 0%, rgba(230,246,246,.6) 0%, transparent 55%),
              radial-gradient(700px 400px at 100% 0%, rgba(241,250,250,.5) 0%, transparent 50%),
              linear-gradient(180deg,#F8FAFB 0%,#F0F3F7 100%);
}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{margin:0;padding:0;overflow-x:hidden}
section{overflow-x:clip}
body{
  font-family:"Inter","Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--text); background:var(--bg); line-height:1.6; font-size:15px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:rgba(23,162,168,.18); color:var(--navy-900)}
:focus-visible{outline:2px solid var(--teal-500); outline-offset:2px; border-radius:4px}
:focus:not(:focus-visible){outline:none}
img,svg{display:block; max-width:100%}
img{height:auto}
a{color:inherit; text-decoration:none}
ul{list-style:none; margin:0; padding:0}
button{font:inherit; cursor:pointer; border:0; background:none}
h1,h2,h3,h4,h5,h6{margin:0; color:var(--navy-900); font-weight:700; line-height:1.25}
h1{font-size:42px}
h2{font-size:32px}
h3{font-size:24px}
h4{font-size:18px}
.h3-styled{font-size:24px; font-weight:700; line-height:1.25; color:var(--navy-900); margin-bottom:16px}
p{margin:0; font-size:16px; line-height:1.6}
html{font-size:16px}
body{font-size:16px}
input, select, textarea, button{font-size:16px}
small{font-size:14px}
@media(max-width:768px){h1{font-size:28px} h2{font-size:22px} h3{font-size:18px} .h3-styled{font-size:18px}}

/* ===== Helpers ===== */
.container{max-width:1200px; margin:0 auto; padding:0 24px}
.ic{width:18px; height:18px; flex:none; display:inline-block !important; vertical-align:middle; color:currentColor; max-width:none !important; max-height:none !important; overflow:visible}
.ic--filled{fill:currentColor; stroke:none}
.section__title{text-align:center; font-size:30px; font-weight:800; letter-spacing:-.01em; margin:0 auto 8px; color:var(--navy-900); max-width:720px}
.section__sub{text-align:center; color:var(--muted); font-size:15px; max-width:560px; margin:0 auto 36px}
.eyebrow{display:flex; width:fit-content; align-items:center; gap:8px; margin:0 auto 12px; padding:6px 14px; background:var(--teal-100); color:var(--teal-600); font-weight:700; font-size:12px; border-radius:999px; text-transform:uppercase; letter-spacing:.06em}

/* ===== Buttons ===== */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:12px 20px; border-radius:var(--r-btn); font-weight:600; font-size:14px;
  border:1px solid transparent; transition:transform .18s ease, background .2s, box-shadow .25s, color .2s, border-color .2s;
  white-space:nowrap; overflow:hidden; isolation:isolate;
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{box-shadow:0 0 0 3px rgba(23,162,168,.3)}
.btn:disabled,.btn[disabled]{opacity:.55; pointer-events:none; cursor:not-allowed}
.btn.is-loading{pointer-events:none; opacity:.75; position:relative}
.btn.is-loading .btn__text{opacity:0}
.btn.is-loading::after{content:''; position:absolute; width:18px; height:18px; border:2px solid transparent; border-top-color:currentColor; border-radius:50%; animation:spin .6s linear infinite}
@keyframes spin{from{transform:rotate(0deg)} to{transform:rotate(360deg)}}
.btn::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); transform:translateX(-120%); transition:transform .6s ease; z-index:-1}
.btn:hover::after{transform:translateX(120%)}
.btn--teal{background:var(--grad-teal); color:#fff; box-shadow:0 8px 20px -6px rgba(23,162,168,.55)}
.btn--teal:hover{box-shadow:0 14px 28px -8px rgba(23,162,168,.7)}
.btn--navy{background:var(--navy-900); color:#fff}
.btn--navy:hover{background:var(--navy-800)}
.btn--outline-navy{border-color:var(--navy-900); color:var(--navy-900); background:#fff}
.btn--outline-navy:hover{background:var(--navy-900); color:#fff}
.btn--outline-teal{border-color:var(--teal-500); color:var(--teal-500); background:#fff}
.btn--outline-teal:hover{background:var(--teal-500); color:#fff}
.btn--ghost-teal{border-color:var(--teal-500); color:var(--teal-500); background:#fff; border-radius:999px}
.btn--ghost-teal:hover{background:var(--teal-50)}
.btn--white{background:#fff; color:var(--teal-500); border-radius:999px}
.btn--white:hover{background:#f3fbfb}
.btn--wa{background:var(--wa); color:#fff; border-radius:999px}
.btn--wa:hover{background:#1ebe57}
.btn--block{width:100%; padding:14px 20px; font-size:15px}
.btn .ic{width:16px; height:16px; flex:none}
.btn--sm{padding:8px 14px; font-size:13px; border-radius:999px}

/* ===== Topbar ===== */
.topbar{background:linear-gradient(90deg,#0E2A47,#13314F,#0E2A47); color:#fff; font-size:13px; font-weight:500}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; height:40px}
.topbar__left{display:flex; gap:24px; align-items:center}
.topbar__left span,.topbar__right{display:inline-flex; align-items:center; gap:6px}
.topbar__left .ic,.topbar__right .ic{width:14px; height:14px; flex:none}
.topbar__right strong{font-weight:700}
.topbar__badge{display:inline-flex; align-items:center; gap:5px; background:rgba(23,162,168,.2); padding:3px 10px; border-radius:999px; color:#7DD3D8; font-size:12px; font-weight:600}
.topbar__badge .ic{width:12px; height:12px; color:#7DD3D8}
.topbar__phone{display:none; align-items:center; gap:6px; background:rgba(255,255,255,.08); padding:4px 12px; border-radius:999px; color:#fff; font-weight:700; font-size:13px; transition:background .2s}
.topbar__phone:hover{background:rgba(255,255,255,.15)}
.topbar__phone .ic{width:14px; height:14px; color:var(--teal-400)}

/* ===== Navbar ===== */
.nav{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--border); transition:box-shadow .2s}
.nav.is-scrolled{box-shadow:var(--shadow-sm)}
.nav__inner{display:flex; align-items:center; justify-content:space-between; height:72px; gap:16px}
.brand{display:inline-flex; align-items:center; gap:8px}
.brand__logo{width:30px; height:30px}
.brand__text{display:flex; flex-direction:column; line-height:1.2}
.brand__sub{font-size:12px; color:var(--muted); font-weight:500; letter-spacing:.02em; white-space:nowrap}
.brand--light .brand__sub{color:rgba(255,255,255,.55)}
.brand__name{font-size:22px; font-weight:800; color:var(--navy-900); letter-spacing:-.01em}
.nav__menu{display:flex; gap:28px; align-items:center}
.nav__menu a{font-size:14px; font-weight:600; color:var(--navy-900); padding:6px 0; position:relative}
.nav__menu a:hover{color:var(--teal-500)}
.nav__menu a.is-active{color:var(--teal-500)}
.nav__menu a.is-active::after{content:""; position:absolute; left:0; right:0; bottom:-22px; height:2px; background:var(--grad-teal); border-radius:2px}
.nav__menu a:not(.is-active)::after{content:""; position:absolute; left:50%; right:50%; bottom:-22px; height:2px; background:var(--teal-500); border-radius:2px; transition:left .25s, right .25s; opacity:0}
.nav__menu a:not(.is-active):hover::after{left:0; right:0; opacity:.6}
.nav__cta{display:flex; gap:10px; align-items:center}
.nav__cta .btn{border-radius:999px; padding:10px 18px}
.nav__cta .btn--teal{background:var(--teal-500)}
.nav__burger{display:none; align-items:center; justify-content:center; width:46px; height:46px; padding:0; border:none; border-radius:12px; background:var(--bg-soft); transition:background .2s, transform .15s}
.nav__burger:hover{background:var(--teal-50)}
.nav__burger:active{transform:scale(.93)}
.nav__burger span{display:block; width:22px; height:2.5px; background:var(--navy-900); border-radius:3px; transition:transform .3s ease, opacity .2s ease, width .2s}
.nav__burger .burger-wrap{display:flex; flex-direction:column; gap:5px; align-items:center}
.nav__burger span:nth-child(2){width:16px}
.nav__burger.is-active span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav__burger.is-active span:nth-child(2){opacity:0; width:0}
.nav__burger.is-active span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ===== Hero ===== */
.hero{
  background:var(--grad-hero);
  padding:64px 0 96px; position:relative; overflow:hidden;
}
.hero__bg{position:absolute; inset:0; pointer-events:none; z-index:0}
.hero__grid{position:absolute; inset:0; width:100%; height:100%; opacity:.3}
.blob{position:absolute; border-radius:50%; filter:blur(80px); opacity:.35; animation:float 14s ease-in-out infinite}
.blob--1{width:350px; height:350px; background:radial-gradient(circle,#A5DFE2,#17A2A8); top:-140px; left:-100px}
.blob--2{width:280px; height:280px; background:radial-gradient(circle,#BFE8EA,#4FC3CA); top:40px; right:-120px; animation-delay:-5s; opacity:.2}
.blob--3{width:240px; height:240px; background:radial-gradient(circle,#D1ECEE,#22B8BE); bottom:-100px; left:25%; animation-delay:-9s; opacity:.25}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(40px,-30px) scale(1.06)}}

.hero__inner{position:relative; z-index:1; display:grid; grid-template-columns:1fr .72fr 1.2fr; gap:28px; align-items:center}
.hero__pill{display:inline-flex; align-items:center; gap:8px; padding:6px 14px; background:rgba(255,255,255,.7); backdrop-filter:blur(10px); border:1px solid var(--border); color:var(--teal-600); font-size:12.5px; font-weight:700; border-radius:999px; margin-bottom:14px}
.hero__pill .dot{width:7px; height:7px; border-radius:50%; background:var(--teal-500); box-shadow:0 0 0 4px rgba(23,162,168,.18); animation:pulseDot 1.6s ease-in-out infinite}
@keyframes pulseDot{50%{box-shadow:0 0 0 8px rgba(23,162,168,.04)}}
.hero__copy h1{font-size:42px; font-weight:800; line-height:1.12; color:var(--navy-900); letter-spacing:-.02em}
.hero__grad{background:var(--grad-teal); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% 200%; animation:gradShift 6s ease-in-out infinite}
@keyframes gradShift{0%,100%{background-position:0 50%} 50%{background-position:100% 50%}}
.hero__sub{margin-top:14px; color:var(--teal-500); font-size:22px; font-weight:700; letter-spacing:-.01em}
.hero__lead{margin-top:14px; color:var(--muted); max-width:460px; font-size:14.5px}
.hero__ctas{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap}
.hero__ctas .btn{padding:14px 22px; border-radius:12px}
.hero__ctas .btn--outline-navy{background:rgba(255,255,255,.7); backdrop-filter:blur(10px)}
.trust{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:32px}
.trust li{display:flex; gap:12px; align-items:center; padding:10px 8px; border-radius:12px; transition:transform .2s}
.trust li:hover{transform:translateY(-2px)}
.trust__ic{width:48px; height:48px; border-radius:14px; background:#fff; box-shadow:0 2px 8px rgba(15,23,42,.08); display:inline-flex; align-items:center; justify-content:center; color:var(--teal-500); position:relative; flex:none; overflow:visible}
.trust__ic .ic{width:26px; height:26px; flex:none}
.trust__ic::before{content:""; position:absolute; inset:-2px; border-radius:16px; background:var(--grad-teal); opacity:0; z-index:-1; transition:opacity .25s}
.trust li:hover .trust__ic::before{opacity:.18}
.trust strong{display:block; font-size:13.5px; color:var(--navy-900); font-weight:700; line-height:1.25}
.trust li > div > span{display:block; font-size:12px; color:var(--muted); line-height:1.25}

.hero__media{position:relative; display:flex; align-items:flex-end; justify-content:center}
.hero__halo{position:absolute; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, rgba(23,162,168,.18), transparent 65%); top:30px; left:50%; transform:translateX(-50%); z-index:0; animation:haloPulse 4s ease-in-out infinite}
@keyframes haloPulse{50%{transform:translateX(-50%) scale(1.08); opacity:.7}}
.hero__illu{position:relative; z-index:1; width:100%; max-width:360px; height:auto; filter:drop-shadow(0 24px 40px rgba(15,23,42,.14)); animation:bob 5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)}}
.sparkle{transform-origin:center; animation:twinkle 2.4s ease-in-out infinite}
.sparkle--2{animation-delay:-.8s}
.sparkle--3{animation-delay:-1.6s}
@keyframes twinkle{0%,100%{opacity:.3; transform:scale(.85)} 50%{opacity:1; transform:scale(1.1)}}

/* Form */
.hero__form{background:rgba(255,255,255,.85); border-radius:var(--r-card); box-shadow:var(--shadow-lg); padding:26px; border:1px solid rgba(255,255,255,.6); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); position:relative; overflow:hidden}
.hero__form.glass::before{content:""; position:absolute; inset:0; border-radius:var(--r-card); background:linear-gradient(135deg, rgba(23,162,168,.4), transparent 40%, transparent 60%, rgba(23,162,168,.25)); z-index:-1; opacity:.6}
.hero__form h3,.hero__form-title{font-size:18px; font-weight:700; margin-bottom:14px}
.field{position:relative; display:block; margin-bottom:12px}
.field__ic{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); width:18px; height:18px}
.field select,.field input{
  width:100%; height:48px; padding:0 14px 0 42px;
  border:1px solid var(--border); border-radius:10px;
  background:#fff; color:var(--text); font-size:14px;
  appearance:none; -webkit-appearance:none;
  transition:border-color .2s, box-shadow .2s;
}
.field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7785' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
}
.field select:focus,.field input:focus{outline:none; border-color:var(--teal-500); box-shadow:0 0 0 3px rgba(23,162,168,.15)}
.field--error select,.field--error input{border-color:#EF4444; box-shadow:0 0 0 3px rgba(239,68,68,.1)}
.field--success select,.field--success input{border-color:var(--success); box-shadow:0 0 0 3px rgba(22,163,74,.1)}
.field__error{font-size:12px; color:#EF4444; margin-top:4px; display:none}
.field--error .field__error{display:block}
.field__error .ic{width:12px; height:12px; vertical-align:middle; margin-right:4px}
.check{display:flex; gap:8px; align-items:flex-start; font-size:12px; color:var(--muted); margin:8px 0 14px; line-height:1.4}
.check input{margin-top:2px; accent-color:var(--teal-500)}
.hero__form-hint{display:flex; gap:6px; align-items:center; justify-content:center; color:var(--muted); font-size:12px; margin-top:12px}

/* ===== Stats Strip ===== */
.stats{margin-top:-64px; position:relative; z-index:3}
.stats__card{
  background:#fff; border-radius:var(--r-card); box-shadow:var(--shadow-lg);
  display:grid; grid-template-columns:repeat(4,1fr); padding:24px 28px; gap:24px;
  border:1px solid rgba(255,255,255,.8);
}
.stats__col{display:flex; gap:14px; align-items:center; transition:transform .25s}
.stats__col:hover{transform:translateY(-3px)}
.stats__col:hover .stats__ic{background:var(--grad-teal); color:#fff}
.stats__ic{width:54px; height:54px; min-width:54px; border-radius:14px; background:var(--teal-100); color:var(--teal-500); display:inline-flex; align-items:center; justify-content:center; flex:none; overflow:visible; transition:background .25s, color .25s}
.stats__ic .ic{width:28px; height:28px; flex:none}
.stats__col strong{display:block; color:var(--navy-900); font-size:15px; line-height:1.2}
.stats__col > div > span{display:block; color:var(--muted); font-size:12.5px; line-height:1.35}

/* ===== Howto ===== */
.howto{padding:96px 0 64px}
.howto__grid{display:grid; grid-template-columns:1fr 24px 1fr 24px 1fr; gap:8px; align-items:stretch; margin-top:8px}
.step{background:#fff; border-radius:var(--r-card); box-shadow:var(--shadow-sm); padding:28px 24px; position:relative; transition:transform .25s, box-shadow .25s; border:1px solid var(--border)}
.step:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent}
.step::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--grad-teal); border-radius:var(--r-card) var(--r-card) 0 0; opacity:0; transition:opacity .25s}
.step:hover::before{opacity:1}
.step__num{
  position:absolute; top:18px; right:18px;
  width:36px; height:36px; border-radius:50%; background:var(--teal-50);
  color:var(--teal-500); font-weight:800; font-size:16px;
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid #fff; box-shadow:0 0 0 1px var(--teal-100);
}
.step__icon{width:54px; height:54px; border-radius:50%; background:var(--teal-50); color:var(--teal-500); display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px; overflow:visible}
.step__icon .ic{width:26px; height:26px}
.step h3{font-size:17px; margin-bottom:8px; color:var(--navy-900)}
.step p{color:var(--muted); font-size:13.5px}
.step__arrow{display:inline-flex; align-items:center; justify-content:center; color:var(--teal-400); overflow:visible}
.step__arrow svg{width:100%; max-width:60px; height:24px}
.step__arrow .ic{width:22px; height:22px}
.howto__cta{display:flex; justify-content:center; margin-top:32px}
.howto__cta .btn{padding:13px 28px; border-radius:999px}

/* ===== Doctor section (refined, professional) ===== */
.doctor{padding:48px 0 72px}
.doctor__grid{display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:start}
.doctor__grid > *{min-width:0}
.doc-card{
  background:#fff; border-radius:20px; box-shadow:0 12px 32px -12px rgba(15,23,42,.10), var(--shadow-sm);
  padding:28px; display:grid; grid-template-columns:160px minmax(0,1fr); gap:28px; align-items:center;
  border:1px solid var(--border); transition:transform .3s, box-shadow .3s, border-color .3s; position:relative; overflow:hidden;
}
.doc-card__panel{grid-column:1 / -1}
.doc-card::before{content:"Uzman Doktor"; position:absolute; top:18px; right:18px; font-size:12px; font-weight:700; color:var(--teal-600); background:var(--teal-50); padding:4px 10px; border-radius:999px; letter-spacing:.06em; text-transform:uppercase; display:inline-flex; align-items:center; gap:5px}
.doc-card:hover{transform:translateY(-4px); box-shadow:0 24px 48px -16px rgba(15,23,42,.18); border-color:transparent}
.doc-card__photo{width:150px; height:150px; min-width:0; border-radius:50%; background:linear-gradient(135deg,#E6F6F6,#CFE7E9); overflow:hidden; flex:none; border:5px solid #fff; box-shadow:0 12px 28px -6px rgba(23,162,168,.35); position:relative}
.doc-card__photo::after{content:""; position:absolute; right:6px; bottom:6px; width:28px; height:28px; border-radius:50%; background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317A2A8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center/16px no-repeat; box-shadow:0 4px 10px rgba(15,23,42,.15)}
.doc-card__body h3{font-size:20px; color:var(--navy-900); font-weight:800; letter-spacing:-.01em; line-height:1.2}
.doc-card__role{color:var(--teal-500); font-size:13px; font-weight:600; margin-top:4px; display:inline-flex; align-items:center; gap:6px}
.doc-card__rating{display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:13px; color:var(--muted)}
.doc-card__rating .stars{display:inline-flex; gap:2px}
.doc-card__rating .stars .ic{width:14px; height:14px; color:var(--star); fill:currentColor}
.doc-card__rating strong{color:var(--navy-900); font-weight:700}
.ticks{margin:14px 0; display:grid; gap:8px}
.ticks li{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text)}
.tick{width:18px; height:18px; color:var(--success); stroke:var(--success); flex:none}
.tick.t{color:var(--teal-500); stroke:var(--teal-500)}
.doc-card__body .btn{border-radius:999px; padding:10px 18px; font-size:13px; font-weight:600}
.doc-card__panel{background:linear-gradient(150deg,var(--teal-100) 0%,#D1ECEE 70%,#BFE3E5 100%); border-radius:16px; padding:22px 20px; position:relative; min-height:180px; min-width:0; border:1px solid rgba(23,162,168,.18); display:flex; flex-direction:column; justify-content:center}
.doc-card__panel-ic{width:56px; height:56px; border-radius:50%; background:#fff; display:inline-flex; align-items:center; justify-content:center; margin:0 auto 12px; box-shadow:0 6px 14px -4px rgba(23,162,168,.4)}
.doc-card__panel-ic svg{width:28px; height:28px}
.doc-card__panel .ticks{margin:0}
.ticks--teal li{font-size:13px}

/* Reviews — testimonial cards */
.reviews{display:grid; gap:16px; align-content:start}
.review{background:#fff; border-radius:16px; box-shadow:0 8px 20px -8px rgba(15,23,42,.08), var(--shadow-sm); padding:22px 20px; border:1px solid var(--border); position:relative; transition:transform .25s, box-shadow .25s, border-color .25s}
.review:hover{transform:translateY(-3px); box-shadow:0 16px 32px -10px rgba(15,23,42,.14); border-color:var(--teal-100)}
.review::before{content:"“"; position:absolute; top:-2px; left:14px; font-size:64px; line-height:1; color:var(--teal-200, var(--teal-100)); font-family:Georgia,serif; font-weight:700; opacity:.55}
.review__stars{display:inline-flex; gap:2px; margin-bottom:10px; position:relative; z-index:1}
.review__stars .ic{width:14px; height:14px; color:var(--star); fill:currentColor}
.review p{color:var(--text); font-size:14px; line-height:1.6; font-style:italic; position:relative; z-index:1; margin:0}
.review__foot{display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:14px; border-top:1px dashed var(--border)}
.review__avatar{width:36px; height:36px; min-width:36px; border-radius:50%; background:linear-gradient(135deg,var(--teal-100),var(--teal-50)); display:inline-flex; align-items:center; justify-content:center; color:var(--teal-600); font-weight:700; font-size:13px; flex:none; border:2px solid #fff; box-shadow:var(--shadow-sm)}
.review__author{flex:1; min-width:0}
.review__author strong{display:block; font-size:13px; color:var(--navy-900); font-weight:700; line-height:1.2}
.review__author span{display:block; font-size:12px; color:var(--muted); line-height:1.3}
.review__verified{display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:var(--teal-500); padding:3px 8px; background:var(--teal-50); border-radius:999px; flex:none}
.review__verified .ic{width:11px; height:11px}
.stars{color:var(--star); display:inline-flex; gap:2px}
.stars .ic{width:14px; height:14px; fill:var(--star); stroke:none}

/* ===== Cities ===== */
.cities{padding:64px 0}
.cities__wrap{position:relative; overflow:hidden}
.cities__grid{display:flex; gap:18px; margin-top:8px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; padding:8px 4px 12px; cursor:grab; user-select:none; touch-action:pan-x}
.cities__grid.is-grabbing{cursor:grabbing; scroll-behavior:auto}
.cities__grid::-webkit-scrollbar{display:none}
.city{min-width:calc((100% - 90px) / 6); flex:none; scroll-snap-align:start; background:#fff; border-radius:16px; box-shadow:var(--shadow-sm); padding:0 0 16px; text-align:center; overflow:hidden; transition:transform .25s, box-shadow .25s; border:1px solid var(--border)}
.cities__nav{display:flex; gap:8px; justify-content:center; margin-top:18px}
.cities__nav button{width:40px; height:40px; border-radius:50%; border:1px solid var(--border); background:#fff; display:inline-flex; align-items:center; justify-content:center; color:var(--navy-900); cursor:pointer; transition:background .2s, border-color .2s, transform .15s; box-shadow:var(--shadow-sm)}
.cities__nav button:hover{background:var(--teal-50); border-color:var(--teal-400)}
.cities__nav button:active{transform:scale(.92)}
.cities__nav .ic{width:16px; height:16px}
.cities__dots{display:flex; gap:6px; justify-content:center; margin-top:12px}
.cities__dot{width:8px; height:8px; border-radius:50%; background:var(--border); border:none; cursor:pointer; transition:background .2s, width .2s}
.cities__dot.is-active{width:24px; border-radius:4px; background:var(--teal-500)}
.city:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:transparent}
.city__img{height:120px; background-size:cover; background-position:center; position:relative; overflow:hidden}
.city__img::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%, rgba(14,42,71,.35) 100%); z-index:1}
.city h4{font-size:15px; margin:14px 0 10px; color:var(--navy-900); font-weight:700}
.city .btn{font-size:12px; padding:7px 14px}
/* SVG city covers — refined landmark silhouettes */
.city--ist{background:linear-gradient(180deg,#FFB47A 0%,#FF7E92 50%,#5A4A8C 100%); position:relative}
.city--ist::after{content:""; position:absolute; inset:0; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMax slice'><circle cx='160' cy='28' r='10' fill='%23FFD86B' opacity='.85'/><g fill='%231a2b48' opacity='.85'><path d='M0 95 L20 95 L20 80 L25 75 L25 60 L30 60 L32 50 L34 60 L34 80 L40 80 L40 95z'/><path d='M50 95 L60 95 L60 70 L66 64 L66 50 L70 50 L72 40 L74 50 L74 64 L80 70 L80 95z'/><circle cx='66' cy='44' r='2' fill='%23FFD86B'/><path d='M90 95 L130 95 L130 60 L120 50 L130 60 L130 95 L140 95 L140 75 L155 75 L155 95 L170 95 L170 65 L160 55 L170 65 L170 95 L200 95 L200 120 L0 120z'/></g><path d='M0 100 Q50 92 100 100 T200 100' stroke='%23ffffff' stroke-width='1' fill='none' opacity='.4'/><path d='M0 105 Q50 98 100 105 T200 105' stroke='%23ffffff' stroke-width='.6' fill='none' opacity='.3'/></svg>") center/cover; z-index:2}

.city--ank{background:linear-gradient(180deg,#FFE4B5 0%,#E8A87C 60%,#85577C 100%); position:relative}
.city--ank::after{content:""; position:absolute; inset:0; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMax slice'><g fill='%231a2b48' opacity='.88'><path d='M50 100 L150 100 L150 70 L60 70 L50 80z'/><g><rect x='62' y='58' width='6' height='42'/><rect x='76' y='58' width='6' height='42'/><rect x='90' y='58' width='6' height='42'/><rect x='104' y='58' width='6' height='42'/><rect x='118' y='58' width='6' height='42'/><rect x='132' y='58' width='6' height='42'/></g><path d='M52 60 L148 60 L148 56 L52 56z'/><path d='M40 100 L160 100 L160 110 L40 110z'/><path d='M0 110 L200 110 L200 120 L0 120z'/></g></svg>") center/cover; z-index:2}

.city--izm{background:linear-gradient(180deg,#9DD9F3 0%,#FFB347 70%,#FF6B6B 100%); position:relative}
.city--izm::after{content:""; position:absolute; inset:0; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMax slice'><circle cx='150' cy='28' r='12' fill='%23FFD86B'/><g fill='%231a2b48' opacity='.85'><rect x='90' y='30' width='20' height='70'/><path d='M82 30 L118 30 L114 24 L86 24z'/><circle cx='100' cy='50' r='5' fill='%23FFD86B'/><path d='M88 70 L112 70 L112 74 L88 74z'/><path d='M84 95 L116 95 L116 100 L84 100z'/></g><path d='M0 102 Q60 98 120 102 T200 102 L200 120 L0 120z' fill='%231a3a52'/></svg>") center/cover; z-index:2}

.city--bur{background:linear-gradient(180deg,#A8E6CF 0%,#88B04B 60%,#3D5A40 100%); position:relative}
.city--bur::after{content:""; position:absolute; inset:0; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMax slice'><circle cx='40' cy='25' r='9' fill='%23ffffff' opacity='.85'/><g fill='%231a2b48' opacity='.85'><path d='M0 90 L40 50 L80 80 L120 40 L160 75 L200 55 L200 120 L0 120z'/></g><g fill='%23ffffff' opacity='.5'><path d='M30 60 L40 50 L48 60 L42 60 L42 70 L38 70 L38 60z'/><path d='M115 50 L120 40 L125 50 L122 50 L122 58 L118 58 L118 50z'/></g></svg>") center/cover; z-index:2}

.city--ant{background:linear-gradient(180deg,#FFE5A8 0%,#FFB088 50%,#1B6B96 100%); position:relative}
.city--ant::after{content:""; position:absolute; inset:0; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMax slice'><circle cx='160' cy='30' r='14' fill='%23FFD86B'/><g fill='%231a2b48' opacity='.85'><path d='M20 95 L40 60 L60 95z'/><path d='M70 95 L92 50 L114 95z'/><path d='M124 95 L150 65 L176 95z'/></g><path d='M0 100 Q40 95 80 100 T160 100 T200 100 L200 120 L0 120z' fill='%2310506e'/><g fill='%23ffffff' opacity='.5'><path d='M30 102 Q35 99 40 102 Q35 105 30 102z'/><path d='M120 104 Q126 100 132 104 Q126 108 120 104z'/></g></svg>") center/cover; z-index:2}

.city--koc{background:linear-gradient(180deg,#FF6B9D 0%,#C06C84 50%,#355C7D 100%); position:relative}
.city--koc::after{content:""; position:absolute; inset:0; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMax slice'><g fill='%231a2b48' opacity='.85'><path d='M30 95 L30 50 L36 50 L36 95z'/><path d='M164 95 L164 50 L170 50 L170 95z'/><path d='M30 50 Q100 20 170 50' stroke='%231a2b48' stroke-width='2' fill='none'/><path d='M30 60 Q100 30 170 60' stroke='%231a2b48' stroke-width='1.5' fill='none' opacity='.7'/></g><g stroke='%231a2b48' stroke-width='1' opacity='.7'><line x1='40' y1='95' x2='44' y2='52'/><line x1='55' y1='95' x2='58' y2='44'/><line x1='70' y1='95' x2='72' y2='38'/><line x1='85' y1='95' x2='86' y2='34'/><line x1='100' y1='95' x2='100' y2='32'/><line x1='115' y1='95' x2='114' y2='34'/><line x1='130' y1='95' x2='128' y2='38'/><line x1='145' y1='95' x2='142' y2='44'/><line x1='160' y1='95' x2='156' y2='52'/></g><path d='M0 95 L200 95 L200 120 L0 120z' fill='%231a2b48' opacity='.85'/></svg>") center/cover; z-index:2}

/* ===== Info (merak + sss) ===== */
.info{padding:48px 0 64px}
.info__grid{display:grid; grid-template-columns:1fr 1fr; gap:32px}
.info__grid > *{min-width:0}
.info__title{text-align:center; font-size:22px; margin-bottom:24px}
#sss .info__title{text-align:left}
.info__cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.post{background:#fff; border-radius:14px; box-shadow:var(--shadow-sm); overflow:hidden; padding-bottom:14px}
.post__img{height:90px; background-size:cover; background-position:center}
.post--baby{background:linear-gradient(135deg,#ffe6d6,#fff3e6); position:relative}
.post--baby::after{content:""; position:absolute; inset:0; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'><circle cx='100' cy='55' r='28' fill='%23f5c9a4'/><circle cx='90' cy='52' r='2' fill='%231a2b48'/><circle cx='110' cy='52' r='2' fill='%231a2b48'/><path d='M92 62 Q100 68 108 62' stroke='%231a2b48' stroke-width='2' fill='none' stroke-linecap='round'/><path d='M70 35 Q100 20 130 35' stroke='%23fff' stroke-width='4' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat}
.post--bear{background:linear-gradient(135deg,#f7e3c8,#fff7ea); position:relative}
.post--bear::after{content:""; position:absolute; inset:0; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'><circle cx='100' cy='55' r='25' fill='%23c89868'/><circle cx='85' cy='35' r='8' fill='%23c89868'/><circle cx='115' cy='35' r='8' fill='%23c89868'/><circle cx='92' cy='52' r='2' fill='%231a2b48'/><circle cx='108' cy='52' r='2' fill='%231a2b48'/><ellipse cx='100' cy='62' rx='4' ry='3' fill='%231a2b48'/></svg>") center/contain no-repeat}
.post--calc{background:linear-gradient(135deg,#e6efe6,#f5fbf5); position:relative}
.post--calc::after{content:""; position:absolute; inset:0; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'><rect x='75' y='25' width='50' height='60' rx='6' fill='%23556b7d'/><rect x='80' y='30' width='40' height='14' rx='2' fill='%23a4d7d7'/><g fill='%23fff'><rect x='82' y='50' width='8' height='8' rx='1.5'/><rect x='94' y='50' width='8' height='8' rx='1.5'/><rect x='106' y='50' width='8' height='8' rx='1.5'/><rect x='82' y='62' width='8' height='8' rx='1.5'/><rect x='94' y='62' width='8' height='8' rx='1.5'/><rect x='106' y='62' width='8' height='8' rx='1.5'/><rect x='82' y='74' width='20' height='8' rx='1.5'/><rect x='106' y='74' width='8' height='8' rx='1.5' fill='%23ff9f43'/></g></svg>") center/contain no-repeat}
.post h5{font-size:13.5px; padding:12px 14px 6px; color:var(--navy-900); font-weight:700; line-height:1.35}
.post__link{padding:0 14px; color:var(--teal-500); font-size:13px; font-weight:600}
.info__cta{display:flex; justify-content:center; margin-top:18px}
.info__cta .btn{border-radius:999px}

.faq{display:grid; gap:10px}
.faq__item{background:#fff; border-radius:12px; box-shadow:var(--shadow-sm); padding:0}
.faq__item{transition:box-shadow .25s, transform .25s; border:1px solid var(--border)}
.faq__item[open]{box-shadow:var(--shadow-md); border-color:transparent}
.faq__item summary{
  list-style:none; cursor:pointer; padding:16px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-weight:600; font-size:14px; color:var(--navy-900); transition:color .2s;
  min-width:0; word-break:break-word;
}
.faq__item summary:hover{color:var(--teal-500)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary .ic{width:18px; height:18px; color:var(--teal-500); transition:transform .2s}
.faq__item .minus{display:none !important}
.faq__item[open] .plus{display:none !important}
.faq__item[open] .minus{display:inline-block !important}
.faq__item p{padding:0 16px 16px; color:var(--muted); font-size:13.5px; overflow-wrap:break-word}

/* ===== Blog Section ===== */
.blog{padding:64px 0}
.blog__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:8px}
.blog-card{background:#fff; border-radius:var(--r-card); box-shadow:var(--shadow-sm); overflow:hidden; border:1px solid var(--border); transition:transform .25s, box-shadow .25s}
.blog-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:transparent}
.blog-card__img{height:180px; background-size:cover; background-position:center; position:relative}
.blog-card__img::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(14,42,71,.25))}
.blog-card__badge{position:absolute; top:14px; left:14px; z-index:2; padding:4px 12px; background:var(--teal-500); color:#fff; font-size:12px; font-weight:700; border-radius:999px; text-transform:uppercase; letter-spacing:.04em}
.blog-card__body{padding:20px}
.blog-card__meta{display:flex; gap:12px; align-items:center; font-size:12px; color:var(--muted); margin-bottom:10px}
.blog-card__meta .ic{width:13px; height:13px}
.blog-card__title{font-size:16px; font-weight:700; color:var(--navy-900); line-height:1.35; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.blog-card__excerpt{font-size:13.5px; color:var(--muted); line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:14px}
.blog-card__link{display:inline-flex; align-items:center; gap:6px; color:var(--teal-500); font-weight:600; font-size:13.5px; transition:gap .2s}
.blog-card__link:hover{gap:10px}
.blog-card__link .ic{width:14px; height:14px}
.blog__cta{display:flex; justify-content:center; margin-top:32px}
.blog__cta .btn{border-radius:999px; padding:13px 28px}

/* ===== Blog card covers ===== */
.blog-img--1{background:linear-gradient(135deg,#FFE4CC,#FFDAB5); position:relative}
.blog-img--1::before{content:""; position:absolute; inset:0; z-index:1; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 180'><circle cx='200' cy='100' r='50' fill='%23f5c9a4'/><circle cx='186' cy='94' r='3.5' fill='%231a2b48'/><circle cx='214' cy='94' r='3.5' fill='%231a2b48'/><path d='M190 110 Q200 118 210 110' stroke='%231a2b48' stroke-width='2.5' fill='none' stroke-linecap='round'/><path d='M170 60 Q200 40 230 60' stroke='%23fff' stroke-width='6' fill='none' stroke-linecap='round' opacity='.8'/><circle cx='160' cy='80' r='6' fill='%2317A2A8' opacity='.2'/><circle cx='250' cy='70' r='4' fill='%2317A2A8' opacity='.15'/></svg>") center/contain no-repeat}
.blog-img--2{background:linear-gradient(135deg,#E6F6F6,#D1ECF0); position:relative}
.blog-img--2::before{content:""; position:absolute; inset:0; z-index:1; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 180'><rect x='160' y='50' width='80' height='90' rx='10' fill='%23fff'/><path d='M180 70 h40 M180 84 h30 M180 98 h35 M180 112 h25' stroke='%2317A2A8' stroke-width='2.5' stroke-linecap='round' opacity='.6'/><circle cx='140' cy='80' r='20' fill='%2317A2A8' opacity='.12'/><circle cx='280' cy='100' r='14' fill='%2317A2A8' opacity='.08'/></svg>") center/contain no-repeat}
.blog-img--3{background:linear-gradient(135deg,#F0E6FF,#E6D9F7); position:relative}
.blog-img--3::before{content:""; position:absolute; inset:0; z-index:1; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 180'><rect x='155' y='40' width='90' height='110' rx='8' fill='%23556b7d'/><rect x='162' y='48' width='76' height='24' rx='3' fill='%23a4d7d7'/><g fill='%23fff'><rect x='165' y='80' width='14' height='14' rx='2.5'/><rect x='184' y='80' width='14' height='14' rx='2.5'/><rect x='203' y='80' width='14' height='14' rx='2.5'/><rect x='222' y='80' width='14' height='14' rx='2.5'/><rect x='165' y='100' width='14' height='14' rx='2.5'/><rect x='184' y='100' width='14' height='14' rx='2.5'/><rect x='203' y='100' width='33' height='14' rx='2.5'/><rect x='165' y='120' width='33' height='14' rx='2.5'/><rect x='203' y='120' width='14' height='14' rx='2.5' fill='%23ff9f43'/><rect x='222' y='120' width='14' height='14' rx='2.5'/></g></svg>") center/contain no-repeat}

/* ===== SEO Content ===== */
.seo{padding:48px 0; background:var(--bg-soft)}
.seo__inner{display:grid; grid-template-columns:1fr 1fr; gap:40px}
.seo h2{font-size:24px; margin-bottom:16px}
.seo h3{font-size:17px; margin-bottom:10px; color:var(--navy-800)}
.seo p{color:var(--muted); font-size:14px; line-height:1.7; margin-bottom:14px}
.seo a{color:var(--teal-500); font-weight:600; text-decoration:underline; text-underline-offset:2px}
.seo ul{padding-left:20px; margin-bottom:14px}
.seo ul li{list-style:disc; color:var(--muted); font-size:14px; line-height:1.7; margin-bottom:4px}

/* ===== CTA Banner ===== */
.cta-banner{padding:48px 0}
.cta-banner__inner{
  background:var(--grad-teal);
  border-radius:20px; padding:32px 36px; color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  box-shadow:0 24px 50px -12px rgba(23,162,168,.55); position:relative; overflow:hidden;
}
.cta-banner__inner::before{content:""; position:absolute; inset:0; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><pattern id='p' width='20' height='20' patternUnits='userSpaceOnUse'><circle cx='10' cy='10' r='1' fill='%23ffffff' opacity='.15'/></pattern></defs><rect width='100' height='100' fill='url(%23p)'/></svg>") center/cover; opacity:.6; pointer-events:none}
.h3-styled{font-size:16px !important; font-weight:700 !important}
.h4-styled{font-size:18px !important; font-weight:700 !important}
.h5-styled{font-size:15px !important; font-weight:600 !important}
.cta-banner__inner h2,.cta-banner__title{color:#fff; font-size:22px; font-weight:700}
.cta-banner__inner p{color:rgba(255,255,255,.9); margin-top:4px; font-size:14px}
.cta-banner__btns{display:flex; gap:10px; flex:none; z-index:1}
.cta-banner__deco{position:absolute; right:-20px; bottom:-30px; width:240px; pointer-events:none}

/* ===== Newsletter Bar ===== */
.newsletter{background:linear-gradient(135deg,var(--navy-900),var(--navy-800)); padding:32px 0}
.newsletter__inner{display:flex; align-items:center; justify-content:space-between; gap:24px}
.newsletter__text{color:#fff}
.newsletter__text h2{font-size:18px; font-weight:700; color:#fff; margin-bottom:4px}
.newsletter__text p{font-size:13.5px; color:rgba(255,255,255,.7)}
.newsletter__form{display:flex; gap:8px; flex:none}
.newsletter__form input{height:46px; width:280px; padding:0 16px; border-radius:999px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; font-size:14px; transition:border-color .2s}
.newsletter__form input::placeholder{color:rgba(255,255,255,.45)}
.newsletter__form input:focus{outline:none; border-color:var(--teal-400)}
.newsletter__form .btn{border-radius:999px; padding:12px 24px}

/* ===== Footer ===== */
.foot{background:var(--navy-900); color:rgba(255,255,255,.78)}
.foot__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr; gap:28px; padding:48px 0 32px}
.brand--light .brand__name{color:#fff}
.foot__about{margin:14px 0 16px; font-size:13.5px; line-height:1.7; color:rgba(255,255,255,.65); max-width:300px}
.foot__social{display:flex; gap:10px}
.foot__social a{width:36px; height:36px; border-radius:50%; background:var(--navy-700); display:inline-flex; align-items:center; justify-content:center; color:#fff; transition:background .2s, transform .2s}
.foot__social a:hover{background:var(--teal-500); transform:translateY(-2px)}
.foot__social .ic{width:16px; height:16px}
.foot h6,.foot__heading{color:#fff; font-size:14px; font-weight:700; margin-bottom:14px; position:relative; padding-bottom:10px}
.foot h6::after,.foot__heading::after{content:""; position:absolute; left:0; bottom:0; width:28px; height:2px; background:var(--teal-500); border-radius:2px}
.foot ul li{margin-bottom:10px}
.foot ul a{font-size:13.5px; color:rgba(255,255,255,.65); transition:color .2s, padding-left .2s}
.foot ul a:hover{color:#fff; padding-left:4px}
.foot__contact li{display:flex; gap:10px; align-items:center; color:#fff}
.foot__contact .ic{width:18px; height:18px; flex:none; color:var(--teal-400)}
.foot__contact strong{display:block; font-weight:700}
.foot__contact span{display:block; font-size:12px; color:rgba(255,255,255,.55)}
.foot__contact{margin-bottom:14px}

/* Footer trust badges */
.foot__badges{display:flex; gap:16px; padding:20px 0; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:0}
.foot__badge{display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.7); font-size:12.5px; font-weight:600}
.foot__badge .ic{width:16px; height:16px; color:var(--teal-400)}

.foot__bottom{border-top:1px solid rgba(255,255,255,.08)}
.foot__bottom-inner{display:flex; justify-content:space-between; align-items:center; height:56px; font-size:12.5px; color:rgba(255,255,255,.5)}
.foot__bottom-inner .ic{width:14px; height:14px}
.foot__bottom-inner span{display:inline-flex; align-items:center; gap:6px}

/* ===== FLOATING CTA BAR ===== */
.floating-cta{
  position:fixed; right:20px; bottom:20px; z-index:60;
  display:flex; flex-direction:column; gap:12px; align-items:flex-end;
}
.floating-cta__btn{
  position:relative; display:flex; align-items:center; gap:8px;
  padding:14px 20px; border-radius:50px; color:#fff; font-weight:700; font-size:14px;
  text-decoration:none; box-shadow:0 8px 32px rgba(0,0,0,.18);
  transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;
  will-change:transform;
}
.floating-cta__btn .ic{width:22px; height:22px; fill:#fff; stroke:none; flex-shrink:0}
.floating-cta__btn:hover{transform:scale(1.06)}
.floating-cta__btn--wa{background:var(--wa)}
.floating-cta__btn--wa:hover{box-shadow:0 12px 40px -4px rgba(37,211,102,.5)}
.floating-cta__btn--phone{background:var(--teal-500)}
.floating-cta__btn--phone:hover{box-shadow:0 12px 40px -4px rgba(23,162,168,.5)}
.floating-cta__label{white-space:nowrap}
.floating-cta__pulse{
  position:absolute; inset:0; border-radius:50px; z-index:-1;
  animation:fab-pulse 2.5s cubic-bezier(.4,0,.6,1) infinite;
}
.floating-cta__btn--wa .floating-cta__pulse{background:var(--wa)}
.floating-cta__btn--phone .floating-cta__pulse{background:var(--teal-500)}
@keyframes fab-pulse{
  0%{transform:scale(1); opacity:.5}
  50%{transform:scale(1.25); opacity:0}
  100%{transform:scale(1.25); opacity:0}
}
/* Blink effect — subtle glow cycle */
.floating-cta__btn--wa{animation:fab-glow-wa 3s ease-in-out infinite}
.floating-cta__btn--phone{animation:fab-glow-phone 3s ease-in-out 1.5s infinite}
@keyframes fab-glow-wa{
  0%,100%{box-shadow:0 8px 32px rgba(0,0,0,.18)}
  50%{box-shadow:0 8px 32px rgba(37,211,102,.55), 0 0 0 6px rgba(37,211,102,.15)}
}
@keyframes fab-glow-phone{
  0%,100%{box-shadow:0 8px 32px rgba(0,0,0,.18)}
  50%{box-shadow:0 8px 32px rgba(23,162,168,.55), 0 0 0 6px rgba(23,162,168,.15)}
}

/* ===== CONTACT LOCATION SECTION ===== */
.contact-loc{padding:72px 0; background:var(--bg)}
.contact-loc .eyebrow{
  display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px;
  color:var(--teal-500); margin-bottom:8px;
}
.contact-loc__title{font-size:clamp(24px,3.2vw,34px); font-weight:800; color:var(--navy-900); margin:0 0 8px}
.contact-loc__sub{font-size:15px; color:var(--muted); max-width:560px; margin:0 0 36px}
.contact-loc__grid{
  display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:stretch;
}
.contact-loc__map{
  min-height:380px; border-radius:var(--r-card); overflow:hidden;
  background:var(--bg-soft); box-shadow:var(--shadow-md);
}
.contact-loc__map iframe{width:100%; height:100%; display:block; border:0}
.contact-loc__map-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; min-height:380px; text-align:center; color:var(--muted); gap:16px; padding:40px;
}
.contact-loc__map-placeholder .ic{color:var(--teal-400); opacity:.5}
.contact-loc__info{
  background:var(--surface); border-radius:var(--r-card); padding:32px;
  box-shadow:var(--shadow-md); display:flex; flex-direction:column; gap:20px;
}
.contact-loc__row{display:flex; align-items:flex-start; gap:14px}
.contact-loc__row strong{display:block; font-size:13px; font-weight:700; color:var(--navy-900); margin-bottom:2px}
.contact-loc__row p{margin:0; font-size:14px; color:var(--muted); line-height:1.5}
.contact-loc__row a{color:var(--teal-600); text-decoration:none; font-weight:600}
.contact-loc__row a:hover{text-decoration:underline}
.contact-loc__icon{
  flex-shrink:0; width:42px; height:42px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
}
.contact-loc__icon .ic{width:20px; height:20px}
.contact-loc__icon--pin{background:rgba(23,162,168,.1); color:var(--teal-500)}
.contact-loc__icon--phone{background:rgba(14,42,71,.08); color:var(--navy-800)}
.contact-loc__icon--wa{background:rgba(37,211,102,.1); color:var(--wa)}
.contact-loc__icon--clock{background:rgba(245,179,1,.1); color:var(--star)}
.contact-loc__btns{display:flex; gap:12px; margin-top:auto}
.contact-loc__btns .btn{flex:1; justify-content:center; gap:8px}
.contact-loc__cta{gap:8px}

/* ===== Responsive ===== */
@media (max-width:1200px){
  .doc-card{grid-template-columns:140px minmax(0,1fr)}
}
@media (max-width:1100px){
  .hero__inner{grid-template-columns:1fr 1fr}
  .hero__media{grid-column:2; grid-row:1 / span 2}
  .hero__form{grid-column:1 / -1}
  .city{min-width:calc((100% - 36px) / 3)}
  .blog__grid{grid-template-columns:repeat(2,1fr)}
  .foot__grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}
  .foot__grid > div:nth-child(2){display:none}
}

@media (max-width:900px){
  .container{padding:0 16px}

  /* Topbar - mobile badge + phone pill */
  .topbar{font-size:12px}
  .topbar__inner{height:38px}
  .topbar__left span:not(.topbar__badge){display:none}
  .topbar__left .topbar__badge{display:inline-flex}
  .topbar__right{display:none}
  .topbar__phone{display:inline-flex}

  /* Navbar */
  .nav__inner{height:64px}
  .nav__menu,.nav__cta{display:none}
  .nav__burger{display:flex}
  .brand__logo{width:30px; height:30px}
  .brand__name{font-size:19px}
  .brand__sub{display:none}

  /* Hero - clean mobile */
  .hero{padding:36px 0 48px; background:linear-gradient(180deg,#F8FAFB 0%,#F0F4F7 100%)}
  .hero__bg{opacity:.4}
  .hero__grid{opacity:.15}
  .blob{filter:blur(100px); opacity:.18}
  .blob--2{opacity:.12}
  .blob--3{opacity:.12}
  .hero__inner{grid-template-columns:1fr; gap:20px}
  .hero__media{grid-column:1; grid-row:auto; order:1}
  .hero__copy{order:0}
  .hero__form{order:2}
  .hero__copy h1{font-size:30px; line-height:1.15}
  .hero__sub{font-size:18px; margin-top:10px}
  .hero__lead{font-size:14px; max-width:100%}
  .hero__ctas{flex-direction:column; gap:10px}
  .hero__ctas .btn{width:100%; justify-content:center; padding:15px 20px; font-size:15px; border-radius:14px}
  .hero__illu{max-width:240px; margin:0 auto}
  .hero__halo{width:220px; height:220px}
  .hero__pill{font-size:12px; padding:5px 12px}

  /* Trust - mobile card container */
  .trust{grid-template-columns:repeat(2,1fr); gap:10px; background:#fff; border-radius:16px; padding:16px; box-shadow:0 4px 16px rgba(15,23,42,.06); border:1px solid var(--border)}
  .trust li{padding:8px 4px}
  .trust__ic{width:42px; height:42px; border-radius:12px; box-shadow:none; background:var(--teal-50)}
  .trust__ic .ic{width:22px; height:22px}
  .trust strong{font-size:13px}
  .trust li > div > span{font-size:12px}

  /* Stats */
  .stats{margin-top:-40px}
  .stats__card{grid-template-columns:repeat(2,1fr); padding:20px; gap:16px}
  .stats__ic{width:48px; height:48px; min-width:48px; border-radius:12px}
  .stats__ic .ic{width:24px; height:24px}

  /* Howto */
  .howto{padding:56px 0 48px}
  .howto__grid{grid-template-columns:1fr; gap:14px}
  .step__arrow{display:none}
  .step{padding:20px}

  /* Doctor */
  .doctor{padding:24px 0 48px}
  .doctor__grid{grid-template-columns:1fr}
  .doc-card{grid-template-columns:1fr; text-align:center}
  .doc-card__photo{margin:0 auto; width:140px; height:140px}
  .doc-card__body{text-align:left}

  /* Cities — mobile carousel */
  .city{min-width:200px}

  /* Info */
  .info{padding:40px 0 48px}
  .info__grid{grid-template-columns:1fr}
  .info__cards{display:flex; overflow-x:auto; overflow-y:hidden; gap:14px; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; padding:8px 4px 12px; cursor:grab; touch-action:pan-x; max-width:100%}
  .info__cards.is-grabbing{cursor:grabbing}
  .info__cards::-webkit-scrollbar{display:none}
  .post{min-width:240px; max-width:280px; flex:none; scroll-snap-align:start}

  /* FAQ tighter on mobile */
  .faq__item summary{padding:14px 14px; font-size:13.5px; gap:10px}

  /* Blog */
  .blog{padding:48px 0}
  .blog__grid{display:flex; overflow-x:auto; overflow-y:hidden; gap:16px; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; padding:8px 4px 12px; cursor:grab; touch-action:pan-x; max-width:100%}
  .blog__grid.is-grabbing{cursor:grabbing}
  .blog__grid::-webkit-scrollbar{display:none}
  .blog-card{min-width:280px; max-width:320px; flex:none; scroll-snap-align:start}

  /* SEO */
  .seo__inner{grid-template-columns:1fr}

  /* CTA */
  .cta-banner{padding:36px 0}
  .cta-banner__inner{flex-direction:column; align-items:flex-start; text-align:left; padding:24px 20px}
  .cta-banner__inner h2,.cta-banner__title{font-size:18px}
  .cta-banner__btns{flex-direction:column; width:100%}
  .cta-banner__btns .btn{width:100%; justify-content:center}

  /* Contact location */
  .contact-loc{padding:48px 0}
  .contact-loc__grid{grid-template-columns:1fr; gap:24px}
  .contact-loc__map{min-height:280px}
  .contact-loc__map-placeholder{min-height:280px}
  .contact-loc__info{padding:24px}

  /* Floating CTA — mobile: full-width bottom bar */
  .floating-cta{right:0; bottom:0; left:0; flex-direction:row; gap:0; border-radius:0; padding:0}
  .floating-cta__btn{flex:1; border-radius:0; justify-content:center; padding:16px 12px; font-size:13px; gap:6px}
  .floating-cta__btn--phone{border-right:1px solid rgba(255,255,255,.2)}
  .floating-cta__pulse{border-radius:0}

  /* Newsletter */
  .newsletter__inner{flex-direction:column; align-items:flex-start; gap:16px}
  .newsletter__form{width:100%}
  .newsletter__form input{width:100%; flex:1}

  /* Footer — add bottom padding for floating bar */
  .foot{padding-bottom:64px}
  .foot__grid{grid-template-columns:1fr 1fr; gap:24px}
  .foot__badges{flex-wrap:wrap; gap:12px}
}

@media (max-width:560px){
  .container{padding:0 14px}

  .hero__copy h1{font-size:26px}
  .hero__sub{font-size:16px}
  .hero__illu{max-width:200px}

  /* Stats: keep 2x2 on mobile, vertical alignment */
  .stats__card{grid-template-columns:repeat(2,1fr); gap:12px; padding:14px}
  .stats__col{flex-direction:column; align-items:center; text-align:center; gap:8px; padding:6px 4px}
  .stats__ic{margin:0 auto}
  .stats__col strong{font-size:14px}
  .stats__col > div > span{font-size:11.5px}

  .city{min-width:170px}

  .info__title{font-size:20px}
  .post{min-width:230px; max-width:280px}

  .blog-card{min-width:260px; max-width:300px}
  .faq__item summary{font-size:13px; padding:13px 14px}

  .cta-banner__inner{padding:20px 16px; border-radius:14px}
  .cta-banner__inner h2,.cta-banner__title{font-size:16px}

  .foot__grid{grid-template-columns:1fr; gap:20px}

  .section__title{font-size:22px}
  .section__sub{font-size:13.5px}

  .contact-loc__title{font-size:22px}
  .contact-loc__sub{font-size:13.5px}
  .contact-loc__info{padding:20px; gap:16px}
  .contact-loc__icon{width:36px; height:36px; border-radius:10px}
  .contact-loc__icon .ic{width:18px; height:18px}
  .contact-loc__btns{flex-direction:column; gap:10px}
  .contact-loc__btns .btn{width:100%; padding:14px}

  .newsletter__form .btn{padding:12px 16px; font-size:13px}
}

@media (max-width:375px){
  .container{padding:0 12px}
  .hero__copy h1{font-size:22px}
  .hero__sub{font-size:15px}
  .hero__form{padding:20px}
  .hero__form h3,.hero__form-title{font-size:16px}
  .stats__card{padding:12px; gap:10px}
  .stats__col strong{font-size:13px}
  .stats__col > div > span{font-size:12px}
  .city{min-width:160px}
  .blog-card{min-width:240px}
  .post{min-width:220px}
  .section__title{font-size:20px}
  .topbar__badge{font-size:12px; padding:2px 8px}
  .topbar__phone strong{font-size:12px}
  .cta-banner__inner h2,.cta-banner__title{font-size:15px}
  .cta-banner__inner p{font-size:12.5px}
  .foot__about{font-size:12.5px}
}

/* ===== Mobile drawer ===== */
.drawer{position:fixed; inset:0; z-index:80; visibility:hidden; pointer-events:none}
.drawer__overlay{position:absolute; inset:0; background:rgba(14,42,71,.55); backdrop-filter:blur(4px); opacity:0; transition:opacity .25s}
.drawer__panel{position:absolute; top:0; right:0; bottom:0; width:min(86vw,360px); background:#fff; box-shadow:var(--shadow-xl); transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.7,.2,1); display:flex; flex-direction:column; padding:20px; will-change:transform; overscroll-behavior:contain}
.drawer.is-open{visibility:visible; pointer-events:auto}
.drawer.is-open .drawer__overlay{opacity:1}
.drawer.is-open .drawer__panel{transform:translateX(0)}
.drawer__head{display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid var(--border); margin-bottom:16px}
.drawer__close{width:40px; height:40px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; color:var(--navy-900); border:1px solid var(--border)}
.drawer__close:hover{background:var(--bg-soft)}
.drawer__menu{display:flex; flex-direction:column; gap:2px}
.drawer__menu a{padding:14px 12px; border-radius:10px; font-weight:600; font-size:15px; color:var(--navy-900); transition:background .2s, color .2s}
.drawer__menu a:hover{background:var(--teal-50); color:var(--teal-600)}
.drawer__menu a.is-active{background:var(--teal-100); color:var(--teal-600)}
.drawer__cta{display:flex; flex-direction:column; gap:10px; margin-top:20px; padding-top:20px; border-top:1px solid var(--border)}
.drawer__links{display:flex; gap:16px; padding:12px 0; margin-top:8px; border-top:1px solid var(--border)}
.drawer__links a{font-size:13px; color:var(--muted); font-weight:500}
.drawer__links a:hover{color:var(--teal-500)}
.drawer__contact{margin-top:auto; padding-top:20px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:10px; font-size:13.5px; color:var(--muted)}
.drawer__contact a, .drawer__contact span{display:inline-flex; gap:8px; align-items:center; color:var(--navy-900); font-weight:600}
.drawer__social{display:flex; gap:10px; margin-top:6px}
.drawer__social a{width:36px; height:36px; border-radius:50%; background:var(--bg-soft); display:inline-flex; align-items:center; justify-content:center; color:var(--navy-900); transition:background .2s, color .2s}
.drawer__social a:hover{background:var(--teal-100); color:var(--teal-500)}
.drawer__social .ic{width:16px; height:16px}
body.no-scroll{overflow:hidden}

/* ===== Reveal ===== */
[data-reveal]{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease}
[data-reveal].is-visible{opacity:1; transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1; transform:none}
  .blob, .hero__halo, .sparkle, .hero__illu, .hero__grad,
  .floating-cta__btn--wa, .floating-cta__btn--phone, .floating-cta__pulse{animation:none !important}
}

/* ===== Form success overlay ===== */
@keyframes fadeIn{from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)}}

/* ===== Skip to content (accessibility) ===== */
.skip-link{position:absolute; top:-100px; left:16px; padding:10px 20px; background:var(--teal-500); color:#fff; border-radius:0 0 8px 8px; font-weight:700; font-size:14px; z-index:999; transition:top .2s}
.skip-link:focus{top:0}

/* ===== Scrollbar polish ===== */
@supports (scrollbar-width:thin){
  html{scrollbar-width:thin; scrollbar-color:var(--teal-400) transparent}
}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--teal-400); border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--teal-500)}

/* ===== Phone Input with Country Code Selector ===== */
.field--phone{display:flex; gap:0; border:1px solid var(--border); border-radius:10px; background:#fff; overflow:hidden; transition:border-color .2s, box-shadow .2s}
.field--phone:focus-within{border-color:var(--teal-500); box-shadow:0 0 0 3px rgba(23,162,168,.15)}
.field--phone .field__ic{position:static; transform:none; align-self:center; margin-left:12px; margin-right:4px}
.field--phone select{appearance:none; -webkit-appearance:none; border:none; background:transparent; padding:0 24px 0 8px; font-size:14px; color:var(--text); font-weight:600; cursor:pointer; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7785' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat:no-repeat; background-position:right 4px center; background-size:14px}
.field--phone select:focus{outline:none}
.field--phone input{flex:1; border:none; padding:0 14px 0 8px; background:transparent; font-size:14px; color:var(--text)}
.field--phone input:focus{outline:none; box-shadow:none}
.field--phone .phone-prefix{display:flex; align-items:center; gap:4px; padding-left:8px; border-left:1px solid var(--border); margin:8px 0; font-size:14px; font-weight:600; color:var(--text); white-space:nowrap}
.field--phone .phone-prefix .flag{width:20px; height:14px; border-radius:2px; object-fit:cover; display:inline-block}
/* Country code dropdown with flag */
.country-code-select{display:flex; align-items:center; gap:6px; padding:0 8px; border-right:1px solid var(--border); background:#f8fafc; cursor:pointer; font-size:14px; font-weight:500}
.country-code-select .flag{width:20px; height:14px; border-radius:2px; object-fit:cover}
.field--phone input[type="tel"]{padding-left:12px}

/* Phone Input Fix - Ensure full width display */
.phone-input-wrapper,
.tel-input-group,
.input-group--phone{width:100%; display:flex; align-items:stretch; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#fff}
.phone-input-wrapper:focus-within,
.tel-input-group:focus-within,
.input-group--phone:focus-within{border-color:var(--teal-500); box-shadow:0 0 0 3px rgba(23,162,168,.15)}

.phone-input-wrapper select,
.tel-input-group select,
.input-group--phone select{appearance:none; -webkit-appearance:none; border:none; background:#f8fafc; padding:12px 32px 12px 12px; font-size:15px; color:var(--text); font-weight:500; cursor:pointer; border-right:1px solid var(--border); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7785' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; min-width:70px}

.phone-input-wrapper input[type="tel"],
.tel-input-group input[type="tel"],
.input-group--phone input[type="tel"]{flex:1; border:none; padding:12px 16px; font-size:15px; background:transparent; min-width:0}
.phone-input-wrapper input[type="tel"]:focus,
.tel-input-group input[type="tel"]:focus,
.input-group--phone input[type="tel"]:focus{outline:none}

/* Admin panel phone input fix */
.admin-form .phone-input-container,
.admin-form .field--phone{max-width:100%; box-sizing:border-box}
.admin-form .phone-input-container input,
.admin-form .field--phone input{box-sizing:border-box}

/* Fix for truncated phone inputs in forms */
.form-row .phone-input-wrapper,
.form-row .field--phone,
.form-group .phone-input-wrapper,
.form-group .field--phone{width:100%}

/* Ensure country code doesn't wrap */
.phone-country-code{white-space:nowrap; flex-shrink:0}