/* ═══════════════════════════════════════════════════════════════
   fauna corporate · tasarım sistemi
   Kaynak: docs/02-fauna-corp-tasarim-briefi.md
   Buradaki hiçbir değer serbest seçim değildir; her biri brief'te yazılıdır.
   Yeni bir renk, yarıçap ya da boyut eklenmesi gerekiyorsa önce brief değişir.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · Jetonlar (brief 2) ──────────────────────────────────── */

:root {
  /* Marka renkleri logodan örneklendi. Bu iki değer değiştirilemez. */
  --fauna-mavi:         #223DFE;   /* etkileşim: düğme, bağlantı, odak, seçili */
  --kurumsal-lacivert:  #0E47A1;   /* bilgi: veri çubuğu, sayı, diyagram */

  --derin-lacivert:     #06225B;
  --lacivert-700:       #093471;
  --mavi-300:           #8E9CFF;   /* metin olarak kullanılmaz */
  --mavi-50:            #EEF0FF;
  --buz:                #C6D3F5;   /* koyu zeminde gövde metni */

  --kirmizi:            #E73A3B;   /* yalnızca büyük metin üzerinde */
  --kirmizi-koyu:       #D22B2C;   /* tek vurgu düğmesi dolgusu */

  --siyah:              #0A0A0A;
  --gri-700:            #3A3D42;
  --gri-500:            #6B6F76;
  --gri-300:            #C9CCD1;   /* metin için kullanılmaz */
  --gri-100:            #F2F3F5;
  --kagit:              #FAF9F7;
  --beyaz:              #FFFFFF;

  /* Veri görselleştirme rampası: tek hue, kurumsal lacivert ailesi.
     Doğrulandı: monotone lightness, adjacent ΔL, açık uç kontrastı 2,34:1. */
  --veri-1: #8CA8DC;
  --veri-2: #5F84C6;
  --veri-3: #3A63B4;
  --veri-4: #0E47A1;
  --veri-5: #093471;

  /* Yarıçap iki değerle sınırlıdır (brief 1). */
  --r1: 4px;   /* giriş alanı, rozet */
  --r2: 8px;   /* kart, düğme */

  /* Boşluk ölçeği, 8 piksel tabanlı (brief 4). */
  --b1: 4px;  --b2: 8px;  --b3: 12px; --b4: 16px; --b5: 24px;
  --b6: 32px; --b7: 48px; --b8: 64px; --b9: 96px; --b10: 128px;

  --konteyner: 1200px;
  --metin-blogu: 720px;   /* satır uzunluğu 65-75 karakter */

  --gecis: 150ms ease-out;
}

/* ── 2 · Temel ───────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--beyaz);
  color: var(--gri-700);
  font: 400 17px/1.65 'Merriweather Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Türkçe metinde tireleme kapalıdır; kelime kırma dilbilgisi hatası yapar. */
  hyphens: none;
}

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

a { color: var(--fauna-mavi); text-decoration: none; transition: color var(--gecis); }
a:hover { color: var(--kurumsal-lacivert); text-decoration: underline; }

/* Odak halkası zorunludur. outline:none hiçbir yerde kullanılmaz. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--fauna-mavi);
  outline-offset: 2px;
  border-radius: var(--r1);
}

/* ── 3 · Tipografi (brief 3) ─────────────────────────────────── */

h1, h2, h3 {
  font-family: Merriweather, Georgia, serif;
  font-weight: 700;
  color: var(--siyah);
  margin: 0;
}
h4, h5 { font-family: 'Merriweather Sans', system-ui, sans-serif; font-weight: 600; color: var(--siyah); margin: 0; }

h1 { font-size: 56px; line-height: 1.15; letter-spacing: -0.02em; }
h2 { font-size: 38px; line-height: 1.20; letter-spacing: -0.015em; }
h3 { font-size: 24px; line-height: 1.30; letter-spacing: -0.01em; }
h4 { font-size: 19px; line-height: 1.35; }

