/* ================================================================== */
/* Hultem Temizlik Ürünleri - Önceden Derlenmiş CSS Çıktı Dosyası    */
/* Bu dosya Tailwind CSS build olmadan çalışır                        */
/* Tüm gerekli utility sınıfları ve bileşenler burada tanımlıdır     */
/* ================================================================== */

/* ================================================================== */
/* BÖLÜM 1: CSS SIFIRLAMA (Reset)                                    */
/* Tarayıcı varsayılan stillerini normalize eder                      */
/* ================================================================== */
*, /* Tüm elemanlar için evrensel seçici */
*::before, /* Tüm ::before sözde elemanları */
*::after { /* Tüm ::after sözde elemanları */
  box-sizing: border-box; /* Kutu modeli: kenarlık dahil boyutlandırma */
  border-width: 0; /* Varsayılan kenarlık genişliği sıfır */
  border-style: solid; /* Kenarlık stili düz çizgi */
  border-color: #e2e8f0; /* Varsayılan kenarlık rengi slate-200 */
} /* Evrensel sıfırlama sonu */

html { /* HTML kök elemanı */
  line-height: 1.5; /* Satır yüksekliği 1.5 katı */
  -webkit-text-size-adjust: 100%; /* WebKit metin boyutu ayarı */
  tab-size: 4; /* Sekme genişliği 4 karakter */
  font-family: 'Inter', system-ui, -apple-system, sans-serif; /* Ana yazı tipi ailesi */
  font-feature-settings: normal; /* Yazı tipi özellik ayarları normal */
} /* HTML kök elemanı sonu */

body { /* Gövde elemanı */
  margin: 0; /* Dış boşluk sıfır */
  padding: 0; /* İç boşluk sıfır */
  line-height: inherit; /* Satır yüksekliği miras alınır */
  color: #334155; /* Varsayılan metin rengi slate-700 */
  background-color: #ffffff; /* Varsayılan arka plan beyaz */
} /* Gövde elemanı sonu */

h1, h2, h3, h4, h5, h6 { /* Tüm başlık elemanları */
  font-size: inherit; /* Yazı tipi boyutu miras alınır */
  font-weight: inherit; /* Yazı tipi ağırlığı miras alınır */
  margin: 0; /* Dış boşluk sıfır */
} /* Başlık elemanları sonu */

p { /* Paragraf elemanı */
  margin: 0; /* Dış boşluk sıfır */
} /* Paragraf elemanı sonu */

a { /* Bağlantı elemanı */
  color: inherit; /* Renk miras alınır */
  text-decoration: inherit; /* Metin dekorasyonu miras alınır */
} /* Bağlantı elemanı sonu */

img, /* Resim elemanı */
svg, /* SVG elemanı */
video { /* Video elemanı */
  display: block; /* Blok düzende görüntüle */
  max-width: 100%; /* Maksimum genişlik %100 */
  height: auto; /* Yükseklik otomatik (oran korunur) */
} /* Medya elemanları sonu */

button, /* Buton elemanı */
input, /* Girdi elemanı */
select, /* Seçim elemanı */
textarea { /* Metin alanı elemanı */
  font-family: inherit; /* Yazı tipi miras alınır */
  font-size: 100%; /* Yazı tipi boyutu %100 */
  line-height: inherit; /* Satır yüksekliği miras alınır */
  color: inherit; /* Renk miras alınır */
  margin: 0; /* Dış boşluk sıfır */
  padding: 0; /* İç boşluk sıfır */
} /* Form elemanları sonu */

ul, /* Sırasız liste */
ol { /* Sıralı liste */
  list-style: none; /* Liste stili yok */
  margin: 0; /* Dış boşluk sıfır */
  padding: 0; /* İç boşluk sıfır */
} /* Liste elemanları sonu */

hr { /* Yatay çizgi elemanı */
  height: 0; /* Yükseklik sıfır */
  color: inherit; /* Renk miras alınır */
  border-top-width: 1px; /* Üst kenarlık 1px */
} /* Yatay çizgi sonu */

/* ================================================================== */
/* BÖLÜM 2: ÖZEL CSS DEĞİŞKENLERİ (Custom Properties)               */
/* Hultem marka renk paleti değişken olarak tanımlanır                 */
/* ================================================================== */
:root { /* Kök eleman - global CSS değişkenleri */
  --color-cyan-100: #cffafe; /* Açık cyan değişkeni */
  --color-cyan-600: #0891b2; /* Ana cyan değişkeni */
  --color-cyan-700: #0e7490; /* Koyu cyan değişkeni */
  --color-orange-500: #f97316; /* Ana turuncu değişkeni */
  --color-orange-600: #ea580c; /* Koyu turuncu değişkeni */
  --color-slate-50: #f8fafc; /* En açık gri değişkeni */
  --color-slate-100: #f1f5f9; /* Çok açık gri değişkeni */
  --color-slate-200: #e2e8f0; /* Açık gri değişkeni */
  --color-slate-300: #cbd5e8; /* Orta açık gri değişkeni */
  --color-slate-400: #94a3b8; /* Orta gri değişkeni */
  --color-slate-500: #64748b; /* Orta koyu gri değişkeni */
  --color-slate-600: #475569; /* Koyu gri değişkeni */
  --color-slate-700: #334155; /* Daha koyu gri değişkeni */
  --color-slate-800: #1e293b; /* Çok koyu gri değişkeni */
  --color-slate-900: #0f172a; /* En koyu gri değişkeni */
  --color-white: #ffffff; /* Beyaz renk değişkeni */
} /* Kök eleman CSS değişkenleri sonu */

/* ================================================================== */
/* BÖLÜM 3: TEMEL STİLLER (Base Styles)                              */
/* HTML elemanlarının varsayılan görünümleri                           */
/* ================================================================== */
/* Temel stiller BÖLÜM 1'de zaten tanımlandı */
/* Bu bölüm ek temel stil geçersiz kılmaları içerir */

/* ================================================================== */
/* BÖLÜM 4: DÜZEN YARDIMCILARI (Layout Utilities)                    */
/* Flexbox, Grid ve görüntüleme yardımcı sınıfları                    */
/* ================================================================== */
.flex { display: flex; } /* Esnek kutu düzeni etkinleştir */
.inline-flex { display: inline-flex; } /* Satır içi esnek kutu düzeni */
.block { display: block; } /* Blok düzen */
.inline-block { display: inline-block; } /* Satır içi blok düzen */
.grid { display: grid; } /* Izgara düzeni etkinleştir */
.hidden { display: none; } /* Elemanı gizle */

.flex-col { flex-direction: column; } /* Esnek kutu dikey yön */
.flex-row { flex-direction: row; } /* Esnek kutu yatay yön */
.flex-wrap { flex-wrap: wrap; } /* Esnek kutu satır kaydırma */
.flex-grow { flex-grow: 1; } /* Esnek büyüme faktörü 1 */
.flex-shrink-0 { flex-shrink: 0; } /* Esnek küçülme engellendi */
.flex-1 { flex: 1 1 0%; } /* Esnek öge: eşit dağılım */

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } /* Izgara 1 sütun */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Izgara 2 sütun */
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Izgara 3 sütun */
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Izgara 4 sütun */

.gap-2 { gap: 0.5rem; } /* Izgara/flex boşluğu 0.5rem */
.gap-3 { gap: 0.75rem; } /* Izgara/flex boşluğu 0.75rem */
.gap-4 { gap: 1rem; } /* Izgara/flex boşluğu 1rem */
.gap-6 { gap: 1.5rem; } /* Izgara/flex boşluğu 1.5rem */
.gap-8 { gap: 2rem; } /* Izgara/flex boşluğu 2rem */

.items-center { align-items: center; } /* Dikey ortalama */
.items-start { align-items: flex-start; } /* Dikey üste hizala */
.items-end { align-items: flex-end; } /* Dikey alta hizala */
.items-stretch { align-items: stretch; } /* Dikey uzat */

.justify-center { justify-content: center; } /* Yatay ortalama */
.justify-between { justify-content: space-between; } /* Yatay eşit dağıt (uçlara) */
.justify-around { justify-content: space-around; } /* Yatay eşit dağıt (çevresine) */
.justify-start { justify-content: flex-start; } /* Yatay sola hizala */
.justify-end { justify-content: flex-end; } /* Yatay sağa hizala */

.self-center { align-self: center; } /* Kendini dikey ortala */
.self-start { align-self: flex-start; } /* Kendini üste hizala */

/* ================================================================== */
/* BÖLÜM 5: BOŞLUK YARDIMCILARI (Spacing Utilities)                  */
/* Padding, margin ve boşluk sınıfları                                */
/* ================================================================== */
/* İç boşluk (padding) sınıfları */
.p-2 { padding: 0.5rem; } /* Tüm yönlere 0.5rem iç boşluk */
.p-3 { padding: 0.75rem; } /* Tüm yönlere 0.75rem iç boşluk */
.p-4 { padding: 1rem; } /* Tüm yönlere 1rem iç boşluk */
.p-6 { padding: 1.5rem; } /* Tüm yönlere 1.5rem iç boşluk */
.p-8 { padding: 2rem; } /* Tüm yönlere 2rem iç boşluk */

