/* ============================================================
   Jera Pilates Studio — stil dosyası
   ------------------------------------------------------------
   @author   Grafik Tasarım Dünyası
   @link     https://www.instagram.com/grafiktasarimdunyasi/
   @license  Bu dosya Jera Pilates Studio için hazırlanmıştır.
   ------------------------------------------------------------
   Palet doğrudan logodan alındı: logonun zeminindeki gradyanlı
   siyah (#474747 → #1c1c1c → #0a0a0a) ve figürdeki gradyanlı
   mint-yeşil (#c8f3e8 → #6fc3b3 → #2a8579). Açık zeminler beyaz.
   Renkleri değiştirmek için yalnızca aşağıdaki değişkenler yeter.
   ============================================================ */

:root {
  --red: #2a8579;          /* koyu mint-yeşil — açık zeminde vurgu yazıları */
  --ink: #1c1c1c;          /* logo siyahı (düz renk gereken yerler) */
  --ink-soft: #2c2c2c;
  /* Logonun zemini gibi: griden derin siyaha inen ana marka gradyanı */
  --ink-gradient: linear-gradient(150deg, #474747 0%, #1c1c1c 45%, #0a0a0a 100%);
  --cream: #ffffff;        /* beyaz — buton dolgusu */
  --cream-deep: #e3f3ee;
  /* Logodaki figürün gradyanlı yeşili — butonlar ve yeşil vurgular */
  --cream-gradient-h: linear-gradient(90deg, #c8f3e8 0%, #6fc3b3 100%);
  --gold: #2a8579;         /* ince çizgiler / ikon vurguları — koyu mint (düz ton) */
  --gold-soft: rgba(42, 133, 121, 0.45);
  /* Gradyanlı yeşil (logo figürü) — alanlı vurgularda kullanılır */
  --gold-gradient: linear-gradient(180deg, #c8f3e8 0%, #9fdccd 45%, #6fc3b3 100%);
  --gold-gradient-h: linear-gradient(90deg, #c8f3e8 0%, #9fdccd 45%, #6fc3b3 100%);
  --mint: #9fdccd;         /* logodaki figürün ana tonu */
  --bg: #f7f9f8;           /* sayfa arka planı — beyaza yakın */
  --text: #1c1f1e;
  --text-soft: rgba(28, 31, 30, 0.66);
  --on-dark: #f4f8f7;
  --on-dark-soft: rgba(244, 248, 247, 0.72);
  --line: rgba(28, 31, 30, 0.12);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Segoe UI", sans-serif;

  /* Logodaki pilates figürü — filigran ve fotoğraf motiflerinde maske */
  --jera-motif: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAxOS42MCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsPSIjZmZmIiBkPSJNIDE3LjM0IC4wNEMxNy4xNiAuMDkgMTYuODggLjE5IDE2Ljg1IC4yMkMxNi44NCAuMjMgMTYuNzcgLjI2IDE2LjY5IC4yOUMxNi41OSAuMzQgMTYuNTMgLjM3IDE2LjQ4IC40M0MxNi40NCAuNDcgMTYuNCAuNSAxNi4zOSAuNUMxNi4zNyAuNSAxNi4yIC43NCAxNi4yIC43N0MxNi4yIC43OCAxNi4xOCAuODEgMTYuMTYgLjgzQzE2LjA5IC44OCAxNS45MiAuODggMTUuNjQgLjgxQzE1LjM2IC43NSAxNC45NyAuNzQgMTQuODcgLjc5QzE0LjcyIC44NiAxNC4zMiAxLjI1IDE0LjIzIDEuNDFDMTQuMDMgMS43NiAxMy45NiAxLjk5IDEzLjk2IDIuMzhDMTMuOTYgMi40NSAxMy45NSAyLjYyIDEzLjkzIDIuNzVDMTMuODkgMy4wMyAxMy44OSAzLjA1IDEzLjk4IDMuMjZDMTQuMDMgMy4zNiAxNC4xNyAzLjkgMTQuMTcgMy45NkMxNC4xNyA0LjAyIDE0LjI2IDQuMTggMTQuMzEgNC4yM0MxNC40IDQuMyAxNC41OCA0LjM2IDE0LjY4IDQuMzVDMTQuNzkgNC4zMyAxNC44MiA0LjMgMTQuOTMgNC4xNkMxNS4wMyA0LjAyIDE1LjA2IDMuOTkgMTUuMzQgMy44OUMxNS40MyAzLjg2IDE1LjQ0IDMuODIgMTUuNDcgMy41NEMxNS41MiAzLjAzIDE1LjUxIDIuNzggMTUuNDMgMi4zN0MxNS4zOCAyLjE3IDE1LjM4IDIuMTYgMTUuMzQgMi4xNEMxNS4zMSAyLjE0IDE1LjMxIDIuMTIgMTUuMzEgMi4wN0MxNS4zMSAxLjk5IDE1LjQxIDEuNjQgMTUuNDUgMS41OEMxNS41NCAxLjQ1IDE1LjggMS40OSAxNS44OCAxLjY1QzE1LjkyIDEuNzIgMTUuOTIgMS43IDE1LjkxIDIuMzNDMTUuOSAyLjY5IDE1Ljk0IDIuODggMTYuMDMgMi45NkMxNi4wNiAyLjk5IDE2LjA4IDMuMDIgMTYuMDggMy4wM0MxNi4wOCAzLjA3IDE2LjIxIDMuMjUgMTYuMjggMy4zMkMxNi4zMiAzLjM1IDE2LjM2IDMuMzkgMTYuMzYgMy40QzE2LjM2IDMuNDEgMTYuMzggMy40NCAxNi40IDMuNDdDMTYuNDYgMy41MiAxNi41IDMuNyAxNi40NyAzLjhDMTYuNDQgMy45IDE2LjI5IDQuMjIgMTYuMjIgNC4zMUMxNi4xOCA0LjM2IDE2LjEzIDQuNDMgMTYuMTEgNC40OEMxNS45MSA0LjgyIDE1LjMyIDUuMTggMTQuOCA1LjI4QzE0Ljc1IDUuMjkgMTQuNjQgNS4zMiAxNC41NCA1LjM0QzE0LjQ1IDUuMzYgMTQuMjggNS4zOCAxNC4xNiA1LjM5QzE0LjA1IDUuNCAxMy45IDUuNDEgMTMuODIgNS40M0MxMy43NSA1LjQ0IDEzLjYyIDUuNDYgMTMuNTQgNS40NkMxMy4zNSA1LjQ2IDEzLjA1IDUuNSAxMi45NCA1LjUzQzEyLjg5IDUuNTUgMTIuNzkgNS41NyAxMi43MSA1LjU5QzEyLjYzIDUuNiAxMi41MyA1LjYzIDEyLjQ5IDUuNjVDMTIuNDQgNS42NiAxMi4zNyA1LjY4IDEyLjMzIDUuNjlDMTIuMjggNS42OSAxMi4yMiA1LjcyIDEyLjE4IDUuNzRDMTIuMTUgNS43NiAxMi4wOCA1Ljc5IDEyLjAzIDUuODFDMTEuOTggNS44MiAxMS44OSA1Ljg3IDExLjg0IDUuOUMxMS43OCA1Ljk0IDExLjcgNS45OSAxMS42NCA2QzExLjU5IDYuMDIgMTEuNTIgNi4wNCAxMS40OSA2LjA2QzExLjQ2IDYuMDggMTEuNDEgNi4xIDExLjM5IDYuMUMxMS4zNiA2LjEgMTEuMjUgNi4xMyAxMS4xNCA2LjE2QzEwLjk0IDYuMjEgMTAuNzEgNi4yNSAxMC40NCA2LjI4QzkuOTQgNi4zNCA5LjYxIDYuMzcgOS40MiA2LjM4QzkuMyA2LjM4IDkuMTggNi40IDkuMTUgNi40MUM5LjExIDYuNDIgOS4wMSA2LjQ0IDguOTIgNi40NEM4LjgyIDYuNDUgOC42OSA2LjQ3IDguNjMgNi40OEM4LjIgNi41NyA3LjkyIDYuNTUgNy4yNSA2LjM2QzcuMDQgNi4zMSA2Ljk2IDYuMjggNi44MyA2LjI2QzYuNzggNi4yNCA2LjcgNi4yMiA2LjY2IDYuMjFDNi42MiA2LjE5IDYuNSA2LjE3IDYuMzkgNi4xNUM2LjI4IDYuMTQgNi4xNCA2LjExIDYuMDggNi4wOUM2LjAxIDYuMDggNS45IDYuMDUgNS44MiA2LjA0QzUuNzQgNi4wMyA1LjY2IDYuMDIgNS42MiA2LjAxQzUuNTEgNS45OCA1LjIyIDUuOTIgNS4xNyA1LjkyQzUuMTUgNS45MiA0Ljk4IDUuODggNC43OCA1LjgzQzQuNTkgNS43NyA0LjQgNS43MyA0LjM1IDUuNzJDNC4zMSA1LjcyIDQuMTkgNS42OSA0LjEgNS42NUM0IDUuNjIgMy44OCA1LjU5IDMuODIgNS41OEMzLjcgNS41NSAzLjU4IDUuNTIgMy40NSA1LjQ2QzMuMzQgNS40MiAzLjM0IDUuNDIgMi44NCA1LjQxQzIuMyA1LjQxIDEuOTcgNS40NSAxLjU3IDUuNTdDMS40OSA1LjU5IDEuNCA1LjYxIDEuMzcgNS42MUMxLjMgNS42MSAuOTYgNS42OSAuODQgNS43NEMuNzMgNS43OCAuNjIgNS44NiAuNDggNS45OEMuNDMgNi4wMyAuMzQgNi4xIC4yOCA2LjEzQy4wOSA2LjI2IC4wMyA2LjM1IC4wMSA2LjU5QzAgNi43NCAuMDEgNi43NyAuMDQgNi45Qy4xMiA3LjE2IC4yMiA3LjM5IC4zMyA3LjUyQy40OCA3LjY5IC41NSA3LjkgLjY2IDguNDFDLjY4IDguNTEgLjcyIDguNjQgLjc0IDguN0MuNzcgOC43NiAuNzkgOC44NCAuOCA4Ljg4Qy44IDguOTIgLjgyIDguOTcgLjgzIDguOTlDLjg0IDkuMDEgLjg3IDkuMSAuOSA5LjE4Qy45OSA5LjQzIDEuMTQgOS44MSAxLjI2IDEwLjFDMS4zMiAxMC4yNSAxLjM5IDEwLjQyIDEuNDEgMTAuNDlDMS40MyAxMC41NSAxLjQ1IDEwLjYyIDEuNDcgMTAuNjRDMS40OSAxMC42OCAxLjU0IDEwLjg2IDEuNiAxMS4wOEMxLjYxIDExLjE1IDEuNjUgMTEuMjggMS42OCAxMS4zN0MxLjcxIDExLjQ1IDEuNzYgMTEuNjMgMS43OSAxMS43NkMxLjgxIDExLjg5IDEuODUgMTIuMDggMS44NyAxMi4xN0MxLjkgMTIuMzIgMS45MiAxMi40NCAxLjk2IDEyLjY5QzEuOTcgMTIuNzYgMS45OSAxMi44OCAyIDEyLjk2QzIuMDIgMTMuMDQgMi4wNSAxMy4zNCAyLjA3IDEzLjY0QzIuMDkgMTMuOTMgMi4xMiAxNC4yMyAyLjEzIDE0LjMyQzIuMTkgMTQuOSAyLjIyIDE1LjA5IDIuMjUgMTUuMjlDMi4yNyAxNS40MSAyLjI5IDE1LjYgMi4zMSAxNS43MkMyLjMzIDE1LjgzIDIuMzYgMTYuMDIgMi4zOCAxNi4xNEMyLjQgMTYuMjYgMi40MyAxNi40MiAyLjQ1IDE2LjUxQzIuNDYgMTYuNTkgMi40OCAxNi42OSAyLjQ5IDE2LjczQzIuNSAxNi43NyAyLjUyIDE2Ljg4IDIuNTQgMTYuOThDMi41NSAxNy4wOCAyLjU3IDE3LjIgMi41OSAxNy4yNUMyLjYgMTcuMyAyLjYyIDE3LjQyIDIuNjQgMTcuNTJDMi42NyAxNy42MyAyLjY5IDE3Ljc1IDIuNzEgMTcuNzlDMi43MiAxNy44NCAyLjczIDE3Ljg4IDIuNzMgMTcuOUMyLjczIDE3LjkzIDIuODMgMTguMjQgMi44NyAxOC4zN0MyLjkyIDE4LjUgMy4zNiAxOC44NSAzLjU2IDE4LjkyQzMuNyAxOC45NyA0LjAyIDE5LjAxIDQuNjMgMTkuMDNDNC45IDE5LjA0IDUuMzUgMTkuMDYgNS42MyAxOS4wN0M2LjIzIDE5LjEgNi4zNCAxOS4xIDYuNDMgMTkuMDhDNi41NiAxOS4wNSA2LjggMTkuMDIgNy4xMiAxOS4wMUM3LjM3IDE5IDcuNDcgMTguOTkgNy41MiAxOC45N0M3LjU2IDE4Ljk1IDcuNjcgMTguOTQgNy44MyAxOC45M0M4LjExIDE4LjkxIDguMTcgMTguODkgOC4yNiAxOC44NEM4LjMxIDE4LjgxIDguMzUgMTguODEgOC40NiAxOC44MUM4LjU5IDE4LjgxIDguNjQgMTguNzkgOC43OSAxOC43NUM4Ljg5IDE4LjcxIDkuMDIgMTguNjggOS4wOCAxOC42OEM5LjE0IDE4LjY3IDkuMjQgMTguNjUgOS4zIDE4LjYyQzkuMzcgMTguNTkgOS40OCAxOC41NiA5LjU1IDE4LjU1QzkuNjIgMTguNTQgOS43MiAxOC41MSA5Ljc5IDE4LjQ4QzkuODUgMTguNDUgOS45MiAxOC40MyA5Ljk0IDE4LjQzQzkuOTkgMTguNDMgMTAuMjMgMTguMzYgMTAuMjYgMTguMzNDMTAuMjkgMTguMzEgMTAuNDEgMTguMjcgMTAuNjIgMTguMkMxMS4wMyAxOC4wNyAxMS4xMyAxOC4wNCAxMS4yOCAxNy45N0MxMS4zNiAxNy45MyAxMS40NSAxNy44OSAxMS40NyAxNy44OUMxMS40OSAxNy44OSAxMS41NSAxNy44NyAxMS42MSAxNy44NUMxMS42NyAxNy44MiAxMS43NCAxNy44MSAxMS43OSAxNy44MUMxMS44NiAxNy44MSAxMS45IDE3LjggMTEuOTUgMTcuNzZDMTIuMDQgMTcuNjkgMTIuMDkgMTcuNjggMTIuMzMgMTcuNjRDMTIuNDUgMTcuNjEgMTIuNjIgMTcuNTggMTIuNzEgMTcuNTZDMTIuOTggMTcuNDkgMTMuMTEgMTcuNDkgMTMuMjUgMTcuNTRDMTMuNDggMTcuNjMgMTMuNTEgMTcuNzEgMTMuMzkgMTcuODVDMTMuMjkgMTcuOTUgMTMuMDggMTguMTUgMTMuMDMgMTguMThDMTIuOTkgMTguMiAxMi42NiAxOC4yNyAxMi41OCAxOC4yN0MxMi41NCAxOC4yNyAxMi41IDE4LjI4IDEyLjQ4IDE4LjI5QzEyLjQ2IDE4LjMgMTIuMzcgMTguMzMgMTIuMjkgMTguMzVDMTIuMDcgMTguNCAxMi4wMSAxOC40NCAxMS44MSAxOC42NEMxMS43MSAxOC43MyAxMS41NyAxOC44NyAxMS40OSAxOC45NEMxMS4yNSAxOS4xNyAxMS4yMyAxOS4yNCAxMS4zNyAxOS4zNkMxMS42MSAxOS41NiAxMS44MSAxOS42IDEyLjA3IDE5LjVDMTIuMzcgMTkuMzkgMTIuODIgMTkuMzUgMTMuMjkgMTkuMzlDMTMuNjUgMTkuNDIgMTQuNzYgMTkuNDMgMTQuODkgMTkuNDFDMTQuOTUgMTkuMzkgMTUuMTYgMTkuMzggMTUuMzYgMTkuMzhDMTUuNTkgMTkuMzggMTUuNzMgMTkuMzcgMTUuNzYgMTkuMzZDMTUuNzkgMTkuMzUgMTUuODkgMTkuMzQgMTYuMDEgMTkuMzRDMTYuMTIgMTkuMzQgMTYuMzkgMTkuMzMgMTYuNjIgMTkuMzFDMTYuOTIgMTkuMjkgMTcuMTIgMTkuMjkgMTcuMzQgMTkuM0MxNy43MSAxOS4zMSAxNy42NyAxOS4zMSAxOC4xIDE5LjI5QzE4LjMxIDE5LjI5IDE4LjY0IDE5LjI5IDE4Ljk3IDE5LjNDMjAuMTIgMTkuMzUgMjIuMzUgMTkuMzggMjIuNjcgMTkuMzVDMjIuODcgMTkuMzQgMjIuODkgMTkuMzMgMjMuMDYgMTkuMjZDMjMuMTUgMTkuMjEgMjMuMjYgMTkuMTUgMjMuMyAxOS4xMUMyMy4zNCAxOS4wOCAyMy4zNyAxOS4wNSAyMy4zOCAxOS4wNUMyMy4zOSAxOS4wNSAyMy41MiAxOC45OSAyMy41OSAxOC45NkMyMy42NSAxOC45MyAyMy43IDE4Ljg4IDIzLjcyIDE4LjgzQzIzLjc0IDE4LjggMjMuNzggMTguNzUgMjMuODIgMTguNzJDMjMuOTEgMTguNjUgMjMuOTYgMTguNTUgMjMuOTYgMTguNDZDMjMuOTYgMTguNDIgMjMuOTcgMTguMzggMjMuOTggMTguMzZDMjMuOTggMTguMzQgMjMuOTkgMTguMjIgMjMuOTkgMTguMDhDMjQgMTcuOCAyMy45NiAxNy42IDIzLjg4IDE3LjQ4QzIzLjg1IDE3LjQ1IDIzLjgyIDE3LjM5IDIzLjggMTcuMzZDMjMuNyAxNy4xOSAyMy4yMyAxNi44OSAyMi45NSAxNi44MkMyMi44OSAxNi44IDIyLjc5IDE2Ljc3IDIyLjcyIDE2Ljc0QzIyLjY2IDE2LjcxIDIyLjU3IDE2LjY4IDIyLjUyIDE2LjY3QzIyLjQ4IDE2LjY2IDIyLjQxIDE2LjY0IDIyLjM3IDE2LjYyQzIyLjI5IDE2LjU4IDIxLjk3IDE2LjQ4IDIxLjkzIDE2LjQ4QzIxLjkyIDE2LjQ4IDIxLjgzIDE2LjQ1IDIxLjc0IDE2LjQyQzIxLjY1IDE2LjM4IDIxLjUxIDE2LjMzIDIxLjQ0IDE2LjMxQzIxLjM2IDE2LjMgMjEuMjQgMTYuMjYgMjEuMTUgMTYuMjNDMjEuMDcgMTYuMiAyMC45OCAxNi4xNyAyMC45NCAxNi4xN0MyMC45MSAxNi4xNiAyMC44MiAxNi4xMyAyMC43NSAxNi4xQzIwLjY5IDE2LjA4IDIwLjU2IDE2LjA0IDIwLjQ4IDE2LjAzQzIwLjMxIDE2IDIwLjIgMTUuOTYgMjAuMTYgMTUuOTJDMjAuMTMgMTUuOSAyMC4wNyAxNS44OSAxOS43OCAxNS44NUMxOS43IDE1Ljg0IDE5LjU4IDE1LjgxIDE5LjUxIDE1Ljc5QzE5LjQ0IDE1Ljc4IDE5LjM2IDE1Ljc2IDE5LjMzIDE1Ljc2QzE5LjI2IDE1Ljc2IDE5LjEyIDE1LjcxIDE5LjA4IDE1LjY3QzE5LjA2IDE1LjY2IDE5LjA0IDE1LjY0IDE5LjAyIDE1LjY0QzE5IDE1LjY0IDE4Ljk4IDE1LjYzIDE4Ljk3IDE1LjYyQzE4Ljk1IDE1LjU4IDE4Ljk4IDE0LjkxIDE5LjAxIDE0LjhDMTkuMDYgMTQuNjMgMTkuMDcgMTQuNTggMTkuMDcgMTQuNUMxOS4wNyAxNC40NSAxOS4wOSAxNC4zNiAxOS4xIDE0LjI5QzE5LjE1IDE0LjA0IDE5LjE2IDEzLjg3IDE5LjE2IDEzLjI0QzE5LjE2IDEyLjYyIDE5LjE2IDEyLjYgMTkuMiAxMi41M0MxOS4zMyAxMi4zIDE5LjMzIDEyLjI4IDE5LjMzIDEyLjE4QzE5LjMzIDEyLjEzIDE5LjM1IDEyLjAzIDE5LjM2IDExLjk3QzE5LjM4IDExLjkxIDE5LjQxIDExLjgxIDE5LjQyIDExLjc0QzE5LjQ2IDExLjQ2IDE5LjQ3IDExLjQ0IDE5LjU0IDExLjM3QzE5LjU4IDExLjMzIDE5LjYxIDExLjI5IDE5LjYxIDExLjI3QzE5LjYxIDExLjIyIDE5Ljg1IDExLjAyIDE5LjkzIDExQzE5Ljk2IDExIDIwIDEwLjk3IDIwLjAyIDEwLjk1QzIwLjA0IDEwLjkzIDIwLjExIDEwLjg4IDIwLjE3IDEwLjg1QzIwLjIyIDEwLjgzIDIwLjI5IDEwLjc4IDIwLjMzIDEwLjc1QzIwLjM2IDEwLjczIDIwLjQxIDEwLjY5IDIwLjQ1IDEwLjY3QzIwLjQ5IDEwLjY1IDIwLjU0IDEwLjYxIDIwLjU2IDEwLjU4QzIwLjU4IDEwLjU1IDIwLjYyIDEwLjUyIDIwLjY0IDEwLjVDMjAuNjcgMTAuNDkgMjAuNzIgMTAuNDMgMjAuNzYgMTAuMzZDMjAuOTggMTAuMDEgMjEgOS45NCAyMC45NyA5LjU4QzIwLjk2IDkuNDEgMjAuOTQgOS4zMyAyMC45MiA5LjI4QzIwLjkgOS4yNCAyMC44NSA5LjE0IDIwLjggOS4wNUMyMC43MSA4Ljg5IDIwLjU3IDguNjkgMjAuNSA4LjY0QzIwLjQ4IDguNjMgMjAuNDUgOC41OSAyMC40NCA4LjU2QzIwLjQyIDguNTMgMjAuMzcgOC40NyAyMC4zMiA4LjQyQzIwLjI2IDguMzYgMjAuMiA4LjI5IDIwLjE4IDguMjVDMjAuMTUgOC4yMSAyMC4xMSA4LjE2IDIwLjA5IDguMTNDMTkuOTggOC4wMSAxOS45OCA3Ljg2IDIwLjA4IDcuNjRDMjAuMTUgNy41IDIwLjE2IDcuMjMgMjAuMSA3LjE2QzIwLjA4IDcuMTQgMjAuMDUgNy4wOSAyMC4wMyA3LjA1QzIwLjAyIDcuMDIgMTkuOTggNi45OCAxOS45NiA2Ljk2QzE5LjkzIDYuOTQgMTkuODggNi44OSAxOS44NCA2Ljg2QzE5Ljc3IDYuNzkgMTkuNjMgNi42OSAxOS41NiA2LjY3QzE5LjU0IDYuNjYgMTkuNDggNi42MyAxOS40MyA2LjZDMTkuMzggNi41NyAxOS4zMyA2LjU0IDE5LjMxIDYuNTRDMTkuMyA2LjU0IDE5LjI1IDYuNTIgMTkuMjIgNi40OUMxOS4xOCA2LjQ3IDE5LjExIDYuNDMgMTkuMDYgNi40MkMxOC45MyA2LjM3IDE4LjkxIDYuMzYgMTguNzggNi4yNkMxOC41OSA2LjExIDE4LjQxIDUuOTIgMTguMzkgNS44NEMxOC4zOCA1LjgxIDE4LjM2IDUuNzQgMTguMzUgNS43QzE4LjM0IDUuNjUgMTguMzMgNS41NiAxOC4zNCA1LjQ2QzE4LjM1IDUuMzcgMTguMzYgNS4yNiAxOC4zNiA1LjIxQzE4LjM2IDUuMTcgMTguMzcgNS4xMiAxOC4zOCA1LjExQzE4LjM4IDUuMSAxOC4zOCA1LjA2IDE4LjM3IDUuMDFDMTguMzQgNC44OSAxOC4zNiA0LjgyIDE4LjQyIDQuODJDMTguNDUgNC44MiAxOC40OCA0LjgzIDE4LjQ5IDQuODVDMTguNTIgNC44OCAxOC41NCA0Ljg4IDE4LjY2IDQuOEMxOC43NSA0Ljc0IDE4Ljc5IDQuNzMgMTguODcgNC43MkMxOC45MyA0LjcxIDE5IDQuNyAxOS4wMiA0LjY5QzE5LjA3IDQuNjYgMTkuMTQgNC42NiAxOS4yMyA0LjY5QzE5LjMgNC43MiAxOS42OSA0Ljc1IDE5Ljg4IDQuNzVDMTkuOTUgNC43NSAyMC4wMSA0LjcgMjAuMDUgNC41OUMyMC4wOCA0LjU0IDIwLjExIDQuNDggMjAuMTIgNC40NkMyMC4xNiA0LjQyIDIwLjIzIDQuMiAyMC4yNSA0LjA5QzIwLjI2IDQuMDYgMjAuMjkgMy45OSAyMC4zMSAzLjk1QzIwLjM0IDMuOSAyMC4zNiAzLjg2IDIwLjM2IDMuODRDMjAuMzYgMy43NyAyMC40NSAzLjYzIDIwLjU1IDMuNTZDMjAuNjggMy40NyAyMC42OSAzLjQ1IDIwLjY5IDMuMzZDMjAuNjkgMy4yNyAyMC41OSAzLjEgMjAuNDkgMy4wMUMyMC40NyAyLjk5IDIwLjQ1IDIuOTQgMjAuNDMgMi45QzIwLjQyIDIuODYgMjAuMzkgMi44IDIwLjM2IDIuNzZDMjAuMjggMi42NyAyMC4yNSAyLjUgMjAuMyAyLjQzQzIwLjMxIDIuNCAyMC4zMyAyLjM1IDIwLjM0IDIuMzFDMjAuMzQgMi4yNyAyMC4zOCAyLjE3IDIwLjQxIDIuMDlDMjAuNDcgMS45NCAyMC40NyAxLjk0IDIwLjQ4IDEuNjVDMjAuNDkgMS4xOCAyMC40MiAuOTUgMjAuMiAuNzNDMjAuMSAuNjMgMTkuNTggLjMzIDE5LjUxIC4zM0MxOS40OSAuMzMgMTkuNDUgLjMxIDE5LjQgLjI5QzE5LjM1IC4yNiAxOS4yNyAuMjMgMTkuMjEgLjIyQzE5LjE1IC4yIDE5LjA4IC4xOCAxOS4wNiAuMTZDMTguOTYgLjA5IDE4LjggLjA3IDE3Ljg2IC4wMkMxNy40OS0wIDE3LjQ3LTAgMTcuMzQgLjA0TTIuNzEgNi4xOEMyLjY0IDYuMTkgMi41NyA2LjIyIDIuNTUgNi4yM0MyLjUzIDYuMjQgMi40NSA2LjI3IDIuMzggNi4zMUMyLjMgNi4zNCAyLjIyIDYuMzkgMi4xOSA2LjQxQzIuMTYgNi40MyAyLjExIDYuNDcgMi4wNyA2LjQ5QzIuMDIgNi41MSAxLjk5IDYuNTMgMS45OSA2LjU0QzEuOTkgNi41NSAxLjk2IDYuNTcgMS45MyA2LjU4QzEuODkgNi42IDEuODMgNi42NCAxLjc4IDYuNjZDMS43MiA2LjcgMS42OCA2LjcyIDEuNjQgNi43MkMxLjU5IDYuNzEgMS41OSA2LjcxIDEuNiA2Ljc4QzEuNjIgNi44NiAxLjYgNi45IDEuNTQgNi45QzEuNSA2LjkgMS40OSA2Ljg0IDEuNTIgNi43OEMxLjU1IDYuNzMgMS41NSA2LjY4IDEuNTMgNi41OUMxLjUyIDYuNTUgMS41MiA2LjU0IDEuNDYgNi41NEMxLjM5IDYuNTQgMS4zNCA2LjU4IDEuMjkgNi42OEMxLjI3IDYuNzIgMS4yMyA2Ljc1IDEuMTYgNi43OUMxLjA3IDYuODMgMS4wNiA2Ljg0IDEuMDcgNi44OUMxLjA3IDYuOTMgMS4wOSA2Ljk1IDEuMTMgNi45OEMxLjE2IDcgMS4yMiA3LjA0IDEuMjUgNy4wN0MxLjMzIDcuMTMgMS4zNiA3LjE0IDEuNDIgNy4wOUMxLjQ5IDcuMDQgMS41MSA3LjA3IDEuNTEgNy4yMUMxLjUxIDcuMzIgMS41MiA3LjM1IDEuNjEgNy41NEMxLjY2IDcuNjYgMS43MiA3Ljc3IDEuNzQgNy44QzEuNzUgNy44MiAxLjc5IDcuODkgMS44MSA3Ljk0QzEuODQgOCAxLjg3IDguMDUgMS45MSA4LjA3QzEuOTQgOC4xIDIuMDEgOC4xNiAyLjA2IDguMjJDMi4xOCA4LjM1IDIuMzcgOC40OCAyLjUzIDguNTVDMi42IDguNTggMi42NyA4LjYyIDIuNjkgOC42M0MyLjc3IDguNjcgMi44MiA4LjY5IDIuOTQgOC43NEMzLjAxIDguNzcgMy4xMSA4LjgyIDMuMTYgOC44NUMzLjM5IDguOTkgMy41IDkuMDYgMy41IDkuMDdDMy41MSA5LjA4IDMuNTQgOS4xMiAzLjU3IDkuMTVDMy42OCA5LjI4IDMuNzIgOS40NyAzLjY2IDkuNTVDMy42NCA5LjU4IDMuNjMgOS42MyAzLjYzIDkuNjdDMy42MyA5Ljc1IDMuNTYgOS44NiAzLjQ4IDkuOTFDMy40NCA5Ljk0IDMuNDEgOS45NyAzLjQgMTAuMDFDMy4zOSAxMC4wNSAzLjM2IDEwLjEyIDMuMzMgMTAuMTdDMy4yMiAxMC4zNiAzLjIzIDEwLjM1IDMuMjIgMTAuNjJDMy4yMiAxMC44NyAzLjIyIDEwLjg5IDMuMjcgMTEuMDRDMy4zIDExLjEyIDMuMzMgMTEuMiAzLjMzIDExLjIxQzMuMzQgMTEuMjIgMy4zNSAxMS4yNSAzLjM2IDExLjI4QzMuMzcgMTEuMzEgMy4zOSAxMS4zNiAzLjQgMTEuNEMzLjQyIDExLjQ0IDMuNDYgMTEuNTMgMy41IDExLjYxQzMuNTMgMTEuNjkgMy41NyAxMS43NyAzLjU4IDExLjc5QzMuNiAxMS44MSAzLjYxIDExLjg3IDMuNjEgMTEuOTJDMy42MSAxMS45OSAzLjYyIDEyLjA0IDMuNjYgMTIuMTFDMy43MyAxMi4yNCAzLjc3IDEyLjM0IDMuODIgMTIuNDhDMy44NCAxMi41NSAzLjg3IDEyLjYzIDMuODggMTIuNjZDMy45IDEyLjY4IDMuOTQgMTIuNzYgMy45NiAxMi44M0M0LjA2IDEzLjEgNC4yMSAxMy40OSA0LjI1IDEzLjU3QzQuMjcgMTMuNjEgNC4zMSAxMy43MiA0LjMzIDEzLjhDNC40NiAxNC4xOSA0LjUgMTQuMyA0LjU1IDE0LjQyQzQuNTggMTQuNDkgNC42MSAxNC42MSA0LjYzIDE0LjY5QzQuNjYgMTQuODYgNC43IDE1IDQuNzQgMTUuMDdDNC43NSAxNS4xIDQuNzYgMTUuMTUgNC43NiAxNS4xOUM0Ljc2IDE1LjIzIDQuNzcgMTUuMjkgNC43OSAxNS4zNEM0LjgyIDE1LjQ1IDQuODcgMTUuOTUgNC44NiAxNi4xNEM0Ljg2IDE2LjI2IDQuODcgMTYuMzEgNC45IDE2LjRDNC45NyAxNi41OSA0Ljk3IDE2LjU5IDUuMjkgMTYuNTlDNS40NyAxNi41OSA1LjYgMTYuNTggNS42NyAxNi41NkM1Ljk5IDE2LjQ5IDYuMSAxNi40NiA2LjEzIDE2LjQ1QzYuMTUgMTYuNDQgNi4yMiAxNi40MiA2LjI4IDE2LjQxQzYuMzQgMTYuNDEgNi40IDE2LjM5IDYuNDEgMTYuMzdDNi40MyAxNi4zNSA2LjQ4IDE2LjMzIDYuNTIgMTYuMzNDNi41NiAxNi4zMiA2LjYyIDE2LjI5IDYuNjYgMTYuMjdDNi42OSAxNi4yNCA2Ljc4IDE2LjIxIDYuODUgMTYuMTlDNy4xOSAxNi4wOSA3LjQ4IDE2LjAyIDcuNiAxNS45OUM3LjY4IDE1Ljk4IDcuNzUgMTUuOTYgNy43NyAxNS45NUM3LjgxIDE1LjkxIDcuODggMTUuODggNy45NyAxNS44N0M4LjA3IDE1Ljg2IDguNTMgMTUuNyA4LjYxIDE1LjY2QzguNjQgMTUuNjQgOC42OSAxNS42MiA4LjczIDE1LjYxQzguNzcgMTUuNjEgOC44NCAxNS41NyA4LjkgMTUuNTRDOC45NiAxNS41IDkuMDMgMTUuNDYgOS4wNiAxNS40NUM5LjEgMTUuNDQgOS4xNCAxNS40MSA5LjE3IDE1LjM5QzkuMTkgMTUuMzcgOS4yNSAxNS4zNCA5LjMgMTUuMzJDOS4zNSAxNS4zMSA5LjQgMTUuMjggOS40MSAxNS4yN0M5LjQyIDE1LjI2IDkuNDkgMTUuMiA5LjU2IDE1LjE1QzkuODIgMTQuOTYgOS44NyAxNC45MiAxMC4wMiAxNC44MUMxMC4xIDE0Ljc0IDEwLjIgMTQuNjUgMTAuMjQgMTQuNjFDMTAuMjggMTQuNTcgMTAuMzQgMTQuNTMgMTAuMzYgMTQuNTJDMTAuMzkgMTQuNSAxMC40NiAxNC40NCAxMC41MiAxNC4zOUMxMC41OSAxNC4zMyAxMC42OCAxNC4yNiAxMC43MyAxNC4yMkMxMC43OCAxNC4xOSAxMC44NCAxNC4xNSAxMC44NyAxNC4xM0MxMS4wNCAxNC4wMSAxMS4xMiAxMy45NyAxMS4yMiAxMy45M0MxMS4yOSAxMy45IDExLjM2IDEzLjg2IDExLjM5IDEzLjg0QzExLjQxIDEzLjgyIDExLjQ2IDEzLjggMTEuNDkgMTMuNzlDMTEuNTIgMTMuNzggMTEuNjEgMTMuNzUgMTEuNjggMTMuNzFDMTEuNzUgMTMuNjcgMTEuODUgMTMuNjQgMTEuOSAxMy42M0MxMS45NSAxMy42MiAxMi4wNCAxMy41OSAxMi4wOSAxMy41N0MxMi4xNCAxMy41NSAxMi4yMiAxMy41MiAxMi4yNyAxMy41MUMxMi4zMiAxMy41IDEyLjM5IDEzLjQ3IDEyLjQyIDEzLjQ2QzEyLjQ2IDEzLjQ0IDEyLjYxIDEzLjQgMTIuNzQgMTMuMzhDMTMuNTEgMTMuMjUgMTMuNzEgMTMuMTYgMTQuMDUgMTIuODFDMTQuMTkgMTIuNjcgMTQuMzMgMTIuNDggMTQuMzYgMTIuMzlDMTQuMzcgMTIuMzYgMTQuMzkgMTIuMzIgMTQuNCAxMi4zMUMxNC40MyAxMi4yNiAxNC41IDEyLjAyIDE0LjUyIDExLjg2QzE0LjU2IDExLjYyIDE0LjU5IDEwLjU0IDE0LjU5IDkuNzVDMTQuNTkgOS4xNiAxNC41OSA5LjEgMTQuNTUgOC45M0MxNC40NSA4LjQ2IDE0LjI4IDguMiAxMy44NSA3Ljg1QzEzLjcgNy43MyAxMy40IDcuNjcgMTMuMTUgNy43MUMxMy4wOCA3LjcyIDEyLjkxIDcuNzMgMTIuNzYgNy43NEMxMi41OSA3Ljc2IDEyLjQ3IDcuNzcgMTIuNCA3Ljc5QzEyLjM1IDcuODEgMTIuMTcgNy44NCAxMi4wMSA3Ljg2QzExLjg1IDcuODggMTEuNjcgNy45MSAxMS42IDcuOTJDMTEuMzcgNy45NSAxMS4zIDcuOTUgMTEuMDYgNy45N0MxMC45MiA3Ljk4IDEwLjcgNy45OSAxMC41NiA4QzEwLjE0IDguMDMgOS4wNiA4IDguNSA3LjkzQzguNDIgNy45MiA4LjE3IDcuOTEgNy45NCA3LjlDNy41OSA3Ljg5IDcuNTIgNy44OCA3LjQxIDcuODRDNy4zNCA3LjgyIDcuMTkgNy43NyA3LjA3IDcuNzRDNi42NyA3LjY0IDYuMTQgNy40OCA1Ljk1IDcuNEM1Ljc5IDcuMzQgNS40OCA3LjIzIDUuMzcgNy4xOUM1LjMyIDcuMTggNS4yMSA3LjE0IDUuMTUgNy4xMUM1LjA4IDcuMDggNC45MSA3LjAxIDQuNzYgNi45NkM0LjYyIDYuOTEgNC40NiA2Ljg1IDQuNDEgNi44MkM0LjM2IDYuOCA0LjMgNi43OCA0LjI4IDYuNzhDNC4yNyA2Ljc4IDQuMjQgNi43NyA0LjIyIDYuNzVDNC4yIDYuNzMgNC4xOCA2LjcxIDQuMTcgNi43MUM0LjE0IDYuNzEgMy44NiA2LjU5IDMuNzUgNi41M0MzLjY5IDYuNSAzLjYyIDYuNDYgMy41OSA2LjQ0QzMuNDUgNi4zNiAzLjMyIDYuMjkgMy4yOSA2LjI3QzMuMjcgNi4yNiAzLjI0IDYuMjUgMy4yMiA2LjI1QzMuMiA2LjI1IDMuMTUgNi4yMyAzLjExIDYuMjFDMy4wNiA2LjE5IDIuODcgNi4xNCAyLjg0IDYuMTVDMi44MyA2LjE1IDIuNzcgNi4xNiAyLjcxIDYuMTgiLz48L3N2Zz4=");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Sabit header'ın altında kalmasın diye bölüm başlarına pay bırak */
.hero, .about, .experience, .dersler, .amenities, .gallery, .location, .footer, .legal, .page-hero {
  scroll-margin-top: 80px;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* İkonlarda kısa ve nokta biçimli yollar uçları yuvarlanmadığında hiç
   çizilmiyor; küçük boyutta da bu haliyle daha temiz duruyorlar. */
svg { stroke-linecap: round; stroke-linejoin: round; }

.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 24px;
}

@media (min-width: 900px) {
  .container { padding-inline: 48px; }
}

a { color: inherit; text-decoration: none; }

/* ============================================================
   KOYU ZEMİNLER
   Koyu mint vurgu (--gold) siyah gradyan üzerinde sönük kalıyor.
   Koyu zeminli bileşenlerde vurgu tonu logodaki açık mint'e döner.
   ============================================================ */
.navbar, .nav-links, .booking-card, .datepicker, .about__icon-row,
.experience, .quote-band, .footer, .ders-modal__panel, .rules-modal__panel,
.checkin-band, .loader, .motif-band, .reservation-page__side, .lightbox {
  --gold: #9fdccd;
  --gold-soft: rgba(159, 220, 205, 0.38);
}

/* ---------- Ortak metin stilleri ---------- */

/* Bölüm üst başlığı: solunda içeri doğru koyulaşan ince petrol tonunda çizgi,
   yazı kalın ve marka renginde. inline-flex sayesinde üst kabın
   text-align'ı korunuyor — ortalanmış bölümlerde kendiliğinden ortalanıyor. */
.eyebrow {
  font-family: var(--sans);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 16px;
}
.eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 36px; height: 2px;
  background: linear-gradient(90deg, rgba(42,133,121,0), var(--red));
}

/* Ortalanmış bölümlerde çizgi simetrik olsun: sağa da bir tane */
.about__heading .eyebrow::after,
.about__text--center .eyebrow::after,
.dersler__intro .eyebrow::after,
.amenities__intro .eyebrow::after,
.location__intro .eyebrow::after,
.gallery .eyebrow::after {
  content: "";
  flex-shrink: 0;
  width: 36px; height: 2px;
  background: linear-gradient(90deg, var(--red), rgba(42,133,121,0));
}

/* Fotoğraf üzerindeki açık varyant */
.eyebrow--light { color: #fff; }
.eyebrow--light::before {
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9));
}

/* Koyu zeminli popup'larda petrol tonu okunmaz — altına dönsün */
.ders-modal__body .eyebrow,
.rules-modal__head .eyebrow {
  color: var(--gold);
}
.ders-modal__body .eyebrow::before,
.rules-modal__head .eyebrow::before {
  background: linear-gradient(90deg, rgba(159,220,205,0), var(--gold));
}

@media (max-width: 560px) {
  .eyebrow { gap: 10px; letter-spacing: .22em; }
  .eyebrow::before, .eyebrow::after { width: 22px; }
}

.h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.15;
  margin: 0 0 18px;
  color: var(--ink);
}
.h2--light { color: var(--on-dark); }

.about__p {
  max-width: 46ch;
  color: var(--text-soft);
  font-size: 15.5px;
  margin: 0 0 14px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  margin-top: 8px;
}
.text-link span { transition: transform .25s ease; }
.text-link:hover span { transform: translateX(4px); }

/* ---------- Butonlar ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 26px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  overflow: hidden;
  transition: filter .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  white-space: nowrap;
}

/* Işık geçişi (shine) animasyonu — eğik bir parlaklık sürekli, yavaşça butonun üzerinden kayar */
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  transform: skewX(-22deg);
  pointer-events: none;
  animation: btnShine 3.6s ease-in-out infinite;
}
@keyframes btnShine {
  0% { left: -60%; }
  35%, 100% { left: 130%; }
}
.btn--cream {
  background: var(--gold-gradient-h);
  color: var(--ink);
}
.btn--cream:hover { filter: brightness(1.06); }

.btn--outline {
  border-color: rgba(238, 244, 251, 0.5);
  color: var(--on-dark);
  background: transparent;
}
.btn--outline:hover { border-color: var(--on-dark); background: rgba(238, 244, 251,.08); }

.btn--outline-light {
  border-color: rgba(238, 244, 251, 0.55);
  color: var(--on-dark);
  background: transparent;
}
.btn--outline-light:hover { background: var(--on-dark); color: var(--ink); }

/* ============================================================
   NAVBAR
   ============================================================ */

/* Header metinlerinin açık fotoğraflarda da okunaklı kalması için ince üst gölge */
.top-shade {
  position: fixed;
  inset: 0 0 auto 0;
  height: 160px;
  z-index: 90;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.38) 0%, rgba(0,0,0,.16) 55%, transparent 100%);
}