p { margin: 0 0 var(--b5); }
p:last-child { margin-bottom: 0; }

.giris-metni { font-size: 20px; line-height: 1.6; color: var(--gri-700); }
.kucuk       { font-size: 15px; line-height: 1.55; }
.etiket      { font-size: 13px; line-height: 1.4; letter-spacing: 0.02em; font-weight: 600;
               text-transform: uppercase; color: var(--gri-500); }
.alt-not     { font-size: 13px; line-height: 1.5; color: var(--gri-500); }

/* Sayısal vurgu sans kullanır: serif rakam büyük boyutta süsleme gibi okunur. */
.kahraman-sayi { font: 600 64px/1 'Merriweather Sans', system-ui, sans-serif;
                 letter-spacing: -0.03em; color: var(--kurumsal-lacivert); }
.istatistik    { font: 600 40px/1.1 'Merriweather Sans', system-ui, sans-serif;
                 letter-spacing: -0.02em; color: var(--kurumsal-lacivert); }

/* İtalik kullanılmaz: Merriweather'ın italik kesimi ekranda zayıf durur. */
em, i { font-style: normal; font-weight: 600; }

.dar { max-width: var(--metin-blogu); }

/* ── 4 · Yerleşim (brief 4) ──────────────────────────────────── */

.konteyner { max-width: var(--konteyner); margin: 0 auto; padding: 0 48px; }

.bolum        { padding: var(--b9) 0; }
.bolum-kagit  { background: var(--kagit); border-top: 1px solid var(--gri-300);
                border-bottom: 1px solid var(--gri-300); }
.bolum-koyu   { background: var(--derin-lacivert); padding: var(--b10) 0; color: var(--buz); }
.bolum-koyu h1, .bolum-koyu h2, .bolum-koyu h3, .bolum-koyu h4 { color: var(--beyaz); }
.bolum-koyu a { color: var(--buz); }
.bolum-koyu a:hover { color: var(--beyaz); }

.izgara     { display: grid; gap: var(--b5); }
.izgara-2   { grid-template-columns: repeat(2, 1fr); }
.izgara-3   { grid-template-columns: repeat(3, 1fr); }
.izgara-4   { grid-template-columns: repeat(4, 1fr); }
.izgara-genis { gap: var(--b7); }

.yigin > * + * { margin-top: var(--b5); }
.yigin-dar > * + * { margin-top: var(--b4); }

/* ── 5 · Erişilebilirlik ─────────────────────────────────────── */