.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } /* Yatay 0.5rem iç boşluk */
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } /* Yatay 0.75rem iç boşluk */
.px-4 { padding-left: 1rem; padding-right: 1rem; } /* Yatay 1rem iç boşluk */
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } /* Yatay 1.5rem iç boşluk */
.px-8 { padding-left: 2rem; padding-right: 2rem; } /* Yatay 2rem iç boşluk */

.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } /* Dikey 0.25rem iç boşluk */
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } /* Dikey 0.5rem iç boşluk */
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } /* Dikey 0.75rem iç boşluk */
.py-4 { padding-top: 1rem; padding-bottom: 1rem; } /* Dikey 1rem iç boşluk */
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } /* Dikey 1.5rem iç boşluk */
.py-8 { padding-top: 2rem; padding-bottom: 2rem; } /* Dikey 2rem iç boşluk */
.py-12 { padding-top: 3rem; padding-bottom: 3rem; } /* Dikey 3rem iç boşluk */
.py-16 { padding-top: 4rem; padding-bottom: 4rem; } /* Dikey 4rem iç boşluk */
.py-20 { padding-top: 5rem; padding-bottom: 5rem; } /* Dikey 5rem iç boşluk */
.py-32 { padding-top: 8rem; padding-bottom: 8rem; } /* Dikey 8rem iç boşluk */

.pt-2 { padding-top: 0.5rem; } /* Üst 0.5rem iç boşluk */
.pt-4 { padding-top: 1rem; } /* Üst 1rem iç boşluk */
.pt-8 { padding-top: 2rem; } /* Üst 2rem iç boşluk */
.pt-16 { padding-top: 4rem; } /* Üst 4rem iç boşluk */
.pt-20 { padding-top: 5rem; } /* Üst 5rem iç boşluk */

.pb-0 { padding-bottom: 0; } /* Alt iç boşluk sıfır */
.pb-4 { padding-bottom: 1rem; } /* Alt 1rem iç boşluk */
.pb-8 { padding-bottom: 2rem; } /* Alt 2rem iç boşluk */
.pb-20 { padding-bottom: 5rem; } /* Alt 5rem iç boşluk - mobil navbar boşluğu */

.pl-3 { padding-left: 0.75rem; } /* Sol 0.75rem iç boşluk */

/* Dış boşluk (margin) sınıfları */
.m-0 { margin: 0; } /* Tüm yönlere sıfır dış boşluk */

.mt-0 { margin-top: 0; } /* Üst dış boşluk sıfır */
.mt-1 { margin-top: 0.25rem; } /* Üst 0.25rem dış boşluk */
.mt-2 { margin-top: 0.5rem; } /* Üst 0.5rem dış boşluk */
.mt-3 { margin-top: 0.75rem; } /* Üst 0.75rem dış boşluk */
.mt-4 { margin-top: 1rem; } /* Üst 1rem dış boşluk */
.mt-6 { margin-top: 1.5rem; } /* Üst 1.5rem dış boşluk */
.mt-8 { margin-top: 2rem; } /* Üst 2rem dış boşluk */
.mt-16 { margin-top: 4rem; } /* Üst 4rem dış boşluk */
.mt-auto { margin-top: auto; } /* Üst otomatik dış boşluk - flexbox alta it */

.mb-0 { margin-bottom: 0; } /* Alt dış boşluk sıfır */
.mb-1 { margin-bottom: 0.25rem; } /* Alt 0.25rem dış boşluk */
.mb-2 { margin-bottom: 0.5rem; } /* Alt 0.5rem dış boşluk */
.mb-3 { margin-bottom: 0.75rem; } /* Alt 0.75rem dış boşluk */
.mb-4 { margin-bottom: 1rem; } /* Alt 1rem dış boşluk */
.mb-6 { margin-bottom: 1.5rem; } /* Alt 1.5rem dış boşluk */
.mb-8 { margin-bottom: 2rem; } /* Alt 2rem dış boşluk */
.mb-20 { margin-bottom: 5rem; } /* Alt 5rem dış boşluk */

.ml-1 { margin-left: 0.25rem; } /* Sol 0.25rem dış boşluk */
.ml-2 { margin-left: 0.5rem; } /* Sol 0.5rem dış boşluk */
.ml-auto { margin-left: auto; } /* Sol otomatik dış boşluk */

.mr-1 { margin-right: 0.25rem; } /* Sağ 0.25rem dış boşluk */
.mr-2 { margin-right: 0.5rem; } /* Sağ 0.5rem dış boşluk */

.mx-auto { margin-left: auto; margin-right: auto; } /* Yatay otomatik ortalama */

.-mt-1 { margin-top: -0.25rem; } /* Negatif üst dış boşluk */

/* Boşluk (space) yardımcıları - çocuk elemanlar arasında boşluk */
.space-x-1 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.25rem; } /* Yatay çocuk boşluğu 0.25rem */
.space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.5rem; } /* Yatay çocuk boşluğu 0.5rem */
.space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; } /* Yatay çocuk boşluğu 0.75rem */
.space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem; } /* Yatay çocuk boşluğu 1rem */
.space-x-6 > :not([hidden]) ~ :not([hidden]) { margin-left: 1.5rem; } /* Yatay çocuk boşluğu 1.5rem */
.space-x-8 > :not([hidden]) ~ :not([hidden]) { margin-left: 2rem; } /* Yatay çocuk boşluğu 2rem */

.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; } /* Dikey çocuk boşluğu 0.25rem */
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; } /* Dikey çocuk boşluğu 0.5rem */
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; } /* Dikey çocuk boşluğu 0.75rem */
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; } /* Dikey çocuk boşluğu 1rem */
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; } /* Dikey çocuk boşluğu 1.5rem */

/* ================================================================== */
/* BÖLÜM 6: TİPOGRAFİ YARDIMCILARI (Typography Utilities)            */
/* Yazı tipi boyutu, ağırlığı ve metin hizalama sınıfları             */
/* ================================================================== */
/* Yazı tipi boyutu sınıfları */
.text-xs { font-size: 0.75rem; line-height: 1rem; } /* Çok küçük metin */
.text-sm { font-size: 0.875rem; line-height: 1.25rem; } /* Küçük metin */
.text-base { font-size: 1rem; line-height: 1.5rem; } /* Normal boyut metin */
.text-lg { font-size: 1.125rem; line-height: 1.75rem; } /* Büyük metin */
.text-xl { font-size: 1.25rem; line-height: 1.75rem; } /* Ekstra büyük metin */
.text-2xl { font-size: 1.5rem; line-height: 2rem; } /* 2 kat büyük metin */
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; } /* 3 kat büyük metin */
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; } /* 4 kat büyük metin */
.text-5xl { font-size: 3rem; line-height: 1; } /* 5 kat büyük metin */
.text-6xl { font-size: 3.75rem; line-height: 1; } /* 6 kat büyük metin */

/* Yazı tipi ağırlığı sınıfları */
.font-light { font-weight: 300; } /* İnce yazı tipi */
.font-normal { font-weight: 400; } /* Normal yazı tipi */
.font-medium { font-weight: 500; } /* Orta kalın yazı tipi */
.font-semibold { font-weight: 600; } /* Yarı kalın yazı tipi */
.font-bold { font-weight: 700; } /* Kalın yazı tipi */
.font-extrabold { font-weight: 800; } /* Ekstra kalın yazı tipi */

/* Metin hizalama sınıfları */
.text-left { text-align: left; } /* Sola hizalı metin */
.text-center { text-align: center; } /* Ortalanmış metin */
.text-right { text-align: right; } /* Sağa hizalı metin */

/* Satır yüksekliği sınıfları */
.leading-none { line-height: 1; } /* Satır yüksekliği 1 */
.leading-tight { line-height: 1.25; } /* Sıkı satır yüksekliği */
.leading-snug { line-height: 1.375; } /* Dar satır yüksekliği */
.leading-normal { line-height: 1.5; } /* Normal satır yüksekliği */
.leading-relaxed { line-height: 1.625; } /* Rahat satır yüksekliği */
.leading-loose { line-height: 2; } /* Geniş satır yüksekliği */

/* Metin dekorasyon sınıfları */
.underline { text-decoration: underline; } /* Alt çizgi dekorasyon */
.no-underline { text-decoration: none; } /* Dekorasyon yok */
.line-through { text-decoration: line-through; } /* Üstü çizili */

/* Metin dönüşümü sınıfları */
.uppercase { text-transform: uppercase; } /* Büyük harfe dönüştür */
.lowercase { text-transform: lowercase; } /* Küçük harfe dönüştür */
.capitalize { text-transform: capitalize; } /* İlk harfi büyüt */

/* Metin taşma sınıfları */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Metin taşmasını üç nokta ile kes */
.whitespace-nowrap { white-space: nowrap; } /* Satır kaydırma yok */

/* Harf aralığı sınıfları */
.tracking-tight { letter-spacing: -0.025em; } /* Dar harf aralığı */
.tracking-wide { letter-spacing: 0.025em; } /* Geniş harf aralığı */
.tracking-wider { letter-spacing: 0.05em; } /* Daha geniş harf aralığı */

