/* OtelDijital — vitrin sayfaları (beş sayfa, tek stil dosyası)
   Görsel dil: "Sakin Lüks" — AYDINLIK PREMIUM TEMA. Tek kaynak: DESIGN_SYSTEM.md
   Kararlar: docs/decisions/007-sakin-luks-gorsel-dili.md · 008-vitrin-sayfa-mimarisi.md
             · 009-aydinlik-premium-tema.md (koyu temadan aydınlığa geçiş, 2026-09-21)

   Site beş sayfadır: index (iç operasyon) · dijital-vitrin · teknolojik-altyapi · fiyatlandirma · iletisim.
   Beşi de bu tek dosyayı kullanır; her sayfa yalnızca kendi bölümlerinin sınıflarını çağırır.

   Sayfa bir lüks otelin AYDINLIK lobisi gibidir: krem, mat, sessiz, ferah.
     ~%70  KAŞMİR     — zemin ve boşluk. Sayfanın gövdesi (#f9f8f6).
     ~%15  ANTRASİT   — yazı ve başlık (#1c1c1a); saf siyah yoktur.
     ~%10  GRİ        — alt metin (#5e5e5b).
      ≤%5  ŞAMPANYA/BRONZ — yalnızca eylem ve vurgu: ana düğme, üst başlık (kicker), tek kelime.
   Zeytin, tek bir yerde kalır: iletişim bloğu (yumuşak adaçayı).
   Yüzey: 1 px açık gri çizgi, küçük köşe, gölge yok (telefon hariç), cam/blur yok, hap düğme yok.
   Yazı: başlık Cormorant Garamond (serif, 400), gövde Inter — ikisi de kendi alan adımızdan
   (aşağıdaki @font-face bloklarına bakın). Veri yazısı cihazın kendi monospace yazısıdır.

   ŞAMPANYA İLE BRONZ NEDEN İKİ AYRI RENK?
   Aydınlık zeminde açık şampanya (#c3a77d) bir YAZI rengi olarak okunmaz (kontrast ~1,9:1).
   Bu yüzden ikiye ayrıldı ve kural basittir:
     · --sampanya → DOLGU: ana düğmenin zemini, odak halkası, dolu çubuk.
     · --bronz    → YAZI ve İNCE ÇİZGİ: üst başlık (kicker), numara, vurgulu kelime, kenarlık.
   Yeni bir vurgu eklenirken bu ayrım korunur.

   Değişken ADLARI (--zemin, --yuzey, --metin, --cizgi…) korunmuştur; yalnızca değerleri değişti.
   Böylece HTML'deki sınıflar ve betikler aynen çalışır (DESIGN_SYSTEM.md · 3.5). */

/* ---------- Yazı tipleri: kendi alan adımızdan ---------- */
/* Denetim · Madde 12. Eskiden tek üçüncü parti bağımlılığımız Google Fonts'tu: sayfa açılırken
   fonts.googleapis.com'a gidip stil, oradan da fonts.gstatic.com'a gidip dosya çekiyordu.
   Artık dosyalar vitrin/yazilar/ içinde duruyor ve CSP'de font-src 'self' yazıyor.

   ÜÇ KARAR:
   1. İKİ AİLE. JetBrains Mono kaldırıldı (Genel Müdür, 2026-09-22): veri yazıları artık işletim
      sisteminin kendi monospace yazısını kullanıyor — indirilecek dosya yok, "veri" hissi duruyor.
   2. YALNIZCA KULLANILAN AĞIRLIKLAR. Ölçüldü: sayfada yalnızca 400 ve 500 geçiyor, 600 hiç
      kullanılmıyordu ama indiriliyordu. Artık istenmiyor.
   3. TEK DOSYA, İKİ AĞIRLIK. Her iki aile de DEĞİŞKEN fonttur: 400 ile 500 bayt bayt aynı dosyadır.
      Bu yüzden ağırlık bir aralık olarak yazılır (400 500) ve dosya bir kez inilir.

   Alt kümeler Google'ın kendi bölümlemesidir: latin ve latin-ext. Türkçenin ı, ğ, ş, İ harfleri
   latin-ext içindedir; ikisi de gereklidir. unicode-range sayesinde tarayıcı yalnızca sayfada
   geçen harfleri kapsayan dosyayı indirir.

   font-display: swap — yazı inene kadar metin yedek yazıyla GÖRÜNÜR. Hiçbir an boş kalmaz. */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('yazilar/cormorant-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('yazilar/cormorant-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('yazilar/cormorant-italik-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('yazilar/cormorant-italik-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('yazilar/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('yazilar/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Palet (DESIGN_SYSTEM.md · 3.2) — başka renk eklenmez */
  --kasmir-0:   #ffffff;      /* en açık yüzey: kart, telefon ekranı, form alanı */
  --kasmir-50:  #f9f8f6;      /* ANA ZEMİN: sayfanın gövdesi, üst çubuk, hero */
  --kasmir-100: #f2f0ec;      /* hafif gömülü yüzey: alt bölüm, pano özeti, ikon zemini */
  --kasmir-200: #e6e4e0;      /* çizgi ve kenarlık; boş çubuk izleri */
  --kasmir-300: #d6d3cc;      /* koyu çizgi: hover ve vurgulu kenar */

  --zeytin-50:  #e9ece3;      /* iletişim bloğu — sayfanın tek renkli alanı */
  --zeytin-200: #cfd6c6;      /* zeytin bloğun içindeki çizgi */

  --antrasit:   #1c1c1a;      /* ana metin ve başlıklar; şampanya düğmenin üstündeki yazı */
  --gri:        #5e5e5b;      /* alt metin */
  --gri-soluk:  #6b6966;      /* dipnot ve mono etiket — WCAG için koyulaştırıldı (denetim · Madde 10b) */

  --sampanya:   #c3a77d;      /* DOLGU vurgusu */
  --bronz:      #816335;      /* YAZI ve ince çizgi vurgusu — WCAG için koyulaştırıldı (denetim · Madde 10b) */

  /* Durum renkleri aydınlık zemine göre koyulaştırıldı; hepsi mat ve kısık kalır */
  --durum-iyi:    #4f7343;
  --durum-dikkat: #8f6415;
  --durum-sorun:  #a03a30;

  /* Cihaz: telefon maketinin çerçevesi. Sayfa yüzeyi değil, bir NESNEDİR; o yüzden koyu kalır
     ve içindeki aydınlık ekran öne çıkar (docs/decisions/009 · "telefon neden koyu?"). */
  --cihaz: #23231f;

  /* Eski adlar → yeni değerler */
  --zemin: var(--kasmir-50);
  --yuzey: var(--kasmir-0);
  --yuzey-ust: var(--kasmir-100);
  --cizgi: var(--kasmir-200);
  --cizgi-koyu: var(--kasmir-300);
  --metin: var(--antrasit);
  --metin-soluk: var(--gri);
  --metin-cok-soluk: var(--gri-soluk);

  /* Köşeler: sayfa parçaları küçük; telefon ve uygulama kesitleri uygulamanın kendisi gibi */
  --kose: 4px;                 /* kart */
  --kose-kucuk: 2px;           /* düğme, form alanı */
  --kose-uyg: 12px;            /* uygulamadan kesit (mini kart, düğme taklidi) */
  --kose-dev: 36px;            /* telefon çerçevesi */

  --olcek: clamp(1rem, 0.4vw + 0.9rem, 1.125rem);
  --gecis: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sure: 500ms;

  --baslik-yazi: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --govde-yazi: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Veri yazısı: işletim sisteminin kendi monospace yazısı. İndirilecek dosya yok (denetim · Madde 12);
     Genel Müdür kararı, 2026-09-22. Her sistemde zaten kurulu bir yazı seçilir, sıra öyle dizildi. */
  --veri-yazi: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* hidden özniteliği her zaman kazanır (display: grid/flex verilen kutular da gizlenebilsin) */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--govde-yazi);
  font-size: var(--olcek);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Sayfanın tek yan boşluğu burada tanımlanır */
.kolon {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 32px;
}

/* ---------- Yazı ---------- */
h1, h2, h3, .kumanda-kart-sayi, .halka-sayi, .sifre-sayi, .plan-fiyat {
  font-variant-numeric: lining-nums;
}

h1, h2, h3 {
  font-family: var(--baslik-yazi);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-wrap: balance;
  margin: 0;
  color: var(--metin);
}

h1 { font-size: clamp(2.75rem, 6vw, 5.25rem); line-height: 1.02; letter-spacing: -0.01em; }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
h3 { font-size: 1.375rem; font-weight: 500; line-height: 1.25; letter-spacing: 0; }

p { margin: 0; }
b { font-weight: 500; color: var(--metin); }

a { color: inherit; }

:focus-visible {
  outline: 1px solid var(--bronz);
  outline-offset: 4px;
  border-radius: var(--kose-kucuk);
}

.atla {
  position: absolute;
  left: -9999px;
}
.atla:focus {
  left: 20px;
  top: 12px;
  z-index: 50;
  background: var(--sampanya);
  color: var(--antrasit);
  padding: 10px 16px;
  border-radius: var(--kose-kucuk);
  text-decoration: none;
}

/* Üst başlık (kicker): şampanya, büyük harf, geniş aralık. Her bölüm bununla başlar. */
.etiket {
  display: block;
  font-family: var(--govde-yazi);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronz);
  margin-bottom: 20px;
}
.etiket--orta { text-align: center; }

/* ---------- Üst çubuk ---------- */
/* Üç sütun: solda marka, TAM ORTADA menü, sağda "Giriş Yap" + tek eylem. Cam yok, blur yok. */
.ust {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--zemin);
  /* Çizgi yalnızca kaydırılınca (betik ekler): tepede hero ile aynı zemindedir, çizgi gereksizdir */
  border-bottom: 1px solid transparent;
  transition: border-color 300ms var(--gecis);
}
.ust--kaydi { border-bottom-color: var(--cizgi); }

