/* HAIRMEDICO GLOBAL RESPONSIVE */
/* ══════════════════════════════════════════════════════════════
   HAIRMEDICO — GLOBAL RESPONSIVE CSS
   Tüm sayfalara inject edilir. Ortak grid/layout class'larını
   tablet ve mobil için düzenler.
   Breakpoints: 1024px (tablet) · 860px (tablet sm) · 600px (mobile) · 420px (mobile sm)
   ══════════════════════════════════════════════════════════════ */

/* ── BASE: max-width & overflow guard ──────────────────────── */
img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
  box-sizing: border-box;
}
* { box-sizing: border-box; }

/* ── 1024px — Large tablet ──────────────────────────────────── */
@media (max-width: 1024px) {
  .ft-grid, .ft-g { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  .hero-in        { grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
  .article-grid   { grid-template-columns: minmax(0, 1fr) 240px !important; gap: 40px !important; }
  .process-grid   { grid-template-columns: repeat(3, 1fr) !important; }
  .guarantees     { grid-template-columns: repeat(2, 1fr) !important; }
  .cmp-grid       { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── 860px — Tablet / Small laptop ─────────────────────────── */
@media (max-width: 860px) {

  /* Sections */
  .sec, .sec-navy, .sec-cream, .sec-white { padding: 64px 0 !important; }

  /* Common 2-col → 1-col */
  .article-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
  .hero-in,
  .hero-dr,
  .dr-in,
  .phil-grid,
  .tp-grid,
  .cta-in,
  .cta-sec-in,
  .cta-strip-in,
  .contact-grid,
  .faq-cols,
  .zone-grid,
  .blade-compare,
  .card-grid,
  .choi-stats,
  .adv-grid,
  .cmp-2,
  .cand-grid,
  .step-grid,
  .ft-grid,
  .ft-g,
  .price-grid,
  .tech-cards,
  .cta-stats { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* 3-col → 2-col */
  .rel-grid,
  .int-grid,
  .card-grid,
  .why-grid,
  .tec-grid,
  .pkg-grid,
  .process-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* 4-col → 2-col */
  .guarantees { grid-template-columns: repeat(2, 1fr) !important; }

  /* Sidebars: collapse */
  .sidebar { position: static !important; width: 100% !important; }

  /* Hero */
  .hero-vis, .hero-card { display: none !important; }
  .hero-in { text-align: center !important; }
  .hero-stats { justify-content: center !important; flex-wrap: wrap !important; }

  /* Steps: icon stays left */
  .step        { grid-template-columns: 48px 1fr !important; }
  .step-item   { grid-template-columns: 48px 1fr !important; }
  .algo-step   { grid-template-columns: 52px 1fr !important; }

  /* Cost table */
  .cost-grid { grid-template-columns: 1fr !important; }

  /* Packages */
  .pkg-grid { grid-template-columns: 1fr !important; }

  /* Nav: hide text links, show hamburger */
  .nlinks { display: none !important; }
  .hbg    { display: flex !important; }
  .nlang  { display: none !important; }

  /* Footer columns: 2-col */
  .ft-grid, .ft-g { grid-template-columns: 1fr 1fr !important; }
}

/* ── 600px — Mobile ─────────────────────────────────────────── */
@media (max-width: 600px) {

  /* Single column everywhere */
  .rel-grid,
  .int-grid,
  .card-grid,
  .why-grid,
  .tec-grid,
  .pkg-grid,
  .process-grid,
  .adv-grid,
  .cta-stats,
  .guarantees,
  .ft-grid,
  .ft-g,
  .ts-grid    { grid-template-columns: 1fr !important; }

  /* Typography scale down */
  h1 { font-size: clamp(2rem, 8vw, 3rem) !important; }
  h2 { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; }

  /* Before-after cases: keep split */
  .case-img   { height: 200px !important; }

  /* Sections: tighter padding */
  .sec, .sec-navy, .sec-cream, .sec-white { padding: 48px 0 !important; }

  /* CTA actions */
  .cta-actions { flex-direction: column !important; align-items: stretch !important; }
  .cta-btn     { justify-content: center !important; }

  /* Footer */
  .flng-row { flex-wrap: wrap !important; gap: 6px !important; }

  /* Gallery */
  .gallery-grid { grid-template-columns: 1fr !important; }
  
  /* Reviews grid */
  .reviews-grid { grid-template-columns: 1fr !important; }

  /* Stats */
  .stat-row, .stats-row { grid-template-columns: repeat(2, 1fr) !important; }
  
  /* Comparison table scroll */
  .cmp-grid, .compare-table, .comp-table { 
    overflow-x: auto !important; 
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
  }

  /* Form elements */
  .f-row { grid-template-columns: 1fr !important; }
  
  /* Norwood scale */
  .norwood-grid { grid-template-columns: repeat(2, 1fr) !important; }
  
  /* Process steps */
  .process-grid { grid-template-columns: 1fr !important; }
}

/* ── 420px — Small mobile ───────────────────────────────────── */
@media (max-width: 420px) {
  .wrap { padding: 0 14px !important; }
  .hero-in { padding-top: 20px !important; }
  .stat-row, .stats-row { grid-template-columns: 1fr 1fr !important; }
  .norwood-grid { grid-template-columns: 1fr 1fr !important; }
  .pkg-card { padding: 24px 18px !important; }
}

/* ── OVERFLOW PREVENTION ────────────────────────────────────── */
@media (max-width: 860px) {
  /* Fixed-width elements that can overflow */
  [style*="width:760px"],
  [style*="width:820px"],
  [style*="width:900px"],
  [style*="width:1024px"],
  [style*="max-width:760px"],
  [style*="max-width:820px"],
  [style*="max-width:900px"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ══ dil değiştirici — hm-bcba9e7cf097.css kaynağından ══ */
.nlang{position: relative;
  margin-left: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;}
.nlang-btn{display: flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  font-family: var(--sans); font-size: .68rem; font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.8);
  cursor: pointer; transition: all var(--t1);
  white-space: nowrap;}
.nav.light-zone .nlang-btn,
.nav.sc .nlang-btn{background: var(--cream);
  border-color: var(--line);
  color: var(--ink2);}
.nav.light-zone .nlang-btn:hover,
.nav.sc .nlang-btn:hover{border-color: var(--gold);
  color: var(--gold-d);
  background: var(--gold-bg);}
.nlang-btn .globe{stroke: currentColor; fill: none;
  width: 13px; height: 13px;
  stroke-width: 1.5; flex-shrink: 0;}
.nlang-btn .lchev{width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .5;
  transition: transform var(--t2) var(--ease);}
.nlang.open .lchev{transform: rotate(-135deg) translateY(-2px); opacity: .9;}
.nlang-drop{position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r16);
  box-shadow: 0 12px 48px rgba(0,0,0,.12);
  opacity: 0; visibility: hidden;
  transform: translateY(8px) scale(.98);
  transform-origin: top right;
  transition: all var(--t2) var(--ease);
  z-index: 10001;
  overflow: hidden;}
.nav.hero-zone .nlang-drop{background: rgba(5,13,31,.97);
  backdrop-filter: blur(32px) saturate(1.5);
  border-color: rgba(196,169,106,.18);}
.nav.light-zone .nlang-drop,
.nav.sc .nlang-drop{background: #fff;
  border-color: var(--line);
  box-shadow: 0 12px 48px rgba(0,0,0,.1);}
.nlang.open .nlang-drop{opacity: 1; visibility: visible;
  transform: translateY(0) scale(1);}
.ld-head{padding: 14px 16px 10px;
  font-size: .6rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--gold-d);
  border-bottom: 1px solid var(--line2);}
.nav.hero-zone .ld-head{color: rgba(196,169,106,.7);
  border-bottom-color: rgba(255,255,255,.08);}
.nav.light-zone .ld-head,
.nav.sc .ld-head{color: var(--gold-d);
  border-bottom-color: var(--line2);}
.ld-grid{display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 2px;
  padding: 10px;}
.ld-lang{display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  border-radius: var(--r8);
  cursor: pointer; transition: background var(--t1), color var(--t1);
  text-decoration: none; color: inherit;}
.ld-lang:hover{background: var(--cream);}
.nav.hero-zone .ld-lang:hover{background: rgba(255,255,255,.06);}
.nav.light-zone .ld-lang:hover,
.nav.sc .ld-lang:hover{background: var(--cream);}
.ld-lang.current{background: var(--gold-bg);}
.nav.hero-zone .ld-lang.current{background: rgba(196,169,106,.12);}
.ld-flag{font-size: 1.25rem; line-height: 1;}
.ld-code{font-size: .72rem; font-weight: 300; color: var(--ink2);}
.nav.hero-zone .ld-code{color: rgba(255,255,255,.55);}
.nav.light-zone .ld-code,
.nav.sc .ld-code{color: var(--ink2);}
.ld-lang.current .ld-code{color: var(--gold-d); font-weight: 500;}
.nav.hero-zone .ld-lang.current .ld-code{color: var(--gold);}
.ld-name{font-size: .6rem; color: var(--ink4); text-align: center; line-height: 1.2;}
.nav.hero-zone .ld-name{color: rgba(255,255,255,.3);}
.nav.light-zone .ld-name,
.nav.sc .ld-name{color: var(--ink4);}
@media(max-width:860px){
  .nlang{display: none}
}
/* ══ dil değiştirici sonu ══ */

/* ══ eksik .btn temel stili ══ */
/* Temel düğme — sitenin kanonik tanımı (hm-bcba9e7cf097.css). Modifier
   sınıfı olmayan .btn'ler bu sayfalarda birincil eylem düğmesi olduğu için
   altın dolguyu da alır; .btn-gold gibi bir modifier varsa ona dokunulmaz. */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px;
  font-family: var(--sans); font-size: .72rem; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase;
  border-radius: var(--r4, 4px);
  transition: all var(--t1) var(--ease);
  cursor: pointer; white-space: nowrap;
}
.btn:not([class*="btn-"]) { background: var(--gold); color: var(--navy) }
.btn:not([class*="btn-"]):hover { background: var(--gold-d); transform: translateY(-1px) }
/* ══ eksik .btn temel stili sonu ══ */

/* ══ görünür SSS ══ */
.qa-sec { padding: clamp(52px,7vw,88px) 0; background: var(--cream,#F4F1EB) }
.qa-in { width: 100%; max-width: 860px; margin: 0 auto; padding: 0 clamp(18px,4vw,40px) }
.qa-h {
  font-family: var(--serif); font-weight: 300; letter-spacing: -.015em;
  font-size: clamp(1.5rem,3vw,2.2rem); line-height: 1.15;
  color: var(--ink,#1C1C1C); margin: 0 0 6px;
}
.qa-lead { font-size: .82rem; color: var(--ink4,#A0A0A0); margin: 0 0 26px }
.qa-item { border-bottom: 1px solid var(--line2,rgba(28,28,28,.09)) }
.qa-item > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 18px 0; min-height: 44px;
  font-size: .95rem; font-weight: 400; line-height: 1.5;
  color: var(--ink,#1C1C1C);
  transition: color .16s ease;
}
.qa-item > summary::-webkit-details-marker { display: none }
.qa-item > summary:hover { color: var(--gold-d,#9A7F44) }
.qa-item > summary::after {
  content: '+'; flex-shrink: 0;
  width: 26px; height: 26px; margin-top: -1px;
  display: grid; place-items: center;
  border: 1px solid var(--gold-br,rgba(196,169,106,.22)); border-radius: 50%;
  font-size: .95rem; font-weight: 300; color: var(--gold-d,#9A7F44);
  transition: transform .22s ease, background .22s ease;
}
.qa-item[open] > summary::after {
  content: '+'; transform: rotate(45deg);
  background: var(--gold-bg,rgba(196,169,106,.09));
}
.qa-a { padding: 0 44px 20px 0; margin: 0; font-size: .875rem; line-height: 1.8; color: var(--ink3,#5A5A5A) }
@media (prefers-reduced-motion: reduce) {
  .qa-item > summary, .qa-item > summary::after { transition: none }
}
/* ══ görünür SSS sonu ══ */

/* ══ mobil menü erişimi ══ */
/* 375 px'te hamburger x=435..475'e, yani ekran dışına düşüyordu; menüye
   dokunmak imkânsızdı. Hamburger'ın göründüğü genişlikte (860 px) masaüstü
   çağrı düğmesinin satırda işi yok — çekmecede kendi CTA'sı zaten var. */
@media (max-width: 860px) {
  .nav .ncta { display: none !important }
}
/* ══ mobil menü erişimi sonu ══ */

/* ══ nav kırılma eşiği — Seçenek C2 ══ */
/* Ölçülen kesilme sınırları: en 1530 · ar 1712 · nl 1742 · pt 1768 ·
   fr 1778 · de 1814.  Ayrıntı: NAV-TASMA-TESHIS.md */

/* Tüm diller — İngilizce sınırının (1530) 30 px üstü */
@media (max-width: 1559.98px) {
  .nav .nlinks { display: none !important }
  .nav .nlang  { display: none !important }
  .nav .ncta   { display: none !important }
  .nav .hbg    { display: flex !important }
}

/* İngilizce dışı diller ve RTL — Almanca sınırının (1814) 26 px üstü.
   Tespit, sayfanın kendi <html lang> niteliğinden; yeni mekanizma yok. */
@media (max-width: 1839.98px) {
  html:not([lang="en"]) .nav .nlinks,
  html[dir="rtl"] .nav .nlinks { display: none !important }
  html:not([lang="en"]) .nav .nlang,
  html[dir="rtl"] .nav .nlang  { display: none !important }
  html:not([lang="en"]) .nav .ncta,
  html[dir="rtl"] .nav .ncta   { display: none !important }
  html:not([lang="en"]) .nav .hbg,
  html[dir="rtl"] .nav .hbg    { display: flex !important }
}
/* ══ nav kırılma eşiği sonu ══ */

html[lang] :is(.nlogo-img,.logo-img){display:block;height:38px;width:auto;max-width:200px}
html[lang] .fl-logo .logo-img{height:36px}
html[lang] :is(.nlogo-text,.logo-text){display:none}
html[lang] :is(.nlogo,.fl-logo).logo-fallback :is(.nlogo-text,.logo-text){display:inline-flex;align-items:baseline;gap:1px}
html[lang] .nav.hero-zone .nlogo-img--dark,
html[lang] .nav.light-zone .nlogo-img--light{display:none}
@media(max-width:767px){
  html[lang] .nlogo-img{height:32px}
  html[lang] .fl-logo .logo-img{height:32px}
}

.ft-top{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-bottom:48px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08)}
.ft-tagline{font-size:.78rem;color:rgba(255,255,255,.38);font-weight:200;margin-top:8px;line-height:1.75;max-width:340px}
.ft-contacts{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.ft-ct{display:flex;align-items:flex-start;gap:8px;font-size:.72rem;color:rgba(255,255,255,.35);line-height:1.5}
.ft-ct svg{width:12px!important;height:12px!important;stroke:var(--gold,#C4A96A);fill:none;stroke-width:1.5;flex-shrink:0;margin-top:2px}
.ft-wa{display:flex;align-items:center;gap:8px;font-size:.72rem;color:#25D366;text-decoration:none;transition:opacity .2s}
.ft-wa svg{width:12px!important;height:12px!important;stroke:#25D366;fill:none;stroke-width:1.5;flex-shrink:0}
.ft-wa:hover{opacity:.8}
.ft-langs-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.06);margin-top:0}
.ft-langs-label{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.28);white-space:nowrap;flex-shrink:0}
.fbot-creds{font-size:.63rem;color:rgba(255,255,255,.2)}
.ft-sister{margin-top:0;padding:16px 0 24px;border-top:1px solid rgba(255,255,255,.05);font-size:.68rem;color:rgba(255,255,255,.2);line-height:1.7}
.ft-sister a{color:rgba(196,169,106,.4);text-decoration:none}
.ft-sister a:hover{color:rgba(196,169,106,.75)}
@media(max-width:600px){.ft-top{flex-direction:column}}

.ft-langs-toggle{display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;padding:0;font:inherit;color:inherit}
.ft-langs-toggle .ft-lchev{font-size:.6rem;color:rgba(255,255,255,.28);transition:transform .2s;display:inline-block}
.ft-langs-row.open .ft-langs-toggle .ft-lchev{transform:rotate(180deg)}
.ft-langs-panel{flex-basis:100%;max-height:0;overflow:hidden;transition:max-height .3s ease,margin-top .3s ease;margin-top:0}
.ft-langs-row.open .ft-langs-panel{max-height:600px;margin-top:14px}

.fq-ic{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;transition:background var(--t1),border-color var(--t1)}
.fq-ic svg{stroke:var(--ink3);fill:none;width:9px;height:9px;stroke-width:2.5;stroke-linecap:round;transition:stroke var(--t1),transform var(--t2) var(--ease)}
.sb-btn-wa svg{stroke:#25D366;fill:none;width:14px;height:14px;stroke-width:1.6;stroke-linecap:round}
.sb-link-item svg{stroke:var(--ink4);fill:none;width:10px;height:10px;stroke-width:2.5;stroke-linecap:round;flex-shrink:0}
.fq.open .fq-q{color:var(--navy)}
.fq.open .fq-ic{background:var(--navy);border-color:var(--navy)}
.fq.open .fq-ic svg{stroke:#fff;transform:rotate(45deg)}
.fq-a{max-height:0;overflow:hidden;transition:max-height .32s var(--ease)}
.fq.open .fq-a{max-height:400px}
.fq{border-bottom:1px solid var(--line2);overflow:hidden}
.fq-q{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 0;cursor:pointer;font-size:.88rem;font-weight:300;color:var(--ink2);line-height:1.5;transition:color var(--t1)}
.fq-body{padding:0 0 18px;font-size:.82rem;line-height:1.8;color:var(--ink3);font-weight:200}
.article-body{font-size:.9rem;line-height:1.82;color:var(--ink2);font-weight:300}
.article-body ul,.article-body ol{margin:0 0 18px 22px}
.article-body strong{font-weight:500;color:var(--ink)}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:56px;align-items:start}
.article-sidebar{position:sticky;top:calc(var(--nav-h, 0px) + 28px);display:flex;flex-direction:column;gap:16px}
.callout{background:var(--gold-bg);border:1px solid var(--gold-br);border-left:3px solid var(--gold);border-radius:0 var(--r8) var(--r8) 0;padding:16px 20px;margin:24px 0;font-size:.84rem}
.callout strong{color:var(--gold-d)}
.cta-in{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.rv{opacity:0;transform:translateY(24px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rv.vis{opacity:1;transform:translateY(0)}
.d1{transition-delay:.1s}
.d2{transition-delay:.2s}
.il{color:var(--gold-d);font-weight:400;border-bottom:1px solid rgba(196,169,106,.3);transition:color var(--t1)}
.il:hover{color:var(--gold)}
.rel-arrow{font-size:.72rem;color:var(--gold-d);margin-top:10px;display:block}
.rel-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r12);padding:20px 18px;transition:all var(--t2)}
.rel-card:hover{border-color:var(--gold-br);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.05)}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rel-sub{font-size:.72rem;color:var(--ink4)}
.rel-title{font-size:.9rem;font-weight:300;color:var(--ink);margin-bottom:4px}
.rel-tag{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-d);margin-bottom:8px}
.sb-btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px;border-radius:var(--r8);font-size:.7rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;transition:all var(--t1);margin-bottom:8px}
.sb-btn-gold{background:var(--gold);color:var(--navy)}
.sb-btn-gold:hover{background:var(--gold-l)}
.sb-cta{background:var(--navy);border-radius:var(--r16);padding:24px}
.sb-cta-title{font-family:var(--serif);font-size:1.05rem;font-weight:300;color:#fff;line-height:1.35;margin-bottom:8px}
.sb-cta-body{font-size:.74rem;color:rgba(255,255,255,.45);line-height:1.65;margin-bottom:16px}
.sb-links{background:var(--white);border:1px solid var(--line);border-radius:var(--r16);padding:18px 20px}
.sb-links-title{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink4);margin-bottom:12px}
.serif-i{font-style:italic;font-family:var(--serif)}
@media(max-width:860px){
.article-grid{grid-template-columns:1fr}
.article-sidebar{position:static}
.cta-in{grid-template-columns:1fr}
.rel-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
.rel-grid{grid-template-columns:1fr}
}