.icerige-atla {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--beyaz); color: var(--fauna-mavi);
  padding: var(--b3) var(--b5); border: 2px solid var(--fauna-mavi);
  border-radius: var(--r2); font-weight: 600; font-size: 15px;
}
.icerige-atla:focus { left: 16px; top: 16px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 6 · Üst menü (brief 5.1) ────────────────────────────────── */

.ustmenu {
  position: sticky; top: 0; z-index: 50;
  background: var(--beyaz);              /* saydamlık kullanılmaz */
  border-bottom: 1px solid var(--gri-300);
}
.ustmenu-ic {
  max-width: var(--konteyner); margin: 0 auto; padding: 0 48px;
  height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--b6);
}
.ustmenu-logo img { height: 32px; width: auto; }
.ustmenu-gezinti { display: flex; align-items: center; gap: 22px; }
.ustmenu-gezinti a {
  color: var(--siyah); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.ustmenu-gezinti a:hover { color: var(--fauna-mavi); text-decoration: none; }
.ustmenu-gezinti a[aria-current="page"] { color: var(--fauna-mavi); }

/* Hizmetler açılır paneli */
.acilir { position: relative; }
.acilir-dugme {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 600 14px/1 'Merriweather Sans', system-ui, sans-serif; color: var(--siyah);
}
.acilir-dugme:hover { color: var(--fauna-mavi); }
.acilir-ok { width: 10px; height: 10px; flex-shrink: 0; }
.acilir-panel {
  position: absolute; top: calc(100% + 16px); left: -24px; z-index: 60;
  width: 460px; background: var(--beyaz);
  border: 1px solid var(--gri-300); border-radius: var(--r2);
  padding: var(--b2); display: none;
}
.acilir[data-acik="true"] .acilir-panel { display: block; }
.acilir-panel a {
  display: block; padding: var(--b3) var(--b4); border-radius: var(--r1);
  color: var(--siyah); font-size: 15px; font-weight: 600;
}
.acilir-panel a:hover { background: var(--mavi-50); color: var(--fauna-mavi); text-decoration: none; }
.acilir-panel span { display: block; font-size: 14px; font-weight: 400; color: var(--gri-500); margin-top: 2px; }

.menu-dugmesi { display: none; }

/* Çağrı düğmesi iki kez yazılır: biri menünün içinde (mobilde listenin altında
   tam genişlikte durur), biri menünün dışında. Masaüstünde menü içindeki kopya
   gizlenir, mobilde dışarıdaki. */
.ustmenu-gezinti .dugme { display: none; }

/* ── 7 · Düğmeler (brief 5.2) ────────────────────────────────── */

.dugme {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 var(--b5); border-radius: var(--r2);
  font: 600 16px/1 'Merriweather Sans', system-ui, sans-serif;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  text-decoration: none; transition: background-color var(--gecis), color var(--gecis), border-color var(--gecis);
}
.dugme:hover { text-decoration: none; }
.dugme:disabled { opacity: .45; cursor: not-allowed; }

.dugme-birincil { background: var(--fauna-mavi); color: var(--beyaz); }
.dugme-birincil:hover { background: #1A31D6; color: var(--beyaz); }

/* Vurgu düğmesi sitede yalnızca olgunluk değerlendirmesi çağrısıdır. */
.dugme-vurgu { background: var(--kirmizi-koyu); color: var(--beyaz); }
.dugme-vurgu:hover { background: #B92425; color: var(--beyaz); }

.dugme-ikincil { background: transparent; color: var(--kurumsal-lacivert);
                 border-color: var(--kurumsal-lacivert); }
.dugme-ikincil:hover { border-color: var(--fauna-mavi); color: var(--fauna-mavi); }

.bolum-koyu .dugme-ikincil { color: var(--buz); border-color: var(--mavi-300); }
.bolum-koyu .dugme-ikincil:hover { color: var(--beyaz); border-color: var(--beyaz); }

.dugme-metin { color: var(--fauna-mavi); font-weight: 600; font-size: 16px; }
.dugme-metin:hover { text-decoration: underline; }

.dugme-kucuk { height: 44px; padding: 0 22px; font-size: 15px; }

.dugmeler { display: flex; flex-wrap: wrap; gap: var(--b4); align-items: center; }

/* ── 8 · Kanıt şeridi (brief 5.3) ────────────────────────────── */
/* Bu şeritte kırmızı kullanılmaz, sayılar zaten dikkat çeker. */

.kanit { display: grid; grid-template-columns: repeat(4, 1fr); }
.kanit > div { padding: 0 var(--b5); border-left: 1px solid var(--gri-300); }
.kanit > div:first-child { border-left: 0; padding-left: 0; }
.kanit dt { font: 600 40px/1.1 'Merriweather Sans', system-ui, sans-serif;
            letter-spacing: -0.02em; color: var(--kurumsal-lacivert); }
.kanit dd { margin: var(--b2) 0 0; font-size: 13px; font-weight: 600;
            letter-spacing: 0.02em; color: var(--gri-500); }

/* ── 9 · Kart (brief 5.4) ────────────────────────────────────── */
/* Gölge kullanılmaz: gölge oyuncak hissi verir, kenar çizgisi belge hissi. */

.kart {
  background: var(--beyaz); border: 1px solid var(--gri-300);
  border-radius: var(--r2); padding: var(--b6);
  display: flex; flex-direction: column; gap: var(--b4);
  transition: border-color var(--gecis);
}
.kart:hover { border-color: var(--fauna-mavi); }
.kart > :last-child { margin-top: auto; padding-top: var(--b2); }
.kart p { margin: 0; }

.bolum-kagit .kart { background: var(--beyaz); }
.bolum-koyu .kart { background: var(--lacivert-700); border-color: var(--lacivert-700); color: var(--buz); }
.bolum-koyu .kart:hover { border-color: var(--mavi-300); }

/* Numaralı liste kartı: problem bölümü ve engeller */
.kart-numara { font: 600 13px/1 'Merriweather Sans', system-ui, sans-serif;
               letter-spacing: 0.02em; color: var(--gri-500); }

/* Modül listesi: madde işareti yerine 1 piksellik ayraç */
.ayrik { list-style: none; margin: 0; padding: 0; }
.ayrik li { padding: var(--b3) 0; border-top: 1px solid var(--gri-300); font-size: 15px; }
.ayrik li:first-child { border-top: 0; padding-top: 0; }

/* ── 10 · Faz zaman çizelgesi (brief 5.5) ────────────────────── */
/* Aktif olmayan durumda hepsi eşit ağırlıkta, hiçbiri vurgulanmaz. */

.faz { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--b5); }
.faz > div { padding-top: var(--b4); border-top: 2px solid var(--gri-300); }
.faz .etiket { margin-bottom: var(--b2); }
.faz h4 { margin-bottom: var(--b3); }
.faz p { font-size: 15px; margin-bottom: var(--b3); }
.faz-cikis { background: var(--gri-100); border-radius: var(--r1);
             padding: var(--b3); font-size: 14px; line-height: 1.55; color: var(--gri-700); }

/* ── 11 · Tablo (brief 5.6) ──────────────────────────────────── */
/* Kurumsal alıcı tabloyu grafikten çok okur. Zebra dolgusu kullanılmaz. */

.tablo-sarmal { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
thead th {
  background: var(--gri-100); font-weight: 600; text-align: left;
  padding: var(--b3) var(--b4); border-bottom: 1px solid var(--gri-300);
  color: var(--siyah); white-space: nowrap;
}
tbody td { padding: var(--b3) var(--b4); border-bottom: 1px solid var(--gri-300); vertical-align: top; }
td.sayi, th.sayi { text-align: right; font-variant-numeric: tabular-nums; }

/* ── 12 · Akordeon (brief 5.7) ───────────────────────────────── */

.akordeon { border-top: 1px solid var(--gri-300); }
.akordeon > div { border-bottom: 1px solid var(--gri-300); }
.akordeon-dugme {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--b5); background: none; border: 0; padding: 20px 0; cursor: pointer;
  text-align: left; font-family: 'Merriweather Sans', system-ui, sans-serif;
}
.akordeon-dugme span:first-child { font-size: 18px; font-weight: 600; color: var(--siyah); line-height: 1.4; }
.akordeon-isaret { font-size: 20px; color: var(--gri-500); flex-shrink: 0; width: 20px; text-align: center; }
.akordeon-govde p { padding: 0 48px 24px 0; margin: 0; }

/* ── 13 · Koyu çağrı bloğu (brief 5.8) ───────────────────────── */
/* Blok içinde en fazla bir düğme ve bir metin bağlantısı. */

.cagri-liste { list-style: none; margin: 0; padding: 0; }
.cagri-liste li { padding: var(--b3) 0; border-top: 1px solid rgba(198,211,245,.25); }
.cagri-liste li:first-child { border-top: 0; }
.bolum-koyu .dugme-metin { color: var(--buz); }
.bolum-koyu .dugme-metin:hover { color: var(--beyaz); }

/* ── 14 · Uyarı kutusu ───────────────────────────────────────── */
/* Renk tek başına anlam taşımaz; kutunun başlığı da durumu yazar. */

.uyari {
  border: 1px solid var(--gri-300); border-left: 4px solid var(--kurumsal-lacivert);
  border-radius: var(--r1); padding: var(--b5); background: var(--gri-100);
  font-size: 15px; line-height: 1.6;
}
.uyari strong { display: block; color: var(--siyah); margin-bottom: var(--b2); }

/* ── 15 · Form (brief 6.6) ───────────────────────────────────── */

.alan { display: block; margin-bottom: var(--b5); }
.alan > span { display: block; font-size: 15px; font-weight: 600; color: var(--siyah); margin-bottom: var(--b2); }
.alan input, .alan select, .alan textarea {
  width: 100%; padding: 12px 14px; font: 400 16px/1.5 'Merriweather Sans', system-ui, sans-serif;
  color: var(--siyah); background: var(--beyaz);
  border: 1px solid var(--gri-300); border-radius: var(--r1);
  transition: border-color var(--gecis);
}
.alan input:hover, .alan select:hover, .alan textarea:hover { border-color: var(--gri-500); }
.alan textarea { min-height: 140px; resize: vertical; }

/* Hata metinle bildirilir; yalnızca kırmızı kenar yeterli değildir. */
.alan-hata { display: block; margin-top: var(--b2); font-size: 14px; color: var(--kirmizi-koyu); }
.alan-hata:empty { display: none; }
.alan input[aria-invalid="true"], .alan textarea[aria-invalid="true"],
.alan select[aria-invalid="true"] { border-color: var(--kirmizi-koyu); }

.onay { display: flex; gap: var(--b3); align-items: flex-start;
        font-size: 15px; line-height: 1.55; margin-bottom: var(--b4); cursor: pointer; }
.onay input { width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--fauna-mavi); }

.form-durum { margin-top: var(--b4); font-size: 15px; line-height: 1.55; }
.form-durum:empty { display: none; }
.form-durum[data-tip="hata"]  { color: var(--kirmizi-koyu); }
.form-durum[data-tip="basari"] { color: var(--kurumsal-lacivert); }

/* ── 16 · Alt bilgi (brief 5.9) ──────────────────────────────── */

.altbilgi { background: var(--derin-lacivert); color: var(--buz); padding: var(--b8) 0 var(--b6); }
.altbilgi h2 { font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase;
               font-family: 'Merriweather Sans', system-ui, sans-serif; font-weight: 600;
               color: var(--mavi-300); margin-bottom: var(--b4); }
.altbilgi ul { list-style: none; margin: 0; padding: 0; }
.altbilgi li { margin-bottom: var(--b3); font-size: 15px; }
.altbilgi a { color: var(--buz); }
.altbilgi a:hover { color: var(--beyaz); }
.altbilgi-logo img { height: 30px; width: auto; margin-bottom: var(--b4); }
.altbilgi-markalar { border-top: 1px solid rgba(198,211,245,.25); margin-top: var(--b7);
                     padding-top: var(--b5); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--b5); }
