/**
 * Kontak Yönetim Paneli
 *
 * ⚠️ HARİCİ KAYNAK YOK. CSP script-src/style-src 'self' — CDN'den font,
 * ikon veya kütüphane çekilemiyor. İkonlar satır içi SVG, grafikler
 * elle çizilen SVG, yazı tipi sistem yığını.
 *
 * ⚠️ RENKLER TEK YERDE. Aşağıdaki değişkenler dışında ham renk yazma;
 * koyu/açık tema ikisini birden kaplasın diye.
 */

:root {
  /* Marka — lacivert zemin, mobil uygulamayla aynı (#0000A8 ailesi) */
  --marka:        #0000a8;
  --marka-acik:   #3b4de8;
  --marka-koyu:   #000078;

  /* Kenar çubuğu — Electroop referansındaki koyu lacivert */
  --yan:          #111c33;
  --yan-koyu:     #0b1526;
  --yan-metin:    #93a3c0;
  --yan-aktif:    #ffffff;

  /* Zemin ve yüzeyler */
  --zemin:        #f4f5fb;
  --yuzey:        #ffffff;
  --yuzey-alt:    #fafbff;
  --cizgi:        #e4e8f2;
  --cizgi-koyu:   #ccd4e6;

  /* Metin */
  --metin:        #16203a;
  --metin-orta:   #5b6885;
  --metin-soluk:  #8b97b3;

  /* Durum renkleri */
  --yesil:        #16a34a;
  --yesil-zemin:  #dcfce7;
  --sari:         #d97706;
  --sari-zemin:   #fef3c7;
  --kirmizi:      #dc2626;
  --kirmizi-zemin:#fee2e2;
  --mavi:         #2563eb;
  --mavi-zemin:   #dbeafe;
  --mor:          #7c3aed;
  --mor-zemin:    #ede9fe;

  --golge:        0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --golge-buyuk:  0 8px 24px rgba(16, 24, 40, .10);

  --yaricap:      12px;
  --yaricap-kucuk: 8px;

  --yan-genislik: 248px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--metin);
  background: var(--zemin);
  -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════
   GİRİŞ EKRANI
   ══════════════════════════════════════════ */

.giris-sayfa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

/* Dar ekranda görsel yarı gizleniyor — form tam genişlik alıyor. */
@media (max-width: 900px) {
  .giris-sayfa { grid-template-columns: 1fr; }
  .giris-gorsel { display: none; }
}

.giris-form-alan {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: var(--yuzey);
}

.giris-kutu { width: 100%; max-width: 380px; }

.giris-kutu h1 {
  font-size: 30px;
  line-height: 1.2;
  margin: 0 0 8px;
  letter-spacing: -.5px;
}

.giris-kutu .alt {
  color: var(--metin-orta);
  margin: 0 0 32px;
}

.giris-gorsel {
  background: linear-gradient(140deg, var(--yan) 0%, var(--yan-koyu) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Dekoratif nokta ızgarası — referans tasarımdaki gibi. */
.giris-gorsel::before {
  content: '';
  position: absolute;
  top: 40px; right: 40px;
  width: 200px; height: 120px;
  background-image: radial-gradient(circle, rgba(255,255,255,.18) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
}

.giris-gorsel::after {
  content: '';
  position: absolute;
  bottom: -140px; left: -100px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
}

.marka-kutu {
  background: var(--yuzey);
  border-radius: var(--yaricap);
  padding: 40px 56px;
  position: relative;
  z-index: 1;
  box-shadow: var(--golge-buyuk);
}

.marka-yazi {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1.5px;
  color: var(--marka);
  margin: 0;
}

.marka-alt {
  color: var(--metin-orta);
  margin: 4px 0 0;
  font-size: 13px;
}

/* ══════════════════════════════════════════
   FORM ÖĞELERİ
   ══════════════════════════════════════════ */

.alan { margin-bottom: 18px; }

.alan label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--metin);
}

.alan .zorunlu { color: var(--kirmizi); }

input[type=text], input[type=email], input[type=password], input[type=search], select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--yaricap-kucuk);
  font-size: 14px;
  font-family: inherit;
  color: var(--metin);
  background: var(--yuzey);
  transition: border-color .15s, box-shadow .15s;
}

