/* ═══════════════════════════════════════════
   BÜTÜNSEL GÜZELLİK (HOLİSTİK) — STYLES
   ═══════════════════════════════════════════ */

/* ─── Hero ─── */
.hol-hero {
  text-align: center;
  padding: 2.5rem 1.5rem 2rem;
  background: linear-gradient(135deg, var(--bg) 0%, #e8e0d8 50%, #d9cfc4 100%);
  position: relative;
}

[data-theme="dark"] .hol-hero {
  background: linear-gradient(135deg, var(--bg) 0%, rgba(184,146,106,.08) 50%, rgba(120,90,60,.06) 100%);
}

.hol-hero__inner {
  max-width: 700px;
  margin: 0 auto;
}

.hol-hero__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.hol-back {
  font-family: var(--font-sans);
  font-size: .85rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  transition: opacity var(--transition);
}
.hol-back:hover { opacity: .7; }

.hol-hero__badge {
  display: inline-block;
  background: linear-gradient(135deg, #7c6f5b, #a08c6e);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .3rem .9rem;
  border-radius: 999px;
  margin-bottom: .75rem;
}

.hol-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 700;
  color: var(--text);
  margin-bottom: .5rem;
}

.hol-hero__subtitle {
  font-size: .95rem;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 580px;
  margin: 0 auto;
}

/* ─── Profile (personalization) ─── */
.hol-profile {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.hol-profile__label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 .5rem 0;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.hol-profile__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.hol-profile__chips:last-of-type {
  margin-bottom: 0;
}

.hol-profile__chip {
  padding: .4rem .75rem;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}

.hol-profile__chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.hol-profile__chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ─── Tab Nav ─── */
.hol-tabs {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}

.hol-tabs__scroll {
  display: flex;
  overflow-x: auto;
  gap: 0;
  max-width: 900px;
  margin: 0 auto;
  scrollbar-width: none;
}
.hol-tabs__scroll::-webkit-scrollbar { display: none; }

.hol-tab {
  flex: 1;
  min-width: max-content;
  padding: .9rem 1.25rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all var(--transition);
}

.hol-tab:hover { color: var(--text); }

.hol-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* ─── In-page search ─── */
.hol-search-wrap {
  padding: .6rem 1rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 49;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}

.hol-search {
  flex: 1;
  min-width: 200px;
  max-width: 400px;
  padding: .6rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: .9rem;
  background: var(--bg-card);
  color: var(--text);
}

.hol-print-btn {
  padding: .5rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}

.hol-print-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.hol-section.search-highlight {
  animation: searchHighlight 2.5s ease;
}

@keyframes searchHighlight {
  0%, 100% { background: transparent; }
  15% { background: rgba(201, 169, 110, 0.2); }
  50% { background: rgba(201, 169, 110, 0.15); }
}

/* ─── Sections ─── */
.hol-section {
  padding: 2rem 0 3rem;
  animation: holFadeIn .4s ease;
}

@keyframes holFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hol-section__intro {
  text-align: center;
  margin-bottom: 2rem;
}

.hol-section__title {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  font-weight: 700;
  color: var(--text);
  margin-bottom: .4rem;
}

.hol-section__desc {
  font-size: .92rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.hol-subsection-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  margin: 2.5rem 0 1rem;
  text-align: center;
}

/* ─── Info Box ─── */
.hol-info-box {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow);
  margin: 2rem 0;
  border-left: 4px solid var(--accent);
  transition: background var(--transition);
}

.hol-info-box--green { border-left-color: #4ecdc4; }
.hol-info-box--purple { border-left-color: #7c6fdb; }

.hol-info-box__title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: .75rem;
  color: var(--text);
}

.hol-info-box__content {
  font-size: .9rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

.hol-info-box__content p { margin-bottom: .6rem; }
.hol-info-box__content strong { color: var(--text); }

.hol-info-box__content ul {
  padding-left: 1.25rem;
  margin: .5rem 0;
}

.hol-info-box__content li {
  margin-bottom: .4rem;
}

/* ═══ AROMATERAPI: Oil Cards ═══ */
.oil-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.oil-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  border-top: 3px solid var(--accent);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  cursor: default;
}

.oil-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.oil-card__header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}

.oil-card__emoji {
  font-size: 2rem;
  line-height: 1;
}

.oil-card__name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text);
}

