/* ================================================================
   SAHAFİSTAN — Ana Stil Dosyası (style.css)
   ================================================================
   İçindekiler:
   01. Google Fonts & Değişkenler
   02. Reset & Temel
   03. Tipografi
   04. Layout & Konteyner
   05. Butonlar
   06. Form Elemanları
   07. Kartlar
   08. Header & Navigasyon
   09. Footer
   10. İlan Kartları
   11. Rozet & Etiketler
   12. Modal
   13. Sekmeler
   14. Tablo
   15. Boş Durum & Yükleniyor
   16. Toast Bildirimleri
   17. Sayfalama
   18. Yardımcılar
   19. Animasyonlar
   20. Responsive
   ================================================================ */


/* ================================================================
   01. GOOGLE FONTS & DEĞİŞKENLER
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

:root {
  /* ── Marka renkleri ── */
  --renk-ana          : #C45708;   /* Birincil turuncu */
  --renk-ana-koyu     : #A34506;   /* Hover / aktif */
  --renk-ana-acik     : #F5832A;   /* Vurgu / degrade */
  --renk-cok-acik     : #FEF5E9;   /* Top bar, arka plan nüansı */

  /* ── Gri skalası ── */
  --renk-gri-50       : #FAFAFA;
  --renk-gri-100      : #F4F4F5;
  --renk-gri-200      : #E4E4E7;
  --renk-gri-300      : #D1D1D6;
  --renk-gri-400      : #A1A1AA;
  --renk-gri-500      : #71717A;
  --renk-gri-600      : #52525B;
  --renk-gri-700      : #3F3F46;
  --renk-gri-800      : #27272A;
  --renk-gri-900      : #18181B;

  /* ── Durum renkleri ── */
  --renk-basari       : #16A34A;
  --renk-basari-acik  : #DCFCE7;
  --renk-uyari        : #D97706;
  --renk-uyari-acik   : #FEF3C7;
  --renk-hata         : #DC2626;
  --renk-hata-acik    : #FEE2E2;
  --renk-bilgi        : #2563EB;
  --renk-bilgi-acik   : #DBEAFE;

  /* ── Tipografi ── */
  --font-serif        : 'Playfair Display', Georgia, serif;
  --font-sans         : 'DM Sans', system-ui, -apple-system, sans-serif;

  /* ── Layout ── */
  --max-genislik      : 1280px;
  --kenar-bosluk      : 20px;

  /* ── Border radius ── */
  --radius-kucuk      : 6px;
  --radius-orta       : 10px;
  --radius-buyuk      : 16px;
  --radius-tam        : 9999px;

  /* ── Gölgeler ── */
  --golge-kucuk       : 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
  --golge-orta        : 0 4px 12px rgba(0,0,0,0.09), 0 2px 4px rgba(0,0,0,0.06);
  --golge-buyuk       : 0 12px 32px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.07);
  --golge-modal       : 0 24px 64px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.10);

  /* ── Geçişler ── */
  --gecis-hizli       : 0.15s ease;
  --gecis-orta        : 0.25s ease;
  --gecis-yavas       : 0.4s ease;

  /* ── Z-index katmanları ── */
  --z-dropdown        : 100;
  --z-sticky          : 200;
  --z-modal           : 400;
  --z-toast           : 600;
}


/* ================================================================
   02. RESET & TEMEL
   ================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--renk-gri-800);
  background: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

a {
  color: var(--renk-ana);
  text-decoration: none;
  transition: color var(--gecis-hizli);
}
a:hover { color: var(--renk-ana-koyu); }

ul, ol { list-style: none; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  line-height: 1.3;
  color: var(--renk-gri-900);
}


/* ================================================================
   03. TİPOGRAFİ
   ================================================================ */
.serif   { font-family: var(--font-serif); }
.sans    { font-family: var(--font-sans);  }

.font-xs   { font-size: 0.75rem;   }   /* 12px */
.font-sm   { font-size: 0.8125rem; }   /* 13px */
.font-base { font-size: 0.9375rem; }   /* 15px */
.font-md   { font-size: 1rem;      }   /* 16px */
.font-lg   { font-size: 1.125rem;  }   /* 18px */
.font-xl   { font-size: 1.375rem;  }   /* 22px */
.font-2xl  { font-size: 1.625rem;  }   /* 26px */
.font-3xl  { font-size: 2rem;      }   /* 32px */

