/* =============================================================
   YGT ISI panel ek stilleri

   styles.css Metronic'in ÖNCEDEN DERLENMİŞ Tailwind çıktısıdır ve
   şablonlardan yeniden derlenmez. Bu yüzden demo7'de geçmeyen bir utility
   sınıfı yazıldığında CSS'te karşılığı olmaz ve sınıf sessizce hiçbir şey
   yapmaz. Panelde ihtiyaç duyulan ama derlenmiş çıktıda bulunmayan sınıflar
   burada tanımlanır.

   Eksik sınıfları bulmak için: scratchpad/sinif_denetimi.py
   ============================================================= */

/* ---------- Izgara: satır/sütun ---------- */
@media (min-width: 640px) {
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:col-span-2  { grid-column: span 2 / span 2; }
}

@media (min-width: 768px) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:p-5 { padding: calc(var(--spacing) * 5); }
}

@media (min-width: 1280px) {
  .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .xl\:col-span-1  { grid-column: span 1 / span 1; }
  .xl\:col-span-2  { grid-column: span 2 / span 2; }
  .xl\:col-span-3  { grid-column: span 3 / span 3; }
  .xl\:col-span-4  { grid-column: span 4 / span 4; }
  .xl\:sticky      { position: sticky; }
  .xl\:top-24      { top: calc(var(--spacing) * 24); }
}

/* ---------- Ölçü ve hizalama ---------- */
.align-top { vertical-align: top; }
.h-28 { height: calc(var(--spacing) * 28); }
.py-6 { padding-block: calc(var(--spacing) * 6); }
.mt-0\.5 { margin-top: calc(var(--spacing) * 0.5); }
.end-1 { inset-inline-end: calc(var(--spacing) * 1); }
.z-50 { z-index: 50; }
.w-64 { width: calc(var(--spacing) * 64); }
.w-\[130px\] { width: 130px; }
.w-\[140px\] { width: 140px; }
.w-\[160px\] { width: 160px; }
.max-w-\[360px\] { max-width: 360px; }
.max-h-\[70px\] { max-height: 70px; }

/* ---------- Görsel ---------- */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.bg-muted\/60 { background-color: color-mix(in oklab, var(--muted) 60%, transparent); }
.bg-muted\/40 { background-color: color-mix(in oklab, var(--muted) 40%, transparent); }
.bg-destructive\/10 { background-color: color-mix(in oklab, var(--destructive) 10%, transparent); }
.bg-primary\/10 { background-color: color-mix(in oklab, var(--primary) 10%, transparent); }
.text-xl\! { font-size: var(--text-xl) !important; line-height: var(--text-xl--line-height) !important; }
.text-2xl\! { font-size: var(--text-2xl) !important; line-height: var(--text-2xl--line-height) !important; }

/* ---------- Modallar ----------
   Metronic modalları içerikle birlikte büyüyüp ekranın tepesine yapışıyordu.
   Panel modalları orta boyda ve dikeyde ortalanmış açılır; mobilde tam
   genişliğe yayılır ve içerik uzunsa modalın gövdesi kaydırılır. */
/* ---------- Form adım rozeti ----------
   Servis formundaki bölüm numaraları. kt-card-title blok akışında olduğu için
   rozetin satır içi kalması gerekir; aksi halde başlığın üstüne düşer. */