.oil-card__latin {
  font-size: .75rem;
  color: var(--text-muted);
  font-style: italic;
  display: block;
}

.oil-card__molecule {
  display: inline-block;
  background: var(--bg-pill);
  color: var(--text-secondary);
  font-size: .72rem;
  font-weight: 500;
  padding: .2rem .6rem;
  border-radius: 999px;
  margin-bottom: .6rem;
}

.oil-card__desc {
  font-size: .85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: .75rem;
}

.oil-card__effects {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.oil-card__tag {
  font-size: .7rem;
  font-weight: 500;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: var(--accent-light);
  color: var(--accent);
}

/* ─── Usage Grid ─── */
.usage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.usage-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  transition: background var(--transition);
}

.usage-card__icon {
  font-size: 1.5rem;
  margin-bottom: .5rem;
}

.usage-card h4 {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .5rem;
  color: var(--text);
}

.usage-card p {
  font-size: .82rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: .35rem;
}

/* ═══ BESLENME: Nutrition ═══ */
.nutr-categories {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.nutr-cat {
  padding: .45rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}

.nutr-cat:hover { border-color: var(--accent); color: var(--accent); }
.nutr-cat.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ─── Oil categories (Aromaterapi filters) ─── */
.oil-categories {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.oil-cat {
  padding: .45rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.oil-cat:hover { border-color: var(--accent); color: var(--accent); }
.oil-cat.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.oil-card__cat-badge {
  display: inline-block;
  font-size: .7rem;
  color: var(--text-secondary);
  margin-bottom: .35rem;
}

.nutr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

.nutr-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.nutr-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.nutr-card[hidden] { display: none; }

.nutr-card__header {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .6rem;
}

.nutr-card__emoji { font-size: 1.6rem; line-height: 1; }

.nutr-card__name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}

.nutr-card__cat-badge {
  font-size: .68rem;
  font-weight: 500;
  padding: .15rem .5rem;
  border-radius: 999px;
  margin-bottom: .5rem;
  display: inline-block;
}

.nutr-card__cat-badge--antioxidant { background: #fde2e2; color: #c0392b; }
.nutr-card__cat-badge--collagen    { background: #e2f0fd; color: #2980b9; }
.nutr-card__cat-badge--omega       { background: #fdf5e2; color: #d4a017; }
.nutr-card__cat-badge--gut         { background: #e2fde8; color: #27ae60; }
.nutr-card__cat-badge--avoid       { background: #f0e2fd; color: #8e44ad; }

[data-theme="dark"] .nutr-card__cat-badge--antioxidant { background: rgba(192,57,43,.15); }
[data-theme="dark"] .nutr-card__cat-badge--collagen    { background: rgba(41,128,185,.15); }
[data-theme="dark"] .nutr-card__cat-badge--omega       { background: rgba(212,160,23,.15); }
[data-theme="dark"] .nutr-card__cat-badge--gut         { background: rgba(39,174,96,.15); }
[data-theme="dark"] .nutr-card__cat-badge--avoid       { background: rgba(142,68,173,.15); }

.nutr-card__desc {
  font-size: .85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: .5rem;
}

.nutr-card__highlight {
  font-size: .78rem;
  color: var(--accent);
  font-weight: 500;
  font-style: italic;
}

/* ─── Meal Timeline ─── */
.meal-timeline {
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  padding-left: 2.5rem;
}

.meal-timeline::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.meal-item {
  position: relative;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: background var(--transition);
}

.meal-item::before {
  content: "";
  position: absolute;
  left: -1.85rem;
  top: 1.25rem;
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: 50%;
  border: 2px solid var(--bg);
}

.meal-item__time {
  font-size: .75rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: .3rem;
  letter-spacing: .04em;
}

.meal-item__content h4 {
  font-family: var(--font-serif);
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: .3rem;
  color: var(--text);
}

.meal-item__content p {
  font-size: .82rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ═══ SES TERAPİSİ: Frequency Player ═══ */
.freq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.freq-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.25rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: all var(--transition);
  cursor: pointer;
  border: 2px solid transparent;
  user-select: none;
}

.freq-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.freq-card.playing {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(201,169,110,.15), var(--shadow-lg);
}

.freq-card__hz {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: .25rem;
}

.freq-card__unit {
  font-size: .75rem;
  color: var(--text-muted);
  margin-bottom: .5rem;
}

.freq-card__name {
  font-weight: 600;
  font-size: .85rem;
  color: var(--text);
  margin-bottom: .3rem;
}

.freq-card__desc {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: .75rem;
}

.freq-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all var(--transition);
}

.freq-card__btn:hover,
.freq-card.playing .freq-card__btn {
  background: var(--accent);
  color: #fff;
}

/* Volume slider */
.freq-card__volume {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .6rem;
  justify-content: center;
}

.freq-card__volume span {
  font-size: .75rem;
  color: var(--text-muted);
}

.freq-card__volume input[type="range"] {
  width: 80px;
  height: 4px;
  accent-color: var(--accent);
}

/* ─── Ambient Mixer ─── */
.ambient-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .75rem;
}

.ambient-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1rem .75rem;
  text-align: center;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: all var(--transition);
  border: 2px solid transparent;
  user-select: none;
}

.ambient-card:hover {
  box-shadow: var(--shadow-lg);
}

.ambient-card.active {
  border-color: var(--accent);
}

.ambient-card__icon {
  font-size: 1.8rem;
  margin-bottom: .4rem;
}

.ambient-card__name {
  font-size: .8rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: .4rem;
}

.ambient-card__slider {
  width: 100%;
  height: 4px;
  accent-color: var(--accent);
}

/* ─── Meditations ─── */
.meditation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.med-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  transition: all var(--transition);
}

.med-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.med-card__header {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .6rem;
}

.med-card__emoji { font-size: 1.5rem; }

.med-card__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}

.med-card__duration {
  font-size: .72rem;
  color: var(--text-muted);
  background: var(--bg-pill);
  padding: .15rem .5rem;
  border-radius: 999px;
  margin-bottom: .5rem;
  display: inline-block;
}

.med-card__desc {
  font-size: .85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: .75rem;
}

.med-card__steps {
  list-style: none;
  padding: 0;
}

.med-card__steps li {
  font-size: .8rem;
  color: var(--text-secondary);
  padding: .3rem 0 .3rem 1.2rem;
  position: relative;
  line-height: 1.5;
}

.med-card__steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6rem;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

.med-card__play-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.25rem;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  margin-top: .75rem;
}

.med-card__play-btn:hover {
  background: var(--accent);
  color: #fff;
}

/* ─── Skin type guide (accordion) ─── */
.skin-type-accordion {
  max-width: 640px;
  margin: 0 auto;
}

.skin-type-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: .5rem;
  overflow: hidden;
  background: var(--bg-card);
  transition: background var(--transition);
}

