/* ==================================================
   ROOT VARIABLES
================================================== */
:root {
    --primary:#00b98e;
    --primary-dark:#009e7a;
    --primary-light: rgba(0,185,142,0.6);   /* hero gradient alt renk */
    --primary-overlay: rgba(0,185,142,0.85); /* hero gradient üst renk */
    --bg:#f4f7f6;
    --text:#1f2933;
    --muted:#6b7280;
    --border:#e5e7eb;

    /* İlan detay özel değişkenleri */
    --card:#ffffff;          /* panel ve galeri arkaplanı */
    --shadow: rgba(0,0,0,0.12); /* kutu gölgeleri */
    
    /* İlan listeleme özel değişkenleri */
    --primary-soft:#e6f8f2;
}
:root {
    /* Ana renk */
    --primary: #007ba3;
    --primary-rgb: 0, 123, 163;

    /* Türevler */
    
    /* %15 siyahla karıştır → daha koyu */
    --primary-dark: color-mix(
        in srgb,
        var(--primary) 85%,
        black
    );/* hover, active */

    /* --primary-dark: #006487; */

    --primary-light: rgba(var(--primary-rgb), 0.6);   /* hero gradient alt */
    --primary-overlay: rgba(var(--primary-rgb), 0.85);/* hero gradient üst */
    --primary-soft: #e6f4f8; /* listeleme arkaplan, badge */

    /* Genel UI */
    --bg: #f4f7f6;
    --text: #1f2933;
    --muted: #6b7280;
    --border: #e5e7eb;

    /* Kart & gölge */
    --card: #ffffff;
    --shadow: rgba(0, 0, 0, 0.12);
}
:root {
    /* Ana renk */
    --primary: #00b98e;
    --primary-rgb: 0, 185, 142;

    /* Türevler */
    
    /* %15 siyahla karıştır → daha koyu */
    --primary-dark: color-mix(
        in srgb,
        var(--primary) 85%,
        black
    );/* hover, active */

    /* --primary-dark: #009e7a; */
    --primary-light: rgba(var(--primary-rgb), 0.6);    /* hero gradient alt */
    --primary-overlay: rgba(var(--primary-rgb), 0.85); /* hero gradient üst */
    --primary-soft: #e6f8f2; /* listeleme arkaplan, badge */

    /* Genel UI */
    --bg: #f4f7f6;
    --text: #1f2933;
    --muted: #6b7280;
    --border: #e5e7eb;

    /* Kart & gölge */
    --card: #ffffff;
    --shadow: rgba(0, 0, 0, 0.12);
}


/* ==================================================
   RESET & BASE
================================================== */
* {
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;
}

body {
    background:var(--bg);
    color:var(--text);
}
/* ==================================================
   GİZLEME İŞLEMLERİNDE KULLANILIR
================================================== */
.hide {
    display: none !important;
}
/* ==================================================
   ADVANCED SCROLL ANIMATIONS
================================================== */

/* Ortak gizli durum */
.reveal {
    opacity: 0;
    transition: all .9s cubic-bezier(.22,.61,.36,1);
    will-change: transform, opacity;
}

/* Aşağıdan (mevcut) */
.reveal-up {
    transform: translateY(40px);
}

/* Soldan giriş */
.reveal-left {
    transform: translateX(-60px);
}

/* Sağdan giriş */
.reveal-right {
    transform: translateX(60px);
}

/* Fade + Scale */
.reveal-scale {
    transform: scale(.92);
}

/* Görünür hale gelince */
.reveal.show {
    opacity: 1;
    transform: translate(0,0) scale(1);
}

/* Gecikmeler */
.delay-1 { transition-delay: .1s; }
.delay-2 { transition-delay: .2s; }
.delay-3 { transition-delay: .3s; }


/* ==================================================
   NAVBAR
================================================== */
.navbar {
    height:72px;
    background:#fff;
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    padding:0 28px;
    position:sticky;
    top:0;
    z-index:100;
}

/* ---------- LOGO ---------- */
.logo {
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:700;
    font-size:22px;
    letter-spacing:.3px;
    cursor:pointer;
    text-decoration: none; /* <- Bu satırı ekledik */
}

.logo-icon {
    width:30px;
    height:30px;
    stroke:var(--primary-dark);
    transition:.25s;
}

.logo-text {
    color:var(--text);
    transition:.25s;
}

.logo:hover .logo-icon { stroke:var(--primary); }
.logo:hover .logo-text { color:var(--primary-dark); }