.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.renk-ana    { color: var(--renk-ana);    }
.renk-ikincil{ color: var(--renk-gri-500);}
.renk-hata   { color: var(--renk-hata);   }
.renk-basari { color: var(--renk-basari); }

.kir          { text-align: left;   }
.ortala       { text-align: center; }
.sag          { text-align: right;  }
.italik       { font-style: italic; }
.ustucizgi    { text-decoration: line-through; }

.satir-kirp-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.satir-kirp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.satir-kirp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }


/* ================================================================
   04. LAYOUT & KONTEYNER
   ================================================================ */
.konteyner {
  max-width: var(--max-genislik);
  margin: 0 auto;
  padding: 0 var(--kenar-bosluk);
}

.section { padding: 60px 0; }
.section-sm { padding: 40px 0; }
.section-lg { padding: 80px 0; }

/* Grid sistemleri */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }

/* Flex yardımcıları */
.flex         { display: flex; }
.flex-merkez  { display: flex; align-items: center; justify-content: center; }
.flex-ara     { display: flex; align-items: center; justify-content: space-between; }
.flex-bitis   { display: flex; align-items: center; gap: 10px; }
.gap-4        { gap: 4px;  }
.gap-8        { gap: 8px;  }
.gap-12       { gap: 12px; }
.gap-16       { gap: 16px; }
.gap-20       { gap: 20px; }
.gap-24       { gap: 24px; }


/* ================================================================
   05. BUTONLAR
   ================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 22px;
  border-radius: var(--radius-orta);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--gecis-hizli);
  border: 1.5px solid transparent;
  text-decoration: none;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Birincil (turuncu) */
.btn-ana {
  background: var(--renk-ana);
  color: white;
  border-color: var(--renk-ana);
}
.btn-ana:hover {
  background: var(--renk-ana-koyu);
  border-color: var(--renk-ana-koyu);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(196, 87, 8, 0.35);
}
.btn-ana:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Çizgili */
.btn-cizgi {
  background: white;
  color: var(--renk-ana);
  border-color: var(--renk-ana);
}
.btn-cizgi:hover {
  background: var(--renk-cok-acik);
  color: var(--renk-ana-koyu);
  border-color: var(--renk-ana-koyu);
}

/* Gri / nötr */
.btn-gri {
  background: var(--renk-gri-100);
  color: var(--renk-gri-700);
  border-color: var(--renk-gri-200);
}
.btn-gri:hover {
  background: var(--renk-gri-200);
  color: var(--renk-gri-900);
}

/* Karanlık */
.btn-koyu {
  background: var(--renk-gri-900);
  color: white;
  border-color: var(--renk-gri-900);
}
.btn-koyu:hover {
  background: var(--renk-gri-800);
  color: white;
}

/* Tehlike */
.btn-hata {
  background: var(--renk-hata);
  color: white;
  border-color: var(--renk-hata);
}
.btn-hata:hover {
  background: #B91C1C;
  color: white;
}

/* Boyutlar */
.btn-kucuk  { padding: 7px 14px;  font-size: 0.8125rem; border-radius: var(--radius-kucuk); }
.btn-buyuk  { padding: 14px 28px; font-size: 1rem; }
.btn-tam    { width: 100%; }

/* Yukleniyor durumu */
.btn.yukleniyor-btn { pointer-events: none; }
.btn .btn-spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: white;
  border-radius: 50%;
  animation: don 0.7s linear infinite;
  flex-shrink: 0;
}
.btn-cizgi .btn-spinner,
.btn-gri   .btn-spinner {
  border-color: rgba(0,0,0,0.15);
  border-top-color: var(--renk-gri-600);
}


/* ================================================================
   06. FORM ELEMANLARI
   ================================================================ */
.form-grup {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-etiket {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--renk-gri-700);
}