/* ================================================================== */
/* BÖLÜM 7: RENK YARDIMCILARI (Color Utilities)                      */
/* Arka plan, metin ve kenarlık renk sınıfları                         */
/* ================================================================== */
/* Arka plan renkleri */
.bg-white { background-color: #ffffff; } /* Beyaz arka plan */
.bg-transparent { background-color: transparent; } /* Şeffaf arka plan */
.bg-cyan-100 { background-color: #cffafe; } /* Açık cyan arka plan */
.bg-cyan-600 { background-color: #0891b2; } /* Ana cyan arka plan */
.bg-cyan-700 { background-color: #0e7490; } /* Koyu cyan arka plan */
.bg-orange-500 { background-color: #f97316; } /* Ana turuncu arka plan */
.bg-orange-600 { background-color: #ea580c; } /* Koyu turuncu arka plan */
.bg-slate-50 { background-color: #f8fafc; } /* En açık gri arka plan */
.bg-slate-100 { background-color: #f1f5f9; } /* Çok açık gri arka plan */
.bg-slate-200 { background-color: #e2e8f0; } /* Açık gri arka plan */
.bg-slate-800 { background-color: #1e293b; } /* Çok koyu gri arka plan */
.bg-slate-900 { background-color: #0f172a; } /* En koyu gri arka plan */

/* Metin renkleri */
.text-white { color: #ffffff; } /* Beyaz metin */
.text-cyan-100 { color: #cffafe; } /* Açık cyan metin */
.text-cyan-600 { color: #0891b2; } /* Ana cyan metin */
.text-cyan-700 { color: #0e7490; } /* Koyu cyan metin */
.text-orange-500 { color: #f97316; } /* Ana turuncu metin */
.text-orange-600 { color: #ea580c; } /* Koyu turuncu metin */
.text-slate-300 { color: #cbd5e8; } /* Açık gri metin */
.text-slate-400 { color: #94a3b8; } /* Orta gri metin */
.text-slate-500 { color: #64748b; } /* Orta koyu gri metin */
.text-slate-600 { color: #475569; } /* Koyu gri metin */
.text-slate-700 { color: #334155; } /* Daha koyu gri metin */
.text-slate-800 { color: #1e293b; } /* Çok koyu gri metin */
.text-slate-900 { color: #0f172a; } /* En koyu gri metin */

/* Kenarlık renkleri */
.border-slate-200 { border-color: #e2e8f0; } /* Açık gri kenarlık rengi */
.border-slate-300 { border-color: #cbd5e8; } /* Orta gri kenarlık rengi */
.border-slate-700 { border-color: #334155; } /* Koyu gri kenarlık rengi */
.border-cyan-600 { border-color: #0891b2; } /* Cyan kenarlık rengi */
.border-orange-500 { border-color: #f97316; } /* Turuncu kenarlık rengi */
.border-transparent { border-color: transparent; } /* Şeffaf kenarlık rengi */

/* Opaklık sınıfları */
.opacity-0 { opacity: 0; } /* Tamamen şeffaf */
.opacity-50 { opacity: 0.5; } /* Yarı şeffaf */
.opacity-75 { opacity: 0.75; } /* %75 opak */
.opacity-80 { opacity: 0.8; } /* %80 opak */
.opacity-90 { opacity: 0.9; } /* %90 opak */
.opacity-100 { opacity: 1; } /* Tamamen opak */

/* ================================================================== */
/* BÖLÜM 8: BOYUT YARDIMCILARI (Sizing Utilities)                    */
/* Genişlik ve yükseklik sınıfları                                     */
/* ================================================================== */
/* Genişlik sınıfları */
.w-3 { width: 0.75rem; } /* Genişlik 0.75rem */
.w-4 { width: 1rem; } /* Genişlik 1rem */
.w-5 { width: 1.25rem; } /* Genişlik 1.25rem */
.w-6 { width: 1.5rem; } /* Genişlik 1.5rem */
.w-8 { width: 2rem; } /* Genişlik 2rem */
.w-10 { width: 2.5rem; } /* Genişlik 2.5rem */
.w-12 { width: 3rem; } /* Genişlik 3rem */
.w-16 { width: 4rem; } /* Genişlik 4rem */
.w-20 { width: 5rem; } /* Genişlik 5rem */
.w-24 { width: 6rem; } /* Genişlik 6rem */
.w-32 { width: 8rem; } /* Genişlik 8rem */
.w-48 { width: 12rem; } /* Genişlik 12rem */
.w-64 { width: 16rem; } /* Genişlik 16rem */
.w-full { width: 100%; } /* Tam genişlik */
.w-auto { width: auto; } /* Otomatik genişlik */
.w-1\/2 { width: 50%; } /* Yarı genişlik */
.w-1\/3 { width: 33.333333%; } /* Üçte bir genişlik */
.w-2\/3 { width: 66.666667%; } /* Üçte iki genişlik */

/* Yükseklik sınıfları */
.h-1 { height: 0.25rem; } /* Yükseklik 0.25rem */
.h-3 { height: 0.75rem; } /* Yükseklik 0.75rem */
.h-4 { height: 1rem; } /* Yükseklik 1rem */
.h-5 { height: 1.25rem; } /* Yükseklik 1.25rem */
.h-6 { height: 1.5rem; } /* Yükseklik 1.5rem */
.h-8 { height: 2rem; } /* Yükseklik 2rem */
.h-10 { height: 2.5rem; } /* Yükseklik 2.5rem */
.h-12 { height: 3rem; } /* Yükseklik 3rem */
.h-16 { height: 4rem; } /* Yükseklik 4rem */
.h-20 { height: 5rem; } /* Yükseklik 5rem */
.h-48 { height: 12rem; } /* Yükseklik 12rem */
.h-64 { height: 16rem; } /* Yükseklik 16rem */
.h-full { height: 100%; } /* Tam yükseklik */
.h-auto { height: auto; } /* Otomatik yükseklik */
.h-screen { height: 100vh; } /* Ekran yüksekliği */

/* Maksimum genişlik sınıfları */
.max-w-xs { max-width: 20rem; } /* Maks genişlik 20rem */
.max-w-sm { max-width: 24rem; } /* Maks genişlik 24rem */
.max-w-md { max-width: 28rem; } /* Maks genişlik 28rem */
.max-w-lg { max-width: 32rem; } /* Maks genişlik 32rem */
.max-w-xl { max-width: 36rem; } /* Maks genişlik 36rem */
.max-w-2xl { max-width: 42rem; } /* Maks genişlik 42rem */
.max-w-4xl { max-width: 56rem; } /* Maks genişlik 56rem */
.max-w-6xl { max-width: 72rem; } /* Maks genişlik 72rem */
.max-w-7xl { max-width: 80rem; } /* Maks genişlik 80rem */
.max-w-none { max-width: none; } /* Maks genişlik sınırsız */

/* Minimum yükseklik sınıfları */
.min-h-screen { min-height: 100vh; } /* Minimum ekran yüksekliği */
.min-h-0 { min-height: 0; } /* Minimum yükseklik sıfır */

/* ================================================================== */
/* BÖLÜM 9: KONUM YARDIMCILARI (Position Utilities)                  */
/* Konumlandırma ve z-indeks sınıfları                                 */
/* ================================================================== */
.static { position: static; } /* Statik konum (varsayılan) */
.fixed { position: fixed; } /* Sabit konum - ekrana göre */
.absolute { position: absolute; } /* Mutlak konum - en yakın göreceli ataya göre */
.relative { position: relative; } /* Göreceli konum */
.sticky { position: sticky; } /* Yapışkan konum - kaydırmada sabitlenir */

.top-0 { top: 0; } /* Üstten sıfır mesafe */
.bottom-0 { bottom: 0; } /* Alttan sıfır mesafe */
.left-0 { left: 0; } /* Soldan sıfır mesafe */
.right-0 { right: 0; } /* Sağdan sıfır mesafe */
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; } /* Tüm yönlerden sıfır mesafe */
.inset-x-0 { left: 0; right: 0; } /* Yatay yönlerden sıfır mesafe */
.inset-y-0 { top: 0; bottom: 0; } /* Dikey yönlerden sıfır mesafe */

.-top-1 { top: -0.25rem; } /* Negatif üst mesafe */
.-right-1 { right: -0.25rem; } /* Negatif sağ mesafe */
.-top-2 { top: -0.5rem; } /* Negatif üst mesafe 0.5rem */
.-right-2 { right: -0.5rem; } /* Negatif sağ mesafe 0.5rem */

.left-1\/2 { left: 50%; } /* Soldan %50 mesafe - ortalama için */

.z-0 { z-index: 0; } /* Z-indeks 0 */
.z-10 { z-index: 10; } /* Z-indeks 10 */
.z-20 { z-index: 20; } /* Z-indeks 20 */
.z-30 { z-index: 30; } /* Z-indeks 30 */
.z-40 { z-index: 40; } /* Z-indeks 40 */
.z-50 { z-index: 50; } /* Z-indeks 50 - en üst katman */

/* ================================================================== */
/* BÖLÜM 10: KENARLIK VE YUVARLAMA (Border & Radius)                 */
/* Kenarlık, köşe yuvarlama ve gölge sınıfları                        */
/* ================================================================== */
/* Kenarlık sınıfları */
.border { border-width: 1px; } /* 1px kenarlık */
.border-2 { border-width: 2px; } /* 2px kenarlık */
.border-t { border-top-width: 1px; } /* Üst kenarlık 1px */
.border-b { border-bottom-width: 1px; } /* Alt kenarlık 1px */
.border-l { border-left-width: 1px; } /* Sol kenarlık 1px */
.border-r { border-right-width: 1px; } /* Sağ kenarlık 1px */

/* Köşe yuvarlama sınıfları */
.rounded-none { border-radius: 0; } /* Yuvarlama yok */
.rounded-sm { border-radius: 0.125rem; } /* Küçük yuvarlama */
.rounded { border-radius: 0.25rem; } /* Normal yuvarlama */
.rounded-md { border-radius: 0.375rem; } /* Orta yuvarlama */
.rounded-lg { border-radius: 0.5rem; } /* Büyük yuvarlama */
.rounded-xl { border-radius: 0.75rem; } /* Ekstra büyük yuvarlama */
.rounded-2xl { border-radius: 1rem; } /* 2 kat ekstra yuvarlama */
.rounded-full { border-radius: 9999px; } /* Tam yuvarlatma (daire/hap) */

.rounded-t-lg { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } /* Üst köşeler büyük yuvarlama */
.rounded-b-lg { border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } /* Alt köşeler büyük yuvarlama */

/* Gölge sınıfları */
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); } /* Küçük gölge */
.shadow { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1); } /* Normal gölge */
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); } /* Orta gölge */
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); } /* Büyük gölge */
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); } /* Ekstra büyük gölge */
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); } /* Çift ekstra büyük gölge */
.shadow-none { box-shadow: none; } /* Gölge yok */

/* ================================================================== */
/* BÖLÜM 11: GEÇİŞ ANİMASYONLARI (Transition Utilities)             */
/* CSS geçiş efektleri ve süre sınıfları                               */
/* ================================================================== */
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } /* Tüm özellikler için geçiş */
.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } /* Yaygın özellikler için geçiş */
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } /* Renk geçişi */
.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } /* Opaklık geçişi */
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } /* Dönüşüm geçişi */

.duration-100 { transition-duration: 100ms; } /* Geçiş süresi 100ms */
.duration-150 { transition-duration: 150ms; } /* Geçiş süresi 150ms */
.duration-200 { transition-duration: 200ms; } /* Geçiş süresi 200ms */
.duration-300 { transition-duration: 300ms; } /* Geçiş süresi 300ms */
.duration-400 { transition-duration: 400ms; } /* Geçiş süresi 400ms */
.duration-500 { transition-duration: 500ms; } /* Geçiş süresi 500ms */
.duration-700 { transition-duration: 700ms; } /* Geçiş süresi 700ms */
.duration-1000 { transition-duration: 1000ms; } /* Geçiş süresi 1000ms */

.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); } /* Hızlanan giriş */
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } /* Yavaşlayan çıkış */
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } /* Yumuşak giriş-çıkış zamanlama */

/* ================================================================== */
/* BÖLÜM 12: HOVER DURUMLARI (Hover States)                          */
/* Fare üzerine gelme durumlarında uygulanan stiller                   */
/* ================================================================== */
.hover\:text-white:hover { color: #ffffff; } /* Hover'da beyaz metin */
.hover\:text-cyan-600:hover { color: #0891b2; } /* Hover'da cyan metin */
.hover\:text-cyan-700:hover { color: #0e7490; } /* Hover'da koyu cyan metin */
.hover\:text-orange-500:hover { color: #f97316; } /* Hover'da turuncu metin */
.hover\:text-orange-600:hover { color: #ea580c; } /* Hover'da koyu turuncu metin */
.hover\:text-slate-600:hover { color: #475569; } /* Hover'da koyu gri metin */
.hover\:text-slate-900:hover { color: #0f172a; } /* Hover'da en koyu metin */

.hover\:bg-white:hover { background-color: #ffffff; } /* Hover'da beyaz arka plan */
.hover\:bg-cyan-600:hover { background-color: #0891b2; } /* Hover'da cyan arka plan */
.hover\:bg-cyan-700:hover { background-color: #0e7490; } /* Hover'da koyu cyan arka plan */
.hover\:bg-orange-600:hover { background-color: #ea580c; } /* Hover'da koyu turuncu arka plan */
.hover\:bg-slate-50:hover { background-color: #f8fafc; } /* Hover'da açık gri arka plan */
.hover\:bg-slate-100:hover { background-color: #f1f5f9; } /* Hover'da çok açık gri arka plan */
.hover\:bg-slate-700:hover { background-color: #334155; } /* Hover'da koyu gri arka plan */

.hover\:border-cyan-600:hover { border-color: #0891b2; } /* Hover'da cyan kenarlık */

.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); } /* Hover'da orta gölge */
.hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); } /* Hover'da büyük gölge */
.hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); } /* Hover'da ekstra büyük gölge */

.hover\:underline:hover { text-decoration: underline; } /* Hover'da alt çizgi */
.hover\:no-underline:hover { text-decoration: none; } /* Hover'da çizgi yok */

.hover\:opacity-80:hover { opacity: 0.8; } /* Hover'da %80 opaklık */
.hover\:opacity-100:hover { opacity: 1; } /* Hover'da tam opaklık */

.hover\:scale-105:hover { transform: scale(1.05); } /* Hover'da %105 büyütme */

/* ================================================================== */
/* BÖLÜM 13: GRADYAN YARDIMCILARI (Gradient Utilities)                */
/* Arkaplan gradyan (renk geçişi) sınıfları                            */
/* ================================================================== */
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); } /* Sağa doğru gradyan */
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); } /* Sağ alta doğru gradyan */
.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); } /* Aşağı doğru gradyan */
.bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); } /* Yukarı doğru gradyan */

.from-cyan-600 { --tw-gradient-from: #0891b2; --tw-gradient-to: rgba(8,145,178,0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } /* Gradyan başlangıcı cyan-600 */
.from-cyan-700 { --tw-gradient-from: #0e7490; --tw-gradient-to: rgba(14,116,144,0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } /* Gradyan başlangıcı cyan-700 */
.from-slate-900 { --tw-gradient-from: #0f172a; --tw-gradient-to: rgba(15,23,42,0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } /* Gradyan başlangıcı slate-900 */

.to-cyan-700 { --tw-gradient-to: #0e7490; } /* Gradyan bitişi cyan-700 */
.to-cyan-800 { --tw-gradient-to: #155e75; } /* Gradyan bitişi cyan-800 */
.to-slate-800 { --tw-gradient-to: #1e293b; } /* Gradyan bitişi slate-800 */

.via-cyan-600 { --tw-gradient-to: rgba(8,145,178,0); --tw-gradient-stops: var(--tw-gradient-from), #0891b2, var(--tw-gradient-to); } /* Gradyan ara renk cyan-600 */

/* ================================================================== */
/* BÖLÜM 14: DUYARLI TASARIM - md: (768px ve üzeri)                   */
/* Orta ekran boyutu (tablet) medya sorguları                          */
/* ================================================================== */
@media (min-width: 768px) { /* Minimum genişlik 768px - tablet ve üzeri */
  .md\:block { display: block; } /* Tablet'te blok göster */
  .md\:hidden { display: none; } /* Tablet'te gizle */
  .md\:flex { display: flex; } /* Tablet'te esnek kutu */
  .md\:inline-flex { display: inline-flex; } /* Tablet'te satır içi esnek */
  .md\:grid { display: grid; } /* Tablet'te ızgara */

  .md\:flex-row { flex-direction: row; } /* Tablet'te yatay yön */
  .md\:items-center { align-items: center; } /* Tablet'te dikey ortala */
  .md\:justify-between { justify-content: space-between; } /* Tablet'te uçlara dağıt */

  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Tablet'te 2 sütun ızgara */
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Tablet'te 3 sütun ızgara */
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Tablet'te 4 sütun ızgara */

  .md\:gap-6 { gap: 1.5rem; } /* Tablet'te 1.5rem boşluk */
  .md\:gap-8 { gap: 2rem; } /* Tablet'te 2rem boşluk */

  .md\:text-lg { font-size: 1.125rem; line-height: 1.75rem; } /* Tablet'te büyük metin */
  .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; } /* Tablet'te ekstra büyük metin */
  .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; } /* Tablet'te 2xl metin */
  .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; } /* Tablet'te 3xl metin */
  .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; } /* Tablet'te 4xl metin */
  .md\:text-5xl { font-size: 3rem; line-height: 1; } /* Tablet'te 5xl metin */
  .md\:text-6xl { font-size: 3.75rem; line-height: 1; } /* Tablet'te 6xl metin */

  .md\:py-16 { padding-top: 4rem; padding-bottom: 4rem; } /* Tablet'te dikey 4rem iç boşluk */
  .md\:py-20 { padding-top: 5rem; padding-bottom: 5rem; } /* Tablet'te dikey 5rem iç boşluk */
  .md\:py-32 { padding-top: 8rem; padding-bottom: 8rem; } /* Tablet'te dikey 8rem iç boşluk */
  .md\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } /* Tablet'te yatay 1.5rem iç boşluk */
  .md\:px-8 { padding-left: 2rem; padding-right: 2rem; } /* Tablet'te yatay 2rem iç boşluk */
  .md\:pb-0 { padding-bottom: 0; } /* Tablet'te alt iç boşluk sıfır */
  .md\:pt-0 { padding-top: 0; } /* Tablet'te üst iç boşluk sıfır */

  .md\:mb-0 { margin-bottom: 0; } /* Tablet'te alt dış boşluk sıfır */
  .md\:mt-0 { margin-top: 0; } /* Tablet'te üst dış boşluk sıfır */
  .md\:mr-4 { margin-right: 1rem; } /* Tablet'te sağ 1rem dış boşluk */

  .md\:w-1\/2 { width: 50%; } /* Tablet'te yarı genişlik */
  .md\:w-1\/3 { width: 33.333333%; } /* Tablet'te üçte bir genişlik */
  .md\:w-auto { width: auto; } /* Tablet'te otomatik genişlik */

  .md\:space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem; } /* Tablet'te yatay çocuk boşluğu */
  .md\:space-x-6 > :not([hidden]) ~ :not([hidden]) { margin-left: 1.5rem; } /* Tablet'te yatay çocuk boşluğu */
  .md\:space-x-8 > :not([hidden]) ~ :not([hidden]) { margin-left: 2rem; } /* Tablet'te yatay çocuk boşluğu */
  .md\:space-y-0 > :not([hidden]) ~ :not([hidden]) { margin-top: 0; } /* Tablet'te dikey çocuk boşluğu sıfır */

  .md\:text-left { text-align: left; } /* Tablet'te sola hizalı */
  .md\:text-center { text-align: center; } /* Tablet'te ortalanmış */

  .md\:max-w-none { max-width: none; } /* Tablet'te maks genişlik sınırsız */
} /* Tablet medya sorgusu sonu */

/* ================================================================== */
/* BÖLÜM 15: DUYARLI TASARIM - lg: (1024px ve üzeri)                  */
/* Büyük ekran boyutu (masaüstü) medya sorguları                       */
/* ================================================================== */
@media (min-width: 1024px) { /* Minimum genişlik 1024px - masaüstü ve üzeri */
  .lg\:block { display: block; } /* Masaüstünde blok göster */
  .lg\:hidden { display: none; } /* Masaüstünde gizle */
  .lg\:flex { display: flex; } /* Masaüstünde esnek kutu */
  .lg\:grid { display: grid; } /* Masaüstünde ızgara */

  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Masaüstünde 3 sütun ızgara */
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Masaüstünde 4 sütun ızgara */
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } /* Masaüstünde 5 sütun ızgara */

  .lg\:gap-8 { gap: 2rem; } /* Masaüstünde 2rem boşluk */
  .lg\:gap-12 { gap: 3rem; } /* Masaüstünde 3rem boşluk */

  .lg\:text-xl { font-size: 1.25rem; line-height: 1.75rem; } /* Masaüstünde xl metin */
  .lg\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; } /* Masaüstünde 4xl metin */

  .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; } /* Masaüstünde yatay 2rem iç boşluk */
  .lg\:py-24 { padding-top: 6rem; padding-bottom: 6rem; } /* Masaüstünde dikey 6rem iç boşluk */

  .lg\:w-1\/3 { width: 33.333333%; } /* Masaüstünde üçte bir genişlik */
  .lg\:w-1\/4 { width: 25%; } /* Masaüstünde çeyrek genişlik */
  .lg\:w-2\/3 { width: 66.666667%; } /* Masaüstünde üçte iki genişlik */

  .lg\:max-w-6xl { max-width: 72rem; } /* Masaüstünde maks genişlik 72rem */
} /* Masaüstü medya sorgusu sonu */

/* ================================================================== */
/* BÖLÜM 16: TAŞMA YARDIMCILARI (Overflow Utilities)                  */
/* İçerik taşma kontrol sınıfları                                      */
/* ================================================================== */
.overflow-hidden { overflow: hidden; } /* Taşan içeriği gizle */
.overflow-auto { overflow: auto; } /* Taşma olursa kaydırma çubuğu göster */
.overflow-x-auto { overflow-x: auto; } /* Yatay taşmada kaydırma çubuğu */
.overflow-y-auto { overflow-y: auto; } /* Dikey taşmada kaydırma çubuğu */
.overflow-x-hidden { overflow-x: hidden; } /* Yatay taşmayı gizle */
.overflow-visible { overflow: visible; } /* Taşan içerik görünür */

/* ================================================================== */
/* BÖLÜM 17: DÖNÜŞÜM YARDIMCILARI (Transform Utilities)              */
/* CSS transform sınıfları                                              */
/* ================================================================== */
.transform { transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)); } /* Tam dönüşüm değişken desteği */

.translate-x-0 { transform: translateX(0); } /* Yatay kayma sıfır */
.translate-x-full { transform: translateX(100%); } /* Yatay tam sağa kayma */
.-translate-x-full { transform: translateX(-100%); } /* Yatay tam sola kayma */
.translate-y-0 { transform: translateY(0); } /* Dikey kayma sıfır */
.translate-y-full { transform: translateY(100%); } /* Dikey tam aşağı kayma */
.-translate-y-full { transform: translateY(-100%); } /* Dikey tam yukarı kayma */
.-translate-x-1\/2 { transform: translateX(-50%); } /* Yatay geri %50 kayma - ortalama için */
.-translate-y-1 { transform: translateY(-0.25rem); } /* Yukarı 0.25rem kayma */
.-translate-y-1\/2 { transform: translateY(-50%); } /* Dikey geri %50 kayma - ortalama için */

.hover\:-translate-y-1:hover { transform: translateY(-0.25rem); } /* Hover'da yukarı kayma efekti */
.hover\:-translate-y-2:hover { transform: translateY(-0.5rem); } /* Hover'da daha fazla yukarı kayma */

.rotate-0 { transform: rotate(0deg); } /* Döndürme sıfır */
.rotate-45 { transform: rotate(45deg); } /* 45 derece döndürme */
.rotate-90 { transform: rotate(90deg); } /* 90 derece döndürme */
.rotate-180 { transform: rotate(180deg); } /* 180 derece döndürme */

.scale-90 { transform: scale(0.9); } /* Ölçek %90 */
.scale-95 { transform: scale(0.95); } /* Ölçek %95 */
.scale-100 { transform: scale(1); } /* Ölçek %100 (normal) */
.scale-105 { transform: scale(1.05); } /* Ölçek %105 */
.scale-110 { transform: scale(1.1); } /* Ölçek %110 */

/* ================================================================== */
/* BÖLÜM 18: BİLEŞEN SINIFLARI (Component Classes)                   */
/* Hultem markasına özel önceden tanımlanmış bileşenler                 */
/* ================================================================== */

/* Birincil buton - Ana eylem butonu */
.btn-primary { /* Birincil buton sınıfı */
  display: inline-flex; /* Satır içi esnek kutu */
  align-items: center; /* Dikey ortalama */
  justify-content: center; /* Yatay ortalama */
  padding: 0.75rem 1.5rem; /* Dikey 0.75rem, yatay 1.5rem iç boşluk */
  background-color: #0891b2; /* Cyan-600 arka plan rengi */
  color: #ffffff; /* Beyaz metin rengi */
  font-weight: 600; /* Yarı kalın yazı tipi */
  border-radius: 0.5rem; /* Büyük yuvarlatılmış köşeler */
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); /* Tüm özellikler 200ms geçiş */
  cursor: pointer; /* İmleç el işareti */
  user-select: none; /* Metin seçimi engellendi */
  border: none; /* Kenarlık yok */
  text-decoration: none; /* Metin dekorasyonu yok */
} /* Birincil buton sonu */

.btn-primary:hover { /* Birincil buton hover durumu */
  background-color: #0e7490; /* Koyu cyan arka plan */
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); /* Büyük gölge */
} /* Birincil buton hover sonu */

/* Vurgu butonu - Dikkat çekici eylem butonu */
.btn-accent { /* Vurgu buton sınıfı */
  display: inline-flex; /* Satır içi esnek kutu */
  align-items: center; /* Dikey ortalama */
  justify-content: center; /* Yatay ortalama */
  padding: 0.75rem 1.5rem; /* Dikey 0.75rem, yatay 1.5rem iç boşluk */
  background-color: #f97316; /* Turuncu-500 arka plan rengi */
  color: #ffffff; /* Beyaz metin rengi */
  font-weight: 600; /* Yarı kalın yazı tipi */
  border-radius: 0.5rem; /* Büyük yuvarlatılmış köşeler */
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); /* Tüm özellikler 200ms geçiş */
  cursor: pointer; /* İmleç el işareti */
  user-select: none; /* Metin seçimi engellendi */
  border: none; /* Kenarlık yok */
  text-decoration: none; /* Metin dekorasyonu yok */
} /* Vurgu buton sonu */

.btn-accent:hover { /* Vurgu buton hover durumu */
  background-color: #ea580c; /* Koyu turuncu arka plan */
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); /* Büyük gölge */
} /* Vurgu buton hover sonu */

/* Çerçeve butonu - Kenarlıklı, şeffaf buton */
.btn-outline { /* Çerçeve buton sınıfı */
  display: inline-flex; /* Satır içi esnek kutu */
  align-items: center; /* Dikey ortalama */
  justify-content: center; /* Yatay ortalama */
  padding: 0.75rem 1.5rem; /* Dikey 0.75rem, yatay 1.5rem iç boşluk */
  border: 2px solid #0891b2; /* 2px cyan kenarlık */
  color: #0891b2; /* Cyan metin rengi */
  background-color: transparent; /* Şeffaf arka plan */
  font-weight: 600; /* Yarı kalın yazı tipi */
  border-radius: 0.5rem; /* Büyük yuvarlatılmış köşeler */
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); /* Tüm özellikler 200ms geçiş */
  cursor: pointer; /* İmleç el işareti */
  user-select: none; /* Metin seçimi engellendi */
  text-decoration: none; /* Metin dekorasyonu yok */
} /* Çerçeve buton sonu */