.ust-ic {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  min-height: 72px;
}

.marka {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
  text-decoration: none;
  color: var(--metin);
  font-family: var(--govde-yazi);
  font-weight: 500;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
}

/* Marka işareti: küçük şampanya kare, parlama yok */
.marka-isaret {
  width: 8px;
  height: 8px;
  background: var(--bronz);
  flex: none;
}

/* Menü kapsülü: <details>. Geniş ekranda açılır kutu DEĞİLDİR — düğmesi gizlenir, liste
   bugünkü gibi tek satır durur. Açılır davranışı yalnızca dar ekranda devreye girer
   (aşağıda, @media max-width: 900px · denetim · Madde 6). */
.menu-kapsul { justify-self: center; }
.menu-dugme { display: none; }
/* Tarayıcının kendi üçgen işareti kaldırılır; yerine kendi üç çizgimiz gelir. */
.menu-kapsul > summary { list-style: none; }
.menu-kapsul > summary::-webkit-details-marker { display: none; }

.menu {
  display: flex;
  gap: 4px;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.menu a {
  color: var(--metin-soluk);
  text-decoration: none;
  padding: 8px 14px;
  white-space: nowrap;
  transition: color 300ms var(--gecis);
}
.menu a:hover { color: var(--metin); }

/* Bulunulan sayfa: antrasit yazı ve altında ince bronz çizgi. Site beş sayfa olduğundan
   ziyaretçinin "neredeyim?" sorusu menüde cevaplanır (aria-current="page"). */
.menu a[aria-current="page"] {
  color: var(--metin);
  box-shadow: inset 0 -1px 0 0 var(--bronz);
}

/* Sağ taraf: "Giriş Yap" bağlantısı + tek düğme */
.ust-eylem {
  display: flex;
  align-items: center;
  gap: 22px;
  justify-self: end;
}
.ust-giris {
  color: var(--metin-soluk);
  text-decoration: none;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 300ms var(--gecis), border-color 300ms var(--gecis);
}
.ust-giris:hover { color: var(--metin); border-color: var(--bronz); }

/* ---------- Düğmeler (DESIGN_SYSTEM.md · 7.1) ---------- */
/* Üç tür: ana (şampanya), ikincil (çizgi), bağlantı. Hap yok, gölge yok, büyümez. */
.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--govde-yazi);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--kose-kucuk);
  transition: background 300ms var(--gecis), border-color 300ms var(--gecis), color 300ms var(--gecis);
}

.dugme--dev {
  background: var(--sampanya);
  color: var(--antrasit);
  min-height: 52px;
  padding: 0 28px;
}
.dugme--dev:hover { background: var(--bronz); color: var(--kasmir-0); }

/* Üst çubuktaki düğme ikincil türdür: çubuk yapışkan olduğu için sayfadaki ana düğmelerle hep aynı
   görünür alanda durur; dolu olsaydı ekranda iki şampanya olurdu (§3.3). */
.dugme--ince {
  background: transparent;
  color: var(--metin);
  border: 1px solid var(--bronz);
  min-height: 42px;
  padding: 0 20px;
  flex: none;
}
.dugme--ince:hover { background: rgba(138, 109, 59, 0.07); }

.dugme--sessiz {
  background: transparent;
  color: var(--metin);
  border: 1px solid var(--bronz);
  min-height: 52px;
  padding: 0 28px;
}
.dugme--sessiz:hover { background: rgba(138, 109, 59, 0.07); }

/* Düğme metni tek parça durur: "30 Gün" öneki ile devamı AYNI esnek öğenin içindedir.
   Ayrı öğe olsalardı aralarına düğmenin 10 px'lik boşluğu girer ve "30 GÜN  ÜCRETSİZ DENE"
   diye çift boşluklu görünürdü. Önek gizlendiğinde baştaki boşluk kendiliğinden yutulur. */
.dugme-yazi { display: inline; }

/* Bağlantı türü: antrasit yazı, altında ince bronz çizgi; hover'da çizgi koyulaşır */
.baglanti {
  display: inline-flex;
  align-items: center;
  color: var(--metin);
  text-decoration: none;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--cizgi-koyu);
  transition: border-color 300ms var(--gecis);
}
.baglanti:hover { border-color: var(--bronz); }

/* ---------- Hero ---------- */
/* Üst çubukla aynı krem zemin: sayfa tek bir aydınlık düzlemdir; hero'yu alttaki ince çizgi ayırır.
   Bol boşluk bilerek: sıkışık bir hero lobi hissini öldürür. */
.kahraman-alan {
  background: var(--zemin);
  border-bottom: 1px solid var(--cizgi);
}

/* Editoryal düzen: yazı ve telefon eşit iki sütun — dokuz kelimelik başlık üç satırda dursun (DESIGN_SYSTEM.md · 5) */
.kahraman {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding-block: clamp(80px, 10vw, 152px) clamp(64px, 9vw, 128px);
}

/* Başlık dokuz kelime: bir kademe küçük ve biraz geniş ki üç satırda dursun */
.kahraman h1 { max-width: 20ch; font-size: clamp(2.25rem, 4vw, 3.5rem); }

/* Tek vurgu kelimesi: italik serif, şampanya. İkincisi yoktur. */
.vurgu {
  color: var(--bronz);
  font-style: italic;
}

.giris {
  margin-top: 28px;
  max-width: 44ch;
  color: var(--metin-soluk);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.cta-satir {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}

/* Güvence tek satır, soluk: bağırmaz, arkada durur */
.guvence {
  margin: 28px 0 0;
  color: var(--metin-cok-soluk);
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}
.guvence span { margin-inline: 6px; color: var(--bronz); }

/* ---------- Alt sayfaların girişi ---------- */
/* Ana sayfanın hero'su iki sütundur (yazı + telefon). Alt sayfalarda telefon yoktur: tek sütun,
   aynı krem zemin, daha kısa boy. Ziyaretçi hangi sayfada olduğunu ilk ekranda anlar. */
.sayfa-kahraman-alan {
  background: var(--zemin);
  border-bottom: 1px solid var(--cizgi);
}

.sayfa-kahraman {
  padding-block: clamp(64px, 8vw, 112px) clamp(56px, 7vw, 96px);
  max-width: 900px;
  margin-inline: auto;
}
.sayfa-kahraman h1 { max-width: 20ch; font-size: clamp(2.1rem, 3.6vw, 3.1rem); }
.sayfa-kahraman .giris { max-width: 58ch; }

/* ---------- Uygulama görseli: kodla çizilmiş telefon ---------- */
/* Fotoğraf yok. Ekranda görünen şey ürünün kendisidir; içindeki akış gerçekten kıpırdar. */
.gorsel {
  position: relative;
  justify-self: end;
  min-width: 0;
  /* Sağ kenardan hafifçe taşar: görsel çerçeveye sığmayınca sayfa "devam ediyor" hissi verir.
     Gövdede overflow-x gizli olduğu için yan kaydırma çubuğu oluşmaz. */
  margin-inline-end: clamp(-96px, -4.5vw, -12px);
}

.telefon {
  position: relative;
  z-index: 1;
  width: min(400px, 100%);
  margin-inline-start: auto;
  background: var(--cihaz);
  border: 1px solid rgba(255, 255, 255, 0.08);   /* cihazın ince kenar ışığı; sayfa çizgisi değil */
  border-radius: var(--kose-dev);
  padding: 10px;
  /* Sayfadaki tek gölge: telefon masada durur */
  box-shadow: 0 28px 64px rgba(28, 28, 26, 0.13);
}

.telefon-ic {
  background: var(--kasmir-0);
  border-radius: calc(var(--kose-dev) - 8px);
  overflow: hidden;
}

/* Uygulama ekranındaki emoji ikonlar tek renge çekilir: renkli ikon lobiye yakışmaz.
   NOT: Bu kural eskiden yanlışlıkla ikiye bölünmüştü — yorum .olay-ikon'un başına yapışmış,
   süzgeç yalnızca .mini-ikon'a uygulanıyordu. Koyu zeminde fark edilmiyordu; aydınlık ekranda
   renkli emoji göze battığı için ikisi yeniden birleştirildi. */
.olay-ikon,
.mini-ikon {
  filter: grayscale(1) sepia(0.22) brightness(0.95);
}

/* Satır başındaki kısa etiket: oda numarası, saat ya da adım adı */
.mini-oda {
  font-family: var(--veri-yazi);
  font-size: 0.8125rem;
  color: var(--metin-cok-soluk);
  min-width: 5ch;
  flex: none;
}

.uyg-ust {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 13px;
  border-bottom: 1px solid var(--cizgi);
  font-size: 0.86rem;
}

.akis-baslik { font-weight: 500; color: var(--metin); }
.akis-otel {
  margin-inline-start: auto;
  color: var(--metin-cok-soluk);
  font-family: var(--veri-yazi);
  font-size: 0.8125rem;
}

/* Canlı işareti: sabit nokta. Sürekli animasyon ve parlama bu dilde yoktur (§8, §10). */
.nabiz {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--durum-iyi);
  flex: none;
}

