/*!
 * meteitil.com.tr — site.css
 * Design language ported 1:1 from design/mockups/anasayfa-b.html ("Alternatif B — Sıcak Teal").
 * All layout/spacing uses CSS logical properties so [dir="rtl"] mirrors automatically.
 */

/* Palette: "Canlı Açık Mavi" (sky + coral). Token NAMES are kept from the
   previous Sıcak Teal scheme on purpose — every component already references
   them, so the whole site re-themes from this one block. */
:root {
  --cream: #f8fafc;        /* page background        */
  --cream-2: #f1f5f9;      /* alternating band       */
  --paper: #ffffff;        /* card surface           */
  --sky-50: #f0f9ff;       /* softest tint           */
  --pine-900: #0369a1;     /* deep brand (footer)    */
  --pine-800: #075985;     /* deep mid               */
  --teal-600: #0ea5e9;     /* PRIMARY sky            */
  --teal-100: #e0f2fe;     /* light brand tint       */
  --clay: #fb7185;         /* coral accent           */
  --clay-soft: #ffe4e6;    /* light coral            */
  --gold: #38bdf8;         /* secondary accent       */
  --ink: #0f172a;          /* primary text           */
  --ink-soft: #475569;     /* secondary text         */
  --line: #e2e8f0;         /* borders                */
  --ff-d: "Fraunces", serif;
  --ff-b: "Karla", sans-serif;
  --ff-ar: "Noto Naskh Arabic", "Fraunces", serif;
  --sh: 0 24px 56px -20px rgba(2, 132, 199, .28);
  --sh-sm: 0 10px 30px -14px rgba(2, 132, 199, .22);
}

/* ---------- reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--ff-b);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
[dir="rtl"] body,
[lang="ar"] body { font-family: var(--ff-ar), var(--ff-b); }

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  z-index: 99;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; }

.wrap { width: min(var(--wrap-w, 1400px), 94%); margin-inline: auto; }
/* Sections that read better narrow (article prose, forms) opt down rather
   than the whole site staying narrow for their sake. */
.wrap--narrow { --wrap-w: 1160px; }
h1, h2, h3 { font-family: var(--ff-d); font-weight: 500; line-height: 1.15; }
em.i { font-style: italic; color: var(--teal-600); }

/* ---------- skip link ---------- */
.skip-link {
  position: absolute;
  inset-inline-start: -999px;
  top: 0;
  z-index: 200;
  background: var(--pine-900);
  color: var(--cream);
  padding: .8rem 1.4rem;
  border-radius: 0 0 10px 0;
  font-weight: 700;
  font-size: .9rem;
}
.skip-link:focus {
  inset-inline-start: 0;
}

/* ---------- focus-visible ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2.5px solid var(--teal-600);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- topbar ---------- */
.top { font-size: .82rem; background: var(--pine-900); color: #cfe9fb; }
.top .wrap { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; gap: 1rem; flex-wrap: wrap; }
.top .addr { display: flex; align-items: center; gap: .4rem; }

/* Top bar: labelled contact details on the start side, social marks and the
   language switcher on the end side. */
.top-contacts { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }
.tc-item { display: inline-flex; align-items: center; gap: .35rem; }
.tc-label { opacity: .72; }
.top-contacts a { color: #fff; font-weight: 600; }
.top-contacts a:hover { text-decoration: underline; text-underline-offset: 3px; }

.top-right { display: flex; align-items: center; gap: 1.2rem; }
.top-socials { display: inline-flex; align-items: center; gap: .55rem; }
.top-socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff;
  transition: background .2s ease, transform .2s ease;
}
.top-socials a:hover { background: rgba(255, 255, 255, .26); transform: translateY(-1px); }

@media (max-width: 720px) {
  .top-contacts { gap: .8rem; font-size: .76rem; }
  .tc-label { display: none; }
  .top-right { gap: .8rem; }
}
.top .langs a { margin-inline-start: .9rem; letter-spacing: .08em; font-weight: 700; }
.top .langs .on { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- header ---------- */
header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248, 250, 252, .88);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--line);
}
header.site .wrap { display: flex; align-items: center; gap: 2rem; padding: .9rem 0; }
.logo { display: flex; align-items: center; }
.logo .logo-img {
  /* The new mark is far squarer than the old wordmark (2.35 vs 4.75), so at
     the previous 44px its strapline was illegible; the header row has the
     vertical room for this. */
  height: 62px;
  width: auto;
  max-width: min(340px, 60vw);
  object-fit: contain;
  display: block;
}

nav.main { margin-inline-start: auto; }
nav.main > ul { display: flex; gap: .95rem; font-weight: 700; font-size: .8rem; letter-spacing: 0; list-style: none; margin: 0; padding: 0; }
/* Top-level labels are long ("Rahim İdrar Torbası Sarkması"); keeping each
   on one line is what makes the row read as a menu rather than a block of
   wrapped text. */
nav.main > ul > li > a { white-space: nowrap; }
/* The header CTA is a fixed label; wrapping it to two lines was making the
   whole header row taller than the logo. */
.cta-desktop { white-space: nowrap; }
@media (max-width: 1320px) { nav.main > ul { gap: .7rem; font-size: .76rem; } }
nav.main .nav-item { position: relative; }
nav.main a { padding: .35rem 0; border-block-end: 2px solid transparent; transition: .25s; display: inline-flex; align-items: center; gap: .3rem; }
nav.main a:hover,
nav.main a:focus-visible { border-color: var(--clay); color: var(--pine-900); }

/* dropdown / mega-menu */
nav.main .caret { font-size: .65em; transition: transform .2s; }
nav.main .nav-item.has-dropdown:hover > .dropdown,
nav.main .nav-item.has-dropdown:focus-within > .dropdown,
nav.main .nav-item.has-dropdown > a[aria-expanded="true"] ~ .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
nav.main .nav-item.has-dropdown:hover > a .caret,
nav.main .nav-item.has-dropdown:focus-within > a .caret,
nav.main .nav-item.has-dropdown > a[aria-expanded="true"] .caret { transform: rotate(180deg); }
nav.main .dropdown {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  min-width: 220px;
  margin: 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh);
  padding: .6rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: .22s;
  z-index: 60;
}
/* Nested (sub-category) dropdowns flow inline within the panel rather than
   flying out sideways — keeps the mega-menu a single scrollable column. */
nav.main .dropdown .dropdown {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border: 0;
  margin-inline-start: .75rem;
  padding-block: 0 .3rem;
  padding-inline: 0;
}
nav.main .dropdown li { position: relative; }
nav.main .dropdown a {
  display: block;
  padding: .55rem .7rem;
  border-radius: 8px;
  border: 0;
  font-weight: 600;
  color: var(--ink);
}
nav.main .dropdown a:hover,
nav.main .dropdown a:focus-visible { background: var(--teal-100); color: var(--pine-900); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 700;
  border-radius: 999px;
  padding: .75rem 1.6rem;
  font-size: .92rem;
  transition: .28s;
  border: 0;
  cursor: pointer;
  font-family: var(--ff-b);
}
.btn-pine { background: var(--pine-900); color: var(--cream); }
.btn-pine:hover { background: var(--teal-600); transform: translateY(-2px); }
.btn-line { border: 1.5px solid var(--pine-900); color: var(--pine-900); background: transparent; }
.btn-line:hover { background: var(--pine-900); color: var(--cream); }
.btn-wa { background: #27b464; color: #fff; }
.btn-wa:hover { filter: brightness(1.06); transform: translateY(-2px); }
.btn-cream { background: var(--cream); color: var(--pine-900); }
.btn-cream:hover { transform: translateY(-2px); }

/* ---------- mobile menu toggle ---------- */
.menu-toggle {
  display: none;
  margin-inline-start: auto;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: transparent;
  border: 1.5px solid var(--line);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.menu-toggle .bar { position: relative; width: 20px; height: 2px; background: var(--pine-900); }
.menu-toggle .bar::before,
.menu-toggle .bar::after { content: ""; position: absolute; inset-inline-start: 0; width: 100%; height: 2px; background: var(--pine-900); transition: .2s; }
.menu-toggle .bar::before { top: -6px; }
.menu-toggle .bar::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .bar { background: transparent; }
.menu-toggle[aria-expanded="true"] .bar::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bar::after { top: 0; transform: rotate(-45deg); }

.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--cream);
  padding: 5.5rem 6% 2rem;
  overflow-y: auto;
}
.mobile-nav.open { display: block; }
.mobile-nav a { display: block; padding: .9rem 0; font-family: var(--ff-d); font-size: 1.3rem; color: var(--pine-900); border-block-end: 1px solid var(--line); }
.mobile-nav .mobile-nav-row { display: flex; align-items: center; gap: .5rem; border-block-end: 1px solid var(--line); }
.mobile-nav .mobile-nav-row a { flex: 1; border-block-end: 0; }
.mobile-submenu-toggle {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--pine-900);
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform .2s;
}
.mobile-submenu-toggle[aria-expanded="true"] { transform: rotate(180deg); }
.mobile-nav .children { padding-inline-start: 1rem; }
.mobile-nav .children[hidden] { display: none; }
.mobile-nav .children a { font-family: var(--ff-b); font-size: 1rem; font-weight: 700; border: 0; padding: .6rem 0; }
.mobile-nav .cta {
  /* The generic `.mobile-nav a` rule above sets the link colour, and being
     later in the file it beat .btn-pine's cream — leaving the label the same
     navy as the button itself, i.e. invisible. Restate the button colours. */
  margin-top: 1.6rem;
  color: var(--cream);
  border-block-end: 0;
  text-align: center;
  font-family: var(--ff-b);
  font-size: 1rem;
}
.mobile-nav .cta:hover { color: var(--cream); }
.mobile-nav-close {
  position: absolute;
  top: 1.1rem;
  inset-inline-end: 6%;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--paper);
  font-size: 1.2rem;
  cursor: pointer;
}

