/* Ortak işitme sağlığı sayfa stilleri */
:root { --green:#4CAF50; --dark:#333; --muted:#666; --bg:#f8f9fa; }
body.saglik { background:#fff; }
.page-hero { background: linear-gradient(135deg, var(--green), #388E3C); color:#fff; padding:40px 0; }
.page-hero .container { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.page-hero h1 { margin:0; font-size:2rem; }
.page-section { padding:40px 0; }
.page-card { background:#fff; border:1px solid #eef2f6; border-radius:14px; box-shadow:0 8px 22px rgba(9,30,66,.06); padding:24px; }
.page-breadcrumb { font-size:14px; color:#e8f5e9; opacity:.95 }
.page-breadcrumb a { color:#fff; text-decoration:none; }

/* Hero landing with overlay */
.hero-landing { position:relative; min-height:420px; color:#fff; display:flex; align-items:center; }
.hero-landing .bg { position:absolute; inset:0; background-position:center; background-size:cover; }
.hero-landing .overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)); }
.hero-landing .inner { position:relative; z-index:2; }
.hero-landing h1 { margin:0 0 10px; font-size:2.2rem; font-weight:800; text-shadow:0 2px 6px rgba(0,0,0,.35); }
.hero-landing p { margin:0 0 18px; font-size:1.05rem; opacity:.98 }
.btn.cta { display:inline-flex; align-items:center; gap:8px; background:var(--green); color:#fff; padding:12px 18px; border-radius:10px; text-decoration:none; font-weight:600; }

/* Two-column intro */
.intro-grid { display:grid; grid-template-columns: 1.3fr .7fr; gap:24px; align-items:center; }
.intro-grid .photo { width:100%; height:100%; min-height:260px; background:#f1f5f9 center/cover no-repeat; border-radius:14px; }
.muted { color: var(--muted); }

/* Types cards */
.cards-3 { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; }
.type-card { border:1px solid #eef2f6; border-radius:14px; background:#fff; padding:20px; box-shadow:0 8px 22px rgba(9,30,66,.06); transition: transform .2s ease, box-shadow .2s ease; }
.type-card:hover { transform: translateY(-2px); box-shadow:0 12px 28px rgba(9,30,66,.1); }
.type-card .badge { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:#e8f5e9; color:#2e7d32; font-size:20px; }
.type-card h3 { margin:10px 0 8px; color:#222; font-size:1.15rem; }
.note { background:#f8fafc; border-left:3px solid var(--green); border-radius:10px; padding:12px 14px; color:#2f3b45; margin-top:10px; }

/* Degrees bar */
.degrees { display:grid; grid-template-columns: repeat(5, 1fr); gap:10px; }
.deg { border-radius:12px; padding:14px; color:#fff; text-align:center; cursor:pointer; }
.deg small { display:block; opacity:.9 }
.deg.normal { background:#43a047; }
.deg.hafif { background:#fdd835; color:#2f3b45; }
.deg.orta { background:#fb8c00; }
.deg.ileri { background:#e53935; }
.deg.cokileri { background:#8e0000; }
.deg-details { margin-top:16px; display:grid; gap:10px; }
.deg-details .detail { background:#fff; border:1px solid #eef2f6; border-radius:10px; padding:16px; }

/* Solutions split sections */
.split { display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:center; }
.split .img { width:100%; min-height:260px; background:#e9eef5 center/cover no-repeat; border-radius:14px; }
.list { margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.list li { display:flex; gap:10px; align-items:center; }
.list i { color:var(--green); font-size:16px; width:20px; text-align:center; flex-shrink:0; }
.section-muted { background:#f6f7f9; border-top:1px solid #eef2f6; border-bottom:1px solid #eef2f6; }

/* Quote highlight */
.quote { border-left:4px solid var(--green); background:#f8fafc; padding:16px; border-radius:12px; font-style:italic; }
.expert { display:flex; gap:14px; align-items:center; }
.expert .avatar { width:72px; height:72px; border-radius:50%; background:#e0e7ff center/cover no-repeat; }

/* Accordion */
.accordion { border:1px solid #e7eef6; border-radius:12px; overflow:hidden; background:#fff; }
.acc-item + .acc-item { border-top:1px solid #e7eef6; }
.acc-head { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; cursor:pointer; font-weight:600; }
.acc-body { display:none; padding:0 16px 16px; color:#2f3b45; }
.acc-item.active .acc-body { display:block; }

/* CTA grid */
.cta-cards { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; }
.cta-card { border:1px solid #eef2f6; border-radius:14px; padding:18px; background:#fff; box-shadow:0 8px 22px rgba(9,30,66,.06); display:flex; flex-direction:column; gap:8px; }
.cta-card img { width:100%; height:160px; object-fit:cover; border-radius:10px; background:#e9eef5; }
.cta-actions { margin-top:20px; background:var(--green); color:#fff; padding:20px; border-radius:14px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cta-actions .btn { background:#fff; color:#2e7d32; border-radius:10px; padding:10px 14px; text-decoration:none; font-weight:700; }

/* Responsive */
@media (max-width: 992px) {
  .intro-grid, .split { grid-template-columns: 1fr; }
  .cards-3, .cta-cards { grid-template-columns: 1fr; }
  .degrees { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .type-card {
    text-align: left;
    padding: 24px 20px;
  }
  
  .type-card .badge {
    float: none;
    margin: 0 auto 15px auto;
    display: block;
    width: 50px;
    height: 50px;
    font-size: 22px;
  }
  
  .type-card h3 {
    clear: both;
    margin: 15px 0 12px 0;
    text-align: center;
  }
  
  .type-card p.muted {
    text-align: left;
    margin-bottom: 15px;
  }
  
  .type-card .note {
    text-align: left;
    margin-top: 15px;
  }
}

/* Additional for belirtileri page */
.cards-2 { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px; }
.symptom-card { background:#fff; border:1px solid #eef2f6; border-radius:14px; padding:18px; box-shadow:0 8px 22px rgba(9,30,66,.06); display:flex; gap:12px; align-items:flex-start; }
.symptom-card .ico { width:42px; height:42px; border-radius:10px; background:#e8f5e9; color:#2e7d32; display:flex; align-items:center; justify-content:center; font-size:18px; flex:0 0 auto; }
.symptom-card h3 { margin:4px 0 6px; font-size:1.05rem; }
.tabs { border-bottom:1px solid #e7eef6; display:flex; gap:8px; flex-wrap:wrap; }
.tab { padding:10px 14px; border:1px solid #e7eef6; border-bottom:none; border-radius:10px 10px 0 0; background:#f8fafc; cursor:pointer; font-weight:600; }
.tab.active { background:#fff; color:#2e7d32; border-color:#d8e6d8; }
.tab-panels { border:1px solid #e7eef6; border-radius:0 12px 12px 12px; padding:16px; background:#fff; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.btn.cta-big { display:inline-flex; align-items:center; gap:8px; background:var(--green); color:#fff; padding:14px 20px; border-radius:12px; text-decoration:none; font-weight:700; }

@media (max-width: 768px) {
  .cards-2 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .type-card {
    padding: 20px 16px;
    text-align: center;
  }
  
  .type-card .badge {
    width: 44px;
    height: 44px;
    font-size: 20px;
    margin: 0 auto 12px auto;
  }
  
  .type-card h3 {
    font-size: 1.1rem;
    margin: 12px 0 10px 0;
  }
  
  .type-card p.muted {
    font-size: 14px;
    line-height: 1.6;
  }
  
  .type-card .note {
    font-size: 13px;
    padding: 10px 12px;
    margin-top: 12px;
  }
}

/* Nedenleri sayfası: iki sütun karşılaştırma ve ikonlu listeler */
.causes-compare { display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
.cause { background:#fff; border:1px solid #eef2f6; border-radius:14px; padding:18px; box-shadow:0 8px 22px rgba(9,30,66,.06); }
.cause h3 { margin:6px 0 10px; display:flex; align-items:center; gap:8px; }
.icon-list { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.icon-list li { display:flex; gap:10px; align-items:center; color:#2f3b45; }
.icon-list i { color:var(--green); font-size:16px; width:20px; text-align:center; flex-shrink:0; }
.risk-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }
.risk-card { background:#fff; border:1px solid #eef2f6; border-radius:14px; padding:18px; box-shadow:0 8px 22px rgba(9,30,66,.06); text-align:center; }
.risk-card .ico { width:54px; height:54px; border-radius:14px; background:#e8f5e9; color:#2e7d32; display:flex; align-items:center; justify-content:center; font-size:22px; margin:0 auto 8px; }
.section-alt { background:#f6f7f9; border-top:1px solid #eef2f6; border-bottom:1px solid #eef2f6; }

@media (max-width: 992px) {
  .causes-compare { grid-template-columns: 1fr; }
  .risk-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .risk-grid { grid-template-columns: 1fr; }
}

/* Frequency spectrum helper */
.spectrum { position:relative; border-radius:14px; background:#f3f6fb; padding:16px; border:1px solid #e7eef6; }
.spectrum .bar { position:relative; height:64px; border-radius:12px; overflow:hidden; box-shadow: inset 0 0 0 1px #e7eef6; background:linear-gradient(90deg, rgba(76,175,80,0.22) 0%, rgba(255,193,7,0.22) 35%, rgba(255,152,0,0.22) 55%, rgba(244,67,54,0.22) 80%, rgba(198,40,40,0.26) 100%); }
.spectrum .ticks { position:absolute; inset:0; display:flex; justify-content:space-between; align-items:flex-end; padding:6px; pointer-events:none; }
.spectrum .tick { width:1px; height:28px; background:#d7e2ee; }
.spectrum .labels { display:flex; justify-content:space-between; margin-top:10px; }
.spectrum .pill { background:#fff; border:1px solid #e7eef6; border-radius:999px; padding:8px 12px; color:#2f3b45; box-shadow:0 4px 14px rgba(9,30,66,.06); font-weight:600; }
.spectrum .legend { display:flex; justify-content:space-between; margin-top:8px; font-size:.9rem; color:#556070; }
.spectrum .legend .item { display:flex; align-items:center; gap:8px; }
.spectrum .legend .dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.spectrum .legend .low { background:#43a047; }
.spectrum .legend .mid { background:#fb8c00; }
.spectrum .legend .high { background:#e53935; }
.h-note { color:#2f3b45; margin:0 0 10px; }

/* Prevention page: dB infographic and tips grid */
.db-scale { display:grid; grid-template-columns: 1.1fr .9fr; gap:22px; align-items:center; }
.db-area { position:relative; min-width:420px; }
.db-meter { position:relative; width:120px; height:380px; border-radius:16px; border:1px solid #e7eef6; background:linear-gradient(180deg, #43a047 0%, #fdd835 35%, #fb8c00 60%, #e53935 85%, #8e0000 100%); box-shadow:inset 0 0 0 2px rgba(255,255,255,.3); margin-left:140px; }
.db-marker { position:absolute; left:140px; transform:translateX(-10px); display:flex; flex-direction:row-reverse; align-items:center; gap:10px; }
.db-marker .dot { width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px rgba(0,0,0,.12); }
.db-marker .tag { background:#ffffffee; border:1px solid #e7eef6; border-radius:999px; padding:8px 12px; font-size:.9rem; white-space:nowrap; box-shadow:0 4px 14px rgba(9,30,66,.1); backdrop-filter:saturate(1.1) blur(2px); }
.db-marker .tag::after { content:""; display:inline-block; width:26px; height:2px; background:#e7eef6; margin-left:8px; border-radius:2px; }
.db-list { display:grid; gap:10px; }
.db-item { display:flex; gap:10px; align-items:center; background:#fff; border:1px solid #eef2f6; border-radius:12px; padding:10px 12px; box-shadow:0 8px 22px rgba(9,30,66,.06); }
.db-item i { color:#2e7d32; font-size:16px; width:20px; text-align:center; flex-shrink:0; }

.tips-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }
.tip-card { background:#fff; border:1px solid #eef2f6; border-radius:14px; padding:16px; box-shadow:0 8px 22px rgba(9,30,66,.06); transition:transform .2s ease, box-shadow .2s ease; display:flex; gap:12px; }
.tip-card:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(9,30,66,.1); }
.tip-card .ico { width:44px; height:44px; border-radius:10px; background:#e8f5e9; color:#2e7d32; display:flex; align-items:center; justify-content:center; font-size:18px; }
.tip-card h3 { margin:2px 0 6px; font-size:1.05rem; }

@media (max-width: 992px) {
  .db-scale { grid-template-columns: 1fr; }
  .db-area { min-width:0; }
  .db-meter { margin-left:0; }
  .tips-grid { grid-template-columns: 1fr; }
}

/* Waves and anatomy/process helpers */
.wave-card { background:#fff; border:1px solid #eef2f6; border-radius:14px; padding:16px; box-shadow:0 8px 22px rgba(9,30,66,.06); }
.waves { display:grid; gap:12px; }
.wave { height:64px; border-radius:10px; background:repeating-linear-gradient(90deg, rgba(46,125,50,.15) 0 12px, rgba(46,125,50,.05) 12px 24px); position:relative; overflow:hidden; }
.wave.low { background:repeating-linear-gradient(90deg, rgba(46,125,50,.2) 0 26px, rgba(46,125,50,.06) 26px 52px); }
.wave.high { background:repeating-linear-gradient(90deg, rgba(229,57,53,.2) 0 8px, rgba(229,57,53,.06) 8px 16px); }
.wave .tag { position:absolute; right:10px; top:10px; background:#fff; border:1px solid #e7eef6; border-radius:999px; padding:6px 10px; font-size:.9rem; color:#2f3b45; }
.anatomy { background:#fff; border:1px solid #eef2f6; border-radius:14px; padding:16px; box-shadow:0 8px 22px rgba(9,30,66,.06); text-align:center; }
.anatomy .img { width:100%; height:320px; border-radius:10px; background:#e9eef5 center/contain no-repeat; }

.steps { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
.step { background:#fff; border:1px solid #eef2f6; border-radius:14px; padding:16px; box-shadow:0 8px 22px rgba(9,30,66,.06); position:relative; }
.step .num { width:32px; height:32px; border-radius:999px; background:#e8f5e9; color:#2e7d32; display:flex; align-items:center; justify-content:center; font-weight:700; position:absolute; top:-16px; left:16px; box-shadow:0 4px 10px rgba(9,30,66,.08); }
.step h4 { margin:14px 0 8px; }

.range-band { border:1px solid #e7eef6; border-radius:14px; background:#fff; padding:16px; box-shadow:0 8px 22px rgba(9,30,66,.06); }
.range-band .bar { height:26px; border-radius:999px; background:linear-gradient(90deg,#8e24aa 0%, #43a047 20%, #43a047 80%, #1e88e5 100%); position:relative; }
.range-band .zones { display:flex; justify-content:space-between; margin-top:8px; font-size:.9rem; color:#556070; }
.range-band .badge { background:#fff; border:1px solid #e7eef6; border-radius:999px; padding:6px 10px; font-weight:600; box-shadow:0 4px 12px rgba(9,30,66,.06); position:absolute; top:50%; transform:translateY(-50%); }
.range-band .human { left:22%; }
.range-band .infra { left:-6px; transform:none; top: -34px; }
.range-band .ultra { right:-6px; transform:none; top: -34px; }

@media (max-width: 992px) {
  .steps { grid-template-columns: 1fr; }
}

/* Care page: DO/DON'T compare, grids, warnings */
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.compare .card { background:#fff; border:1px solid #eef2f6; border-radius:16px; padding:18px; box-shadow:0 10px 26px rgba(9,30,66,.08); display:flex; gap:14px; align-items:center; }
.compare .badge { width:44px; height:44px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; box-shadow:0 8px 18px rgba(9,30,66,.08); }
.compare .bad .badge { background:#fdecea; color:#c62828; }
.compare .good .badge { background:#e8f5e9; color:#2e7d32; }
.compare .bad { border-left:5px solid #e53935; }
.compare .good { border-left:5px solid #2e7d32; }
.compare .label { display:inline-block; padding:6px 10px; border-radius:999px; font-size:.8rem; font-weight:700; letter-spacing:.2px; margin:0 0 6px; border:1px solid #eef2f6; }
.compare .bad .label { background:#fff5f4; color:#c62828; border-color:#ffd8d3; }
.compare .good .label { background:#f0fbf2; color:#2e7d32; border-color:#cfe9d4; }

.soft-warning { background:#fff7ec; border:1px solid #ffe9cc; border-radius:14px; padding:16px; }
.soft-warning .card { background:#fff; border:1px solid #ffe2b8; border-radius:14px; padding:16px; box-shadow:0 10px 24px rgba(255,150,0,.12); display:flex; gap:12px; align-items:center; border-left:5px solid #ffb74d; }
.soft-warning .ico { width:44px; height:44px; border-radius:999px; background:#fff3e0; color:#ff8a00; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 14px rgba(255,150,0,.18); }

.cta-row { margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }

@media (max-width: 992px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* Tinnitus page helpers */
.icon-item { display:flex; gap:10px; align-items:center; background:#fff; border:1px solid #eef2f6; border-radius:12px; padding:10px 12px; box-shadow:0 8px 22px rgba(9,30,66,.06); }
.icon-item .ico { width:36px; height:36px; border-radius:999px; background:#eef6ff; color:#1e88e5; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.stat-band { background:#f6f8fb; border:1px solid #e7eef6; border-radius:16px; padding:22px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.stat-band .big { font-size:42px; font-weight:800; color:#2f3b45; }
.stat-band .desc { color:#4b5b6a; line-height:1.7; }

.tabs { background:#fff; border:1px solid #eef2f6; border-radius:16px; box-shadow:0 8px 22px rgba(9,30,66,.06); }
.tab-nav { display:flex; gap:8px; padding:10px; border-bottom:1px solid #eef2f6; flex-wrap:wrap; }
.tab-btn { background:#f5f8fb; border:1px solid #e7eef6; border-radius:999px; padding:8px 12px; font-weight:600; color:#334155; cursor:pointer; }
.tab-btn.active { background:#e8f5e9; color:#2e7d32; border-color:#cfe9d4; }
.tab-panels { padding:16px; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

@media (max-width: 768px) {
  .stat-band { flex-direction:column; align-items:flex-start; }
}

/* Myth & Fact cards */
.mf-card { background:#fff; border:1px solid #eef2f6; border-radius:16px; box-shadow:0 10px 26px rgba(9,30,66,.08); overflow:hidden; }
.mf-inner { display:grid; grid-template-columns: 1fr 1fr; }
.mf-left, .mf-right { padding:18px; }
.mf-left { background:#fff5f4; border-right:1px solid #f1d6d3; }
.mf-right { background:#f6fbf7; }
.mf-head { display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.2px; margin:0 0 8px; }
.mf-head .tag { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:.85rem; border:1px solid #e7eef6; }
.mf-left .tag { background:#ffecea; color:#c62828; border-color:#ffd8d3; }
.mf-right .tag { background:#e8f5e9; color:#2e7d32; border-color:#cfe9d4; }
.didyouknow { background:#fff; border:1px dashed #cfe9d4; border-radius:12px; padding:10px 12px; margin-top:8px; color:#2f3b45; display:flex; gap:8px; align-items:center; }
.didyouknow i { color:#2e7d32; font-size:16px; width:20px; text-align:center; flex-shrink:0; }

@media (max-width: 992px) {
  .mf-inner { grid-template-columns: 1fr; }
  .mf-left { border-right:none; border-bottom:1px solid #f1d6d3; }
}