.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 18px;
  transition: background .3s ease, padding .3s ease, box-shadow .3s ease, inset .3s ease, border-radius .3s ease;
}
.navbar.is-scrolled,
.navbar.navbar--solid {
  inset: 12px 14px auto 14px;
  background: var(--ink-gradient);
  backdrop-filter: blur(6px);
  padding-block: 14px;
  border-radius: 999px;
  border: 1px solid var(--gold-soft);
  box-shadow: 0 14px 34px rgba(0,0,0,.32);
}
@media (min-width: 700px) {
  .navbar.is-scrolled, .navbar.navbar--solid { inset: 16px 32px auto 32px; }
}
@media (min-width: 980px) {
  .navbar.is-scrolled, .navbar.navbar--solid { inset: 16px 56px auto 56px; }
}
@media (min-width: 1300px) {
  .navbar.is-scrolled, .navbar.navbar--solid { inset: 16px calc(50% - 620px) auto calc(50% - 620px); }
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--on-dark);
}
.brand__leaf { width: 22px; height: 22px; flex-shrink: 0; }
/* Marka logosu — SVG oranı 2200x700, yüksekliğe göre ölçeklenir */
.brand__logo {
  width: auto;
  height: 44px;
  display: block;
  flex-shrink: 0;
}
@media (max-width: 480px) { .brand__logo { height: 36px; } }
.brand--footer .brand__logo { height: 62px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  letter-spacing: .01em;
}
.brand__sub {
  font-size: 9px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}