.btn-outline:hover { /* Çerçeve buton hover durumu */
  background-color: #0891b2; /* Cyan arka plan */
  color: #ffffff; /* Beyaz metin */
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); /* Büyük gölge */
} /* Çerçeve buton hover sonu */

/* Kart bileşeni - İçerik kartları */
.card { /* Kart bileşeni sınıfı */
  background-color: #ffffff; /* Beyaz arka plan */
  border-radius: 0.75rem; /* Ekstra büyük yuvarlatılmış köşeler */
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); /* Orta gölge */
  overflow: hidden; /* Taşan içerik gizlenir */
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); /* Tüm özellikler 300ms geçiş */
} /* Kart bileşeni sonu */

.card:hover { /* Kart hover durumu */
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); /* Ekstra büyük gölge */
  transform: translateY(-0.25rem); /* Yukarı 4px kayma efekti */
} /* Kart hover sonu */

/* Bölüm başlığı - Sayfa bölüm başlıkları */
.section-title { /* Bölüm başlığı sınıfı */
  font-size: 1.875rem; /* 3xl yazı tipi boyutu */
  line-height: 2.25rem; /* 3xl satır yüksekliği */
  font-weight: 700; /* Kalın yazı tipi */
  color: #0f172a; /* En koyu gri metin - slate-900 */
  text-align: center; /* Ortalanmış metin */
  margin-bottom: 2rem; /* Alt 2rem dış boşluk */
  position: relative; /* Göreceli konum - ::after için */
  padding-bottom: 1rem; /* Alt 1rem iç boşluk - çizgi alanı */
} /* Bölüm başlığı sonu */

