/* 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,
  .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;
  }
}


/* ══ EXIT INTENT POPUP ══ */
#exit-popup{
  position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;
  background:rgba(5,13,31,.75);backdrop-filter:blur(4px);padding:20px
}
#exit-popup.show{display:flex}
.ep-box{
  background:#fff;max-width:480px;width:100%;position:relative;
  box-shadow:0 24px 64px rgba(0,0,0,.3)
}
.ep-top{background:var(--navy);padding:32px 36px 28px}
.ep-tag{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.ep-h{font-family:var(--serif);font-size:1.6rem;font-weight:300;color:#fff;line-height:1.2;margin-bottom:8px}
.ep-sub{font-size:.82rem;color:rgba(255,255,255,.45);line-height:1.65}
.ep-body{padding:24px 36px}
.ep-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.ep-wa{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 16px;background:#25D366;color:#fff;text-decoration:none;
  font-size:.75rem;font-weight:500;letter-spacing:.04em;transition:opacity .15s
}
.ep-wa:hover{opacity:.9;color:#fff}
.ep-email{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 16px;background:var(--navy);color:#fff;text-decoration:none;
  font-size:.75rem;font-weight:500;letter-spacing:.04em;transition:opacity .15s
}
.ep-email:hover{opacity:.9;color:#fff}
.ep-note{font-size:.65rem;color:#999;text-align:center;line-height:1.6}
.ep-close{
  position:absolute;top:10px;right:14px;background:none;border:none;
  color:rgba(255,255,255,.5);font-size:1.2rem;cursor:pointer;padding:4px 8px;
  transition:color .15s
}
.ep-close:hover{color:#fff}
@media(max-width:479px){
  .ep-box{margin:0 8px}
  .ep-top{padding:24px 20px 18px}
  .ep-body{padding:18px 20px}
  .ep-h{font-size:1.3rem}
  .ep-options{grid-template-columns:1fr}
}


/* ══ TRUSTPILOT REVIEWS SECTION ══ */
.tp-section{padding:72px 0;background:var(--cream)}
.tp-header{text-align:center;margin-bottom:48px}
.tp-header-tag{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-d);margin-bottom:12px}
.tp-header-h{font-family:var(--serif);font-weight:300;font-size:clamp(1.8rem,3.5vw,2.6rem);color:var(--navy);line-height:1.15;margin-bottom:16px}
.tp-header-h em{color:var(--gold-l,#D4BC87)}
.tp-trust-line{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:12px}
.tp-badge-sm{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid rgba(0,182,122,.2);padding:9px 16px;text-decoration:none;transition:border-color .2s}
.tp-badge-sm:hover{border-color:#00b67a}
.tp-badge-score{font-size:1.1rem;font-weight:700;color:#191919}
.tp-badge-stars{display:flex;gap:1px}
.tp-badge-sep{width:1px;height:28px;background:rgba(0,0,0,.1);margin:0 4px}
.tp-badge-count{font-size:.68rem;color:#555}
.tp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.tp-card{background:#fff;padding:24px;border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.tp-card-stars{display:flex;gap:2px}
.tp-card-quote{font-size:.92rem;color:var(--ink2);line-height:1.75;flex:1;font-style:italic}
.tp-card-quote::before{content:'"';font-family:var(--serif);font-size:2rem;color:var(--gold);line-height:0;vertical-align:-.4em;margin-right:2px}
.tp-card-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.tp-card-name{font-size:.78rem;font-weight:600;color:var(--navy)}
.tp-card-meta{font-size:.67rem;color:var(--ink3)}
.tp-card-badge{display:flex;align-items:center;gap:5px;font-size:.62rem;color:#00b67a;letter-spacing:.05em;text-transform:uppercase;font-weight:500}
.tp-cta-row{text-align:center;margin-top:36px}
.tp-cta-row a{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;color:#00b67a;text-decoration:none;border:1px solid rgba(0,182,122,.3);padding:8px 20px;transition:all .2s}
.tp-cta-row a:hover{background:#00b67a;color:#fff}
@media(max-width:900px){.tp-grid{grid-template-columns:1fr 1fr}}
@media(max-width:599px){.tp-grid{grid-template-columns:1fr}.tp-section{padding:52px 0}}

.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}
}