/* CardioCare visual system adapted to İstanbul Stella Hair's existing pages. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #0f172a;
  --copper: #dc2626;
  --amber: #fca5a5;
  --cream: #f8fafc;
  --white: #fff;
  --muted: #64748b;
  --hairline: #e2e8f0;
  --serif: 'Outfit', sans-serif;
  --sans: 'Inter', sans-serif;
  --r: 14px;
  --shadow: 0 20px 45px rgba(15, 23, 42, .10);
}

html { scroll-padding-top: 110px; }
body { background: var(--cream); color: var(--ink); font-size: 15px; line-height: 1.7; }
::selection { background: #fecaca; color: var(--ink); }
h1, h2, h3 { font-weight: 700; letter-spacing: -.035em; line-height: 1.14; }
h1 { font-size: clamp(3.2rem, 5vw, 5.2rem); }
h2 { font-size: clamp(2.25rem, 3.7vw, 3.8rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.9rem); }
p { line-height: 1.8; }
.container { width: min(1200px, calc(100% - 64px)); }
.section { padding: 94px 0; }
.section-sm { padding: 70px 0; }
.section-cream, .steps-band { background: #eff6ff; }
.eyebrow, .kicker { letter-spacing: .13em; font-size: .72rem; font-family: var(--serif); }
.eyebrow:before { width: 22px; height: 3px; border-radius: 3px; }
.section-head { max-width: 750px; }
.section-head h2 { margin-bottom: 18px; }
.big-lede { line-height: 1.75; }

.btn { min-height: 50px; padding: 12px 23px; border-radius: 9px; background: linear-gradient(135deg, #dc2626, #b91c1c); border-color: #dc2626; font-family: var(--serif); font-size: .9rem; font-weight: 600; box-shadow: 0 5px 20px rgba(220, 38, 38, .23); }
.btn:hover { background: #991b1b; border-color: #991b1b; box-shadow: 0 9px 24px rgba(220, 38, 38, .28); }
.btn-outline { background: transparent; color: #b91c1c; border-color: #dc2626; box-shadow: none; }
.btn-outline:hover { color: #fff; }
.btn-light { background: #fff; border-color: #fff; color: var(--ink); box-shadow: none; }
.arrow-link { font-family: var(--serif); font-size: .9rem; }
.image-wrap, .image-wrap img { border-radius: 16px; }
.image-note { border-radius: 7px; box-shadow: 0 6px 20px rgba(15, 23, 42, .12); }
.symbol { border-color: #fecaca; background: #fef2f2; font-family: var(--serif); }

/* The dark contact strip and clean sticky navigation come from CardioCare. */
.care-topbar { min-height: 36px; background: #0f172a; color: #cbd5e1; font-size: .75rem; }
.care-topbar-inner { min-height: 36px; width: min(1370px, calc(100% - 64px)); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.care-topbar a { color: #fff; }
.care-topbar a:hover { color: #fca5a5; }
.care-topbar-contact, .care-topbar-secondary { display: inline-flex; align-items: center; gap: 9px; }
.care-topbar-contact { font-weight: 600; }
.care-topbar-secondary { gap: 20px; }
.care-status-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, .14); }
.site-header, .site-header.is-scrolled { height: 76px; background: rgba(255, 255, 255, .97); border-color: var(--hairline); backdrop-filter: blur(16px); }
.site-header.is-scrolled { box-shadow: 0 12px 30px rgba(15, 23, 42, .08); }
.header-inner { width: min(1370px, calc(100% - 64px)); gap: 20px; }
.brand-logo-frame { filter: brightness(0); }
.brand-logo-frame--wordmark { width: 153px; }
.nav-item { height: 76px; }
.nav-link { font-family: var(--serif); font-size: .84rem; font-weight: 600; border-radius: 8px; }
.nav-link:hover, .nav-link.is-active { color: #dc2626; background: #fef2f2; }
.nav-menu { border-radius: 12px; box-shadow: var(--shadow); }
.nav-menu a { border-radius: 7px; font-family: var(--serif); }
.nav-menu a:hover { background: #fef2f2; }
.phone-link { color: #334155; }
.header-actions .btn { border-radius: 8px; }
.mobile-toggle { border-radius: 8px; }

/* CardioCare's navy and red hero applied to the existing Turkish content. */
.home-hero { min-height: 645px; grid-template-columns: minmax(0, 52%) minmax(0, 48%); background: linear-gradient(125deg, #0f172a 0%, #1e293b 65%, #66191e 100%); position: relative; isolation: isolate; }
.home-hero:before, .page-hero--split:before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 17% 18%, rgba(220, 38, 38, .18), transparent 27%), radial-gradient(circle at 85% 72%, rgba(14, 165, 233, .12), transparent 25%); }
.hero-content { padding-top: 85px; padding-bottom: 85px; color: #fff; }
.hero-content .eyebrow { width: fit-content; margin-bottom: 25px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fecaca; letter-spacing: .08em; text-transform: none; font-size: .82rem; }
.hero-content .eyebrow:before { width: 8px; height: 8px; border-radius: 50%; }
.hero-content h1 { font-size: clamp(3.15rem, 4.7vw, 5.2rem); max-width: 650px; font-weight: 800; }
.hero-content h1 span { color: #f87171; }
.hero-content p { color: #cbd5e1; font-size: 1.05rem; line-height: 1.75; }
.hero-content .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .65); }
.hero-content .btn-outline:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.hero-mini { color: #e2e8f0; font-family: var(--serif); font-size: .77rem; }
.hero-mini i { color: #f87171; }
.hero-photo { min-height: 645px; background: transparent; padding: 72px max(46px, calc((100vw - 1224px) / 2)) 72px 12px; display: flex; align-items: center; overflow: visible; }
.hero-photo:before { display: none; }
.hero-photo img { height: 500px; width: 100%; border-radius: 24px; object-fit: cover; box-shadow: 0 30px 60px rgba(0, 0, 0, .24); border: 1px solid rgba(255, 255, 255, .14); }
.hero-photo .image-note { right: max(58px, calc((100vw - 1224px) / 2 + 12px)); bottom: 95px; }

/* Overview cards, process blocks and inner page content. */
.phase-strip { gap: 18px; padding: 34px 0 46px; }
.phase, .step, .fact-item { background: #fff; border: 1px solid var(--hairline); border-radius: 15px; padding: 28px; box-shadow: 0 8px 24px rgba(15, 23, 42, .035); }
.phase-index, .step-number { font-size: 2rem; font-weight: 800; margin-bottom: 14px; }
.phase-index:after, .step-number:after { background: #fecaca; }
.phase h3, .step h3 { font-weight: 700; }
.steps-band .step { background: #fff; }
.feature-story, .story-alt { gap: 16px; }
.story-intro { padding-right: 27px; }
.story-detail { background: #eff6ff; border-radius: 16px; }
.story-detail .big-number, .fact-item .icon-letter { color: #dc2626; font-weight: 700; }
.split-media, .story-media { border-radius: 16px; }
.split-media img, .story-media img { border-radius: 16px; }
.list-simple li:before { color: #dc2626; }
.lead-panel .faq-list { background: #fff; border: 1px solid var(--hairline); border-radius: 15px; padding: 0 26px; box-shadow: 0 8px 24px rgba(15, 23, 42, .035); }
.faq-list { border-top: 0; }
.faq-list details:last-child { border-bottom: 0; }
.cta-band { background: linear-gradient(125deg, #0f172a, #1e293b 68%, #6f2026); }
.cta-band .eyebrow { color: #fca5a5; }
.cta-inner p { color: #cbd5e1; }
.page-hero { background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 72%, #fee2e2 100%); padding: 72px 0 78px; }
.page-hero:after { content: ''; position: absolute; width: 300px; height: 300px; border: 60px solid rgba(220, 38, 38, .045); border-radius: 50%; top: -180px; right: 3%; }
.page-hero h1 { font-weight: 800; font-size: clamp(3rem, 5vw, 5rem); }
.page-hero--split { background: linear-gradient(125deg, #0f172a, #1e293b 68%, #512025); color: #fff; position: relative; padding: 0; }
.page-hero--split .hero-split { position: relative; z-index: 1; }
.page-hero--split .hero-split-copy { padding-top: 60px; padding-bottom: 60px; }
.page-hero--split .hero-split-copy p, .page-hero--split .breadcrumb { color: #cbd5e1; }
.page-hero--split .eyebrow { color: #fca5a5; }
.page-hero--split .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .6); }
.page-hero--split .btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }
.page-hero--split .hero-split-media { padding: 30px; background: transparent; }
.page-hero--split .hero-split-media img { border-radius: 18px; box-shadow: 0 20px 40px rgba(0, 0, 0, .24); }
.page-hero--split .image-note { right: 44px; bottom: 44px; }
.page-hero--dark { background: linear-gradient(125deg, #0f172a, #1e293b 68%, #512025); }
.breadcrumb { font-family: var(--serif); font-size: .78rem; }
.treatment-grid, .related-grid { gap: 22px; }
.treatment-card, .related-tile { border-radius: 15px; box-shadow: 0 8px 24px rgba(15, 23, 42, .04); }
.treatment-card .image-wrap, .treatment-card .image-wrap img { border-radius: 15px 15px 0 0; }
.treatment-card-body { padding: 26px; }
.treatment-card h3, .related-tile h3 { font-weight: 700; }
.fact-item { border: 1px solid var(--hairline); border-top: 3px solid #dc2626; }
.fact-item .icon-letter { font-size: 2.25rem; }
.timeline .timeline-item, .related-tile, .text-panel, .note-block, .alert { border-radius: 14px; }
.timeline .timeline-item { background: #fff; border: 1px solid var(--hairline); border-top: 3px solid #dc2626; padding: 24px; }
.timeline .timeline-item b { font-weight: 700; font-size: 2rem; }
.text-panel, .note-block, .alert, .contact-form, .map-shell { background: #eff6ff; }
.contact-form { border: 1px solid #dbeafe; border-radius: 16px; }
.field input, .field select, .field textarea { border-color: #cbd5e1; border-radius: 8px; }
.map-shell { border-radius: 16px; }
.back-to-top { border-radius: 9px; box-shadow: 0 5px 20px rgba(220, 38, 38, .25); }
.whatsapp-float { background: #0f172a; box-shadow: 0 6px 20px rgba(15, 23, 42, .23); }
.whatsapp-float:hover { background: #dc2626; }
.whatsapp-float:focus-visible { outline-color: #fca5a5; }

/* Navy footer with the existing navigation and legal links. */
.site-footer { background: #0f172a; color: #fff; padding-top: 78px; }
.site-footer .brand-logo-frame { filter: brightness(0) invert(1); }
.footer-brand p, .footer-col p, .footer-col a, .footer-bottom { color: #94a3b8; }
.footer-col h4 { color: #fff; font-family: var(--serif); font-size: .9rem; letter-spacing: 0; text-transform: none; }
.footer-col a:hover, .footer-bottom a, .footer-brand .arrow-link { color: #fca5a5; }
.footer-bottom { border-color: rgba(255, 255, 255, .14); }

@media (max-width: 1260px) {
  .header-inner { gap: 12px; }
  .desktop-nav .nav-link { padding-inline: 7px; }
  .hero-photo { padding-right: 5vw; }
  .hero-photo .image-note { right: calc(5vw + 12px); }
}
@media (max-width: 1040px) {
  .site-header, .site-header.is-scrolled { height: 72px; }
  .mobile-drawer { background: #fff; }
  .hero-photo { min-height: 560px; }
  .hero-photo img { height: 450px; }
}
@media (max-width: 720px) {
  .care-topbar-inner { width: calc(100% - 38px); justify-content: center; }
  .care-topbar-secondary { display: none; }
  .container { width: calc(100% - 38px); }
  .section { padding: 66px 0; }
  .section-sm { padding: 50px 0; }
  .home-hero { display: flex; }
  .hero-content { padding: 56px 21px 30px; }
  .hero-content h1 { font-size: clamp(3rem, 10vw, 4.2rem); }
  .hero-photo { min-height: 300px; height: auto; padding: 10px 21px 40px; }
  .hero-photo img { height: 315px; border-radius: 17px; }
  .hero-photo .image-note { right: 32px; bottom: 52px; }
  .phase-strip { gap: 12px; padding: 26px 0; }
  .phase { display: block; padding: 23px; }
  .phase-index { margin-bottom: 10px; }
  .story-intro { padding-right: 0; }
  .step, .fact-item { padding: 21px; }
  .steps-grid { gap: 12px; }
  .page-hero--split .hero-split-copy { padding: 50px 21px 30px; }
  .page-hero--split .hero-split-media { padding: 0 21px 28px; min-height: 270px; height: 330px; }
  .page-hero--split .image-note { right: 33px; bottom: 40px; }
  .page-hero { padding: 53px 0 58px; }
  .page-hero--split { padding: 0; }
  .lead-panel .faq-list { padding: 0 19px; }
  .site-footer { padding-top: 54px; }
}
@media (max-width: 400px) {
  .steps-grid { grid-template-columns: 1fr; }
  .hero-content h1 { font-size: 2.85rem; }
}