/* Pricing page */
.pricing-title{
  text-align:center;
  font-weight:700;
  letter-spacing:.2px;
  margin: 6px 0 28px;
}

.pricing-grid{
  max-width: 1100px;
  margin: 0 auto;
}

.pricing-card{
  background:#fff;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  padding: 28px 26px;
  height: 100%;
  display:flex;
  flex-direction:column;
}

.pricing-head{
  text-align:center;
  margin-bottom: 16px;
}

.pricing-plan{
  margin:0;
  font-size: 22px;
  font-weight: 700;
}

.pricing-underline{
  width: 120px;
  height: 3px;
  margin: 12px auto 0;
  border-radius: 999px;
  opacity: .9;
}

.underline-purple{ background:#6f42ff; }
.underline-green{ background:#6ad08a; }

.pricing-note{
  margin: 18px 0 0;
  color:#6b7280;
  font-size: 13px;
}

.pricing-list{
  list-style:none;
  padding:0;
  margin: 8px 0 18px;
  flex:1;
}

.pricing-list li{
  display:flex;
  gap:10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.04);
  color:#111827;
  line-height: 1.35;
  font-size: 14px;
}

.pricing-list li:last-child{
  border-bottom:none;
}

.check{
  color:#22c55e;
  font-weight: 800;
  width: 18px;
  flex: 0 0 18px;
  margin-top: 1px;
}

.pricing-footer{
  margin-top: 18px;
  text-align:center;
}

.pricing-btn-purple{
  background:#6f42ff;
  border-color:#6f42ff;
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 700;
}

.pricing-btn-soft{
  background: #eaffef;
  border: 1px solid #d3f6dc;
  color:#1f9254;
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 600;
}

.pricing-btn-soft:hover{
  background:#dffbe7;
  color:#167a44;
}

.pricing-muted{
  margin-top: 8px;
  font-size: 12px;
  color:#9ca3af;
}

.pricing-price{
  margin-top: 26px;
}

.price-main{
  font-size: 18px;
  font-weight: 500;
  color:#111827;
}

.price-sub{
  margin-top: 6px;
  color:#6b7280;
  font-size: 13px;
}

.price-tax{
  margin-top: 16px;
  font-size: 12px;
  color:#9ca3af;
}

/* =====================================
   PANEL LAYOUT (stable)
   main: [left-panel][stage-area]
   left-panel: [left-side][items-wrapper]
===================================== */

.main{
  display: flex;
  height: calc(100vh - 56px);
  overflow: hidden;
}

/* Sol panel tek blok */
.left-panel{
  display: flex;
  flex: 0 0 auto;
  min-width: 0;
}

/* Stage alanı esnesin */
.stage-area{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ===== Panel konumları ===== */

/* LEFT: solda (navbar | items) */
.main.panelpos-left{ flex-direction: row; }
.main.panelpos-left .left-panel{ order: 0; flex-direction: row; }
.main.panelpos-left .stage-area{ order: 1; }

/* RIGHT: sağda (items | navbar) */
.main.panelpos-right{ flex-direction: row; }
.main.panelpos-right .stage-area{ order: 0; }
.main.panelpos-right .left-panel{ order: 1; flex-direction: row-reverse; }

/* TOP */
.main.panelpos-top{ flex-direction: column; }
.main.panelpos-top .left-panel{
  order: 0;
  width: 100%;
  flex-direction: row;
  border-bottom: 1px solid #cfcfcf;
}
.main.panelpos-top .stage-area{ order: 1; }

/* BOTTOM */
.main.panelpos-bottom{ flex-direction: column; }
.main.panelpos-bottom .stage-area{ order: 0; }
.main.panelpos-bottom .left-panel{
  order: 1;
  width: 100%;
  flex-direction: row;
  border-top: 1px solid #cfcfcf;
}

/* ===== Toggle: her zaman stage tarafında ===== */
.items-wrapper{ position: relative; overflow: visible; }

/* panel sağda -> stage solda -> toggle sol kenar */
.main.panelpos-right .sidebar__toggle{
  right: auto;
  left: -30px;
  border-radius: 8px 0 0 8px;
}

/* Küçük ekranlarda stage yok olmasın: paneli alta al */
@media (max-width: 980px){
  .main.panelpos-left,
  .main.panelpos-right{
    flex-direction: column;
  }
  .left-panel{
    width: 100%;
    order: 0;
    flex-direction: row;
  }
  .stage-area{
    order: 1;
  }
}

/* =========================================
   BOTTOM MODE (menu bar)
   left-side yatay bar, items üstte
========================================= */

.main.panelpos-bottom{
  flex-direction: column !important;
}

/* stage üstte kalsın */
.main.panelpos-bottom .stage-area{
  order: 0 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* left-panel altta kalsın ve column olsun:
   üst: items-wrapper
   alt: left-side (menu bar)
*/
.main.panelpos-bottom .left-panel{
  order: 1 !important;
  width: 100% !important;
  flex-direction: column !important; /* ✅ items üstte, menu altta */
  flex: 0 0 auto !important;
  border-top: 1px solid #cfcfcf;
  background: #dfe4ea; /* body gibi */
}

/* ===== MENU BAR (left-side -> bottom bar) ===== */
.main.panelpos-bottom .left-side{
  width: 100% !important;
  height: 78px !important;          /* bar yüksekliği */
  background: #2f3542;
  border-right: none !important;
  border-top: 1px solid #3d3d4f;
  overflow-x: auto !important;      /* çok buton varsa kaydır */
  overflow-y: hidden !important;
}

/* navbars artık yatay kayacak */
.main.panelpos-bottom .navbars{
  height: 100%;
}

/* aktif navbar (menü grubu) yatay dizilsin */
.main.panelpos-bottom .navbar{
  display: none;
  height: 100%;
  padding: 10px 10px !important;
  white-space: nowrap;
}

.main.panelpos-bottom .navbar.active{
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  align-items: center;
}

/* butonlar: dikey yerine yatay chip gibi */
.main.panelpos-bottom .nav-btn{
  height: 54px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  flex: 0 0 auto !important;        /* sıkışmasın */
}

/* ===== ITEMS AREA (items-wrapper -> barın üstü) ===== */
.main.panelpos-bottom .items-wrapper{
  width: 100% !important;
  border-right: none !important;
  border-bottom: 6px solid #cfcfcf; /* istersen kaldır */
}

/* items grid yatay akacak şekilde (bottom için daha mantıklı) */
.main.panelpos-bottom .items{
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
  grid-auto-rows: 96px !important;

  height: 220px !important;         /* ✅ resim alanı yüksekliği */
  overflow-y: auto !important;
}

/* footer: bottom modunda absolute yerine normal akış daha iyi */

.main.panelpos-bottom .items-footer{
 /* position: static !important; */
  height: auto !important;
  padding: 6px 0 !important;
  font-size: 12px !important;
  background: transparent !important;
  border-top: 1px solid rgba(0,0,0,.06);
}

/* ===== TOGGLE: bottom modunda dikey değil yatay kapanma =====
   İstersen toggle'ı sağa alıp items alanını gizleyebilirsin.
   Şimdilik toggle'ı sağ üstte sabitleyelim.

.main.panelpos-bottom .sidebar__toggle{
  top: 10px !important;
  left: auto !important;
  right: 10px !important;
  transform: none !important;
  border-radius: 10px !important;
}
*/

.main.panelpos-bottom .sidebar__toggle{
top: -7%;
 left: auto !important;
  right: 120px !important;
width: 58px;
height: 28px;
border-radius: 8px 8px 0px 0;
}

/* BOTTOM: items üstte, menu altta */
.main.panelpos-bottom .items-wrapper{
  order: 0 !important;   /* ✅ üst */
}

.main.panelpos-bottom .left-side{
  order: 1 !important;   /* ✅ alt */
}

.main.panelpos-bottom .items-wrapper{
  min-height: auto !important;   /* ❌ 500px iptal */
  padding-bottom: 0 !important;  /* ❌ 60px iptal */
}


/* =========================================
   BOTTOM MODE: items collapse DOWN (height)
========================================= */

/* bottom modunda items tam genişlik zaten */
.main.panelpos-bottom .items{
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* ✅ bottom modunda .closed width yerine height kapatsın */
.main.panelpos-bottom .items.closed{
  width: 100% !important;      /* yana kapanmasın */
  min-width: 0 !important;
  max-width: none !important;

  height: 0 !important;        /* ✅ aşağı kapanma */
  padding: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  border-right: none !important;

  transition: height .25s ease, padding .25s ease, opacity .2s ease !important;
}

/* açıkken bir yükseklik ver (sen kaç px istiyorsan) */
.main.panelpos-bottom .items{
  height: 220px;               /* ✅ burayı istersen 180 yap */
  transition: height .25s ease, padding .25s ease, opacity .2s ease !important;
}

/* bottom modunda toggle konumu: items alanının sağ üstünde */


/* bottom modunda kapalıyken toggle aynı yerde kalsın */
.main.panelpos-bottom .items.closed + .sidebar__toggle{
  left: auto !important;
  right: 120px !important;
top:-7px;
}

/* icon yönü istersen: kapalıyken aşağı baksın */
.main.panelpos-bottom .items.closed + .sidebar__toggle svg{
  transform: rotate(90deg);
}



/* =========================================
   TOP MODE - FINAL (app.css)
   Layout: TOP menu bar + items under it
   Toggle collapses UP (height)
========================================= */

:root{
  --topMenuH: 78px;   /* üst menü yüksekliği */
  --topItemsH: 220px; /* items alanı yüksekliği */
}

/* main top: stage altta, panel üstte */
.main.panelpos-top{
  display: flex !important;
  flex-direction: column !important;
  height: calc(100vh - 56px) !important;
  overflow: hidden !important;
}

/* left-panel üstte */
.main.panelpos-top .left-panel{
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important; /* menu üstte, items altta */
  flex: 0 0 auto !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  background: #dfe4ea;
}

/* stage altta esnesin */
.main.panelpos-top .stage-area{
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* =========================
   TOP MENU BAR (left-side)
========================= */
.main.panelpos-top .left-side{
  width: 100% !important;
  height: var(--topMenuH) !important;
  background: #2f3542 !important;
  border-right: none !important;
  border-bottom: 1px solid #3d3d4f !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

/* navbars alanı */
.main.panelpos-top .navbars{
  height: 100% !important;
}

/* sadece aktif navbar görünsün ve yatay olsun */
.main.panelpos-top .navbar{
  display: none !important;
  height: 100% !important;
  padding: 10px 10px !important;
  gap: 10px !important;
  white-space: nowrap !important;
}

.main.panelpos-top .navbar.active{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

/* nav button'lar yatay bar gibi */
.main.panelpos-top .nav-btn{
  flex: 0 0 auto !important;
  height: 54px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

.main.panelpos-top .nav-btn span{
  display: inline-block;
  margin-left: 6px;
}

/* =========================
   ITEMS WRAPPER (menu altı)
========================= */
.main.panelpos-top .items-wrapper{
  width: 100% !important;
  border-right: none !important;
  position: relative !important;
  overflow: visible !important; /* toggle kesilmesin */
  min-height: auto !important;  /* global min-height 500 iptal */
  padding-bottom: 0 !important; /* global 60px iptal */
}

/* items: top'ta full width + sabit yükseklik */
.main.panelpos-top .items{
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  /* grid mobil/desktop daha esnek */
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
  grid-auto-rows: 96px !important;
  gap: 7px !important;

  /*height: var(--topItemsH) !important;*/
  overflow-y: auto !important;
  background: #dcdceb70 !important;
  border-right: none !important;

  transition: height .25s ease, padding .25s ease, opacity .2s ease !important;
}

/* ✅ TOP: kapalıyken yukarı doğru kapanma */
.main.panelpos-top .items.closed{
  height: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
}

/* =========================
   TOGGLE (top modunda)
   items alanının sağ üst köşesi
========================= */
.main.panelpos-top .sidebar__toggle{
  position: absolute !important;
  top: 155px !important;
  right: 120px !important;
  left: auto !important;
  transform: none !important;

  width: 60px !important;
  height: 40px !important;
  border-radius: 0 0 8px 8px; !important;
  z-index: 50 !important;
  background: #1e1e2f;
}

/* items kapalıyken de aynı yerde */
.main.panelpos-top .items.closed + .sidebar__toggle{
  right: 120px !important;
  left: auto !important;
  top: 45px !important;
}

/* ikon yönü: kapalıyken aşağı baksın (isteğe bağlı) */
.main.panelpos-top .items.closed + .sidebar__toggle svg{
  transform: rotate(90deg);
}

/* =========================
   FOOTER (top modunda şişirmesin)
========================= */
.main.panelpos-top .items-footer{
  display: none;
  position: static !important;
  height: auto !important;
  padding: 6px 0 !important;
  font-size: 12px !important;
  background: transparent !important;
  border-top: 1px solid rgba(0,0,0,.06) !important;
}