.nav-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--ink-gradient);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  padding-inline: 24px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  transition: max-height .55s ease, opacity .4s ease, transform .45s ease, padding-block .55s ease;
}
.nav-links a {
  position: relative;
  padding-bottom: 3px;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold-gradient-h);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s ease;
}
.nav-links a:not(.btn):hover { color: var(--on-dark); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.btn::after { content: none; }

/* Okunan bölümün menü bağlantısı: altın çizgi açık kalır (js/main.js) */
.nav-links a.is-current::after { transform: scaleX(1); }

.nav-links__cta {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 8px;
  padding: 6px 18px;
  font-size: 10.5px;
}

.nav-links__divider {
  display: block;
  width: 100%;
  height: 1px;
  margin: 16px 0 2px;
  background: linear-gradient(90deg, #2a8579 0%, #6fc3b3 30%, #c8f3e8 55%, transparent 100%);
}

.nav-links__contact {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: none;
  color: var(--on-dark-soft);
}
.nav-links__contact a { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.nav-links__contact a:hover { color: var(--on-dark); }
.nav-links__contact svg { width: 20px; height: 20px; flex-shrink: 0; }

/* 320px'de telefon numarası "0539 510 53 / 78" diye ikiye bölünüp
   hizası kayıyordu; punto, aralık ve ikon bir kademe küçülür. */
@media (max-width: 380px) {
  .nav-links__contact { gap: 12px; font-size: 10.5px; letter-spacing: .03em; }
  .nav-links__contact a { gap: 6px; }
  .nav-links__contact svg { width: 17px; height: 17px; }
}

/* Üst menü yazıları: koyu zemin ve fotoğraf üzerinde net okunsun diye
   krem yerine düz beyaz; hover'da hafif saydamlık verilir. */
.navbar .nav-links,
.navbar .nav-links__contact,
.navbar .navbar__icon {
  color: #fff;
}
.navbar .nav-links a:not(.btn),
.navbar .nav-links__contact a {
  color: #fff;
}
.navbar .nav-links a:not(.btn):hover,
.navbar .nav-links__contact a:hover,
.navbar .navbar__icon:hover {
  color: #fff;
  opacity: .78;
}
.navbar .nav-toggle span { background: #fff; }

.nav-cta { display: none; }

.navbar__actions { display: none; }

.navbar__mobile-group { display: flex; align-items: center; gap: 12px; }
.navbar__mobile-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
@media (min-width: 980px) {
  .navbar__mobile-group { display: contents; }
}
.navbar__icon { color: var(--on-dark-soft); transition: color .2s ease; }
.navbar__icon:hover { color: var(--on-dark); }
.navbar__icon svg { width: 19px; height: 19px; display: block; }
.navbar__divider { width: 1px; height: 20px; background: var(--gold-soft); }

.nav-toggle {
  width: 26px; height: 19px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: none; border: none; cursor: pointer; padding: 0;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block; height: 1.5px; width: 100%;
  background: var(--on-dark);
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav-links.is-open {
  top: calc(100% + 2px);
  max-height: 480px;
  /* Yatay tutulan telefonda ekran ~375px yüksekliğinde; menü (≈410px)
     sığmıyor ve alttaki bağlantılara ulaşılamıyordu. Menü ekrana sığacak
     kadar kısalır ve kendi içinde kayar; kaydırma sayfaya geçip menüyü
     kapatmasın diye overscroll-behavior eklendi. */
  max-height: min(480px, calc(100svh - 96px));
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 1;
  transform: translateY(0);
  padding-block: 26px 30px;
  border-radius: 24px;
  border: 1px solid var(--gold-soft);
}

@media (min-width: 980px) {
  .nav-links {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 30px;
    max-height: none;
    overflow: visible;
    opacity: 1;
    transform: none;
    padding: 0;
    background: none;
    transition: none;
  }
  .nav-links__cta { display: none; }
  .nav-links__divider { display: none; }
  .nav-links__contact { display: none; }
  .navbar__actions { display: flex; align-items: center; gap: 18px; }
  .navbar__mobile-actions { display: none; }
  .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: var(--on-dark);
}

/* overflow:hidden şart: içindeki marka motifı kenardan taşıyor ve
   kırpılmazsa tüm sayfayı yatay kaydırılır hale getiriyor. */
.hero__slides { position: absolute; inset: 0; overflow: hidden; }
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero__slide.is-active { opacity: 1; }

/* Hero fotoğrafları burada, sınıf üzerinden tanımlı — HTML'de inline
   değil. Sebebi: CSS değişkenine inline yazılan göreli url() Chrome'da
   stil dosyasının klasörüne göre çözülüyor ("css/images/...") ve
   fotoğraflar hiç yüklenmiyordu. */
.hero__slide--bir  { background-image: url("../images/hero-reformer.jpg"); }
.hero__slide--iki  { background-image: url("../images/hero-salon.jpg"); }
.hero__slide--uc   { background-image: url("../images/hero-kopru.jpg"); }

/* Bu fotoğraflar yatay çekildi; dar ve uzun telefon ekranında "cover"
   onları aşırı büyütüp ortadan anlamsız bir şerit gösteriyordu.
   Mobilde dikey çekilmiş karşılıkları devreye giriyor. */
@media (max-width: 760px) {
  .hero__slide--bir  { background-image: url("../images/hero-m-reformer.jpg"); }
  .hero__slide--iki  { background-image: url("../images/hero-m-salon.jpg"); }
  .hero__slide--uc   { background-image: url("../images/hero-m-kopru.jpg"); }
}

.hero__scrim {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(18,22,18,.68) 0%, rgba(18,22,18,.42) 45%, rgba(18,22,18,.12) 75%),
    linear-gradient(to top, rgba(18,22,18,.45), rgba(18,22,18,0) 42%);
}

/* Masaüstünde koyulaştırma soldan sağa gidiyor, çünkü yazılar solda.
   Mobilde yazılar tüm genişliği kaplıyor ve fotoğrafın aydınlık
   bölgelerinde okunmuyordu; koyulaştırma yukarıdan aşağıya çevrildi. */
@media (max-width: 760px) {
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(10,10,10,.62) 0%, rgba(10,10,10,.5) 45%, rgba(10,10,10,.3) 70%),
      linear-gradient(to top, rgba(10,10,10,.55), rgba(10,10,10,0) 35%);
  }
}

.hero__inner {
  position: relative;
  z-index: 5;
  display: grid;
  gap: 40px;
  padding-block: 120px 90px;
  width: 100%;
}
/* Takvim / ders seçici açıkken slayt numaraları (z-index 6) panelin
   üstüne biniyordu; panel açıkken içerik katmanı öne alınır. */
.hero__inner:has([aria-expanded="true"]) { z-index: 7; }

.hero__text { max-width: 620px; }
.hero__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.1;
  margin: 0 0 22px;
}
.hero__desc {
  font-size: 16px;
  color: var(--on-dark-soft);
  max-width: 46ch;
  margin: 0 0 32px;
}

@media (min-width: 980px) {
  .hero__inner { grid-template-columns: 1.4fr 340px; align-items: start; }
  .hero__text { grid-column: 1; align-self: center; }
}

/* Dar ekranda hero yazıları bir kademe küçülür: başlık iki satırda kalsın,
   üst etiket ("BUCA / İZMİR") tek satıra sığsın ve açıklama
   üç satırı geçmesin. */
@media (max-width: 560px) {
  .hero__inner { padding-block: 104px 78px; gap: 28px; }
  .hero__title { font-size: clamp(28px, 8.4vw, 40px); margin-bottom: 16px; }
  .hero__desc { font-size: 13.5px; line-height: 1.62; margin-bottom: 24px; }

  .hero__text .eyebrow {
    font-size: 9.5px;
    letter-spacing: .14em;
    gap: 9px;
    white-space: nowrap;
    margin-bottom: 12px;
  }
  .hero__text .eyebrow::before,
  .hero__text .eyebrow::after { width: 18px; }
}

/* --- Ön kayıt kartı --- */

.booking-card {
  position: relative;
  z-index: 3;
  background: var(--ink-gradient);
  border: 1.5px solid var(--gold-soft);
  backdrop-filter: blur(10px);
  border-radius: 26px;
  padding: 26px 24px 24px;
  width: 100%;
  max-width: 380px;
}
.booking-card__label {
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  margin: 0 0 18px;
}
.booking-field {
  display: block;
  margin-bottom: 16px;
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--on-dark-soft);
}
.booking-field > span:first-child { display: block; margin-bottom: 6px; }
.booking-field__row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--gold-soft);
  padding: 0 0 8px;
  font-family: var(--sans);
  color: var(--on-dark);
  cursor: pointer;
  text-align: left;
}
.booking-field__row span { font-size: 14.5px; }
.booking-field__row svg { width: 16px; height: 16px; opacity: .8; flex-shrink: 0; }