.akis-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.olay {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--cizgi);
  min-width: 0;
}
.olay:last-child { border-bottom: 0; }

.olay-ikon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--kasmir-100);
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  flex: none;
}

.olay-metin {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--metin-soluk);
}
.olay-kim {
  color: var(--metin-cok-soluk);
  font-size: 0.8125rem;
  font-family: var(--veri-yazi);
  overflow-wrap: anywhere;
}

/* Durum rozetleri: yalnızca durum anlatır; renkler mat ve kısık */
.rozet {
  margin-inline-start: auto;
  flex: none;
  font-family: var(--veri-yazi);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  padding: 5px 8px;
  border-radius: var(--kose-kucuk);
  border: 1px solid var(--cizgi);
  color: var(--metin-soluk);
  white-space: nowrap;
}
.rozet--tamam  { color: var(--durum-iyi);    border-color: rgba(79, 115, 67, 0.35); }
.rozet--atandi { color: var(--metin-soluk);          border-color: var(--cizgi-koyu); }
.rozet--uyari  { color: var(--durum-dikkat); border-color: rgba(143, 100, 21, 0.32); }

/* Yeni düşen satır: yumuşak giriş */
.olay--yeni { animation: dus var(--sure) var(--gecis) both; }
@keyframes dus {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* Telefonun soluna taşan kart: müdürün tek bakışta gördüğü şey. Mat, cam değil. */
.kumanda-kart {
  position: absolute;
  z-index: 2;
  left: -4%;
  bottom: 11%;
  width: min(232px, 64%);
  padding: 16px 18px;
  background: var(--kasmir-0);
  border: 1px solid var(--cizgi);
  /* Koyu telefonun üstünde duruyor: ayrılsın diye sayfanın ikinci ve son yumuşak gölgesi */
  box-shadow: 0 14px 30px rgba(28, 28, 26, 0.14);
  border-radius: var(--kose);
}

.kumanda-kart-ust {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-family: var(--govde-yazi);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--metin-cok-soluk);
}

.kumanda-kart-sayi {
  display: block;
  margin-top: 8px;
  font-family: var(--baslik-yazi);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.05;
  color: var(--metin);
}

.kumanda-kart-not { margin-top: 4px; font-size: 0.8125rem; color: var(--metin-soluk); }

.akis-dip {
  margin-top: 16px;
  color: var(--metin-cok-soluk);
  font-size: 0.8125rem;
  text-align: center;
}

/* ---------- Bölümler ---------- */
/* Bölümler arasında "hiçbir şey olmayan" alan bilerek bırakılır; boşluk lükstür. */
.bolum {
  /* Boşluk lükstür ama sayfa da uzamamalı: denetim ana sayfa için 8.000 piksel sınırı koydu
     (Madde 9). Ölçek 12vw yerine 11vw — gözle fark edilmez, altı bölümde ~170 piksel kazandırır. */
  padding-block: clamp(96px, 11vw, 168px);
  border-top: 1px solid var(--cizgi);
}

.bolum-giris {
  margin-top: 20px;
  max-width: 56ch;
  color: var(--metin-soluk);
}

/* ---------- Operasyonun üç alanı: özet satırlar ---------- */
/* Bu üç alan eskiden ana sayfanın ortasında üç zikzak blok olarak, ekran kesitleriyle birlikte
   duruyordu. Ayrıntısı /ic-operasyon sayfasına taşındı (denetim · Madde 9); burada yalnızca üç
   cümlelik özeti var. Hizmet listesiyle aynı dil: numara, başlık, tek cümle. */
.alanlar {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--cizgi);
}
.alan-ozet {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid var(--cizgi);
}
.alan-no {
  font-family: var(--govde-yazi);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--bronz);
  padding-top: 6px;
}
.alan-ozet h3 { font-size: 1.25rem; }
.alan-ozet p { margin-top: 6px; color: var(--metin-soluk); font-size: 0.95rem; }

@media (min-width: 901px) {
  .alanlar { grid-template-columns: repeat(3, 1fr); gap: 0 48px; }
  /* Dört adımlık özet (nasıl çalışır) aynı düzeni dört sütunla kullanır. */
  .alanlar--dort { grid-template-columns: repeat(4, 1fr); gap: 0 36px; }
}

/* ---------- Hangi sorunları çözer: iki sütunlu karşılaştırma ---------- */
/* Solda otelin bugünkü hâli (soluk, arkada), sağda OtelDijital'li hâli (antrasit, önde).
   Kart yok, kutu yok: iki sütun ve aralarında ince bir çizgi. Dar ekranda alt alta iner. */
.sorunlar {
  list-style: none;
  padding: 0;
  margin: 56px 0 0;
  border-top: 1px solid var(--cizgi);
}

.sorun {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 28px 0;
  border-bottom: 1px solid var(--cizgi);
}

.sorun-once, .sorun-sonra { margin: 0; max-width: 52ch; }
.sorun-once { color: var(--metin-cok-soluk); }
.sorun-sonra { color: var(--metin); }

/* "Bugün" / "OtelDijital ile" — sütun başlığı her satırda tekrar eder ki dar ekranda da okunsun */
.sorun-etiket {
  display: block;
  margin-bottom: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--metin-cok-soluk);
}
.sorun-sonra .sorun-etiket { color: var(--bronz); }

@media (min-width: 901px) {
  .sorun {
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
  }
  /* Sağ sütun soldan ince bir çizgiyle ayrılır: "önce / sonra" sınırı görünür olsun */
  .sorun-sonra { padding-inline-start: clamp(24px, 3vw, 40px); border-left: 1px solid var(--cizgi); }
}

/* ---------- İç operasyon: üç blok, zikzak ---------- */
/* Sol görsel / sağ metin, sonra tersi. Aralarında bol boşluk; kart ızgarası yok (üçleme kuralı). */
.operasyon-baslik {
  text-align: center;
  max-width: 18ch;
  margin-inline: auto;
}

.operasyon {
  list-style: none;
  padding: 0;
  margin: clamp(56px, 7vw, 96px) 0 0;
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 8vw, 128px);
}

.operasyon-blok {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}

/* Görsel: kodla çizilmiş arayüz kesiti; sütunu doldurmaz, ortada durur */
.operasyon-gorsel .mini { max-width: 420px; margin-inline: auto; }

.operasyon-yazi h3 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 400; }
.operasyon-yazi p { margin-top: 16px; color: var(--metin-soluk); max-width: 42ch; }

/* Gizleme YALNIZCA betik varken (js-operasyon sınıfını betik ekler); betiksiz üç blok da baştan görünür. */
.js-operasyon .operasyon-blok {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--sure) var(--gecis), transform var(--sure) var(--gecis);
}
.js-operasyon .operasyon-blok.gorundu { opacity: 1; transform: none; }

/* ---------- Döngü hikâyesi: kaydırdıkça beliren dört adım ---------- */
.hikaye {
  list-style: none;
  padding: 0;
  margin: 64px 0 0;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 96px);
}

.hikaye-adim {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}

.hikaye-no {
  display: inline-block;
  font-family: var(--govde-yazi);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--bronz);
  margin-bottom: 14px;
}

.hikaye-yazi h3 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 400; }
.hikaye-yazi p { margin-top: 14px; color: var(--metin-soluk); max-width: 46ch; }

/* Gizleme YALNIZCA betik varken başlar (js-hikaye sınıfını betik ekler).
   Betik yoksa dört adım da baştan görünür; kimse boş sayfa görmez. */
.js-hikaye .hikaye-adim {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--sure) var(--gecis), transform var(--sure) var(--gecis);
}
.js-hikaye .hikaye-adim.gorundu { opacity: 1; transform: none; }

/* ---- Uygulamadan küçük bir kesit ---- */
.mini {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-uyg);
  padding: 16px;
}

.mini-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cizgi);
  font-size: 0.95rem;
}
.mini-etiket { font-family: var(--veri-yazi); font-size: 0.8125rem; color: var(--metin-cok-soluk); }