.zorunlu {
  color: var(--renk-hata);
  margin-left: 2px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--renk-gri-200);
  border-radius: var(--radius-orta);
  font-size: 0.9375rem;
  color: var(--renk-gri-900);
  background: white;
  transition: border-color var(--gecis-hizli), box-shadow var(--gecis-hizli);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--renk-gri-400);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--renk-gri-400);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--renk-ana);
  box-shadow: 0 0 0 3px rgba(196, 87, 8, 0.12);
}

.form-input.hata,
.form-select.hata,
.form-textarea.hata {
  border-color: var(--renk-hata);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10);
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2371717A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}

.form-hata {
  font-size: 0.8125rem;
  color: var(--renk-hata);
  display: none;
}
.form-hata.gorur { display: block; }

.form-ipucu {
  font-size: 0.8125rem;
  color: var(--renk-gri-500);
}

/* Checkbox & Radio */
.form-checkbox-wrap,
.form-radio-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
  font-size: 0.9375rem;
}

.form-checkbox-wrap input[type="checkbox"],
.form-radio-wrap    input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--renk-ana);
  cursor: pointer;
  flex-shrink: 0;
}

/* Toggle switch */
.toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--renk-gri-100);
}
.toggle-label {
  font-size: 0.875rem;
  color: var(--renk-gri-700);
  flex: 1;
  padding-right: 16px;
}
.toggle-label strong { color: var(--renk-ana); }

.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--renk-gri-300);
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--gecis-orta);
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: white;
  top: 3px; left: 3px;
  transition: transform var(--gecis-orta);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle input:checked + .toggle-slider { background: var(--renk-ana); }
.toggle input:checked + .toggle-slider::before { transform: translateX(20px); }


/* ================================================================
   07. KARTLAR
   ================================================================ */
.kart {
  background: white;
  border: 1px solid var(--renk-gri-200);
  border-radius: var(--radius-buyuk);
  padding: 22px;
  box-shadow: var(--golge-kucuk);
}

.kart-sm { padding: 14px 16px; border-radius: var(--radius-orta); }
.kart-lg { padding: 32px; }

.kart-hover {
  transition: box-shadow var(--gecis-orta), transform var(--gecis-orta), border-color var(--gecis-orta);
}
.kart-hover:hover {
  box-shadow: var(--golge-orta);
  border-color: var(--renk-gri-300);
  transform: translateY(-2px);
}


/* ================================================================
   08. HEADER & NAVİGASYON
   ================================================================ */

/* ── Üst bar (dil seçici, yardım linkleri) ── */
.header-top {
  background: #fef5e9;              /* Kullanıcı tercihi */
  border-bottom: 1px solid #f0dfc5;
}
.header-top-ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 5px;
  padding-bottom: 5px;
}
/* Sağ grup: linkler + dil */
.header-top-sag {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.ht-link {
  font-size: 0.8125rem;
  color: var(--renk-gri-600);
  text-decoration: none;
  transition: color var(--gecis-hizli);
  white-space: nowrap;
}
.ht-link:hover { color: var(--renk-ana); }
.ht-ayrac {
  color: var(--renk-gri-300);
  font-size: 0.875rem;
  user-select: none;
}

/* Dil seçici */
.dil-secici {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: var(--radius-kucuk);
  transition: background var(--gecis-hizli);
  user-select: none;
  position: relative;
}
.dil-secici:hover { background: rgba(0,0,0,0.06); }
.dil-ok {
  font-size: 0.6rem;
  color: var(--renk-gri-500);
  transition: transform var(--gecis-hizli);
}
.dil-secici.acik .dil-ok { transform: rotate(180deg); }

/* Dil dropdown — z-index üst barın üzerinde olmalı (sticky header 200) */
.dil-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: white;
  border: 1px solid var(--renk-gri-200);
  border-radius: var(--radius-orta);
  box-shadow: var(--golge-orta);
  padding: 4px;
  min-width: 140px;
  z-index: 300;
  display: none;
}
.dil-secici.acik .dil-dropdown { display: block; }
.dil-dropdown a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 0.875rem;
  color: var(--renk-gri-700);
  text-decoration: none;
  border-radius: var(--radius-kucuk);
  white-space: nowrap;
}
.dil-dropdown a:hover { background: var(--renk-gri-50); color: var(--renk-gri-900); }