.booking-field input,
.booking-field select {
  background: none;
  border: none;
  color: var(--on-dark);
  font-family: var(--sans);
  font-size: 14.5px;
  width: 100%;
  /* min-width:0 şart: input'un tarayıcıdan gelen doğal genişliği (yaklaşık
     20 karakter) ızgara sütununu zorluyor ve 320px ekranlarda kart sağa
     taşıyordu. Aynı sebeple ızgara/esnek kutu çocuklarına da veriliyor. */
  min-width: 0;
  padding: 0;
  outline: none;
}
.hero__inner > *,
.booking-card__row > *,
.booking-field__row > * { min-width: 0; }
.booking-field select {
  border-bottom: 1px solid var(--gold-soft);
  padding-bottom: 8px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e7f6a' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 14px;
}
/* İpucu (placeholder) yazıları beyaz olsun — Firefox varsayılan olarak
   saydamlık uyguladığı için opacity açıkça 1'e sabitlendi. */
.booking-field input::placeholder,
.booking-field textarea::placeholder {
  color: #fff;
  opacity: 1;
}
.booking-field input::-webkit-input-placeholder { color: #fff; }
.booking-field input::-moz-placeholder { color: #fff; opacity: 1; }

/* Tarih ve katılımcı alanlarındaki "gg.aa.yyyy" gibi ipucu metinleri */
.booking-field__row > span:first-child { color: #fff; }

.booking-field select option { color: #111; }
.booking-field input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .8; cursor: pointer; }

/* --- Özel takvim (native date picker yerine site tasarımına uygun) --- */

.datepicker-field { position: relative; }

.datepicker {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 260px;
  z-index: 20;
  background: var(--ink-gradient);
  border: 1px solid var(--gold-soft);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
}
.datepicker[hidden] { display: none; }

.datepicker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.datepicker__head-label {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.datepicker__head button {
  background: none;
  border: none;
  color: var(--on-dark-soft);
  cursor: pointer;
  display: flex;
  padding: 4px;
  transition: color .2s ease;
}
.datepicker__head button:hover { color: var(--gold); }
.datepicker__head svg { width: 15px; height: 15px; }

.datepicker__weekdays,
.datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.datepicker__weekdays span {
  font-size: 10px;
  text-align: center;
  color: var(--on-dark-soft);
  padding-bottom: 4px;
}
.datepicker__day {
  background: none;
  border: none;
  color: var(--on-dark);
  font-size: 12px;
  font-family: var(--sans);
  padding: 7px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.datepicker__day:hover { background: rgba(238, 244, 251,.12); }
.datepicker__day.is-muted { color: var(--on-dark-soft); opacity: .35; }
.datepicker__day.is-selected {
  background: var(--gold-gradient);
  color: var(--ink);
  font-weight: 600;
}
.datepicker__day.is-disabled { opacity: .25; cursor: not-allowed; pointer-events: none; }
.datepicker__day--empty { visibility: hidden; }

/* --- Katılımcı seçici --- */

.guest-picker { width: 100%; }
.guest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}
.guest-row + .guest-row { border-top: 1px solid rgba(238, 244, 251,.1); }
.guest-row__info { display: flex; flex-direction: column; gap: 2px; }
.guest-row__info strong { font-size: 13px; font-weight: 500; color: var(--on-dark); }
.guest-row__info span { font-size: 11px; color: var(--on-dark-soft); }

.guest-row__stepper { display: flex; align-items: center; gap: 12px; }
.guest-row__stepper button {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  background: none;
  color: var(--on-dark);
  font-size: 15px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s ease, opacity .2s ease;
}
.guest-row__stepper button:hover { background: rgba(238, 244, 251,.1); }
.guest-row__stepper button:disabled { opacity: .3; cursor: not-allowed; }
.guest-row__stepper span { min-width: 16px; text-align: center; font-size: 14px; color: var(--on-dark); }

.guest-picker__done { width: 100%; margin-top: 10px; }

.booking-card__submit { width: 100%; margin-top: 6px; }
.booking-card__submit--center {
  width: auto;
  min-width: 220px;
  display: flex;
  margin-inline: auto;
}
.booking-card__note {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #fff;
}
.booking-card__note a { text-decoration: underline; }

/* Mobilde hero'daki ön kayıt kartı biraz daha kompakt olsun.
   Takvim paneli açıldığında kartın tamamını kapatıyordu; punto, boşluk ve
   gün hücreleri küçültülerek panel belirgin biçimde kısaltıldı. */
@media (max-width: 699px) {
  .booking-card { padding: 20px 18px 18px; max-width: 100%; }
  .booking-card__label { margin-bottom: 14px; }
  .booking-field { margin-bottom: 12px; font-size: 11px; }
  /* Beyaz değer yazıları ("Adınız Soyadınız", "gg.aa.yyyy", ders adı…)
     dar kartta fazla iri kalıyordu */
  .booking-field__row span,
  .booking-field input { font-size: 12.5px; }

  /* Genişlik ekrana göre ölçeklensin. Daha önce "width: 100%" idi; panel
     dar sütunun genişliğini alıyordu ve 320px'de 360px kuralı yüzünden
     420px'dekinden daha GENİŞ çıkıyordu. clamp ile sıra düzeldi. */
  /* Gün hücreleri 20×18px'e kadar iniyordu; parmakla doğru güne
     basmak zordu. Panel biraz genişletildi, hücreler ~26px yüksekliğe
     çıkarıldı (panel yine kartın yalnızca bir kısmını kapatıyor). */
  .datepicker { width: clamp(200px, 64vw, 250px); max-width: none; padding: 9px; border-radius: 12px; }
  .datepicker__head { margin-bottom: 4px; }
  .datepicker__head-label { font-size: 10.5px; letter-spacing: .04em; }
  .datepicker__head svg { width: 14px; height: 14px; }
  .datepicker__head button { padding: 6px; margin: -5px; }
  .datepicker__weekdays span { font-size: 9px; padding-bottom: 2px; }
  .datepicker__day { padding: 6px 0; font-size: 11px; border-radius: 6px; }

  /* Katılımcı ve ders panelleri de takvimle aynı genişlikte olsun; aksi
     halde dar sütunda sütun genişliğine (~90px) sıkışıyorlar. */
  .guest-picker,
  .ders-picker { width: clamp(200px, 64vw, 250px); max-width: none; }
  .guest-row { padding: 7px 0; }
  .guest-row__info span { font-size: 10px; }
}

/* "Katılımcı" ve "Ders Tipi" masaüstünde alt alta durur (değerleri uzun),
   mobilde kart kısalsın diye yan yana geçer. 360px altında yan yana
   koymuyoruz: "2 Yetişkin, 0 Çocuk" o sütuna sığmayıp iki satıra
   düşüyor ve iki alanın alt çizgisi kayıyordu. */
/* Çift sınıf yazımı bilinçli: .booking-card__row kuralı bu satırlardan
   sonra geldiği için tek sınıfla yazıldığında onu ezemiyordu. */
.booking-card__row.booking-card__row--ikili { grid-template-columns: 1fr; }
@media (min-width: 361px) and (max-width: 699px) {
  .booking-card__row.booking-card__row--ikili {
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }
}

/* "Müsaitliği Kontrol Et" yazısı nowrap olduğu için dar kartta butonun
   dışına taşıp kırpılıyordu; punto ve harf aralığı kademeli küçülür. */
@media (max-width: 430px) {
  .booking-card__submit { font-size: 10px; letter-spacing: .07em; padding-inline: 12px; }
  .booking-card__submit .btn__wa { width: 13px; margin-left: 6px; }
  .booking-field__row span,
  .booking-field input { font-size: 11.5px; }
}
@media (max-width: 360px) {
  .booking-card__submit { font-size: 8.8px; letter-spacing: .03em; padding-inline: 8px; }
  .booking-card__submit .btn__wa { width: 12px; margin-left: 5px; }
}

/* iPhone, puntosu 16px'ten küçük bir kutuya dokunulunca sayfayı kendiliğinden
   yakınlaştırıyor ve yakın kalıyordu ("Adınız Soyadınız" alanı). Yalnızca
   iOS'ta (-webkit-touch-callout) kutu gerçekte 16px yazılır, sonra
   görünür boyuta küçültülür: ekranda değişiklik olmaz, yakınlaşma olmaz.
   --alan-olcek = görünen punto / 16. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 699px) {
    .booking-field input {
      --alan-olcek: .78125;           /* 12.5px */
      font-size: 16px;
      width: calc(100% / var(--alan-olcek));
      margin-right: calc(100% - 100% / var(--alan-olcek));
      margin-block: -3px;
      transform: scale(var(--alan-olcek));
      transform-origin: 0 50%;
    }
  }
  @media (max-width: 430px) {
    .booking-field input { --alan-olcek: .71875; }  /* 11.5px */
  }
}

@keyframes spin { to { transform: rotate(360deg); } }

/* --- Aşağı kaydır göstergesi --- */

.hero__scroll {
  position: absolute;
  right: 48px;
  bottom: 34px;
  z-index: 6;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--on-dark-soft);
}
@media (min-width: 700px) { .hero__scroll { display: flex; } }
.hero__scroll:hover { color: var(--on-dark); }

.hero__scroll-line {
  position: relative;
  width: 1px;
  height: 34px;
  background: rgba(238, 244, 251,.28);
  overflow: hidden;
}
.hero__scroll-dot {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  animation: scrollDot 1.9s ease-in-out infinite;
}
@keyframes scrollDot {
  0% { top: 0; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { top: 28px; opacity: 0; }
}

.hero__scroll-chev {
  width: 13px; height: 13px;
  animation: chevBounce 1.9s ease-in-out infinite;
}
@keyframes chevBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* --- Slayt göstergesi --- */

.hero__dots {
  position: absolute;
  left: 84px; bottom: 34px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero__dots button {
  background: none; border: none; cursor: pointer;
  color: var(--on-dark-soft);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .1em;
  padding: 4px 0;
  position: relative;
}
.hero__dots button.is-active { color: var(--on-dark); }
.hero__dots button.is-active::after {
  content: "";
  position: absolute; left: 0; bottom: -2px;
  width: 26px; height: 2px;
  background: var(--gold-gradient-h);
}
.hero__dots button::before {
  content: attr(data-slide);
}
.hero__dots button:nth-child(1)::before { content: "01"; }
.hero__dots button:nth-child(2)::before { content: "02"; }
.hero__dots button:nth-child(3)::before { content: "03"; }

/* ============================================================
   HAKKIMIZDA
   ============================================================ */

.about {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 100px;
  background: var(--bg);
}
.about__grid {
  display: grid;
  gap: 56px;
}
@media (min-width: 980px) {
  .about__grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; }
}

/* --- Hakkımızda v2: tek büyük fotoğraf + kayan istatistik kartı --- */

/* --- Hakkımızda v4: solda/sağda yatık fotoğraf, ortada metin --- */

.about--v4 { padding-block: 110px; }
.about__grid--v4 {
  gap: 20px 14px;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "heading heading"
    "left right"
    "body body";
}
.about__heading { grid-area: heading; text-align: center; }
.about__side-photo--left { grid-area: left; max-width: 220px; }
.about__side-photo--right { grid-area: right; max-width: 220px; }
.about__text--center { grid-area: body; }

/* Ders kartlarındaki gibi paspartu + buzlu cam zemin:
   padding fotoğrafın çevresinde boşluk bırakır, ::after o boşluğu
   fotoğrafın bulanık hâliyle doldurur. */
.about__side-photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 6px;
  border-radius: 13px;
  aspect-ratio: 3 / 4;
  max-width: 320px;
  margin-inline: auto;
  background: var(--bg);
  box-shadow: 0 20px 40px rgba(0,0,0,.18);
  cursor: pointer;
  opacity: 0;
  transition: transform 1s cubic-bezier(.16,.9,.3,1), opacity .8s ease;
}

/* Buzlu cam zemin: fotoğrafın bulanık, sisli hâli.
   --about-photo değişkeni her fotoğrafa HTML'de tanımlanıyor. */
.about__side-photo::after {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .62), rgba(255, 255, 255, .62)),
    var(--about-photo);
  background-size: cover;
  background-position: center;
  filter: blur(26px) saturate(1.4);
  pointer-events: none;
}

.about__side-photo img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
  transition: transform .4s ease;
}
.about__side-photo:hover img { transform: scale(1.08); }

.about__side-photo--left { transform: rotate(0deg); }
.about__side-photo--right { transform: rotate(0deg); }
.about__grid--v4.is-visible .about__side-photo--left { transform: rotate(-6deg); opacity: 1; }
.about__grid--v4.is-visible .about__side-photo--right { transform: rotate(6deg); opacity: 1; transition-delay: .12s; }

/* Butonlardaki gibi yavaş ışık geçişi */
.about__side-photo::before {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 16%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  transform: skewX(-22deg);
  pointer-events: none;
  /* Fotoğrafın (z-index 2) üstünde kalmalı */
  z-index: 3;
  animation: btnShine 3.6s ease-in-out infinite;
}