.mini-govde { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
.mini-govde--dar { padding-top: 8px; }

.mini-buton {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 1px solid var(--cizgi-koyu);
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--metin-soluk);
}
.mini-buton--yesil { border-color: rgba(79, 115, 67, 0.40); color: var(--durum-iyi); }
.mini-buton--secili { border-color: var(--bronz); color: var(--metin); }

.mini-satir {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--cizgi);
  font-size: 0.86rem;
  color: var(--metin-soluk);
}
.mini-satir:last-child { border-bottom: 0; }
.mini-satir--aktif { color: var(--metin); }
.mini-satir--tamam { color: var(--durum-iyi); }

.mini-ikon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--kasmir-100);
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  flex: none;
}

.mini-rozet {
  margin-inline-start: auto;
  font-family: var(--veri-yazi);
  font-size: 0.8125rem;
  padding: 4px 8px;
  border-radius: var(--kose-kucuk);
  border: 1px solid var(--cizgi);
  color: var(--metin-soluk);
  white-space: nowrap;
}
.mini-rozet--sari  { color: var(--durum-dikkat); border-color: rgba(143, 100, 21, 0.32); }
.mini-rozet--yesil { color: var(--durum-iyi);    border-color: rgba(79, 115, 67, 0.35); }

/* ---------- Kim ne yapar: personel ve müdür yan yana ---------- */
/* İki sütun, iki yüz. Kart değil; her sütun kendi başına bir sayfa parçası gibi durur.
   Altındaki uygulama kesiti (.mini) anlatılanın gerçekten ekranda böyle göründüğünü gösterir. */
.roller {
  margin-top: clamp(48px, 6vw, 72px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 72px);
}

.rol h3 {
  margin-top: 10px;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 400;
}

.rol-liste {
  list-style: none;
  counter-reset: rol;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--metin-soluk);
  font-size: 0.95rem;
}
/* Numara akışın dışında durur (mutlak konum): madde metni tek bir satır akışı olarak kalsın.
   Burada ızgara KULLANILMAZ — ızgara olsaydı <b> gibi her iç parça ayrı bir hücreye düşer,
   cümle kelime kelime alt alta inerdi. */
.rol-liste li {
  counter-increment: rol;
  position: relative;
  padding-inline-start: 40px;
}
/* Numara şampanyadır ve sayfanın geri kalanıyla aynı dildedir (01, 02…) */
.rol-liste li::before {
  position: absolute;
  inset-inline-start: 0;
  top: 4px;                          /* iki farklı punto: sayı ile cümlenin ilk satırı aynı hizaya gelsin */
  content: "0" counter(rol);
  font-family: var(--govde-yazi);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--bronz);
}
.rol-liste b { color: var(--metin); font-weight: 500; }

.rol-not {
  margin-top: 20px;
  color: var(--metin-cok-soluk);
  font-size: 0.9rem;
  max-width: 46ch;
}
.rol-not b { color: var(--metin-soluk); font-weight: 500; }

.rol .mini { margin-top: 28px; max-width: 420px; }

@media (min-width: 901px) {
  .roller { grid-template-columns: 1fr 1fr; }
}

/* ---------- İnteraktif keşif: ortada telefon, etrafında dört başlık ---------- */
.kesif {
  margin-top: 56px;
  display: grid;
  gap: 20px;
}

.kesif-dugmeler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.kesif-dugme {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  background: transparent;
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  color: var(--metin);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 300ms var(--gecis), background 300ms var(--gecis);
}
.kesif-dugme:hover { border-color: var(--cizgi-koyu); }
.kesif-dugme[aria-pressed="true"] {
  border-color: var(--bronz);
  background: rgba(195, 167, 125, 0.16);
}

/* Düğmede ikon yoktur (§7.1); sayfanın geri kalanı gibi numara */
.kesif-no {
  font-family: var(--govde-yazi);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--bronz);
  flex: none;
  min-width: 28px;
}

.kesif-yazi { display: flex; flex-direction: column; min-width: 0; }
.kesif-yazi b { font-weight: 500; }
.kesif-yazi small { color: var(--metin-soluk); font-size: 0.82rem; }

.kesif-telefon .telefon { margin-inline: auto; width: min(330px, 100%); }

/* Ekran değişince yumuşak bir giriş (hero'daki "dus" ile aynı hareket) */
.kesif-ekran { animation: dus 400ms var(--gecis) both; }

.ekran-govde { display: flex; flex-direction: column; gap: 10px; padding: 16px; }

.ekran-buton {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border: 1px solid var(--cizgi-koyu);
  border-radius: 8px;
  font-weight: 500;
  color: var(--metin-soluk);
}
.ekran-buton--ana { border-color: rgba(79, 115, 67, 0.45); color: var(--durum-iyi); }

.ekran-alarm {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid rgba(160, 58, 48, 0.32);
  color: var(--durum-sorun);
  font-weight: 500;
  font-size: 0.9rem;
}
.ekran-alarm--sakin { border-color: rgba(79, 115, 67, 0.35); color: var(--durum-iyi); }

.ekran-not {
  padding: 0 16px 16px;
  color: var(--metin-cok-soluk);
  font-size: 0.8125rem;
  text-align: center;
}

/* Geniş ekran: telefon ortada, düğmeler iki yanda. */
@media (min-width: 901px) {
  .kesif {
    grid-template-columns: 1fr minmax(0, 330px) 1fr;
    grid-template-rows: auto auto;
    gap: 20px clamp(24px, 4vw, 52px);
    align-items: center;
  }
  /* Düğmeler doğrudan ızgaraya girsin diye kapsayıcı saydamlaşır. */
  .kesif-dugmeler { display: contents; }
  .kesif-dugme:nth-child(1) { grid-column: 1; grid-row: 1; }
  .kesif-dugme:nth-child(2) { grid-column: 1; grid-row: 2; }
  .kesif-dugme:nth-child(3) { grid-column: 3; grid-row: 1; }
  .kesif-dugme:nth-child(4) { grid-column: 3; grid-row: 2; }
  .kesif-telefon { grid-column: 2; grid-row: 1 / span 2; }

  /* Hikâyede göz zikzak çizsin: çift numaralı adımlarda görsel sola geçer. */
  .hikaye-adim { grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); }
  .hikaye-adim:nth-child(even) .hikaye-gorsel { order: -1; }

  /* İç operasyon: 1 ve 3 sol görsel / sağ metin; 2 sağ görsel / sol metin. */
  .operasyon-blok { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); }
  .operasyon-blok:nth-child(even) .operasyon-gorsel { order: 1; }
  .operasyon-blok:nth-child(odd) .operasyon-yazi { padding-inline-start: clamp(0px, 3vw, 40px); }
  .operasyon-blok:nth-child(even) .operasyon-yazi { padding-inline-end: clamp(0px, 3vw, 40px); }
}

/* ---------- Dijital check-up: geçiş cümlesi + durum panosu ---------- */
/* Yalnızca dijital-vitrin.html sayfasında kullanılır: otelin dışarıdan nasıl göründüğünü ölçen pano.
   .bolum--gecis üstteki çizgiyi kaldırır, yerine geniş boşluk bırakır. */
.bolum--gecis {
  border-top: 0;
  padding-top: clamp(96px, 12vw, 176px);
}

.gecis {
  text-align: center;
  max-width: 22ch;
  margin-inline: auto;
  font-size: clamp(2rem, 4vw, 3.25rem);
}
/* İlk cümle geri çekilir, soru öne çıkar. */
.gecis-once {
  display: block;
  color: var(--metin-cok-soluk);
  font-style: italic;
  margin-bottom: 8px;
}

/* Pano: solda tek büyük sayı, sağda altı çubuk, altta bulgu ve tek düğme.
   Veri antrasitle çizilir; bronz yalnızca toplam skorda ve düğmede. */
.pano {
  margin-top: clamp(48px, 6vw, 72px);
  display: grid;
  grid-template-columns: minmax(230px, 0.72fr) 1.28fr;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  overflow: hidden;
}

.pano-ozet {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 32px);
  border-right: 1px solid var(--cizgi);
  background: var(--kasmir-100);
  text-align: center;
}

.pano-etiket {
  font-family: var(--govde-yazi);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--metin-cok-soluk);
}

/* Halka: 100 birimlik yol (pathLength), dolu kısım --deger kadar. */
.halka {
  position: relative;
  width: clamp(150px, 15vw, 180px);
  aspect-ratio: 1;
}
.halka svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);          /* dolma tepeden başlar */
}
.halka-iz, .halka-dolgu { fill: none; stroke-width: 3; }
.halka-iz { stroke: var(--kasmir-200); }
.halka-dolgu {
  stroke: var(--bronz);
  stroke-linecap: butt;
  stroke-dasharray: var(--deger) 100;
}

/* Büyük sayı: serif, orantılı rakamlar */
.halka-sayi {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--baslik-yazi);
  line-height: 1;
}
.halka-sayi b {
  font-size: clamp(2.8rem, 4.4vw, 3.6rem);
  font-weight: 400;
  color: var(--metin);
}
.halka-sayi small {
  font-family: var(--veri-yazi);
  font-size: 0.8125rem;
  color: var(--metin-cok-soluk);
  margin-inline-start: 3px;
}