.section-title::after { /* Bölüm başlığı alt çizgi sözde elemanı */
  content: ''; /* Boş içerik - sözde eleman oluşturur */
  position: absolute; /* Mutlak konumlandırma */
  bottom: 0; /* Alt kenara yapıştır */
  left: 50%; /* Soldan %50 konumla */
  transform: translateX(-50%); /* Yatay ortalamak için geri kaydır */
  width: 4rem; /* Genişlik 4rem (64px) */
  height: 0.25rem; /* Yükseklik 0.25rem (4px) */
  background-color: #0891b2; /* Cyan-600 arka plan rengi */
  border-radius: 9999px; /* Tam yuvarlatılmış köşeler */
} /* Bölüm başlığı alt çizgi sonu */

/* Rozet bileşeni - Etiket ve durum göstergesi */
.badge { /* Rozet bileşeni sınıfı */
  display: inline-flex; /* Satır içi esnek kutu */
  align-items: center; /* Dikey ortalama */
  padding: 0.25rem 0.75rem; /* Dikey 0.25rem, yatay 0.75rem iç boşluk */
  font-size: 0.75rem; /* Küçük yazı tipi boyutu */
  font-weight: 600; /* Yarı kalın yazı tipi */
  border-radius: 9999px; /* Tam yuvarlatılmış köşeler (hap şekli) */
  background-color: #cffafe; /* Açık cyan arka plan - cyan-100 */
  color: #0891b2; /* Cyan metin rengi - cyan-600 */
} /* Rozet bileşeni sonu */

