/*

TemplateMo 559 Zay Shop

https://templatemo.com/tm-559-zay-shop

---------------------------------------------
Table of contents
------------------------------------------------
1. Typography
2. General
3. Nav
4. Hero Carousel
5. Accordion
6. Shop
7. Product
8. Carousel Hero
9. Carousel Brand
10. Services
11. Contact map
12. Footer
13. Small devices (landscape phones, 576px and up)
14. Medium devices (tablets, 768px and up)
15. Large devices (desktops, 992px and up)
16. Extra large devices (large desktops, 1200px and up)
--------------------------------------------- */




/* Typography */
body, ul, li, p, a, label, input, div {
  font-family: 'Roboto', sans-serif;
  font-size: 18px !important;
  font-weight: 300 !important;
}
.h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 48px !important;
  font-weight: 200 !important;
}
.h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 30px !important;
  font-weight: 300;
}
.h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 22px !important;
}
/* General */
.logo { font-weight: 500 !important;}
.text-warning {  color: #ede861 !important;}
.text-muted { color: #bcbcbc !important;}
.text-success { color: #59ab6e !important;}
.text-light { color: #cfd6e1 !important;}
.bg-dark { background-color: #212934 !important;}
.bg-light { background-color: #e9eef5 !important;}
.bg-black { background-color: #1d242d !important;}
.bg-success { background-color: #59ab6e !important;}
.btn-success {
  background-color: #59ab6e !important;
  border-color: #56ae6c !important;
}
.pagination .page-link:hover {color: #000;}
.pagination .page-link:hover, .pagination .page-link.active {
  background-color: #69bb7e;
  color: #fff;
}
/* Nav */
#templatemo_nav_top { min-height: 40px;}
#templatemo_nav_top * { font-size: .9em !important;}
#templatemo_main_nav a { color: #212934;}
#templatemo_main_nav a:hover { color: #69bb7e;}
#templatemo_main_nav .navbar .nav-icon { margin-right: 20px;}

/* Hero Carousel */
#template-mo-zay-hero-carousel { background: #efefef !important;}
/* Accordion */
.templatemo-accordion a { color: #000;}
.templatemo-accordion a:hover { color: #333d4a;}
/* Shop */
.shop-top-menu a:hover { color: #69bb7e !important;}
/* Product */
.product-wap { box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);}
.product-wap .product-color-dot.color-dot-red { background:#f71515;}
.product-wap .product-color-dot.color-dot-blue { background:#6db4fe;}
.product-wap .product-color-dot.color-dot-black { background:#000000;}
.product-wap .product-color-dot.color-dot-light { background:#e0e0e0;}
.product-wap .product-color-dot.color-dot-green { background:#0bff7e;}
.card.product-wap .card .product-overlay {
  background: rgba(0,0,0,.2);
  visibility: hidden;
  opacity: 0;
  transition: .3s;
}
.card.product-wap:hover .card .product-overlay {
  visibility: visible;
  opacity: 1;
}
.card.product-wap a { color: #000;}
#carousel-related-product .slick-slide:focus { outline: none !important;}
#carousel-related-product .slick-dots li button:before {
  font-size: 15px;
  margin-top: 20px;
}
/* Brand */
.brand-img {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: .5s;
}
.brand-img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
/* Carousel Hero */
#template-mo-zay-hero-carousel .carousel-indicators li {
  margin-top: -50px;
  background-color: #59ab6e;
}
#template-mo-zay-hero-carousel .carousel-control-next i,
#template-mo-zay-hero-carousel .carousel-control-prev i {
  color: #59ab6e !important;
  font-size: 2.8em !important;
}
/* Carousel Brand */
.tempaltemo-carousel .h1 {
  font-size: .5em !important;
  color: #000 !important;
}
/* Services */
.services-icon-wap {transition: .3s;}
.services-icon-wap:hover, .services-icon-wap:hover i {color: #fff;}
.services-icon-wap:hover {background: #69bb7e;}
/* Contact map */
.leaflet-control a, .leaflet-control { font-size: 10px !important;}
.form-control { border: 1px solid #e8e8e8;}
/* Footer */
#tempaltemo_footer a { color: #dcdde1;}
#tempaltemo_footer a:hover { color: #68bb7d;}
#tempaltemo_footer ul.footer-link-list li { padding-top: 10px;}
#tempaltemo_footer ul.footer-icons li {
  width: 2.6em;
  height: 2.6em;
  line-height: 2.6em;
}
#tempaltemo_footer ul.footer-icons li:hover {
  background-color: #cfd6e1;
  transition: .5s;
}
#tempaltemo_footer ul.footer-icons li:hover i {
  color: #212934;
  transition: .5s;
}
#tempaltemo_footer .border-light { border-color: #2d343f !important;}
/*
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
*/
/* Small devices (landscape phones, 576px and up)*/
.product-wap .h3, .product-wap li, .product-wap i, .product-wap p {
  font-size: 12px !important;
}
.product-wap .product-color-dot {
  width: 6px;
  height: 6px;
}

@media (min-width: 576px) {
  .tempaltemo-carousel .h1 { font-size: 1em !important;}
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  #templatemo_main_nav .navbar-nav {max-width: 450px;}
 }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  #templatemo_main_nav .navbar-nav {max-width: 550px;}
  #template-mo-zay-hero-carousel .carousel-item {min-height: 30rem !important;}
  .product-wap .h3, .product-wap li, .product-wap i, .product-wap p {font-size: 18px !important;}
  .product-wap .product-color-dot {
    width: 12px;
    height: 12px;
  }
}

/* 🌄 Slider */
:root {
  --primary-color: #00d2ff;
  --bg-dark: #0a0b10;
}

.slider {
  position: relative;
  width: 100%;
  height: 750px; /* Masaüstü yüksekliği */
  overflow: hidden;
  background-color: var(--bg-dark);
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  display: flex;
  align-items: center;
}

.slide.active { opacity: 1; z-index: 1; }

.slide-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr; /* Sol metin, saÄŸ resim */
  align-items: center;
  padding: 0 50px;
  gap: 30px;
}

/* Metin Alanı */
.slide-text { color: #fff; }

.slide-text .badge {
  display: inline-block;
  padding: 5px 15px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 20px;
  font-size: 12px;
  letter-spacing: 1px;
  margin-bottom: 20px;
  color: var(--primary-color);
}

.slide-text h1 {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 20px;
  background: linear-gradient(to bottom, #fff, #99c); /* Hafif gradyan */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.slide-text p {
  font-size: 18px;
  color: #888;
  max-width: 400px;
  margin-bottom: 30px;
}

.slider-cta {
  display: inline-block;
  padding: 15px 35px;
  background: linear-gradient(90deg, #00c6ff 0%, #0072ff 100%);
  color: #fff;
  text-decoration: none;
  border-radius: 30px;
  font-weight: 600;
  transition: transform 0.3s ease;
}

.slider-cta:hover { transform: scale(1.05); }

/* Resim Alanı */
.slide-image img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* Navigasyon Butonları */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.1);
  border: none;
  color: white;
  padding: 15px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  transition: 0.3s;
}
.slider-btn:hover { background: rgba(255,255,255,0.2); }
.prev { left: 20px; }
.next { right: 20px; }

/* --- MOBÄ°L UYUMLULUK --- */
@media (max-width: 992px) {
  .slider { height: auto; padding: 60px 0; }
  .slide { position: relative; opacity: 1; display: none; }
  .slide.active { display: block; }
  
  .slide-content {
    grid-template-columns: 1fr; /* Tek sütun */
    text-align: center;
    padding: 0 20px;
  }
  
  .slide-text h1 { font-size: 40px; }
  .slide-text p { margin: 0 auto 30px auto; }
  
  .slide-image { order: -1; margin-bottom: 30px; } /* Resim mobilde üste çıksın */
}
/* Genel Konteynır */
.kategoriler {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 15px;
}

.kategori {
    flex: 0 0 140px;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
}

.icon-wrapper {
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 50%; /* Yuvarlak ikonlar daha modern durur */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.kategori:hover .icon-wrapper {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(10, 182, 168, 0.2);
}

.kategori img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

.kategori h3 {
    font-size: 14px;
    color: #333;
    font-weight: 600;
}

/* --- MODAL TASARIMI --- */
#modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px); /* Arkayı bulanıklaştırır */
    z-index: 9998;
}

.cat-modal {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    z-index: 9999;
    width: 90%;
    max-width: 400px;
    opacity: 0;
    transition: 0.3s ease;
}

.cat-modal.active {
    display: block;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.cat-modal-content {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);
}

.cat-modal-header {
    background: #f8f9fa;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    font-weight: bold;
    color: #0ab6a8;
}

.close-modal {
    font-size: 24px;
    cursor: pointer;
    color: #ccc;
}

.cat-modal-body {
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    max-height: 60vh;
    overflow-y: auto;
}

.cat-modal-body a {
    padding: 12px 15px;
    background: #f1f3f5;
    border-radius: 10px;
    text-decoration: none;
    color: #444;
    font-size: 14px;
    transition: 0.2s;
}

.cat-modal-body a:hover {
    background: #0ab6a8;
    color: #fff;
}

/* Mobil için 3'lü yan yana dizilim */
@media (max-width: 768px) {
    .kategori { flex: 0 0 30%; }
}
.ilan {
  background: #fff; border: 1px solid #eee;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 8px rgba(0,0,0,.05);
  transition: .3s; position: relative;
  display: flex; flex-direction: column;
}
.ilan:hover { transform: translateY(-3px); }
.ilan img { width: 100%; height: 180px; object-fit: cover; }
.ilan .bilgi { padding: 12px; flex-grow: 1; }
.ilan h3 { font-size: 16px; color: #ff7033; margin-bottom: 5px; }
.ilan p { font-size: 13px; color: #555; height: 40px; overflow: hidden; }

.fiyatlar { margin: 10px 0; font-size: 14px; font-weight: 600; color: #0ab6a8; }
.kirala-btn {
  display: block; width: 100%; text-align: center;
  background: #ff7033; color: #fff;
  padding: 10px; border: none; border-radius: 6px;
  font-weight: 600; cursor: pointer;
}
/* 🔍 Arama Bölümü Dış Taşıyıcısı (Beyaz Uzun Alan) */
.search-box {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 15px; /* Köşeleri biraz daha yumuşattık */
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  
  /* Genişlik Ayarları */
  max-width: 1000px; /* Genişliği artırdık */
  width: 95%; /* Mobilde kenarlardan pay bırakır */
  margin: 40px auto; /* Sayfada dikeyde boşluk bırakır ve ortalar */
  padding: 20px; /* İçerideki elemanların etrafındaki beyazlığı artırır */
  
  /* Elemanları Hizalama */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center; /* İçerideki her şeyi merkeze toplar */
  gap: 15px;
}

/* Input ve Tarih Alanları */
.search-box input {
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 15px;
  outline: none;
  transition: all .3s ease;
}

/* Şehir/İlçe Alanı */
.search-box input[name="lokasyon"] {
  flex: 2; /* Diğerlerinden daha geniş dursun */
  min-width: 250px;
}

/* Tarih Seçiciler */
.search-box input[type="date"] {
  flex: 1;
  min-width: 150px;
  background-color: #fcfcfc;
}

.search-box input:focus {
  border-color: #0ab6a8;
  box-shadow: 0 0 5px rgba(10, 182, 168, 0.2);
}

/* Ara Butonu */
.search-box button {
  background: #0ab6a8;
  color: #fff;
  border: none;
  padding: 12px 30px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: .3s ease;
}

.search-box button:hover {
  background: #088d83;
  transform: translateY(-1px);
}

/* 📱 Mobil Görünüm */
@media (max-width: 768px) {
  .search-box {
    flex-direction: column;
    padding: 20px;
    width: 90%;
  }
  
  .search-box input, 
  .search-box button {
    width: 100%; /* Mobilde hepsi tam genişlik */
  }
}
/* ✨ Animasyon */
@keyframes fadeIn {
  from {opacity: 0; transform: translate(-50%, -10px);}
  to {opacity: 1; transform: translate(-50%, 0);}
}

/* 📱 Mobil Görünüm */
@media (max-width: 768px) {
  .kategoriler { flex-wrap: wrap; justify-content: center; }
  .kategori { flex: 0 0 30%; }
  .search-box { 
    flex-direction: column; 
    margin: 20px; 
    padding: 15px;
  }
  .search-box input, .search-box button { width: 100%; }
}