.pano-otel {
  font-family: var(--veri-yazi);
  font-size: 0.8125rem;
  color: var(--metin-cok-soluk);
}

.olcumler {
  list-style: none;
  margin: 0;
  padding: clamp(24px, 3.5vw, 40px) clamp(22px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.olcum {
  display: grid;
  grid-template-columns: minmax(150px, 0.6fr) 1fr auto;
  align-items: center;
  gap: 16px;
}

.olcum-ad {
  display: flex;
  flex-direction: column;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.25;
  min-width: 0;
  color: var(--metin);
}
.olcum-ad small {
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--metin-cok-soluk);
}

/* İnce çubuk: antrasit dolgu, açık gri iz */
.olcum-cubuk {
  display: block;
  height: 2px;
  background: var(--kasmir-200);
  overflow: hidden;
}
.olcum-dolgu {
  display: block;
  height: 100%;
  width: calc(var(--deger) * 1%);
  background: var(--metin);
}

/* Sayılar alt alta hizalansın diye burada tablo rakamı kullanılır. */
.olcum-sayi {
  font-family: var(--veri-yazi);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  min-width: 2.2ch;
  text-align: right;
  color: var(--metin-soluk);
}

.pano-alt {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding: 22px clamp(22px, 4vw, 48px);
  border-top: 1px solid var(--cizgi);
}
.pano-bulgu { display: flex; flex-direction: column; color: var(--metin-soluk); }
.pano-bulgu span { font-size: 1.05rem; }
.pano-bulgu small { font-size: 0.82rem; color: var(--metin-cok-soluk); }

/* Dolma hareketi YALNIZCA betik varken (js-pano sınıfını betik ekler).
   Betiksiz pano baştan doludur; hareket istemeyende hiçbir şey kıpırdamaz. */
.js-pano {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--sure) var(--gecis), transform var(--sure) var(--gecis);
}
.js-pano .olcum-dolgu {
  width: 0;
  transition: width 1.1s var(--gecis) 0.3s;
}
.js-pano .halka-dolgu {
  stroke-dashoffset: var(--deger);
  transition: stroke-dashoffset 1.3s var(--gecis) 0.3s;
}
.js-pano.gorundu { opacity: 1; transform: none; }
.js-pano.gorundu .olcum-dolgu { width: calc(var(--deger) * 1%); }
.js-pano.gorundu .halka-dolgu { stroke-dashoffset: 0; }

/* ---------- Değerler: her değer bir satır ---------- */
/* Solda numara ve serif başlık (5 sütun), sağda açıklama ve üç madde (7 sütun). Kart yok, çizgi var. */
.degerler {
  list-style: none;
  padding: 0;
  margin: 56px 0 0;
  border-top: 1px solid var(--cizgi);
}

.deger {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 20px 64px;
  align-items: start;
  padding: 40px 0;
  border-bottom: 1px solid var(--cizgi);
}

.deger-no {
  display: block;
  font-family: var(--govde-yazi);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--bronz);
  margin-bottom: 12px;
}

.deger h3 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 400; }
.deger-yazi p { color: var(--metin-soluk); max-width: 56ch; }

.deger-liste {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--metin-soluk);
}
.deger-liste li { display: flex; gap: 12px; }
.deger-liste li::before { content: "—"; color: var(--bronz); flex: none; }

/* ---------- Raporlama: solda metin, sağda vardiya özeti ---------- */
.rapor {
  margin-top: clamp(48px, 6vw, 72px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

.rapor-yazi p { color: var(--metin-soluk); max-width: 52ch; }

.rapor-liste {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 52ch;
}
.rapor-liste li {
  padding-inline-start: 18px;
  border-inline-start: 1px solid var(--cizgi-koyu);
  color: var(--metin-soluk);
  font-size: 0.95rem;
}
.rapor-liste b { color: var(--metin); font-weight: 500; }

.rapor-not { margin-top: 28px; color: var(--metin-cok-soluk); font-size: 0.9rem; }

.rapor-gorsel .mini { max-width: 420px; margin-inline: auto; }

@media (min-width: 901px) {
  .rapor { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(40px, 6vw, 96px); }
}

/* ---------- Hizmet listesi: dijital yönetim ve teknik altyapı ---------- */
/* Altı kart değil, iki sütunlu bir liste: otelin menüsü gibi. Numara, başlık, tek cümle. */
.hizmetler {
  list-style: none;
  padding: 0;
  margin: 56px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 64px;
  border-top: 1px solid var(--cizgi);
}

.hizmet {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid var(--cizgi);
  min-width: 0;
}

.hizmet-no {
  font-family: var(--govde-yazi);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--bronz);
  padding-top: 8px;
}

.hizmet h3 { font-size: 1.375rem; }
.hizmet p { margin-top: 8px; color: var(--metin-soluk); font-size: 0.95rem; }

/* Teknik not: mono, soluk, tek satır — katalog değil */
.hizmet-teknik {
  display: block;
  margin-top: 12px;
  font-family: var(--veri-yazi);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--metin-cok-soluk);
}

/* Bölüm sonundaki tek çağrı: ortada düğme, altında kısa bir not. */
.bolum-cta {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.bolum-cta-not { color: var(--metin-cok-soluk); font-size: 0.875rem; }

/* ---------- Şifre yönetimi ---------- */
.sifre {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: center;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  padding: 40px 40px;
  margin-block: clamp(24px, 4vw, 48px);
}

.sifre-sayi {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--baslik-yazi);
  line-height: 1;
}
.sifre-sayi span {
  font-size: clamp(3.6rem, 7vw, 5.5rem);
  font-weight: 400;
  color: var(--bronz);
}
.sifre-sayi small {
  font-family: var(--govde-yazi);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--metin-cok-soluk);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 8px;
}

.sifre-yazi h2 { font-size: clamp(1.6rem, 2.8vw, 2.25rem); }
.sifre-yazi p { margin-top: 14px; color: var(--metin-soluk); max-width: 56ch; }

/* ---------- Diğer kapılar: başka sayfaya giden iki blok ---------- */
/* Her sayfanın sonunda duran iki kapı. Burada hizmet ANLATILMAZ: tek cümle ve bir düğme.
   Anlatım kendi sayfasına aittir (docs/decisions/008-vitrin-sayfa-mimarisi.md). */
.kapilar {
  margin-top: clamp(48px, 6vw, 72px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.kapi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(28px, 4vw, 40px);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  transition: border-color 300ms var(--gecis);
}
.kapi:hover { border-color: var(--cizgi-koyu); }
.kapi h3 {
  margin: 0;
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  font-weight: 400;
  color: var(--metin);
  max-width: 30ch;
}
.kapi .dugme { margin-top: auto; }

@media (min-width: 901px) {
  .kapilar { grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 40px); }
  /* Ana sayfada üç hizmet yan yana ve EŞİT durur: hiçbiri diğerinden büyük görünmez
     (denetim · Madde 15). Alt sayfalarda iki kapı kalır. */
  .kapilar--uc { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Tarife: dört kart değil, dört satır ---------- */
/* Ad ve oda aralığı · fiyat · neler var · tek düğme. Kabartma yalnızca Standart'ta: solda şampanya çizgi. */
.tarife {
  list-style: none;
  padding: 0;
  margin: 56px 0 0;
  border-top: 1px solid var(--cizgi);
}

.plan {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 2.2fr) auto;
  gap: 16px 40px;
  align-items: center;
  padding: 32px 0 32px 24px;
  border-bottom: 1px solid var(--cizgi);
  border-left: 1px solid transparent;
  min-width: 0;
}

.plan--one { border-left-color: var(--bronz); }

.plan-rozet {
  font-family: var(--govde-yazi);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronz);
  margin-bottom: 8px;
}

.plan h3 { font-size: 1.75rem; font-weight: 400; }

.plan-oda {
  font-family: var(--veri-yazi);
  font-size: 0.8125rem;
  color: var(--metin-cok-soluk);
  margin-top: 4px;
}

.plan-fiyat {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--baslik-yazi);
  font-variant-numeric: tabular-nums;
  color: var(--metin);
  white-space: nowrap;
}
.para { font-size: 1.375rem; font-weight: 400; color: var(--metin-soluk); }
.rakam { font-size: clamp(2.4rem, 3.6vw, 3rem); font-weight: 400; line-height: 1; }
.rakam--yazi { font-size: clamp(1.6rem, 2.4vw, 2rem); font-style: italic; }
.donem { font-family: var(--veri-yazi); font-size: 0.8125rem; color: var(--metin-cok-soluk); }

/* Neler var: yan yana, aralarında bronz nokta */
.plan-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--metin-soluk);
}
.plan-liste li { display: inline-flex; align-items: baseline; }
.plan-liste li:not(:last-child)::after { content: "·"; color: var(--bronz); margin-inline: 10px; }

.plan .dugme { white-space: nowrap; }