@media (max-width: 960px) {
  nav.main { display: none; }
  header.site .btn-pine.cta-desktop { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: 3.5rem 0; min-height: calc(100svh - var(--chrome-h, 132px)); display: flex; flex-direction: column; justify-content: center; }
/* Inner-page heroes (treatment/disease/article detail) are content-sized, not
   full-viewport — the 100svh min-height belongs to the homepage hero only. */
.hero--inner { min-height: 0; padding-block: 2.5rem 1rem; }
.hero .blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; }
.hero .b1 { width: 480px; height: 480px; background: var(--hero-blob, var(--teal-100)); top: -140px; inset-inline-end: 8%; }
.hero .b2 { width: 380px; height: 380px; background: var(--hero-blob, var(--clay-soft)); bottom: -160px; inset-inline-start: -80px; }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; }
.script-note { font-family: var(--ff-d); font-style: italic; color: var(--clay); font-size: 1.05rem; margin-block-end: 1rem; display: block; }
.hero h1 { font-size: clamp(2.5rem, 5.2vw, 4rem); color: var(--hero-text, var(--pine-900)); }
.hero p.lead { margin: 1.4rem 0 2.2rem; max-width: 32rem; color: var(--ink-soft); font-size: 1.07rem; }
.hero .cta-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.arch { position: relative; }
.hero .arch { justify-self: center; }
.arch img { width: min(400px, 88vw); aspect-ratio: 4 / 4.6; object-fit: cover; border-radius: 220px 220px 26px 26px; box-shadow: var(--sh); }
.arch::before {
  content: "";
  position: absolute;
  inset: -16px;
  border: 1.5px solid var(--gold);
  border-radius: 236px 236px 34px 34px;
  transform: rotate(1.6deg);
}
[dir="rtl"] .arch img,
[dir="rtl"] .arch::before { transform: none; }
.hero .tag {
  position: absolute;
  bottom: 26px;
  inset-inline-start: -46px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: .85rem 1.15rem;
  box-shadow: var(--sh);
  animation: float 5.5s ease-in-out infinite;
}
.hero .tag b { font-family: var(--ff-d); display: block; color: var(--pine-900); font-size: .95rem; }
.hero .tag span { font-size: .76rem; color: var(--ink-soft); }
@keyframes float { 50% { transform: translateY(-8px); } }
.hero .creds { display: flex; gap: 2.2rem; margin-block-start: 2.8rem; flex-wrap: wrap; }
.cred b { font-family: var(--ff-d); font-size: 1.65rem; color: var(--teal-600); font-weight: 600; }
.cred span { display: block; font-size: .78rem; color: var(--ink-soft); letter-spacing: .04em; }
/* Hero-scoped button color overrides — driven by --hero-btn-* variables with
   fallbacks to the current look. Scoped to .hero so the global .btn-pine /
   .btn-line used elsewhere on the site (blog CTA, list "view all" links,
   etc.) are never affected by hero color settings. */
.hero .btn-pine { background: var(--hero-btn-primary-bg, var(--pine-900)); color: var(--hero-btn-primary-text, var(--cream)); }
.hero .btn-line { border-color: var(--hero-btn-secondary-border, var(--pine-900)); color: var(--hero-btn-secondary-text, var(--pine-900)); }
.hero .btn-line:hover { background: var(--hero-btn-secondary-border, var(--pine-900)); color: var(--hero-btn-primary-text, var(--cream)); }
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero .tag { inset-inline-start: 0; }
}

/* ---------- hero background video + Sıcak Teal overlay ---------- */
.hero--video { position: relative; overflow: hidden; }
.hero-bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--pine-900);
  background-size: cover;
  background-position: center;
}
/* object-fit: cover crops both <video> and <iframe> to fill the box without
   letterboxing at any aspect ratio, so it also covers correctly on mobile
   viewports — no separate responsive override is needed. */
