/* =========================
   Restaurant Menu – Optimized CSS
   (Görsel sonuç korunarak sadeleştirilmiş)
   ========================= */

/* Tema değişkenleri */
:root{
  --rm-font: "Signika", Sans-serif;
  --rm-primary: #BC9873;   /* başlık/price rengi */
  --rm-text:    #4E3C32;   /* ana metin rengi  */
  --rm-accent:  #4e3c45;   /* hover / aktif ton */
  --rm-border:  #eee;
  --rm-chip:    #ddd;
  --rm-gray-50:#f7f7f9;
  --rm-gray-100:#f6f6f6;
  --rm-gray-400:#6b7280;
}

/* Layout */
.rm-container{font-family:var(--rm-font);display:flex;gap:24px}
.rm-main{flex:1}

/* Sidebar */
.rm-sidebar{width:240px;flex:0 0 240px;border-right:1px solid var(--rm-border);padding-right:16px;position:sticky;top:15%;height:fit-content}
.rm-sidebar h3{margin:0 0 8px;font-size:16px;font-weight:600}
.rm-cat-list{display:flex;flex-direction:column;gap:8px}
.rm-cat-link{display:block;padding:8px 10px;border-radius:8px;text-decoration:none;background:var(--rm-gray-50);color:#111}
.rm-cat-link:hover{background:var(--rm-accent);color:#fff}

/* Mobil üst bar (sticky + yatay kaydır) */
.rm-topbar{display:none;position:sticky;top:0;background:#fff;z-index:5;padding:8px 0;border-bottom:1px solid var(--rm-border);margin-bottom:8px}
.rm-topbar-scroll{display:flex;gap:8px;overflow-x:auto;padding:15px 8px}
.rm-cat-chip{flex:0 0 auto;padding:8px 12px;border:1px solid var(--rm-chip);border-radius:999px;text-decoration:none;color:#111;white-space:nowrap}
.rm-cat-chip:hover{background:var(--rm-gray-100)}

/* Arama alanı + spinner + meta */
.rm-search-wrap{position:relative;margin:8px 0 16px}
#rm-search{width:100%;padding:12px 40px 12px 40px;border:1px solid #ddd;border-radius:10px;font-size:16px}
/* Spinner solda olduğu için sol padding’i artır */
#rm-search.is-loading{padding-left:36px}
.rm-spinner{
  display:none;position:absolute;left:15px;top:35%;width:16px;height:16px;margin-top:-8px;
  border:2px solid #cbd5e1;border-top-color:#6b7280;border-radius:50%;animation:rmspin .6s linear infinite
}
/* input is-loading iken spinner görünür */
#rm-search.is-loading + .rm-spinner{display:block}
@keyframes rmspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.rm-spinner{animation:none;border-top-color:#94a3b8}}
.rm-search-meta{margin-top:6px;font-size:12px;color:var(--rm-gray-400)}

/* Bölümler */
.rm-sections{display:block}
.rm-section{margin-bottom:32px}
.rm-section h2{font-size:26px;color:var(--rm-primary);margin:0 0 12px;padding-bottom:6px}

/* Kart grid */
.rm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100%,1fr));gap:12px}

/* Kart */
.rm-card{
  display:flex;flex-direction:row;border:1px solid var(--rm-border);border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:rgba(93,62,188,.04) 0 6px 24px
}
.rm-card-media{
  width:200px;height:150px;background-size:contain;background-position:center;background-repeat:no-repeat
}
.rm-card-body{padding:24px 24px 24px 0}
.rm-card-title{color:var(--rm-text);margin:0 0 6px;font-size:21px;font-weight:600}
.rm-card-price{color:var(--rm-primary);font-weight:700;font-size:18px}
.rm-card-desc{margin:0 0 8px;color:var(--rm-text);font-size:14px}
.rm-card-tags{display:flex;gap:6px;flex-wrap:wrap}
.rm-tag{background:var(--rm-text);color:#fff;border:1px solid #e2e8f0;border-radius:999px;padding:2px 8px;font-size:12px}
.rm-empty{color:#666}

/* Aktif kategori vurguları */
.rm-cat-link.is-active{background:#bc987363;border-left:3px solid var(--rm-primary);font-weight:600}
.rm-cat-link.is-active:hover{color:var(--rm-accent)}
.rm-cat-chip.is-active{background:#f1f5f9;border-color:#cbd5e1;font-weight:600}

/* Mobil uyarlamalar */
@media (max-width:768px){
  .rm-container{flex-direction:column;gap:12px}
  .rm-sidebar{display:none}
  .rm-topbar{display:block}
  .rm-card-media{width:300px;height:120px}
  .rm-card-body{padding:10px}
  /* Mobil sticky kategori barında scrollbar'ı gizle, kaydırmayı koru */
  .rm-topbar-scroll{
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain
  }
  .rm-topbar-scroll::-webkit-scrollbar{display:none}
}


/* Tag öneri dropdown */
.rm-suggest{
  position: absolute;
  left: 0; right: 0; top: calc(100% + 6px);
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  max-height: 280px;
  overflow-y: auto;
  z-index: 40;
}

.rm-suggest-list{
  list-style: none;
  margin: 0;
  padding: 6px;
}

.rm-suggest-item{
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}

.rm-suggest-item:hover,
.rm-suggest-item.is-active{
  background: #f6f6f6;
}

.rm-suggest-item .name{ font-size: 14px; color: #111; }
.rm-suggest-item .count{ font-size: 12px; color: #6b7280; }

/* Mobilde taşmasın */
@media (max-width: 768px){
  .rm-suggest{ left: 0; right: 0; }
}

/* Desc. mobilde 2 satır sonra kes */
@media (max-width: 768px){
  .rm-card-desc{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
}

/* ===== Modal (Ürün Detay) ===== */
.rm-modal{position:fixed;inset:0;display:none;z-index:9999}
.rm-modal.is-open{display:block}
.rm-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.rm-modal-dialog{
  position:relative; z-index:1; max-width:820px; margin:5vh auto; background:#fff;
  border-radius:16px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.25)
}
.rm-modal-close{
    right: 10px;
    position: absolute;
    top: 10px;
    border-radius: 50% !important;
    border: 1px solid #000 !important;
    padding: 0px 6px 0px 6px !important;
    background: #000 !important;
    color: #fff !important;
}
.rm-modal-close:hover{
	background: var(--rm-accent)!important;
}
.rm-modal-body{font-family:var(--rm-font); padding:16px 16px 24px}
.rm-modal-loading,.rm-modal-error{padding:40px;text-align:center;color:#444}

/* Detay içeriği */
.rm-item-media{width:100%; padding-top:40%; background-size:contain; background-position:center; background-repeat: no-repeat}
.rm-item-price{font-weight:700; font-size:20px; margin:14px 0 4px; color:#BC9873}
.rm-item-title{color:var(--rm-text); margin:0 0 8px; font-size:22px}
.rm-item-desc{color:var(--rm-text)}
.rm-item-tags{margin-top:12px; display:flex; gap:6px; flex-wrap:wrap}
.rm-item-tags .rm-tag{background:var(--rm-text); border:1px solid #e2e8f0; border-radius:999px; padding:4px 10px; font-size:12px}

/* Body scroll kilidi */
body.rm-modal-lock{overflow:hidden}
@media (max-width: 768px){
  .rm-modal-dialog{margin:0; border-radius:0}
  .rm-item-media{padding-top:62%}
}

/* === Modal görünürlüğü (JS hidden'ı kaldırınca göster) === */
.rm-modal[aria-hidden="false"],
.rm-modal:not([hidden]) {
  display: block;
}

/* === JS body'ye rm-no-scroll ekliyor; sayfayı kilitle === */
body.rm-no-scroll {
  overflow: hidden;
}

/* === Modal içi temel stiller (sadece işlev için) === */
.rm-modal-content { padding: 16px; }

/* Arkaplan görsel alanı; JS arka plan atayınca .show() ile görünür */
.rm-modal-media{
  width: 100%;
  padding-top: 40%;                 /* 16:9 ~ 40% oran */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: none;                    /* JS .show() yapıyor */
}

/* Başlık / fiyat / açıklama (senin renk paletine uygun) */
.rm-modal-title{ margin:0 0 6px; font-size:22px; color: var(--rm-text); }
.rm-modal-price{ margin:0 0 8px; font-weight:700; color: var(--rm-primary); }
.rm-modal-desc{ color: var(--rm-text); }

/* Etiketler satır satır dizilsin */
.rm-modal-tags{ display:flex; flex-wrap:wrap; gap:6px; }


/* ===== Fullscreen Loader (sayfa karart + merkez spinner) ===== */
.rm-loader{position:fixed; inset:0; display:none; z-index:9998;}
.rm-loader.is-open{display:block;}
.rm-loader[hidden]{display:none!important;}
.rm-loader-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.60);

}

/* Merkezde duran kap: sadece konumlandırır */
.rm-loader-spinner{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:44px;
  height:44px;
}

/* Dönen halka: animasyon burada (translate bozulmaz) */
.rm-loader-spinner::before{
  content:"";
  box-sizing:border-box;
  position:absolute;
  inset:0;
  border-radius:50%;
  border:4px solid rgba(255,255,255,.45);
  border-top-color:#ffffff;
  animation: rmspin .7s linear infinite;
}

/* Loader/Modal açıkken body scroll kilidi */
body.rm-modal-lock{overflow:hidden}


/* ==== Modal Sadece AÇILIŞ Animasyonu ==== */

/* Modal görünürken (aria-hidden="false") açılış animasyonlarını çalıştır */
.rm-modal[aria-hidden="false"] .rm-modal-backdrop{
  animation: rmBackdropIn .22s ease both;
}
.rm-modal[aria-hidden="false"] .rm-modal-dialog{
  animation: rmDialogIn .26s cubic-bezier(.22,.61,.36,1) both;
}

/* Arkaplan için fade-in */
@keyframes rmBackdropIn{
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Dialog için aşağıdan hafif yükselip görünme */
@keyframes rmDialogIn{
  from { transform: translateY(12px) scale(.98); opacity: 0; }
  to   { transform: translateY(0)    scale(1);   opacity: 1; }
}

/* Hareket hassasiyeti olan kullanıcılar için animasyonu kapat */
@media (prefers-reduced-motion: reduce){
  .rm-modal[aria-hidden="false"] .rm-modal-backdrop,
  .rm-modal[aria-hidden="false"] .rm-modal-dialog{
    animation: none;
  }
}

/* ==== Modal Sadece KAPANIŞ Animasyonu ==== */
/* Kapanış tetiklemek için .is-closing sınıfı yeterlidir */
.rm-modal.is-closing .rm-modal-backdrop{
  animation: rmBackdropOut .22s ease both;
}
.rm-modal.is-closing .rm-modal-dialog{
  animation: rmDialogOut .26s cubic-bezier(.22,.61,.36,1) both;
}

/* Fade-out */
@keyframes rmBackdropOut{
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Aşağı doğru hafif kayarak kapanma */
@keyframes rmDialogOut{
  from { transform: translateY(0) scale(1);   opacity: 1; }
  to   { transform: translateY(12px) scale(.98); opacity: 0; }
}

/* Hareket hassasiyeti olan kullanıcılar için animasyonu kapat */
@media (prefers-reduced-motion: reduce){
  .rm-modal.is-closing .rm-modal-backdrop,
  .rm-modal.is-closing .rm-modal-dialog{
    animation: none;
  }
}


/* ==== Search Bar Clear Butonu ==== */
.rm-search-wrap { position: relative; } /* zaten var ise tekrar yazmanın zararı yok */

.rm-clear{
  justify-content:center;
  align-items:center;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: red!important;
  border: 1px solid #000;
  cursor: pointer;
  display: none;          /* varsayılan: gizli */
  padding: 0;
  line-height: 0;
}
.rm-clear::before{
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  /* Beyaz X (inline SVG) */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <path d='M6 6L18 18M6 18L18 6' stroke='%23FFFFFF' stroke-width='4' stroke-linecap='round'/>\
</svg>");
}
.rm-clear:hover{ background:#000!important; }

/* Input'ta yazı varsa wrapper'a .has-value gelir ve X görünür */
.rm-search-wrap.has-value .rm-clear{display:flex;}

/* Yerleşik WebKit X butonunu gizle (çakışmasın) */
#rm-search::-webkit-search-cancel-button{
  -webkit-appearance:none; appearance:none; display:none;
}


/* ===============================
   JITTER FİX — grid tabanlı sabitleme
   (Clear butonunun aşağı kaymasını engeller)
   =============================== */
.rm-search-wrap{
  /* mevcut position/margin korunur; ayrıca grid yapıyoruz */
  display: grid;
  grid-template-areas: "field" "meta";
  grid-auto-rows: auto;
}
#rm-search{ grid-area: field; }
.rm-search-meta{ grid-area: meta; }

/* Clear: input satırına sabitlenir, absolute gerekmez */
.rm-search-wrap .rm-clear{
  grid-area: field;
  justify-self: end;
  align-self: center;

  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  right: 20px !important;
  margin: 0 !important;
  transform: none !important;

  z-index: 2;
  display: block !important;             /* hep yerinde dursun */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .12s ease, visibility .12s ease,
              background .12s ease, border-color .12s ease;

  justify-content: center;
  align-items: center;
  display: flex !important;
  border:none!important;
  padding:0.5rem!important;
}

/* Yazı varken görünür (focus/hover şart değil) */
.rm-search-wrap.has-value .rm-clear,
#rm-search:not(:placeholder-shown) ~ .rm-clear{
  opacity: 1; visibility: visible; pointer-events: auto;
}