/* ── Ana header ── */
.header-ana {
  background: white;
  border-bottom: 2px solid var(--renk-ana);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
.header-ana-ic {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Logo */
.logo {
  font-family: var(--font-serif);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--renk-gri-900);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.logo span { color: var(--renk-ana); }

/* Arama çubuğu */
.arama-form {
  flex: 1;
  display: flex;
  max-width: 660px;
}
.arama-input {
  flex: 1;
  padding: 11px 18px;
  border: 1.5px solid var(--renk-gri-200);
  border-right: none;
  border-radius: var(--radius-orta) 0 0 var(--radius-orta);
  font-size: 0.9375rem;
  outline: none;
  transition: border-color var(--gecis-hizli);
  color: var(--renk-gri-900);
}
.arama-input:focus { border-color: var(--renk-ana); }
.arama-input::placeholder { color: var(--renk-gri-400); }
.arama-btn {
  padding: 10px 18px;
  background: var(--renk-ana);
  color: white;
  border: 1.5px solid var(--renk-ana);
  border-radius: 0 var(--radius-orta) var(--radius-orta) 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--gecis-hizli);
  flex-shrink: 0;
}
.arama-btn:hover { background: var(--renk-ana-koyu); }

/* Header sağ butonlar */
.header-saglar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: auto;
}
.header-ikon-btn {
  position: relative;
  color: var(--renk-gri-600);
  font-size: 1.25rem;
  text-decoration: none;
  padding: 6px;
  border-radius: var(--radius-kucuk);
  transition: color var(--gecis-hizli), background var(--gecis-hizli);
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-ikon-btn:hover { color: var(--renk-ana); background: var(--renk-cok-acik); }

/* Rozet (sepet/mesaj sayısı) */
.header-rozet {
  position: absolute;
  top: -3px; right: -3px;
  background: var(--renk-ana);
  color: white;
  border-radius: 50%;
  width: 17px; height: 17px;
  font-size: 0.625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Kullanıcı avatar (header) */
.header-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.9375rem;
  color: white;
}
.header-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Kullanıcı adı */
.header-kullanici-adi {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--renk-gri-900);
}

/* ── Kategori navigasyonu (ana sayfa altı) ── */
.nav-kategori {
  background: white;
  border-bottom: 1px solid var(--renk-gri-200);
}
.nav-kategori-ic {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0;
}
.nav-kategori-ic::-webkit-scrollbar { display: none; }
.nav-kategori-link {
  padding: 11px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--renk-gri-600);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all var(--gecis-hizli);
  text-decoration: none;
  display: block;
}
.nav-kategori-link:hover { color: var(--renk-ana); border-bottom-color: var(--renk-ana); }
.nav-kategori-link.aktif { color: var(--renk-ana); border-bottom-color: var(--renk-ana); font-weight: 600; }


/* ================================================================
   09. FOOTER
   ================================================================ */
.footer {
  background: var(--renk-gri-900);
  color: rgba(255,255,255,0.65);
  padding: 56px 0 28px;
  margin-top: auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-logo {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  text-decoration: none;
  display: block;
  margin-bottom: 12px;
}
.footer-logo span { color: var(--renk-ana-acik); }
.footer-aciklama {
  font-size: 0.875rem;
  line-height: 1.7;
  max-width: 280px;
}
.footer-baslik {
  font-size: 0.8125rem;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.footer-link-listesi { display: flex; flex-direction: column; gap: 9px; }
.footer-link-listesi a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  transition: color var(--gecis-hizli);
}
.footer-link-listesi a:hover { color: white; }
.footer-alt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 0.8125rem;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-sosyal {
  display: flex;
  gap: 12px;
}
.footer-sosyal a {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  transition: background var(--gecis-hizli), color var(--gecis-hizli);
}
.footer-sosyal a:hover { background: var(--renk-ana); color: white; }


/* ================================================================
   10. İLAN KARTLARI
   ================================================================ */
.ilan-kart {
  background: white;
  border: 1px solid var(--renk-gri-200);
  border-radius: var(--radius-buyuk);
  overflow: hidden;
  transition: box-shadow var(--gecis-orta), transform var(--gecis-orta), border-color var(--gecis-orta);
  display: flex;
  flex-direction: column;
}
.ilan-kart:hover {
  box-shadow: var(--golge-orta);
  border-color: var(--renk-gri-300);
  transform: translateY(-3px);
}

.ilan-kart-foto-wrap {
  position: relative;
  aspect-ratio: 3/4;
  background: var(--renk-gri-100);
  overflow: hidden;
}
.ilan-kart-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--gecis-yavas);
}
.ilan-kart:hover .ilan-kart-foto { transform: scale(1.04); }