/* ---------- NAV LINKS ---------- */
.navbar nav {
    margin-left:auto;
    display:flex;
    gap:28px;
}

.navbar nav a {
    text-decoration:none;
    color:var(--text);
    font-size:15px;
    font-weight:500;
    position:relative;
    padding-bottom:4px;
}

/* Hover & aktif alt çizgi ve renk */
.navbar nav a::after {
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:var(--primary-dark);
    transition:.25s;
    border-radius:2px;
}

.navbar nav a:hover,
.navbar nav a.active { color:var(--primary-dark); }

.navbar nav a:hover::after,
.navbar nav a.active::after { width:100%; }

/* ---------- HAMBURGER ---------- */
.hamburger {
    display:none;
    flex-direction:column;
    justify-content:space-between;
    width:24px;
    height:18px;
    cursor:pointer;
    margin-left:auto;
    z-index:150;
}

.hamburger span {
    display:block;
    height:3px;
    width:100%;
    background:var(--text);
    border-radius:2px;
    transition:0.3s;
}

.hamburger.active span:nth-child(1) {
    transform:rotate(45deg) translate(5px,5px);
}
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) {
    transform:rotate(-45deg) translate(5px,-5px);
}

/* ---------- MOBILE DROPDOWN OVERLAY ---------- */
.mobile-dropdown {
    display:none;
    flex-direction:column;
    gap:16px;
    background:#fff;
    padding:20px 28px;
    position:fixed;
    top:72px;
    left:0;
    right:0;
    box-shadow:0 8px 25px rgba(0,0,0,.1);
    z-index:120;
    overflow:hidden;
    max-height:0;
    transition:max-height .3s ease;
}

.mobile-dropdown.show {
    display:flex;
    max-height:500px;
}

.mobile-dropdown a {
    font-size:16px;
    font-weight:500;
    color:var(--text);
    text-decoration:none;
    padding:6px 0;
}

.mobile-dropdown a:hover,
.mobile-dropdown a.active { color:var(--primary-dark); }

/* ---------- NAVBAR RESPONSIVE ---------- */
@media(max-width:768px) {
    .navbar nav { display:none; }
    .hamburger { display:flex; }
}


/* LOADER BAR */
.loader-bar {
    display: block;
    height: 4px;
    width: 0%;
    background: var(--primary-dark);
    transition: width 0.05s ease;
    
    position:fixed;
    top:calc(1px + 72px); 
}
/* ==================================================
   BREADCRUMB
================================================== */
/* Breadcrumb - kart tarzı, navbar’dan ayrı */
/* ul.breadcrumb {
  padding: 10px 28px;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 1200px;
  margin: 12px auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

ul.breadcrumb li {
  display: inline;
}

ul.breadcrumb li+li:before {
  padding: 0 6px;
  color: var(--border);
  content: "/\00a0";
}

ul.breadcrumb li a {
  color: var(--primary-dark);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}

ul.breadcrumb li a:hover {
  background: var(--primary-soft);
  color: var(--primary-dark);
}

ul.breadcrumb li:last-child {
  font-weight: 600;
  color: var(--text);
}


@media (max-width:768px) {
  ul.breadcrumb {
    padding: 8px 16px;
    font-size: 13px;
    gap: 4px;
  }
  ul.breadcrumb li a {
    padding: 3px 6px;
  }
} */

ul.breadcrumb {
  padding: 10px 28px;
  list-style: none;
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
}

ul.breadcrumb li {
  display: inline;
}

ul.breadcrumb li+li:before {
  padding: 0 6px;
  color: var(--border);
  content: "/\00a0";
}

ul.breadcrumb li a {
  color: var(--primary-dark);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}

ul.breadcrumb li a:hover {
  background: var(--primary-soft);
  color: var(--primary-dark);
}

ul.breadcrumb li:last-child {
  font-weight: 600;
  color: var(--text);
}

@media (max-width:768px) {
  ul.breadcrumb {
    padding: 8px 16px;
    font-size: 13px;
    gap: 4px;
  }
  ul.breadcrumb li a {
    padding: 3px 6px;
  }
}



/* MAIN */
main.disable {
    pointer-events: none;
    opacity: 0.5;
}



/* ==================================================
   FOOTER
================================================== */
.footer {
    background:#fff;
    border-top:1px solid var(--border);
    padding:40px 20px;
    text-align:center;
    font-size:14px;
    color:var(--muted);
}