/* ============================================================
   UZMAN DENT — ORTAK STİL DOSYASI (style.css)
   Tüm sayfalar (index, about, services, kids, doctors, contact)
   bu dosyayı paylaşır. Aydınlık/ferah tema, turkuaz vurgular.
   ============================================================ */

/* ----- FONTLAR -----
   Display (başlık): Fraunces — karakterli premium serif
   Body (gövde):     Outfit  — ferah, modern sans-serif       */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Outfit:wght@300;400;500;600;700&family=Poppins:wght@600;700;800&display=swap');

/* ============================================================
   1) CSS DEĞİŞKENLERİ — Marka Kimliği
   ============================================================ */
:root{
  /* Nötr renkler (aydınlık tema) */
  --c-bg:        #ffffff;     /* bembeyaz ana zemin */
  --c-bg-soft:   #f4f8f9;     /* açık gri-mavi yumuşak zemin */
  --c-ink:       #1f2a2e;     /* antrasit yazı */
  --c-ink-soft:  #5b6b70;     /* ikincil gri yazı */
  --c-line:      #e3edee;     /* ince çizgiler/kenarlıklar */

  /* Turkuaz / Nane (ana vurgu) */
  --c-mint:      #2fd1c0;
  --c-teal:      #129c97;
  --c-teal-deep: #0c7a78;
  --c-mint-soft: #d5f5f0;

  /* Pembe (Uzman Kids) */
  --c-pink:      #ff7aa0;
  --c-pink-deep: #e84d7e;
  --c-pink-soft: #ffe3ec;
  --c-kid-yellow:#ffd166;
  --c-kid-blue:  #6ec6ff;
  --c-kid-purple:#b8a4ff;

  /* Gölge & derinlik */
  --shadow-sm:   0 2px 8px rgba(18,156,151,.08);
  --shadow-md:   0 12px 30px rgba(31,42,46,.08);
  --shadow-lg:   0 28px 60px rgba(18,124,120,.16);
  --shadow-mint: 0 18px 40px rgba(47,209,192,.35);

  /* Yarıçaplar */
  --r-sm: 12px;  --r-md: 20px;  --r-lg: 30px;  --r-xl: 42px;

  /* Cam efekti (glassmorphism) */
  --glass-bg:   rgba(255,255,255,.65);
  --glass-brd:  rgba(255,255,255,.7);
  --glass-blur: blur(16px) saturate(140%);

  --maxw: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   2) SIFIRLAMA & TEMEL
   ============================================================ */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Outfit',sans-serif;
  color:var(--c-ink); background:var(--c-bg);
  line-height:1.65; overflow-x:hidden;
  /* ferah çok katmanlı arka plan */
  background-image:
    radial-gradient(60vw 60vw at 85% -10%, rgba(47,209,192,.10), transparent 60%),
    radial-gradient(50vw 50vw at -10% 40%, rgba(110,198,255,.08), transparent 60%);
  background-attachment:fixed;
}
h1,h2,h3,h4{ font-family:'Fraunces',serif; font-weight:600; line-height:1.12; letter-spacing:-.01em; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
ul{ list-style:none; }
section{ position:relative; }
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* Yardımcı başlık bileşenleri */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--c-teal); background:var(--c-mint-soft);
  padding:7px 16px; border-radius:999px; margin-bottom:18px;
}
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--c-mint); }
.eyebrow.pink{ color:var(--c-pink-deep); background:var(--c-pink-soft); }
.eyebrow.pink::before{ background:var(--c-pink); }
.section-title{ font-size:clamp(2rem,4vw,3rem); color:var(--c-ink); margin-bottom:16px; }
.section-lead{ color:var(--c-ink-soft); max-width:640px; font-size:1.05rem; }
.section-head{ margin-bottom:54px; }
.center{ text-align:center; }
.center .section-lead{ margin-inline:auto; }