/* ================================================================== */
/* BÖLÜM 19: SVG VE İKON YARDIMCILARI (Fill/Stroke Utilities)        */
/* SVG dolgu ve çizgi stil sınıfları                                   */
/* ================================================================== */
.fill-none { fill: none; } /* SVG dolgu yok */
.fill-current { fill: currentColor; } /* SVG dolgu mevcut renkle */
.fill-white { fill: #ffffff; } /* SVG dolgu beyaz */
.fill-cyan-600 { fill: #0891b2; } /* SVG dolgu cyan-600 */

.stroke-current { stroke: currentColor; } /* SVG çizgi mevcut renkle */
.stroke-1 { stroke-width: 1; } /* SVG çizgi kalınlığı 1 */
.stroke-2 { stroke-width: 2; } /* SVG çizgi kalınlığı 2 */
[stroke-width="2"] { stroke-width: 2; } /* SVG nitelik çizgi kalınlığı 2 */
[stroke-linecap="round"] { stroke-linecap: round; } /* SVG çizgi ucu yuvarlak */
[stroke-linejoin="round"] { stroke-linejoin: round; } /* SVG çizgi birleşimi yuvarlak */

/* ================================================================== */
/* BÖLÜM 20: ÇEŞİTLİ YARDIMCILAR (Miscellaneous Utilities)           */
/* İmleç, seçim, görünüm ve liste stil sınıfları                      */
/* ================================================================== */
.cursor-pointer { cursor: pointer; } /* İmleç el işareti - tıklanabilir */
.cursor-default { cursor: default; } /* Varsayılan imleç */
.cursor-not-allowed { cursor: not-allowed; } /* Yasak imleç - devre dışı */

.select-none { user-select: none; } /* Metin seçimi engellendi */
.select-all { user-select: all; } /* Tüm metin seçilebilir */

.appearance-none { appearance: none; -webkit-appearance: none; } /* Tarayıcı varsayılan görünümü kaldır */

.list-none { list-style: none; } /* Liste stili yok */
.list-disc { list-style: disc; } /* Diskli liste stili */

.outline-none { outline: none; } /* Dış çerçeve yok */
.focus\:outline-none:focus { outline: none; } /* Odakta dış çerçeve yok */
.focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(8,145,178,0.5); } /* Odakta 2px halka efekti */
.focus\:ring-cyan-600:focus { box-shadow: 0 0 0 3px rgba(8,145,178,0.4); } /* Odakta cyan halka */
.focus\:border-cyan-600:focus { border-color: #0891b2; } /* Odakta cyan kenarlık */

.pointer-events-none { pointer-events: none; } /* İşaretçi olaylarını devre dışı bırak */
.pointer-events-auto { pointer-events: auto; } /* İşaretçi olaylarını etkinleştir */

.resize-none { resize: none; } /* Yeniden boyutlandırma yok */

.object-cover { object-fit: cover; } /* Nesne sığdırma: kaplama */
.object-contain { object-fit: contain; } /* Nesne sığdırma: içerme */
.object-center { object-position: center; } /* Nesne konumu: merkez */

/* ================================================================== */
/* BÖLÜM 21: FLEXBOX ÖZEL YARDIMCILAR                                 */
/* mt-auto gibi özel flexbox konumlandırma sınıfları                   */
/* ================================================================== */
/* mt-auto BÖLÜM 5'te zaten tanımlandı */
/* Flexbox alt ögeleri aşağı itmek için kullanılır */
/* Örnek: Bir kart içinde butonu en alta itmek */

/* ================================================================== */
/* BÖLÜM 22: MOBİL NAVBAR BOŞLUĞU                                     */
/* pb-20 mobil alt navbar için gövde iç boşluğu                        */
/* ================================================================== */
/* pb-20 BÖLÜM 5'te zaten tanımlandı */
/* Mobil cihazlarda sabit alt navigasyon çubuğu olduğunda */
/* içeriğin arkasında kalmaması için alt boşluk ekler */

/* ================================================================== */
/* BÖLÜM 23: ALPINE.JS UYUMLULUĞU                                     */
/* x-show ve x-cloak Alpine.js direktifleri için stil desteği          */
/* ================================================================== */
[x-cloak] { display: none !important; } /* Alpine.js x-cloak: başlangıçta gizle, Alpine yüklenince göster */

/* Alpine.js geçiş sınıfları */
.x-transition\:enter { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } /* Alpine giriş geçişi */
.x-transition\:leave { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 200ms; } /* Alpine çıkış geçişi */

/* ================================================================== */
/* BÖLÜM 24: EK YARDIMCI SINIFLAR                                     */
/* Projenin farklı sayfalarında kullanılabilecek ek sınıflar            */
/* ================================================================== */
.container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } /* Kapsayıcı - otomatik ortalanmış */
@media (min-width: 640px) { .container { max-width: 640px; } } /* Kapsayıcı sm breakpoint */
@media (min-width: 768px) { .container { max-width: 768px; } } /* Kapsayıcı md breakpoint */
@media (min-width: 1024px) { .container { max-width: 1024px; } } /* Kapsayıcı lg breakpoint */
@media (min-width: 1280px) { .container { max-width: 1280px; } } /* Kapsayıcı xl breakpoint */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } /* Ekran okuyucu için görünmez metin */