.about__text--center { text-align: center; }
.about__text--center .eyebrow { justify-content: center; display: flex; }
.about__text--center .about__p { max-width: 42ch; margin-inline: auto; }
.about__text--center .h2 { margin-inline: auto; }

.about__icon-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0;
  margin-top: 40px;
  background: var(--ink-gradient);
  border: 1.5px solid var(--gold);
  border-radius: 16px;
  padding: 16px 10px;
  overflow-x: auto;
}
/* gap 0: ayırıcı çizgi öğenin sol kenarında durduğu için, aradaki boşluk
   hem gap'ten hem padding'den gelirse çizginin iki yanı asimetrik oluyor.
   Boşluğu yalnızca padding versin ki çizgi tam ortada kalsın. */
.about__icon-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 20px;
  border-left: 1px solid rgba(238, 244, 251,.18);
  white-space: nowrap;
}
.about__icon-item:first-child { border-left: none; }
.about__icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.about__icon-circle svg { width: 32px; height: 32px; color: #ffffff; }
.about__icon-item strong {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  color: #fff;
  font-weight: 600;
  text-align: left;
}
.about__icon-item span {
  display: block;
  font-size: 10.5px;
  letter-spacing: .04em;
  color: #fff;
  text-align: left;
}

/* Dar ekranda üç bilgi şeride sığmayıp "Reformer", "Küçük Grup" gibi
   etiketler iki satıra kırılıyordu; ikon ve punto bir kademe küçülür. */
/* Dar ekranda kısa etiketler iki satıra kırılıyordu.
   Düzen yatay kalır (ikon solda, yazı sağda); punto, ikon ve boşluklar
   küçülür ve yazıların kırılması kapatılır. */
@media (max-width: 560px) {
  .about__icon-row { padding: 13px 2px; }
  .about__icon-item { gap: 7px; padding: 3px 15px; }
  .about__icon-circle svg { width: 26px; height: 26px; }
  .about__icon-item strong { font-size: 16px; line-height: 1.15; }
  .about__icon-item span { font-size: 9px; line-height: 1.2; letter-spacing: .02em; }
  .about__icon-item strong,
  .about__icon-item span { white-space: nowrap; }
}
@media (max-width: 400px) {
  .about__icon-row { padding: 12px 1px; }
  .about__icon-item { gap: 5px; padding: 3px 11px; }
  .about__icon-circle svg { width: 22px; height: 22px; }
  .about__icon-item strong { font-size: 14px; }
  .about__icon-item span { font-size: 8px; letter-spacing: 0; }
}
/* 320–350px'de şerit 12px kadar sığmıyor, "Reformer" sağ kenarda
   kesiliyordu; öğe araları daralır. */
@media (max-width: 350px) {
  .about__icon-item { gap: 4px; padding: 3px 6px; }
  .about__icon-circle svg { width: 20px; height: 20px; }
}

@media (min-width: 980px) {
  .about__grid--v4 {
    grid-template-columns: 1fr 1.3fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "left heading right"
      "left body right";
    gap: 12px 40px;
  }
  .about__side-photo--left,
  .about__side-photo--right { max-width: 320px; }
}
@media (min-width: 980px) {
  .about__grid--v2 { grid-template-columns: 0.9fr 1fr; }
  .about__grid--v2 .about__photo { order: 1; }
  .about__grid--v2 .about__text { order: 2; }
}

.stats {
  display: flex;
  gap: 40px;
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 2px solid;
  border-image: var(--gold-gradient-h) 1;
}
.stats dt {
  font-family: var(--serif);
  font-size: 30px;
  color: var(--ink);
  margin: 0;
}
.stats dd {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-soft);
}

.collage {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
  padding-left: 30px;
}
.collage__arch {
  grid-row: 1 / 3;
  border-radius: 50% 50% 28px 28px / 32% 32% 28px 28px;
  overflow: hidden;
  aspect-ratio: 3 / 4.6;
}
.collage__arch img,
.collage__small img { width: 100%; height: 100%; object-fit: cover; }

.collage__small { border-radius: 26px; overflow: hidden; aspect-ratio: 1 / 0.85; }

.collage__badge {
  position: absolute;
  left: calc(1.3fr / 2);
  left: 40%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 92px; height: 92px;
  z-index: 2;
}
.collage__badge-ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  animation: spin 20s linear infinite;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
.collage__badge-ring text { font-size: 8.6px; letter-spacing: .04em; fill: var(--gold); font-family: var(--sans); }
.collage__badge::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--ink-gradient);
  border: 1px solid var(--gold-soft);
  border-radius: 50%;
}
.collage__badge-leaf {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 26px; height: 26px;
  color: var(--on-dark);
}

.collage__leaf-mark {
  position: absolute;
  left: -6px; top: 0;
  width: 26px; height: 26px;
  color: var(--text-soft);
}

/* ============================================================
   DENEYİM (KOYU BÖLÜM)
   ============================================================ */

.experience {
  position: relative;
  margin-inline: 14px;
  padding-block: 12px;
  color: var(--on-dark);
  background: var(--ink-gradient);
  border: 1px solid var(--gold);
  border-radius: 20px;
}
@media (min-width: 700px) {
  .experience { margin-inline: 32px; }
}
/* Geniş ekranda şerit sayfanın tamamına yayılmasın, ortada dursun */
@media (min-width: 1024px) {
  .experience {
    max-width: 940px;
    margin-inline: auto;
  }
}
.experience__narrow { max-width: 920px; }
.experience__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.experience__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(20,20,20,.94) 0%, rgba(14,14,14,.93) 55%, rgba(12,12,12,.95) 100%);
}
.experience__scrim--light {
  background: rgba(8,8,8,.22);
}

.experience .container { position: relative; z-index: 1; }

.features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 24px;
}
.features--row4 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 24px;
  text-align: center;
}
.features--row4 .feature { flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.features--row4 .feature span:last-child { font-size: 12.5px; }
.features__dot {
  align-self: center;
  width: 7px; height: 7px;
  margin-top: 16px;
  border-radius: 50%;
  background: var(--gold-gradient);
  flex-shrink: 0;
}

/* Dar ekranlarda 2x2 düzen, noktalar kaldırılır. Hem gerçek dokunmatik
   cihazlar hem de dar pencereler için: dört öğe yan yana 560px altında
   sığmıyor ve şeridi yatay taşırıyordu. */
@media (hover: none) and (pointer: coarse), (max-width: 620px) {
  .experience { padding-block: 18px; }
  .features--row4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Satır boşluğu 22px'ken ikon ve yazı ortadaki yatay çizgiye
       değecek kadar yakın duruyordu; 34px ile her çeyrek nefes alıyor. */
    gap: 34px 8px;
    position: relative;
  }
  /* Ortada + şeklinde ince bir ayraç: yatay çizgi iki satırın arasında
     (satır boşluğunun tam ortasında), dikey çizgi iki sütunun arasında —
     ikonlara değmeden dört öğeyi çeyreklere ayırır. Uçları kısaltıldı,
     yoksa çizgiler şeridin kenarına kadar uzayıp kutuya yapışıyordu. */
  .features--row4::before {
    content: "";
    position: absolute;
    left: 8%; right: 8%; top: 50%;
    height: 1px;
    background: var(--gold-soft);
  }
  .features--row4::after {
    content: "";
    position: absolute;
    top: 6px; bottom: 6px; left: 50%;
    width: 1px;
    background: var(--gold-soft);
  }
  /* Etiketler dikey çizgiye yapışmasın */
  .features--row4 .feature { gap: 6px; padding-inline: 8px; }
  .features--row4 .feature span:last-child { font-size: 10.5px; line-height: 1.25; }
  .features__dot { display: none; }
  .feature-badge svg { width: 28px; height: 28px; }
}
.feature { display: flex; align-items: center; gap: 16px; position: relative; }
.feature::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ink-gradient);
  color: var(--on-dark);
  border: 1px solid var(--gold-soft);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 11px;
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 5;
  margin-bottom: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.3);
}
.feature:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.feature-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feature-badge svg { width: 34px; height: 34px; color: #ffffff; }





.feature span { font-size: 13px; letter-spacing: .04em; color: #fff; }

.quote {
  margin: 0;
  border-left: 3px solid;
  border-image: var(--gold-gradient) 1;
  padding-left: 28px;
}
.quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.35;
  margin: 0 0 16px;
}
.quote cite {
  font-style: normal;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}

/* ============================================================
   ALINTI BANDI
   ============================================================ */

.quote-band {
  background: var(--ink-gradient);
  padding-block: 90px;
}
.quote-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Logodaki motif ikonu */
.quote-band__motif {
  width: 34px; height: 36px;
  color: var(--gold);
  margin-bottom: 22px;
}
.quote-band__quote { margin: 0; max-width: 100%; }
.quote-band__quote p {
  font-family: var(--serif);
  font-style: italic;
  /* Mobilde satırlara bölünür, satırlar dengeli dağılır */
  font-size: clamp(21px, 5.6vw, 26px);
  line-height: 1.4;
  text-wrap: balance;
  overflow-wrap: break-word;
  color: var(--on-dark);
  margin: 0 0 20px;
}
/* Tabletten itibaren en fazla iki dengeli satır; yorum metni uzadığında
   tek satıra zorlanınca konteynerden taşıyordu. */
@media (min-width: 700px) {
  .quote-band__quote p {
    max-width: 30em;
    margin-inline: auto;
    font-size: clamp(20px, 2.4vw, 30px);
    line-height: 1.4;
  }
}
@media (max-width: 699px) {
  .quote-band { padding-block: 64px; }
  .quote-band__quote cite { display: block; line-height: 1.8; letter-spacing: .2em; }
}
.quote-band__quote cite {
  font-style: normal;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  /* Koyu zeminde logodaki açık mint */
  color: var(--mint);
}

/* ============================================================
   DERSLERİMİZ
   ============================================================ */

.dersler { padding-block: 110px 90px; background: var(--bg); }
@media (min-width: 1300px) {
  .dersler .container { max-width: 1180px; }
}

/* Menüden "Odalarımız"a gelindiğinde başlık, kartlar ve buton
   tek ekranda görünsün — aşağı kaydırmaya gerek kalmasın. */
@media (min-width: 700px) {
  .dersler {
    /* Sabit header bölümün üstünü kapatmasın */
    scroll-margin-top: 100px;
    min-height: calc(100svh - 100px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(28px, 4svh, 72px);
  }
}

/* --- Bölüm başlığı: ortalanmış, altın süslemeli --- */
.dersler__intro {
  max-width: 720px;
  margin: 0 auto 38px;
  text-align: center;
}
/* Başlık her ekranda tek satırda kalsın — dar ekranda punto küçülerek sığar */
.dersler__intro .h2 {
  margin: 0;
  white-space: nowrap;
  font-size: clamp(22px, 5.2vw, 46px);
}
.dersler__lead {
  max-width: 46ch;
  margin: 0 auto;
  color: var(--text-soft);
  font-size: 14.5px;
}

/* İnce altın süsleme: çizgi — motif — çizgi */
.dersler__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 240px;
  margin: 16px auto 14px;
  color: var(--gold);
}
.dersler__ornament i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}
.dersler__ornament i:last-child {
  background: linear-gradient(90deg, var(--gold-soft), transparent);
}
.dersler__ornament svg { width: 15px; height: 15px; flex-shrink: 0; }

.dersler__foot {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
}

/* marka renginde buton: krem dolgu yerine marka gradyanı, altın kenarlık,
   krem yazı. Diğer butonlarla aynı ölçüde. */
.btn--brand {
  background: var(--ink-gradient);
  border: 1px solid var(--gold);
  color: var(--cream);
  padding: 11px 30px;
}
.btn--brand:hover { filter: brightness(1.12); }

/* --- Kart dizilimi: mobilde kaydırmalı, masaüstünde 3'lü ızgara --- */
.ders-carousel { position: relative; }

.ders-cards {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 12px;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ders-cards::-webkit-scrollbar { display: none; }
/* Mobilde tek kart tam ekran; komşu kartların ucu görünmesin */
.ders-cards > .ders-card {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

/* Mobilde kaydırma kutusu gölgeyi kırpıyordu: gölgeye nefes payı
   bırakıldı ve yayılımı azaltıldı. */
@media (max-width: 699px) {
  /* Menüden gelindiğinde üstte kocaman boşluk kalıyor, kartlar ve
     "Bilgi Al" ekranın altında kalıyordu. Bölüm masaüstündeki
     gibi ekrana ortalandı, dolgular kısıldı ve kart yüksekliği
     ekran yüksekliğinden türetildi — hepsi tek ekrana sığıyor. */
  .dersler {
    scroll-margin-top: 72px;
    min-height: calc(100svh - 72px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 20px 24px;
  }
  .dersler__intro { margin-bottom: 14px; }
  /* Süsleme mobilde gizli; başlık ile açıklama birbirine yapışıyordu */
  .dersler__intro .h2 { margin-bottom: 10px; }
  .dersler__ornament { display: none; }
  .dersler__lead { font-size: 12.5px; line-height: 1.55; }
  .dersler__foot { margin-top: 16px; }

  /* Kart 3/4 dikey oranını korur (içindeki yazılar kart genişliğine
     göre ölçekleniyor, oran bozulunca taşıyorlardı). Bunun yerine
     şeridin genişliği ekran yüksekliğinden türetiliyor: kart küçülür
     ama oranı bozulmaz, başlık + kartlar + buton tek ekrana sığar. */
  /* Kart yüksekliği ekranın en fazla %45'i kadar olsun; genişlik 3/4
     oranından türetiliyor (20px = kartın paspartu dolgusu). */
  /* Şerit tüm bölüm genişliğini kaplasın: parmakla kaydırma yalnızca
     kartın üstünde değil, sağındaki/solundaki boşlukta da çalışsın. */
  .ders-cards-frame { max-width: 100%; }

  /* Gölge sorununun çözümü:
     - Kaydırma kutusu (overflow-x) dışına taşanı kırptığı için gölgenin
       kutunun İÇİNDE kalması gerekiyor  -> yanlara 24px dolgu.
     - O dolgu alanında komşu kartın ucu görünmesin diye kartlar arası
       boşluk dolgudan büyük seçildi (48 > 24).
     - Negatif kenar boşluğu YOK: kart, kutudan 48px dar kalıyor ve iki
       yanında gölgesi için temiz alan bulunuyor. */
  /* Kart genişliği ekran yüksekliğinden türetiliyor; şeridin yan
     dolgusu ise kalan boşluğun yarısı. Böylece kart ortada duruyor,
     iki yanında gölgesi için temiz alan kalıyor ve komşu kartlar
     (gap 140px, yan dolgunun en az iki katı) o alana giremiyor. */
  .ders-cards {
    --kart: clamp(190px, calc((45svh - 12px) * 0.75 + 12px), calc(100svw - 128px));
    gap: 140px;
    padding: 22px calc((100% - var(--kart)) / 2) 36px;
    margin-inline: 0;
    scroll-padding-inline: calc((100% - var(--kart)) / 2);
  }
  .ders-cards > .ders-card { flex: 0 0 var(--kart); }
  /* Gölge dört yana da yayılıyor (dikey kaydırma yok, offset küçük).
     Yayılım yarıçapları dolgudan küçük: yanlarda 17px < 28px,
     üstte 11px < 22px, altta 23px < 36px — hiçbir yerde kesilmiyor. */
  .ders-card {
    border: none;
    box-shadow:
      0 6px 34px rgba(20,20,20, .34),
      0 2px 8px rgba(20,20,20, .18);
  }
  .ders-carousel__controls { margin-top: 4px; }
}

@media (min-width: 700px) {
  /* 5 kart: 6 sütunlu ızgarada her kart 2 sütun kaplıyor. Üstte 3 kart,
     altta 2 kart; alttaki ikili bir sütun kaydırılarak ortalanıyor. */
  .ders-cards {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
  }
  .ders-cards > .ders-card { flex: initial; grid-column: span 2; }
  .ders-cards > .ders-card:nth-child(4) { grid-column: 2 / 4; }
  .ders-cards > .ders-card:nth-child(5) { grid-column: 4 / 6; }

  /* Izgara genişliği ekran yüksekliğinden türetiliyor: kartlar 3/4
     oranını koruyarak küçülüyor, böylece bölüm tek ekrana sığıyor. */
  .ders-cards-frame {
    /* 3 kart (fotoğraf + 2×6px paspartu) + 2×10px kart arası boşluk */
    max-width: calc((38svh - 12px) * 2.25 + 56px);
    margin-inline: auto;
  }
}

/* Geniş ekranda beş kart tek sırada */
@media (min-width: 1100px) {
  .ders-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ders-cards > .ders-card,
  .ders-cards > .ders-card:nth-child(4),
  .ders-cards > .ders-card:nth-child(5) { grid-column: auto; }
  .ders-cards-frame {
    /* 5 kart + 4×10px kart arası boşluk */
    max-width: calc((38svh - 12px) * 3.75 + 100px);
  }
}

/* --- Kart --- */
/* Kenarlık fotoğrafın dışında duruyor; aradaki padding sayesinde
   fotoğrafla çerçeve arasında paspartu gibi bir boşluk kalıyor. */
.ders-card {
  position: relative;
  padding: 6px;
  /* İç çerçeve 8px; paspartu 6px olduğu için dış köşe 14 yerine 12 */
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
  box-shadow: 0 12px 32px rgba(20,20,20, .14);
  transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s ease;
}

/* Buzlu cam zemin: kartın kendi fotoğrafının bulanık, sisli hâli.
   --ders-photo değişkeni her karta HTML'de tanımlanıyor. */
.ders-card::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .62), rgba(255, 255, 255, .62)),
    var(--ders-photo);
  background-size: cover;
  background-position: center;
  filter: blur(26px) saturate(1.4);
  transition: opacity .5s ease;
}