/* Favori butonu */
.ilan-favori-btn {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transition: transform var(--gecis-hizli), box-shadow var(--gecis-hizli);
  z-index: 1;
}
.ilan-favori-btn:hover { transform: scale(1.15); box-shadow: 0 4px 10px rgba(0,0,0,0.18); }
.ilan-favori-btn.aktif { color: #ef4444; }

/* Kondisyon rozeti (sol alt) */
.ilan-kondisyon-rozet {
  position: absolute;
  bottom: 10px; left: 10px;
  padding: 3px 9px;
  border-radius: var(--radius-tam);
  font-size: 0.6875rem;
  font-weight: 700;
  backdrop-filter: blur(4px);
  background: rgba(255,255,255,0.88);
  color: var(--renk-gri-800);
}

.ilan-kart-icerik { padding: 13px; display: flex; flex-direction: column; gap: 4px; flex: 1; }

.ilan-kart-baslik {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--renk-gri-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}
.ilan-kart-yazar {
  font-size: 0.8125rem;
  color: var(--renk-gri-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ilan-kart-satici {
  font-size: 0.75rem;
  color: var(--renk-gri-400);
  margin-top: auto;
}

.ilan-kart-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.ilan-kart-fiyat {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--renk-ana);
}
.ilan-kart-fiyat-eski {
  font-size: 0.8125rem;
  color: var(--renk-gri-400);
  text-decoration: line-through;
}
.ilan-kart-sepet {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--renk-ana);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background var(--gecis-hizli), transform var(--gecis-hizli);
  flex-shrink: 0;
}
.ilan-kart-sepet:hover { background: var(--renk-ana-koyu); transform: scale(1.1); }


/* ================================================================
   11. ROZET & ETİKETLER
   ================================================================ */
.rozet {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-tam);
  font-size: 0.75rem;
  font-weight: 600;
}

