:root{
  --brand:#0F212C;            /* Ana renk */
  --ink:#0F212C;
  --muted:#5a6c7a;
  --bg:#0F212C;               /* Koyu lacivert */
  --soft:#ffffff;
  --line:#e3ebf1;
  --shadow:0 14px 32px rgba(15,33,44,.16);
  --radius:16px;
  --ring: rgba(15,33,44,.18);
  --header-h: 0px;            /* Header yüksekliği kadar boşluk için */
}

*{ box-sizing:border-box }
html, body { height: 100% }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 420px at 10% -10%, rgba(31,135,255,.10), transparent),
    radial-gradient(900px 360px at 90% -10%, rgba(18,184,134,.10), transparent),
    var(--bg);
}
a{ color:var(--brand); text-decoration:none }
a:hover{ text-decoration:none }

.container{ max-width:1240px; margin:24px auto 48px; padding:0 20px }

/* ========== HERO / üst arama ========== */
.hero{
  position:relative;
  border-radius:24px;
  background:
    radial-gradient(900px 360px at 8% -20%, rgba(255,255,255,.10), transparent),
    linear-gradient(180deg, #0f212c, #132c3c 60%);
  padding:18px 16px;
  color:#eaf2f8;
  overflow:hidden;
  box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.06);
  margin-bottom:10px;
}
.toolbar{
  display:flex; flex-direction:row; align-items:center; gap:8px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:10px;
  backdrop-filter: blur(6px);
}
.field{
  display:flex; align-items:center; gap:10px;
  background:#0f1f2c; border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:10px 12px; color:#eaf2f8; flex:1 1 auto;
}
.field input{
  flex:1; border:none; outline:none; background:transparent; color:#eaf2f8; font-size:1rem;
}
.btn{
  border:none; border-radius:12px; padding:12px 16px; font-weight:900; cursor:pointer;
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:active{ transform: translateY(1px) }
.btn-primary{
  background: var(--brand); color:#fff; border:1px solid #0b1821;
  box-shadow: 0 6px 16px rgba(15,33,44,.22);
}
.btn-primary:hover{ filter:brightness(1.05) }

/* ========== SAYFA YERLEŞİMİ ========== */
.page{
  display:grid;
  grid-template-columns: 300px 1fr;
  gap:18px;
}
@media (max-width: 980px){
  .page{ grid-template-columns: 1fr }
}

/* ========== FİLTRE PANELİ ========== */
.filters{
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  height:fit-content;
  position:sticky; top:14px;
}
.filters h3{ margin:.2rem 0 10px; font-size:1.05rem; color:#183447 }
.filters .g{ display:grid; gap:10px }
.filters select,
.filters input,
.filters textarea{
  border:1.5px solid #d6e2ea; border-radius:12px; padding:10px 12px; outline:none; background:#fff; font-size:.95rem;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.filters textarea{ resize:vertical }
.filters select:focus,
.filters input:focus,
.filters textarea:focus{
  border-color:#c8d6e1; box-shadow: 0 0 0 3px var(--ring);
}
.filters .actions{ display:grid; gap:10px; margin-top:6px }
.btn-ghost{
  background:#f1f6fb; color:#0f2a3a; border:1px solid #d8e6ef;
}
.btn-ghost:hover{ filter:brightness(1.03) }

/* ========== TABLO ========== */
.panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:12px;
}
.table-wrap{ overflow:auto; border-radius:12px; }
table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}
thead tr th{
  background:#0F212C; color:#fff; font-weight:800; text-align:left; padding:12px 16px;
}
thead tr th:first-child{ border-radius:12px 0 0 12px }
thead tr th:last-child{ border-radius:0 12px 12px 0 }

tbody tr{
  background:#F1F5F9;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
  cursor:pointer;
}
tbody tr:hover{
  background:#E7EEF6;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15,33,44,.12);
}
tbody td{ padding:14px 16px }
tbody tr td:first-child{ font-weight:800; color:#0f2a3a }
.no-data{ text-align:center; padding:32px 8px; color:#64748B; font-style:italic; }

/* ---------- Mobil tipografi ---------- */
@media(max-width: 640px){
  table{ border-spacing: 0 8px }
  thead tr th{ font-size:.9rem; padding:10px }
  tbody td{ font-size:.9rem; padding:10px }
}
@media(max-width: 480px){
  table, thead, tbody, th, td, tr{ display:block }
  thead{ display:none }
  tbody tr{
    margin-bottom:12px;
    border:1px solid var(--line);
    border-radius:12px;
    padding:10px;
    box-shadow:0 4px 12px rgba(15,33,44,.08);
  }
  tbody td{
    padding:6px 8px;
    display:flex; justify-content:space-between; align-items:center;
    font-size:.9rem;
    border-bottom:1px solid #e5edf3;
  }
  tbody td:last-child{ border-bottom:none }
  tbody td::before{
    content: attr(data-label);
    font-weight:700; color:#0F212C; margin-right:10px;
  }
}

/* ========== Drawer (Mobil Filtre Paneli) ========== */
.filter-toggle{
  display:none;
  position:fixed;
  top: calc(var(--header-h, 56px) + 60px);
  right:16px;
  z-index:1001;
  background:#0F212C;
  color:#fff;
  padding:10px 16px;
  border:none;
  border-radius:24px;
  font-weight:700;
  box-shadow:0 4px 14px rgba(0,0,0,.2);
}
.filter-drawer-header{ display:none; }

#filter-backdrop{
  display:none; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.45);
}
#filter-backdrop.show{ display:block; }

@media (max-width:768px){
  .toolbar{ grid-template-columns: 1fr; }
  .btn{ width:100%; }
  .filters{ position:relative; top:auto }

  .filter-toggle{ display:inline-flex; align-items:center; gap:8px; }

  #filter-drawer{
    position:fixed; top:var(--header-h); right:-100%;
    width:86%; max-width:380px; height:calc(100% - var(--header-h));
    background:#fff; box-shadow:-6px 0 20px rgba(0,0,0,.35);
    border-radius:0; z-index:1002; transition:right .3s ease;
    display:flex; flex-direction:column;
  }
  #filter-drawer.open{ right:0; }

  .filter-drawer-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; border-bottom:1px solid #e5e7eb;
    background:#fff; position:sticky; top:0; z-index:1;
  }
  .filter-drawer-header h3{ margin:0; font-size:16px; font-weight:800; color:#0F212C; }
  .filter-close{ background:none; border:none; font-size:28px; line-height:1; cursor:pointer; color:#0F212C; }

  .filter-drawer-body{
    padding:14px 16px; overflow-y:auto; height:calc(100% - 56px);
    -webkit-overflow-scrolling:touch;
  }

  .filters{ position:static; top:auto; box-shadow:none; border-radius:16px; }

  .filters .g{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
    grid-auto-flow: dense !important;
  }
  .filters .g > *{
    width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important;
  }

  .filters select,
  .filters input{
    height:36px !important;
    padding:8px 10px !important;
    font-size:12px !important;
    line-height:1.35 !important;
    white-space:nowrap !important; text-overflow:ellipsis !important; overflow:hidden !important;
  }
  .filters textarea{
    padding:8px 10px !important;
    font-size:12px !important;
    line-height:1.35 !important;
  }
  .filters .actions .btn{
    padding:10px 12px !important;
    font-size:12px !important;
    line-height:1.35 !important;
  }

  .filters .price-range,
  .filters .actions,
  .filters textarea{ grid-column: 1 / -1 !important; }

  .filters .price-range{
    display:grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap:8px !important;
  }
}

/* Masaüstünde drawer normal aside gibi */
@media (min-width:769px){
  .filter-toggle{ display:none; }
  #filter-drawer{
    position:static; width:auto; height:auto; box-shadow:none; border-radius:16px;
  }
}