.ders-card__frame {
  position: relative;
  z-index: 2;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
  /* Kart içi yazılar kartın kendi genişliğine göre ölçeklensin */
  container-type: inline-size;
  background: var(--ink);
}

/* Üstteki isim/numara açık fotoğraflarda da okunsun diye ince tepe gölgesi */
.ders-card__frame::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 130px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(10,10,10,.45), transparent);
}

.ders-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 1.1s cubic-bezier(.2,.7,.3,1);
}

@media (hover: hover) {
  /* Kart yalnızca yukarı kaydırılırsa (translateY) alt kenarı imlecin
     altından kaçıyor, hover bozuluyor, kart geri iniyor ve imleç yine
     üstüne geliyordu — sonsuz titreme. Hafif bir scale eklenerek kart
     her yönde büyütüldü: alt kenar imlecin altından kaçmıyor. */
  .ders-card:hover,
  .ders-card:focus-within {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 26px 52px rgba(20,20,20, .3);
  }
  .ders-card:hover img { transform: scale(1.05); }
}

/* Sol üstteki sıra numarası */
.ders-card__index {
  position: absolute;
  top: 16px; left: 20px;
  z-index: 3;
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1;
  color: #d9f4ed;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.55));
}

.ders-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 16px 16px;
  color: var(--on-dark);
  background: linear-gradient(to top,
    rgba(10,10,10,.92) 0%,
    rgba(10,10,10,.52) 34%,
    rgba(10,10,10,.10) 62%,
    rgba(10,10,10,0) 100%);
  transition: background .5s ease;
}
@media (hover: hover) {
  .ders-card:hover .ders-card__overlay,
  .ders-card:focus-within .ders-card__overlay {
    background: linear-gradient(to top,
      rgba(10,10,10,.95) 0%,
      rgba(10,10,10,.74) 46%,
      rgba(10,10,10,.30) 76%,
      rgba(10,10,10,.06) 100%);
  }
}

.ders-card__overlay h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  /* cqw = kart genişliğinin yüzdesi — uzun ders adları tek satırda kalır */
  font-size: clamp(16px, 10cqw, 26px);
  line-height: 1.15;
  margin: 0;
}

/* Üzerine gelince açılan bölüm: donanım ikonları + buton */
/* Ders özellik ikonları her ekranda açık duruyor — eskiden yalnızca
   fare kartın üstüne gelince açılıyordu, dokunmatikte hiç görünmüyordu. */
.ders-card__reveal {
  display: grid;
  grid-template-rows: 1fr;
  margin-top: 8px;
  opacity: 1;
}
.ders-card__reveal > div { overflow: hidden; }

/* --- Mobil kontroller: oklar + nokta göstergesi --- */
.ders-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 24px;
}
@media (min-width: 700px) {
  .ders-carousel__controls { display: none; }
}

.ders-carousel__nav {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--gold-soft);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.ders-carousel__nav:hover,
.ders-carousel__nav:active {
  background: var(--ink-gradient);
  border-color: var(--gold);
  color: #fff;
}
.ders-carousel__nav svg { width: 16px; height: 16px; }

.ders-carousel__dots {
  display: flex;
  align-items: center;
  gap: 9px;
}
/* Aktif gösterge çizgiye uzamıyor; nokta kalıp biraz büyüyerek doluyor */
.ders-carousel__dots button {
  width: 8px; height: 8px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  background: transparent;
  cursor: pointer;
  transition: transform .3s ease, background .3s ease, border-color .3s ease;
}
.ders-carousel__dots button.is-active {
  background: var(--ink-gradient);
  border-color: transparent;
  transform: scale(1.45);
}

/* ============================================================
   GALERİ
   ============================================================ */

.gallery { padding-block: 100px; background: var(--bg); }
/* Bölüm başlığı diğer bölümlerdeki gibi ortalansın
   (ızgara öğeleri text-align'dan etkilenmez) */
.gallery .container { text-align: center; }
.gallery__grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
/* Her fotoğraf, ders kartlarındaki gibi ince bir paspartu içinde.
   Paspartunun zemini fotoğrafın bulanık hâli (--foto değişkeni
   HTML'de her karede ayrı tanımlanıyor). */
.gallery__item {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 6px;
  border-radius: 22px;
  aspect-ratio: 1 / 1;
  grid-row: span 1;
  background: var(--bg);
  cursor: zoom-in;
}
.gallery__item::after {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .62), rgba(255, 255, 255, .62)),
    var(--foto);
  background-size: cover;
  background-position: center;
  filter: blur(24px) saturate(1.4);
  pointer-events: none;
}
.gallery__grid img {
  position: relative;
  z-index: 2;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
@media (min-width: 700px) {
  .gallery__grid { grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; }
  .gallery__grid .span-2 { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; }
}

/* Önizlemede yalnızca ilk 5 fotoğraf görünür. Gizlenenler DOM'da kalır;
   lightbox açıldığında oklarla onlara da gidilebilir. */
.gallery__grid .gallery__hidden { display: none; }

/* Son kare: fotoğrafın üzerinde kalan fotoğraf sayısını gösteren rozet.
   Kutu ayarlarını .gallery__item'dan alıyor; burada yalnızca rozet var. */
.gallery__count {
  position: absolute;
  inset: 6px;
  z-index: 3;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: rgba(12,12,12,.5);
  color: #fff;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  pointer-events: none;
  transition: background .35s ease;
}
.gallery__count strong {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1;
  letter-spacing: 0;
}
.gallery__last:hover .gallery__count { background: rgba(12,12,12,.32); }

/* ============================================================
   CTA BANNER
   ============================================================ */

.cta {
  position: relative;
  padding-block: 80px;
  color: var(--on-dark);
  overflow: hidden;
}
.cta__bg { position: absolute; inset: 0; background-size: cover; background-position: center 30%; }
.cta__scrim { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(20,20,20,.72), rgba(12,12,12,.72)); }
.cta__inner {
  position: relative; z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.cta__inner h2 { margin-bottom: 10px; }
.cta__inner p { margin: 0; color: var(--on-dark-soft); max-width: 40ch; }

/* ============================================================
   RANDEVU / KAYIT SAYFASI
   ============================================================ */

.page-hero {
  position: relative;
  min-height: 44vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-bottom: 56px;
  color: var(--on-dark);
}
.page-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.page-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,12,12,.55) 0%, rgba(12,12,12,.72) 100%); }
.page-hero__inner { position: relative; z-index: 1; }
.page-hero .hero__desc { margin: 10px 0 0; }

.reservation-page { padding-block: 70px 100px; background: var(--bg); }
.reservation-page__grid {
  display: grid;
  gap: 40px;
  align-items: start;
}
@media (min-width: 900px) {
  .reservation-page__grid { grid-template-columns: 1fr 320px; }
}

.booking-card--wide {
  position: static;
  max-width: none;
  width: 100%;
}

/* Form artık açılır-kapanır değil; overflow görünür olmalı ki takvim
   ve katılımcı seçici açılır panelleri kırpılmasın. */
.reservation-form__body { overflow: visible; }
/* Giriş ve çıkış tarihi her ekranda yan yana */
.booking-card__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 4px;
}
@media (min-width: 560px) {
  .booking-card__row { gap: 20px; }
}

/* Dar ekranda iki alan yan yana sıkışmasın diye bir kademe küçülür */
@media (max-width: 420px) {
  .booking-card__row { gap: 10px; }
  .booking-card__row .booking-field > span:first-child { font-size: 10px; letter-spacing: .03em; }
  .booking-card__row .booking-field__row span { font-size: 12.5px; }
  .booking-card__row .booking-field__row svg { width: 14px; height: 14px; }
}

/* Takvim paneli dar sütundan taşıp ekran dışına çıkmasın:
   sağdaki alanın paneli sağa yaslanır. */
.booking-card__row .datepicker-field:last-child .datepicker {
  left: auto;
  right: 0;
}
/* Not: takvim panelinin genişliği artık yukarıdaki 699px bloğunda
   clamp() ile ekran genişliğine bağlı; burada ayrıca daraltılmıyor. */

/* --- Ders seçimi: fotoğraflı kartlar --- */

.ders-select {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.ders-select__option {
  position: relative;
  display: flex;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  cursor: pointer;
  background: var(--cream);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ders-select__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ders-select__info {
  padding: 6px 18px;
}
.ders-select__info strong {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.ders-select__option:has(input:checked) {
  border-color: transparent;
  background: var(--gold-gradient);
  box-shadow: 0 0 0 3px var(--gold-soft);
}

.reservation-page__side {
  background: var(--ink-gradient);
  border: 1px solid var(--gold-soft);
  border-radius: 22px;
  padding: 28px 24px;
  color: var(--on-dark);
}
.reservation-page__side .about__p { color: var(--on-dark-soft); }
.reservation-page__contact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid rgba(238, 244, 251,.12);
  font-size: 13.5px;
}
.reservation-page__contact:first-of-type { border-top: none; margin-top: 18px; }
.reservation-page__contact svg { width: 17px; height: 17px; color: var(--gold); flex-shrink: 0; }
.reservation-page__contact:hover { color: var(--on-dark); }
.reservation-page__addr {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(238, 244, 251,.12);
  font-size: 13.5px;
  color: #fff;
  line-height: 1.7;
}

/* ============================================================
   YASAL SAYFALAR (Gizlilik Politikası, KVKK)
   ============================================================ */

.legal { padding-block: 130px 90px; background: var(--bg); min-height: 100vh; }
.legal__inner { max-width: 720px; }
/* Uzun metinli sayfalar (tesis kuralları) için geniş sütun */
.legal__inner--wide { max-width: 1040px; }
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--text-soft);
}
.breadcrumb a { color: var(--text-soft); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span:last-child { color: var(--ink); }
.legal__note {
  font-size: 13px;
  color: var(--text-soft);
  background: rgba(159,220,205,.12);
  border: 1px solid var(--gold-soft);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0 0 36px;
}
.legal h2 {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
  margin: 34px 0 10px;
}
.legal p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-soft);
  margin: 0 0 4px;
}
.legal p a { text-decoration: underline; color: var(--ink); }
.legal .text-link { margin-top: 40px; }

/* ============================================================
   FOOTER
   ============================================================ */

.footer { background: var(--ink-gradient); color: var(--on-dark-soft); padding-block: 64px 28px; }
@media (max-width: 780px) {
  .footer { padding-bottom: 90px; }
}
.footer__grid {
  display: grid;
  gap: 40px;
}
/* Mobilde logo+adres tam genişlik, "Kurumsal" ve "İletişim" iki sütun:
   alt alta dizildiğinde alt bilgi gereksiz yere uzuyordu. */
@media (max-width: 779px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
}
@media (min-width: 780px) {
  .footer__grid { grid-template-columns: 1.3fr 1fr 1fr; }
}
.brand--footer { margin-bottom: 14px; }
.footer__addr { font-size: 13.5px; line-height: 1.7; margin: 0; color: #fff; }
/* Dar ekranda "Antalya" tek başına alt satıra düşüyordu; posta kodundan
   sonraki kısım bütün halinde kalsın. */
.footer__addr span { white-space: nowrap; }

.footer__heading {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
  padding-bottom: 10px;
  position: relative;
}
/* Başlığın altında sağa doğru sönen ince altın çizgi */
.footer__heading::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  max-width: 150px;
  height: 1px;
  background: linear-gradient(90deg,
    var(--gold) 0%,
    rgba(159, 220, 205, .35) 60%,
    transparent 100%);
}

.footer__links { display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.footer__links a:hover { color: var(--on-dark); }

.footer__contact { display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.footer__contact a { display: flex; align-items: center; gap: 10px; }
/* İkonlar düz altın yerine altın gradyan. Telefon/Instagram ikonları
   çizgiyle (stroke), WhatsApp ikonu dolguyla (fill) çizildiği için
   ikisi ayrı ayrı hedefleniyor — yoksa çizgili ikonlar içi dolu çıkar. */
.footer__contact svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--gold); }
.footer__contact svg[fill="none"] { stroke: #ffffff; }
.footer__contact svg[fill="currentColor"] { fill: #ffffff; }
.footer__contact a:hover { color: var(--on-dark); }

.footer__bottom {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 2px solid;
  border-image: var(--gold-gradient-h) 1;
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .02em;
}
.footer__legal { display: flex; align-items: center; gap: 10px; }
/* 320px'de üç bağlantı yan yana sığmayıp her biri iki satıra kırılıyordu:
   bağlantılar bütün halinde kalsın, dar ekranda punto ve aralık küçülerek
   üçü tek satırda dursun. */
.footer__legal { flex-wrap: wrap; }
.footer__legal a { white-space: nowrap; }

/* Mobilde alt bilgi satırları tek sütuna indiği için sola yaslı durmak
   yerine ortalanır. */
@media (max-width: 560px) {
  .footer__bottom {
    font-size: 10px;
    row-gap: 8px;
    justify-content: center;
    text-align: center;
  }
  .footer__bottom > * { flex: 1 1 100%; }
  .footer__legal { gap: 8px; letter-spacing: 0; justify-content: center; }
  .footer__legal-dot { font-size: 9px; }
  .footer__credit { justify-content: center; }
}
/* En dar ekranda punto 8.5px'e iniyordu, okunmuyordu. 9.5px'te telif
   satırı sığmazsa iki satıra bölünür; yasal bağlantılar tek satırda kalır. */
@media (max-width: 380px) {
  .footer__bottom { font-size: 9.5px; }
  .footer__legal { gap: 6px; }
  .footer__legal-dot { font-size: 7.5px; }
}
.footer__legal a:hover { color: var(--on-dark); }
.footer__legal-dot { color: var(--gold); font-size: 10px; }

.footer__credit {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 500;
  opacity: .9;
  transition: opacity .2s ease;
}
.footer__credit:hover { opacity: 1; color: var(--on-dark); }
.footer__credit img { height: 13px; width: auto; }

/* ============================================================
   YUKARI ÇIK BUTONU
   ============================================================ */

.to-top {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 90;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ink-gradient);
  color: var(--on-dark);
  border: 1px solid var(--gold-soft);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.to-top svg { width: 18px; height: 18px; }


.whatsapp-fab {
  position: fixed;
  left: 24px; bottom: 24px;
  z-index: 90;
  /* Yukarı çık butonuyla aynı ölçü ve ince halka. CSS kenarlığa
     doğrudan gradyan verilemediği için iki katmanlı zemin kullanılıyor:
     iç daire motif laciverti (padding-box), halka açık mavi (border-box)
     — böylece buton koyu fotoğrafların üzerinde de seçiliyor.
     İkon beyaz: koyu mavi üzerinde en yüksek kontrast. */
  width: 44px; height: 44px;
  border-radius: 50%;
  color: #ffffff;
  border: 1px solid transparent;
  background:
    var(--ink-gradient) padding-box,
    var(--gold-gradient) border-box;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

/* Mobilde hero ekranındayken gizli: ön kayıt kartının üstüne binip
   "Katılımcı" ve "Ders Tipi" alanlarını kapatıyordu. Hero'da zaten
   "Müsaitliği Kontrol Et" butonu WhatsApp'a gidiyor. Sayfa aşağı
   kaydırılınca js/main.js "is-visible" ekleyerek butonu getiriyor. */
@media (max-width: 760px) {
  .whatsapp-fab {
    opacity: 0;
    visibility: hidden;
    transform: scale(.85);
    transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
  }
  .whatsapp-fab.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}
.whatsapp-fab:hover { filter: brightness(1.06); box-shadow: 0 10px 26px rgba(0,0,0,.34); }
.whatsapp-fab svg { width: 25px; height: 25px; }

/* ============================================================
   DERS ÖZELLİKLERİ (kart üzeri ikon satırı) VE DETAY POPUP'I
   ============================================================ */

.ders-card__amenities {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0;
  padding-top: 15px;
}
/* Ayraç çizgisi ikonların üstünde */
.ders-card__amenities::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    var(--gold-soft) 0%,
    rgba(159, 220, 205, .16) 65%,
    transparent 100%);
}
.ders-card__amenities span {
  display: flex;
  color: rgba(238, 244, 251, .82);
  cursor: default;
}
.ders-card__amenities svg { width: 19px; height: 19px; }

/* İnce altın çerçeveli buton — hep görünür, üzerine gelince altın dolguya döner */
.ders-card__details-btn {
  align-self: flex-start;
  margin-top: 14px;
  gap: 9px;
  padding: 9px 20px;
  font-size: 10.5px;
  letter-spacing: .2em;
  /* Altın dolgu artık varsayılan hâl; üzerine gelince biraz açılıyor */
  background: var(--gold-gradient-h);
  border: 1px solid transparent;
  color: var(--ink);
}
.ders-card__details-btn::before { display: none; } /* parlama animasyonu burada kapalı */
.ders-card__details-btn:hover {
  filter: brightness(1.1);
}
.ders-card__details-btn svg {
  width: 13px; height: 13px;
  transition: transform .3s ease;
}
.ders-card__details-btn:hover svg { transform: translateX(3px); }

.ders-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ders-modal[hidden] { display: none; }
.ders-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8,8,8,.78);
}
.ders-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 780px;
  max-height: 88vh;
  overflow-y: auto;
  display: grid;
  background: var(--ink-gradient);
  border: 1px solid var(--gold-soft);
  border-radius: 20px;
}
@media (min-width: 700px) {
  .ders-modal__panel { grid-template-columns: 1fr 1fr; max-height: 80vh; }
}
.ders-modal__image { min-height: 220px; }
.ders-modal__image img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 700px) {
  .ders-modal__image { border-radius: 20px 0 0 20px; overflow: hidden; }
}