/* Sipariş durumları */
.rozet-bekliyor        { background: #FEF9C3; color: #854D0E; }
.rozet-odeme-bekliyor  { background: #FEF3C7; color: #92400E; }
.rozet-onaylandi       { background: #DCFCE7; color: #166534; }
.rozet-kargoda         { background: #DBEAFE; color: #1E40AF; }
.rozet-teslim          { background: #DCFCE7; color: #166534; }
.rozet-iptal           { background: #FEE2E2; color: #991B1B; }
.rozet-iade            { background: #F3E8FF; color: #6B21A8; }
.rozet-transfer-bek    { background: #FEF3C7; color: #92400E; }
.rozet-transfer-tamam  { background: #DCFCE7; color: #166534; }

/* Genel */
.rozet-ana    { background: rgba(196,87,8,0.12); color: var(--renk-ana-koyu); }
.rozet-basari { background: var(--renk-basari-acik); color: var(--renk-basari); }
.rozet-hata   { background: var(--renk-hata-acik); color: var(--renk-hata); }
.rozet-uyari  { background: var(--renk-uyari-acik); color: var(--renk-uyari); }
.rozet-gri    { background: var(--renk-gri-100); color: var(--renk-gri-600); }
.rozet-koyu   { background: var(--renk-gri-800); color: white; }

/* Kondisyon etiketleri */
.rozet-yeni          { background: #DCFCE7; color: #166534; }
.rozet-cok-iyi       { background: #DBEAFE; color: #1E40AF; }
.rozet-iyi           { background: #EDE9FE; color: #5B21B6; }
.rozet-orta          { background: #FEF3C7; color: #92400E; }
.rozet-zayif         { background: #FEE2E2; color: #991B1B; }


/* ================================================================
   12. MODAL
   ================================================================ */
.modal-arkaplan {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--kenar-bosluk);
  animation: soluklas 0.2s ease;
}
.modal-arkaplan.gizli { display: none; }

.modal {
  background: white;
  border-radius: var(--radius-buyuk);
  box-shadow: var(--golge-modal);
  padding: 28px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: yukariCik 0.25s ease;
}

.modal-kapat {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--renk-gri-100);
  color: var(--renk-gri-600);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  transition: background var(--gecis-hizli), color var(--gecis-hizli);
  line-height: 1;
}
.modal-kapat:hover { background: var(--renk-gri-200); color: var(--renk-gri-900); }

.modal-baslik {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 20px;
  padding-right: 32px;
}


/* ================================================================
   13. SEKMELER
   ================================================================ */
.sekmeler {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--renk-gri-200);
  overflow-x: auto;
  scrollbar-width: none;
}
.sekmeler::-webkit-scrollbar { display: none; }

.sekme {
  padding: 10px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--renk-gri-500);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--gecis-hizli);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.sekme:hover { color: var(--renk-gri-800); }
.sekme.aktif {
  color: var(--renk-ana);
  border-bottom-color: var(--renk-ana);
}


/* ================================================================
   14. TABLO
   ================================================================ */
.veri-tablo {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--radius-orta);
  overflow: hidden;
  box-shadow: var(--golge-kucuk);
  font-size: 0.875rem;
}
.veri-tablo th {
  background: var(--renk-gri-100);
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--renk-gri-600);
  border-bottom: 1px solid var(--renk-gri-200);
  white-space: nowrap;
}
.veri-tablo td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--renk-gri-100);
  vertical-align: middle;
  color: var(--renk-gri-800);
}
.veri-tablo tr:last-child td { border-bottom: none; }
.veri-tablo tr:hover td { background: var(--renk-gri-50); }
.veri-tablo-wrap { overflow-x: auto; border-radius: var(--radius-orta); }


/* ================================================================
   15. BOŞ DURUM & YÜKLENİYOR
   ================================================================ */
.bos-durum {
  text-align: center;
  padding: 60px 24px;
  color: var(--renk-gri-500);
}
.bos-durum .ikon {
  font-size: 3rem;
  margin-bottom: 14px;
  opacity: 0.5;
}
.bos-durum h3 {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--renk-gri-700);
  margin-bottom: 6px;
}
.bos-durum p {
  font-size: 0.875rem;
  margin-bottom: 18px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

/* Spinner */
.yukleniyor {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--renk-gri-200);
  border-top-color: var(--renk-ana);
  border-radius: 50%;
  animation: don 0.75s linear infinite;
}
.spinner-sm {
  width: 20px; height: 20px;
  border-width: 2px;
}
.spinner-lg {
  width: 52px; height: 52px;
  border-width: 4px;
}

/* İskelet yükleme */
.iskelet {
  background: linear-gradient(90deg, var(--renk-gri-100) 25%, var(--renk-gri-50) 50%, var(--renk-gri-100) 75%);
  background-size: 200% 100%;
  animation: iskeleton 1.4s ease infinite;
  border-radius: var(--radius-kucuk);
}


/* ================================================================
   16. TOAST BİLDİRİMLERİ
   ================================================================ */
#toast-konteyner {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: white;
  border-radius: var(--radius-orta);
  box-shadow: var(--golge-buyuk);
  border-left: 4px solid var(--renk-gri-400);
  min-width: 280px;
  max-width: 380px;
  pointer-events: all;
  animation: toastGir 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--renk-gri-800);
}
.toast.cikis { animation: toastCik 0.25s ease forwards; }

.toast-basari { border-left-color: var(--renk-basari); }
.toast-hata   { border-left-color: var(--renk-hata);   }
.toast-uyari  { border-left-color: var(--renk-uyari);  }
.toast-bilgi  { border-left-color: var(--renk-bilgi);  }

.toast-ikon   { font-size: 1.15rem; flex-shrink: 0; }
.toast-mesaj  { flex: 1; line-height: 1.4; }
.toast-kapat  {
  background: none; border: none;
  color: var(--renk-gri-400); font-size: 1rem;
  cursor: pointer; padding: 2px; flex-shrink: 0;
  transition: color var(--gecis-hizli);
}
.toast-kapat:hover { color: var(--renk-gri-700); }


/* ================================================================
   17. SAYFALAMA
   ================================================================ */
.sayfalama {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 0;
  flex-wrap: wrap;
}
.sayfa-btn {
  min-width: 38px; height: 38px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-kucuk);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--renk-gri-600);
  background: white;
  border: 1.5px solid var(--renk-gri-200);
  cursor: pointer;
  transition: all var(--gecis-hizli);
}
.sayfa-btn:hover  { border-color: var(--renk-ana); color: var(--renk-ana); }
.sayfa-btn.aktif  { background: var(--renk-ana); color: white; border-color: var(--renk-ana); font-weight: 700; }
.sayfa-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sayfa-nokta { color: var(--renk-gri-400); padding: 0 4px; }


/* ================================================================
   18. YARDIMCILAR
   ================================================================ */
.gizli    { display: none !important; }
.gorur    { display: block !important; }
.gorur-flex { display: flex !important; }

.mt-4  { margin-top: 4px;  } .mb-4  { margin-bottom: 4px;  }
.mt-8  { margin-top: 8px;  } .mb-8  { margin-bottom: 8px;  }
.mt-12 { margin-top: 12px; } .mb-12 { margin-bottom: 12px; }
.mt-16 { margin-top: 16px; } .mb-16 { margin-bottom: 16px; }
.mt-20 { margin-top: 20px; } .mb-20 { margin-bottom: 20px; }
.mt-24 { margin-top: 24px; } .mb-24 { margin-bottom: 24px; }
.mt-32 { margin-top: 32px; } .mb-32 { margin-bottom: 32px; }

.p-16  { padding: 16px; }
.p-20  { padding: 20px; }
.p-24  { padding: 24px; }

.w-100  { width: 100%; }
.h-100  { height: 100%; }
.mw-400 { max-width: 400px; }
.mw-560 { max-width: 560px; }
.mw-640 { max-width: 640px; }

/* Ayraç */
.ayrac {
  border: none;
  border-top: 1px solid var(--renk-gri-200);
  margin: 20px 0;
}


/* ================================================================
   19. ANİMASYONLAR
   ================================================================ */
@keyframes don {
  to { transform: rotate(360deg); }
}

@keyframes soluklas {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes yukariCik {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

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

@keyframes toastGir {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastCik {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(32px); }
}

@keyframes nabiz {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.08); }
}

.animasyon-nabiz { animation: nabiz 1.8s ease-in-out infinite; }


/* ================================================================
   20. RESPONSIVE
   ================================================================ */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
  .grid-5 { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* Büyük tablet / küçük masaüstü (≤ 900px) */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .arama-form { max-width: 100%; }
  .ht-link { display: none; }
  .ht-ayrac { display: none; }
}

/* Tablet (≤ 768px) */
@media (max-width: 768px) {
  :root {
    --kenar-bosluk: 16px;
  }
  .section    { padding: 44px 0; }
  .section-lg { padding: 56px 0; }
  .grid-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .logo { font-size: 1.375rem; }
  .modal { padding: 22px 18px; }
}

/* Mobil (≤ 480px) */
@media (max-width: 480px) {
  .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .btn { padding: 10px 18px; font-size: 0.875rem; }
  .header-kullanici-adi { display: none; }
  #toast-konteyner {
    bottom: 12px;
    right: 12px;
    left: 12px;
  }
  .toast { min-width: unset; width: 100%; max-width: 100%; }
  .sayfa-btn { min-width: 34px; height: 34px; font-size: 0.8125rem; }
}

/* Küçük mobil (≤ 360px) */
@media (max-width: 360px) {
  .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}

/* Dokunmatik optimizasyon */
@media (hover: none) {
  .ilan-kart:hover { transform: none; }
  .btn-ana:hover   { transform: none; box-shadow: none; }
}

/* Yüksek kontrast / erişilebilirlik */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}