/* =========================================================
   DORUK SMILE — Premium editorial dental clinic site
   Tokens, type scale, layout, motion.
   ========================================================= */

:root{
  /* --- Marka: lacivert + beyaz (Doruk Smile logosundan türetildi) --- */
  --navy:        #282A55;   /* primary navy — metin, primary buton, orta-koyu yüzey */
  --navy-deep:   #1C1D3E;   /* deep navy — büyük koyu section'lar, footer */
  --navy-soft:   #3D3F6B;   /* soft navy — hover, ikincil çizgi, gradient ucu */

  --white:       #FFFFFF;
  --paper:       #FBFBFD;   /* off-white çalışma yüzeyi */
  --bone:        #F2F3F6;   /* cool light gray — ana section zemini */
  --stone:       #E9EAEF;   /* hafif daha koyu soğuk gri — kart içi / grid */

  --logo-gray:   #C6C8CC;   /* fallback avatar, lacivert üstü eyebrow, hairline vurgu */
  --text-gray:   #666A73;   /* açık zeminde ikincil metin / caption (~4.7:1) */
  --muted:       #63666F;   /* mikro / meta metin — açık zeminde AA (~5.2:1) */

  /* metin — --ink lacivert'e eşitlendi, mevcut kullanımlar korunur */
  --ink:         #282A55;
  --ink-70:      rgba(40,42,85,.74);
  --ink-50:      rgba(40,42,85,.52);
  --ink-30:      rgba(40,42,85,.72);   /* dekoratif sıra numaraları (01, 02…) — AA (cool-gray zeminlerde de ≥4.5:1) */

  /* legacy alias'lar (eski bronz/sand referansları için güvenlik) */
  --bronze:      #282A55;
  --bronze-deep: #3D3F6B;
  --sand:        #C6C8CC;

  --line:        rgba(40,42,85,.14);
  --line-soft:   rgba(40,42,85,.07);
  --line-on-navy: rgba(255,255,255,.14);

  /* --- Type --- */
  --display: "Newsreader", serif;
  --body: "Inter", sans-serif;

  /* --- Rhythm --- */
  --section-pad: 114px;
  --container-w: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (max-width: 900px){
  :root{ --section-pad: 80px; }
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
:target,
section[id], .treatment-item[id], .doctor[id]{ scroll-margin-top:88px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{ max-width:100%; height:auto; display:block; }
picture{ display:contents; }
[hidden]{ display:none !important; }
[inert]{ pointer-events:none; }
.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; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; background:none; border:none; cursor:pointer; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:500; color:var(--ink); letter-spacing:-.01em; }
p{ margin:0; }
em{ font-style:italic; color:inherit; font-family:var(--display); }

/* ---------- Focus ---------- */
:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; border-radius:2px; }
body:not(.subpage) .site-header:not(.scrolled) a:focus-visible,
body:not(.subpage) .site-header:not(.scrolled) button:focus-visible,
.hero a:focus-visible,
.deneyim a:focus-visible,
.deneyim button:focus-visible,
.oncesi-sonrasi :focus-visible,
.mobile-nav :focus-visible,
.cta-band :focus-visible,
.site-footer a:focus-visible{ outline-color:var(--white); }

.container{ max-width:var(--container-w); margin:0 auto; padding:0 40px; }
.container-narrow{ max-width:800px; }
@media (max-width:640px){ .container{ padding:0 24px; } }

.section{ padding:var(--section-pad) 0; position:relative; }
.eyebrow{
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--navy); font-weight:600; margin:0 0 14px;
}
.lead{ font-size:19px; color:var(--text-gray); max-width:46ch; line-height:1.7; }

.section-index{
  display:block; font-family:var(--display); font-style:italic;
  font-size:15px; color:var(--ink-30); margin-bottom:10px;
}
.section-index.light{ color:var(--sand); }

.section-head{ margin-bottom:54px; max-width:640px; }
.section-head h2{ font-size:clamp(31px,4.1vw,48px); line-height:1.14; margin-top:8px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.rating-badge{
  margin-top:22px; display:inline-flex; align-items:center; gap:14px;
  font-size:13.5px; color:var(--navy); letter-spacing:.02em;
}
.rating-score{ font-family:var(--display); font-size:clamp(28px,3vw,34px); line-height:1; color:var(--navy); }
.rating-stars{ font-size:15px; letter-spacing:3px; color:var(--navy); }
.rating-meta{ font-size:13px; color:var(--text-gray); letter-spacing:.02em; }

/* ---------- Reveal-on-scroll (progressive enhancement) ----------
   Varsayılan: .reveal öğeleri GÖRÜNÜR ve tam opak (kontrast her zaman geçerli).
   Efekt yalnızca hafif bir "yukarı kayma"dır — opacity kullanılmaz, böylece
   ekran-dışı öğeler bile erişilebilirlik denetiminde doğru kontrasta sahiptir.
   JS yoksa / script.js yüklenmezse hiçbir şey gizlenmez/kaymaz. */
.reveal.reveal-pending{ transform:translateY(18px); }
.reveal.in{
  transform:none;
  transition:transform .7s var(--ease);
}
@media (prefers-reduced-motion: reduce){
  .reveal.reveal-pending{ transform:none; }
  .reveal.in{ transition:none; }
  .hero-media img{ animation:none; transform:none; }
  .hero-scroll span::after{ animation:none; }
  /* Genel: gereksiz hareketi kaldır (menü, sticky CTA, akordeon, hover vb.) */
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 30px; border-radius:999px; font-size:14.5px; font-weight:600;
  letter-spacing:.01em; transition:all .35s var(--ease); white-space:nowrap;
}
.btn-primary{ background:var(--navy); color:var(--white); }
.btn-primary:hover{ background:var(--navy-soft); transform:translateY(-2px); }
.btn-ghost{ color:var(--navy); }
.btn-ghost:hover{ color:var(--navy-soft); }
.btn-outline{ border:1px solid var(--navy); color:var(--navy); }
.btn-outline:hover{ background:var(--navy); color:var(--white); }
.btn-lg{ padding:16px 34px; font-size:15px; }

/* ---------- Scroll progress ---------- */
.scroll-progress{ position:fixed; top:0; left:0; width:100%; height:2px; z-index:999; background:transparent; }
.scroll-progress span{ display:block; height:100%; width:0%; background:var(--navy); transition:width .1s linear; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed; top:0; left:0; width:100%; z-index:500;
  padding:26px 0; transition:all .4s var(--ease);
}
.site-header.scrolled{
  padding:14px 0; background:rgba(251,251,253,.85); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--container-w); margin:0 auto; padding:0 40px;
  display:flex; align-items:center; justify-content:space-between;
}
@media (max-width:640px){ .header-inner{ padding:0 24px; } }