.ders-modal__body { padding: 30px 28px; color: var(--on-dark); }
.ders-modal__body .eyebrow { color: var(--gold); }
.ders-modal__body h3 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  color: var(--on-dark);
  margin: 6px 0 14px;
}
.ders-modal__desc { font-size: 14.5px; line-height: 1.7; color: var(--on-dark-soft); margin: 0 0 20px; }
.ders-modal__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(238, 244, 251,.15);
  font-size: 13px;
  color: var(--on-dark-soft);
}
.ders-modal__meta strong {
  font-family: var(--serif);
  font-size: 20px;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ders-modal__amenities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 10px;
  margin-bottom: 24px;
}
.ders-modal__amenities li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--on-dark-soft);
}
.ders-modal__amenities svg { width: 17px; height: 17px; color: #ffffff; flex-shrink: 0; }

/* Mobilde popup yüksekliği ekrana sığmıyordu — görsel, yazılar ve
   kayıt butonu biraz küçültülüp aralıklar sıkılaştırıldı. */
@media (max-width: 699px) {
  .ders-modal { padding: 14px; }
  .ders-modal__image { min-height: 150px; }
  .ders-modal__body { padding: 20px 20px 22px; }
  .ders-modal__body h3 { font-size: 21px; margin: 4px 0 8px; }
  .ders-modal__desc { font-size: 12.5px; line-height: 1.5; margin: 0 0 14px; }
  .ders-modal__meta { padding-bottom: 12px; margin-bottom: 12px; font-size: 12px; }
  .ders-modal__meta strong { font-size: 17px; }
  .ders-modal__amenities { gap: 8px 10px; margin-bottom: 16px; }
  .ders-modal__amenities li { font-size: 12px; }
  .ders-modal__amenities svg { width: 15px; height: 15px; }
  .ders-modal__body .btn { padding: 7px 20px; font-size: 11px; }
}

.ders-modal__close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 2;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(8,8,8,.5);
  border: none;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.ders-modal__close svg { width: 16px; height: 16px; }

/* ============================================================
   GALERİ LIGHTBOX
   ============================================================ */

.gallery__grid img { transition: transform .45s ease, filter .35s ease; }
.gallery__item:hover img { transform: scale(1.05); filter: brightness(1.04); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8,8,8, 0.92);
  padding: 24px;
}
.lightbox[hidden] { display: none; }

.lightbox__figure {
  margin: 0;
  max-width: min(88vw, 1100px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.lightbox__figure img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.lightbox__figure figcaption {
  color: var(--on-dark-soft);
  font-size: 12.5px;
  letter-spacing: .04em;
  text-align: center;
}

.lightbox__close {
  position: absolute;
  top: 22px; right: 24px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(238, 244, 251,.1);
  border: 1px solid var(--gold-soft);
  color: var(--on-dark);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.lightbox__close svg { width: 18px; height: 18px; }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(238, 244, 251,.1);
  border: 1px solid var(--gold-soft);
  color: var(--on-dark);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s ease;
}
.lightbox__nav:active { background: rgba(238, 244, 251,.2); }
@media (hover: hover) {
  .lightbox__nav:hover { background: rgba(238, 244, 251,.2); }
}
.lightbox__nav svg { width: 20px; height: 20px; }
/* Oklar ve kapat butonu fotoğraf çerçevesinin (position: relative) altında kalmasın */
.lightbox__nav,
.lightbox__close { z-index: 2; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.lightbox__figure { touch-action: pan-y; }
.lightbox__figure img { -webkit-user-drag: none; user-select: none; }

/* Mobil: oklar fotoğrafın üstüne binmesin, altta yan yana dursun */
@media (max-width: 699px) {
  .lightbox { padding: 72px 16px 96px; }
  .lightbox__figure { max-width: 100%; }
  .lightbox__figure img { max-height: calc(100vh - 210px); max-height: calc(100dvh - 210px); }
  .lightbox__close { top: 16px; right: 16px; }
  .lightbox__nav {
    top: auto;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    transform: none;
  }
  .lightbox__nav--prev { left: calc(50% - 60px); }
  .lightbox__nav--next { right: calc(50% - 60px); }
}

@media (min-width: 700px) {
  .lightbox__nav--prev { left: 32px; }
  .lightbox__nav--next { right: 32px; }
}

/* ============================================================
   STÜDYO OLANAKLARI
   ============================================================ */

.amenities { padding-block: 100px; background: var(--bg); border-top: 1px solid var(--line); }

/* İçerik, yapışkan üst menünün (navbar pill) kenarlarıyla hizalansın.
   Menü 1300px ve üzerinde 1240px genişlikte sabitleniyor; container'ın
   2×48px iç boşluğu eklenerek aynı hizaya getirildi. */
@media (min-width: 1300px) {
  .amenities .container { max-width: 1336px; }
}
.amenities__intro {
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
}
/* Başlık geniş ekranlarda tek satırda dursun */
@media (min-width: 760px) {
  .amenities__intro .h2 { white-space: nowrap; }
}

.amenities__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
}
@media (min-width: 620px) { .amenities__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .amenities__grid { grid-template-columns: repeat(3, 1fr); } }
/* İkili ızgarada dokuz madde tek sayı: son satırda boş, gri bir hücre
   kalıyordu. Son madde tüm satırı kaplar. */
@media (max-width: 979px) {
  .amenities__grid .amenity:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

.amenity {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 22px;
  background: var(--bg);
  transition: background .25s ease;
}
.amenity:hover { background: #f1faf7; }
/* Daire: motif mavisi gradyan zemin, ikon çizgileri beyaz.
   Koyu mavi üzerinde en yüksek kontrastı beyaz veriyor. */
.amenity__icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-gradient);
}
.amenity__icon svg {
  width: 22px; height: 22px;
  stroke: #ffffff;
  /* koyu zeminde ince çizgiler kayboluyordu; hat kalınlaştırıldı */
  stroke-width: 1.7;
}
.amenity div { display: flex; flex-direction: column; gap: 3px; }
.amenity strong {
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--text);
}
.amenity span { font-size: 12.5px; color: var(--text-soft); line-height: 1.5; }

.amenities__notes {
  margin-top: 34px;
  padding: 26px 28px;
  border: 1px solid var(--gold-soft);
  border-radius: 20px;
  background: rgba(159, 220, 205, .08);
}
.amenities__notes-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
}
/* Metin içinde vurgulanan saatler */
.saat { font-weight: 600; color: var(--red); }

.amenities__notes ul { margin: 0; padding-left: 18px; }
.amenities__notes li {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.75;
  margin-bottom: 4px;
}

/* ============================================================
   KONUM & HARİTA
   ============================================================ */

.location { padding-block: 100px; background: var(--bg); border-top: 1px solid var(--line); }
.location__intro {
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
}
/* Başlık geniş ekranlarda tek satırda dursun */
@media (min-width: 760px) {
  .location__intro .h2 { white-space: nowrap; }
}
.location__lead {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-soft);
}

.location__grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 1000px) { .location__grid { grid-template-columns: 1.05fr 1fr; gap: 34px; } }

.location__map {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 340px;
  background: #e7eceb;
}
.location__map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

/* Mobilde harita ekranın çoğunu kaplıyordu */
@media (max-width: 699px) {
  .location__map { min-height: 0; height: 210px; border-radius: 18px; }
  .location__map iframe { min-height: 0; height: 100%; }
}

/* Geniş ekranda harita, yanındaki sütunun tamamı kadar uzuyordu.
   Sabit yüksekliğe alındı: adres satırı (46) + boşluk (20) + kutu üst
   payı (10) + çerçeve ve başlık (47) + 6 satır (211) + alt dolgu (18)
   ≈ 352px, yani listedeki son satırın hizasında bitiyor. */
@media (min-width: 1000px) {
  .location__grid { align-items: start; }
  .location__map { min-height: 0; height: 352px; }
  .location__map iframe { min-height: 0; height: 100%; }
}

.location__info { display: flex; flex-direction: column; gap: 20px; }

/* Adres solda, "Yol Tarifi Al" butonu sağında aynı satırda.
   Dar ekranda buton alt satıra iner. */
.location__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 20px;
}
.location__addr { display: flex; align-items: center; gap: 14px; }
/* Tesis Olanakları ikonlarıyla aynı: marka gradyanı daire içinde
   altın gradyan çizgili ikon. Altın, açık krem zeminde okunmadığı için
   daire de dolduruldu. */
.location__addr-icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-gradient);
}
.location__addr-icon svg {
  width: 22px; height: 22px;
  stroke: #ffffff;
  stroke-width: 1.7;
}
.location__addr div { display: flex; flex-direction: column; }
.location__addr strong {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  color: var(--text);
}
.location__addr span { font-size: 13px; color: var(--text-soft); letter-spacing: .03em; }

.location__dir { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; }
.location__dir svg { width: 16px; height: 16px; }

.nearby {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding-top: 10px;
}

/* Kutu görünümü her ekranda aynı; mobilde ayrıca akordiyona dönüşüyor */
.nearby__col {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 16px;
  background: #f1faf7;
}
.nearby__col[open] .nearby__title { border-bottom: 1px solid var(--line); }
.nearby__col ul { padding-block: 6px 12px; }
@media (min-width: 560px) { .nearby { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .nearby { grid-template-columns: 1fr; gap: 12px; } }
@media (min-width: 1240px) { .nearby { grid-template-columns: repeat(2, 1fr); } }

.nearby__title {
  margin: 0;
  padding: 14px 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  /* <summary> varsayılan üçgen işaretini kaldır */
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.nearby__title::-webkit-details-marker { display: none; }
.nearby__chev { display: none; width: 15px; height: 15px; flex-shrink: 0; }
.nearby ul { list-style: none; margin: 0; padding: 0; }
.nearby li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
}
.nearby li:last-child { border-bottom: 0; }
.nearby li span { color: var(--text); }
.nearby li em {
  margin-left: auto;
  font-style: normal;
  font-size: 12.5px;
  color: var(--text-soft);
  white-space: nowrap;
}

/* ---------- Mobil: listeler akordiyona dönüşür ---------- */
@media (max-width: 999px) {
  .nearby__title { cursor: pointer; user-select: none; }
  .nearby__chev { display: block; transition: transform .25s ease; }
  .nearby__col[open] .nearby__chev { transform: rotate(180deg); }

  /* Adres ile "Yol Tarifi Al" mobilde de yan yana kalsın:
     buton küçülür, adres yazısı gerekirse kısalır. */
  .location__top { flex-wrap: nowrap; gap: 12px; }
  .location__addr { min-width: 0; gap: 10px; }
  .location__addr-icon { width: 38px; height: 38px; }
  .location__addr-icon svg { width: 19px; height: 19px; }
  .location__addr strong { font-size: 17px; }
  .location__addr span { font-size: 11.5px; }
  .location__dir { padding: 9px 14px; font-size: 10.5px; letter-spacing: .1em; }
  .location__dir svg { width: 13px; height: 13px; }
}

/* Dar ekranda adres ile "Yol Tarifi Al" yan yana sıkışıyor, ikisi de
   okunmaz hale geliyordu. Buton kendi satırına iner; adres küçültülmez. */
@media (max-width: 620px) {
  .location__top { flex-wrap: wrap; gap: 16px; }
  .location__addr { flex: 1 1 100%; }
  .location__addr strong { font-size: 19px; }
  .location__addr span { font-size: 12.5px; }
  .location__addr-icon { width: 44px; height: 44px; }
  .location__addr-icon svg { width: 21px; height: 21px; }
  .location__dir {
    flex: 1 1 100%;
    justify-content: center;
    padding: 12px 18px;
    font-size: 11px;
    letter-spacing: .12em;
    gap: 8px;
  }
  .location__dir svg { width: 15px; height: 15px; }
}

/* ---------- Giriş / çıkış şeridi ---------- */

.checkin-band {
  margin-top: 28px;
  padding: 26px 30px;
  border-radius: 22px;
  background: var(--ink-gradient);
  color: var(--on-dark);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 34px;
}
.checkin-band__item { display: flex; flex-direction: column; gap: 2px; }
.checkin-band__label {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.checkin-band__item strong {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
}
.checkin-band__sep { width: 1px; align-self: stretch; background: var(--gold-soft); }
.checkin-band__note {
  flex: 1 1 320px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--on-dark-soft);
}
.checkin-band__note a { color: var(--cream); text-decoration: underline; }

/* Mobilde şerit fazla yer kaplıyordu */
@media (max-width: 699px) {
  .checkin-band {
    margin-top: 20px;
    padding: 16px 18px;
    border-radius: 16px;
    gap: 10px 20px;
  }
  .checkin-band__label { font-size: 9.5px; letter-spacing: .18em; }
  .checkin-band__item strong { font-size: 22px; }
  .checkin-band__note { flex-basis: 100%; font-size: 11.5px; line-height: 1.6; }
}

/* ============================================================
   STÜDYO KURALLARI POPUP'I
   Uzun metin olduğu için ders popup'ından daha küçük punto ve
   daha sıkı satır aralığı kullanılıyor.
   ============================================================ */

.rules-modal {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.rules-modal[hidden] { display: none; }
.rules-modal__backdrop { position: absolute; inset: 0; background: rgba(8,8,8,.78); }

.rules-modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 760px;
  max-height: 86vh;
  background: var(--ink-gradient);
  border: 1px solid var(--gold-soft);
  border-radius: 20px;
  overflow: hidden;
}

.rules-modal__close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(8,8,8,.5);
  border: none;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.rules-modal__close svg { width: 15px; height: 15px; }

.rules-modal__head {
  flex-shrink: 0;
  padding: 26px 28px 18px;
  border-bottom: 1px solid var(--gold-soft);
}
.rules-modal__head .eyebrow { color: var(--gold); font-size: 10px; margin-bottom: 8px; }
.rules-modal__head h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 10px;
  padding-right: 34px;
}
.rules-modal__note {
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--on-dark-soft);
}
.rules-modal__note a { color: var(--cream); text-decoration: underline; }