.hero-bg-video video,
.hero-bg-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  border: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--hero-overlay, #0369a1);
  opacity: var(--hero-overlay-opacity, .72);
}
.hero--video .wrap { position: relative; z-index: 2; }
.hero--video h1,
.hero--video .script-note,
.hero--video .cred b,
.hero--video .cred span { color: var(--hero-text, #fff); }
/* Readability fix: .hero p.lead (specificity 0,2,1 via the `p` tag) was
   beating this rule's original .hero--video .lead (0,2,0), leaving the
   faded --ink-soft color on the video hero's subheading and making it
   nearly invisible against the teal overlay. Matching the tag selector
   here restores equal specificity so source order (this rule comes later)
   makes it win, and opacity is forced back to 1. */
.hero--video p.lead {
  color: var(--hero-text, #fff);
  opacity: 1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
.hero--video h1 { text-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.hero--video .btn-line {
  border-color: var(--hero-btn-secondary-border, #fff);
  color: var(--hero-btn-secondary-text, #fff);
}
.hero--video .btn-line:hover {
  background: var(--hero-btn-secondary-border, #fff);
  color: var(--hero-btn-primary-text, #0369a1);
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg-video video,
  .hero-bg-video iframe { display: none; }
}

/* ---------- blog layout + sidebar ---------- */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2.5rem; align-items: start; }
.blog-layout .blog-main { min-width: 0; }
.blog-sidebar { position: sticky; top: calc(var(--chrome-h, 132px) + 1rem); display: flex; flex-direction: column; gap: 1.4rem; align-self: start; }
.sidebar-widget { background: #fff; border: 1px solid rgba(14, 165, 233, .16); border-radius: 14px; padding: 1.1rem 1.2rem; }
.sidebar-widget h3 { font-family: var(--ff-d); font-size: 1rem; color: var(--pine-900); margin-block-end: .8rem; }
.sidebar-search form { display: flex; gap: .4rem; }
.sidebar-search input { flex: 1; min-width: 0; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.sidebar-search button { flex-shrink: 0; border: 0; background: var(--pine-900); color: var(--cream); border-radius: 10px; padding: 0 .8rem; cursor: pointer; }
.sidebar-cats { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.sidebar-cats a { display: flex; justify-content: space-between; gap: .5rem; color: var(--ink); }
.sidebar-cats a:hover { color: var(--teal-600); }
.sidebar-cats .cnt { color: var(--ink-soft); font-size: .85rem; }
.sidebar-posts { list-style: none; display: flex; flex-direction: column; gap: .9rem; }
.sidebar-posts a { display: flex; gap: .7rem; align-items: center; color: var(--ink); }
.sidebar-posts a:hover { color: var(--teal-600); }
.sidebar-posts img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.sidebar-posts span { font-size: .9rem; line-height: 1.35; }
.sidebar-cta { text-align: center; background: var(--teal-100); border-color: transparent; }
.sidebar-cta .btn { margin-block-start: .6rem; }
@media (max-width: 900px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar { position: static; }
}

/* ---------- marquee ribbon ---------- */
.marquee-band {
  position: relative;
  z-index: 1;
  overflow: hidden;
  max-width: 100%;
}
.ribbon {
  background: var(--hero-ribbon-bg, var(--pine-900));
  color: var(--hero-ribbon-text, var(--cream-2));
  overflow: hidden;
  padding: .85rem 0;
  transform: rotate(-1deg);
  margin: 2.5rem -2% 0;
  width: 104%;
}
[dir="rtl"] .ribbon { transform: rotate(1deg); }
.ribbon .track {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  animation: mq 30s linear infinite;
  font-family: var(--ff-d);
  font-style: italic;
  font-size: .98rem;
  width: max-content;
}
.ribbon .track span::before { content: "✿"; margin-inline-end: 3rem; color: var(--clay); }
@keyframes mq { to { transform: translateX(-50%); } }
[dir="rtl"] .ribbon .track { animation-name: mq-rtl; }
@keyframes mq-rtl { to { transform: translateX(50%); } }
.ribbon.paused .track { animation-play-state: paused; }

/* ---------- sections ---------- */
section { padding: 5.4rem 0; }
/* Inner pages open with a breadcrumb (.wrap) then their first <section>.
   The section's full 5.4rem top padding stacked on the breadcrumb's spacing
   left a large empty band under the header. Trim the top of the first
   section on inner pages; the home page leads with .hero (not a section)
   and is unaffected. */
main > .wrap:first-child + section { padding-top: 1rem; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal-600);
  margin-block-end: .8rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1.5px; background: var(--clay); }
.sec-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); color: var(--pine-900); max-width: 620px; }
.sec-head p { color: var(--ink-soft); margin-block-start: .8rem; max-width: 560px; }
/* Breathing room between a section heading and the grid beneath it —
   without this the cards butt straight against the title. */
.sec-head { margin-block-end: 2.4rem; }
.sec-head.center { text-align: center; margin-inline: auto; }
.sec-head.center .eyebrow { justify-content: center; }
.sec-head.center h2 { margin-inline: auto; }
.sec-head.center p { margin-inline: auto; }

.rev { opacity: 0; transform: translateY(26px); transition: opacity .75s, transform .75s; }
.rev.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rev { opacity: 1; transform: none; transition: none; }
  .ribbon .track { animation: none; }
  .hero .tag { animation: none; }
}

/* treatments — editorial numbered list */
/* Phone numbers and social handles are LTR runs. Inside the Arabic (RTL)
   layout the bidi algorithm otherwise moves the leading "+" / "@" to the
   far end, rendering "+90 532 ..." as "... 532 90+". Isolating them keeps
   the number readable without affecting the surrounding Arabic text. */
[href^="tel:"], .insta-follow, .tcx-phone { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .insta-follow, [dir="rtl"] .tcx-phone { justify-content: flex-end; }

/* ---------- homepage: four-across image cards ----------
   Used by both the treatments and the diseases blocks so the two read as
   one family: four per row, wrapping to a second row. */
.home-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.hg-card {
  display: block; overflow: hidden; border-radius: 18px;
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--sh-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hg-card:hover { transform: translateY(-4px); border-color: var(--teal-600); box-shadow: var(--sh); }
.hg-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream-2); }
.hg-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.hg-card:hover .hg-media img { transform: scale(1.06); }
.hg-body { display: block; padding: 1rem 1.1rem 1.2rem; }
.hg-body h3 { font-size: 1.05rem; line-height: 1.35; color: var(--pine-900); margin-block-end: .4rem; }
.hg-body p { font-size: .9rem; color: var(--ink-soft); line-height: 1.55; }
.hg-count { font-size: .85rem; color: var(--teal-600); font-weight: 600; }
@media (max-width: 1080px) { .home-grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .home-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .home-grid-4 { grid-template-columns: 1fr; } }

/* Video hero: the panel sits at the foot of the clip rather than centred
   over it, so the footage stays visible. */
.hero--video .wrap {
  grid-template-columns: 1fr;
  justify-items: start;
  align-items: end;
  align-content: end;
  min-height: inherit;
  padding-block-end: 2.5rem;
}
.hero-panel {
  display: grid; gap: 1.6rem; justify-items: start;
  max-width: 640px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
/* No panel background: the stats and buttons sit directly on the footage,
   so they take the hero's light-on-video treatment with a shadow for
   legibility against bright frames. */
.hero-panel .creds {
  display: flex; flex-wrap: wrap; gap: 2.6rem;
  padding-block-start: 1.4rem;
  border-block-start: 1px solid rgba(255, 255, 255, .28);
  width: 100%;
}
.hero--video .hero-panel .cred b {
  color: var(--hero-text, #fff);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.hero--video .hero-panel .cred span {
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}
.hero--video .hero-panel .btn-line {
  color: #fff; border-color: rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .10);
}
.hero--video .hero-panel .btn-line:hover { background: rgba(255, 255, 255, .2); }
.hero-panel .creds {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  width: 100%; text-align: center;
  border-block-start: 1px solid var(--line); padding-block-start: 1.2rem;
}
@media (max-width: 560px) {
  .hero-panel { padding: 1.2rem; }
  .hero-panel .creds { gap: .6rem; }
  .cred b { font-size: 1.3rem; }
}

/* ---------- homepage: review-platform ratings ---------- */
.home-ratings { padding-block: 3rem; }
.rating-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem; }
.rating-card {
  display: grid; gap: .5rem; justify-items: center; text-align: center;
  padding: 1.5rem 1.2rem; border-radius: 20px;
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--sh-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
a.rating-card:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.rc-logo { max-height: 34px; width: auto; }
.rc-name { font-weight: 700; color: var(--pine-900); }
.rc-score { font-family: var(--ff-d); font-size: 2rem; color: var(--teal-600); line-height: 1; }
.rc-score small { font-size: .95rem; color: var(--ink-soft); }
/* The filled row is clipped to the score's percentage over the grey row. */
.rc-stars { position: relative; display: inline-block; color: var(--line); letter-spacing: .12em; }
.rc-stars-on { position: absolute; inset-block-start: 0; inset-inline-start: 0; overflow: hidden; white-space: nowrap; color: var(--gold, #f5b301); }
.rc-label { font-size: .84rem; color: var(--ink-soft); }

/* Testimonial stars + city */
.qb-stars { color: #f5b301; letter-spacing: .1em; font-size: .95rem; }
.qb-stars-off { color: var(--line); }
.qb-city { font-weight: 400; opacity: .8; }

/* ---------- detail page: content + sidebar ---------- */
.c-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2rem; align-items: start; }
.c-layout .content-panel { margin-block-start: 2.4rem; }
.c-side { display: grid; gap: 1.2rem; position: sticky; top: calc(var(--chrome-h, 132px) + 1rem); margin-block-start: 2.4rem; }
.cs-card { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 1.4rem; box-shadow: var(--sh-sm); }
.cs-card h3 { font-size: 1.05rem; color: var(--pine-900); margin-block-end: .6rem; }

.cs-doctor { text-align: center; }
.cs-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 0 auto .8rem; box-shadow: var(--sh-sm); }
.cs-role { font-size: .88rem; color: var(--ink-soft); margin-block-end: 1rem; }
.cs-doc-actions { display: grid; gap: .55rem; justify-items: center; }
.cs-phone { font-weight: 700; color: var(--pine-900); direction: ltr; unicode-bidi: isolate; }
.cs-about { font-size: .88rem; color: var(--teal-600); font-weight: 600; }

.cs-lead { font-size: .88rem; color: var(--ink-soft); margin-block-end: .9rem; }
.cs-fields { display: grid; gap: .35rem; }
.cs-fields label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); margin-block-start: .5rem; }
.cs-fields .input { width: 100%; }
.cs-submit { margin-block-start: 1rem; width: 100%; }

.cs-faq-list { display: grid; gap: .5rem; }
.cs-faq-item { border-block-end: 1px solid var(--line); padding-block-end: .5rem; }
.cs-faq-item:last-child { border-block-end: 0; padding-block-end: 0; }
.cs-faq .faq-q { width: 100%; text-align: start; font-size: .9rem; font-weight: 600; color: var(--pine-900); background: none; border: 0; padding: .5rem 0; cursor: pointer; }
.cs-faq .faq-a { font-size: .88rem; color: var(--ink-soft); line-height: 1.6; padding-block-end: .5rem; }

@media (max-width: 1000px) {
  .c-layout { grid-template-columns: 1fr; }
  .c-side { position: static; }
}

/* ---------- press: hub channel cards ---------- */
.press-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-block: 2rem; }
.press-channel {
  display: block; padding: 1.6rem 1.4rem; border-radius: 20px;
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--sh-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.press-channel:hover { transform: translateY(-4px); border-color: var(--teal-600); box-shadow: var(--sh); }
.pc-ico { font-size: 1.9rem; line-height: 1; }
.press-channel h2 { font-size: 1.25rem; color: var(--pine-900); margin-block: .6rem .4rem; }
.press-channel p { color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 820px) { .press-channels { grid-template-columns: 1fr; } }

/* ---------- press: newspaper / internet clippings ---------- */
.clip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.clip {
  position: relative; display: block; overflow: hidden; border-radius: 16px;
  background: var(--cream-2); border: 1px solid var(--line); box-shadow: var(--sh-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.clip:hover { transform: translateY(-3px); box-shadow: var(--sh); }
.clip img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.clip-cap {
  position: absolute; inset-inline: 0; inset-block-end: 0; padding: .7rem .8rem;
  color: #fff; font-size: .85rem; line-height: 1.35;
  background: linear-gradient(180deg, rgba(3,105,161,0), rgba(3,105,161,.85));
}
@media (max-width: 1000px) { .clip-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .clip-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- press: television list + player ---------- */
.tv-list { display: grid; gap: 1.4rem; }
.tv-row {
  display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: 1.6rem; align-items: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: 20px;
  padding: 1.1rem; box-shadow: var(--sh-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.tv-row:hover { transform: translateY(-3px); box-shadow: var(--sh); }
.tv-media {
  position: relative; display: block; overflow: hidden; border-radius: 14px;
  aspect-ratio: 16 / 9; background: var(--cream-2);
}
.tv-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tv-row:hover .tv-media img { transform: scale(1.05); }
.tv-body h2 { font-size: 1.2rem; color: var(--pine-900); margin-block-end: .5rem; }
.tv-body p { color: var(--ink-soft); margin-block-end: 1rem; }
.tv-player { border-radius: 18px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.tv-player iframe, .tv-player video { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 820px) { .tv-row { grid-template-columns: 1fr; } }

/* ---------- instagram feed ---------- */
.insta { padding-block: 3.5rem; }
.insta-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; margin-block-end: 1.6rem; }
.insta-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--pine-900); margin-block-start: .4rem; }
.insta-follow { display: inline-flex; align-items: center; gap: .5rem; }
.insta-ico { display: inline-flex; }
.insta-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .8rem; }
.insta-item {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden;
  border-radius: 16px; background: var(--cream-2); box-shadow: var(--sh-sm);
}
.insta-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.insta-item:hover img { transform: scale(1.08); }
.insta-overlay {
  position: absolute; inset: 0; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, rgba(3,105,161,.15), rgba(3,105,161,.55));
  opacity: 0; transition: opacity .3s ease;
}
.insta-item:hover .insta-overlay, .insta-item:focus-visible .insta-overlay { opacity: 1; }
@media (max-width: 900px) { .insta-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .insta-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- homepage appointment form ---------- */
.home-form { padding-block: 3.5rem; background: linear-gradient(180deg, var(--cream), var(--sky-50)); }
.hf-inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2.6rem; align-items: start; }
.hf-aside h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); color: var(--pine-900); margin-block: .5rem .7rem; }
.hf-aside p { color: var(--ink-soft); margin-block-end: 1.4rem; }
.hf-phone {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: .6rem 1.2rem; font-size: 1.05rem; margin-inline-end: .6rem; margin-block-end: .6rem;
  transition: .2s;
}
.hf-phone:hover { border-color: var(--teal-600); transform: translateY(-2px); box-shadow: var(--sh-sm); }
.hf-phone b { color: var(--pine-900); }
.hf-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 1.9rem clamp(1.2rem, 3vw, 2.1rem);
  box-shadow: var(--sh);
}
.hf-card .form-grid { margin-block-start: 0; }
@media (max-width: 900px) { .hf-inner { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ---------- trimester guide cards ---------- */
.trimesters { padding-block: 3rem 1rem; }
.tri-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-block-start: 2.4rem; }
.tri-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 1.7rem 1.6rem 1.9rem;
  box-shadow: var(--sh-sm);
  border-block-start: 5px solid var(--teal-600);
  transition: transform .3s, box-shadow .3s;
}
.tri-card:hover { transform: translateY(-5px); box-shadow: var(--sh); }
.tri-t1 { border-block-start-color: var(--gold); }
.tri-t2 { border-block-start-color: var(--teal-600); }
.tri-t3 { border-block-start-color: var(--clay); }
.tri-head { display: flex; align-items: center; gap: .9rem; margin-block-end: 1.1rem; }
.tri-ico {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: 16px;
  background: var(--teal-100);
  display: grid; place-items: center;
  font-size: 1.5rem;
}
.tri-t1 .tri-ico { background: #e0f2fe; }
.tri-t3 .tri-ico { background: var(--clay-soft); }
.tri-head h3 { font-size: 1.2rem; color: var(--pine-900); }
.tri-weeks { font-size: .82rem; font-weight: 700; color: var(--teal-600); letter-spacing: .04em; }
.tri-t3 .tri-weeks { color: var(--clay); }
.tri-list dt {
  font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin-block-start: 1rem;
}
.tri-list dd { margin: .25rem 0 0; color: var(--ink); font-size: .93rem; line-height: 1.6; }
@media (max-width: 960px) { .tri-grid { grid-template-columns: 1fr; } }

/* ---------- trimester calculator ---------- */
.tri-calc { padding-block: 3rem; }
.tri-calc-inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 2.2rem;
  align-items: center;
  background: linear-gradient(135deg, var(--pine-900), var(--teal-600));
  color: #fff;
  border-radius: 26px;
  padding: 2.4rem clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--sh);
}
.tri-calc-inner .eyebrow { color: #bae6fd; }
.tri-calc-inner .eyebrow::before { background: var(--clay); }
.tri-calc-text h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); margin-block: .4rem .6rem; }
.tri-calc-text p { color: rgba(255, 255, 255, .85); font-size: .96rem; margin-block-end: 1.2rem; }
.tri-calc-form label { display: block; font-weight: 700; font-size: .85rem; margin-block-end: .45rem; color: #e0f2fe; }
.tri-calc-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.tri-calc-row input {
  flex: 1; min-width: 190px;
  padding: .75rem .9rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font: inherit;
}
.tri-calc-row input::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }
.tri-calc-row .btn-pine { background: #fff; color: var(--pine-900); }
.tri-calc-row .btn-pine:hover { background: var(--clay); color: #fff; }
.tri-calc-error { margin-block-start: .6rem; font-size: .85rem; color: #fecdd3; font-weight: 600; }
.tri-calc-result {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 20px;
  padding: 1.5rem;
  display: grid;
  gap: 1rem;
}
.tri-res-item small { display: block; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: #bae6fd; font-weight: 700; }
.tri-res-item b { display: block; font-family: var(--ff-d); font-size: 1.7rem; color: #fff; line-height: 1.2; }
.tri-res-link { color: #fff; font-weight: 800; font-size: .88rem; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 860px) { .tri-calc-inner { grid-template-columns: 1fr; } }

/* ---------- treatment detail: contact block + zig-zag media ---------- */
.treatment-contact { padding-block: 3rem 1rem; }
.tcx-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem;
  align-items: center;
  background: linear-gradient(135deg, var(--sky-50), var(--teal-100));
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 2.2rem clamp(1.4rem, 4vw, 2.6rem);
  box-shadow: var(--sh-sm);
}
.tcx-text h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--pine-900); margin-block: .5rem .6rem; }
.tcx-text p { color: var(--ink-soft); font-size: .97rem; }
.tcx-actions { display: flex; flex-direction: column; gap: .8rem; }
.tcx-phone {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .85rem 1.1rem;
  transition: .22s;
}
.tcx-phone:hover { border-color: var(--teal-600); transform: translateY(-2px); box-shadow: var(--sh-sm); }
.tcx-ico {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--teal-100);
  display: grid; place-items: center;
  font-size: 1.15rem;
}
.tcx-phone small { display: block; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
.tcx-phone b { display: block; font-size: 1.08rem; color: var(--pine-900); letter-spacing: .01em; }
.tcx-btns { display: flex; gap: .6rem; flex-wrap: wrap; margin-block-start: .2rem; }
@media (max-width: 860px) { .tcx-inner { grid-template-columns: 1fr; gap: 1.6rem; } }

/* zig-zag media inside a treatment body: alternating image/text rows */
.zigzag { display: grid; gap: 2.2rem; margin-block: 2.4rem; }
.zigzag-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.zigzag-row:nth-child(even) .zigzag-media { order: 2; }
.zigzag-media img { width: 100%; border-radius: 18px; box-shadow: var(--sh-sm); aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 760px) { .zigzag-row { grid-template-columns: 1fr; } .zigzag-row:nth-child(even) .zigzag-media { order: 0; } }

/* ---------- premium treatment cards (list-treatments) ---------- */
.treatment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.8rem;
  margin-block-start: 2.6rem;
}
.treatment-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s, border-color .3s;
  color: inherit;
}
.treatment-card:hover,
.treatment-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--sh);
  border-color: var(--teal-600);
}
.tc-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(140deg, var(--teal-100), var(--sky-50));
  overflow: hidden;
}
.tc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
.treatment-card:hover .tc-media img { transform: scale(1.06); }
.tc-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3, 105, 161, .28), transparent 55%);
  opacity: 0;
  transition: opacity .3s;
}
.treatment-card:hover .tc-media::after { opacity: 1; }
.tc-body { padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.tc-body h3 { font-size: 1.18rem; color: var(--pine-900); line-height: 1.3; }
.tc-body p { color: var(--ink-soft); font-size: .94rem; line-height: 1.65; }
.tc-link {
  margin-block-start: auto;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 800;
  font-size: .86rem;
  color: var(--teal-600);
  letter-spacing: .01em;
}
.tc-arrow { transition: transform .3s; }
.treatment-card:hover .tc-arrow { transform: translateX(4px); }
[dir="rtl"] .tc-arrow { transform: scaleX(-1); }
[dir="rtl"] .treatment-card:hover .tc-arrow { transform: scaleX(-1) translateX(4px); }
@media (max-width: 520px) { .treatment-grid { grid-template-columns: 1fr; gap: 1.3rem; } }

.t-list { margin-block-start: 2.6rem; border-block-start: 1px solid var(--line); }
.t-row {
  display: grid;
  grid-template-columns: 64px 1.2fr 1.6fr auto;
  gap: 2rem;
  align-items: center;
  padding: 1.7rem 0;
  border-block-end: 1px solid var(--line);
  transition: .3s;
  position: relative;
}
.t-row:hover, .t-row:focus-within { background: var(--paper); padding-inline: 1.2rem; margin-inline: -1.2rem; }
.t-row .no { font-family: var(--ff-d); font-style: italic; color: var(--gold); font-size: 1.15rem; }
.t-row h3 { font-size: 1.35rem; color: var(--pine-900); }
.t-row p { font-size: .92rem; color: var(--ink-soft); }
.t-row .thumb { width: 120px; height: 84px; object-fit: cover; border-radius: 60px 60px 12px 12px; opacity: 0; transform: scale(.8) rotate(4deg); transition: .35s; }
.t-row:hover .thumb, .t-row:focus-within .thumb { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .t-row { grid-template-columns: 40px 1fr; gap: .6rem; }
  .t-row p { grid-column: 2; }
  .t-row .thumb { display: none; }
}

/* about */
.about { background: var(--paper); border-block: 1px solid var(--line); }
.about .wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: 4rem; align-items: center; }
.about .frame { position: relative; }
.about .frame img { border-radius: 20px; box-shadow: var(--sh); }
.about .frame::after {
  content: attr(data-quote);
  white-space: pre-line;
  position: absolute;
  inset-inline-end: -24px;
  bottom: -30px;
  background: var(--pine-900);
  color: var(--cream);
  font-family: var(--ff-d);
  font-style: italic;
  padding: 1.1rem 1.4rem;
  border-radius: 16px;
  font-size: .95rem;
  line-height: 1.5;
  box-shadow: var(--sh);
  max-width: 260px;
}
.miles { margin-block-start: 1.6rem; display: grid; gap: .9rem; }
.mile { display: flex; gap: 1.1rem; align-items: baseline; }
.mile .yr { font-family: var(--ff-d); font-style: italic; color: var(--clay); min-width: 56px; font-size: 1.05rem; }
.mile .tx { color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 900px) {
  .about .wrap { grid-template-columns: 1fr; }
  .about .frame::after { inset-inline-end: 0; }
}