.brand{ font-family:var(--body); font-size:19px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--navy); }
.brand span{ font-family:var(--display); font-weight:500; font-style:italic; letter-spacing:0; text-transform:none; color:var(--navy-soft); margin-left:2px; }

.main-nav{ display:flex; gap:34px; }
.main-nav a{
  font-size:13.5px; color:var(--ink-70); position:relative; padding:4px 0;
  transition:color .3s;
}
.main-nav a:hover{ color:var(--navy); }
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--navy); transition:width .3s var(--ease);
}
.main-nav a:hover::after,
.main-nav a[aria-current]::after{ width:100%; }
.main-nav a[aria-current]{ color:var(--navy); }

.header-actions{ display:flex; align-items:center; gap:18px; }
.phone-link{ font-size:13.5px; color:var(--ink-70); }
.header-actions .btn-primary{ padding:11px 24px; font-size:13px; }

/* Hero üstünde (scroll edilmemiş) — açık kimlik (yalnız ana sayfa) */
body:not(.subpage) .site-header:not(.scrolled) .brand,
body:not(.subpage) .site-header:not(.scrolled) .brand span,
body:not(.subpage) .site-header:not(.scrolled) .main-nav a,
body:not(.subpage) .site-header:not(.scrolled) .phone-link{ color:var(--white); }
body:not(.subpage) .site-header:not(.scrolled) .main-nav a::after{ background:var(--white); }
body:not(.subpage) .site-header:not(.scrolled) .menu-toggle span{ background:var(--white); }
body:not(.subpage) .site-header:not(.scrolled) .header-actions .btn-primary{ background:var(--white); color:var(--navy); }
body:not(.subpage) .site-header:not(.scrolled) .header-actions .btn-primary:hover{ background:var(--paper); }

/* Alt sayfalarda header her zaman katı */
body.subpage .site-header{
  background:rgba(251,251,253,.9); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); padding:16px 0;
}
body.subpage .site-header.scrolled{ padding:14px 0; }

.menu-toggle{
  display:none; flex-direction:column; gap:5px; width:26px;
  padding:12px; margin:-12px -12px -12px 0; box-sizing:content-box;
}
.menu-toggle span{ height:1.5px; width:100%; background:var(--navy); transition:all .3s var(--ease); }
.menu-toggle.open span{ background:var(--white); }
.menu-toggle.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; z-index:499; background:var(--navy-deep);
  display:flex; flex-direction:column; justify-content:center; padding:40px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateY(-100%); visibility:hidden;
  transition:transform .5s var(--ease), visibility 0s linear .5s;
}
.mobile-nav.open{
  transform:translateY(0); visibility:visible;
  transition:transform .5s var(--ease), visibility 0s;
}
/* Kısa/yatay viewport'ta tüm linkler erişilebilir kalsın */
@media (max-height:560px){
  .mobile-nav{ justify-content:flex-start; padding:88px 40px 40px; }
  .mobile-nav a{ font-size:22px; padding:11px 0; }
  .mobile-phone{ margin-top:24px; }
}
.mobile-nav nav{ display:flex; flex-direction:column; }
.mobile-nav a{
  font-family:var(--display); font-size:29px; color:var(--white);
  padding:14px 0; border-bottom:1px solid var(--line-on-navy);
}
.mobile-nav nav a:first-child{ border-top:1px solid var(--line-on-navy); }
.mobile-phone{ margin-top:36px; font-size:15px; letter-spacing:.02em; color:var(--logo-gray); }

