/* =================== DEĞİŞKENLER =================== */
:root{
  --accent:#7c3aed;
  --bg:#fff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;
  --radius:16px;

  /* Üst alan (logo+arama+kategori) */
  --cat-bg:#f7f7f2; /* kırık beyaz */

  /* Slider */
  --slider-mobile-h:280px;

  /* Grid kart oranı */
  --card-aspect-mobile:4/5;
  --card-aspect-desktop:3/4;

  /* Tipografi */
  --font-nav:"Cormorant Garamond", serif;
  --font-title:"Playfair Display", serif;
  --font-text:"Lora", serif;
}

/* =================== RESET / TEMEL =================== */
*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family:var(--font-text), Georgia, "Times New Roman", serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none }
.container{ max-width:1200px; margin:0 auto; padding:0 16px }

/* =================== HEADER & ÜST ALAN =================== */
header{
  position:sticky; top:0; z-index:30;
  background:var(--cat-bg);
  border-bottom:1px solid var(--border);
}
.header-wrap{ padding:10px 0; background:var(--cat-bg) }
.toprow{ display:flex; align-items:center; gap:12px; background:var(--cat-bg) }
.catrow{ margin-top:8px; background:var(--cat-bg); border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
#catrow .container{ padding:6px 0 }

.logo{ display:flex; align-items:center }
.logo-img{ height:44px; width:auto; object-fit:contain; display:block }
@media (max-width:640px){ .logo-img{ height:36px } }

/* Burger */
.hamburger{
  display:none; width:40px; height:40px; border-radius:10px;
  border:1px solid var(--border); background:#fff; cursor:pointer;
  align-items:center; justify-content:center; font-size:20px;
}

/* Arama */
.search.large{
  position:relative; flex:1; display:flex; align-items:center; gap:10px;
  border:1px solid var(--border); border-radius:999px; padding:0 14px;
  height:46px; background:#fff;
}
.search.large .icon{ opacity:.6 }
.search.large input{
  border:none; outline:none; width:100%; height:100%;
  font-size:14px; background:transparent; color:var(--text)
}
.search.large input::placeholder{ color:#94a3b8 }

/* =================== MENÜ (KATEGORİLER) - MASAÜSTÜ =================== */
.menu{
  display:flex; align-items:center;
  flex-wrap:nowrap; white-space:nowrap;
  justify-content:space-between;
  gap:clamp(4px,0.6vw,10px);
  margin:0; padding:4px 0; list-style:none;
  overflow:hidden;
}
.menu > li{ 
  list-style:none; 
  flex:0 1 auto; 
  min-width:0; 
  text-align:center;
  position:relative;
}

/* Row container */
.menu > li > .row{ 
  display:flex; 
  align-items:center; 
  gap:6px; 
  padding:0; 
  border-radius:8px;
  position:relative;
}

/* Ana kategori linkleri */
.menu > li > a,
.menu > li > .row > a{
  display:block;
  font-family:var(--font-nav);
  font-weight:700;
  letter-spacing:.005em;
  line-height:1.1;
  padding:6px 6px;
  border-radius:8px;
  font-size:clamp(12px,0.85vw,19px);
  color:var(--text);
}
.menu > li > a:hover,
.menu > li > .row > a:hover{ background:rgba(0,0,0,.035) }

/* Caret butonu - masaüstünde gizli */
.menu > li > .row .caret {
  display:none;
  background:transparent;
  border:none;
  padding:8px;
  cursor:pointer;
  color:var(--text);
  font-size:18px;
  line-height:1;
  transition:transform 0.2s ease;
  flex-shrink:0;
}

/* Dropdown - masaüstü */
.menu > li .dropdown{
  display:none; 
  position:absolute; 
  left:0; 
  top:calc(100% + 6px); 
  min-width:260px;
  background:#fff; 
  border:1px solID var(--border); 
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.08); 
  padding:10px; 
  z-index:1000;
}

/* Masaüstü hover */
.menu > li:hover .dropdown,
.menu > li:focus-within .dropdown{ 
  display:grid;
}

.menu > li .dropdown a{
  font-family:var(--font-nav); 
  font-weight:600; 
  letter-spacing:.02em;
  padding:10px 12px; 
  border-radius:8px; 
  color:#111827;
  font-size:clamp(14px,1.2vw,18px);
}
.menu > li .dropdown a:hover{ background:#f3f4f6 }

/* =================== MOBİL MENÜ (KATEGORİLER) =================== */
@media (max-width:900px){
  .hamburger{ display:flex }
  
  /* Kategori menüsü başlangıçta gizli */
  #catrow{ display:none }
  body.menu-open #catrow{ display:block }
  
  /* Menü dikey liste */
  .menu{
    flex-direction:column; 
    align-items:flex-start; 
    gap:0;
    white-space:normal; 
    overflow:visible;
  }
  
  .menu > li{ 
    width:100%; 
    text-align:left;
  }
  
  /* Row tam genişlikte */
  .menu > li > .row {
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid var(--border);
    padding:0;
  }
  
  /* Ana link */
  .menu > li > .row > a{
    flex:1;
    padding:14px 16px;
    border-bottom:none !important;
    border-radius:0;
    font-size:16px;
    letter-spacing:.01em;
  }
  
  /* Caret butonu göster */
  .menu > li > .row .caret {
    display:flex !important;
    align-items:center;
    justify-content:center;
    padding:14px 16px;
    min-width:50px;
    font-size:20px;
  }
  
  /* Açıkken caret dönsün */
  .menu > li.open > .row .caret {
    transform:rotate(180deg);
  }
  
  /* Dropdown mobilde */
  .menu > li .dropdown{ 
    position:static !important;
    display:none !important;
    box-shadow:none !important;
    border:none !important;
    border-radius:0 !important;
    margin:0 !important;
    padding:0 !important;
    background:#f9fafb !important;
    min-width:auto !important;
  }
  
  /* Açık olunca göster */
  .menu > li.open .dropdown{ 
    display:block !important;
  }
  
  /* Alt menü linkleri */
  .menu > li .dropdown a{ 
    display:block !important;
    padding:12px 16px 12px 36px !important;
    font-size:15px !important;
    color:#374151 !important;
    border-bottom:1px solid #e5e7eb !important;
  }
  
  .menu > li .dropdown a:last-child {
    border-bottom:none !important;
  }
  
  .menu > li .dropdown a:hover {
    background:#f3f4f6 !important;
  }
  
  /* Hover efektini mobilde devre dışı bırak */
  .menu > li:hover .dropdown {
    display:none !important;
  }
  
  .menu > li.open:hover .dropdown {
    display:block !important;
  }
}

/* =================== ANASAYFA SLIDER =================== */
.slider{
  position:relative; border:1px solid var(--border); border-radius:8px;
  overflow:hidden; margin:16px 0 24px; background:#000;
  height:var(--slider-mobile-h);
}
@media (min-width:768px){ .slider{ height:360px } }
@media (min-width:1024px){ .slider{ height:420px } }
@media (min-width:1280px){ .slider{ height:480px } }

.slides{ position:relative; width:100%; height:100% }
.slide{ position:absolute; inset:0; opacity:0; transition:opacity .5s ease; background:#000 }
.slide.active{ opacity:1 }
.slide img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
  filter:brightness(.9);
}
.slide a{ position:absolute; inset:0; display:block }

.arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:999px; border:1px solid rgba(255,255,255,.6);
  background:rgba(0,0,0,.25); color:#fff; font-size:22px;
  display:grid; place-items:center; cursor:pointer; z-index:5;
}
.arrow:hover{ background:rgba(0,0,0,.4) }
.arrow.prev{ left:12px } .arrow.next{ right:12px }
.dots{
  position:absolute; left:0; right:0; bottom:12px;
  display:flex; gap:8px; justify-content:center; z-index:5;
}
.dot{
  width:9px; height:9px; border-radius:999px; background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.75); cursor:pointer;
}
.dot.active{ background:#fff }

/* =================== GRID / ÜRÜN KARTLARI =================== */
.section{ padding:16px 0 48px }
.toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px }
.pill{
  display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px;
  border:1px solid var(--border); background:#fff; font-size:12px; color:#111827;
}
.grid{ display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); gap:16px }
@media (min-width:640px){ .grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1024px){ .grid{ grid-template-columns:repeat(4,minmax(0,1fr)) } }

