/* GÜRSES CRM — kurumsal tasarım sistemi.
   Tablet öncelikli (K20): geniş dokunma hedefleri, sabit sol menü ≥40rem,
   dar ekranda üst şeride dönüşen menü. Kütüphane yok (K73); bu dosya elle
   okunabilir kalmalı. Sınıf adları Türkçe ve mevcut ekranlarla uyumludur —
   yeniden tasarım bu dosyanın ve `html.ts`'in üstüne kuruludur, markup'ı
   tabandan değiştirmez. */

:root {
  /* --- Nötr ölçek --- */
  --metin: #16202a;
  --soluk: #5b6b7a;
  --cok-soluk: #8a97a3;
  --cizgi: #dde3e9;
  --cizgi-belirgin: #c7d0d9;
  --zemin: #f4f6f8;
  --kart: #ffffff;

  /* --- Marka / vurgu --- */
  --vurgu: #0b5cab;
  --vurgu-koyu: #084a8a;
  --vurgu-yumusak: #eaf2fb;

  /* --- Durum renkleri --- */
  --hata: #a4262c;
  --hata-yumusak: #fdf3f3;
  --hata-cizgi: #e8b4b6;
  --basari: #0f6b3f;
  --basari-yumusak: #f1faf5;
  --basari-cizgi: #b3ddc6;
  --uyari: #8a5a00;
  --uyari-yumusak: #fff9ec;
  --uyari-cizgi: #f0dcb4;
  --notr: #46586b;
  --notr-yumusak: #eef1f4;

  /* --- Yan menü (koyu) --- */
  --yan-zemin: #0f2540;
  --yan-zemin-aktif: #163963;
  --yan-metin: #b6c4d6;
  --yan-metin-soluk: #7c93ac;
  --yan-metin-aktif: #ffffff;
  --yan-vurgu: #3d8bf5;

  --radius: 10px;
  --radius-kucuk: 6px;
  --golge: 0 1px 2px rgba(15, 37, 64, .05), 0 4px 10px rgba(15, 37, 64, .04);
  --golge-belirgin: 0 8px 24px rgba(15, 37, 64, .12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--metin);
  background: var(--zemin);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--vurgu); }

/* =====================================================================
   UYGULAMA İSKELETİ — üst şerit + sol menü + içerik
   ===================================================================== */
.uygulama {
  display: grid;
  grid-template-columns: 15.5rem 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "yan ust" "yan ana";
  min-height: 100vh;
}

