/* ==========================================================================
   Mizan Beslenme — premium tasarım katmanı (premium.css)

   Referanslar: açık tema için lattice.webp (havadar kırık beyaz, beyaz
   kartlar, ince çerçeve, yumuşak gölge, ortalanmış etiket rozetleri),
   koyu tema için titan.webp ve krepling.webp (saf siyah değil koyu
   antrasit, yumuşak gri metin, dergi hissi veren tırnaklı başlıklar).

   site.css'in üzerine biner, motion.css'ten önce yüklenir.
   Renk kuralı aynı: düz renkler; gradyan ve neon yok.
   ========================================================================== */

:root {
  --lift: 0 1px 2px rgba(23, 26, 20, 0.05), 0 18px 40px -26px rgba(23, 26, 20, 0.30);
  --lift-hi: 0 2px 4px rgba(23, 26, 20, 0.06), 0 30px 60px -30px rgba(23, 26, 20, 0.38);
  --card-border: var(--line);
}
:root[data-theme="dark"] {
  --lift: 0 1px 2px rgba(0, 0, 0, 0.6), 0 18px 40px -26px rgba(0, 0, 0, 0.9);
  --lift-hi: 0 2px 6px rgba(0, 0, 0, 0.7), 0 30px 60px -30px rgba(0, 0, 0, 1);
  --card-border: #2B2B2B;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --lift: 0 1px 2px rgba(0, 0, 0, 0.6), 0 18px 40px -26px rgba(0, 0, 0, 0.9);
    --lift-hi: 0 2px 6px rgba(0, 0, 0, 0.7), 0 30px 60px -30px rgba(0, 0, 0, 1);
    --card-border: #2B2B2B;
  }
}

/* ==========================================================================
   1. Tipografi — daha sıkı, daha iri, daha premium
   ========================================================================== */
.display, .hero-title { letter-spacing: -0.035em; }
.h2 { font-size: clamp(2.5rem, 5.4vw, 4.9rem); letter-spacing: -0.032em; line-height: 0.98; }
.h3 { letter-spacing: -0.02em; }
.lede { font-size: 1.09rem; line-height: 1.62; }
@media (min-width: 768px) { .lede { font-size: 1.22rem; line-height: 1.6; } }

/* Lattice'teki gibi ortalanabilen ince çerçeveli bölüm rozeti */
.eyebrow-tag {
  display: inline-block;
  align-self: start;
  justify-self: start;
  max-width: 100%;
  padding: 0;
  border: 0;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive-text);
  background: transparent;
}
@media (min-width: 768px) { .eyebrow-tag { font-size: 1rem; } }
.sec-head { gap: 20px; }
.sec-head > .eyebrow-tag { margin-bottom: -6px; }

/* ==========================================================================
   2. Kartlar — beyaz zemin, ince çerçeve, yumuşak yükselti (lattice)
   ========================================================================== */
.service > a,
.plan,
.tool-card,
.booking-main,
.info-card,
.form-card,
.post-card a,
.recipe-card,
.note,
.strip,
.faq-help,
.clock-card,
.program-tip {
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--lift);
}

.service > a { overflow: hidden; transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease), border-color 0.3s ease; }
.service > a:hover { box-shadow: var(--lift-hi); transform: translateY(-4px); border-color: var(--line-2); }
.service-media { border-radius: 0; }
.service-body { padding: 24px 24px 26px; }

.plan { padding: 30px 28px 32px; transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease); }
.plan:hover { box-shadow: var(--lift-hi); transform: translateY(-4px); }
.plan--hi { background: var(--olive); color: var(--on-olive); border-color: var(--olive); }
.plan--hi .label,
.plan--hi .plan-sub,
.plan--hi .feat span { color: color-mix(in srgb, var(--on-olive) 82%, transparent); }
.plan--hi .price { color: var(--on-olive); }

.recipe-card { overflow: hidden; transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease); }
.recipe-card:hover { box-shadow: var(--lift-hi); }
.recipe-card figure { border-radius: 0; }
.recipe-card-body { padding: 20px 20px 22px; }

.note { border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--lift); }