/* Şeffaflık bloğu: para birimi, KDV, faturalandırma, ödeme, iptal, büyük oteller (denetim · Madde 4).
   Denetimin açık şartı: "küçük punto değil, okunur boyutta". O yüzden bu blok bir dipnot gibi değil,
   tarifenin devamı gibi durur — aynı 0.95rem gövde ölçüsü, aynı çizgi düzeni. Ticari kararlar
   docs/decisions/012-fiyat-seffafligi.md içindedir; oradaki bir cümle değişirse burası da değişir. */
.seffaflik {
  margin: clamp(40px, 5vw, 56px) 0 0;
  border-top: 1px solid var(--cizgi);
}
.seffaflik-satir {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 32px;
  padding: 20px 0;
  border-bottom: 1px solid var(--cizgi);
}
.seffaflik dt {
  color: var(--metin);
  font-weight: 500;
  font-size: 0.95rem;
}
.seffaflik dd {
  margin: 0;
  color: var(--metin-soluk);
  font-size: 0.95rem;
  max-width: 68ch;
}
.seffaflik dd a {
  color: var(--metin);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--cizgi-koyu);
  text-underline-offset: 3px;
  transition: text-decoration-color 300ms var(--gecis);
}
.seffaflik dd a:hover { text-decoration-color: var(--bronz); }

@media (min-width: 901px) {
  /* Geniş ekranda başlık solda dar bir sütunda durur; göz satır başlarından aşağı kayar. */
  .seffaflik-satir { grid-template-columns: minmax(0, 15ch) minmax(0, 1fr); align-items: baseline; }
}

.fiyat-dip {
  margin-top: 32px;
  text-align: center;
  color: var(--metin-cok-soluk);
  font-size: 0.875rem;
}

/* ---------- İletişim: yumuşak adaçayı blok içinde form ---------- */
/* Sayfanın tek renkli alanı burasıdır: yumuşak adaçayı. Ziyaretçi son adımda krem düzlemden çıkar.
   Cam yok, gölge yok; içindeki form alanları beyazdır ki yazı yazılan yer belli olsun. */
.iletisim-alan { position: relative; }

.iletisim {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  padding: clamp(32px, 5vw, 64px);
  margin-block: clamp(24px, 4vw, 48px);
  background: var(--zeytin-50);
  border: 1px solid var(--zeytin-200);
  border-radius: var(--kose);
}
.iletisim h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.iletisim-yazi .etiket { margin-bottom: 18px; }
.iletisim-yazi p { margin-top: 14px; color: var(--metin-soluk); max-width: 40ch; }
.iletisim-posta { font-size: 0.9rem; }
.iletisim-posta a {
  color: var(--metin);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--cizgi-koyu);
  padding-bottom: 2px;
  transition: border-color 300ms var(--gecis);
}
.iletisim-posta a:hover { border-color: var(--bronz); }

/* Ulaşım bilgileri: telefon, WhatsApp, çalışma saatleri, şehir, yanıt süresi.
   Değerler girilene kadar HTML'de "hidden" (denetim · Madde 2 · docs/decisions/010).
   Tanım listesi (dl) kullanılır: "Telefon" bir etiket, numara onun karşılığıdır; ekran okuyucu da böyle okur. */
.ulasim {
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.9rem;
}
.ulasim-satir {
  display: grid;
  grid-template-columns: minmax(0, 11ch) minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding-block: 11px;                 /* dokunma alanı ≥ 44 px (denetim · Madde 10d) */
  border-bottom: 1px solid var(--zeytin-200);
}
.ulasim-satir:last-child { border-bottom: 0; }
.ulasim dt { color: var(--metin-cok-soluk); font-size: 0.8125rem; letter-spacing: 0.04em; }
.ulasim dd { margin: 0; color: var(--metin-soluk); }
.ulasim dd a {
  color: var(--metin);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--cizgi-koyu);
  padding-bottom: 2px;
  transition: border-color 300ms var(--gecis);
}
.ulasim dd a:hover { border-color: var(--bronz); }

/* ---- Form (DESIGN_SYSTEM.md · 7.3) ---- */
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.alan { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.alan--tam { grid-column: 1 / -1; }
.alan label {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--metin-soluk);
}
.alan label small { font-weight: 400; letter-spacing: 0.04em; text-transform: none; font-size: 0.8125rem; color: var(--metin-cok-soluk); }

.alan input,
.alan select,
.alan textarea {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--metin);
  background: var(--kasmir-0);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-kucuk);
  min-height: 56px;
  padding: 14px 16px;
  transition: border-color 300ms var(--gecis);
}
.alan input::placeholder,
.alan textarea::placeholder { color: var(--metin-cok-soluk); }
.alan input:hover,
.alan select:hover,
.alan textarea:hover { border-color: var(--cizgi-koyu); }
.alan input:focus,
.alan select:focus,
.alan textarea:focus {
  outline: none;
  border-color: var(--bronz);
}
.alan textarea { min-height: 128px; resize: vertical; }

/* Açılır liste: tarayıcının kalın oku yerine ince bir ok. "Seçin" yer tutucusu soluk kalır. */
.alan select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23b9b3a6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  cursor: pointer;
}
.alan select:invalid { color: var(--metin-cok-soluk); }
.alan select option { background: var(--kasmir-0); color: var(--metin); }

/* Düğme olarak kullanılan .dugme: bağlantıyla aynı görünsün. */
button.dugme { font: inherit; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; border: 0; cursor: pointer; }

.form-alt {
  margin-top: 6px;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 24px;
}
/* Formun başındaki tek cümle: hangi alanlar zorunlu? (denetim · Madde 13)
   Yıldız işareti kullanmıyoruz; isteğe bağlı olanların yanında zaten öyle yazıyor. */
.form-zorunlu {
  grid-column: 1 / -1;
  margin-bottom: -4px;
  font-size: 0.8125rem;
  color: var(--metin-soluk);
}

/* KVKK onay kutusu: zımni onay yerine açık eylem (denetim · Madde 13).
   Dokunma alanı: kutunun kendisi 24 px (WCAG 2.5.8 eşiği); asıl hedef olan etiket 44 px'i geçer
   ve kutuyu işaretler. Böylece kutu görsel olarak büyümeden hedef büyür (Madde 10'daki yöntem). */
.onay {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.onay input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  width: 24px;
  height: 24px;
  min-height: 0;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  accent-color: var(--bronz);
  cursor: pointer;
}
.onay input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--sampanya);
  outline-offset: 3px;
}
.onay label {
  /* DİKKAT: buraya flex ya da grid yazılmaz — etiketin içindeki bağlantı ve düz metin ayrı
     kutulara bölünür, cümle ikiye ayrılır. Blok kalır; 44 px hedefi dikey boşlukla sağlanır:
     tek satırda 20 + 24 = 44 px. */
  display: block;
  padding: 12px 0;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.55;
  color: var(--metin-soluk);
  cursor: pointer;
}
.onay label a { color: var(--bronz); }

/* Gönderilemezse görünen not (betik açar); betik yoksa noscript içindeki aynı kutu görünür */
.form-durum {
  grid-column: 1 / -1;
  font-size: 0.875rem;
  color: var(--durum-sorun);
  padding: 12px 16px;
  border: 1px solid rgba(160, 58, 48, 0.32);
  border-radius: var(--kose-kucuk);
}