/* --- Üst şerit ------------------------------------------------------- */
.ust {
  grid-area: ust;
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 1.5rem;
  background: var(--kart);
  border-bottom: 1px solid var(--cizgi);
  min-height: 3.5rem;
}
.ust .marka {
  font-weight: 700; color: var(--metin); text-decoration: none;
  font-size: 1.05rem; display: none; /* sidebar zaten markayı taşıyor */
}
.ust .sayfa-adi { font-weight: 600; color: var(--metin); }
.ust .sirket {
  padding: .3rem .75rem; border-radius: 999px;
  background: var(--vurgu-yumusak); color: var(--vurgu-koyu);
  font-size: .82rem; font-weight: 600; text-decoration: none;
}
.ust .sirket:hover { background: #dcebfa; }
.ust .kullanici-blok {
  margin-left: auto; display: flex; align-items: center; gap: .75rem;
}
.ust .kullanici {
  color: var(--metin); font-size: .88rem; font-weight: 600;
  display: flex; align-items: center; gap: .5rem;
}
.ust .avatar {
  width: 1.9rem; height: 1.9rem; border-radius: 999px;
  background: var(--vurgu); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700;
}
.ust .cikis { margin: 0; }
.ust .cikis button {
  background: transparent; color: var(--soluk); border: 1px solid var(--cizgi);
  padding: .4rem .8rem; min-height: 2.1rem; font-size: .82rem;
}
.ust .cikis button:hover { background: var(--zemin); filter: none; }

/* --- Sol menü --------------------------------------------------------- */
.yan-menu {
  grid-area: yan;
  background: var(--yan-zemin);
  color: var(--yan-metin);
  display: flex; flex-direction: column;
  padding: 0;
}
.yan-menu .marka {
  display: flex; align-items: center; gap: .6rem;
  padding: 1.1rem 1.25rem; color: #fff; text-decoration: none;
  font-weight: 700; font-size: 1.05rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.yan-menu .marka .isaret {
  width: 1.9rem; height: 1.9rem; border-radius: 7px;
  background: var(--yan-vurgu); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem; flex: 0 0 auto;
}
.yan-menu nav { padding: .75rem .6rem; display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.yan-menu .grup-basligi {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--yan-metin-soluk); padding: .9rem .65rem .3rem;
  font-weight: 700;
}
.yan-menu a {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .65rem; border-radius: var(--radius-kucuk);
  color: var(--yan-metin); text-decoration: none; font-size: .88rem; font-weight: 500;
  min-height: 2.5rem;
}
.yan-menu a:hover { background: rgba(255,255,255,.06); color: #fff; }
.yan-menu a.aktif { background: var(--yan-zemin-aktif); color: var(--yan-metin-aktif); }
.yan-menu a .simge {
  width: 1.15rem; height: 1.15rem; flex: 0 0 auto; opacity: .9;
}
.yan-menu a.aktif .simge { opacity: 1; }
.yan-menu .alt-bilgi {
  padding: .9rem 1.1rem; font-size: .72rem; color: var(--yan-metin-soluk);
  border-top: 1px solid rgba(255,255,255,.08);
}

main { grid-area: ana; padding: 1.75rem 2rem; max-width: 76rem; width: 100%; margin: 0 auto; }

/* =====================================================================
   TİPOGRAFİ VE SAYFA BAŞLIĞI
   ===================================================================== */
h1 { font-size: 1.4rem; margin: 0 0 .3rem; letter-spacing: -.01em; }
h2 { font-size: 1rem; margin: 0 0 .85rem; }
h3 { font-size: .92rem; margin: 0 0 .5rem; color: var(--soluk); }

.sayfa-basligi {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.sayfa-basligi h1 { margin-bottom: .2rem; }
.sayfa-basligi .aciklama { color: var(--soluk); font-size: .9rem; margin: 0; }
.sayfa-basligi .eylem { flex: 0 0 auto; }

.kucuk { font-size: .85rem; color: var(--soluk); margin: .25rem 0; }
.sinir {
  font-size: .72rem; color: var(--soluk); font-weight: 600;
  background: var(--zemin); border-radius: 4px; padding: .1rem .45rem;
}
.dikkat {
  font-size: .87rem; color: var(--uyari);
  background: var(--uyari-yumusak); border: 1px solid var(--uyari-cizgi);
  border-radius: var(--radius); padding: .7rem 1rem; margin: 0 0 1.1rem;
  display: flex; gap: .5rem; align-items: flex-start;
}

/* Zorunlu alan imi ve alan bazlı hata — anket ekranında koşullu sorular
   açıldığında hangi sorunun eksik kaldığını göstermek için. */
.zorunlu-im { color: var(--hata); font-weight: 700; }
label.eksik > input, label.eksik > select {
  border-color: var(--hata);
  box-shadow: 0 0 0 3px var(--hata-yumusak);
}
.alan-hata {
  display: block; margin-top: .3rem;
  font-size: .8rem; font-weight: 600; color: var(--hata);
}

/* Müşteri kartı — özet liste (etiket/değer çiftleri) */
.ozet-liste { margin: 0; display: grid; gap: .1rem; }
.ozet-liste > div {
  display: grid; grid-template-columns: 11rem 1fr;
  gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--cizgi);
}
.ozet-liste > div:last-child { border-bottom: 0; }
.ozet-liste dt { color: var(--soluk); font-size: .87rem; }
.ozet-liste dd { margin: 0; font-size: .92rem; }
@media (max-width: 40rem) {
  .ozet-liste > div { grid-template-columns: 1fr; gap: .15rem; }
}

/* Hassas alan: gizliyken tek düze, açıkken vurgulu ve izlendiği belli */
.hassas-gizli { letter-spacing: .18em; color: var(--soluk); }
.hassas-acik {
  font-variant-numeric: tabular-nums; font-weight: 600;
  background: var(--uyari-yumusak); border: 1px solid var(--uyari-cizgi);
  border-radius: 4px; padding: .05rem .4rem;
}
/* Kimlik satırındaki "Göster" düğmesi metnin akışında kalsın */
form.satir-ici { display: inline; }

/* Geçerliliği bitmiş iletişim satırı — silinmez, soluklaşır (K64) */
.pasif-satir { opacity: .55; }

/* =====================================================================
   KART
   ===================================================================== */
.kart {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  box-shadow: var(--golge);
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.25rem;
}
.kart > h2:first-child, .kart > h3:first-child { margin-top: 0; }
.kart-baslik-satiri {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
.kart-baslik-satiri h2 { margin: 0; }

/* =====================================================================
   BİLDİRİM
   ===================================================================== */
.hata, .basari {
  padding: .7rem 1rem; border-radius: var(--radius);
  border: 1px solid; margin: 0 0 1.1rem;
  font-size: .9rem; display: flex; gap: .5rem; align-items: flex-start;
}
.hata   { color: var(--hata);   border-color: var(--hata-cizgi);   background: var(--hata-yumusak); }
.basari { color: var(--basari); border-color: var(--basari-cizgi); background: var(--basari-yumusak); }
.hata ul, .basari ul { margin: 0; padding-left: 1.1rem; }

/* =====================================================================
   ROZET (durum etiketi)
   ===================================================================== */
.rozet {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem; border-radius: 999px;
  font-size: .76rem; font-weight: 700; white-space: nowrap;
  line-height: 1.4;
}
.rozet-notr    { background: var(--notr-yumusak);    color: var(--notr); }
.rozet-basari  { background: var(--basari-yumusak);  color: var(--basari); }
.rozet-uyari   { background: var(--uyari-yumusak);   color: var(--uyari); }
.rozet-hata    { background: var(--hata-yumusak);    color: var(--hata); }
.rozet-vurgu   { background: var(--vurgu-yumusak);   color: var(--vurgu-koyu); }

/* =====================================================================
   FORM
   ===================================================================== */
label { display: block; margin-bottom: 1rem; font-size: .88rem; font-weight: 600; color: var(--metin); }
label > .yardim { display: block; font-weight: 400; color: var(--soluk); font-size: .8rem; margin-top: .2rem; }
input, select, button, textarea { font: inherit; }
input[type=text], input[type=password], input[type=number], input[type=date],
input[type=time], input[type=tel], input:not([type]), select, textarea {
  width: 100%;
  padding: .6rem .75rem;
  margin-top: .35rem;
  border: 1px solid var(--cizgi-belirgin);
  border-radius: var(--radius-kucuk);
  background: #fff;
  color: var(--metin);
  transition: border-color .1s, box-shadow .1s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--vurgu);
  box-shadow: 0 0 0 3px var(--vurgu-yumusak);
}
input:disabled, select:disabled, textarea:disabled { background: var(--zemin); color: var(--soluk); }
input[type=checkbox] { width: 1.25rem; height: 1.25rem; margin-top: 0; }

button {
  padding: .6rem 1.2rem;
  min-height: 2.6rem;                 /* dokunma hedefi */
  border: 1px solid var(--vurgu);
  border-radius: var(--radius-kucuk);
  background: var(--vurgu); color: #fff;
  font-weight: 600; font-size: .9rem;
  cursor: pointer;
  transition: filter .1s, background .1s;
}
button:hover { filter: brightness(1.1); }
button:active { filter: brightness(.95); }
button.ikincil {
  background: #fff; color: var(--metin); border-color: var(--cizgi-belirgin);
}
button.ikincil:hover { background: var(--zemin); filter: none; }
button.tehlike { background: var(--hata); border-color: var(--hata); }
button.metin-buton {
  background: transparent; border-color: transparent; color: var(--vurgu);
  padding: .4rem .5rem; min-height: auto;
}
button.metin-buton:hover { background: var(--vurgu-yumusak); filter: none; }

/* Link'in buton gibi görünmesi gerektiği yerler (form içinde olmayan eylemler) */
a.buton-baglanti {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .6rem 1.2rem; min-height: 2.6rem;
  border: 1px solid var(--vurgu); border-radius: var(--radius-kucuk);
  background: var(--vurgu); color: #fff; font-weight: 600; font-size: .9rem;
  text-decoration: none; transition: filter .1s;
}
a.buton-baglanti:hover { filter: brightness(1.1); }

.sirket-secim { display: inline-block; margin: 0 .5rem .5rem 0; }
.sirket-secim button.secili { background: var(--basari); border-color: var(--basari); }
.sirket-secim button.ikincil { background: #fff; color: var(--soluk); border-color: var(--cizgi); }

/* --- Ayar satırı ------------------------------------------------------ */
.ayar {
  display: grid;
  grid-template-columns: 1fr 17rem;
  gap: 1.25rem; align-items: start;
  padding: 1rem 0;
  border-top: 1px solid var(--cizgi);
}
.ayar:first-of-type { border-top: 0; padding-top: .25rem; }
.ayar-bilgi label { margin: 0; }
.ayar-bilgi p { margin: .3rem 0 0; }
.ayar-girdi { display: flex; gap: .5rem; align-items: center; }
.ayar-girdi input, .ayar-girdi select { margin-top: 0; }
.ayar-girdi button { flex: 0 0 auto; }

/* --- Liste tablosu ------------------------------------------------------ */
.liste-sarici { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: var(--radius); }
.liste { width: 100%; border-collapse: collapse; background: var(--kart); font-size: .9rem; }
.liste th, .liste td {
  padding: .7rem .85rem; text-align: left;
  border-bottom: 1px solid var(--cizgi);
  vertical-align: middle;
}
.liste thead th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--soluk); font-weight: 700; background: var(--zemin);
}
.liste tbody tr:last-child td { border-bottom: 0; }
.liste tbody tr:hover { background: var(--zemin); }
.liste input[type=number], .liste input[type=time] { width: 100%; min-width: 5rem; margin-top: 0; }
.liste input, .liste select { margin-top: 0; }

/* Tablo hücresi içindeki tek satırlık form (ad düzenle, pasifleştir).
   Her satırın kendi formu var: K74 gereği ekranlar htmx'e bağımlı olamaz,
   yani satır düzenlemesi düz POST ile çalışmak zorunda. */
.liste .satir-form { display: flex; gap: .4rem; align-items: center; margin: 0; }
.liste .satir-form input { min-width: 8rem; }
.liste .satir-form button { white-space: nowrap; }

/* --- Onay kutusu satırı (izin türü seçimi) ------------------------------ */
.secim-satir {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem 0; border-bottom: 1px solid var(--cizgi);
}
.secim-satir:last-of-type { border-bottom: 0; }
.secim-satir input[type=checkbox] { margin: 0; width: auto; }
/* Kapalı seçenek soluk görünür — sebebi yanındaki küçük metinde yazılı */
.secim-satir input:disabled + * , .secim-satir:has(input:disabled) { color: var(--soluk); }

/* Yan yana duran tek düğmelik formlar (tekrar gönder / iptal) */
.satir-form-grup { display: flex; gap: .6rem; flex-wrap: wrap; }
.satir-form-grup form { margin: 0; }

/* Liste ekranlarındaki filtre formu (denetim kaydı, entegrasyon logu gibi
   salt okunur, GET tabanlı filtrelenebilir ekranlar). */
.filtre-formu {
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: end;
}
.filtre-formu label {
  display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; margin: 0;
}
.filtre-formu select, .filtre-formu input { margin-top: 0; }

/* Sayfalama şeridi — liste altında sayfa bilgisi + önceki/sonraki. */
.sayfalama {
  display: flex; align-items: center; gap: 1rem; margin-top: .75rem;
}

/* Kopyalanacak yapılandırma satırı (.env anahtarı gibi) — kırpılmadan,
   seçilebilir biçimde gösterilir. */
.kod-blok {
  background: var(--zemin); border: 1px solid var(--cizgi);
  border-radius: var(--radius); padding: .7rem .85rem; margin: .5rem 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85rem; overflow-x: auto; white-space: pre-wrap; word-break: break-all;
  user-select: all;
}

/* --- Boş durum ---------------------------------------------------------- */
.bos-durum {
  text-align: center; padding: 2.5rem 1.5rem; color: var(--soluk);
}
.bos-durum .simge { font-size: 1.8rem; margin-bottom: .5rem; opacity: .5; }
.bos-durum p { margin: .25rem 0; }

/* =====================================================================
   GİRİŞ EKRANI
   ===================================================================== */
.giris-sayfa {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--yan-zemin) 0%, var(--yan-zemin) 45%, var(--zemin) 45%);
  padding: 1.5rem;
}
.giris {
  width: 100%; max-width: 23rem;
  background: var(--kart); padding: 2rem 1.85rem;
  border: 1px solid var(--cizgi); border-radius: var(--radius);
  box-shadow: var(--golge-belirgin);
}
.giris .marka-giris {
  display: flex; align-items: center; gap: .6rem; justify-content: center;
  margin-bottom: 1.5rem;
}
.giris .marka-giris .isaret {
  width: 2.3rem; height: 2.3rem; border-radius: 8px;
  background: var(--vurgu); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem;
}
.giris .marka-giris span { font-weight: 700; font-size: 1.15rem; color: var(--metin); }
.giris button { width: 100%; margin-top: .35rem; }
.giris h1 { font-size: 1.1rem; text-align: center; font-weight: 600; color: var(--soluk); margin-bottom: 1.25rem; }
.giris a.kucuk { display: block; text-align: center; margin-top: 1rem; }