/* Uzman kartları: içe oturan fotoğraf, sade bilgi blokları */
.person { padding: 10px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--lift); transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease); }
.person:hover { box-shadow: var(--lift-hi); transform: translateY(-3px); }
.person-media { aspect-ratio: 5 / 5.4; border-radius: calc(var(--radius) - 6px); overflow: hidden; }
.person-badge { left: 12px; top: 12px; bottom: auto; padding: 6px 12px; border-radius: 999px; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: none; }
.person-body { gap: 10px; padding: 20px 12px 12px; }
.person-body > .label { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--olive-text); }
.person-body .h3 { font-size: 1.55rem; line-height: 1.15; }
.person-body > p:not(.label) { font-size: 0.94rem; line-height: 1.6; }
.person-facts { gap: 8px; margin-top: 4px; border-top: 0; }
.person-facts div { display: grid; grid-template-columns: none; gap: 2px; padding: 11px 14px; border: 0; border-radius: calc(var(--radius) - 8px); background: var(--paper-2); font-size: 0.9rem; }
.person-facts dt { padding: 0; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; }
.person-body .btn { align-self: stretch; margin-top: 8px; }

.post-card a { overflow: hidden; }
.post-card figure { border-radius: 0; }
.post-card .post-meta,
.post-card h2,
.post-card h3,
.post-card p:not(.post-meta) { padding-inline: 22px; }
.post-card a > *:last-child { padding-bottom: 24px; }
.post-feature figure,
.post-row figure { border-radius: var(--radius-sm); overflow: hidden; }

.info-card, .faq-help, .strip, .clock-card { padding: 24px 26px; }
.form-card { padding: 28px 26px 30px; }
@media (min-width: 768px) { .form-card { padding: 36px 34px 38px; } }

.tool-card { padding: 26px 24px; }

/* ==========================================================================
   3. Düğmeler ve kontroller — yuvarlatılmış ama hap değil
   ========================================================================== */
.btn {
  border-radius: var(--r-ctl);
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.3s var(--ease);
}
.btn--primary { box-shadow: 0 1px 2px rgba(23, 26, 20, 0.12); }
[data-theme="dark"] .btn--primary { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.btn--ghost { background: var(--card); }
.chip, .tab, .radio-pill span, .field, .select-wrap select { border-radius: var(--r-ctl); }
.faq-icon { border-radius: 50%; }
.header-cta { border-radius: var(--r-ctl); }
.lang-switch { border-radius: 999px; }
.lang-switch button { border-radius: 999px; }

/* ==========================================================================
   4. Hero — FullImageReveal maskesi için hazırlık
   ========================================================================== */
.hero { overflow: hidden; overflow: clip; }
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  border-radius: 0;
}
.hero-media .hero-img { position: absolute; inset: 0; z-index: auto; border-radius: inherit; }
.hero-title { font-size: clamp(3.1rem, 8.8vw, 8rem); line-height: 0.92; }
.hero-kicker { letter-spacing: 0.18em; }
.next-slot { border-radius: var(--radius); box-shadow: var(--lift-hi); }

/* ==========================================================================
   5. Rakam şeridi — lattice'teki güven bandı gibi
   ========================================================================== */
.facts { padding-block: 0; }
.facts-list li { padding-block: 38px; }
@media (min-width: 900px) { .facts-list li { padding-block: 52px !important; } }
.facts-num { font-size: clamp(2.7rem, 4.4vw, 3.9rem); letter-spacing: -0.04em; }
.facts-label { font-size: 0.92rem; max-width: 22ch; }

/* ==========================================================================
   6. Süreç adımları — titan'daki numaralı daireler
   ========================================================================== */