/* Kaydırılan gövde */
.rules-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px 28px 26px;
  overscroll-behavior: contain;
}
.rules-modal__item { padding-top: 20px; }
.rules-modal__item h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 7px;
}
.rules-modal__item h4 span {
  flex-shrink: 0;
  width: 21px; height: 21px;
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px;
  letter-spacing: 0;
  color: var(--gold);
}
.rules-modal__item p {
  margin: 0 0 7px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--on-dark-soft);
}
.rules-modal__item p:last-child { margin-bottom: 0; }
.rules-modal__item strong { color: #fff; font-weight: 500; }

@media (max-width: 699px) {
  .rules-modal { padding: 14px; }
  .rules-modal__panel { max-height: 90vh; }
  .rules-modal__head { padding: 22px 20px 15px; }
  .rules-modal__head h3 { font-size: 20px; }
  .rules-modal__body { padding: 4px 20px 22px; }
  .rules-modal__item { padding-top: 17px; }
  .rules-modal__item h4 { font-size: 12px; }
  .rules-modal__item p { font-size: 12px; line-height: 1.6; }
}

/* ============================================================
   MOBİL: HAKKIMIZDA BÖLÜMÜ TEK EKRANA SIĞSIN
   Menüden gelindiğinde üstte kocaman boşluk kalıyor, alttaki
   ikon şeridi ekranın dışında kalıyordu. Dolgular kısıldı,
   fotoğraflar ve yazılar bir kademe küçültüldü.
   ============================================================ */

@media (max-width: 699px) {
  .about--v4 {
    scroll-margin-top: 72px;
    min-height: calc(100svh - 72px);
    padding-block: 24px 26px;
  }
  .about__grid--v4 { gap: 14px 12px; }

  .about__side-photo--left,
  .about__side-photo--right { max-width: 195px; }

  .about__heading .h2 { font-size: 26px; margin-bottom: 10px; }
  .about__heading .eyebrow { margin-bottom: 10px; }

  /* margin kısayolu margin-inline:auto'yu eziyordu; yazılar sola
     kayıyordu — ortalama açıkça korunuyor. */
  .about__text--center .about__p {
    font-size: 13px;
    line-height: 1.6;
    margin: 0 auto 10px;
  }

  /* Yalnızca üst boşluk; punto ve iç boşluklar yukarıdaki
     .about__icon-row bloklarında tanımlı. */
  .about__icon-row { margin-top: 18px; }
}

/* ============================================================
   MOBİL: GALERİ BÖLÜMÜ TEK EKRANA SIĞSIN
   ============================================================ */

@media (max-width: 699px) {
  .gallery {
    scroll-margin-top: 72px;
    min-height: calc(100svh - 72px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 24px 28px;
  }
  .gallery .h2 { font-size: 26px; margin-bottom: 0; }
  .gallery .eyebrow { margin-bottom: 10px; }

  /* Mobil düzen: ilk fotoğraf iki kare genişliğinde (tam sıra),
     kalan 4 fotoğraf altında 2×2. Izgara genişliği kalan ekran
     yüksekliğinden türetiliyor, böylece son sıra kesilmiyor. */
  .gallery__grid {
    margin-top: 16px;
    gap: 10px;
    max-width: clamp(240px, calc((100svh - 246px) * 0.6), 100%);
    margin-inline: auto;
  }
  .gallery__grid .span-2 {
    grid-column: span 2;
    aspect-ratio: 3 / 2;
  }
  .gallery__item { border-radius: 16px; padding: 5px; }
  .gallery__grid img { border-radius: 12px; }
  .gallery__count { inset: 5px; border-radius: 12px; }
  .gallery__count { font-size: 9.5px; letter-spacing: .12em; }
  .gallery__count strong { font-size: 24px; }
}

/* ============================================================
   MOBİL: STÜDYO OLANAKLARI İKİLİ IZGARA
   Tek sütunda dokuz madde çok uzun bir liste oluşturuyordu.
   Kutular ikişerli diziliyor, ikon ve yazılar küçültülüyor.
   ============================================================ */

@media (max-width: 619px) {
  .amenities { padding-block: 56px; }
  .amenities__intro { margin-bottom: 26px; }

  .amenities__grid {
    grid-template-columns: repeat(2, 1fr);
    border-radius: 16px;
  }

  /* Yazılar ikonun sağında kalsın (dikey değil, yan yana) */
  .amenity {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 13px 10px;
  }
  .amenity__icon { width: 32px; height: 32px; }
  .amenity__icon svg { width: 16px; height: 16px; }
  .amenity div { min-width: 0; }
  .amenity strong { font-size: 11.5px; line-height: 1.25; }
  .amenity span { font-size: 9.5px; line-height: 1.35; }

  .amenities__notes { margin-top: 22px; padding: 18px; border-radius: 16px; }
  .amenities__notes-title { font-size: 11px; margin-bottom: 9px; }
  .amenities__notes li { font-size: 12.5px; line-height: 1.65; }
}


/* ============================================================
   MOTİF FİLİGRANI
   Logodaki halka motifi, bazı bölümlerin arkasında çok soluk bir desen
   olarak kullanılıyor. Şekil maske olarak gömülü; rengi ve
   saydamlığı her bölümde ayrı ayarlanıyor.
   ============================================================ */

.motif-filigran {
  position: relative;
  overflow: hidden;
}
.motif-filigran::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background: currentColor;
  -webkit-mask-image: var(--jera-motif);
  mask-image: var(--jera-motif);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

/* --- Alıntı şeridi: sağ altta büyük motif --- */
.quote-band { color: var(--on-dark); }
.quote-band::before {
  right: -70px; bottom: -90px;
  width: 330px; height: 350px;
  opacity: .07;
  transform: rotate(-12deg);
}
.quote-band__inner { position: relative; z-index: 1; }

/* --- Tesis Olanakları: sağ üstte açık zemine petrol tonunda motif --- */
.amenities { color: var(--red); }
/* Açık zeminde filigran %5 saydamlıkta kaldığı için daha büyük olmalı,
   yoksa fark edilmiyor. */
.amenities::before {
  left: -130px; top: -110px;
  width: 470px; height: 500px;
  opacity: .05;
  transform: rotate(-14deg);
}
.amenities > .container { position: relative; z-index: 1; }

/* --- Giriş / çıkış şeridi: sağda küçük motif --- */
.checkin-band { color: var(--on-dark); }
.checkin-band::before {
  right: 18px; top: 50%;
  width: 120px; height: 128px;
  margin-top: -64px;
  opacity: .09;
  transform: rotate(8deg);
}
.checkin-band__item,
.checkin-band__note,
.checkin-band__sep { position: relative; z-index: 1; }

@media (max-width: 699px) {
  .quote-band::before { width: 220px; height: 234px; right: -50px; bottom: -60px; }
  .amenities::before { width: 290px; height: 308px; left: -85px; top: -70px; }
  .gallery::before { width: 270px; height: 287px; left: -80px; bottom: -75px; }
  .checkin-band::before { width: 86px; height: 92px; margin-top: -46px; right: 10px; }
}

/* --- Galeri: sol altta motif filigranı --- */
.gallery { color: var(--red); }
.gallery::before {
  left: -120px; bottom: -120px;
  width: 450px; height: 478px;
  opacity: .05;
  transform: rotate(-8deg);
}
.gallery > .container { position: relative; z-index: 1; }

/* ============================================================
   AÇILIŞ EKRANI (LOADER)
   Sayfa yüklenene kadar marka renginde zemin üzerinde nefes alan logo.
   Sayfa hazır olduğunda js/main.js "is-done" sınıfını ekler.
   ============================================================ */

.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding-inline: 28px;
  text-align: center;
  /* Beyaz logo ancak koyu zeminde okunur; marka gradyanı kullanıldı */
  background: var(--ink-gradient);
  transition: opacity .55s ease, visibility .55s ease;
}
.loader.is-done {
  opacity: 0;
  visibility: hidden;
}

/* Tek efekt: logo nefes alır gibi hareket ediyor. Solma/büyüme geçişi yok. */
.loader__logo {
  width: min(260px, 62vw);
  height: auto;
  animation: logoAtisi 1s ease-in-out infinite;
}

@keyframes logoAtisi {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.08); }
  28%      { transform: scale(1); }
  42%      { transform: scale(1.05); }
  56%      { transform: scale(1); }
}

/* Logonun altındaki slogan: ilk satır üstte, devamı altında */
.loader__slogan {
  margin: 0;
  max-width: none;
  /* Tek satırda kalsın diye ekran genişliğine göre büyüyor; dar ekranda
     taşmaması için üst sınır viewport genişliğine bağlı. */
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 4.6vw, 46px);
  line-height: 1.25;
  white-space: nowrap;
  color: var(--cream);
  opacity: .9;
}

@media (max-width: 699px) {
  .loader { gap: 20px; }
  .loader__logo { width: min(190px, 52vw); }
  .loader__slogan { font-size: clamp(19px, 6.2vw, 30px); }
}

/* Hareket azaltma tercihi açıksa logo sabit dursun */
@media (prefers-reduced-motion: reduce) {
  .loader__logo { animation: none; }
}


/* --- Hero: fotoğrafın üstünde, yazıların altında büyük motif --- */
.hero__motif {
  position: absolute;
  z-index: 2;
  /* Metnin ve ön kayıt kartının arasına değil, sağ alt köşeye yerleşip
     kenardan taşıyor: marka filigranı olarak okunuyor, içeriği kapatmıyor. */
  right: -13%; bottom: -16%;
  width: min(560px, 64svh, 76vw);
  aspect-ratio: 1 / 1;
  background: var(--gold-gradient);
  opacity: .2;
  pointer-events: none;
  -webkit-mask-image: var(--jera-motif);
  mask-image: var(--jera-motif);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
@media (max-width: 699px) {
  .hero__motif { right: -22%; bottom: -10%; width: min(76vw, 44svh); opacity: .24; }
}

/* Buton yazısının sağındaki küçük motif (marka gradyanı dolgu;
   gradyan tanımı sayfa sonundaki gizli SVG'de: #redGradient) */
.btn__motif {
  width: 17px;
  height: auto;
  margin-left: 10px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transform-origin: center;
}
/* Butonun üzerine gelince hafifçe hareket eder */
.btn:hover .btn__motif,
.btn:focus-visible .btn__motif {
  animation: motifAtisi 1.9s ease-in-out infinite;
}

@keyframes motifAtisi {
  0%, 100% { transform: scale(1); }
  10%      { transform: scale(1.2); }
  20%      { transform: scale(1); }
  30%      { transform: scale(1.12); }
  42%      { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover .btn__motif { animation: none; }
}

/* ============================================================
   İPUCU BALONLARI (tooltip) EKRAN DIŞINA TAŞMASIN
   Balon her öğenin tam ortasına hizalanıp tek satırda kaldığı için
   soldaki ve sağdaki öğelerde ekranın dışına çıkıyordu.
   ============================================================ */

/* Masaüstü: kenardaki iki öğede balon içeri yaslanır */
.features--row4 .feature:first-of-type::after {
  left: 0;
  transform: translateX(0) translateY(4px);
}
.features--row4 .feature:last-of-type::after {
  left: auto; right: 0;
  transform: translateX(0) translateY(4px);
}
.features--row4 .feature:first-of-type:hover::after,
.features--row4 .feature:last-of-type:hover::after {
  transform: translateX(0) translateY(0);
}

/* Dar ekran / dokunmatik: 2×2 düzende sol sütun sola, sağ sütun sağa
   yaslanır ve balon tek satır olmaktan çıkıp sarar. (Noktalar <span>,
   öğeler <div> olduğu için nth-of-type sütunu doğru buluyor.)
   Genişlik koşulu da şart: dar bir masaüstü penceresinde balon tek satır
   kalıp 270px'e uzuyor ve ekranın dışına taşarak görünmez oluyordu. */
@media (hover: none) and (pointer: coarse), (max-width: 620px) {
  .feature::after {
    white-space: normal;
    width: max-content;
    max-width: min(44vw, 200px);
    text-align: center;
    line-height: 1.4;
    padding: 8px 12px;
  }
  .features--row4 .feature:nth-of-type(odd)::after {
    left: 0; right: auto;
    transform: translateX(0) translateY(4px);
  }
  .features--row4 .feature:nth-of-type(even)::after {
    left: auto; right: 0;
    transform: translateX(0) translateY(4px);
  }
  .features--row4 .feature:nth-of-type(odd):hover::after,
  .features--row4 .feature:nth-of-type(even):hover::after {
    transform: translateX(0) translateY(0);
  }
}


/* --- Galeri: her fotoğrafın üzerinde küçük altın motif --- */
.gallery__item::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  width: clamp(46px, 38%, 120px);
  aspect-ratio: 122 / 100;
  background: var(--gold-gradient);
  opacity: .34;
  pointer-events: none;
  -webkit-mask-image: var(--jera-motif);
  mask-image: var(--jera-motif);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
/* Rozetli karede sayı ile çakışmasın */
.gallery__last::before { display: none; }


/* --- Büyütülmüş fotoğrafta da motif --- */
.lightbox__frame {
  position: relative;
  display: flex;
  max-width: 100%;
}
.lightbox__frame::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  width: clamp(64px, 26%, 190px);
  aspect-ratio: 122 / 100;
  background: var(--gold-gradient);
  opacity: .3;
  pointer-events: none;
  -webkit-mask-image: var(--jera-motif);
  mask-image: var(--jera-motif);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

/* --- Hakkımızda: sol üstte motif filigranı --- */
.about--v4 { color: var(--red); }
.about--v4::before {
  left: -140px; top: -100px;
  width: 470px; height: 500px;
  opacity: .05;
  transform: rotate(-12deg);
}
.about--v4 > .container { position: relative; z-index: 1; }

/* --- Odalarımız: sağ üstte motif filigranı --- */
.dersler { color: var(--red); }
.dersler::before {
  right: -140px; top: -100px;
  width: 470px; height: 500px;
  opacity: .05;
  transform: rotate(12deg);
}
.dersler > .container { position: relative; z-index: 1; }

@media (max-width: 699px) {
  .about--v4::before { width: 280px; height: 298px; left: -85px; top: -65px; }
  .dersler::before { width: 280px; height: 298px; right: -85px; top: -65px; }
}

/* ============================================================
   DERS TİPİ SEÇİCİ (hero ön kayıt kartı)
   ============================================================ */

.ders-picker {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
}
.ders-picker__option {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: none;
  color: var(--on-dark);
  font-family: var(--sans);
  font-size: 13.5px;
  letter-spacing: .03em;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.ders-picker__option:hover { background: rgba(238, 244, 251,.1); }
.ders-picker__option.is-selected {
  background: rgba(159,220,205,.16);
  border-color: var(--gold-soft);
  color: #fff;
}

/* Müsaitlik butonundaki WhatsApp ikonu */
.btn__wa {
  width: 15px;
  height: auto;
  margin-left: 9px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* ============================================================
   STÜDYOYA ÖZEL EKLER
   Stüdyo sitesine özel bölümler.
   ============================================================ */

/* --- Hero: Google puanı --- */
.hero__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 0;
  font-size: 13px;
  color: var(--on-dark-soft);
  letter-spacing: .02em;
}
.hero__rating strong {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--on-dark);
  font-weight: 600;
}
.hero__stars {
  color: var(--mint);
  letter-spacing: .12em;
  font-size: 14px;
}
/* 360px altında "· Google'da 91 değerlendirme" iki satıra bölünüp
   yıldızların yanında dağınık duruyordu; satır bir kademe küçülür. */
@media (max-width: 359px) {
  .hero__rating { gap: 6px; font-size: 11.5px; letter-spacing: 0; }
  .hero__rating strong { font-size: 17px; }
  .hero__stars { font-size: 12px; letter-spacing: .06em; }
  .hero__rating > span:last-child { white-space: nowrap; }
}

/* --- Açık zeminli başlık varyantı (koyu bölümlerde) --- */
.h2--light { color: var(--on-dark); }

/* ============================================================
   VURGU ŞERİDİ
   Markanın kendi detayı: logonun siyah zemini üzerinde vurgu şeridi.
   Solda fotoğraf, sağda koyu lacivert zeminde metin.
   ============================================================ */

.motif-band {
  position: relative;
  overflow: hidden;
  background: var(--ink-gradient);
  color: var(--on-dark);
  margin-block: 0;
}
.motif-band__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
  padding-inline: 0;
  max-width: none;
}
.motif-band__photo {
  position: relative;
  min-height: 300px;
  overflow: hidden;
}
.motif-band__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Fotoğraf koyu zemine yumuşak geçsin */
.motif-band__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0) 55%, rgba(10,10,10,.85) 100%);
  pointer-events: none;
}
.motif-band__text {
  padding: 54px 24px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.motif-band__text p {
  margin: 0;
  color: var(--on-dark-soft);
  font-size: 15px;
  line-height: 1.85;
  max-width: 52ch;
}

/* Metnin altındaki küçük halka dizisi — marka motifinin yankısı */
.motif-band__eyes {
  display: flex;
  gap: 14px;
  margin-top: 10px;
}
.motif-band__eyes span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  background:
    radial-gradient(circle at 50% 50%,
      #1c1c1c 0 30%,
      #9fdccd 30% 52%,
      #f4f8f7 52% 74%,
      #2a8579 74% 100%);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  animation: motifSalinim 4.5s ease-in-out infinite;
}
.motif-band__eyes span:nth-child(2) { animation-delay: .35s; }
.motif-band__eyes span:nth-child(3) { animation-delay: .7s; }
.motif-band__eyes span:nth-child(4) { animation-delay: 1.05s; }
.motif-band__eyes span:nth-child(5) { animation-delay: 1.4s; }

@keyframes motifSalinim {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-5px) rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .motif-band__eyes span { animation: none; }
}

@media (min-width: 900px) {
  .motif-band__inner {
    grid-template-columns: 1.05fr 1fr;
  }
  .motif-band__photo { min-height: 460px; }
  .motif-band__photo::after {
    background: linear-gradient(90deg, rgba(10,10,10,0) 60%, rgba(10,10,10,.8) 100%);
  }
  .motif-band__text {
    padding: 70px 64px 70px 56px;
  }
  .motif-band__text p { font-size: 15.5px; }
}

@media (min-width: 1300px) {
  .motif-band__text { padding-right: calc((100vw - 1280px) / 2 + 48px); }
}

/* Motif şeridi bölüm aralığı: koyu blok kendi nefesini alsın */
.motif-band { scroll-margin-top: 80px; }