:root {
  --bg-ana: #0b0a12;
  --bg-panel: #131120;
  --bg-kart-ic: #1a172b;
  --bg-kart-hover: #211d36;
  --kenarlik: rgba(148, 130, 255, 0.14);
  --kenarlik-parlak: rgba(164, 133, 255, 0.35);
  --metin-ana: #f3f1ff;
  --metin-ikincil: #9c96b8;
  --metin-soluk: #6a6486;
  --mor-ana: #7c5cff;
  --mor-acik: #a78bfa;
  --mor-koyu: #35276e;
  --yesil: #10b981;
  --yesil-bg: rgba(16, 185, 129, 0.14);
  --kirmizi: #ef4444;
  --kirmizi-bg: rgba(239, 68, 68, 0.15);
  --sari: #f59e0b;
  --sari-bg: rgba(245, 158, 11, 0.15);
  --radius-kart: 16px;
  --radius-kucuk: 10px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-ana);
  background-image:
    radial-gradient(circle at 82% 10%, rgba(124, 92, 255, 0.18), transparent 34%),
    radial-gradient(circle at 15% 85%, rgba(88, 62, 196, 0.12), transparent 40%);
  color: var(--metin-ana);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.gizli {
  display: none !important;
}

/* Giriş Ekranı */
.giris-kapsayici {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.giris-kart {
  background: var(--bg-panel);
  border: 1px solid var(--kenarlik-parlak);
  border-radius: var(--radius-kart);
  padding: 32px 28px;
  width: 100%;
  max-width: 390px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.giris-logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--mor-ana), #5438dc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 0 24px rgba(124, 92, 255, 0.5);
}

.giris-kart h1 {
  font-size: 1.35rem;
  margin-bottom: 4px;
}

.giris-altbaslik {
  color: var(--metin-ikincil);
  font-size: 0.9rem;
  margin-bottom: 22px;
}

.giris-kart label {
  display: block;
  font-size: 0.82rem;
  color: var(--metin-ikincil);
  margin-bottom: 6px;
}

.giris-kart input {
  width: 100%;
  padding: 11px 13px;
  margin-bottom: 16px;
  border-radius: var(--radius-kucuk);
  border: 1px solid var(--kenarlik);
  background: var(--bg-kart-ic);
  color: var(--metin-ana);
  font-size: 0.95rem;
}

.giris-kart input:focus {
  outline: none;
  border-color: var(--mor-acik);
}

.birincil-buton {
  background: linear-gradient(135deg, var(--mor-ana), #5b3df5);
  color: #fff;
  border: none;
  border-radius: var(--radius-kucuk);
  padding: 11px 18px;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
}

.birincil-buton:hover:not(:disabled) {
  opacity: 0.93;
}

.birincil-buton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#giris-buton {
  width: 100%;
  margin-top: 4px;
}

.hata-kutusu {
  background: var(--kirmizi-bg);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  padding: 10px 12px;
  border-radius: var(--radius-kucuk);
  font-size: 0.84rem;
  margin-bottom: 14px;
}

/* Ana Pano Düzeni */
.pano-duzeni {
  display: grid;
  grid-template-columns: 68px 1fr;
  min-height: 100vh;
}

/* Sol İnce İkon Menü */
.yan-menu {
  background: rgba(15, 13, 26, 0.92);
  border-right: 1px solid var(--kenarlik);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 30;
}

.menu-ust-arma {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(124, 92, 255, 0.16);
  border: 1px solid var(--kenarlik-parlak);
  color: var(--mor-acik);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
}

.menu-linkler {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.menu-alt {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.menu-ikon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--metin-ikincil);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
}

.menu-ikon:hover {
  color: var(--metin-ana);
  background: var(--bg-kart-ic);
}

.menu-ikon.aktif {
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.32), rgba(88, 62, 196, 0.22));
  color: #fff;
  border-color: var(--kenarlik-parlak);
  box-shadow: 0 0 18px rgba(124, 92, 255, 0.3);
}