@media (max-width:900px){
  .main-nav{ display:none; }
  .menu-toggle{ display:flex; }
  .phone-link{ display:none; }
}
@media (max-width:640px){
  .header-actions .btn-primary{ display:none; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; height:100vh; min-height:600px;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
@supports (height:100svh){ .hero{ height:100svh; } }
@supports (height:100dvh){ .hero{ height:100dvh; } }
.hero-media{ position:absolute; inset:0; z-index:1; }
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:82% 38%;
  transform:scale(1.06);
  animation:heroZoom 18s var(--ease) forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(28,29,62,.50) 0%, rgba(28,29,62,0) 22%),
    linear-gradient(102deg, rgba(24,25,54,.98) 0%, rgba(24,25,54,.95) 24%, rgba(25,26,56,.85) 43%, rgba(27,28,60,.55) 59%, rgba(28,29,62,.18) 77%, rgba(28,29,62,0) 92%),
    linear-gradient(180deg, rgba(28,29,62,.10) 0%, rgba(28,29,62,.10) 100%),
    linear-gradient(180deg, rgba(28,29,62,0) 46%, rgba(28,29,62,.62) 100%);
}
@media (max-width:760px){
  .hero-media img{ object-position:72% center; }
  .hero-veil{
    background:
      linear-gradient(180deg, rgba(28,29,62,.44) 0%, rgba(28,29,62,0) 20%),
      linear-gradient(180deg, rgba(28,29,62,.10) 0%, rgba(28,29,62,.18) 34%, rgba(28,29,62,.52) 58%, rgba(28,29,62,.80) 78%, rgba(28,29,62,.92) 100%);
  }
}
.hero-content{
  position:relative; z-index:2; width:100%;
  max-width:var(--container-w); margin:0 auto;
  padding:0 40px 110px; color:var(--paper);
}
@media (max-width:640px){
  .hero-content{ padding:0 24px 84px; }
  .hero-cta{ flex-direction:column; align-items:stretch; gap:12px; }
  .hero-cta .btn{ width:100%; }
}

.hero .eyebrow{ color:var(--logo-gray); }
.hero-title{
  font-size:clamp(43px,6.9vw,88px); line-height:1.03; font-weight:500;
  color:var(--white); max-width:13ch; letter-spacing:-.022em;
}
.hero-title span{ display:block; }
.hero-sub{
  margin-top:28px; font-size:18px; color:rgba(255,255,255,.84);
  max-width:44ch; line-height:1.62;
}
.hero-cta{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }
.hero .btn-ghost{ color:var(--white); }
.hero .btn-ghost:hover{ color:var(--logo-gray); }
.hero .btn-primary{ background:var(--white); color:var(--navy); }
.hero .btn-primary:hover{ background:var(--paper); }
.hero .btn-outline{ border-color:rgba(255,255,255,.55); color:var(--white); }
.hero .btn-outline:hover{ background:var(--white); color:var(--navy); border-color:var(--white); }
.hero-tertiary{
  display:inline-block; margin-top:20px; color:rgba(255,255,255,.82);
  font-size:14px; font-weight:600; letter-spacing:.02em;
}
.hero-tertiary:hover{ color:var(--white); }
.cta-band .btn-ghost{ color:var(--white); }
.cta-band .btn-ghost:hover{ color:var(--logo-gray); }

.hero-scroll{
  position:absolute; right:40px; bottom:44px; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:rgba(255,255,255,.7); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
}
.hero-scroll span{
  width:1px; height:46px; background:rgba(255,255,255,.4); position:relative; overflow:hidden;
}
.hero-scroll span::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--white); animation:scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }
@media (max-width:900px){ .hero-scroll{ display:none; } }

/* =========================================================
   KLİNİĞİMİZ
   ========================================================= */
.klinik{ background:var(--paper); }
.klinik-grid{ display:grid; grid-template-columns:132px 1fr; gap:44px; align-items:start; }
.klinik-index{ padding-top:14px; }
.klinik-index .section-index{ margin-bottom:6px; }
.klinik-copy h2{ font-size:clamp(30px,4.4vw,50px); line-height:1.18; max-width:14ch; }
.klinik-copy .lead{ margin-top:26px; max-width:56ch; }
.klinik-copy > p:not(.lead){ margin-top:20px; max-width:58ch; color:var(--ink-70); font-size:16.5px; }

.klinik-facts{
  margin-top:52px; display:flex; gap:56px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:36px;
}
.klinik-facts > div{ display:flex; flex-direction:column; gap:8px; }
.fact-num{ font-family:var(--display); font-size:40px; color:var(--navy); font-style:italic; }
.fact-label{ font-size:13px; color:var(--text-gray); line-height:1.4; }

@media (max-width:820px){
  .klinik-grid{ grid-template-columns:1fr; gap:20px; }
}

.klinik-mosaic{
  margin-top:56px; display:grid; grid-template-columns:1.4fr 1fr; grid-template-rows:auto auto;
  gap:18px;
}
.klinik-mosaic figure{ margin:0; overflow:hidden; border-radius:4px; }
.klinik-mosaic img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.klinik-mosaic figure:hover img{ transform:scale(1.035); }
.mosaic-large{ grid-row:1 / 3; }
.klinik-mosaic figure:nth-child(2){ grid-column:2; grid-row:1; }
.klinik-mosaic figure:nth-child(3){ grid-column:2; grid-row:2; }

@media (max-width:820px){
  .klinik-mosaic{ grid-template-columns:1fr; grid-template-rows:auto; margin-top:48px; }
  .klinik-mosaic figure{ grid-column:1; grid-row:auto; }
}

/* =========================================================
   UZMAN KADRO
   ========================================================= */
.kadro{ background:var(--white); }
.doctor-list{ display:flex; flex-direction:column; gap:0; }
.doctor{
  display:grid; grid-template-columns:344px 1fr; gap:52px; align-items:start;
  padding:40px 0; border-bottom:1px solid var(--line);
}
.doctor:first-child{ padding-top:0; }
.doctor:last-child{ border-bottom:none; padding-bottom:0; }
.doctor-reverse{ direction:rtl; }
.doctor-reverse > *{ direction:ltr; }

.doctor-media{
  position:relative; aspect-ratio:4/5; border-radius:3px; overflow:hidden;
  background:var(--navy);
}
.doctor-media img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; position:relative; z-index:1; }
.doctor-media.img-fallback img{ display:none; }
.doctor-mono{
  display:none; position:absolute; inset:0; align-items:center; justify-content:center;
  font-family:var(--display); font-style:italic; font-size:60px; color:var(--logo-gray);
}
.doctor-media.img-fallback .doctor-mono{ display:flex; }