.aspect-square { aspect-ratio: 1/1; } /* Kare en-boy oranı */
.aspect-video { aspect-ratio: 16/9; } /* Video en-boy oranı (16:9) */

/* Kaydırma çubuğu gizleme - özel kaydırma alanları için */
.scrollbar-hide::-webkit-scrollbar { display: none; } /* WebKit kaydırma çubuğu gizle */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } /* Firefox kaydırma çubuğu gizle */

/* Animasyon sınıfları */
.animate-spin { animation: spin 1s linear infinite; } /* Döndürme animasyonu */
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* Nabız animasyonu */
.animate-bounce { animation: bounce 1s infinite; } /* Zıplama animasyonu */

@keyframes spin { /* Döndürme animasyon kare tanımları */
  to { transform: rotate(360deg); } /* 360 derece döndür */
} /* Döndürme animasyonu sonu */

@keyframes pulse { /* Nabız animasyon kare tanımları */
  0%, 100% { opacity: 1; } /* Başlangıç ve bitiş tam opak */
  50% { opacity: 0.5; } /* Ortada yarı şeffaf */
} /* Nabız animasyonu sonu */

@keyframes bounce { /* Zıplama animasyon kare tanımları */
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } /* Yukarı konumda */
  50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } /* Aşağı konumda */
} /* Zıplama animasyonu sonu */

/* Arka plan boyut ve konum sınıfları */
.bg-cover { background-size: cover; } /* Arka plan kapla */
.bg-center { background-position: center; } /* Arka plan ortala */
.bg-no-repeat { background-repeat: no-repeat; } /* Arka plan tekrar etme */
.bg-fixed { background-attachment: fixed; } /* Arka plan sabit (parallax) */

/* Metin gölge sınıfları - hero bölümleri için kullanışlı */
.text-shadow { text-shadow: 0 2px 4px rgba(0,0,0,0.3); } /* Metin gölgesi */
.text-shadow-lg { text-shadow: 0 4px 8px rgba(0,0,0,0.4); } /* Büyük metin gölgesi */

/* ================================================================== */
/* EK UTILITY SINIFLARI — Yeni bileşenler için                        */
/* ================================================================== */

/* Line Clamp — metin satır kesmesi */
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* Drop shadow — hero başlık metni için */
.drop-shadow-lg { filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4)); }

/* Active scale — mobil dokunma geri bildirimi */
.active\:scale-95:active { transform: scale(0.95); }

/* Responsive grid — sm breakpoint (640px) */
@media (min-width: 640px) {
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:gap-6 { gap: 1.5rem; }
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:py-12 { padding-top: 3rem; padding-bottom: 3rem; }
  .sm\:max-w-md { max-width: 28rem; }
  .sm\:p-4 { padding: 1rem; }
  .sm\:text-base { font-size: 1rem; line-height: 1.5rem; }
}

/* Responsive grid — md breakpoint (768px) */
@media (min-width: 768px) {
  .md\:h-96 { height: 24rem; }
}