.skin-type-btn {
  width: 100%;
  padding: .9rem 1rem;
  text-align: left;
  border: none;
  background: transparent;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.skin-type-btn::after {
  content: "▼";
  font-size: .7rem;
  color: var(--text-muted);
  transition: transform var(--transition);
}

.skin-type-item .skin-type-btn[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.skin-type-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

.skin-type-content.open {
  max-height: 500px;
}

.skin-type-content p {
  padding: 0 1rem 1rem;
  margin: 0;
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ─── Concern oils grid ─── */
.concern-oils-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.concern-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  transition: background var(--transition);
}

.concern-card__title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .5rem;
  color: var(--text);
}

.concern-card__oils {
  font-size: .82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ─── Recipes grid ─── */
.recipes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.recipe-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--accent);
  transition: background var(--transition);
}

.recipe-card__title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: .75rem;
  color: var(--text);
}

.recipe-card__ingredients,
.recipe-card__steps {
  font-size: .85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: .5rem;
}

.recipe-card__warnings {
  font-size: .8rem;
  color: var(--accent);
  font-style: italic;
  margin: .5rem 0 0;
}

/* ─── Weekly menu ─── */
.weekly-menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.weekly-menu__day {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  transition: background var(--transition);
}

.weekly-menu__day-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--accent);
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}

.weekly-menu__meals p {
  font-size: .8rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: .4rem;
}

/* ─── Snacks grid ─── */
.snacks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .75rem;
  margin-bottom: 2rem;
}

.snack-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
  transition: background var(--transition);
}

.snack-card__name {
  font-weight: 600;
  font-size: .9rem;
  color: var(--text);
  display: block;
  margin-bottom: .25rem;
}

