/* ============================================================
   KARADENIZ EMLAK — Responsive + dropdown polish (mobile-first)
   style.css'in üstüne biner. Yatay taşma yok, select alanları premium.
   ============================================================ */

/* ---------- universal box-sizing ---------- */
/* iOS Safari'de position:fixed kırılmasın diye body/html overflow rule koymuyoruz */
*, *::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; }
body { width: 100%; }

/* ============================================================
   KATEGORİ SHOWCASE — premium görsel slider
   ============================================================ */
.cat-section{ padding: 70px 0; background: var(--ink, #0f1721); color: #fff; }
.cat-head{ text-align: center; margin-bottom: 36px; }
.cat-head .eyebrow{ color: var(--gold, #c5a55a); }
.cat-head .section-title{ color: #fff; margin-top: 8px; }

.cat-showcase{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cat-track{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 6px 2px;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}
.cat-track::-webkit-scrollbar{ display:none; }

.cat-card{
  flex: 0 0 calc((100% - 48px) / 5);
  min-width: 240px;
  aspect-ratio: 4/5;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  scroll-snap-align: start;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
  display: block;
}
.cat-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.55);
}
.cat-bg{
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.cat-card:hover .cat-bg{ transform: scale(1.08); }
.cat-shade{
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.12) 100%);
}
.cat-body{
  position: absolute;
  left: 22px; right: 22px; bottom: 22px;
  z-index: 2;
}
.cat-name{
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.1;
  margin-bottom: 8px;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.cat-count{
  font-size: 11px;
  letter-spacing: .18em;
  font-weight: 500;
  opacity: .88;
}

.cat-nav{
  width: 46px; height: 46px;
  border-radius: 12px;
  border: 1.5px solid rgba(197,165,90,.4);
  background: rgba(197,165,90,.12);
  color: var(--gold, #c5a55a);
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
  font-family: inherit;
  padding-bottom: 4px;
}
.cat-nav:hover{
  background: var(--gold, #c5a55a);
  color: #fff;
  transform: scale(1.06);
}

@media (max-width: 1100px){
  .cat-card{ flex: 0 0 calc((100% - 24px) / 3); }
}
@media (max-width: 760px){
  .cat-card{ flex: 0 0 calc((100% - 12px) / 2); }
  .cat-nav{ display: none; }
}
@media (max-width: 480px){
  .cat-card{ flex: 0 0 70%; min-width: 220px; }
  .cat-section{ padding: 50px 0; }
  .cat-head{ margin-bottom: 24px; }
}

/* ============================================================
   PREMIUM TİPOGRAFİ — Inter (sans) + Cormorant Garamond (display serif)
   ============================================================ */

/* Nav linkleri — ince ve elegant */
.site-header,
.site-header .nav-menu,
.site-header .nav-menu a,
.site-header .btn,
.site-header .logo{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
.site-header .nav-menu a{
  font-weight: 400 !important;
  font-size: 13px !important;
  letter-spacing: .025em;
  color: rgba(255,255,255,.82);
}
/* Dil değiştirici */
.lang-switch{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 3px;
  margin-right: 10px;
}
.lang-switch .lang-btn{
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.75);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .04em;
  padding: 5px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s;
  line-height: 1;
}
.lang-switch .lang-btn:hover{ color: #fff; }
.lang-switch .lang-btn.active{
  background: var(--gold, #c5a55a);
  color: #1a1a1a;
}
.site-header.solid .lang-switch{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
}
.site-header.solid .lang-switch .lang-btn{ color: #fff; }
.site-header.solid .lang-switch .lang-btn:hover{ color: var(--gold-soft, #ddbc7f); }
.site-header.solid .lang-switch .lang-btn.active{
  background: var(--gold, #c5a55a);
  color: #1a1a1a;
}

.lang-switch-mobile{
  display: flex !important;
  width: 100%;
  justify-content: center;
  margin: 12px 0 6px;
  background: rgba(255,255,255,.06);
}
@media (max-width: 760px){
  .site-header .lang-switch:not(.lang-switch-mobile){ display: none; }
}

/* Mobil taşma güvenliği — overflow-x:hidden iOS Safari'de position:fixed'i bozar,
   onun yerine clip kullan veya sadece html'e koy. */
html{ overflow-x: clip; max-width: 100vw; }
body{ overflow-x: clip; max-width: 100vw; }
@supports not (overflow: clip){
  html, body{ overflow-x: hidden; }
}
.hero, .hero .container, .search-card, .search-fields{ max-width: 100%; box-sizing: border-box; }
/* FAB'leri body overflow'a göre değil, viewport'a sabitle */
.ke-wa, .ke-sh, .ke-chat-fab{
  position: fixed !important;
  z-index: 99999 !important;
}

/* Mobil drawer — tam ekran */
@media (max-width: 760px){
  .mobile-drawer .panel{ width: 100vw !important; max-width: 100vw !important; }
}

/* Hero — her ekranda viewport yüksekliği kadar, içerik sığar, siyah yok */
.hero{
  min-height: 100vh !important;
  height: 100vh !important;
  max-height: 900px;
  display: flex !important;
  align-items: stretch !important;
}
.hero .container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 90px !important;
  padding-bottom: 30px !important;
  gap: 14px;
}
.hero h1{
  font-size: clamp(28px, 4.2vw, 56px) !important;
  line-height: 1.05 !important;
  max-width: 18ch !important;
  margin: 0 !important;
}
.hero .lead{
  margin-top: 6px !important;
  font-size: clamp(14px, 1.1vw, 17px) !important;
  max-width: 46ch !important;
}
.hero .eyebrow{ margin-bottom: 4px; }
.hero .search-card{ margin-top: 18px; }

@media (max-width: 760px){
  .hero{ max-height: none; height: 100vh !important; }
  .hero .container{ padding-top: 80px !important; padding-bottom: 20px !important; gap: 8px; }
  .hero h1{ font-size: clamp(26px, 7.4vw, 36px) !important; }
  .hero .lead{ font-size: 13.5px !important; }
}
.site-header.solid .nav-menu a{ color: rgba(255,255,255,.85); }
.site-header .nav-menu a.active{
  font-weight: 500 !important;
  color: var(--gold, #c5a55a);
}
.site-header .nav-menu a:hover{ color: var(--gold, #c5a55a); }

/* Logo */
.site-header .logo .name,
.site-header .wordmark .name{
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  font-size: 15px;
}
.site-header .logo .sub,
.site-header .wordmark .sub{
  font-weight: 400 !important;
  letter-spacing: .35em !important;
  font-size: 9px;
  opacity: .75;
}

/* İletişime Geç butonu */
.site-header .btn,
.site-header .btn-outline{
  font-weight: 500 !important;
  letter-spacing: .02em;
  font-size: 12px !important;
  padding: 8px 16px !important;
}

/* Display başlıklar — section-title vs */
.section-title{
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
  font-weight: 500 !important;
  letter-spacing: -.005em;
  line-height: 1.15;
}
.hero h1, .page-hero h1{
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
  font-weight: 500 !important;
  letter-spacing: -.01em;
}

/* Kategori kartı başlıkları — elegant serif, kalın değil */
.cat-name{
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
  font-weight: 500 !important;
  letter-spacing: .04em !important;
  font-size: clamp(16px, 1.4vw, 21px) !important;
  text-transform: none !important;  /* PHP'de Türkçe-bilinçli uppercase yapıyoruz */
}
.cat-count{
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 9.5px !important;
  letter-spacing: .2em !important;
}
.cat-body{ left: 16px !important; right: 16px !important; bottom: 16px !important; }

/* Eyebrow — küçük başlık üstü */
.eyebrow{
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: .22em !important;
  font-size: 11px !important;
  text-transform: uppercase;
}

/* ============================================================
   HERO VIDEO + KEN BURNS (premium hareketli arka plan)
   Video yüklenmezse hero-bg resmi devrede kalır.
   ============================================================ */
.hero{ position: relative; overflow: hidden; }

.hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  background: #0e141b;
}
.hero-video.ke-ready{ opacity: 1; }


.hero .hero-bg{
  z-index: 0 !important;
  /* Ken Burns — video yoksa bile cinematic his */
  animation: keKenBurns 32s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}
@keyframes keKenBurns{
  0%   { transform: scale(1.05) translate(0%, 0%); }
  50%  { transform: scale(1.18) translate(-1.5%, -1%); }
  100% { transform: scale(1.05) translate(0%, 0%); }
}

.hero-shade,
.hero .container{ position: relative; z-index: 3; }

/* Mobilde de video oynar (data tasarrufu yok) */
@media (prefers-reduced-motion: reduce){
  .hero-video{ display: none; }
  .hero .hero-bg{ animation: none; }
}

/* ============================================================
   ÖNE ÇIKAN PORTFÖYLER — otomatik kayar carousel
   ============================================================ */
.section[data-slider] .cards-grid{
  display: flex !important;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
  padding: 4px 2px 16px;
  -webkit-overflow-scrolling: touch;
}
.section[data-slider] .cards-grid::-webkit-scrollbar{ display:none; }
.section[data-slider] .cards-grid > *{
  flex: 0 0 calc((100% - 54px) / 4);
  min-width: 260px;
  scroll-snap-align: start;
}
@media (max-width: 1100px){
  .section[data-slider] .cards-grid > *{ flex: 0 0 calc((100% - 36px) / 3); }
}
@media (max-width: 760px){
  .section[data-slider] .cards-grid > *{ flex: 0 0 calc((100% - 18px) / 2); }
}
@media (max-width: 520px){
  .section[data-slider] .cards-grid > *{ flex: 0 0 80%; }
}

/* ============================================================
   HERO ARAMA KARTI — mobile-first
   ============================================================ */
.search-card{
  width: 100%;
  max-width: 100%;
  padding: 12px;
  border-radius: 16px;
  box-shadow: 0 18px 50px -20px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.06);
}

/* sekmeler — yatayda smooth scroll, kırpılmaz */
.search-tabs{
  display: flex;
  gap: 4px;
  padding: 4px 4px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.search-tabs::-webkit-scrollbar{ display:none; }
.search-tabs button{
  flex: 0 0 auto;
  padding: 10px 18px;
  font-size: 14px;
  white-space: nowrap;
}

/* alanlar — mobilde tek sütun, dikey */
.search-fields{
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 4px;
}
.search-fields .field{
  min-width: 0 !important;
  width: 100%;
  flex: none !important;
}
.search-fields .btn,
.search-fields .btn-gold{
  width: 100%;
  min-width: 0 !important;
  height: 52px;
}

/* ============================================================
   FİLTRE BAR (satılık / kiralık)
   ============================================================ */
.filter-bar{
  padding: 12px;
  border-radius: 14px;
}
.filter-row{
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 10px;
}
.filter-row .field{
  min-width: 0 !important;
  width: 100%;
  flex: none !important;
}
.filter-row .btn{
  width: 100%;
  min-width: 0 !important;
  height: 52px;
}

/* ============================================================
   SELECT (özel dropdown görünümü, native picker korunur)
   ============================================================ */
.select{
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 52px;
  border: 1.5px solid #e5e1d8;
  border-radius: 12px;
  padding: 0 44px 0 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.select:hover{ border-color: #c9bfa6; }
.select:focus-within{
  border-color: var(--gold, #c5a55a);
  box-shadow: 0 0 0 4px rgba(197,165,90,.15);
}
.select:active{ transform: translateY(1px); }

.select select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  height: 100%;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--text, #1f1f1f);
  cursor: pointer;
  padding: 0;
  padding-right: 4px;
}
.select select::-ms-expand{ display:none; }
.select select option{
  color: #1f1f1f;
  background: #fff;
  font-size: 15px;
  padding: 8px;
}
.select select:invalid,
.select select option[value=""]{ color: #8a8270; }

/* chevron — sağda, kendi SVG'miz (data-ic="chevD" zaten dolduruluyor ama
   yine de CSS-only fallback) */
.select > [data-ic="chevD"],
.select > .chev,
.select > span:last-child{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  pointer-events: none;
  color: #8a8270;
  display: flex;
  align-items: center;
  justify-content: center;
}
.select > [data-ic="chevD"] svg,
.select > .chev svg{
  width: 18px;
  height: 18px;
  transition: transform .2s;
}
.select:focus-within > [data-ic="chevD"] svg,
.select:focus-within > .chev svg{
  transform: rotate(180deg);
  color: var(--gold-deep, #b18b3a);
}

/* ============================================================
   TABLET — 2 sütun
   ============================================================ */
@media (min-width: 560px){
  .search-fields{ grid-template-columns: 1fr 1fr; }
  .filter-row{ grid-template-columns: 1fr 1fr; }
  .search-fields .btn,
  .search-fields .btn-gold,
  .filter-row .btn{ grid-column: 1 / -1; }
}

/* ============================================================
   ORTA TABLET — 3 sütun (6 alanı 2 satıra dağıtır + Ara altta)
   ============================================================ */
@media (min-width: 760px){
  .search-fields{ grid-template-columns: 1fr 1fr 1fr; }
  .filter-row{ grid-template-columns: 1fr 1fr 1fr; }
}

/* ============================================================
   DESKTOP — orijinal yatay düzen
   ============================================================ */
@media (min-width: 1100px){
  .search-card{ padding: 14px; border-radius: 18px; }
  .search-fields{
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  .search-fields .field{
    flex: 1 1 130px !important;
    min-width: 130px !important;
    width: auto;
  }
  .search-fields .btn,
  .search-fields .btn-gold{
    width: auto;
    min-width: 110px !important;
    flex: 0 0 auto;
  }
  .filter-row{
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
  }
  .filter-row .field{
    flex: 1 1 130px !important;
    min-width: 130px !important;
    width: auto;
  }
  .filter-row .btn{ width: auto; min-width: 110px !important; flex: 0 0 auto; }
}

/* ============================================================
   AMENITY / ÖNE ÇIKAN ÖZELLİKLER GRID (mobile-first)
   ============================================================ */
.amenities{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 560px){ .amenities{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px){ .amenities{ grid-template-columns: repeat(5, 1fr); } }

.amenity{
  border: 1px solid var(--line-soft, #ece7da);
  border-radius: 14px;
  padding: 18px 12px;
  text-align: center;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.amenity:hover{
  border-color: var(--gold, #c5a55a);
  box-shadow: 0 8px 22px -10px rgba(197,165,90,.35);
  transform: translateY(-2px);
}
.amenity .ic{
  color: var(--gold-deep, #b18b3a);
  width: 36px; height: 36px;
}
.amenity .ic svg{ width: 36px; height: 36px; }
.amenity span{
  font-size: 13.5px;
  color: var(--text, #1f1f1f);
  font-weight: 500;
  line-height: 1.3;
}

/* ============================================================
   ADMIN — modal amenity checkbox grid
   ============================================================ */
.amenity-pick{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 6px;
}
@media (min-width: 560px){ .amenity-pick{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px){ .amenity-pick{ grid-template-columns: repeat(4, 1fr); } }
.amenity-pick label{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1.5px solid var(--line, #e5e1d8);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13.5px;
  background: #fff;
  transition: border-color .15s, background .15s;
}
.amenity-pick label:hover{ border-color: var(--gold, #c5a55a); }
.amenity-pick label.on{
  border-color: var(--gold, #c5a55a);
  background: rgba(197,165,90,.08);
}
.amenity-pick label .ic{
  display:flex; align-items:center; justify-content:center;
  width: 22px; height: 22px;
  color: var(--gold-deep, #b18b3a);
}
.amenity-pick label .ic svg{ width: 20px; height: 20px; }
.amenity-pick label input{
  position: absolute; opacity: 0; pointer-events: none;
}

/* ============================================================
   GENEL — mobil ufak ayarlar
   ============================================================ */
@media (max-width: 559px){
  .hero .container{ padding-left: 18px; padding-right: 18px; }
  .hero h1{ font-size: clamp(28px, 8vw, 40px); line-height: 1.12; }
  .hero .lead{ font-size: 15px; }
  .container{ padding-left: 18px; padding-right: 18px; }
  .section{ padding: 48px 0; }
  .breadcrumb{ font-size: 13px; flex-wrap: wrap; }
  .page-hero h1{ font-size: clamp(28px, 8vw, 42px); }
}