/* Prose — içerik typography */
.prose { max-width: 65ch; color: #374151; line-height: 1.75; }
.prose h1, .prose h2, .prose h3 { color: #111827; font-weight: 700; margin-top: 1.5em; margin-bottom: 0.5em; }
.prose h2 { font-size: 1.5rem; }
.prose h3 { font-size: 1.25rem; }
.prose p { margin-top: 1em; margin-bottom: 1em; }
.prose ul { list-style-type: disc; padding-left: 1.5em; margin-top: 1em; margin-bottom: 1em; }
.prose li { margin-top: 0.25em; margin-bottom: 0.25em; }
.prose strong { font-weight: 700; }
.prose.max-w-none { max-width: none; }
.prose-orange a { color: #f97316; }
.prose-orange strong { color: #c2410c; }

/* not-prose — prose stilinden çıkış */
.not-prose { font-size: initial; line-height: initial; color: initial; }
.not-prose p { margin: 0; }

/* ================================================================== */
/* SM BREAKPOINT (640px) — Tüm eksik sınıflar                         */
/* ================================================================== */
@media (min-width: 640px) {
  .sm\:flex-row { flex-direction: row; }
  .sm\:flex-col { flex-direction: column; }
  .sm\:items-center { align-items: center; }
  .sm\:items-start { align-items: flex-start; }
  .sm\:justify-between { justify-content: space-between; }
  .sm\:self-center { align-self: center; }
  .sm\:self-start { align-self: flex-start; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:gap-6 { gap: 1.5rem; }
  .sm\:gap-4 { gap: 1rem; }
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:py-12 { padding-top: 3rem; padding-bottom: 3rem; }
  .sm\:p-4 { padding: 1rem; }
  .sm\:p-6 { padding: 1.5rem; }
  .sm\:max-w-md { max-width: 28rem; }
  .sm\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .sm\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
  .sm\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
  .sm\:block { display: block; }
  .sm\:hidden { display: none; }
  .sm\:w-auto { width: auto; }
  .sm\:mx-0 { margin-left: 0; margin-right: 0; }
  .sm\:text-left { text-align: left; }
  .sm\:col-span-2 { grid-column: span 2 / span 2; }
}

/* ================================================================== */
/* BÖLÜM 25: NAVBAR, HEPSIBURADA MEGA MENÜ & TURKUAZ / TURUNCU TEMA   */
/* ================================================================== */

/* Hultem Marka Renkleri: Turkuaz (Cyan) */
.text-cyan-50 { color: #ecfeff; }
.text-cyan-100 { color: #cffafe; }
.text-cyan-200 { color: #a5f3fc; }
.text-cyan-300 { color: #67e8f9; }
.text-cyan-400 { color: #22d3ee; }
.text-cyan-500 { color: #06b6d4; }
.text-cyan-600 { color: #0891b2; }
.text-cyan-700 { color: #0e7490; }
.text-cyan-800 { color: #155e75; }
.text-cyan-900 { color: #164e63; }

.bg-cyan-50 { background-color: #ecfeff; }
.bg-cyan-100 { background-color: #cffafe; }
.bg-cyan-500 { background-color: #06b6d4; }
.bg-cyan-600 { background-color: #0891b2; }
.bg-cyan-700 { background-color: #0e7490; }
.bg-cyan-800 { background-color: #155e75; }
.bg-cyan-900 { background-color: #164e63; }
.bg-cyan-950 { background-color: #083344; }

.border-cyan-100 { border-color: #cffafe; }
.border-cyan-200 { border-color: #a5f3fc; }
.border-cyan-300 { border-color: #67e8f9; }
.border-cyan-400 { border-color: #22d3ee; }
.border-cyan-500 { border-color: #06b6d4; }
.border-cyan-600 { border-color: #0891b2; }
.border-cyan-700 { border-color: #0e7490; }

/* Hultem Marka Renkleri: Canlı Turuncu (Orange) */
.text-orange-50 { color: #fff7ed; }
.text-orange-100 { color: #ffedd5; }
.text-orange-200 { color: #fed7aa; }
.text-orange-300 { color: #fdba74; }
.text-orange-400 { color: #fb923c; }
.text-orange-500 { color: #f97316; }
.text-orange-600 { color: #ea580c; }
.text-orange-700 { color: #c2410c; }

.bg-orange-50 { background-color: #fff7ed; }
.bg-orange-50\/50 { background-color: rgba(255, 247, 237, 0.50); }
.bg-orange-50\/80 { background-color: rgba(255, 247, 237, 0.80); }
.bg-orange-50\/90 { background-color: rgba(255, 247, 237, 0.90); }
.bg-orange-100 { background-color: #ffedd5; }
.bg-orange-200 { background-color: #fed7aa; }
.bg-orange-500 { background-color: #f97316; }
.bg-orange-600 { background-color: #ea580c; }
.bg-orange-700 { background-color: #c2410c; }

.border-orange-100 { border-color: #ffedd5; }
.border-orange-200 { border-color: #fed7aa; }
.border-orange-300 { border-color: #fdba74; }
.border-orange-400 { border-color: #fb923c; }
.border-orange-500 { border-color: #f97316; }
.border-orange-600 { border-color: #ea580c; }
.border-orange-500\/20 { border-color: rgba(249, 115, 22, 0.20); }
.border-cyan-500\/20 { border-color: rgba(6, 182, 212, 0.20); }

/* Kenarlık Kalınlıkları */
.border-l-2 { border-left-width: 2px; }
.border-l-4 { border-left-width: 4px; }
.border-t-2 { border-top-width: 2px; }
.border-t-4 { border-top-width: 4px; }
.border-b-2 { border-bottom-width: 2px; }
.border-b-4 { border-bottom-width: 4px; }
.border-r-2 { border-right-width: 2px; }
.border-r-4 { border-right-width: 4px; }

/* 12 Kolon Grid ve Col-span */
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-7 { grid-column: span 7 / span 7; }
.col-span-8 { grid-column: span 8 / span 8; }
.col-span-9 { grid-column: span 9 / span 9; }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-11 { grid-column: span 11 / span 11; }
.col-span-12 { grid-column: span 12 / span 12; }

@media (min-width: 1024px) {
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:col-span-3 { grid-column: span 3 / span 3; }
  .lg\:col-span-4 { grid-column: span 4 / span 4; }
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
  .lg\:col-span-6 { grid-column: span 6 / span 6; }
  .lg\:col-span-7 { grid-column: span 7 / span 7; }
  .lg\:col-span-8 { grid-column: span 8 / span 8; }
  .lg\:col-span-9 { grid-column: span 9 / span 9; }
  .lg\:col-span-12 { grid-column: span 12 / span 12; }
}

/* Blur & Opacity */
.backdrop-blur-none { backdrop-filter: none; }
.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.backdrop-blur-lg { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

.bg-white\/98 { background-color: rgba(255, 255, 255, 0.98); }
.bg-white\/95 { background-color: rgba(255, 255, 255, 0.95); }
.bg-white\/90 { background-color: rgba(255, 255, 255, 0.90); }
.bg-white\/80 { background-color: rgba(255, 255, 255, 0.80); }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.20); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.10); }
.bg-slate-50\/80 { background-color: rgba(248, 250, 252, 0.80); }
.bg-cyan-50\/70 { background-color: rgba(236, 254, 255, 0.70); }
.border-slate-200\/70 { border-color: rgba(226, 232, 240, 0.70); }
.border-slate-200\/80 { border-color: rgba(226, 232, 240, 0.80); }

/* Ring & Shadow */
.ring-1 { box-shadow: 0 0 0 1px var(--tw-ring-color, rgba(0, 0, 0, 0.05)); }
.ring-2 { box-shadow: 0 0 0 2px var(--tw-ring-color, rgba(0, 0, 0, 0.10)); }
.ring-slate-900\/5 { --tw-ring-color: rgba(15, 23, 42, 0.05); }
.ring-slate-900\/10 { --tw-ring-color: rgba(15, 23, 42, 0.10); }
.ring-orange-500\/30 { --tw-ring-color: rgba(249, 115, 22, 0.30); }
.ring-cyan-500\/30 { --tw-ring-color: rgba(6, 182, 212, 0.30); }
.ring-black\/20 { --tw-ring-color: rgba(0, 0, 0, 0.20); }

.shadow-xs { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow-sm { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }

.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-t-2xl { border-top-left-radius: 1rem; border-top-right-radius: 1rem; }
.rounded-b-2xl { border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; }
.rounded-b-3xl { border-bottom-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem; }

/* Z-Index */
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-\[60\] { z-index: 60; }
.z-\[100\] { z-index: 100; }
.z-\[999\] { z-index: 999; }

/* Hover & Group Hover States */
.hover\:bg-cyan-50:hover { background-color: #ecfeff; }
.hover\:bg-cyan-100:hover { background-color: #cffafe; }
.hover\:bg-cyan-600:hover { background-color: #0891b2; }
.hover\:bg-cyan-700:hover { background-color: #0e7490; }

.hover\:text-cyan-500:hover { color: #06b6d4; }
.hover\:text-cyan-600:hover { color: #0891b2; }
.hover\:text-cyan-700:hover { color: #0e7490; }

.hover\:border-cyan-300:hover { border-color: #67e8f9; }
.hover\:border-cyan-400:hover { border-color: #22d3ee; }
.hover\:border-cyan-500:hover { border-color: #06b6d4; }
.hover\:border-cyan-600:hover { border-color: #0891b2; }

.hover\:bg-orange-50:hover { background-color: #fff7ed; }
.hover\:bg-orange-100:hover { background-color: #ffedd5; }
.hover\:bg-orange-500:hover { background-color: #f97316; }
.hover\:bg-orange-600:hover { background-color: #ea580c; }

.hover\:text-orange-300:hover { color: #fdba74; }
.hover\:text-orange-400:hover { color: #fb923c; }
.hover\:text-orange-500:hover { color: #f97316; }
.hover\:text-orange-600:hover { color: #ea580c; }

.hover\:border-orange-300:hover { border-color: #fdba74; }
.hover\:border-orange-400:hover { border-color: #fb923c; }
.hover\:border-orange-500:hover { border-color: #f97316; }

.group:hover .group-hover\:text-cyan-600 { color: #0891b2; }
.group:hover .group-hover\:text-cyan-700 { color: #0e7490; }
.group:hover .group-hover\:text-orange-500 { color: #f97316; }
.group:hover .group-hover\:text-orange-600 { color: #ea580c; }
.group:hover .group-hover\:text-white { color: #ffffff; }

.group:hover .group-hover\:bg-cyan-600 { background-color: #0891b2; }
.group:hover .group-hover\:bg-cyan-700 { background-color: #0e7490; }
.group:hover .group-hover\:bg-orange-500 { background-color: #f97316; }
.group:hover .group-hover\:bg-orange-600 { background-color: #ea580c; }

.group:hover .group-hover\:border-cyan-300 { border-color: #67e8f9; }
.group:hover .group-hover\:border-cyan-400 { border-color: #22d3ee; }
.group:hover .group-hover\:border-cyan-500 { border-color: #06b6d4; }
.group:hover .group-hover\:border-orange-400 { border-color: #fb923c; }
.group:hover .group-hover\:border-orange-500 { border-color: #f97316; }

.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); }
.group:hover .group-hover\:translate-x-0\.5 { transform: translateX(0.125rem); }

.group-hover\/all:hover .group-hover\/all\:translate-x-1 { transform: translateX(0.25rem); }

/* Gradyanlar */
.from-cyan-500 { --tw-gradient-from: #06b6d4; --tw-gradient-to: rgba(6, 182, 212, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-cyan-600 { --tw-gradient-from: #0891b2; --tw-gradient-to: rgba(8, 145, 178, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-cyan-700 { --tw-gradient-from: #0e7490; --tw-gradient-to: rgba(14, 116, 144, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-orange-500 { --tw-gradient-from: #f97316; --tw-gradient-to: rgba(249, 115, 22, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-orange-600 { --tw-gradient-from: #ea580c; --tw-gradient-to: rgba(234, 88, 12, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-slate-900 { --tw-gradient-from: #0f172a; --tw-gradient-to: rgba(15, 23, 42, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-slate-950 { --tw-gradient-from: #020617; --tw-gradient-to: rgba(2, 6, 23, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }

.via-slate-800 { --tw-gradient-to: rgba(30, 41, 59, 0); --tw-gradient-stops: var(--tw-gradient-from), #1e293b, var(--tw-gradient-to); }
.via-cyan-600 { --tw-gradient-to: rgba(8, 145, 178, 0); --tw-gradient-stops: var(--tw-gradient-from), #0891b2, var(--tw-gradient-to); }
.via-cyan-700 { --tw-gradient-to: rgba(14, 116, 144, 0); --tw-gradient-stops: var(--tw-gradient-from), #0e7490, var(--tw-gradient-to); }
.via-orange-500 { --tw-gradient-to: rgba(249, 115, 22, 0); --tw-gradient-stops: var(--tw-gradient-from), #f97316, var(--tw-gradient-to); }

.to-cyan-700 { --tw-gradient-to: #0e7490; }
.to-cyan-800 { --tw-gradient-to: #155e75; }
.to-cyan-900 { --tw-gradient-to: #164e63; }
.to-cyan-950 { --tw-gradient-to: #083344; }
.to-orange-600 { --tw-gradient-to: #ea580c; }
.to-orange-700 { --tw-gradient-to: #c2410c; }
/* Sizing & Positioning Utilities */
.w-56 { width: 14rem; }
.w-60 { width: 15rem; }
.w-64 { width: 16rem; }
.w-72 { width: 18rem; }
.w-80 { width: 20rem; }
.w-96 { width: 24rem; }
.w-\[560px\] { width: 560px; }
.w-\[640px\] { width: 640px; }
.w-\[720px\] { width: 720px; }
.w-\[760px\] { width: 760px; }
.w-\[800px\] { width: 800px; }
.w-\[840px\] { width: 840px; }
.min-w-\[640px\] { min-width: 640px; }
.min-w-\[720px\] { min-width: 720px; }
.min-w-\[760px\] { min-width: 760px; }
.max-w-\[calc\(100vw-32px\)\] { max-width: calc(100vw - 32px); }
.min-h-\[280px\] { min-height: 280px; }
.min-h-\[300px\] { min-height: 300px; }
.min-h-\[320px\] { min-height: 320px; }
.min-h-\[340px\] { min-height: 340px; }
.h-11 { height: 2.75rem; }
.w-\[780px\] { width: 780px; }
.max-w-2xl { max-width: 42rem; }
.max-h-\[260px\] { max-height: 260px; }
.max-h-\[320px\] { max-height: 320px; }
.max-h-\[360px\] { max-height: 360px; }
.max-h-\[400px\] { max-height: 400px; }

/* ================================================================== */
/* DOSYA SONU - Hultem Temizlik Ürünleri CSS                           */
/* ================================================================== */