.snack-card__benefit {
  font-size: .8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ─── Supplement table ─── */
.supplement-table-wrap {
  overflow-x: auto;
  margin-bottom: 2rem;
}

.supplement-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  background: var(--bg-card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.supplement-table th,
.supplement-table td {
  padding: .75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.supplement-table th {
  background: var(--bg-pill);
  font-weight: 600;
  color: var(--text);
}

.supplement-table td {
  color: var(--text-secondary);
}

/* ─── Frequency explained ─── */
.freq-explained-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 2rem;
}

.freq-explained-item {
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  padding: .75rem 1rem;
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: background var(--transition);
}

/* ─── Breathing exercises ─── */
.breathing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.breathing-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  transition: background var(--transition);
}

.breathing-card__title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .5rem;
  color: var(--text);
}

.breathing-card__steps {
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: .5rem;
}

.breathing-card__duration {
  font-size: .78rem;
  color: var(--accent);
  font-weight: 500;
}

/* ─── FAQ ─── */
.faq-list {
  max-width: 640px;
  margin: 0 auto;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: .5rem;
  overflow: hidden;
  background: var(--bg-card);
  transition: background var(--transition);
}

.faq-item__q {
  width: 100%;
  padding: 1rem 1.25rem;
  text-align: left;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .95rem;
  color: var(--text);
  cursor: pointer;
}

.faq-item__q::after {
  content: "▼";
  float: right;
  font-size: .7rem;
  color: var(--text-muted);
  transition: transform var(--transition);
}

.faq-item__q[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.faq-item__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

.faq-item__a.open {
  max-height: 400px;
}

.faq-item__a p {
  padding: 0 1.25rem 1rem;
  margin: 0;
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ─── Glossary ─── */
.glossary-search-wrap {
  margin-bottom: 1.5rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.glossary-search {
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: .95rem;
  background: var(--bg-card);
  color: var(--text);
}

.glossary-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  max-width: 640px;
  margin: 0 auto;
}

.glossary-item {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow);
  transition: background var(--transition);
}

.glossary-term {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  margin: 0 0 .35rem 0;
}

.glossary-def {
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* ─── Routine ─── */
.routine-block {
  margin-bottom: 2rem;
}

.routine-steps {
  padding-left: 1.5rem;
  margin: .5rem 0;
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.routine-steps li {
  margin-bottom: .4rem;
}

/* ─── Seasonal ─── */
.seasonal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

.seasonal-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  transition: background var(--transition);
}

.seasonal-card__title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: .5rem;
  color: var(--accent);
}

.seasonal-card__text {
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* ─── Sleep section (Uyku ve Cilt) ─── */
.sleep-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sleep-checklist li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .6rem;
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.sleep-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.sleep-tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.sleep-tip-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  border-left: 4px solid var(--accent);
  transition: background var(--transition);
}

.sleep-faq {
  max-width: 640px;
  margin: 0 auto;
}

/* ─── Stress section (Stres Yönetimi) ─── */
.stress-mood-widget {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow);
  border-left: 4px solid #8e44ad;
  transition: background var(--transition);
}

.stress-mood-widget__label {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  margin: 0 0 .75rem 0;
}

.stress-mood-widget__scale {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}

.stress-mood-widget__scale button {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  transition: all var(--transition);
}

.stress-mood-widget__scale button:hover {
  border-color: #8e44ad;
  color: #8e44ad;
}

.stress-mood-widget__scale button.active {
  background: #8e44ad;
  border-color: #8e44ad;
  color: #fff;
}

.stress-mood-widget__hint,
.stress-mood-widget__feedback {
  font-size: .88rem;
  color: var(--text-secondary);
  margin: .5rem 0 0 0;
  line-height: 1.5;
}

.stress-mood-widget__feedback {
  color: #8e44ad;
  font-weight: 500;
}

.stress-mood-widget__link {
  display: inline-block;
  margin-top: .75rem;
  font-size: .88rem;
  font-weight: 600;
  color: #8e44ad;
  text-decoration: none;
}

.stress-mood-widget__link:hover {
  text-decoration: underline;
}

.stress-signs-list {
  padding-left: 1.25rem;
  margin: 0;
}

.stress-signs-list li {
  margin-bottom: .4rem;
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.stress-pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stress-pillar-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  border-top: 3px solid #8e44ad;
  transition: background var(--transition);
}

.stress-pillar-card h4 {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 .5rem 0;
  color: var(--text);
}