input:focus, select:focus {
  outline: none;
  border-color: var(--marka-acik);
  box-shadow: 0 0 0 3px rgba(59, 77, 232, .12);
}

input::placeholder { color: var(--metin-soluk); }

button {
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  border: none;
  border-radius: 999px;
  transition: background .15s, opacity .15s;
}

.dugme-birincil {
  width: 100%;
  padding: 13px;
  background: var(--marka);
  color: #fff;
  font-weight: 600;
}

.dugme-birincil:hover { background: var(--marka-koyu); }
.dugme-birincil:disabled { opacity: .55; cursor: not-allowed; }

.dugme-kucuk {
  padding: 7px 14px;
  border-radius: var(--yaricap-kucuk);
  background: var(--yuzey);
  border: 1px solid var(--cizgi-koyu);
  color: var(--metin);
  font-weight: 500;
}

.dugme-kucuk:hover { background: var(--yuzey-alt); }

.dugme-onay { background: var(--yesil); color: #fff; border-color: var(--yesil); }
.dugme-onay:hover { background: #15803d; }
.dugme-ret { background: var(--kirmizi); color: #fff; border-color: var(--kirmizi); }
.dugme-ret:hover { background: #b91c1c; }

.hata-kutu {
  background: var(--kirmizi-zemin);
  color: var(--kirmizi);
  padding: 11px 14px;
  border-radius: var(--yaricap-kucuk);
  font-size: 13px;
  margin-bottom: 16px;
}

/* ══════════════════════════════════════════
   YERLEŞİM
   ══════════════════════════════════════════ */

.kabuk {
  display: grid;
  grid-template-columns: var(--yan-genislik) 1fr;
  min-height: 100vh;
}

/* ── Kenar çubuğu ── */

.yan-menu {
  background: var(--yan);
  color: var(--yan-metin);
  padding: 0 0 32px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.yan-menu::-webkit-scrollbar { width: 6px; }
.yan-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; }

.yan-marka {
  padding: 22px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 14px;
}

.yan-marka .nokta {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5b8cff, #b64bff 45%, #ff5b7f);
  flex-shrink: 0;
}

.yan-marka .ad {
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.3px;
}

.menu-grup {
  padding: 14px 20px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #5f7095;
}

.menu-grup .aciklama {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 11px;
  color: #4c5d80;
  margin-top: 2px;
}

.menu-oge {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 14px;
  border-left: 3px solid transparent;
  transition: background .12s, color .12s;
  user-select: none;
}

.menu-oge:hover { background: rgba(255,255,255,.05); color: #cdd7e8; }

.menu-oge.aktif {
  background: rgba(255,255,255,.09);
  color: var(--yan-aktif);
  border-left-color: var(--marka-acik);
  font-weight: 600;
}

.menu-oge svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }

.menu-rozet {
  margin-left: auto;
  background: var(--kirmizi);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
}

/* ── Üst çubuk ── */

.icerik { display: flex; flex-direction: column; min-width: 0; }

.ust-cubuk {
  background: var(--yuzey);
  border-bottom: 1px solid var(--cizgi);
  padding: 0 26px;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.ust-ara {
  flex: 1;
  max-width: 420px;
  position: relative;
}

.ust-ara input { padding-left: 38px; }

.ust-ara svg {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px;
  color: var(--metin-soluk);
  pointer-events: none;
}

.ust-sag { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.kullanici-rozet {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  background: var(--yuzey-alt);
  border: 1px solid var(--cizgi);
}

.avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--marka);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
}

.kullanici-rozet .ad { font-size: 13px; font-weight: 600; }
.kullanici-rozet .rol { font-size: 11px; color: var(--metin-soluk); }

/* ── Sayfa gövdesi ── */

.govde { padding: 26px; flex: 1; }

.sayfa-basi {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.sayfa-basi h2 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -.4px;
}

.sayfa-basi .alt {
  margin: 3px 0 0;
  color: var(--metin-orta);
  font-size: 13px;
}

.sayfa-basi .sag { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ══════════════════════════════════════════
   KPI KARTLARI
   ══════════════════════════════════════════ */

.kart-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.kpi {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap);
  padding: 18px;
  box-shadow: var(--golge);
  position: relative;
  overflow: hidden;
}

.kpi .ust {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.kpi .baslik {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--metin-orta);
}

.kpi .aciklama {
  font-size: 12px;
  color: var(--metin-soluk);
  margin-top: 2px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.kpi .simge {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kpi .simge svg { width: 17px; height: 17px; }

.kpi .deger {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.1;
}

.kpi .yan-deger {
  display: flex;
  gap: 22px;
  margin-top: 4px;
}

.kpi .yan-deger .parca .etiket {
  font-size: 11px;
  color: var(--metin-soluk);
}

.kpi .yan-deger .parca .sayi {
  font-size: 18px;
  font-weight: 700;
}

.s-mavi   { background: var(--mavi-zemin);   color: var(--mavi); }
.s-yesil  { background: var(--yesil-zemin);  color: var(--yesil); }
.s-sari   { background: var(--sari-zemin);   color: var(--sari); }
.s-kirmizi{ background: var(--kirmizi-zemin);color: var(--kirmizi); }
.s-mor    { background: var(--mor-zemin);    color: var(--mor); }

/* ══════════════════════════════════════════
   PANO / KUTULAR
   ══════════════════════════════════════════ */

.kutu {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap);
  box-shadow: var(--golge);
  margin-bottom: 20px;
  overflow: hidden;
}

.kutu-basi {
  padding: 16px 18px;
  border-bottom: 1px solid var(--cizgi);
  display: flex;
  align-items: center;
  gap: 12px;
}

.kutu-basi h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.kutu-basi .alt {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--metin-soluk);
}

.kutu-basi .sag { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.kutu-govde { padding: 18px; }

/* ══════════════════════════════════════════
   TABLO
   ══════════════════════════════════════════ */

.tablo-sar { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

thead th {
  text-align: left;
  padding: 11px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--metin-orta);
  background: var(--yuzey-alt);
  border-bottom: 1px solid var(--cizgi);
  white-space: nowrap;
}

tbody td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--cizgi);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--yuzey-alt); }

.hucre-ad {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hucre-ad .avatar { width: 32px; height: 32px; font-size: 12px; }
.hucre-ad .isim { font-weight: 600; }
.hucre-ad .ikincil { font-size: 12px; color: var(--metin-soluk); }

.soluk { color: var(--metin-soluk); }
.sayi-hucre { font-variant-numeric: tabular-nums; }

/* ── Rozetler ── */

.rozet {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.r-yesil  { background: var(--yesil-zemin);  color: #15803d; }
.r-sari   { background: var(--sari-zemin);   color: #b45309; }
.r-kirmizi{ background: var(--kirmizi-zemin);color: #b91c1c; }
.r-mavi   { background: var(--mavi-zemin);   color: #1d4ed8; }
.r-mor    { background: var(--mor-zemin);    color: #6d28d9; }
.r-gri    { background: #eef1f7;             color: var(--metin-orta); }

/* ── Filtre çubuğu ── */

.filtre-cubuk {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--cizgi);
  background: var(--yuzey-alt);
}

.filtre-cubuk input, .filtre-cubuk select { width: auto; min-width: 180px; }
.filtre-cubuk .sag { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.filtre-sayac {
  font-size: 12px;
  color: var(--metin-orta);
  font-variant-numeric: tabular-nums;
}

/* ── Sayfalama ── */

.sayfalama {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--cizgi);
}

.sayfalama .bilgi {
  font-size: 12px;
  color: var(--metin-orta);
  font-variant-numeric: tabular-nums;
}

.sayfalama .sag { margin-left: auto; display: flex; gap: 8px; }

/* ══════════════════════════════════════════
   GRAFİK (elle çizilen SVG)
   ══════════════════════════════════════════ */

.grafik { width: 100%; height: 220px; display: block; }
.grafik .cizgi { fill: none; stroke: var(--marka-acik); stroke-width: 2.5; stroke-linejoin: round; }
.grafik .alan  { fill: url(#egim); }
.grafik .izgara { stroke: var(--cizgi); stroke-width: 1; }
.grafik .etiket { font-size: 10px; fill: var(--metin-soluk); }
.grafik .nokta { fill: var(--marka-acik); }

/* ══════════════════════════════════════════
   YAN PANEL (detay)
   ══════════════════════════════════════════ */

.perde {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, .45);
  z-index: 40;
  display: flex;
  justify-content: flex-end;
}

.yan-panel {
  width: 560px;
  max-width: 94vw;
  background: var(--zemin);
  height: 100%;
  overflow-y: auto;
  box-shadow: var(--golge-buyuk);
}

.yan-panel-basi {
  background: var(--yuzey);
  padding: 18px 20px;
  border-bottom: 1px solid var(--cizgi);
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.yan-panel-basi h3 { margin: 0; font-size: 17px; }
.yan-panel-govde { padding: 20px; }

.kapat {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--metin-soluk);
  padding: 4px 8px;
  border-radius: var(--yaricap-kucuk);
}

.kapat:hover { background: var(--zemin); color: var(--metin); }

/* Alan listesi — detay panelinde etiket/değer çiftleri */
.alan-liste { display: grid; grid-template-columns: 132px 1fr; gap: 9px 14px; font-size: 13px; }
.alan-liste dt { color: var(--metin-orta); }
.alan-liste dd { margin: 0; font-weight: 500; word-break: break-word; }

/* ══════════════════════════════════════════
   DURUMLAR
   ══════════════════════════════════════════ */

.bos {
  text-align: center;
  padding: 48px 20px;
  color: var(--metin-soluk);
}

.bos .simge { font-size: 34px; margin-bottom: 10px; }
.bos .baslik { font-weight: 600; color: var(--metin-orta); margin-bottom: 4px; }

.yukleniyor {
  text-align: center;
  padding: 44px;
  color: var(--metin-soluk);
}

/* İskelet — yükleme sırasında düzen zıplamasın diye. */
.iskelet {
  background: linear-gradient(90deg, #eef1f7 25%, #f7f9fc 50%, #eef1f7 75%);
  background-size: 200% 100%;
  animation: kayan 1.4s ease-in-out infinite;
  border-radius: 6px;
  height: 14px;
}

@keyframes kayan {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.gizli { display: none !important; }

/* ── Bildirim ── */

.bildirim {
  position: fixed;
  bottom: 22px; right: 22px;
  background: var(--metin);
  color: #fff;
  padding: 13px 18px;
  border-radius: var(--yaricap-kucuk);
  box-shadow: var(--golge-buyuk);
  font-size: 13px;
  z-index: 60;
  max-width: 380px;
}

.bildirim.basarili { background: var(--yesil); }
.bildirim.hatali   { background: var(--kirmizi); }

/* ══════════════════════════════════════════
   DAR EKRAN
   ══════════════════════════════════════════ */

.menu-dugme {
  display: none;
  background: none;
  border: none;
  padding: 6px;
  color: var(--metin);
  flex-shrink: 0;
}

/**
 * Menü açıkken arkadaki karartma.
 *
 * ⚠️ Menü dışına dokununca kapanmalı. Karartma olmadan kullanıcı
 * menüyü kapatmak için tekrar hamburger düğmesini bulmak zorunda
 * kalıyordu — dokunmatikte en sinir bozucu desen.
 */
.menu-perde {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, .45);
  z-index: 45;
}

.menu-perde.acik { display: block; }

/* ── Tablet ── */
@media (max-width: 1100px) {
  .kart-izgara { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* ── Menü katlanıyor ── */
@media (max-width: 900px) {
  .menu-dugme { display: block; }

  .kabuk { grid-template-columns: 1fr; }

  .yan-menu {
    position: fixed;
    left: 0; top: 0;
    width: var(--yan-genislik);
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .22s ease;
  }

  .yan-menu.acik { transform: translateX(0); }

  .govde { padding: 16px; }
  .ust-cubuk { padding: 0 14px; gap: 10px; }

  /**
   * ⚠️ Kullanıcı adı gizleniyor, avatar KALIYOR.
   *
   * Dar ekranda "arama + ad + rol + yenile" yan yana sığmıyor ve
   * arama kutusu ezilip kullanılamaz hâle geliyordu. Avatar kimin
   * oturum açtığını göstermeye yetiyor.
   */
  .kullanici-rozet > div:not(.avatar) { display: none; }
  .kullanici-rozet { padding: 4px; }

  /* Yan panel tam ekrana yakın — 560px dar ekranda taşıyordu. */
  .yan-panel { width: 100%; max-width: 100%; }
}

/* ── Telefon ── */
@media (max-width: 640px) {
  /**
   * ⚠️ KPI kartları TEK SÜTUN. 232px'lik minmax telefonda iki sütun
   * deneyip sayıları taşırıyordu (30px font + 3 haneli sayı).
   */
  .kart-izgara { grid-template-columns: 1fr; gap: 12px; }

  .govde { padding: 12px; }

  .sayfa-basi h2 { font-size: 20px; }
  .sayfa-basi .sag { margin-left: 0; width: 100%; }

  /* "Yenile" düğmesi ve arama alt alta — yan yana sığmıyor. */
  .ust-cubuk { height: auto; padding: 10px 12px; flex-wrap: wrap; }
  .ust-ara { max-width: none; order: 3; width: 100%; }
  .ust-sag { margin-left: auto; }

  /**
   * ⚠️ Filtreler alt alta ve TAM GENİŞLİK. min-width:180px yan yana
   * kalmalarına yol açıp yatay kaydırma yaratıyordu.
   */
  .filtre-cubuk { padding: 12px; }
  .filtre-cubuk input,
  .filtre-cubuk select,
  .filtre-cubuk button { width: 100%; min-width: 0; }
  .filtre-cubuk .sag { margin-left: 0; width: 100%; justify-content: flex-start; }

  /* Sayfalama düğmeleri sığsın. */
  .sayfalama { flex-wrap: wrap; }
  .sayfalama .sag { margin-left: auto; }

  /* Detay panelindeki etiket/değer tek sütuna düşüyor. */
  .alan-liste { grid-template-columns: 1fr; gap: 2px 0; }
  .alan-liste dt { margin-top: 8px; font-size: 12px; }

  /* Tablo hücreleri daralıyor — yatay kaydırma yine çalışıyor. */
  thead th, tbody td { padding: 10px 10px; }

  .kutu-basi { padding: 14px; }
  .kutu-govde { padding: 14px; }

  /* Bildirim tam genişlik — köşede sıkışmasın. */
  .bildirim { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/**
 * ⚠️ DOKUNMATİK HEDEF BOYUTU.
 *
 * WCAG 2.5.8 en az 24×24 CSS pikseli istiyor; dokunmatikte 44px
 * yaygın hedef. Küçük düğmeler parmakla ıskalanıyordu.
 */
@media (pointer: coarse) {
  .dugme-kucuk { padding: 10px 16px; }
  .menu-oge { padding: 13px 20px; }
  .kapat { padding: 8px 12px; font-size: 26px; }
}