.doctor-index{
  display:block; font-family:var(--display); font-style:italic;
  font-size:15px; color:var(--ink-30); margin-bottom:12px;
}
.doctor-role{
  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--navy);
  font-weight:600; margin-bottom:10px; display:flex; align-items:center; gap:12px;
}
.doctor-role::before{ content:""; width:22px; height:1px; background:var(--navy); flex-shrink:0; }
.doctor-info h3{ font-size:clamp(24px,3vw,34px); margin-bottom:14px; color:var(--navy); }
.doctor-info p{ color:var(--text-gray); font-size:16px; max-width:52ch; line-height:1.75; }

@media (max-width:820px){
  .doctor, .doctor-reverse{ grid-template-columns:1fr; gap:24px; direction:ltr; }
  .doctor-media{ max-width:260px; }
}
@media (max-width:600px){
  .doctor, .doctor-reverse{
    grid-template-columns:118px 1fr; gap:16px; align-items:start;
    padding:24px 0;
  }
  .doctor-media{ max-width:none; aspect-ratio:4/5; }
  .doctor-index{ margin-bottom:6px; font-size:13px; }
  .doctor-role{
    display:block; margin-bottom:8px; font-size:10px; letter-spacing:.06em; line-height:1.55;
  }
  .doctor-role::before{ display:none; }
  .doctor-info h3{ font-size:19px; margin-bottom:10px; }
  .doctor-info p{ font-size:13.5px; line-height:1.6; }
}
@media (max-width:380px){
  .doctor, .doctor-reverse{ grid-template-columns:1fr; }
  .doctor-media{ max-width:150px; }
}

/* =========================================================
   TEDAVİLER — editorial accordion list
   ========================================================= */
.tedaviler{ background:var(--bone); }
.treatment-list{ border-top:1px solid var(--line); }
.treatment-item{ border-bottom:1px solid var(--line); }
.treatment-trigger{
  width:100%; display:flex; align-items:center; gap:28px;
  padding:30px 0; text-align:left;
}
.t-num{ font-family:var(--display); font-style:italic; color:var(--ink-30); font-size:16px; width:32px; flex-shrink:0; }
.t-name{
  font-family:var(--display); font-size:clamp(20px,2.6vw,28px); font-weight:500;
  color:var(--navy); flex:1; transition:color .3s;
}
.treatment-trigger:hover .t-name{ color:var(--navy-soft); }
.t-icon{
  width:22px; height:22px; position:relative; flex-shrink:0;
}
.t-icon::before,.t-icon::after{
  content:""; position:absolute; background:var(--navy); transition:transform .4s var(--ease);
}
.t-icon::before{ top:50%; left:0; width:100%; height:1px; transform:translateY(-50%); }
.t-icon::after{ left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
.treatment-item[data-open="true"] .t-icon::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }

/* JS yoksa panel açık kalır ve okunur; JS varsa daraltılır (CLS'siz) */
.treatment-panel{ overflow:hidden; }
.treatment-panel.panel-collapsible{ transition:max-height .5s var(--ease); }
@media (scripting: enabled){ .treatment-panel{ max-height:0; } }
.treatment-panel p{
  padding:0 0 30px 60px; max-width:62ch; color:var(--text-gray); font-size:16.5px; line-height:1.75;
}
@media (max-width:640px){
  .treatment-panel p{ padding-left:0; }
  .treatment-trigger{ gap:16px; }
}

/* =========================================================
   ÖNCESİ / SONRASI — drag compare
   ========================================================= */
.oncesi-sonrasi{ background:var(--navy); color:var(--white); }
.oncesi-sonrasi .eyebrow{ color:var(--logo-gray); }
.oncesi-sonrasi .section-head h2{ color:var(--white); }
.oncesi-sonrasi .section-index{ color:var(--logo-gray); }
.compare{ max-width:760px; margin:0 auto; }
.compare-mat{
  background:var(--white); padding:7px; border-radius:7px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 40px 84px -40px rgba(0,0,0,.58);
}
.compare-frame{
  position:relative; width:100%; aspect-ratio:3/2; border-radius:3px; overflow:hidden;
  cursor:ew-resize; user-select:none; touch-action:none;
}
.compare-frame img{ width:100%; height:100%; object-fit:cover; }
.compare-after{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.compare-before-wrap{
  position:absolute; inset:0; overflow:hidden;
  clip-path:inset(0 50% 0 0);
}
.compare-before-wrap img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; max-width:none;
}
.compare-handle{
  position:absolute; top:0; bottom:0; left:50%; width:0;
  display:flex; align-items:center; justify-content:center;
  transform:translateX(-50%);
}
.compare-line{ position:absolute; top:0; bottom:0; width:2px; background:var(--white); }
.compare-grip{
  position:relative; z-index:2; width:44px; height:44px; flex-shrink:0; border-radius:50%;
  background:var(--white); display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--navy); box-shadow:0 8px 20px rgba(0,0,0,.35);
  outline:3px solid rgba(255,255,255,.35); outline-offset:0;
}
.compare-frame:focus-visible{ outline:2px solid var(--white); outline-offset:4px; }
.compare-tag{
  position:absolute; top:16px; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  background:rgba(28,29,62,.62); color:var(--white); padding:6px 12px; border-radius:999px; z-index:3;
}
.compare-tag-left{ left:16px; }
.compare-tag-right{ right:16px; }
.compare-note{ margin-top:22px; font-size:13.5px; color:rgba(255,255,255,.55); text-align:center; }