.kt-adim-rozeti {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 9999px;
  background-color: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

/* KTUI modalı açarken inline `display: block` yazar; dikey ortalama için
   flex'e ihtiyaç olduğundan burada bilinçli olarak !important kullanılır. */
.kt-modal.open {
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
  padding-block: calc(var(--spacing) * 6);
}

.kt-modal .kt-modal-content {
  /* Tema bunu konumlandırılmış öge olarak kurar; flex hizalamasına katılması
     için akışa geri alınır, dikey ortalama margin ile yapılır. */
  position: relative;
  top: auto;
  inset-block-start: auto;
  width: 100%;
  max-width: 640px;
  margin: auto;
  /* Mobil tarayıcılarda 100vh adres çubuğunu da sayar; dvh görünen alanı
     verir, desteklemeyen tarayıcı üstteki vh kuralında kalır. */
  max-height: calc(100vh - var(--spacing) * 12);
  max-height: calc(100dvh - var(--spacing) * 12);
  display: flex;
  flex-direction: column;
}

/* ⚠ Modal formu flex zincirine dahil edilmeli.
   Modallarımızın yapısı: .kt-modal-content > (.kt-modal-header + form).
   Gövde ve buton satırı formun İÇİNDE olduğu için, form flex kabı olmazsa
   gövdenin `flex: 1 1 auto` kuralı hiçbir işe yaramaz: form kendi doğal
   yüksekliğinde kalır ve alanlar modalın altından dışarı taşar (mobilde
   açıkça görülür). Yeni bir modal eklerken bu yapıyı koru. */
.kt-modal .kt-modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Modal gövdesi taşarsa yalnızca gövde kaydırılsın; başlık ve butonlar sabit kalsın. */
.kt-modal .kt-modal-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
}

@media (min-width: 768px) {
  .kt-modal.open { align-items: center; padding-block: calc(var(--spacing) * 10); }
  .kt-modal .kt-modal-content {
    max-height: calc(100vh - var(--spacing) * 20);
    max-height: calc(100dvh - var(--spacing) * 20);
  }
}

/* Dar modallar (silme onayı gibi) daha küçük kalsın. */
.kt-modal .kt-modal-content.kt-modal-dar { max-width: 440px; }

/* ---------- Görsel önizleme (lightbox) ----------
   Etiket görselleri ve servis fotoğrafları yeni sekmede açılmaz; bu modalda
   büyük olarak gösterilir. Modal geniştir ve görsel kabına sığdırılır. */
.kt-modal .kt-modal-content.kt-modal-gorsel { max-width: 1100px; }

.kt-gorsel-govde {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--spacing) * 4);
  background-color: color-mix(in oklab, var(--muted) 40%, transparent);
}

.kt-gorsel-govde img {
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius, 0.5rem);
}

/* Görsel açan her öge tıklanabilir olduğunu belli etsin. */
[data-gorsel-ac] { cursor: zoom-in; }
[data-gorsel-ac] img { transition: opacity 0.15s ease; }
[data-gorsel-ac]:hover img { opacity: 0.85; }

/* ---------- Sözleşme modalı ----------
   Giriş ekranındaki KVKK metni, panelden CKEditor5 ile düzenlenen zengin
   metni gösterir. Modal okunabilir bir belge genişliğinde açılır. */
.kt-modal .kt-modal-content.kt-modal-sozlesme { max-width: 720px; }

/* CKEditor5 çıktısı düz HTML olarak basılır (heading/liste/link vb. kendi
   sınıfı yok); styles.css'te bunlar için tipografi kuralı bulunmadığından
   burada tanımlanır. Yeni bir zengin metin gösterimi eklerken bu sınıfı
   kullan, yeni bir tane uydurma. */
.kt-zengin-metin {
  padding: calc(var(--spacing) * 5);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--foreground);
}

.kt-zengin-metin :is(h1, h2, h3, h4) {
  color: var(--mono, var(--foreground));
  font-weight: 600;
  line-height: 1.35;
  margin-block: 1.25em 0.5em;
}
.kt-zengin-metin :first-child { margin-block-start: 0; }
.kt-zengin-metin h1 { font-size: 1.25rem; }
.kt-zengin-metin h2 { font-size: 1.125rem; }
.kt-zengin-metin h3 { font-size: 1rem; }

.kt-zengin-metin p { margin-block: 0.75em; }

.kt-zengin-metin :is(ul, ol) {
  margin-block: 0.75em;
  padding-inline-start: 1.375em;
}
.kt-zengin-metin ul { list-style: disc; }
.kt-zengin-metin ol { list-style: decimal; }
.kt-zengin-metin li { margin-block: 0.25em; }

.kt-zengin-metin a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

.kt-zengin-metin blockquote {
  margin-block: 0.75em;
  padding-inline-start: 1em;
  border-inline-start: 3px solid var(--border);
  color: var(--secondary-foreground);
}