/* Butonlar */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Outfit',sans-serif; font-weight:600; font-size:.98rem;
  padding:15px 30px; border-radius:999px; cursor:pointer; border:none; white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, border-color .3s, color .3s;
}
.btn-primary{ color:#fff; background:linear-gradient(135deg,var(--c-mint),var(--c-teal)); box-shadow:var(--shadow-mint); }
.btn-primary:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 24px 48px rgba(47,209,192,.45); }
.btn-ghost{ color:var(--c-teal); background:#fff; border:1.5px solid var(--c-line); box-shadow:var(--shadow-sm); }
.btn-ghost:hover{ transform:translateY(-3px); border-color:var(--c-mint); color:var(--c-teal-deep); }
.btn-pink{ color:#fff; background:linear-gradient(135deg,var(--c-pink),var(--c-pink-deep)); box-shadow:0 16px 36px rgba(255,92,138,.35); }
.btn-pink:hover{ transform:translateY(-3px) scale(1.02); }

/* ============================================================
   3) NAVBAR (sticky + glassmorphism)
   ============================================================ */
.navbar{
  position:fixed; top:0; left:0; width:100%; z-index:1000; padding:18px 0;
  background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid transparent;
  transition:padding .4s var(--ease), box-shadow .4s, border-color .4s;
}
.navbar.scrolled{ padding:11px 0; border-bottom-color:var(--glass-brd); box-shadow:0 8px 30px rgba(18,124,120,.08); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }

/* Logo (orijinal görsel — <img>) */
.logo{ display:inline-flex; align-items:center; }
.logo img{
  max-height:85px;            /* masaüstü: daha belirgin logo */
  width:auto;
  object-fit:contain;         /* en-boy oranını koru, bozma */
  display:block;
}
.navbar.scrolled .logo img{ max-height:68px; transition:max-height .4s var(--ease); } /* scroll'da hafif küçülür */

/* Menü linkleri */
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{
  position:relative; font-weight:500; font-size:.97rem; color:var(--c-ink);
  padding:9px 15px; border-radius:999px; transition:color .25s;
}
.nav-links a::after{
  content:""; position:absolute; left:15px; right:15px; bottom:5px; height:2px; background:var(--c-mint);
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav-links a:hover{ color:var(--c-teal); }
.nav-links a:hover::after{ transform:scaleX(1); }
/* aktif sayfa vurgusu */
.nav-links a.active{ color:var(--c-teal); }
.nav-links a.active::after{ transform:scaleX(1); }
/* Uzman Kids linki — pembe */
.nav-links a.kids-link{ color:var(--c-pink); font-weight:600; }
.nav-links a.kids-link::after{ background:var(--c-pink); }
.nav-links a.kids-link:hover,.nav-links a.kids-link.active{ color:var(--c-pink-deep); }

/* Sağ aksiyonlar */
.nav-actions{ display:flex; align-items:center; gap:12px; }

/* Dil dropdown */
.lang{ position:relative; }
.lang-btn{
  display:flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px;
  border:1.5px solid var(--c-line); background:#fff; cursor:pointer;
  font-family:'Outfit',sans-serif; font-weight:600; font-size:.9rem; color:var(--c-ink); transition:border-color .25s;
}
.lang-btn:hover{ border-color:var(--c-mint); }
.lang-btn .chev{ transition:transform .3s; }
.lang.open .lang-btn .chev{ transform:rotate(180deg); }
.lang-menu{
  position:absolute; top:calc(100% + 10px); right:0; min-width:150px;
  background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd); border-radius:var(--r-sm); padding:6px; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:all .28s var(--ease);
}
.lang.open .lang-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-menu button{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:10px 12px; border:none; background:transparent; border-radius:9px; cursor:pointer;
  font-family:'Outfit',sans-serif; font-size:.92rem; font-weight:500; color:var(--c-ink); transition:background .2s;
}
.lang-menu button:hover{ background:var(--c-mint-soft); }
.lang-menu button.active{ background:var(--c-mint-soft); color:var(--c-teal); font-weight:600; }

/* Hamburger (mobil) */
.burger{ display:none; flex-direction:column; gap:5px; width:46px; height:46px; border-radius:13px;
  border:1.5px solid var(--c-line); background:#fff; cursor:pointer; align-items:center; justify-content:center; }
.burger span{ width:20px; height:2px; background:var(--c-ink); border-radius:2px; transition:.3s var(--ease); }
.burger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.active span:nth-child(2){ opacity:0; }
.burger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   4) SAYFA BAŞLIĞI (iç sayfalar için hero şeridi)
   ============================================================ */
.page-hero{ padding:150px 0 64px; text-align:center; }
.page-hero .eyebrow{ margin-bottom:18px; }
.page-hero h1{ font-size:clamp(2.4rem,5vw,3.6rem); color:var(--c-ink); margin-bottom:14px; line-height:1.25; }
.page-hero h1 .accent{ background:linear-gradient(120deg,var(--c-teal),var(--c-mint));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-style:italic; }
.page-hero p{ max-width:600px; margin:0 auto; color:var(--c-ink-soft); font-size:1.08rem; }
.breadcrumb{ font-size:.86rem; color:var(--c-ink-soft); margin-bottom:22px; }
.breadcrumb a:hover{ color:var(--c-teal); }
.breadcrumb span{ color:var(--c-teal); font-weight:600; }

/* ============================================================
   5) FLOATING BUTONLAR (tüm sayfalarda)
   ============================================================ */
.floaters{ position:fixed; right:22px; bottom:22px; z-index:900; display:flex; flex-direction:column; gap:14px; }
.float-btn{ width:58px; height:58px; border-radius:50%; display:grid; place-items:center; color:#fff;
  box-shadow:var(--shadow-md); cursor:pointer; transition:transform .3s var(--ease); position:relative; }
.float-btn svg{ width:28px; height:28px; }
.float-btn:hover{ transform:scale(1.1); }
.fb-wa{ background:#25d366; animation:pulse-wa 2.2s infinite; }
.fb-ig{ background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); animation:pulse-ig 2.2s infinite; }
@keyframes pulse-wa{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.55) } 70%{ box-shadow:0 0 0 16px rgba(37,211,102,0) } 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0) } }
@keyframes pulse-ig{ 0%{ box-shadow:0 0 0 0 rgba(220,39,67,.5) } 70%{ box-shadow:0 0 0 16px rgba(220,39,67,0) } 100%{ box-shadow:0 0 0 0 rgba(220,39,67,0) } }
.float-btn .ftip{ position:absolute; right:72px; top:50%; transform:translateY(-50%) translateX(8px);
  background:var(--c-ink); color:#fff; font-size:.78rem; font-weight:600; padding:7px 12px; border-radius:8px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:all .3s var(--ease); }
.float-btn:hover .ftip{ opacity:1; transform:translateY(-50%) translateX(0); }

/* ============================================================
   6) SCROLL REVEAL (fade-in-up)
   ============================================================ */
.reveal{ opacity:0; transform:translateY(38px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.visible{ opacity:1; transform:translateY(0); }
.reveal.d1{ transition-delay:.1s } .reveal.d2{ transition-delay:.2s }
.reveal.d3{ transition-delay:.3s } .reveal.d4{ transition-delay:.4s }

/* ============================================================
   7) FOOTER (tüm sayfalarda)
   ============================================================ */
.footer{ background:var(--c-ink); color:#cdd9db; padding:64px 0 30px; margin-top:60px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:44px; }
.footer .logo{ margin-bottom:16px; display:inline-flex; }
.footer .logo img{
  max-height:60px; width:auto; object-fit:contain; display:block;
  background:#fff;            /* beyaz zeminli logo koyu footer'da temiz dursun */
  padding:8px 12px; border-radius:12px;
}
.footer p.fdesc{ font-size:.92rem; color:#9fb0b3; max-width:280px; }
.footer h5{ font-family:'Outfit',sans-serif; color:#fff; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px; }
.footer ul li{ margin-bottom:11px; }
.footer ul a{ font-size:.92rem; color:#9fb0b3; transition:color .25s; }
.footer ul a:hover{ color:var(--c-mint); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-top:24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.85rem; color:#86989b; }

/* ============================================================
   8) HEKİM 3D FLIP KARTLAR (doctors + index)
   ============================================================ */
.docs-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:34px; max-width:880px; margin:0 auto; }
/* Kart yüksekliği: dikey (4/5) fotoğraf + meta şeridi sığacak şekilde.
   Fotoğraf kart genişliğinin 1.25 katı yükseklik alır; meta ~69px. */
.flip{ perspective:1600px; height:auto; aspect-ratio:4/5.7; min-height:420px; }
.flip-inner{ position:relative; width:100%; height:100%; transition:transform .9s var(--ease); transform-style:preserve-3d; border-radius:var(--r-xl); }
.flip:hover .flip-inner{ transform:rotateY(180deg); }
.flip-face{ position:absolute; inset:0; border-radius:var(--r-xl); overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:var(--shadow-md); }
.flip-front{ background:#fff; border:1px solid var(--c-line); }
/* Hekim fotoğrafı: portre fotoğraflara uygun DİKEY oran (4/5).
   object-position:top center → kırpma üstten başlar, yüz asla kesilmez. */
.flip-photo{ aspect-ratio:4/5; width:100%; overflow:hidden; position:relative; }
.flip-photo img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.flip-photo::after{ content:""; position:absolute; inset:auto 0 0 0; height:60%; background:linear-gradient(transparent,rgba(31,42,46,.6)); }
/* İsim etiketi: fotoğrafın EN ALTINA sabit (yüzü kapatmaz).
   .flip-photo içine alındığı için oranla birlikte kayar. */
.flip-photo .fi-name{ position:absolute; left:24px; right:24px; bottom:20px; color:#fff; z-index:2; }
.flip-photo .fi-name b{ font-family:'Fraunces',serif; font-size:1.28rem; display:block; line-height:1.25; }
.flip-photo .fi-name span{ font-size:.84rem; opacity:.92; }
.flip-meta{ padding:22px 24px; display:flex; align-items:center; justify-content:space-between; }
.flip-meta .fm-role{ font-weight:600; color:var(--c-teal); font-size:.95rem; }
.flip-hint{ display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:var(--c-ink-soft); }
.flip-hint svg{ width:16px; height:16px; }
.flip-back{ transform:rotateY(180deg); color:#fff; padding:34px 30px; display:flex; flex-direction:column; background:linear-gradient(160deg,var(--c-teal),var(--c-teal-deep)); }
.flip-back.kids-back{ background:linear-gradient(160deg,var(--c-pink),var(--c-pink-deep)); }
.flip-back h4{ font-size:1.35rem; margin-bottom:4px; }
.flip-back .fb-role{ font-size:.85rem; opacity:.85; margin-bottom:16px; }
.flip-back .fb-title{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; opacity:.8; margin-bottom:12px; }
.flip-back ul{ display:grid; gap:10px; overflow:auto; }
.flip-back li{ display:flex; gap:9px; font-size:.9rem; line-height:1.4; }
.flip-back li svg{ width:15px; height:15px; flex-shrink:0; margin-top:4px; opacity:.9; }

/* ============================================================
   9) HİZMET KARTLARI (services + index)
   ============================================================ */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.svc-card{ background:#fff; border-radius:var(--r-lg); padding:34px 30px; border:1px solid var(--c-line);
  box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease); position:relative; overflow:hidden; }
.svc-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--c-mint),var(--c-teal));
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.svc-card:hover{ transform:translateY(-10px); box-shadow:var(--shadow-lg); }
.svc-card:hover::before{ transform:scaleX(1); }
.svc-ic{ width:62px; height:62px; border-radius:18px; background:var(--c-mint-soft); color:var(--c-teal);
  display:grid; place-items:center; margin-bottom:22px; transition:transform .4s var(--ease); }
.svc-card:hover .svc-ic{ transform:rotate(-8deg) scale(1.08); }
.svc-ic svg{ width:30px; height:30px; }
.svc-card h3{ font-size:1.3rem; color:var(--c-ink); margin-bottom:10px; }
.svc-card p{ font-size:.95rem; color:var(--c-ink-soft); }

/* ============================================================
   HİZMET KARTI — AÇILIR/KAPANIR DETAY (ACCORDION)
   Kart tasarımı korunur; detay kutusu max-height ile yumuşak açılır.
   ============================================================ */
.svc-toggle{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  padding:10px 18px; border-radius:999px; cursor:pointer;
  font-family:'Outfit',sans-serif; font-size:.88rem; font-weight:600;
  color:var(--c-teal); background:var(--c-mint-soft); border:1.5px solid transparent;
  transition:background .28s var(--ease), color .28s, border-color .28s, transform .28s var(--ease);
}
.svc-toggle:hover{ background:#fff; border-color:var(--c-mint); transform:translateY(-2px); }
.svc-toggle .chev{ transition:transform .35s var(--ease); flex-shrink:0; }
.svc-toggle[aria-expanded="true"]{ background:var(--c-teal); color:#fff; }
.svc-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }

/* Detay kutusu — kapalıyken yükseklik 0, açılınca yumuşakça iner */
.svc-detail{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .55s var(--ease), opacity .4s var(--ease), margin-top .45s var(--ease);
  margin-top:0;
}
.svc-detail.open{ opacity:1; margin-top:18px; }
.svc-detail-inner{
  border-top:1px solid var(--c-line); padding-top:16px;
  font-size:.92rem; line-height:1.7; color:var(--c-ink-soft);
}
.svc-detail-inner p{ font-size:.92rem; margin-bottom:12px; }
.svc-detail-inner p:last-child{ margin-bottom:0; }
.svc-detail-inner strong{ color:var(--c-ink); font-weight:600; }
.svc-detail-inner h4{
  font-family:'Outfit',sans-serif; font-size:.78rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--c-teal);
  margin:16px 0 8px;
}
.svc-detail-inner ul{ display:grid; gap:8px; margin:10px 0 14px; }
.svc-detail-inner li{ display:flex; gap:9px; align-items:flex-start; font-size:.9rem; }
.svc-detail-inner li::before{
  content:"✓"; color:var(--c-mint); font-weight:700; flex-shrink:0; line-height:1.6;
}
/* açık kartın gövdesi taşmasın */
.svc-card{ align-self:start; }

/* ============================================================
   10) İLETİŞİM ÖĞELERİ
   ============================================================ */
.ci-list{ display:grid; gap:18px; }
.ci-item{ display:flex; gap:16px; align-items:center; padding:18px 20px; background:#fff;
  border:1px solid var(--c-line); border-radius:var(--r-md); box-shadow:var(--shadow-sm); transition:transform .3s var(--ease); }
.ci-item:hover{ transform:translateX(6px); }
.ci-ic{ width:48px; height:48px; border-radius:13px; background:var(--c-mint-soft); color:var(--c-teal); display:grid; place-items:center; flex-shrink:0; }
.ci-item b{ display:block; font-size:.76rem; color:var(--c-ink-soft); text-transform:uppercase; letter-spacing:.08em; }
.ci-item span{ font-weight:600; color:var(--c-ink); font-size:.96rem; }

/* Form alanları */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.84rem; font-weight:600; color:var(--c-ink); margin-bottom:7px; }
.field input,.field select,.field textarea{ width:100%; padding:13px 16px; border:1.5px solid var(--c-line); border-radius:var(--r-sm);
  font-family:'Outfit',sans-serif; font-size:.95rem; color:var(--c-ink); background:#fff; transition:border-color .25s, box-shadow .25s; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--c-mint); box-shadow:0 0 0 4px rgba(47,209,192,.15); }
.field textarea{ resize:vertical; min-height:120px; }
.form-ok{ display:none; margin-top:16px; padding:14px 18px; border-radius:var(--r-sm); background:var(--c-mint-soft); color:var(--c-teal-deep); font-weight:600; font-size:.9rem; text-align:center; }

/* HTML5 video kutusu */
.video-box{ position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); border:6px solid #fff; background:var(--c-bg-soft); }
.video-box video{ width:100%; height:100%; object-fit:cover; display:block; }
.video-badge{ position:absolute; left:18px; top:18px; z-index:2; padding:7px 15px; border-radius:999px;
  background:rgba(255,255,255,.85); backdrop-filter:blur(8px); font-size:.78rem; font-weight:600; color:var(--c-teal); }

/* Google Haritalar iframe */
.map-embed{ border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-md); border:6px solid #fff; }
.map-embed iframe{ width:100%; height:420px; border:0; display:block; }

/* ============================================================
   11) RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  /* mobilde logo biraz küçülsün — hamburger + Randevu Al ile aynı satıra sığsın */
  .logo img{ max-height:60px; }
  .navbar.scrolled .logo img{ max-height:54px; }

  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .docs-grid{ grid-template-columns:1fr; max-width:440px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }

  /* mobil menü */
  .nav-links{ position:fixed; inset:0 0 auto 0; top:0; flex-direction:column; align-items:stretch; gap:4px;
    background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    padding:96px 24px 30px; transform:translateY(-110%); transition:transform .45s var(--ease);
    box-shadow:var(--shadow-lg); border-bottom:1px solid var(--glass-brd); }
  .nav-links.open{ transform:translateY(0); }
  .nav-links a{ padding:14px 16px; font-size:1.05rem; border-radius:var(--r-sm); }
  .nav-links a::after{ display:none; }
  .burger{ display:flex; }
  .lang{ display:none; }
  .nav-actions .btn{ padding:11px 20px; font-size:.9rem; }
}
@media (max-width:560px){
  .svc-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   UZMAN KIDS — Renkli harf/kelime vurguları
   "Kids" kelimesinin her harfi ve "renkli bir dünya" gibi
   vurgulu metinler için canlı çocuk renkleri.
   (Görseldeki paletle uyumlu: K turuncu, i yeşil, d mavi, s pembe)
   ============================================================ */
/* ============================================================
   INSTAGRAM AKIŞI BÖLÜMÜ (Instagram'da Biz)
   3'lü grid; içine sonradan widget script'i yerleştirilebilir.
   ============================================================ */
.ig-section{ padding:80px 0; }

/* Başlık bloğu: metin + blok olarak tam ortalı.
   flex sütunu, içindeki başlık/açıklama/link'i yatayda merkezler. */
.ig-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin-bottom:44px;
}
/* .ig-head içindeki açıklama metni de blok olarak ortalansın
   (.section-lead max-width taşıdığı için margin auto şart). */
.ig-head .section-lead{ margin-left:auto; margin-right:auto; }
.ig-head .section-title{ margin-bottom:16px; }

.ig-handle{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  font-size:.95rem; font-weight:600; color:var(--c-teal);
  transition:color .25s;
}
.ig-handle:hover{ color:var(--c-teal-deep); }
.ig-handle svg{ width:18px; height:18px; }

/* Elfsight akış sarmalayıcısı — ortalanmış, geniş ama sınırlı */
.ig-feed-wrap{
  width:100%; max-width:1000px; margin:0 auto;
  min-height:200px;              /* widget yüklenene kadar bölüm çökmesin */
}
/* 'Instagram'da Takip Et' butonu alanı — ortalanmış */
.ig-cta{ text-align:center; margin-top:40px; }

/* Not: eski 3'lü placeholder grid kaldırıldı; akış artık
   #instagram-feed-container içine gelen widget ile doldurulur. */


@media (max-width:860px){
  .ig-section{ padding:60px 0; }
}

.kids-word{ font-weight:800; }         /* renkli kelime/harf grubu */

/* Hero'daki italik gradyan başlık — italik glyph'ler ve ünlem/iniş
   çıkışların (ğ, !) kırpılmasını önlemek için taşma payı.
   background-clip:text kullanıldığından inline-block + padding şart. */
/* ============================================================
   İTALİK VURGULARDA KIRPILMA ÖNLEME
   İtalik glyph'ler (ş, ğ, g, y kuyrukları ve sağa eğik son harfler)
   background-clip:text ile birlikte kullanıldığında kapsayıcının
   sıkı sınırları yüzünden kesiliyordu. inline-block + taşma payı
   ile hem alt kuyruklar hem sağ kenar tam görünür.
   ============================================================ */
.hero-accent,
.page-hero h1 .accent,
.kids-word,
h1 em, h2 em, h3 em,
h1 i,  h2 i,  h3 i{
  display:inline-block;
  line-height:1.3;          /* alt kuyruklara (ş, ğ, g) nefes payı */
  padding-right:.2em;       /* italik sağ taşma için pay */
  padding-bottom:.2em;      /* iniş çıkışların kesilmemesi için alt pay */
  margin-bottom:-.2em;      /* eklenen alt pay satır aralığını bozmasın */
  vertical-align:baseline;
}

.kids-word .kc{ display:inline-block; } /* her harf ayrı renk alabilsin */

/* Tekil canlı renkler */
.kc-orange{ color:#ff8a3d; }   /* turuncu */
.kc-green { color:#3fbf6a; }   /* yeşil */
.kc-blue  { color:#4aa8ff; }   /* mavi */
.kc-pink  { color:#ff5c8a; }   /* pembe */
.kc-yellow{ color:#ffb020; }   /* koyu sarı (beyaz zeminde okunur) */
.kc-purple{ color:#9d7bff; }   /* mor */
.kc-teal  { color:#16b8a6; }   /* turkuaz */

/* Koyu/renkli zemin (ör. pembe buton) üzerinde okunabilir açık tonlar.
   .btn-pink .kids-word içindeki harfler otomatik bu paleti kullanır. */
.btn-pink .kids-word .kc-orange{ color:#fff1c2; }  /* açık amber */
.btn-pink .kids-word .kc-green { color:#d6ffe4; }  /* açık nane */
.btn-pink .kids-word .kc-blue  { color:#d4ecff; }  /* açık mavi */
.btn-pink .kids-word .kc-pink  { color:#ffffff; }  /* beyaz */
.btn-pink .kids-word .kc-yellow{ color:#fff7d6; }
.btn-pink .kids-word .kc-purple{ color:#ece2ff; }
.btn-pink .kids-word .kc-teal  { color:#ccfbf4; }