.altbilgi-markalar span { display: block; font-size: 14px; color: var(--mavi-300); margin-top: 2px; }
.altbilgi-yasal { border-top: 1px solid rgba(198,211,245,.25); margin-top: var(--b5);
                  padding-top: var(--b5); display: flex; flex-wrap: wrap; gap: var(--b5);
                  justify-content: space-between; font-size: 14px; }

/* ── 17 · Sayfa başlığı (iç sayfalar) ────────────────────────── */

.sayfa-basi { padding: 80px 0 var(--b8); }
.sayfa-basi h1 { max-width: 900px; }
.sayfa-basi .giris-metni { margin-top: var(--b5); max-width: var(--metin-blogu); }
.sayfa-basi .dugmeler { margin-top: var(--b6); }

.kirinti { font-size: 14px; color: var(--gri-500); margin-bottom: var(--b5); }
.kirinti a { color: var(--gri-500); }
.kirinti a:hover { color: var(--fauna-mavi); }

/* ── 18 · Hareket (brief 7) ──────────────────────────────────── */
/* Paralaks yoktur. Sayı sayaç animasyonu yoktur. */

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

/* ── 19 · Kırılımlar (brief 4) ───────────────────────────────── */

@media (max-width: 1023px) {
  .konteyner, .ustmenu-ic { padding-left: 32px; padding-right: 32px; }

  h1 { font-size: 42px; }
  h2 { font-size: 32px; }

  .bolum { padding: 72px 0; }
  .bolum-koyu { padding: 88px 0; }

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

  /* Faz çizelgesi mobilde dikey: solda 2 piksel çizgi, her adımda nokta. */
  .faz { grid-template-columns: 1fr; gap: 0; }
  .faz > div { border-top: 0; border-left: 2px solid var(--gri-300);
               padding: 0 0 var(--b6) var(--b5); position: relative; }
  .faz > div::before {
    content: ''; position: absolute; left: -7px; top: 4px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--kurumsal-lacivert);
  }
  .faz > div:last-child { padding-bottom: 0; border-left-color: transparent; }

  .altbilgi-markalar { grid-template-columns: 1fr; }

  /* Mobilde tam ekran menü (brief 5.1). */
  .ustmenu-gezinti {
    display: none; position: fixed; inset: 72px 0 0 0; z-index: 55;
    background: var(--beyaz); flex-direction: column; align-items: stretch;
    gap: 0; padding: var(--b5) 32px var(--b8); overflow-y: auto;
  }
  .ustmenu[data-menu="acik"] .ustmenu-gezinti { display: flex; }
  /* Çağrı düğmesi bir liste öğesi değil, düğmedir: liste satırı biçimini almaz. */
  .ustmenu-gezinti > a:not(.dugme), .ustmenu-gezinti .acilir-dugme {
    font-size: 18px; padding: var(--b4) 0; border-bottom: 1px solid var(--gri-300);
    width: 100%; justify-content: space-between;
  }
  .acilir { width: 100%; }
  .acilir-panel { position: static; width: auto; border: 0; padding: 0 0 var(--b4);
                  border-bottom: 1px solid var(--gri-300); }
  /* Çağrı düğmesi listenin altında tam genişlikte. */
  .ustmenu-gezinti .dugme {
    display: inline-flex; justify-content: center;
    margin-top: var(--b5); width: 100%; height: 52px;
  }
  .ustmenu-ic > .dugme { display: none; }

  .menu-dugmesi {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; background: none; border: 1px solid var(--gri-300);
    border-radius: var(--r1); cursor: pointer; color: var(--siyah);
  }
  .ustmenu-logo img { height: 26px; }
}