/* İçerik Alanı ve Üst Karşılama */
.icerik-alani {
  padding: 28px 34px 48px;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

.ust-karsilama {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 26px;
  padding: 8px 4px;
  position: relative;
}

.selam-satiri {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ust-karsilama h1 {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.parlama-ikon {
  color: var(--mor-acik);
  font-size: 1.5rem;
}

.tarih-hava-satiri {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
  margin-bottom: 10px;
}

.tarih-rozet,
.hava-rozet {
  font-size: 0.82rem;
  color: var(--mor-acik);
  background: rgba(124, 92, 255, 0.13);
  border: 1px solid var(--kenarlik);
  padding: 3px 10px;
  border-radius: 999px;
}

.guncelleme-etiket {
  font-size: 0.76rem;
  color: var(--metin-soluk);
}

.bulten-aciklama {
  color: var(--metin-ikincil);
  max-width: 680px;
  font-size: 0.95rem;
}

/* Sağ Üst Gezegen Dekoru */
.gezegen-dekor {
  position: relative;
  width: 120px;
  height: 90px;
  flex-shrink: 0;
}

.gezegen-kure {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #c4b5fd, #6d4aff 55%, #1e1646 90%);
  box-shadow: 0 0 40px rgba(124, 92, 255, 0.65), inset -8px -8px 18px rgba(10, 8, 22, 0.8);
  position: absolute;
  right: 18px;
  top: 10px;
}

.yildiz {
  position: absolute;
  color: var(--mor-acik);
  opacity: 0.75;
}
.yildiz.y1 { top: 4px; left: 10px; font-size: 0.8rem; }
.yildiz.y2 { bottom: 8px; left: 26px; font-size: 1.1rem; }
.yildiz.y3 { top: 18px; right: 2px; font-size: 0.7rem; }

/* Kart Izgarası */
.kart-izgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.kart {
  background: var(--bg-panel);
  border: 1px solid var(--kenarlik);
  border-radius: var(--radius-kart);
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.kart-genis {
  grid-column: span 2;
}

.kart-tam-genis {
  grid-column: 1 / -1;
}

.sag-sutun-grup {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.kart-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

.kart-baslik-sol {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--metin-ana);
}

.kart-baslik-sol svg {
  color: var(--mor-acik);
  flex-shrink: 0;
}

.kart-baslik h2 {
  font-size: 1rem;
  font-weight: 600;
}

.soluk-metin {
  color: var(--metin-ikincil);
  font-weight: 400;
}

.vurgu-metin {
  color: #60a5fa;
  font-weight: 500;
  font-size: 0.88rem;
}

.mor-rozet {
  background: rgba(124, 92, 255, 0.2);
  border: 1px solid var(--kenarlik-parlak);
  color: #ddd6fe;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
}

.kart-govde {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.alinamadi-kutu {
  background: rgba(239, 68, 68, 0.08);
  border: 1px dashed rgba(239, 68, 68, 0.35);
  color: #fca5a5;
  border-radius: var(--radius-kucuk);
  padding: 18px;
  text-align: center;
  font-size: 0.9rem;
}

/* 1. Posta Kartı */
.posta-listesi {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.posta-oge {
  background: var(--bg-kart-ic);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-kucuk);
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.posta-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mor-ana), #4c1d95);
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.posta-detay {
  flex: 1;
  min-width: 0;
}

.posta-ust {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--metin-ikincil);
  margin-bottom: 2px;
}

.posta-konu {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--metin-ana);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.posta-nokta {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mor-acik);
  flex-shrink: 0;
}

.ai-ozet-kutu {
  margin-top: auto;
  background: linear-gradient(90deg, rgba(124, 92, 255, 0.24), rgba(76, 29, 149, 0.28));
  border: 1px solid var(--kenarlik-parlak);
  border-radius: var(--radius-kucuk);
  padding: 11px 13px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.83rem;
  color: #e9d5ff;
}

.ai-ikon {
  color: var(--mor-acik);
  font-size: 1rem;
  line-height: 1.2;
}

/* 2. Takvim Çizelgesi */
.takvim-cizelgesi {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.takvim-satir {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 10px;
}

.takvim-saat {
  font-size: 0.76rem;
  color: var(--metin-soluk);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.takvim-blok {
  padding: 10px 13px;
  border-radius: var(--radius-kucuk);
  background: linear-gradient(90deg, rgba(124, 92, 255, 0.28), rgba(88, 62, 196, 0.16));
  border-left: 3px solid var(--mor-acik);
}

.takvim-satir:nth-child(even) .takvim-blok {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.24), rgba(37, 99, 235, 0.12));
  border-left-color: #60a5fa;
}

.takvim-baslik {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--metin-ana);
}

.takvim-aralik {
  font-size: 0.76rem;
  color: var(--metin-ikincil);
  margin-top: 2px;
}

/* 3. Son Rapor ve Süzgeç */
.tur-suzgec {
  display: flex;
  gap: 4px;
  background: var(--bg-kart-ic);
  padding: 3px;
  border-radius: 8px;
}

.suzgec-btn {
  background: transparent;
  border: none;
  color: var(--metin-ikincil);
  font-size: 0.72rem;
  padding: 4px 7px;
  border-radius: 6px;
  cursor: pointer;
}

.suzgec-btn.aktif {
  background: var(--mor-ana);
  color: #fff;
  font-weight: 600;
}

.rapor-vitrin {
  background: radial-gradient(circle at 50% 0%, rgba(124, 92, 255, 0.28), var(--bg-kart-ic) 75%);
  border: 1px solid var(--kenarlik);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rapor-vitrin-ikon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(124, 92, 255, 0.25);
  border: 1px solid var(--kenarlik-parlak);
  color: var(--mor-acik);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kucuk-etiket {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mor-acik);
}

.rapor-vitrin h3 {
  font-size: 0.98rem;
  margin-top: 2px;
}

.rapor-onizleme-metin {
  font-size: 0.83rem;
  color: var(--metin-ikincil);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tamamini-oku-btn {
  background: var(--bg-kart-ic);
  border: 1px solid var(--kenarlik);
  color: var(--metin-ana);
  padding: 10px 14px;
  border-radius: var(--radius-kucuk);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.tamamini-oku-btn:hover {
  border-color: var(--mor-acik);
}

.rapor-mini-liste {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.rapor-mini-oge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--metin-ikincil);
}

.rapor-mini-oge:hover {
  background: var(--bg-kart-hover);
  color: var(--metin-ana);
}

/* 4. Otomasyonlar */
.otomasyon-listesi {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.otomasyon-satir {
  background: var(--bg-kart-ic);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-kucuk);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.otomasyon-sol {
  display: flex;
  align-items: center;
  gap: 12px;
}

.otomasyon-ikon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(124, 92, 255, 0.18);
  color: var(--mor-acik);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.otomasyon-ad {
  font-size: 0.9rem;
  font-weight: 600;
}

.otomasyon-zaman {
  font-size: 0.78rem;
  color: var(--metin-ikincil);
}

.durum-rozet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}

.durum-rozet::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.durum-basarili {
  background: var(--yesil-bg);
  color: #34d399;
}
.durum-basarili::before { background: #10b981; }

.durum-hata {
  background: var(--kirmizi-bg);
  color: #f87171;
}
.durum-hata::before { background: #ef4444; }

.durum-calisiyor {
  background: var(--sari-bg);
  color: #fbbf24;
}
.durum-calisiyor::before { background: #f59e0b; }

/* 5. Yapılacaklar */
.yapilacak-listesi {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.yapilacak-oge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--bg-kart-ic);
}

.yapilacak-etiket {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex: 1;
  font-size: 0.86rem;
}

.yapilacak-etiket input[type="checkbox"] {
  accent-color: var(--mor-ana);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.yapilacak-tamam .yapilacak-metin {
  text-decoration: line-through;
  color: var(--metin-soluk);
}

.yapilacak-saat-etiket {
  font-size: 0.73rem;
  color: var(--metin-ikincil);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 7px;
  border-radius: 6px;
}

.yapilacak-ekle-form {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
}

.yapilacak-ekle-form input {
  background: var(--bg-kart-ic);
  border: 1px solid var(--kenarlik);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--metin-ana);
  font-size: 0.83rem;
  flex: 1;
  min-width: 0;
}

.yapilacak-ekle-form .saat-input {
  flex: 0 0 84px;
}

.ekle-btn {
  background: var(--mor-ana);
  color: #fff;
  border: none;
  border-radius: 8px;
  width: 34px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
}

/* 6. Garmin Kartı */
.garmin-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-kart-ic);
  padding: 12px 14px;
  border-radius: var(--radius-kucuk);
}

.garmin-etiket {
  font-size: 0.88rem;
  font-weight: 600;
}

.garmin-alt-aciklama {
  font-size: 0.78rem;
  color: var(--metin-ikincil);
}

.skor-halka {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 4px solid var(--mor-ana);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--metin-ana);
  box-shadow: 0 0 14px rgba(124, 92, 255, 0.35);
}

.garmin-metrikler {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.metrik-kutu {
  background: var(--bg-kart-ic);
  padding: 9px 12px;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
}

.metrik-ad {
  font-size: 0.73rem;
  color: var(--metin-ikincil);
}

.metrik-kutu strong {
  font-size: 0.95rem;
  margin-top: 2px;
}

/* 7. Asistana Sor */
.sohbet-devam-link {
  color: var(--mor-acik);
  font-size: 0.84rem;
  text-decoration: none;
  font-weight: 500;
}

.sohbet-devam-link:hover {
  text-decoration: underline;
}

.sor-formu {
  display: flex;
  gap: 10px;
}

.sor-formu input {
  flex: 1;
  background: var(--bg-kart-ic);
  border: 1px solid var(--kenarlik);
  border-radius: var(--radius-kucuk);
  padding: 11px 14px;
  color: var(--metin-ana);
  font-size: 0.92rem;
}

.sor-formu input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.dusunuyor-satiri {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mor-acik);
  font-size: 0.86rem;
  padding: 8px 4px;
}

.donen-halka {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(167, 139, 250, 0.3);
  border-top-color: var(--mor-acik);
  border-radius: 50%;
  animation: don 0.8s linear infinite;
}

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

.asistan-cevap-kutu {
  background: var(--bg-kart-ic);
  border: 1px solid var(--kenarlik-parlak);
  border-radius: var(--radius-kucuk);
  padding: 16px;
  font-size: 0.9rem;
}

/* Modal Pencere ve Güvenli Markdown Biçimlendirme */
.modal-arka-plan {
  position: fixed;
  inset: 0;
  background: rgba(5, 4, 10, 0.78);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}

.modal-pencere {
  background: var(--bg-panel);
  border: 1px solid var(--kenarlik-parlak);
  border-radius: var(--radius-kart);
  width: 100%;
  max-width: 680px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75);
}

.modal-ust {
  padding: 18px 22px;
  border-bottom: 1px solid var(--kenarlik);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-ust h2 {
  font-size: 1.1rem;
}

.kapat-btn {
  background: transparent;
  border: none;
  color: var(--metin-ikincil);
  font-size: 1.2rem;
  cursor: pointer;
}

.modal-govde {
  padding: 20px 22px;
  overflow-y: auto;
}

.markdown-icerik h1,
.markdown-icerik h2,
.markdown-icerik h3 {
  margin-top: 14px;
  margin-bottom: 6px;
  color: var(--metin-ana);
}

.markdown-icerik p {
  margin-bottom: 10px;
  color: #dcd7f7;
}

.markdown-icerik ul {
  margin: 8px 0 12px 20px;
}

.markdown-icerik li {
  margin-bottom: 5px;
}

.markdown-icerik code {
  background: rgba(124, 92, 255, 0.2);
  padding: 2px 6px;
  border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.84em;
}

/* Mobil ve Tablet Uyumluluğu (390px Tek Sütun + Alt Sabit Sekme Çubuğu) */
@media (max-width: 1024px) {
  .kart-izgara {
    grid-template-columns: 1fr;
  }
  .kart-genis,
  .kart-tam-genis {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  .pano-duzeni {
    grid-template-columns: 1fr;
  }

  .icerik-alani {
    padding: 18px 14px 92px;
  }

  .gezegen-dekor {
    display: none;
  }

  .ust-karsilama h1 {
    font-size: 1.55rem;
  }

  .yan-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    height: 64px;
    flex-direction: row;
    justify-content: space-around;
    padding: 0 8px;
    border-right: none;
    border-top: 1px solid var(--kenarlik-parlak);
    background: rgba(13, 11, 22, 0.96);
    backdrop-filter: blur(10px);
  }

  .menu-ust-arma {
    display: none;
  }

  .menu-linkler,
  .menu-alt {
    flex-direction: row;
    gap: 4px;
    align-items: center;
  }

  .menu-linkler {
    flex: 1;
    justify-content: space-around;
  }

  .menu-ikon {
    width: 38px;
    height: 38px;
  }

  .sor-formu {
    flex-direction: column;
  }
}