/* =========================================================
   TEKNOLOJİ
   ========================================================= */
.teknoloji{ background:var(--paper); }
.tech-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; margin-bottom:80px; }
.tech-copy h2{ font-size:clamp(30px,4vw,44px); margin:6px 0 20px; line-height:1.18; }
.tech-media{ border-radius:4px; overflow:hidden; aspect-ratio:5/4; }
.tech-media img{ width:100%; height:100%; object-fit:cover; }

.tech-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(40,42,85,.20); border:1px solid rgba(40,42,85,.20); }
.tech-item{ background:var(--paper); padding:36px 30px; }
.tech-num{ font-family:var(--display); font-style:italic; color:var(--navy); font-size:15px; }
.tech-item h3{ font-size:19px; margin:16px 0 12px; color:var(--navy); }
.tech-item p{ font-size:14.5px; color:var(--text-gray); line-height:1.65; }

@media (max-width:900px){
  .tech-grid{ grid-template-columns:1fr; gap:36px; }
  .tech-list{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .tech-list{ grid-template-columns:1fr; }
}

/* =========================================================
   HASTA DENEYİMİ
   ========================================================= */
.deneyim{ background:var(--navy-deep); color:var(--white); }
.deneyim .eyebrow{ color:var(--logo-gray); }
.deneyim .section-head h2{ color:var(--white); }
.deneyim .section-index,
.deneyim .section-index.light{ color:var(--logo-gray); }

.deneyim-media{
  margin:0 0 64px; max-width:640px; border-radius:4px; overflow:hidden;
  position:relative; border:1px solid rgba(255,255,255,.16);
}
.deneyim-media img{ width:100%; height:100%; object-fit:cover; max-height:420px; }
.deneyim-media figcaption{
  position:absolute; left:0; bottom:0; padding:10px 16px;
  background:rgba(28,29,62,.6); color:var(--white); font-size:12px;
  letter-spacing:.04em;
}

.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.14); border-top:1px solid rgba(255,255,255,.14); }
.process-step{ padding:44px 30px 0; }
.process-num{ font-family:var(--display); font-style:italic; color:var(--logo-gray); font-size:16px; }
.process-step h3{ color:var(--white); font-size:20px; margin:18px 0 12px; }
.process-step p{ color:rgba(255,255,255,.68); font-size:14.5px; line-height:1.7; max-width:32ch; }

@media (max-width:900px){
  .process{ grid-template-columns:1fr 1fr; row-gap:44px; }
}
@media (max-width:560px){
  .process{ grid-template-columns:1fr; }
}

/* =========================================================
   YORUMLAR
   ========================================================= */
.yorumlar{ background:var(--white); }
.testimonial-track{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:rgba(40,42,85,.16); border:1px solid rgba(40,42,85,.16);
}
.testimonial{ background:var(--white); padding:46px 38px; margin:0; }
.testimonial blockquote{
  margin:0; font-family:var(--display); font-style:italic; font-size:22px; line-height:1.5; color:var(--navy);
}
.testimonial figcaption{ margin-top:24px; font-size:13px; color:var(--text-gray); letter-spacing:.03em; }
.source-note{ margin-top:22px; text-align:center; font-size:12.5px; color:var(--muted); }

@media (max-width:820px){ .testimonial-track{ grid-template-columns:1fr; } }

/* =========================================================
   SSS
   ========================================================= */
.sss{ background:var(--bone); }
.faq-list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:26px 0; text-align:left; font-size:17px; font-weight:500; color:var(--navy);
}
.faq-icon{ width:18px; height:18px; position:relative; flex-shrink:0; }
.faq-icon::before,.faq-icon::after{ content:""; position:absolute; background:var(--navy); transition:transform .35s var(--ease); }
.faq-icon::before{ top:50%; left:0; width:100%; height:1px; transform:translateY(-50%); }
.faq-icon::after{ left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
.faq-item[data-open="true"] .faq-icon::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.faq-panel{ overflow:hidden; }
.faq-panel.panel-collapsible{ transition:max-height .45s var(--ease); }
@media (scripting: enabled){ .faq-panel{ max-height:0; } }
.faq-panel p{ padding:0 34px 26px 0; color:var(--text-gray); font-size:15.5px; line-height:1.7; }

/* =========================================================
   RANDEVU
   ========================================================= */
.randevu{ background:var(--paper); }
.randevu-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:70px; }
.randevu-copy h2{ font-size:clamp(30px,4.4vw,48px); margin:6px 0 20px; line-height:1.16; }
.randevu-actions{ margin-top:36px; display:flex; gap:16px; flex-wrap:wrap; }

.randevu-info{ display:grid; grid-template-columns:1fr 1fr; gap:32px 28px; align-content:start; }
.info-block{ border-top:1px solid var(--line); padding-top:18px; }
.info-label{ display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); font-weight:600; margin-bottom:10px; }
.info-block p{ font-size:15px; color:var(--text-gray); line-height:1.6; }
.info-block a:hover{ color:var(--navy); }