@media (max-width: 639px) {
  .konteyner, .ustmenu-ic { padding-left: 20px; padding-right: 20px; }
  .ustmenu-gezinti { padding-left: 20px; padding-right: 20px; }

  h1 { font-size: 34px; }
  h2 { font-size: 27px; }
  h3 { font-size: 20px; }
  h4 { font-size: 18px; }
  body { font-size: 16px; }
  .giris-metni { font-size: 18px; }
  .kucuk { font-size: 14px; }

  .bolum { padding: var(--b8) 0; }
  .bolum-koyu { padding: 80px 0; }

  .kahraman-sayi { font-size: 44px; }
  .istatistik, .kanit dt { font-size: 32px; }

  .izgara-2, .izgara-3, .izgara-4 { grid-template-columns: 1fr; }

  /* Kanıt şeridi mobilde iki sütuna düşer (brief 5.3). */
  .kanit { grid-template-columns: repeat(2, 1fr); gap: var(--b5) 0; }
  .kanit > div:nth-child(odd) { border-left: 0; padding-left: 0; }

  .kart { padding: var(--b5); }
  .akordeon-govde p { padding-right: 0; }

  /* Dar ekranda düğme metni tek satıra sığmaz. Sabit yükseklik ve nowrap
     yerine metin sarar, düğme büyür. */
  .dugmeler .dugme {
    width: 100%;
    white-space: normal;
    text-align: center;
    height: auto;
    min-height: 52px;
    padding: 14px 20px;
    line-height: 1.35;
  }
}

/* Sayfa gövdesi hiçbir genişlikte yatay kaymaz. */
html, body { overflow-x: clip; }