/* diseases — arch cards */
.d-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-block-start: 2.6rem; }
.d-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 130px 130px 22px 22px;
  padding: 3rem 1.8rem 2rem;
  text-align: center;
  transition: .32s;
}
.d-card:hover, .d-card:focus-within { transform: translateY(-8px); box-shadow: var(--sh); border-color: var(--teal-600); }
.d-card .ico { width: 64px; height: 64px; margin: 0 auto 1.2rem; border-radius: 50%; background: var(--teal-100); display: grid; place-items: center; font-size: 1.6rem; }
.d-card h3 { font-size: 1.3rem; color: var(--pine-900); margin-block-end: .6rem; }
.d-card p { font-size: .9rem; color: var(--ink-soft); }
.d-card a { display: inline-block; margin-block-start: 1.2rem; font-weight: 800; font-size: .85rem; color: var(--teal-600); border-block-end: 1.5px solid var(--clay); }
@media (max-width: 860px) { .d-cards { grid-template-columns: 1fr; } }

/* card variants (inner pages) */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.6rem; margin-block-start: 2rem; }
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  transition: .28s;
  display: flex;
  flex-direction: column;
}
.card:hover, .card:focus-within { transform: translateY(-6px); box-shadow: var(--sh); border-color: var(--teal-600); }
.card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.card .body { padding: 1.4rem 1.5rem 1.7rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.card h3 { font-size: 1.1rem; color: var(--pine-900); }
.card p { font-size: .9rem; color: var(--ink-soft); }
.card .meta { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--clay); font-weight: 700; }
.card .link { margin-block-start: auto; font-weight: 800; font-size: .85rem; color: var(--teal-600); border-block-end: 1.5px solid var(--clay); align-self: flex-start; }