@media (max-width:820px){
  .randevu-grid{ grid-template-columns:1fr; gap:44px; }
  .randevu-info{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
  .randevu-info{ grid-template-columns:1fr; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--navy-deep); color:rgba(255,255,255,.62); padding:80px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:60px; border-bottom:1px solid var(--line-on-navy); }
.footer-brand .brand,
.footer-brand .brand span{ color:var(--white); }
.footer-brand p{ margin-top:16px; font-size:14px; max-width:30ch; line-height:1.7; color:rgba(255,255,255,.55); }
.footer-col{ display:flex; flex-direction:column; gap:12px; font-size:14px; }
.footer-col a, .footer-col span{ color:rgba(255,255,255,.62); }
.footer-heading{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--logo-gray); margin-bottom:8px; }
.footer-col a:hover{ color:var(--white); }
.footer-hours{ color:rgba(255,255,255,.62); font-size:13px; line-height:1.6; }
.footer-bottom{ padding-top:26px; font-size:12.5px; color:rgba(255,255,255,.62); }
.footer-legal{
  display:flex; flex-wrap:wrap; gap:8px 20px; margin-bottom:14px;
  font-size:12.5px;
}
.footer-legal a{ color:rgba(255,255,255,.68); }
.footer-legal a:hover{ color:var(--white); }
.footer-disclaimer{ margin-top:10px; max-width:62ch; color:rgba(255,255,255,.58); line-height:1.6; }
.branch-note{ color:var(--muted); }

@media (max-width:820px){
  .footer-grid{ grid-template-columns:1fr 1fr; row-gap:36px; }
}
@media (max-width:480px){
  .footer-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  /* mobil sticky CTA çubuğunun altında içerik kalmasın */
  .site-footer{ padding-bottom:96px; }
}

/* =========================================================
   WHATSAPP FLOAT
   ========================================================= */
.wa-float{
  position:fixed; right:26px; bottom:26px; z-index:400;
  width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 26px rgba(37,211,102,.35); transition:transform .3s var(--ease);
}
.wa-float:hover{ transform:translateY(-3px) scale(1.04); }

/* =========================================================
   MOBİL STICKY CTA
   ========================================================= */
.mobile-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:450;
  display:none; gap:10px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:var(--paper); border-top:1px solid var(--line);
  transform:translateY(110%); visibility:hidden;
  transition:transform .4s var(--ease), visibility 0s linear .4s;
}
.mobile-cta.show{
  transform:translateY(0); visibility:visible;
  transition:transform .4s var(--ease), visibility 0s;
}
.mobile-cta a{
  height:48px; display:flex; align-items:center; justify-content:center; gap:8px;
  border-radius:999px; font-size:14.5px; font-weight:600; letter-spacing:.01em;
}
.mobile-cta-primary{ flex:1; background:var(--navy); color:var(--white); }
.mobile-cta-wa{ flex:0 0 auto; padding:0 22px; border:1px solid var(--navy); color:var(--navy); }
.mobile-cta-wa svg{ width:18px; height:18px; }

@media (max-width:640px){
  .mobile-cta{ display:flex; }
  .wa-float{ display:none; }
}

/* =========================================================
   ÇOK SAYFALI YAPI — ortak bileşenler
   ========================================================= */

/* ---------- Alt sayfa editorial giriş ---------- */
.page-intro{ padding:132px 0 56px; background:var(--paper); }
.page-intro .container{ max-width:920px; }
.page-intro .eyebrow{ margin-bottom:0; }
.page-intro h1{
  font-family:var(--display); font-weight:500; color:var(--navy);
  font-size:clamp(34px,5vw,58px); line-height:1.08; letter-spacing:-.02em;
  max-width:17ch; margin-top:6px;
}
.page-intro h1 em{ color:inherit; }
.page-intro .lead{ margin-top:22px; max-width:54ch; }
.page-intro + .section{ padding-top:24px; }
@media (max-width:640px){ .page-intro{ padding:106px 0 40px; } }

/* ---------- "Tümünü gör" linki ---------- */
.more-link{
  display:inline-flex; align-items:center; gap:9px; margin-top:44px;
  font-size:14px; font-weight:600; letter-spacing:.02em; color:var(--navy);
}
.more-link::after{ content:"→"; transition:transform .3s var(--ease); }
.more-link:hover::after{ transform:translateX(4px); }
.section-head .more-link{ margin-top:20px; }
.oncesi-sonrasi .more-link,
.deneyim .more-link,
.cta-band .more-link{ color:var(--white); }

/* ---------- Tedavi teaser (ana sayfa) ---------- */
.treatment-teaser{ border-top:1px solid var(--line); }
.treatment-teaser a{
  display:flex; align-items:center; gap:24px; padding:25px 0;
  border-bottom:1px solid var(--line); transition:padding-left .3s var(--ease);
}
.treatment-teaser a:hover{ padding-left:8px; }
.treatment-teaser .tt-num{
  font-family:var(--display); font-style:italic; color:var(--ink-30);
  font-size:15px; width:30px; flex-shrink:0;
}
.treatment-teaser .tt-name{
  font-family:var(--display); font-size:clamp(19px,2.3vw,25px); font-weight:500;
  color:var(--navy); flex:1;
}
.treatment-teaser .tt-arrow{ color:var(--navy); transition:transform .3s var(--ease); flex-shrink:0; }
.treatment-teaser a:hover .tt-arrow{ transform:translateX(4px); }
@media (max-width:640px){ .treatment-teaser a{ gap:14px; } }

/* ---------- Ana sayfa: teknoloji + deneyim birleşik ---------- */
.home-brief{ background:var(--bone); }
.home-brief-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.home-brief-media{ border-radius:4px; overflow:hidden; aspect-ratio:4/5; }
.home-brief-media img{ width:100%; height:100%; object-fit:cover; }
.home-brief h2{ font-size:clamp(28px,3.6vw,40px); line-height:1.16; margin:8px 0 18px; color:var(--navy); }
.home-brief-points{ margin-top:26px; display:flex; flex-direction:column; gap:20px; border-top:1px solid var(--line); padding-top:24px; }
.home-brief-points > div{ display:grid; grid-template-columns:32px 1fr; gap:14px; }
.hb-num{ font-family:var(--display); font-style:italic; color:var(--navy); font-size:15px; }
.home-brief-points h3{ font-size:16px; margin-bottom:4px; color:var(--navy); }
.home-brief-points p{ font-size:14.5px; color:var(--text-gray); line-height:1.6; max-width:44ch; }
@media (max-width:820px){
  .home-brief-grid{ grid-template-columns:1fr; gap:34px; }
  .home-brief-media{ aspect-ratio:16/10; }
}