/* Tuzak alan: ekranın dışında, göze ve klavyeye görünmez */
.tuzak {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.dugme:disabled { opacity: 0.6; cursor: progress; }

/* Gönderilince alanlar yumuşakça kaybolur, yerini onay ekranı alır (etkilesim.js · 4) */
.form--gidiyor {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 350ms var(--gecis), transform 350ms var(--gecis);
  pointer-events: none;
}

.form-kutu { min-width: 0; }

.form-basari {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  min-height: 340px;
  padding: 32px 24px;
  background: var(--kasmir-0);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  animation: dus var(--sure) var(--gecis) both;
}
.form-basari-ikon {
  color: var(--bronz);
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 8px;
}
.form-basari h3 { font-size: 1.75rem; font-weight: 400; }
.form-basari p { color: var(--metin-soluk); max-width: 32ch; }

/* ---------- Tek satırlık sayfalar: yasal metinler ve hata sayfaları ---------- */
/* Dört yasal sayfa (KVKK, gizlilik, çerez, kullanım şartları) ile iki hata sayfası (404, 500)
   aynı düzeni kullanır: ekranın ortasında tek bir zarif blok. İçerik az olduğu için yükseklik
   bilerek büyük tutulur — alt bölüm ekranın ortasına tırmanmasın, sayfa terk edilmiş görünmesin. */
.yasal, .hata {
  min-height: 58vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  padding-block: clamp(96px, 14vw, 180px);
}
.yasal h1, .hata h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
.yasal-not, .hata-not { color: var(--metin-soluk); max-width: 46ch; }

/* Hata sayfasında iki çıkış yan yana durur; ortalanır ve dar ekranda alt alta iner. */
.hata .cta-satir { justify-content: center; }
.hata-yardim { margin-top: 10px; color: var(--metin-cok-soluk); font-size: 0.875rem; }

/* ---------- Kapanış ---------- */
.kapanis {
  text-align: center;
  /* Bölümlerle aynı ritim: 11vw (bkz. .bolum) */
  padding-block: clamp(96px, 11vw, 168px);
  border-top: 1px solid var(--cizgi);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.kapanis h2 { max-width: 18ch; }
.kapanis p { color: var(--metin-soluk); }
.kapanis .dugme { margin-top: 8px; }
.guvence-tek { color: var(--metin-cok-soluk); font-size: 0.875rem; }

/* ---------- Alt ---------- */
.alt {
  background: var(--kasmir-100);
  color: var(--metin-soluk);
  border-top: 1px solid var(--cizgi);
}
.alt .marka { color: var(--metin); }
.alt-ic {
  padding-block: 56px 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  font-size: 0.9rem;
}
/* Üst satır: solda marka ve tek cümle, sağda uygulama bağlantıları (Giriş Yap · Dene · İletişim) */
.alt-ust {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px 32px;
}
.alt-marka { display: flex; flex-direction: column; gap: 10px; }

/* İki grup yan yana: "Sayfalar" ve "Uygulama". Site beş sayfa olunca alt bölüm, dar ekranda
   kısılan üst menünün yedeği oldu; o yüzden bütün sayfalar burada da listelenir. */
.alt-gruplar { display: flex; flex-wrap: wrap; gap: 24px clamp(32px, 5vw, 64px); }
.alt-grup { display: flex; flex-direction: column; gap: 12px; }
.alt-baslik {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--metin-cok-soluk);
}
/* Gruplu listede alt çizgi yoktur: yan yana yedi bağlantı çizgiliyse sayfa gürültülü görünür. */
.alt-grup .alt-baglantilar { flex-direction: column; gap: 8px; }
.alt-grup .alt-baglantilar a { border-bottom-color: transparent; color: var(--metin-soluk); }
.alt-grup .alt-baglantilar a:hover { color: var(--metin); border-bottom-color: var(--bronz); }

.alt-baglantilar { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 0.875rem; }
.alt-baglantilar a {
  color: var(--metin);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--cizgi-koyu);
  transition: border-color 300ms var(--gecis);
}
.alt-baglantilar a:hover { border-color: var(--bronz); }

/* Kurumsal künye: ticari ünvan, telefon, şehir, vergi bilgisi. Dokuz sayfanın alt bölümünde durur.
   Değerler girilene kadar HTML'de "hidden" olduğu için ziyaretçi bunu görmez (denetim · Madde 2;
   doldurma adımları docs/decisions/010-kunye-ve-telefon.md). Sessiz durur: alt bölümün en soluk satırı. */
.kunye {
  padding-top: 24px;
  border-top: 1px solid var(--cizgi);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  font-size: 0.8125rem;
  color: var(--metin-cok-soluk);
}
.kunye-ad { color: var(--metin-soluk); font-weight: 500; }
.kunye-satir { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.kunye-ayrac { color: var(--cizgi-koyu); }
/* Telefon dokunulacak bir şeydir: dokunma alanı 44 px olsun diye dikey boşluk verilir (denetim · Madde 10d) */
.kunye-tel {
  color: var(--metin-soluk);
  font-weight: 500;
  /* Çizgi yazının dibinde dursun: kenarlık kullanılsaydı dokunma boşluğunun altına düşer,
     yazıdan kopuk ayrı bir çizgi gibi görünürdü. */
  text-decoration: underline;
  text-decoration-color: var(--cizgi-koyu);
  text-underline-offset: 3px;
  padding-block: 12px;                 /* dokunma alanı ≥ 44 px (denetim · Madde 10d) */
  transition: color 300ms var(--gecis), text-decoration-color 300ms var(--gecis);
}
.kunye-tel:hover { color: var(--metin); text-decoration-color: var(--bronz); }

/* Alt satır: solda telif, sağda yasal bağlantılar. */
.alt-dip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--cizgi);
}
.alt-soluk { color: var(--metin-cok-soluk); font-size: 0.8125rem; }
.alt-yasal { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 0.8125rem; }
.alt-yasal a {
  color: var(--metin-soluk);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 300ms var(--gecis), border-color 300ms var(--gecis);
}
.alt-yasal a:hover { color: var(--metin); border-color: var(--bronz); }

/* ---------- Orta ekran ---------- */
/* Telefonun kenardan taşması yalnızca yanlarda boşluk varken güzel durur; daha dar ekranda
   sayfa dışına çıkar ve dokunmatik cihazda yana kaymaya yol açar. O yüzden burada kapanır. */
@media (max-width: 1240px) {
  .gorsel { margin-inline-end: 0; }

  /* Üst çubuk üç sütundur: marka · menü · eylem. Denetim (Madde 7) eylem düğmesinin metnini
     uzattı ve bu genişliğin altında beş sözcüklük menüyle birlikte sığmayıp düğme sayfayı
     taşırıyordu (ölçüldü: 1000 px'te +13, 1150 px'te +39 piksel).
     YALNIZCA ÜST ÇUBUKTA "30 Gün" öneki gizlenir; vaat aynı kalır ve sayfaların içindeki
     bütün düğmelerde metin tam hâliyle yazılı durur. */
  .ust .dugme-onek { display: none; }
}

/* ---------- Tablet: menü ile düğme yan yana sığmaz; "Giriş Yap" saklanır (alt bölümde de vardır) ---------- */
@media (max-width: 1120px) {
  .ust-giris { display: none; }
  .menu a { padding: 8px 10px; }
  .ust .dugme { padding: 0 16px; letter-spacing: 0.08em; }
}

/* ---------- Dar ekran ---------- */
@media (max-width: 900px) {
  /* DOKUNMA ALANLARI (denetim · Madde 10d) — parmak ucu ~44 px'dir.
     Ölçümde ikincil çağrılar 29 px, alt bölüm bağlantıları 26 px, "İçeriğe atla" 26 px çıkmıştı.
     Yazı boyutu büyütülmeden, yalnızca dikey boşlukla 44 piksele çıkarılır: görünüm değişmez,
     hedef büyür. Satır aralarının açılmaması için boşluk simetrik verilir. */
  .baglanti { padding-block: 13px; }
  .alt-baglantilar a,
  .alt-yasal a,
  .iletisim-posta a { display: inline-block; padding-block: 11px; }
  .alt-grup .alt-baglantilar { gap: 0; }
  .alt-yasal { gap: 0 24px; }
  .atla { padding: 14px 18px; }     /* görünür olduğu an 44 pikseli aşsın */
  /* Logo da bir bağlantıdır: üst çubukta 22 pikselden 44 piksele çıkar, görünümü değişmez. */
  .marka { padding-block: 11px; }

  .kahraman { grid-template-columns: 1fr; gap: 48px; }
  .kahraman h1 { max-width: none; }
  /* Satırlar tek sütuna iner */
  .deger { grid-template-columns: 1fr; gap: 16px; padding: 32px 0; }
  .hizmetler { grid-template-columns: 1fr; }
  .plan { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 28px 0 28px 20px; }
  .plan .dugme { width: 100%; }

  /* MENÜ: dar ekranda açılır kutu (denetim · Madde 6).
     Önceki çözüm yana kayan bir şeritti; denetim iki kusur buldu: sözcükler kelime ortasından
     kesiliyor ve Fiyatlandırma ile İletişim ilk bakışta hiç görünmüyordu. Artık üst çubuk tek
     satır (marka · menü düğmesi · eylem) ve beş sayfa tek dokunuşla açılan bir listede.

     BETİK YOKSA NE OLUR? HTML'de <details open> yazdığı için liste açık gelir; çubuğun altında
     normal bir liste olarak durur. Uzun görünür ama hiçbir sayfa erişilmez kalmaz. Betik varsa
     (html.js) liste kapanır ve açılır kutuya döner. */
  .ust-ic {
    position: relative;                       /* açılır kutu buna göre konumlanır */
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
    min-height: 60px;
  }
  .menu-kapsul { justify-self: end; }

  /* Menü düğmesi: üç çizgi + "Menü". Dokunma alanı 44 px (denetim · Madde 10d). */
  .menu-dugme {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 10px;
    color: var(--metin-soluk);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    border-radius: var(--kose-kucuk);
  }
  .menu-dugme:hover { color: var(--metin); }
  .menu-cizgiler { position: relative; display: block; width: 18px; height: 1px; background: currentColor; }
  .menu-cizgiler::before,
  .menu-cizgiler::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 1px;
    background: currentColor;
    transition: transform 200ms var(--gecis), top 200ms var(--gecis);
  }
  .menu-cizgiler::before { top: -6px; }
  .menu-cizgiler::after { top: 6px; }
  /* Açıkken üç çizgi çarpıya döner: "aynı düğme kapatır" demenin sessiz yolu. */
  .menu-kapsul[open] .menu-cizgiler { background: transparent; }
  .menu-kapsul[open] .menu-cizgiler::before { top: 0; transform: rotate(45deg); }
  .menu-kapsul[open] .menu-cizgiler::after { top: 0; transform: rotate(-45deg); }

  /* Liste: alt alta, her satır 44 px, aralarında ince çizgi. */
  .menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-size: 0.95rem;
  }
  .menu a {
    padding: 14px 16px;
    border-bottom: 1px solid var(--cizgi);
  }
  .menu a:last-child { border-bottom: 0; }
  .menu a[aria-current="page"] { box-shadow: inset 2px 0 0 0 var(--bronz); }

  /* Betik varsa: çubuğun altına inen, sayfa genişliğinde bir kart. */
  .js .menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    background: var(--kasmir-0);
    border: 1px solid var(--cizgi);
    border-radius: var(--kose);
    box-shadow: 0 16px 34px rgba(28, 28, 26, 0.14);
  }
  /* Telefon tek sütunda ortalanır, taşma biter. Kart da sütunun içinde kalır. */
  .gorsel { justify-self: center; margin-inline-end: 0; }
  .kumanda-kart { left: 0; }
  .telefon { margin-inline: auto; }
  .sifre { grid-template-columns: 1fr; gap: 20px; padding: 32px 24px; text-align: center; }
  .sifre-yazi p { margin-inline: auto; }
  /* Pano tek sütun: özet üstte, çubuklar altta. */
  .pano { grid-template-columns: 1fr; }
  .pano-ozet { border-right: 0; border-bottom: 1px solid var(--cizgi); }
  .olcum { grid-template-columns: minmax(120px, 0.55fr) 1fr auto; }
  .iletisim { grid-template-columns: 1fr; padding: 28px 22px; gap: 28px; }
  .iletisim-yazi p { max-width: none; }
}