.kt-zengin-metin table {
  width: 100%;
  border-collapse: collapse;
  margin-block: 0.75em;
  font-size: 0.8125rem;
}
.kt-zengin-metin :is(th, td) {
  border: 1px solid var(--border);
  padding: calc(var(--spacing) * 2);
  text-align: start;
}
.kt-zengin-metin th { background-color: var(--muted); font-weight: 600; }

.kt-zengin-metin img { max-width: 100%; height: auto; border-radius: var(--radius, 0.5rem); }

/* ---------- Tarih / saat alanları ----------
   date ve datetime-local alanları kendi iç genişliklerini dayatır; dar kapta
   (modal, açılır filtre menüsü, mobil form sütunu) sağa taşarlar. Yerel
   görünümü kapatıp kutuyu kabına bağlıyoruz. */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

/* iOS değeri kutunun ortasına yaslayıp alanı gereğinden geniş yapıyor. */
input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
  text-align: start;
  min-width: 0;
}

/* Takvim simgesi kutunun içinde kalsın, taşma yaratmasın. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  margin-inline-start: 0;
  flex-shrink: 0;
}

/* ---------- Mobilde form alanları ----------
   iOS Safari, yazı boyutu 16px'in altındaki bir alana odaklanınca sayfayı
   yakınlaştırır ve geri uzaklaştırmaz. Metronic'in varsayılanı 13px olduğu
   için mobilde alanlar 16px'e çıkarılır; kutu yüksekliği de dokunma hedefine
   uygun hale gelir. maximum-scale ile yakınlaştırmayı kapatmak erişilebilirliği
   bozacağı için bilinçli olarak tercih edilmedi. */
@media (max-width: 767px) {
  .kt-input,
  .kt-select,
  .kt-textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px;
  }

  .kt-input,
  .kt-select { height: calc(var(--spacing) * 11); }

  .kt-input-sm,
  .kt-select-sm { height: calc(var(--spacing) * 10); }

  /* Açılır filtre menüsü ekrandan taşmasın (loglar tarih aralığı). */
  .kt-menu-dropdown,
  .kt-dropdown-menu {
    max-width: calc(100vw - var(--spacing) * 6);
  }
}

/* ---------- Yatay taşma ----------
   Flex/grid çocuklarının varsayılan min-width:auto değeri, içindeki geniş
   tabloyu (min-width: 900px vb.) dışarı taşırır ve dar ekranda tüm sayfayı
   yatay kaydırılabilir yapar. Kaydırma kabının kendi içinde kayması için
   zincirdeki kapların küçülebilmesi gerekir. */
/* body bir flex satırıdır; ana sütunun küçülebilmesi için min-width:auto
   zincirinin en tepeden kırılması gerekir. */
body > div,
main,
footer,
.kt-container-fixed,
.kt-card,
.kt-card-table,
.kt-card-table > *,
.kt-card-content,
.kt-scrollable-x-auto {
  min-width: 0;
}

/* Kaydırma kabı hiçbir koşulda kabından geniş olmasın; geniş tablo kendi
   içinde kaysın. */
.kt-scrollable-x-auto {
  max-width: 100%;
  overflow-x: auto;
}

/* Footer demo7'den gelir ve derlenmiş CSS'te karşılığı olmayan md: sınıfları
   kullanır; mobilde alt alta yığılması için eksik kurallar. */
.flex-center { display: flex; align-items: center; justify-content: center; }
@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row; }
  .md\:order-1 { order: 1; }
  .md\:order-2 { order: 2; }
  .md\:justify-between { justify-content: space-between; }
  .md\:justify-start { justify-content: flex-start; }
  .md\:justify-end { justify-content: flex-end; }
  .md\:text-start { text-align: start; }
}

/* Footer satırı dar ekranda taşmasın, sarmalansın. */
.footer .kt-container-fixed > div,
.footer nav {
  flex-wrap: wrap;
  min-width: 0;
}

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
  .kt-card-header {
    flex-wrap: wrap;
    row-gap: calc(var(--spacing) * 2);
  }

  /* Araç çubuğundaki butonlar dar ekranda satıra yayılsın. */
  .kt-modal .kt-modal-content { max-width: 100%; }
}