/* ---------- CTA band (tüm sayfalar) ---------- */
.cta-band{ background:var(--navy); color:var(--white); text-align:center; }
.cta-band .container{ max-width:720px; }
.cta-band .eyebrow{ color:var(--logo-gray); }
.cta-band h2{ color:var(--white); font-size:clamp(28px,4vw,44px); line-height:1.14; margin:8px 0 0; }
.cta-band h2 em{ color:inherit; }
.cta-band p{ margin:18px auto 0; max-width:44ch; color:rgba(255,255,255,.78); font-size:17px; line-height:1.6; }
.cta-band .cta-actions{ margin-top:34px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta-band .btn-primary{ background:var(--white); color:var(--navy); }
.cta-band .btn-primary:hover{ background:var(--paper); }
.cta-band .btn-outline{ border-color:rgba(255,255,255,.5); color:var(--white); }
.cta-band .btn-outline:hover{ background:var(--white); color:var(--navy); border-color:var(--white); }
@media (max-width:520px){
  .cta-band .cta-actions{ flex-direction:column; align-items:stretch; }
  .cta-band .cta-actions .btn{ width:100%; }
}

/* ---------- İletişim sayfası ---------- */
.contact-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:start; }
.contact-grid .randevu-info{ grid-template-columns:1fr; gap:26px; }
.contact-actions{ display:flex; flex-direction:column; gap:14px; max-width:400px; margin-top:34px; }
.contact-actions .btn{ width:100%; white-space:normal; text-align:center; padding-left:20px; padding-right:20px; }
.contact-note{ margin-top:18px; font-size:13px; color:var(--muted); line-height:1.6; max-width:400px; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; gap:40px; } }

/* ---------- Öncesi/Sonrası galeri ---------- */
.case-gallery{ display:flex; flex-direction:column; gap:56px; }

/* ---------- Sayfa bazlı zemin ayarları ---------- */
body.page-clinic .teknoloji{ background:var(--bone); }
.subeler{ background:var(--paper); }
.guven-band{ background:var(--bone); padding:76px 0; }
.guven-band .container{ max-width:720px; text-align:center; }
.guven-band p{ font-size:clamp(19px,2.4vw,24px); font-family:var(--display); font-style:italic; color:var(--navy); line-height:1.5; }

/* ---------- Yasal doküman sayfaları ---------- */
.legal-doc{ background:var(--paper); }
.legal-doc .container{ max-width:760px; }
.legal-doc h2{
  font-family:var(--display); font-weight:500; color:var(--navy);
  font-size:clamp(21px,2.6vw,27px); line-height:1.25; margin:48px 0 14px;
}
.legal-doc h2:first-child{ margin-top:0; }
.legal-doc h3{ font-size:16px; color:var(--navy); margin:26px 0 8px; }
.legal-doc p, .legal-doc li{ font-size:15.5px; color:var(--text-gray); line-height:1.75; }
.legal-doc p + p{ margin-top:12px; }
.legal-doc ul{ list-style:disc; margin:12px 0 12px 20px; }
.legal-doc li{ margin-top:6px; }
.legal-doc a{ color:var(--navy); text-decoration:underline; text-underline-offset:2px; }
.legal-doc .legal-note{
  margin-top:14px; padding:16px 18px; border-left:2px solid var(--line);
  background:var(--bone); font-size:14px; color:var(--muted);
}
.legal-doc .legal-updated{ margin-top:40px; font-size:13px; color:var(--muted); }

/* ---------- 404 ---------- */
.nf-wrap{ min-height:64vh; display:flex; align-items:center; }
.nf-num{ font-family:var(--display); font-style:italic; color:var(--ink-30); font-size:16px; margin-bottom:12px; display:block; }
.nf-wrap h1{ font-family:var(--display); font-weight:500; color:var(--navy); font-size:clamp(34px,5vw,56px); line-height:1.08; letter-spacing:-.02em; }
.nf-wrap p{ margin-top:20px; max-width:48ch; color:var(--text-gray); font-size:16px; line-height:1.7; }
.nf-links{ margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- Şubeler (statik liste) ---------- */
.branch-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px 40px; }
.branch{ border-top:1px solid var(--line); padding-top:20px; }
.branch h3{ font-size:18px; color:var(--navy); margin-bottom:10px; }
.branch p{ font-size:15px; color:var(--text-gray); line-height:1.65; }
@media (max-width:640px){ .branch-grid{ grid-template-columns:1fr; } }

/* =========================================================
   SIZE EN YAKIN ŞUBE (branch finder)
   ========================================================= */
.branch-finder{ background:var(--bone); }

.bf-action{ margin-bottom:52px; max-width:520px; }
.bf-action .btn{ white-space:normal; }
@media (max-width:640px){ .bf-action .btn{ width:100%; } }
.bf-status{
  margin-top:14px; font-size:14px; line-height:1.55; color:var(--navy);
  min-height:0;
}
.bf-status:empty{ display:none; }
.bf-status[data-tone="error"]{ color:var(--bronze-deep); }
.bf-privacy{ margin-top:12px; font-size:12.5px; color:var(--muted); line-height:1.55; }