/* =====================================================================
   ŞİRKET SEÇİM KARTLARI
   ===================================================================== */
.sirket-izgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .85rem;
}
button.sirket-karti {
  display: block; text-align: left; width: 100%;
  padding: 1rem 1.1rem; border-radius: var(--radius); min-height: auto;
  border: 1.5px solid var(--cizgi-belirgin); background: #fff; color: var(--metin);
  font-weight: 400; cursor: pointer; transition: border-color .1s, box-shadow .1s;
}
.sirket-karti:hover { border-color: var(--vurgu); box-shadow: var(--golge); }
.sirket-karti.secili { border-color: var(--vurgu); background: var(--vurgu-yumusak); }
.sirket-karti .ad { font-weight: 700; display: block; }
.sirket-karti .kod { font-size: .78rem; color: var(--soluk); }
.sirket-karti .isaret-secili { float: right; color: var(--vurgu); font-weight: 700; }

/* =====================================================================
   ADIM GÖSTERGESİ (temas kaydı iki adımlı akış)
   ===================================================================== */
.adimlar { display: flex; gap: .5rem; align-items: center; margin-bottom: 1.5rem; }
.adimlar .adim {
  display: flex; align-items: center; gap: .5rem;
  font-size: .82rem; color: var(--cok-soluk); font-weight: 600;
}
.adimlar .adim .no {
  width: 1.6rem; height: 1.6rem; border-radius: 999px;
  background: var(--zemin); color: var(--soluk);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem;
}
.adimlar .adim.tamam .no { background: var(--basari); color: #fff; }
.adimlar .adim.simdi { color: var(--metin); }
.adimlar .adim.simdi .no { background: var(--vurgu); color: #fff; }
.adimlar .cizgi { flex: 1; height: 1px; background: var(--cizgi); max-width: 3rem; }

/* =====================================================================
   METRİK KARTLARI (dashboard özet sayıları)
   ===================================================================== */
.metrik-izgara {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem; margin-bottom: 1.5rem;
}
.metrik {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; box-shadow: var(--golge);
}
.metrik .sayi { font-size: 1.7rem; font-weight: 800; line-height: 1.2; }
.metrik .etiket { font-size: .8rem; color: var(--soluk); font-weight: 600; margin-top: .2rem; }
.metrik.uyarili .sayi { color: var(--uyari); }
.metrik.kritik .sayi { color: var(--hata); }

/* =====================================================================
   DANIŞMAN YÜKÜ DASHBOARD'I (satış resepsiyonu — orantılı dağıtıma
   yardımcı olan, ekranın en üstünde sabit duran kart ızgarası)
   ===================================================================== */
.yuk-dashboard .kart-baslik-satiri { align-items: flex-start; flex-wrap: wrap; gap: .35rem; }
.yuk-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: .85rem;
}
.yuk-karti {
  position: relative;
  border: 1px solid var(--cizgi); border-radius: var(--radius-kucuk);
  background: var(--zemin);
  padding: .95rem 1rem;
  transition: border-color .1s;
}
.yuk-karti.yuk-onerilen {
  border-color: var(--basari); background: var(--basari-yumusak);
}
.yuk-karti.yuk-izinli { opacity: .62; }
.yuk-rozet { position: absolute; top: .7rem; right: .7rem; }
.yuk-ad {
  font-weight: 600; font-size: .86rem; color: var(--metin);
  max-width: 82%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.yuk-sayi {
  font-size: 1.6rem; font-weight: 800; line-height: 1.25; margin-top: .3rem;
  font-variant-numeric: tabular-nums;
}
.yuk-birim { font-size: .74rem; font-weight: 600; color: var(--soluk); margin-left: .3rem; }
.yuk-bar {
  height: .3rem; border-radius: 999px; background: var(--cizgi-belirgin);
  margin-top: .65rem; overflow: hidden;
}
.yuk-bar span { display: block; height: 100%; background: var(--vurgu); border-radius: 999px; }
.yuk-onerilen .yuk-bar span { background: var(--basari); }

/* =====================================================================
   DAR EKRAN — menü üst şeride döner
   ===================================================================== */
@media (max-width: 60rem) {
  .uygulama { grid-template-columns: 12.5rem 1fr; }
  main { padding: 1.25rem 1.25rem; }
}

@media (max-width: 40rem) {
  .uygulama { grid-template-columns: 1fr; grid-template-areas: "ust" "yan" "ana"; }
  .yan-menu { flex-direction: row; overflow-x: auto; align-items: center; }
  .yan-menu .marka { display: none; }
  .yan-menu nav { flex-direction: row; padding: .5rem; flex: none; }
  .yan-menu .grup-basligi { display: none; }
  .yan-menu .alt-bilgi { display: none; }
  .yan-menu a { white-space: nowrap; }
  .ust .marka { display: block; }
  .ayar { grid-template-columns: 1fr; }
  .sayfa-basligi { flex-direction: column; }
  main { padding: 1rem; }
}