.card{
  border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; background:#fff; display:flex; flex-direction:column;
}
.card .thumb{
  display:block; aspect-ratio:var(--card-aspect-mobile);
  overflow:hidden; background:#f3f4f6; border-bottom:1px solid var(--border);
}
@media (min-width:1024px){ .card .thumb{ aspect-ratio:var(--card-aspect-desktop) } }
.card .thumb img{ width:100%; height:100% !important; object-fit:cover !important; object-position:center; display:block }
.card .body{ padding:12px 14px; display:flex; flex-direction:column; gap:12px }
.title{
  font-family:var(--font-title);
  font-weight:700; font-size:16px; line-height:1.25;
}
.muted{ display:none !important }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; border-radius:12px; padding:0 14px; font-weight:700;
  border:1px solid var(--border); background:#fff;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:.02em;
}
.btn:hover{ box-shadow:0 10px 20px rgba(0,0,0,.06) }
.btn.whatsapp{ background:#25D366; border-color:#25D366; color:#fff; width:100% }
.btn.whatsapp:hover{ filter:brightness(.95) }
.card .title-link:hover .title{ text-decoration:underline }

/* =================== HAKKIMIZDA & İLETİŞİM =================== */
.about-contact{ display:grid; gap:24px; margin:32px 0 24px }
@media (min-width:900px){
  .about-contact{ grid-template-columns:1.2fr .8fr; align-items:start }
  .about{ order:1 } .contact{ order:2 }
}
.ac-grid{ display:grid; grid-template-columns:1fr; gap:24px }
@media (min-width:900px){ .ac-grid{ grid-template-columns:1.2fr .8fr } }

.ac-col h3{
  font-family:var(--font-title);
  font-weight:600; font-size:clamp(18px,1.6vw,24px);
  letter-spacing:.01em; margin:0 0 8px;
}
.about-copy{
  font-family:var(--font-text); color:#334155;
  font-size:clamp(14px,1.2vw,16px); line-height:1.7; max-width:62ch; margin:0;
}

/* İletişim listesi */
.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.contact-list li{ display:flex; align-items:center; gap:10px }
.contact-list .ico{ display:inline-flex; width:20px; height:20px; min-width:20px; color:#111827; line-height:0 }
.contact-list .ico svg{ width:100%; height:100%; display:block; fill:currentColor; stroke:currentColor; stroke-width:1.5 }
.contact-list a{ text-decoration:none; border-bottom:1px solid transparent }
.contact-list a:hover{ border-color:#e2e8f0 }

/* WhatsApp & Instagram renkleri */
.contact-list li.whatsapp{ color:#25D366 }
.contact-list li.whatsapp a{ color:#25D366; border-bottom:1px solid transparent }
.contact-list li.whatsapp a:hover{ border-color:#25D366 }
.contact-list li.instagram{ color:#E1306C }
.contact-list li.instagram a{ color:#E1306C; border-bottom:1px solid transparent }
.contact-list li.instagram a:hover{ border-color:#E1306C }
.contact-list li.instagram .ig{ width:22px; height:22px }

/* =================== KÜÇÜK FOOTER =================== */
.site-foot{
  border-top:1px solid var(--border); color:#64748b;
  font-size:12px; padding:10px 0 16px; background:#fff;
}

/* =================== FULL-BLEED HEADER =================== */
header > .container,
#catrow > .container,
.header-wrap > .container,
.toprow > .container{
  max-width:none;
  padding-left:0;
  padding-right:0;
}

#catrow{
  position:relative;
  z-index:0;
}
#catrow::before{
  content:"";
  position:absolute;
  top:-1px; bottom:-1px;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:#f7f7f2;
  border-top:1px solid #e5e7eb;
  border-bottom:1px solid #e5e7eb;
  z-index:-1;
}

/* =================== KATEGORİ MENÜSÜ ÖZEL AYARLAR =================== */
#catrow .menu{
  display:flex;
  flex-wrap:nowrap;
  white-space:nowrap;
  justify-content:center;
  align-items:center;
  gap:clamp(6px, 0.7vw, 12px);
  margin:0;
  padding:8px 10px;
  list-style:none;
}
#catrow .menu > li{
  flex:0 1 auto;
  min-width:0;
  text-align:center;
}
#catrow .menu > li > a,
#catrow .menu > li > .row > a{
  display:block;
  font-family:"Cormorant Garamond", serif;
  font-weight:1000;
  line-height:1.2;
  padding:6px 8px;
  border-radius:8px;
  font-size:clamp(14px, 1.05vw, 54px);
  letter-spacing:.01em;
  word-spacing:.06em;
  color:#0f172a;
}
#catrow .menu > li > a:hover,
#catrow .menu > li > .row > a:hover{ background:rgba(0,0,0,.035) }

/* Dar masaüstü ayarları */
@media (max-width:1400px){
  #catrow .menu{ gap:clamp(6px, 0.8vw, 12px) }
  #catrow .menu > li > a,
  #catrow .menu > li > .row > a{ font-size:clamp(12px, 0.74vw, 18px) }
}
@media (max-width:1200px){
  #catrow .menu{ gap:clamp(4px, 0.7vw, 10px) }
  #catrow .menu > li > a,
  #catrow .menu > li > .row > a{ font-size:clamp(11px, 0.70vw, 16px) }
}

/* Mobilde dikey liste (kategori barı) */
@media (max-width:900px){
  #catrow .menu{
    flex-direction:column; 
    white-space:normal; 
    gap:0; 
    padding:0;
  }
  #catrow .menu > li{ 
    width:100%; 
    text-align:left;
  }
  #catrow .menu > li > a,
  #catrow .menu > li > .row > a{
    padding:14px 16px; 
    border-radius:0; 
    font-size:16px;
    font-weight:700;
  }
}

/* =================== ULTIMATE FIX - DROPDOWN =================== */
@media (max-width: 900px) {
  .menu > li .dropdown {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  
  .menu > li.open .dropdown {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  .menu > li:hover .dropdown {
    display: none !important;
    visibility: hidden !important;
  }
  
  .menu > li.open:hover .dropdown {
    display: block !important;
    visibility: visible !important;
  }
  
  .menu > li:focus-within .dropdown {
    display: none !important;
  }
  
  .menu > li.open:focus-within .dropdown {
    display: block !important;
  }
}

/* =================== KATEGORİ ÜST ÇİZGİSİNİ KALDIR =================== */
.catrow {
  border-top: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
#catrow::before {
  border-top: none !important;
}

/* ===================== LOGO BÜYÜTME ===================== */
.logo-img{
  height:70px !important;
}
@media (max-width:640px){
  .logo-img{
    height:48px !important;
  }
}

/* ===================== ARAMA ÇUBUĞU GENİŞLİK (DESKTOP) ===================== */
@media (min-width:901px){
  .search.large{
    width:260px !important; 
    max-width:100%;
  }
}

/* ===================== MOBİL HEADER DÜZENİ ===================== */
@media (max-width: 900px) {

  /* Sticky'yi mobilde kapat, sayfa normal scroll etsin */
  header {
    position: static !important;
  }

  .toprow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    position: relative;
    padding: 0 16px;
    gap: 0;
  }

  .toprow .hamburger {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }

  .toprow .logo {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logo-img {
    height:58px !important;
  }

  .search.large {
    width: 100%;
    max-width: 340px;
    margin: 6px auto 10px;
  }
}

/* MOBİL HEADER: burger + logo aynı satırda, altında arama */
@media (max-width: 900px) {

  .toprow {
    display: flex !important;
    flex-wrap: wrap !important;        /* 2. satıra izin ver */
    align-items: center;
    justify-content: center;           /* LOGO’YU ORTALAR */
    position: relative;
    gap: 8px;
    padding: 0 16px;
  }

  /* Burger solda, satırın soluna sabit */
  .toprow .hamburger {
    display: flex !important;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }

  /* Logo ortada, burger’den bağımsız */
  .toprow .logo {
    flex: 0 0 auto;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ARAMA: ikinci satır, tam genişlik */
 .search.large {
  flex: 0 0 100% !important;
  max-width: 330px;
  margin: 0 auto 4px;     /* en yukarı yaklaşmış hâl */
}
}


@media (max-width: 900px) {
  .toprow {
    gap: 2px;  /* 8px yerine 2px, istersen 0 da yapabilirsin */
  }

  .search.large {
    margin: 0 auto 4px !important;  /* ekstra aşağı boşluk da minimum */
  }
}

/* ===================== MOBİL HEADER — TEMİZ VE SON HAL ===================== */
@media (max-width: 900px) {

  /* Sticky'yi kapat: header sayfayla birlikte aksın */
  header {
    position: static !important;
  }

  /* Üst satır: burger solda, logo ortada */
  .toprow {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    height: auto !important;      /* artık 70px’e zorlanmıyor */
    padding: 8px 16px 0;
    gap: 0 !important;
    flex-wrap: wrap !important;   /* arama alt satıra insin */
  }

  /* Burger sola sabit */
  .toprow .hamburger {
    position: absolute !important;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex !important;
    margin: 0 !important;
  }

  /* Logo ortada */
  .toprow .logo {
    margin: 0 auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logo-img {
    height: 70px !important;  /* istersen 58px yap */
  }

  /* ARAMA: hemen logonun ALTINA gelsin */
  .search.large {
    flex: 0 0 100%;
    max-width: 330px;
    margin: 4px auto 6px !important;   /* YUKARI YAKLAŞTIRILMIŞ */
  }
}
/* MOBİLDE ARAMA ÇUBUĞUNU BİRAZ AŞAĞI AL */
@media (max-width: 900px) {
  .search.large{
    margin: 35px auto 6px !important;  /* üstten 16px boşluk: burgerden ayrılır */
  }
}

/* LOGO ÇERÇEVE + GÖLGE EFEKTİ */
.logo {
  padding: 6px 14px;                 /* logonun etrafında boşluk */
  border-radius: 999px;              /* yuvarlak hatlı kapsayıcı */
  background: var(--cat-bg);         /* sitenin kırık beyazı */
  box-shadow: 0 4px 12px rgba(15,23,42,0.12);
  border: 1px solid rgba(148,163,184,0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Hover’da çok hafif büyüme (isteğe bağlı) */
.logo:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15,23,42,0.18);
  transition: all 0.18s ease-out;
}


/* LOGO GÖRSELİNE RADIUS */
.logo-img {
  border-radius: 16px;     /* 8–16 arası güzel durur */
}