.card-list { display: grid; gap: 1.2rem; margin-block-start: 2rem; }
.card-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1.4rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.1rem;
  transition: .25s;
}
.card-row:hover, .card-row:focus-within { border-color: var(--teal-600); box-shadow: var(--sh); }
.card-row img { border-radius: 12px; aspect-ratio: 4/3; object-fit: cover; }
.card-row h3 { font-size: 1.1rem; color: var(--pine-900); margin-block-end: .35rem; }
.card-row p { font-size: .88rem; color: var(--ink-soft); }
@media (max-width: 600px) { .card-row { grid-template-columns: 1fr; } .card-row img { aspect-ratio: 16/9; } }

/* testimonials */
.quotes { background: var(--pine-900); color: var(--cream); border-radius: 34px; padding: 4rem 3.4rem; position: relative; overflow: hidden; }
.quotes::before {
  content: "”";
  position: absolute;
  font-family: var(--ff-d);
  font-size: 22rem;
  line-height: .6;
  top: .4em;
  inset-inline-end: .15em;
  color: rgba(255, 255, 255, .06);
}
[dir="rtl"] .quotes::before { content: "“"; }
.quotes .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; position: relative; }
.quotes h2 { color: var(--cream); font-size: clamp(1.7rem, 3vw, 2.3rem); margin-block-end: 2.4rem; }
.qb p { font-family: var(--ff-d); font-style: italic; font-size: 1.02rem; line-height: 1.65; color: #e8f1ee; }
.qb .who { margin-block-start: 1.2rem; font-size: .85rem; letter-spacing: .06em; color: var(--gold); font-weight: 700; }
@media (max-width: 860px) {
  .quotes .grid { grid-template-columns: 1fr; }
  .quotes { padding: 2.6rem 1.8rem; }
}

/* press */
.press { padding: 3rem 0; text-align: center; }
.press small { letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; font-size: .72rem; }
.press .logos { margin-block-start: 1.4rem; display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; }
.press .logos span { font-family: var(--ff-d); font-style: italic; font-size: 1.3rem; color: #b3a98f; transition: .25s; }
.press .logos span:hover { color: var(--pine-900); }

/* CTA */
.cta .box {
  background: linear-gradient(120deg, var(--teal-600), var(--pine-800));
  border-radius: 30px;
  color: var(--cream);
  padding: 3.6rem;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 2rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.cta .box::after { content: "✿"; position: absolute; inset-inline-end: -30px; bottom: -60px; font-size: 14rem; color: rgba(255, 255, 255, .08); }
.cta h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); color: #fff; }
.cta p { color: #d7eae6; margin-block-start: .7rem; }
.cta .acts { display: flex; gap: 1rem; flex-wrap: wrap; justify-self: end; }
[dir="rtl"] .cta .acts { justify-self: start; }
@media (max-width: 860px) {
  .cta .box { grid-template-columns: 1fr; padding: 2.4rem; }
  .cta .acts { justify-self: start; }
}

/* ---------- footer ---------- */
footer { background: var(--pine-900); color: #b9d2cc; font-size: .9rem; margin-block-start: 4rem; }
footer .cols { display: grid; grid-template-columns: 1.6fr 1fr 1.1fr 1.1fr 1fr; gap: 2.4rem; padding: 4rem 0 2.6rem; }
.foot-addr { line-height: 1.7; }
.foot-phones { margin-block-start: .9rem; }
.foot-wa {
  display: inline-block; margin-block-start: 1.1rem;
  padding: .5rem 1.1rem; border-radius: 999px;
  background: #25d366; color: #04361a; font-weight: 600; font-size: .9rem;
}
.foot-wa:hover { filter: brightness(1.08); }
footer h4 { font-family: var(--ff-d); color: var(--cream); font-size: 1.05rem; margin-block-end: 1rem; font-weight: 500; }
footer li { list-style: none; margin: .5rem 0; }
footer a:hover { color: #fff; }
footer .base { border-block-start: 1px solid rgba(255, 255, 255, .14); padding: 1.3rem 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .8rem; }
@media (max-width: 1140px) { footer .cols { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (max-width: 900px) { footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { footer .cols { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ---------- floating & mobile bar ---------- */
/* Sticky contact stack: a vertical column at the bottom-end corner on
   desktop, folded into the bottom bar on phones so the two never overlap. */
.sticky-actions {
  position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 60;
  display: grid; gap: .7rem; justify-items: end;
}
.sa {
  /* Fixed square box + place-items keeps these perfect circles with the
     glyph dead centre; the earlier inline-flex with padding let the label's
     collapsed width stretch them into ovals and push the icon off-centre. */
  position: relative;
  display: grid; place-items: center;
  width: 52px; height: 52px; flex: 0 0 52px;
  border-radius: 50%; color: #fff; font-weight: 700; font-size: .9rem;
  box-shadow: 0 12px 26px -8px rgba(2, 43, 66, .45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sa svg { display: block; }
.sa:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 16px 30px -8px rgba(2, 43, 66, .5); }
.sa--whatsapp { background: #25d366; }
.sa--instagram { background: linear-gradient(45deg, #f09433, #dc2743 45%, #bc1888); }
.sa--phone { background: var(--teal-600); }
/* Labels stay collapsed until hover/focus so the stack does not crowd the
   page, but remain in the DOM for screen readers. */
.sa-text {
  position: absolute; inset-inline-end: calc(100% + 10px); top: 50%;
  transform: translateY(-50%);
  white-space: nowrap; font-size: .82rem; line-height: 1;
  padding: .5rem .75rem; border-radius: 8px;
  background: var(--pine-900); color: #fff;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.sa:hover .sa-text, .sa:focus-visible .sa-text { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sa, .sa-text { transition: none; } }

.mbar { display: none; position: fixed; bottom: 0; inset-inline: 0; z-index: 55; background: var(--pine-900); padding: .6rem .7rem; gap: .5rem; }
.mbar a { flex: 1; text-align: center; padding: .7rem .4rem; border-radius: 12px; font-weight: 700; font-size: .82rem; }
.mbar .mb--whatsapp { background: #25d366; color: #04361a; }
.mbar .mb--instagram { background: linear-gradient(45deg, #f09433, #dc2743 45%, #bc1888); color: #fff; }
.mbar .mb--phone { background: var(--teal-600); color: #fff; }
.mbar .rnd { background: var(--cream); color: var(--pine-900); }

@media (max-width: 760px) {
  .mbar { display: flex; }
  /* The bar already carries these actions on phones. */
  .sticky-actions { display: none; }
  body { padding-block-end: 4.2rem; }
}


/* =====================================================================
   Inner-page primitives (extend mockup B's language for content pages)
   ===================================================================== */

/* ---------- breadcrumb ---------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: var(--ink-soft);
  padding-block: 1.4rem;
}
.breadcrumb a { font-weight: 700; color: var(--teal-600); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: var(--line); }
.breadcrumb .current { color: var(--ink); }

/* ---------- prose / article typography ---------- */
.prose { color: var(--ink); font-size: 1.02rem; line-height: 1.8; }
/* The container widened to fit the menu; article text still caps at a
   comfortable measure so lines do not run the full 1400px. */
.content-panel .prose { max-width: 70ch; margin-inline: auto; }
/* Beside a sidebar the column is already narrow, so the body reads better
   flush to the start edge than centred inside it. */
.c-layout .content-panel .prose { max-width: none; margin-inline: 0; }
/* Blog posts sit beside a sidebar too, so the same measure applies. */
.blog-main .content-panel { margin-block-start: 1.6rem; }
.blog-main .content-panel .prose { max-width: none; margin-inline: 0; }
/* Detail body panel: lifts the article content onto its own surface so it
   reads as a distinct block below the hero (was blending into the cream). */
.content-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--sh); padding: 2.8rem clamp(1.4rem, 4vw, 3.4rem); margin-block: 2.4rem 0; position: relative; z-index: 2; }
@media (max-width: 640px) { .content-panel { padding: 1.8rem 1.3rem; border-radius: 16px; margin-block-start: 1.6rem; } }
/* Standalone form on a panel (appointment): centered, comfortable reading
   width instead of a lone left-aligned form leaving the right half empty. */
.form-panel { max-width: 760px; margin-inline: auto; margin-block-start: 0; }
.prose > * + * { margin-block-start: 1.3rem; }
.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--pine-900); line-height: 1.25; margin-block-start: 2.2rem; }
.prose h1 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.prose h3 { font-size: 1.3rem; }
.prose h4 { font-size: 1.1rem; font-family: var(--ff-b); font-weight: 700; }
.prose p { color: var(--ink); }
.prose a { color: var(--teal-600); font-weight: 700; border-block-end: 1.5px solid var(--clay); }
.prose a:hover { color: var(--pine-900); }
.prose strong { color: var(--pine-900); }
.prose ul, .prose ol { padding-inline-start: 1.4rem; display: grid; gap: .5rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose ul ul, .prose ol ol, .prose ul ol, .prose ol ul { margin-block-start: .5rem; }
.prose blockquote {
  border-inline-start: 3px solid var(--gold);
  padding-inline-start: 1.4rem;
  font-family: var(--ff-d);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.1rem;
}
/* Table of contents ("İçindekiler") carried over from the legacy articles.
   Its links are in-page anchors; scroll-behavior below makes them glide
   rather than jump. */
.prose .toc-box {
  background: var(--sky-50); border: 1px solid var(--line);
  border-inline-start: 4px solid var(--teal-600);
  border-radius: 14px; padding: 1.2rem 1.4rem; margin-block: 1.8rem;
}
.prose .toc-box h2 { font-size: 1.1rem; margin-block: 0 .6rem; color: var(--pine-900); }
.prose .toc-box ul { margin: 0; padding-inline-start: 1.1rem; }
.prose .toc-box li { margin-block: .35rem; }
.prose .toc-box a { color: var(--pine-800); text-decoration: none; border-block-end: 1px solid transparent; }
.prose .toc-box a:hover { border-block-end-color: var(--teal-600); }

/* Anchor targets: offset so a linked heading is not hidden under the
   sticky header once scrolled to. */
.prose :is(h2, h3, h4)[id] { scroll-margin-block-start: calc(var(--chrome-h, 132px) + 1rem); }

/* Podcast / video embeds inside article bodies. */
.prose iframe {
  display: block; width: 100%; border: 0; border-radius: 12px;
  margin-block: 1.6rem;
}
.prose iframe[src*="spotify"] { height: 152px; }
.prose iframe[src*="youtube"], .prose iframe[src*="vimeo"] { aspect-ratio: 16 / 9; height: auto; }

/* Article figures recovered from the legacy site sit inline between
   paragraphs; give them room and centre them rather than letting them butt
   against the text. */
.prose img {
  border-radius: 18px; box-shadow: var(--sh);
  margin-inline: auto; margin-block: 1.8rem;
  height: auto;
}
.prose figure { display: grid; gap: .6rem; }
.prose figcaption { text-align: center; font-size: .82rem; color: var(--ink-soft); }
.prose hr { border: 0; border-block-start: 1px solid var(--line); margin-block: 2rem; }
.prose code { background: var(--teal-100); color: var(--pine-900); padding: .15em .4em; border-radius: 5px; font-size: .92em; }
.prose pre { background: var(--pine-900); color: var(--cream); padding: 1.2rem; border-radius: 14px; overflow-x: auto; }
.prose pre code { background: none; color: inherit; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.prose caption { caption-side: top; text-align: start; font-weight: 700; color: var(--pine-900); margin-block-end: .6rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: .7rem .9rem; text-align: start; }
.prose th { background: var(--teal-100); color: var(--pine-900); font-family: var(--ff-d); font-weight: 600; }
.prose tbody tr:nth-child(even) { background: var(--paper); }
.table-scroll { overflow-x: auto; }

/* ---------- pagination ---------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-block-start: 3rem; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 42px;
  height: 42px;
  padding-inline: .6rem;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: .9rem;
  border: 1.5px solid var(--line);
  color: var(--ink);
}
.pagination a:hover { border-color: var(--teal-600); color: var(--teal-600); }
.pagination .current { background: var(--pine-900); border-color: var(--pine-900); color: var(--cream); }
.pagination .disabled { opacity: .4; pointer-events: none; }
.pagination .prev, .pagination .next { border-radius: 999px; padding-inline: 1.1rem; }

/* ---------- forms ---------- */
.form-grid { display: grid; gap: 1.3rem; margin-block-start: 1.6rem; }
.form-row { display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.field { display: grid; gap: .45rem; }
.field label { font-weight: 700; font-size: .88rem; color: var(--pine-900); }
.field .hint { font-size: .78rem; color: var(--ink-soft); }
.field .required { color: var(--clay); margin-inline-start: .2rem; }

.input, select.input, textarea.input {
  width: 100%;
  font: inherit;
  font-family: var(--ff-b);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: .8rem 1rem;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.input::placeholder { color: #9aa9a3; }
.input:focus {
  border-color: var(--teal-600);
  outline: none;
  box-shadow: 0 0 0 4px var(--teal-100);
}
textarea.input { resize: vertical; min-height: 140px; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 1.3rem) center, calc(100% - 1rem) center; background-size: .35rem .35rem; background-repeat: no-repeat; padding-inline-end: 2.2rem; }
[dir="rtl"] select.input { background-position: 1.3rem center, 1rem center; }

.field.has-error .input { border-color: #c0392b; box-shadow: 0 0 0 4px rgba(192, 57, 43, .12); }
.field .error-msg { font-size: .8rem; color: #c0392b; font-weight: 700; }

.checkbox-row, .radio-row { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; color: var(--ink-soft); }
.checkbox-row input, .radio-row input { margin-block-start: .2rem; accent-color: var(--teal-600); }

/* honeypot — visually hidden, kept out of tab order */
.hp-field {
  position: absolute !important;
  inset-inline-start: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.form-actions { display: flex; gap: 1rem; align-items: center; margin-block-start: .6rem; }

/* flash / alert messages */
.alert { border-radius: 14px; padding: 1rem 1.3rem; font-size: .92rem; display: flex; gap: .7rem; align-items: flex-start; }
.alert-success { background: var(--teal-100); color: var(--pine-900); border: 1px solid var(--teal-600); }
.alert-error { background: #fbe7e4; color: #7c2418; border: 1px solid #c0392b; }
.alert-info { background: var(--cream-2); color: var(--ink); border: 1px solid var(--line); }

/* ---------- lightbox ---------- */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(3, 105, 161, .93);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
}
.lightbox-overlay.open { display: flex; }
.lightbox-content { position: relative; max-width: min(1100px, 92vw); max-height: 92vh; width: 100%; }
.lightbox-content img, .lightbox-content iframe {
  width: 100%;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 16px;
  background: #000;
  border: 0;
}
.lightbox-content iframe { aspect-ratio: 16/9; max-height: none; height: auto; }
.lightbox-close {
  position: absolute;
  top: -46px;
  inset-inline-end: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--pine-900);
  font-size: 1.3rem;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.lightbox-caption { color: var(--cream-2); text-align: center; margin-block-start: .8rem; font-size: .9rem; }

/* ---------- filter tabs (press channel filter) ---------- */
.tabs { display: flex; gap: .7rem; flex-wrap: wrap; margin-block-start: 2rem; }
.tabs a {
  padding: .55rem 1.3rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  font-weight: 700;
  font-size: .86rem;
  color: var(--ink-soft);
}
.tabs a:hover { border-color: var(--teal-600); color: var(--teal-600); }
.tabs a.on { background: var(--pine-900); border-color: var(--pine-900); color: var(--cream); }

/* ---------- video grid (press) ---------- */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.6rem; margin-block-start: 2rem; }
.video-card {
  display: block;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  transition: transform .25s, box-shadow .25s, border-color .25s;
  cursor: pointer;
}
.video-card:hover, .video-card:focus-visible { transform: translateY(-6px); box-shadow: var(--sh); border-color: var(--teal-600); }
.video-card .thumb-wrap { position: relative; aspect-ratio: 16/9; background: var(--pine-900); }
.video-card .thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }
.video-card .play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.video-card .play span {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(248, 250, 252, .92);
  color: var(--pine-900);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  transition: transform .25s;
}
.video-card:hover .play span, .video-card:focus-visible .play span { transform: scale(1.08); }
.video-card .body { padding: 1rem 1.2rem 1.2rem; }
.video-card h3 { font-size: 1rem; color: var(--pine-900); line-height: 1.4; }
.video-card .chan { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--clay); font-weight: 700; display: block; margin-block-end: .4rem; }

/* ---------- homepage widget strips (certificates / videos) ---------- */
.cert-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 220px);
  gap: 1.2rem;
  margin-block-start: 2rem;
  overflow-x: auto;
  padding-block-end: .5rem;
  scroll-snap-type: x proximity;
}
.cert-strip-item {
  display: block;
  scroll-snap-align: start;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--sh);
  transition: transform .25s, border-color .25s;
}
.cert-strip-item:hover, .cert-strip-item:focus-visible { transform: translateY(-6px); border-color: var(--teal-600); }
.cert-strip-item img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }

.video-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 300px);
  gap: 1.4rem;
  margin-block-start: 2rem;
  overflow-x: auto;
  padding-block-end: .5rem;
  scroll-snap-type: x proximity;
}
.video-strip-item {
  display: block;
  scroll-snap-align: start;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.video-strip-item:hover, .video-strip-item:focus-visible { transform: translateY(-6px); box-shadow: var(--sh); border-color: var(--teal-600); }
.video-strip-item .thumb-wrap { position: relative; aspect-ratio: 16/9; background: var(--pine-900); }
.video-strip-item .thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }
.video-strip-item .play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.video-strip-item .play span {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(248, 250, 252, .92);
  color: var(--pine-900);
  display: grid;
  place-items: center;
  font-size: 1rem;
  transition: transform .25s;
}
.video-strip-item:hover .play span, .video-strip-item:focus-visible .play span { transform: scale(1.08); }
.video-strip-item .body { padding: .9rem 1.1rem 1.1rem; }
.video-strip-item h3 { font-size: .95rem; color: var(--pine-900); line-height: 1.4; }

@media (max-width: 640px) {
  .cert-strip { grid-auto-columns: minmax(150px, 180px); gap: .9rem; }
  .video-strip { grid-auto-columns: minmax(210px, 260px); gap: 1rem; }
}

/* ---------- gallery (masonry-ish via CSS columns) ---------- */
.gallery-block + .gallery-block { margin-block-start: 3.5rem; }
.gallery-grid { columns: 3 260px; column-gap: 1.2rem; margin-block-start: 1.6rem; }
.gallery-grid a {
  display: block;
  break-inside: avoid;
  margin-block-end: 1.2rem;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sh);
  border: 1px solid var(--line);
}
.gallery-grid img { width: 100%; display: block; transition: transform .3s; }
.gallery-grid a:hover img, .gallery-grid a:focus-visible img { transform: scale(1.04); }
@media (max-width: 720px) { .gallery-grid { columns: 2 180px; } }
@media (max-width: 480px) { .gallery-grid { columns: 1; } }

/* ---------- contact / info blocks ---------- */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-block-start: 2rem; align-items: start; }
.map-frame { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh); }
.map-frame iframe { width: 100%; height: 320px; border: 0; display: block; }
@media (max-width: 860px) { .info-grid { grid-template-columns: 1fr; } }

/* ---------- contact ---------- */
.contact-cards { display: flex; flex-direction: column; gap: 1rem; }
.contact-card { display: flex; gap: 1rem; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem; transition: border-color .2s; }
.contact-card:hover { border-color: var(--teal-600); }
.contact-card .ico { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: var(--teal-100); display: grid; place-items: center; font-size: 1.3rem; }
.contact-card h3 { font-size: .95rem; color: var(--pine-900); margin-block-end: .25rem; }
.contact-card p { color: var(--ink-soft); font-size: .92rem; margin: 0; }
.contact-card a { color: var(--teal-600); }
.contact-card a:hover { text-decoration: underline; }
.contact-map { padding-block: 2.5rem 0; }
.contact-map .map-frame { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.contact-map .map-frame iframe { width: 100%; height: 420px; border: 0; display: block; }
@media (max-width: 640px) {
  .contact-map .map-frame iframe { height: 300px; }
}

/* ---------- error pages (404/410) ---------- */
.error-page { padding: 6rem 0; text-align: center; }
.error-page .code { font-family: var(--ff-d); font-style: italic; font-size: 5rem; color: var(--gold); line-height: 1; }
.error-page h1 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); color: var(--pine-900); margin-block-start: .6rem; }
.error-page p { color: var(--ink-soft); margin-block-start: 1rem; max-width: 42rem; margin-inline: auto; }
.error-page .acts { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-block-start: 2rem; }

/* ---------- misc utility ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.text-center { text-align: center; }
.mt-lg { margin-block-start: 3rem; }

/* ---------- FAQ accordion ---------- */
.faq-group + .faq-group { margin-block-start: 3rem; }
.faq-group-title {
  font-family: var(--ff-d);
  font-size: 1.4rem;
  color: var(--pine-900);
  margin-block-end: 1.2rem;
  padding-block-end: .6rem;
  border-block-end: 1px solid var(--line);
}
.faq-list { display: grid; gap: 1rem; margin-block-start: 1.6rem; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.faq-item:has(.faq-q[aria-expanded="true"]) {
  border-color: var(--teal-600);
  box-shadow: var(--sh);
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  background: transparent;
  border: 0;
  text-align: start;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--pine-900);
  cursor: pointer;
}
.faq-q::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-inline-end: 2px solid var(--teal-600);
  border-block-end: 2px solid var(--teal-600);
  transform: rotate(45deg);
  transition: transform .25s ease;
}
.faq-q[aria-expanded="true"]::after { transform: rotate(-135deg); }
.faq-q:hover, .faq-q:focus-visible { color: var(--teal-600); }
.faq-q:focus-visible { outline: 2px solid var(--teal-600); outline-offset: -2px; }
.faq-a {
  padding: 0 1.4rem 1.2rem;
  color: var(--ink-soft);
  line-height: 1.7;
  animation: faq-open .22s ease;
}
.faq-a p + p { margin-block-start: .8rem; }
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- about (Hakkımda) ---------- */
.about-intro { padding-block: 3.5rem 1rem; }
.about-intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.about-intro-text .lead { margin: 1.2rem 0 1.8rem; color: var(--ink-soft); font-size: 1.08rem; max-width: 34rem; }
.about-photo { justify-self: center; }
.about-stats { padding-block: 1.5rem 2.5rem; }
.about-stats .creds { display: flex; flex-wrap: wrap; justify-content: center; gap: 3rem; }
.about-bio { padding-block: 2.5rem; }
.about-expertise { padding-block: 3rem; background: var(--paper); }
.expertise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-block-start: 2.4rem; }
.exp-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.6rem; text-align: center; transition: transform .25s, box-shadow .25s; }
.exp-card:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.exp-card .ico { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; background: var(--teal-100); display: grid; place-items: center; font-size: 1.7rem; }
.exp-card h3 { font-size: 1.1rem; color: var(--pine-900); margin-block-end: .5rem; }
.exp-card p { color: var(--ink-soft); font-size: .92rem; }
.about-approach { padding-block: 3rem; }
.approach-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; margin-block-start: 2rem; }
.approach-item { padding: 1.4rem 1.6rem; border-inline-start: 3px solid var(--clay); background: var(--cream-2); border-start-start-radius: 0; border-end-start-radius: 0; border-start-end-radius: 12px; border-end-end-radius: 12px; }
.approach-item h3 { font-size: 1.05rem; color: var(--pine-900); margin-block-end: .4rem; }
.approach-item p { color: var(--ink-soft); font-size: .92rem; }
.about-career { padding-block: 3rem 4rem; }
.career-timeline { margin-block-start: 2rem; padding-inline-start: 1.6rem; border-inline-start: 2px solid var(--teal-100); display: flex; flex-direction: column; gap: 1.3rem; }
.career-timeline li { position: relative; color: var(--ink); }
.career-timeline li::before { content: ""; position: absolute; inset-inline-start: -2.05rem; top: .45rem; width: 12px; height: 12px; border-radius: 50%; background: var(--teal-600); border: 2px solid var(--cream); }
@media (max-width: 900px) {
  .about-intro-grid { grid-template-columns: 1fr; }
  .expertise-grid { grid-template-columns: 1fr; }
  .approach-grid { grid-template-columns: 1fr; }
}

/* ---------- kurumsal sub-page nav ---------- */
.kurumsal-nav { display: flex; flex-wrap: wrap; gap: .6rem; margin-block: 1.6rem 2.4rem; }
.kurumsal-nav a { padding: .5rem 1.1rem; border-radius: 999px; border: 1px solid var(--line); font-weight: 700; font-size: .88rem; color: var(--ink); background: #fff; transition: .2s; }
.kurumsal-nav a:hover { border-color: var(--teal-600); color: var(--teal-600); }
.kurumsal-nav a.on { background: var(--pine-900); border-color: var(--pine-900); color: var(--cream); }
@media (max-width: 640px) {
  .kurumsal-nav { flex-wrap: nowrap; overflow-x: auto; padding-block-end: .4rem; }
  .kurumsal-nav a { white-space: nowrap; }
}

/* ---------- count badge ---------- */
.count-badge { display: inline-block; margin-block-start: .8rem; padding: .3rem .9rem; border-radius: 999px; background: var(--teal-100); color: var(--pine-900); font-weight: 700; font-size: .82rem; }

/* ---------- empty state ---------- */
.empty-state { text-align: center; max-width: 480px; margin: 2.5rem auto; padding: 2.5rem 1.5rem; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; }
.empty-icon { width: 76px; height: 76px; margin: 0 auto 1.2rem; border-radius: 50%; background: var(--teal-100); display: grid; place-items: center; font-size: 2rem; }
.empty-state h3 { font-size: 1.2rem; color: var(--pine-900); margin-block-end: .5rem; }
.empty-state p { color: var(--ink-soft); margin-block-end: 1.2rem; }

/* ---------- gallery block title (inline-style yerine) ---------- */
.gallery-block-title { font-size: 1.4rem; color: var(--pine-900); margin-block-end: 1rem; }

/* ---------- home after-hero refinements ---------- */
.about-teaser-h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); color: var(--pine-900); }
.about-teaser-lead { color: var(--ink-soft); margin-block-start: 1rem; }
.about-teaser-cta { margin-block-start: 1.9rem; }
.home-testimonials { padding-block-start: 1rem; }
.home-quote-em { color: var(--gold); }
.home-cta { padding-block-start: 2rem; }
/* staggered reveal for card/strip grids (replaces per-card inline transition-delay) */
.d-cards .d-card.rev:nth-child(2), .card-grid .card.rev:nth-child(2), .video-strip .video-strip-item.rev:nth-child(2), .cert-strip .cert-strip-item.rev:nth-child(2), .faq-list .faq-item.rev:nth-child(2) { transition-delay: .06s; }
.d-cards .d-card.rev:nth-child(3), .card-grid .card.rev:nth-child(3), .video-strip .video-strip-item.rev:nth-child(3), .cert-strip .cert-strip-item.rev:nth-child(3), .faq-list .faq-item.rev:nth-child(3) { transition-delay: .12s; }
.d-cards .d-card.rev:nth-child(4), .card-grid .card.rev:nth-child(4), .cert-strip .cert-strip-item.rev:nth-child(4), .faq-list .faq-item.rev:nth-child(4) { transition-delay: .18s; }
.d-cards .d-card.rev:nth-child(n+5), .cert-strip .cert-strip-item.rev:nth-child(n+5), .faq-list .faq-item.rev:nth-child(n+5) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .d-cards .d-card.rev, .card-grid .card.rev, .video-strip .video-strip-item.rev, .cert-strip .cert-strip-item.rev, .faq-list .faq-item.rev { transition-delay: 0s; }
}

/* ---- cookie consent bar ---- */
.cookie-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  background: var(--pine-900); color: var(--cream);
  box-shadow: 0 -10px 30px -12px rgba(2, 43, 66, .5);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar-in {
  width: min(var(--wrap-w, 1400px), 94%); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem; padding-block: 1rem; flex-wrap: wrap;
}
.cookie-bar p { margin: 0; font-size: .92rem; line-height: 1.5; }
.cookie-bar a { color: var(--cream); text-decoration: underline; }
.cookie-actions { display: flex; gap: .6rem; flex-shrink: 0; }
.cookie-bar .btn { padding-block: .55rem; font-size: .88rem; }
.cookie-bar .btn-ghost {
  background: transparent; color: var(--cream);
  border: 1px solid rgba(255, 255, 255, .45);
}
.cookie-bar .btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.cookie-bar .btn-pine { background: var(--teal-600); color: #fff; }

@media (max-width: 640px) {
  /* Above the sticky mobile bar, not under it. */
  .cookie-bar { bottom: 62px; }
  .cookie-bar-in {
    /* The shared wrap width leaves too little room at phone widths, so the
       buttons overflowed the viewport; give the bar its own padding. */
    width: auto; padding-inline: 1rem;
    flex-direction: column; align-items: stretch; text-align: start;
    gap: .8rem;
  }
  .cookie-bar p { font-size: .85rem; }
  .cookie-actions { justify-content: stretch; }
  .cookie-actions .btn { flex: 1; min-width: 0; }
}

/* Footer logo: the mark is navy-on-transparent, so on the dark footer it
   disappeared. It sits on its own white plate rather than being recoloured,
   which keeps the brand mark exactly as supplied. */
.foot-logo {
  height: 62px; width: auto; max-width: 100%;
  object-fit: contain; display: block;
  background: #fff;
  padding: .7rem .9rem;
  border-radius: 14px;
  box-sizing: content-box;
  margin-block-end: .9rem;
}