/************** ÜRÜN SAYFASI – Tamamı Baştan **************/
:root{
  --accent:#7c3aed;
  --bg:#fff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;
  --radius:16px;
  --grid-w:1200px;

  --slider-mobile-h: 280px; /* ana sayfa için referans (bu sayfada ezilmiyor) */

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

/* Temel */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); }
body{
  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:var(--grid-w); margin:0 auto; padding:0 16px; }

/* Header */
header{ position:sticky; top:0; z-index:30; background:#fff; border-bottom:1px solid var(--border); }
.header-wrap{ padding:10px 0; }
.toprow{ display:flex; align-items:center; gap:12px; }
.catrow{ margin-top:10px; }

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

.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;
}
@media (max-width:900px){ .hamburger{ display:flex; } }

.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-drop{
  position:absolute; left:0; right:0; top:100%; margin-top:8px; z-index:1200;
  background:#fff; border:1px solid var(--border); border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.08); padding:6px; max-height:360px; overflow:auto;
}
.search-item{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; }
.search-item img{ width:64px; aspect-ratio:16/9; object-fit:contain; background:#000; border-radius:6px; }
.menu{ display:flex; gap:14px; align-items:center; white-space:nowrap; }
.menu > li{ list-style:none; position:relative; }
.menu > li > .row{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; }
.menu > li > .row > a{ font-family:var(--font-nav); font-weight:500; letter-spacing:.03em; font-size:clamp(17px,1.6vw,20px); }
.menu > li > .row:hover{ background:#f8fafc; }

/* Mobil menü */
@media (max-width:900px){
  #catrow{ display:none; }
  body.menu-open #catrow{ display:block; }
  .menu{ flex-direction:column; align-items:flex-start; gap:0; }
  .menu > li{ width:100%; }
  .menu > li > .row{ width:100%; padding:12px 14px; border-bottom:1px solid var(--border); border-radius:0; }
}

/* Genel section / grid / card */
.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: 4/5; overflow:hidden; background:#f3f4f6; border-bottom:1px solid var(--border); }
@media (min-width:1024px){ .card .thumb{ aspect-ratio: 3/4; } }
.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:600; letter-spacing:.01em; line-height:1.25; font-size:16px; }
.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;
}
.btn.whatsapp{ background:#25D366; border-color:#25D366; color:#fff; width:100%; }

/* Footer */
footer{ border-top:1px solid var(--border); padding:30px 0; margin-top:40px; color:#475569; font-size:14px; }

/* ---------------- ÜRÜN DETAY DÜZENİ (asıl istenen) ---------------- */

/* Mobil: tek sütun (üstten alta doğru: görseller → başlık → açıklama → buton) */
.product-wrap{ display:block; margin-top:16px; }

/* Masaüstü: solda görseller, sağda bilgi (başlık, açıklama, buton) */
@media (min-width:900px){
  .product-wrap{
    display:grid !important;
    grid-template-columns: minmax(0,1.15fr) minmax(0,1fr) !important;
    gap:24px;
    align-items:start;
  }
  .product-media{ order:1 !important; min-width:0; }
  .product-info{  order:2 !important; min-width:0; display:flex; flex-direction:column; gap:12px; }
}

/* Ürün slider (bu sayfaya özel; ana sayfadaki slider kurallarından bağımsız) */
.p-slider{
  width:100%;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
  overflow:hidden;
  height:420px;          /* mobil/orta */
  position:relative;
}
@media (min-width:768px){  .p-slider{ height:520px; } }
@media (min-width:1200px){ .p-slider{ height:560px; } }

.slides{ position:relative; width:100%; height:100%; }
.slide{ position:absolute; inset:0; opacity:0; transition:opacity .4s ease; background:#fff; }
.slide.active{ opacity:1; }
.p-slider .slide img{ width:100%; height:100%; object-fit:contain; object-position:center; }

/* Slider okları / noktaları */
.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,.15); color:#fff; font-size:22px;
  display:grid; place-items:center; cursor:pointer; z-index:5;
}
.arrow.prev{ left:12px; }
.arrow.next{ right:12px; }
.arrow:hover{ background:rgba(0,0,0,.25); }

.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(0,0,0,.25); border:1px solid rgba(255,255,255,.6); }
.dot.active{ background:#000; }

/* Sağ kolon tipografi */
.product-info h1.title{ font-size:clamp(22px,3.2vw,34px); margin:0 0 12px 0; }
.product-desc{ color:#1f2937; font-size:clamp(15px,1.6vw,17px); line-height:1.7; }
.product-desc p{ margin:0 0 10px 0; }
.product-desc ul, .product-desc ol{ margin:8px 0 12px 18px; }
.product-info .btn.whatsapp{ width:100%; height:48px; font-size:15px; margin-top:8px; }

/* Büyük ekranda görseli sticky (isteğe bağlı) */
@media (min-width:1000px){
  .product-media{ position:sticky; top:90px; }
}

/* Benzer ürünler başlığı ve kart başlığına küçük düzeltme */
.section[aria-label="Benzer ürünler"] .toolbar{ margin-top:8px; margin-bottom:16px; }
.card .title{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ======= NAVBAR / MENÜ DÜZELTME ======= */

/* Ana satır: tek satır, aralıklı */
.menu{
  display:flex;
  gap:14px;
  align-items:center;
  white-space:nowrap;
  overflow:visible;
}
.menu > li{ list-style:none; position:relative; }

/* Üst satır (kategori başlıkları) */
.menu > li > .row{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:10px; position:relative; z-index:2;
}
.menu > li > .row:hover{ background:#f8fafc; }

/* Desktop'ta caret gizli olsun */
@media (min-width:901px){
  .menu > li > .row > .caret{ display:none !important; }
}

/* ---- DROPDOWN (DESKTOP) ---- */
/* Alt kategorileri normalde GİZLE */
.menu > li .dropdown{
  display:none !important;
  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;
  white-space:normal;   /* içerik kutu içinde sarılsın */
}
/* Hover/focus veya .open olduğunda GÖSTER */
.menu > li:hover .dropdown,
.menu > li:focus-within .dropdown,
.menu > li.open .dropdown{
  display:grid !important;
}
.menu > li .dropdown a{
  display:block;
  padding:10px 12px; border-radius:8px; color:#111827;
}
.menu > li .dropdown a:hover{ background:#f3f4f6; }

/* ---- MOBİL MENÜ ---- */
@media (max-width:900px){
  #catrow{ display:none; }
  body.menu-open #catrow{ display:block; }

  .menu{ flex-direction:column; align-items:flex-start; gap:0; white-space:normal; }
  .menu > li{ width:100%; }
  .menu > li > .row{
    width:100%; padding:12px 14px; border-bottom:1px solid var(--border); border-radius:0;
  }
  .menu > li > .row > .caret{
    display:flex !important; margin-left:auto;
    width:34px; height:34px; border-radius:8px;
    border:1px solid var(--border); background:#fff;
    align-items:center; justify-content:center; cursor:pointer; font-size:14px;
  }
  .menu > li .dropdown{
    position:static; box-shadow:none; border:none; margin:0; padding:0; display:none !important;
  }
  .menu > li.open .dropdown{ display:block !important; }
  .menu > li .dropdown a{ display:block; padding:10px 20px; border-bottom:1px solid var(--border); }
}


/* SADECE MASAÜSTÜNDE: logo ile kategori menüsü arasını aç */
@media (min-width: 901px) {
  .header-wrap {
    padding-bottom: 3px !important;  /* logonun altını biraz boşalt */
  }

  .catrow {
    margin-top: 1px !important;      /* menüyü biraz aşağı çek */
  }
}