/* Ek mobil uyarlamalar */
@media (max-width: 600px) {
  #search-button-top { display: none !important; }
  .hero { display: none !important; }
}

/* ---------- Mobil tipografi ---------- */
@media (max-width: 640px) {
  h1, h2, h3, h4,
  .panel h1, .panel h2, .panel h3,
  .filters h3,
  thead tr th {
    font-size: 15px !important;
    line-height: 1.25 !important;
  }
  body,
  .toolbar,
  .panel,
  .filters,
  .filters label,
  .filters input,
  .filters select,
  .filters textarea,
  .field input,
  tbody td,
  .no-data,
  .btn {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
}

/* ===== Lokasyon bölüm ayırıcı + grup ===== */
.filters .filter-divider{
  grid-column: 1 / -1;
  display:flex; align-items:center; gap:10px;
  margin: 6px 0 8px;
}
.filters .filter-divider::before,
.filters .filter-divider::after{
  content:""; flex:1; height:1px; background: var(--line);
}
.filters .filter-divider > span{
  background: var(--soft);
  color: var(--muted);
  border:1px solid var(--line);
  border-radius:999px;
  padding: 2px 10px;
  font-weight:800; font-size:.9rem;
}

/* Lokasyon select’leri için minigrid */
.filters .location-group{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:8px;
}
@media (max-width:480px){
  .filters .location-group{ grid-template-columns: 1fr; }
}
.filters .location-group select{
  height:36px !important;
  padding:8px 10px !important;
  font-size:12px !important;
  line-height:1.35 !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ==== Mobilde Lokasyon grubu yanyana ==== */
@media (max-width: 768px){
  .location-group{
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .filter-divider{
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 2px;
    font-weight: 800;
    color: #0F212C;
  }
  .filter-divider::before,
  .filter-divider::after{
    content:"";
    height:1px;
    background:#e5edf3;
    flex:1;
  }
}
@media (max-width: 380px){
  .location-group{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ==== Mobilde actions butonları yan yana ==== */
@media (max-width: 768px){
  .filters .actions{
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 6px;
  }
  .filters .actions .btn{ width: 100% !important; }
}

/* =======================
   Kart Liste + Slider
   ======================= */
.cards-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Kart iskeleti: solda slider, sağda bilgi */
.p-card{
  display: grid;
  grid-template-columns: 300px 1fr;     /* 260px → 300px */
  gap: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
  cursor: pointer;
}
.p-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(15,33,44,.16);
}
.p-card:focus{
  outline: none;
  box-shadow: 0 0 0 3px var(--ring), var(--shadow);
}

/* Soldaki slider alanı */
.p-card-media{
  position: relative;
  background: #f3f6f9;
  border-right: 1px solid var(--line);
}

/* Slider */
.p-slider{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 240px;            /* 200px → 240px (desktop yüksekliği) */
  background: #e9eef4;
  overflow: hidden;
}
.p-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .25s ease;
  background: #e9eef4;
}
.p-slide.active{ opacity: 1; }
.p-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Prev/Next */
.p-nav{
  /* pointer-events: none;  kaldırıldı */
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 3; /* ok katmanı üstte */
}
.p-nav button{
  pointer-events: auto;
  border: none; border-radius: 999px;
  padding: 8px 10px;
  background: rgba(15,33,44,.65);
  color: #fff; font-weight: 900; font-size: 16px; line-height: 1;
  margin: 0 8px;
  transform: translateY(0);
  transition: background .2s ease, transform .08s ease;
}
.p-nav button:hover{ background: rgba(15,33,44,.85); }
.p-nav button:active{ transform: translateY(1px); }

/* Dots */
.p-dots{
  position: absolute; left: 0; right: 0; bottom: 8px;
  display: flex; justify-content: center; gap: 6px;
}
.p-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(15,33,44,.2);
}
.p-dot.active{ background: #fff; }

/* Sağdaki bilgi alanı */
.p-card-info{
  padding: 12px 14px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-items: start;
  min-height: 240px;            /* slider ile eşit */
}
.p-title{
  margin: 0 0 6px 0;
  font-size: 1.05rem;
  color: #0f2a3a;
  font-weight: 800;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.p-meta{
  display: flex; flex-wrap: wrap; gap: 8px;
  color: var(--muted);
  font-weight: 700;
}
.p-meta .sep{ opacity:.4 }
.p-price{
  margin-top: 10px;
  font-weight: 900;
  font-size: 1.1rem;
  color: #0F212C;
}

/* “kayıt yok / yükleniyor” durumları */
.cards-list .empty,
.cards-list .loading{
  background: #F1F5F9;
  border: 1px dashed var(--line);
  color: #64748B;
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  font-style: italic;
}

/* ====== MOBİL: yatay, kısa kart ====== */
@media (max-width: 768px){
  .p-card{
    grid-template-columns: 120px 1fr;   /* 300px → 120px (kompakt genişlik) */
    gap: 8px;
    padding: 6px 8px;
    border-radius: 10px;
  }
  .p-card-media{
    height: 86px;                        /* 68px → 86px (biraz daha büyük) */
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }
  .p-slider{
    min-height: 0;
    height: 100%;
  }
  .p-card-info{
    min-height: 0;
    padding: 6px 4px;
    align-content: start;
  }
  .p-title{
    font-size: 13px;
    line-height: 1.2;
  }
  .p-meta{
    font-size: 11px;
    gap: 6px;
  }
  .p-price{
    font-size: 13px;
    margin-top: 4px;
    justify-self: end;
  }
}

/* Çok dar telefonlar */
@media (max-width: 380px){
  .p-card{ grid-template-columns: 110px 1fr; gap: 6px; }  /* 82px → 110px */
  .p-card-media{ height: 78px; }                          /* 60px → 78px */
  .p-title{ font-size: 12px; }
  .p-price{ font-size: 12px; }
}

/* Kart içi slider görünürlüğü (active toggle) */
.p-card-media .p-slider { position: relative; }
.p-card-media .p-slide { display: none; }           /* tüm slaytları gizle */
.p-card-media .p-slide.active { display: block; }   /* sadece aktif slaytı göster */

/* Okların tıklanabilir olması ve üstte kalması */
.p-card-media .p-nav {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: auto; /* MASAÜSTÜ için garanti */
  z-index: 3;
}
.p-card-media .p-nav button {
  pointer-events: auto;
  z-index: 4;
}

/* Dots katmanı */
.p-card-media .p-dots {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  display: flex; gap: 6px; justify-content: center;
  z-index: 2;
}