.branch-list{
  display:grid; grid-template-columns:1fr 1fr; gap:0 44px;
  border-top:1px solid var(--line);
}
.bf-branch{
  padding:32px 0 30px; border-bottom:1px solid var(--line);
}
.bf-branch.is-nearest{ /* vurgu tipografiyle, kutuyla değil */ }
.bf-nearest{
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy); font-weight:600; margin-bottom:12px;
}
.bf-branch h3{ font-size:clamp(20px,2.4vw,24px); color:var(--navy); margin-bottom:12px; }
.bf-addr{ font-size:15px; color:var(--text-gray); line-height:1.65; }
.bf-dist{
  margin-top:12px; font-family:var(--display); font-style:italic;
  font-size:19px; color:var(--navy);
}
.bf-phone{ margin-top:12px; font-size:15px; }
.bf-phone a{ color:var(--text-gray); }
.bf-phone a:hover{ color:var(--navy); }
.bf-hours{ margin-top:8px; font-size:13.5px; color:var(--muted); line-height:1.5; }
.bf-links{ margin-top:20px; display:flex; flex-wrap:wrap; gap:10px 22px; }
.bf-links a{
  font-size:13.5px; font-weight:600; letter-spacing:.01em; color:var(--navy);
  display:inline-flex; align-items:center; gap:7px;
}
.bf-links a::after{ content:"→"; transition:transform .3s var(--ease); }
.bf-links a:hover::after{ transform:translateX(3px); }
.bf-links .bf-wa{ color:var(--navy-soft); }

@media (max-width:760px){
  .branch-list{ grid-template-columns:1fr; }
  .bf-branch{ padding:26px 0 24px; }
  .bf-action{ margin-bottom:36px; }
}

/* =========================================================
   MOBİL ANA SAYFA SIKIŞTIRMA (<=640px, yalnız ana sayfa)
   ========================================================= */
.hide-mobile{ }
@media (max-width:640px){
  .hide-mobile{ display:none; }
}

/* Mobil ana sayfa — agresif sıkıştırma (yalnız <=640px + .page-home) */
@media (max-width:640px){
  .page-home{ --section-pad:58px; }

  /* Hero — sadece gerektiği kadar */
  .page-home .hero-content{ padding-bottom:72px; }
  .page-home .hero-sub{ margin-top:18px; font-size:16.5px; line-height:1.55; }
  .page-home .hero-cta{ margin-top:24px; }
  .page-home .hero-tertiary{ margin-top:14px; }

  /* Genel section başlıkları */
  .page-home .section-head{ margin-bottom:30px; }
  .page-home .section-head h2{ font-size:25px; line-height:1.2; }
  .page-home .section-head .lead{ margin-top:14px; font-size:16px; }

  /* Kliniğimiz önizleme */
  .page-home .klinik-grid{ gap:14px; }
  .page-home .klinik-copy h2{ font-size:26px; line-height:1.2; }
  .page-home .klinik-copy .lead{ font-size:16px; margin-top:16px; }
  .page-home .klinik-facts{ margin-top:26px; gap:20px 32px; padding-top:22px; }
  .page-home .fact-num{ font-size:30px; }
  .page-home .klinik-copy .more-link{ margin-top:24px; }

  /* Uzman kadro önizleme — biyografi yok, kompakt */
  .page-home .kadro .doctor-info p:not(.doctor-role){ display:none; }
  .page-home .kadro .doctor,
  .page-home .kadro .doctor-reverse{ grid-template-columns:96px 1fr; gap:14px; padding:14px 0; }
  .page-home .kadro .doctor-media{ aspect-ratio:1/1; }
  .page-home .kadro .doctor-index{ margin-bottom:4px; }
  .page-home .kadro .doctor-role{ margin-bottom:5px; }
  .page-home .kadro .doctor-info h3{ margin-bottom:0; font-size:18px; }
  .page-home .kadro .more-link{ margin-top:22px; }

  /* Tedaviler teaser */
  .page-home .treatment-teaser a{ padding:18px 0; }
  .page-home .treatment-teaser .tt-name{ font-size:18px; }

  /* Öncesi / Sonrası */
  .page-home .oncesi-sonrasi .section-head{ margin-bottom:26px; }
  .page-home .compare-note{ margin-top:16px; }
  .page-home .oncesi-sonrasi .more-link{ margin-top:20px; }

  /* Teknoloji + Deneyim özeti */
  .page-home .home-brief-grid{ gap:24px; }
  .page-home .home-brief h2{ font-size:25px; }
  .page-home .home-brief .lead{ font-size:16px; }
  .page-home .home-brief-points{ margin-top:18px; gap:14px; padding-top:18px; }
  .page-home .home-brief-points p{ display:none; }
  .page-home .home-brief-media{ aspect-ratio:16/11; }
  .page-home .home-brief-copy .more-link{ margin-top:22px; }

  /* Yorumlar — 3. yorum gizli, kompakt kartlar */
  .page-home .testimonial:nth-of-type(3){ display:none; }
  .page-home .testimonial{ padding:26px 22px; }
  .page-home .testimonial blockquote{ font-size:18px; line-height:1.5; }
  .page-home .testimonial figcaption{ margin-top:16px; }
  .page-home .rating-badge{ margin-top:16px; }

  /* Branch finder (Kliniğimiz'den hemen sonra) */
  .page-home .branch-finder .bf-action{ margin-bottom:28px; }
  .page-home .branch-finder .bf-branch{ padding:20px 0; }
  .page-home .home-brief + .cta-band{ padding-top:52px; }
}

@media (max-width:520px){
  .compare-frame{ aspect-ratio:4/3; }
}