/* --------- Global --------- */
body{
  font-family:'Arial',sans-serif;
  margin:0;
  padding:0;
  background:linear-gradient(160deg,#fdf6f0,#f5f2ed);
  color:#333;
}

/* --------- Icon bar --------- */
.icon-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 20px;position:fixed;top:10px;width:calc(100% - 40px);z-index:1000;
}
.icon-left,.icon-right{display:flex;gap:18px;}
.icon-bar i{font-size:1.4em;cursor:pointer;transition:all .3s}
.icon-bar i:hover{color:#c7a17a;transform:scale(1.2)}

/* --------- Header & Logo --------- */
.header-wrap{display:flex;align-items:center;justify-content:center;padding:20px}
header{text-align:center;position:relative}
.logo-wrapper{
  position:relative;width:140px;height:140px;margin:0 auto;display:flex;align-items:center;justify-content:center;cursor:pointer
}
.logo-wrapper::before{
  content:"";position:absolute;inset:0;border-radius:50%;padding:6px;
  background:conic-gradient(from 0deg,purple 0deg 20deg,transparent 20deg 40deg,purple 40deg 60deg,transparent 60deg 80deg,purple 80deg 100deg,transparent 100deg 120deg,purple 120deg 140deg,transparent 140deg 160deg,purple 160deg 180deg,transparent 180deg 200deg,purple 200deg 220deg,transparent 220deg 240deg,purple 240deg 260deg,transparent 260deg 280deg,purple 280deg 300deg,transparent 300deg 320deg,purple 320deg 340deg,transparent 340deg 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 8px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 8px));
  animation:spin 6s linear infinite alternate;transition:all .3s ease
}
.logo-wrapper:hover::before{animation:none;background:purple}
.logo{width:120px;height:120px;border-radius:50%;overflow:hidden;border:4px solid #c7a17a;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.logo img{width:100%;height:100%;object-fit:cover}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

header h1{margin:15px 0 8px;font-size:2em;color:#3b2c2c}
header p{font-style:italic;color:#555;margin:0}

/* --------- Menu Container --------- */
.menu-container{max-width:1100px;width:100%;margin:0 auto 40px;padding:0 15px}

/* --------- Category --------- */
.category{margin-bottom:18px;border-radius:18px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.12);background:#fff}
.category:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.14);transition:transform .25s,box-shadow .25s}

/* Tek ok: pseudo ile; HTML’de arrow span YOK! */
.category-header{
  position:relative;padding:22px 56px 22px 24px;cursor:pointer;
  font-weight:700;letter-spacing:.5px;text-shadow:1px 1px 4px rgba(0,0,0,.6);
  background-size:cover;background-position:center;border-radius:18px 18px 0 0;
  color:var(--cat-text,#fff);font-family:var(--cat-font,Arial, sans-serif);font-size:var(--cat-size,32px)
}
.category-header::before{content:"";position:absolute;inset:0;background:var(--cat-overlay,rgba(0,0,0,.45));border-radius:inherit}
.category-header>*{position:relative;z-index:1}

/* Accordion container */
.category-content{
  background:var(--grid-bg,#fff);
  border-radius:0 0 18px 18px;
  max-height:0;overflow:hidden;padding:0 18px;
  transition:max-height .45s ease,padding .45s ease
}
.category-content.open{max-height:5000px;padding:18px}

/* --------- Subcategories --------- */
.subcategories{margin-top:10px}
.subcategory{margin:12px 0 0;border-radius:12px;overflow:hidden}
.subcategory summary{
  list-style:none;display:block;position:relative;cursor:pointer;user-select:none;
  padding:12px 48px 12px 14px;margin:0;border-radius:12px;font-weight:700;
  color:var(--subcat-text,#fff);font-family:var(--subcat-font,Arial, sans-serif);font-size:var(--subcat-size,20px)
}
.subcategory summary::-webkit-details-marker{display:none}
.subcategory summary::before{content:"";position:absolute;inset:0;background:var(--subcat-overlay,rgba(0,0,0,.35));border-radius:inherit;z-index:0}
.subcategory summary>*{position:relative;z-index:1}
.subcategory summary::after{
  content:"";position:absolute;right:16px;top:50%;transform:translateY(-50%) rotate(0deg);
  width:8px;height:8px;border-right:2.5px solid var(--arrow-color,#fff);border-bottom:2.5px solid var(--arrow-color,#fff);
  transform-origin:center;transition:transform .25s ease
}
.subcategory[open] summary::after{transform:translateY(-50%) rotate(-135deg)}

/* --------- Items --------- */
.items-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;padding:12px 4px 2px}
.item{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.08);transition:transform .2s ease,box-shadow .2s ease}
.item:hover{transform:translateY(-4px);box-shadow:0 10px 20px rgba(0,0,0,.15)}
.item img{width:100%;height:180px;object-fit:cover}
.item-content{background:var(--item-bg,#fff);font-family:var(--item-font,Arial, sans-serif);font-size:var(--item-size,16px);padding:12px 14px}
.item-name{font-weight:700;margin-bottom:6px;color:var(--item-name-color,#b8860b)}
.item-price{font-weight:700;color:var(--item-price-color,#b8860b);text-align:right}
.item-dots{border-bottom:2px dotted var(--item-dots-color,#b8860b)}
.item-desc{color:var(--item-desc-color,#b8860b)}

/* --------- Story Popup --------- */
.story-popup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.95);z-index:200;align-items:center;justify-content:center;flex-direction:column}
.story-header{width:90%;max-width:400px;display:flex;justify-content:flex-start;position:relative;margin-bottom:10px}
.story-progress-container{display:flex;flex:1;gap:3px;margin-left:10px}
.story-progress{flex:1;height:5px;background:rgba(255,255,255,.3);border-radius:3px;overflow:hidden}
.story-progress-inner{width:0%;height:100%;background:#fff;transition:width .05s linear}
.story-content{width:90%;max-width:400px;height:600px;background:#000;border-radius:20px;overflow:hidden;position:relative}
.story-content img{width:100%;height:100%;object-fit:cover}
.story-close{position:absolute;top:10px;right:15px;color:#fff;font-size:1.5em;cursor:pointer;z-index:5}
.story-btn{position:absolute;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.7);font-size:2em;cursor:pointer;z-index:5;user-select:none;padding:0 10px}
.story-btn.left{left:5px}.story-btn.right{right:5px}

/* --------- Responsive --------- */
@media (max-width:600px){
  header h1{font-size:1.6em}
  .logo-wrapper{width:100px;height:100px}
  .logo{width:80px;height:80px}
  .category-header{font-size:1.5em;padding:18px 52px 18px 18px}
  .item img{height:140px}
  .story-content{height:400px}
}

@media (max-width:768px){
  .items-grid{grid-template-columns:1fr}
}

/* Alt kategori kartı grid içinde tek satırda (full width) görünsün */
.items-grid > .subcategory{
  grid-column: 1 / -1;   /* tüm sütunları kapla */
  box-shadow: none;      /* ürün kartı gibi gölge almasın */
  background: transparent;
  margin: 8px 0 0;       /* dikey aralık */
}

/* Alt kategorinin içindeki ürün grid'i biraz daha sıkı olabilir */
.subcategory .items-grid{
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  padding: 12px 0 0;
}

/* Güvenlik: alt kategori asla ürün stilini miras almasın */
.items-grid > .subcategory .item{
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  border-radius: 16px;
}