.stress-pillar-card p {
  font-size: .86rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.stress-habits-list {
  padding-left: 1.25rem;
  margin: 0;
}

.stress-habits-list li {
  margin-bottom: .5rem;
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.stress-quick-relief {
  margin-bottom: 2rem;
}

.stress-relief-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: .5rem;
  overflow: hidden;
  background: var(--bg-card);
  transition: background var(--transition);
}

.stress-relief-btn {
  width: 100%;
  padding: 1rem 1.25rem;
  text-align: left;
  border: none;
  background: transparent;
  font-weight: 600;
  font-size: .95rem;
  color: var(--text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stress-relief-btn::after {
  content: "▼";
  font-size: .7rem;
  color: var(--text-muted);
  transition: transform var(--transition);
}

.stress-relief-btn[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.stress-relief-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

.stress-relief-content.open {
  max-height: 300px;
}

.stress-relief-content p {
  padding: 0 1.25rem 1rem;
  margin: 0;
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.stress-checklist-wrap {
  margin-bottom: 2rem;
}

.stress-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.stress-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .6rem 0;
  cursor: pointer;
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.stress-checklist-item input {
  margin-top: .25rem;
  accent-color: #8e44ad;
}

.stress-tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stress-tip-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  border-left: 4px solid #8e44ad;
  transition: background var(--transition);
}

.stress-faq {
  max-width: 640px;
  margin: 0 auto 2rem;
}

/* ─── Exercise section (Egzersiz ve Cilt) ─── */
.exercise-track-widget {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow);
  border-left: 4px solid #27ae60;
  transition: background var(--transition);
}

.exercise-track-widget__label {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  margin: 0 0 .75rem 0;
}

.exercise-track-widget__options {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .75rem;
}

.exercise-track-widget__options button {
  padding: .5rem 1rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: .88rem;
  cursor: pointer;
  transition: all var(--transition);
}

.exercise-track-widget__options button:hover {
  border-color: #27ae60;
  color: #27ae60;
}

.exercise-track-widget__options button.active {
  background: #27ae60;
  border-color: #27ae60;
  color: #fff;
}

.exercise-track-widget__weekly {
  font-size: .88rem;
  color: var(--text-secondary);
  margin: 0 0 .5rem 0;
}

.exercise-track-widget__link {
  display: inline-block;
  margin-top: .5rem;
  font-size: .88rem;
  font-weight: 600;
  color: #27ae60;
  text-decoration: none;
}

.exercise-track-widget__link:hover {
  text-decoration: underline;
}

.exercise-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.exercise-type-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  border-top: 3px solid #27ae60;
  transition: background var(--transition);
}

.exercise-type-card h4 {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 .5rem 0;
  color: var(--text);
}

.exercise-type-card p {
  font-size: .86rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.exercise-myths-list {
  margin-bottom: 2rem;
}

.exercise-myth-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: .5rem;
  overflow: hidden;
  background: var(--bg-card);
  transition: background var(--transition);
}

.exercise-myth-btn {
  width: 100%;
  padding: 1rem 1.25rem;
  text-align: left;
  border: none;
  background: transparent;
  font-weight: 600;
  font-size: .9rem;
  color: var(--text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.exercise-myth-btn::after {
  content: "▼";
  font-size: .7rem;
  color: var(--text-muted);
  transition: transform var(--transition);
}

.exercise-myth-btn[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.exercise-myth-q {
  font-style: italic;
  color: var(--text-secondary);
}

.exercise-myth-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

.exercise-myth-content.open {
  max-height: 200px;
}

.exercise-myth-content p {
  padding: 0 1.25rem 1rem;
  margin: 0;
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.exercise-checklist-wrap {
  margin-bottom: 2rem;
}

.exercise-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.exercise-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .6rem 0;
  cursor: pointer;
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.exercise-checklist-item input {
  margin-top: .25rem;
  accent-color: #27ae60;
}

.exercise-tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.exercise-tip-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  border-left: 4px solid #27ae60;
  transition: background var(--transition);
}

.exercise-faq {
  max-width: 640px;
  margin: 0 auto 2rem;
}

/* ─── Profile recommendation (Sizin için) ─── */
.profile-recommendation-wrap {
  margin-bottom: 1.5rem;
}

.profile-recommendation {
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.12), rgba(201, 169, 110, 0.06));
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--accent);
  margin-bottom: 1.5rem;
  transition: background var(--transition);
}

.profile-recommendation__title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 .5rem 0;
  color: var(--accent);
}

.profile-recommendation__content {
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.profile-recommendation__content p {
  margin: 0 0 .35rem 0;
}

.profile-recommendation__content p:last-child {
  margin-bottom: 0;
}

/* ─── Routine section (Rutin) ─── */
.routine-detail-list {
  margin-bottom: 2rem;
}

.routine-detail-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: background var(--transition);
}

.routine-detail-step {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  border-radius: 50%;
}

.routine-detail-item h4 {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 .35rem 0;
  color: var(--text);
}

.routine-detail-item p {
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.routine-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
}

.routine-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .6rem 0;
  cursor: pointer;
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.routine-checklist-item input {
  margin-top: .25rem;
  accent-color: var(--accent);
}

.routine-tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.routine-tip-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  border-left: 4px solid var(--accent);
  transition: background var(--transition);
}