.road .step { padding-left: 52px; }
@media (min-width: 900px) { .road .step { padding: 56px 36px 0 0; } }
.step .node {
  width: 30px; height: 30px;
  border-radius: 50%;
  transform: none;
  border: 1px solid var(--line-2);
  background: var(--card);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.step .node::after { content: attr(data-num); }
.step:first-child .node { background: var(--olive); border-color: var(--olive); color: var(--on-olive); }
.step:hover .node { border-color: var(--olive); color: var(--olive-text); }
.step:first-child:hover .node { color: var(--on-olive); }
.step::before { left: 14px; top: 38px; }
@media (min-width: 900px) { .step::before { left: 40px; top: 14px; } }

/* ==========================================================================
   7. Ayak — lattice'teki çok sütunlu, küçük başlıklı düzen
   ========================================================================== */
.site-footer .footer-cols h2 {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
}
.site-footer .footer-about h2 {
  font-family: var(--serif);
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  text-transform: none;
}

/* ==========================================================================
   8. Koyu tema ince ayarları (titan / krepling)
   ========================================================================== */
[data-theme="dark"] .service > a,
[data-theme="dark"] .plan,
[data-theme="dark"] .tool-card,
[data-theme="dark"] .booking-main,
[data-theme="dark"] .info-card,
[data-theme="dark"] .form-card,
[data-theme="dark"] .post-card a,
[data-theme="dark"] .recipe-card,
[data-theme="dark"] .faq-help,
[data-theme="dark"] .clock-card { background: var(--card); }
[data-theme="dark"] .plan--hi { background: var(--olive); }
[data-theme="dark"] .btn--ghost { background: var(--card); border-color: var(--line-2); }
[data-theme="dark"] .note { background: var(--card); }
[data-theme="dark"] .program-tip { background: var(--sage); }

/* Koyu temada devasa serif başlıklar biraz daha ince dursun */
[data-theme="dark"] .h2,
[data-theme="dark"] .hero-title { letter-spacing: -0.028em; }

/* ==========================================================================
   9. Bölüm ritmi — daha fazla nefes
   ========================================================================== */
.sec-head { margin-bottom: 44px; }
@media (min-width: 768px) { .sec-head { margin-bottom: 60px; } }
.panel + .panel::before { opacity: 0.85; }

/* Randevu paneli ve takvim biraz daha yumuşak */
.booking-main { border-radius: var(--radius); }
.cal-day { border-radius: var(--r-ctl); }
.slot { border-radius: var(--r-ctl); }
.booking-summary { border-radius: var(--radius); }

/* İletişim ve tarif pencereleri */
dialog { border-radius: var(--radius); }
.dialog-close { border-radius: 50%; }

/* Şeritler artık köşeleri yumuşatılmış bloklar */
.ribbon { border-radius: 0; }

/* ==========================================================================
   10. Formlar — daha derli toplu
   ========================================================================== */
.form-card > p { margin-bottom: 20px; }
.form-card .form-grid { margin-bottom: 20px; }
.bstep-sub { margin: 28px 0 12px; }
.field-label { font-size: 0.84rem; }
.check { font-size: 0.875rem; line-height: 1.45; }
.check + .check { margin-top: 4px; }

/* ==========================================================================
   11. Dev kelimeler ("afiyet olsun", "mizan") taşmasın
   ========================================================================== */
[data-fit] { line-height: 1; padding-block: 0.04em 0.1em; }
[data-fit] > span { padding-inline: 0.05em 0.08em; }
.footer-word p { line-height: 0.8; padding-block: 0.14em 0; }
.footer-word { margin-bottom: 36px; }

/* ==========================================================================
   12. Meyve kartları: yazının çevresinde eliptik yörünge
   ========================================================================== */
html.notes-orbit .note { left: 50%; top: 50%; will-change: transform; }
@media (min-width: 1024px) {
  .notes { min-height: 820px; }
  .note--1 { width: 170px; } .note--2 { width: 120px; } .note--3 { width: 180px; }
  .note--4 { width: 150px; } .note--5 { width: 170px; } .note--6 { width: 130px; } .note--7 { width: 140px; }
  .notes-center .h2 { max-width: 14ch; }
}

/* Pencere açılınca kapatma düğmesine gelen odakta kırmızı halka çıkmasın */
.dialog-close:focus,
.dialog-close:focus-visible { outline: none; }

/* Mobil ve tablet: küçük kartlar, dar başlık, butonlar yörüngenin altında */
@media (max-width: 1023px) {
  html.notes-orbit .notes { display: block; position: relative; height: clamp(500px, 140vw, 680px); margin-bottom: 76px; }
  html.notes-orbit .notes-center { position: absolute; inset: 0; z-index: 50; justify-content: center; gap: 10px; padding: 0; pointer-events: none; }
  html.notes-orbit .notes-center > * { pointer-events: auto; }
  html.notes-orbit .notes-center .eyebrow { font-size: 1.1rem; }
  html.notes-orbit .notes-center .h2 { max-width: 9ch; font-size: clamp(1.8rem, 7.4vw, 2.8rem); }
  html.notes-orbit .notes-center .pill-row { position: absolute; left: 0; right: 0; bottom: -68px; }
  html.notes-orbit .note, html.notes-orbit .note--x { display: block; position: absolute; width: 64px; box-shadow: 0 10px 20px -12px rgba(40, 32, 18, 0.5); }
  html.notes-orbit .note--1 { width: 72px; } html.notes-orbit .note--3 { width: 76px; }
  html.notes-orbit .note--5 { width: 70px; } html.notes-orbit .note--2 { width: 58px; }
  html.notes-orbit .note figcaption { display: none; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  html.notes-orbit .note { width: 96px; }
  html.notes-orbit .note--1, html.notes-orbit .note--3 { width: 110px; }
}