/* ---------- Dar üst çubuk: üç şey yan yana sığmıyor ---------- */
/* Üst çubukta marka, menü düğmesi ve eylem düğmesi yan yana durur. Denetim (Madde 7) eylem
   düğmesinin metnini "30 Gün Ücretsiz Dene" yaptı; bu genişliğin altında üçü birden sığmıyor ve
   marka ile menü üst üste biniyordu. İki şey kısılır, ikisi de anlamı bozmaz.
   Sınır ölçülerek bulundu: 620 px'in üstünde her ikisi de tam hâliyle sığıyor. */
@media (max-width: 620px) {
  /* 1. Menü düğmesinin yazısı ekrandan çekilir, üç çizgi kalır. Yazı SİLİNMEZ, yalnızca görünmez
     olur: ekran okuyucu düğmeyi yine "Menü" diye okur, klavyeyle de bulunur. */
  .menu-dugme-yazi { position: absolute; left: -9999px; }
  .menu-dugme { padding: 0 8px; }

  /* 2. Eylem düğmesinde yalnızca "30 Gün" öneki gizlenir; vaat aynı kalır: "Ücretsiz Dene".
     Metnin tamamı bu genişliğin üstünde ve sayfanın bütün diğer düğmelerinde yazılı durur. */
  .dugme-onek { display: none; }
}

@media (max-width: 420px) {
  .kolon { padding-inline: 20px; }
  .dugme--dev { width: 100%; }
  /* Üst çubuk 320 px'de bile tek satır: marka küçülür, düğme sıkışır, metin aynı kalır */
  .ust-ic { gap: 12px; }
  .marka { font-size: 0.85rem; letter-spacing: 0.04em; gap: 10px; }
  /* Yazı 13 pikselin altına inmez (denetim · Madde 10c); sığmayı harf aralığı ve iç boşluk sağlar. */
  .ust .dugme { white-space: nowrap; padding: 0 8px; min-height: 44px; font-size: 0.8125rem; letter-spacing: 0.02em; }

  /* TELEFON MAKETİNİN İÇİ 13 piksel kuralının dışındadır.
     Buradaki yazılar sayfanın metni değil, küçültülmüş bir ÜRÜN EKRANININ resmidir — bir ekran
     görüntüsünün içindeki yazı gibi. 320 pikselde 13 punto zorlanınca maket sayfayı taşırıyordu.
     Sayfanın kendi metinleri (başlık, paragraf, etiket, dipnot) her genişlikte 13 piksel ve üstüdür. */
  .rozet, .mini-rozet, .mini-etiket, .olay-kim, .mini-oda { font-size: 0.72rem; }
  .rozet { white-space: normal; }
  .rozet { font-size: 0.8125rem; padding: 4px 7px; }
  /* Dar ekranda kart telefonun üstüne binmesin: altına, akışın devamı gibi yerleşir. */
  .kumanda-kart { position: static; width: 100%; margin-top: 14px; }
  /* Çubuk yanındaki açıklama telefonda yer kaplamasın; ad ve sayı yeter. */
  .olcum { grid-template-columns: 96px 1fr auto; gap: 12px; }
  .olcum-ad small { display: none; }
  .pano-alt { flex-direction: column; align-items: stretch; text-align: center; }
  /* Telefonda alanlar alt alta, düğme tam genişlik. */
  .form { grid-template-columns: 1fr; }
  .form-alt { flex-direction: column; align-items: stretch; text-align: center; }
  .form-not { max-width: none; }
}

/* ---------- Yazdırma: hiçbir bölüm boş basılmaz ---------- */
/* Kaydırdıkça beliren bölümler kâğıda basılırken "kaydırma" diye bir şey yoktur; betiğin gizlediği
   her şey burada geri açılır. Aynı kural sayfa okuyucu kiplerinde ve tam sayfa ekran görüntüsünde
   de işe yarar (denetim · Madde 11). Betik ayrıca yazdırmadan önce gizlemeyi kendisi de kaldırır;
   bu kural onun yedeğidir — ikisinden biri yetmezse diğeri tutar. */
@media print {
  .js-hikaye .hikaye-adim,
  .js-operasyon .operasyon-blok {
    opacity: 1 !important;
    transform: none !important;
  }
  .js-pano .olcum-dolgu { width: calc(var(--deger) * 1%) !important; }
  .js-pano .halka-dolgu { stroke-dashoffset: 0 !important; }
  /* Kâğıtta işe yaramayan parçalar basılmaz. */
  .ust, .atla, .kapilar, .bolum-cta { display: none !important; }
}

/* ---------- Hareket istemeyenler ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Gerçek ekran görüntüleri (denetim · Madde 1) ---------- */
/* Kodla çizilen telefon maketleri duruyor; bu görseller onların YERİNE değil, YANINDA.
   Görseller gelene kadar aynı oranda birer yer tutucu durur. Sebebi önemli: oran baştan
   verilmezse görsel indiğinde sayfa aşağı doğru ZIPLAR (düzen kayması). Yer tutucu bunu önler. */
.ekran-galeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 28px 24px;
  margin-top: 48px;
}
.ekran-kart { margin: 0; min-width: 0; }
.ekran-kart picture { display: block; }
/* Görselin yüksekliği HTML'deki width/height'tan hesaplanır (780 × 1688): dosya inmeden önce
   de yeri ayrılmış olur, indiğinde sayfa ZIPLAMAZ. Bu yüzden height: auto şarttır ve
   etiketlerdeki ölçüler silinmemelidir. */
.ekran-kart img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  background: var(--kasmir-100);
}
.ekran-kart figcaption {
  margin-top: 14px;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--metin-soluk);
}

/* ---------- Yasal metin sayfaları ---------- */
/* "Çok yakında" iskeleti ortalanmış tek cümledir (.yasal). Gerçek metin okunacak bir şeydir:
   sola yaslanır ve satır uzunluğu sınırlanır. Aynı sayfada iki düzen, tek sınıf farkıyla. */
.yasal--metin {
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  min-height: 0;
  gap: 0;
  padding-block: clamp(72px, 10vw, 128px);
}
.yasal--metin h1 { font-size: clamp(2rem, 4vw, 3rem); }
.yasal-govde { max-width: 68ch; }
.yasal-tarih {
  margin-top: 12px;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--metin-cok-soluk);
}
.yasal-govde h2 { font-size: 1.375rem; margin-top: 48px; }
.yasal-govde p { margin-top: 14px; line-height: 1.75; color: var(--metin-soluk); }
.yasal-govde a { color: var(--bronz); }
.yasal-govde ul { margin-top: 14px; padding: 0; list-style: none; }
/* DİKKAT: buraya flex ya da grid yazılmaz — satırın içindeki kalın yazı ve bağlantı ayrı kutulara
   bölünür, cümle parçalanır. İşaret mutlak konumlu bir ::before ile çizilir. */
.yasal-govde li {
  position: relative;
  margin-top: 10px;
  padding-inline-start: 22px;
  line-height: 1.75;
  color: var(--metin-soluk);
}
.yasal-govde li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.85em;
  width: 8px;
  height: 1px;
  background: var(--bronz);
}

/* Ana sayfada yalnızca iki kart var: genişliği serbest bırakılırsa telefon görüntüsü devleşir.
   Kartlar sola yaslanır ve en fazla 260 px olur; dar ekranda yine iki sütun kalır. */
.ekran-galeri--ikili {
  grid-template-columns: repeat(auto-fit, minmax(150px, 260px));
  justify-content: start;
}