.routine-faq {
  max-width: 640px;
  margin: 0 auto 2rem;
}

/* ─── Season section (Mevsim) ─── */
.season-accordion {
  margin-bottom: 2rem;
}

.season-accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: .5rem;
  overflow: hidden;
  background: var(--bg-card);
  transition: background var(--transition);
}

.season-accordion-btn {
  width: 100%;
  padding: 1rem 1.25rem;
  text-align: left;
  border: none;
  background: transparent;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.season-accordion-btn::after {
  content: "▼";
  font-size: .7rem;
  color: var(--text-muted);
  transition: transform var(--transition);
}

.season-accordion-btn[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.season-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}

.season-accordion-content.open {
  max-height: 600px;
}

.season-accordion-content p {
  padding: 0 1.25rem 1rem;
  margin: 0;
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.season-checklist {
  padding-left: 1.25rem;
  margin: 0 0 2rem 0;
}

.season-checklist li {
  margin-bottom: .4rem;
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.season-tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.season-tip-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  border-left: 4px solid #e67e22;
  transition: background var(--transition);
}

.season-faq {
  max-width: 640px;
  margin: 0 auto 2rem;
}

/* ─── Footer ─── */
.hol-footer {
  text-align: center;
  padding: 1.5rem 1rem;
  border-top: 1px solid var(--border);
}

.hol-tip-band {
  margin-top: 1rem;
  padding: .75rem 1rem;
  background: rgba(201, 169, 110, 0.15);
  border-radius: var(--radius);
  border-left: 4px solid var(--accent);
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.hol-tip-band__label {
  font-weight: 600;
  color: var(--accent);
  margin-right: .35rem;
}

.hol-footer__cta {
  font-size: .9rem;
  color: var(--text);
  margin-bottom: .5rem;
}

.hol-footer__cta a {
  color: var(--accent);
  text-decoration: underline;
}

.hol-footer__cta a:hover {
  opacity: .85;
}

.hol-footer__disclaimer,
.hol-footer p {
  font-size: .78rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ─── Responsive ─── */
@media (max-width: 480px) {
  .oil-grid,
  .nutr-grid,
  .meditation-grid {
    grid-template-columns: 1fr;
  }

  .freq-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ambient-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .meal-timeline {
    padding-left: 2rem;
  }

  .hol-tab {
    font-size: .78rem;
    padding: .75rem .9rem;
  }
}

/* ─── Print: only active section ─── */
@media print {
  body[data-print-section] .hol-hero,
  body[data-print-section] .hol-search-wrap,
  body[data-print-section] .hol-tabs,
  body[data-print-section] .hol-profile,
  body[data-print-section] .hol-footer,
  body[data-print-section] .toast-container,
  body[data-print-section] .hol-section {
    display: none !important;
  }
  body[data-print-section="aroma"] #section-aroma,
  body[data-print-section="nutrition"] #section-nutrition,
  body[data-print-section="sound"] #section-sound,
  body[data-print-section="sleep"] #section-sleep,
  body[data-print-section="stress"] #section-stress,
  body[data-print-section="exercise"] #section-exercise,
  body[data-print-section="routine"] #section-routine,
  body[data-print-section="season"] #section-season,
  body[data-print-section="faq"] #section-faq,
  body[data-print-section="glossary"] #section-glossary {
    display: block !important;
  }
}