/* includes/book/book.css (FULL - CLEAN + ACTIVE STATUS ICON + MODALS) */

:root{
  --bd-text: rgba(255,255,255,0.92);
  --bd-muted: rgba(255,255,255,0.64);
  --bd-card: rgba(18,20,24,0.62);
  --bd-border: rgba(255,255,255,0.10);

  --bd-accent: rgba(205,231,190,0.95);
  --bd-accent-text: #101214;

  --bd-shadow: 0 18px 60px rgba(0,0,0,0.35);

  --bottom-nav-h: 110px;
  --mini-player-h: 76px;
}

/* =========================
   HERO
   ========================= */
.bd-hero{
  position: relative;
  overflow: hidden;
  min-height: 420px;

  box-shadow: var(--bd-shadow);
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.22);
  isolation: isolate;

  margin-left: -15px;
  margin-right: -15px;
  margin-top: -16px;
}

.bd-hero-bg{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(1.6px);
  transform: scale(1);
  opacity: 0.75;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.bd-hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background:
    radial-gradient(120% 90% at 50% 12%,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.55) 52%,
      rgba(0,0,0,0.86) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.78));
}

.bd-hero-inner{
  position: relative;
  z-index: 2;
  padding: 18px 16px 16px;

  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}

/* cover + glow */
.bd-hero-cover-wrap{
  width: 100%;
  display:flex;
  justify-content:center;
  margin-top: 8px;
  position: relative;
}

.bd-hero-cover-wrap::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.12);

  width: 220px;
  height: 310px;

  background-image: var(--cover-bg);
  background-size: cover;
  background-position: center;

  filter: blur(24px);
  opacity: 0.50;
  z-index: 0;
  pointer-events: none;
}

.bd-hero-cover{
  width: 120px;
  overflow: visible;
  border-radius: 0;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);

  position: relative;
  top: 40px;
}

/* reading bookmark badge */
.bd-read-badge{
  position: absolute;
  top: -2px;
  right: -10px;
  z-index: 10;
  display: none;
  color: #fff;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.60));
  pointer-events: none;
}

.bd-read-badge svg{
  width: 28px;
  height: 34px;
  display: block;
}

.bd-hero-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  border-radius: 0;
}

/* =========================
   ACTIONS
   ========================= */
.bd-hero-actions{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 2px;

  background: #232538;
  border-radius: 8px;
  overflow: hidden;

  z-index: 1;
}

.bd-hero-actions--split{
  grid-template-columns: 1fr 1px 1fr;
  align-items: stretch;
}

.bd-action-sep{
  width: 1px;
  background: rgba(255, 255, 255, 0.35);
  margin-top: 10px;
  margin-bottom: 10px;
}

.bd-hero-actions--split .bd-btn{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  height: 46px;
}

.bd-hero-actions--split .bd-btn:active{
  background: rgba(255,255,255,0.06) !important;
}

.bd-btn{
  height: 46px;
  border-radius: 8px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  letter-spacing: -0.2px;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
}

.bd-btn:active{ transform: scale(0.99); }

.bd-btn-ico{
  font-size: 16px;
  line-height: 1;
}

.bd-btn-solid{
  background: #232538;
  border-color: rgba(255,255,255,0.12);
  color: var(--bd-text);
  backdrop-filter: blur(10px);
}

.bd-btn-ghost{
  background: rgba(18,20,24,0.45);
  border-color: rgba(255,255,255,0.12);
  color: var(--bd-text);
  backdrop-filter: blur(10px);
}

.bd-btn[disabled],
.bd-btn[aria-disabled="true"]{
  opacity: 0.55;
  cursor: not-allowed;
}

.bd-btn-full{
  width: 100%;
  margin-top: 10px;
}

/* =========================
   TITLE / SUBTITLE
   ========================= */
.bd-title{
  margin-top: 2px;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 900;
  color: var(--bd-text);
  letter-spacing: -0.3px;
}

.bd-subtitle{
  font-size: 12.5px;
  color: var(--bd-muted);
  margin-top: -6px;
}

/* =========================
   STATS
   ========================= */
.bd-stats{
  width: 100%;
  display:flex;
  justify-content: center;
  gap: 10px;
  margin-top: 2px;
  flex-wrap: wrap;
}

.bd-stat{
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(18,20,24,0.55);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.82);
  display: inline-flex;
  align-items:center;
  gap: 8px;
  font-size: 12px;
  font-weight: 750;
  backdrop-filter: blur(10px);
}

.bd-stat-ico{
  font-size: 14px;
  line-height: 1;
}

.bd-note{
  font-size: 13px;
  color: var(--bd-muted);
  padding-top: 2px;
}

/* =========================
   ABOUT SECTION
   ========================= */
.bd-section{
  background: var(--bd-card);
  padding: 14px;
  box-shadow: var(--bd-shadow);
  margin-bottom: 14px;
  backdrop-filter: blur(12px);
}

.bd-section-title{
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.2px;
  margin-bottom: 10px;
  color: var(--bd-text);
}

.bd-section-text{
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,0.78);
}

.bd-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.bd-chip{
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  background: #313333;
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  font-weight: 325;
  padding-top: 5.5px;
}

/* =========================
   TRACK LIST (CLEAN)
   ========================= */
.track-list{
  background: var(--bd-card);
  padding: 14px;
  box-shadow: var(--bd-shadow);
  margin-bottom: 14px;
  backdrop-filter: blur(12px);
}

.track-list-title{
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.2px;
  margin-bottom: 14px;
  color: var(--bd-text);
}

.track-items{
  display:flex;
  flex-direction: column;
  gap: 16px;
}

.track-item{
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  display:flex;
  align-items:flex-start;
  gap: 14px;
  color: var(--bd-text);
  cursor: pointer;
  margin-bottom: 5px;
}

.track-item:active{ transform: scale(0.998); }

.track-left{
  display:flex;
  align-items:flex-start;
  gap: 14px;
  min-width: 0;
}

.track-num{
  width: 44px;
  flex: 0 0 auto;
  font-size: 24px;
  color: rgba(255,255,255,0.85);
  letter-spacing: -0.2px;
}

.track-text{
  display:flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.track-title{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.2px;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.track-desc{
  display:block;
  font-size: 14px;
  color: rgba(255,255,255,0.72);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-right{
  margin-left: auto;   /* ✅ en sağa it */
  display:flex;
  align-items:center;
  gap: 0;
  flex: 0 0 auto;
}

.track-dur{
  color: var(--bd-muted);
  font-size: 12px;
  white-space: nowrap;
}

/* ✅ playing status icon */
.track-status{
  display:none;         /* default gizli */
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  align-items:center;
  justify-content:center;
  font-size: 16px;
  color: var(--bd-text);
}

/* ✅ menu button (⋮) */
.track-menu-btn{
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 8px;
  border-radius: 10px;
  opacity: 0.92;
  width: 100%;
  text-align: center;
}
.track-menu-btn:hover{ background: rgba(255,255,255,0.08); }
.track-menu-btn:active{ transform: scale(0.98); }

/* ✅ audio action wrapper — fixed width so track-dur stays aligned */
.track-action{
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 8px;
}

/* ✅ ACTIVE: menu gizle, status göster */
.track-item.is-active .track-menu-btn{ display:none; }
.track-item.is-active .track-status{
  display:inline-flex;
  background: var(--bd-accent);
  border-color: rgba(0,0,0,0);
  color: var(--bd-accent-text);
}

/* =========================
   TRACK MENU OVERLAY (if you still use tm-overlay)
   ========================= */
.tm-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
  z-index: 200;
}
.tm-overlay.is-open{ display: flex; }

.tm-card{
  width: min(520px, 100%);
  border-radius: 18px;
  background: rgba(12,14,13,0.94);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  padding: 10px;
}

.tm-title{
  padding: 10px 10px 6px;
  font-weight: 900;
  opacity: 0.95;
}

.tm-item{
  width: 100%;
  border: none;
  background: transparent;
  color: #f6f7f2;
  padding: 12px 10px;
  text-align: left;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
}
.tm-item:hover{ background: rgba(255,255,255,0.07); }
.tm-item.danger{ color: #ffb5b5; }

.tm-sep{
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 6px 8px;
}

/* =========================
   DOWNLOAD MODAL
   ========================= */
.bd-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.bd-modal.is-open{ display: block; }

.bd-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
}

.bd-modal-card{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: calc(100% - 28px);
  max-width: 520px;
  background: rgba(18,20,24,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  box-shadow: 0 20px 80px rgba(0,0,0,0.55);
  overflow: hidden;
}

.bd-modal-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.bd-modal-title{
  color: var(--bd-text);
  font-weight: 900;
  letter-spacing: -0.2px;
}

.bd-modal-close{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--bd-text);
  cursor: pointer;
}

.bd-modal-body{ padding: 14px; }

.bd-dl-list{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.bd-dl-item{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--bd-text);
  text-decoration: none;
}

.bd-dl-left{ font-weight: 850; }
.bd-dl-right{ opacity: 0.85; }

.bd-modal-empty{
  color: var(--bd-text);
  font-weight: 800;
}

.bd-modal-empty-sub{
  margin-top: 6px;
  color: var(--bd-muted);
  font-weight: 650;
  font-size: 12px;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 360px){
  .bd-hero{ min-height: 390px; }

  .bd-hero-cover{
    width: 170px;
    height: 245px;
  }

  .bd-hero-cover-wrap::before{
    width: 205px;
    height: 290px;
    filter: blur(22px);
    opacity: 0.48;
  }

  .bd-title{ font-size: 17px; }
}

/* =========================
   MINI PLAYER SAFE AREA
   ========================= */
.app-shell.has-mini-player{
  padding-bottom: calc(var(--bottom-nav-h) + var(--mini-player-h) + 12px) !important;
}

/* =========================
   AUTHOR / CONTRIBUTORS CARD (ADD-ON)
   ========================= */
.bd-author-card{
  width: 100%;
  margin-top: 12px;
  padding: 14px 14px;
  border-radius: 18px;
  background: rgba(35, 37, 56, 0.82); /* senin action bar tonu */
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 60px rgba(0,0,0,0.25);
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
}

.bd-author-card:active{ transform: scale(0.995); }

.bd-author-avatar{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  flex: 0 0 52px;
}

.bd-author-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.bd-author-body{
  min-width: 0;
  flex: 1;
  text-align: left;
}

.bd-author-name{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.2px;
  color: var(--bd-text);
  line-height: 1.1;
  margin-bottom: 4px;
}

.bd-author-title{
  font-size: 14px;
  color: rgba(255,255,255,0.78);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bd-author-bio{
  font-size: 13px;
  color: rgba(255,255,255,0.74);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bd-author-cta{
  margin-top: 8px;
  font-weight: 900;
  color: rgba(255,255,255,0.92);
  text-align: center;
}

.bd-back-fab{
  position: absolute;
  top: 12px;
  left: 12px;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}
.bd-back-fab:active{ transform: scale(0.98); }

/* single author card */
.bd-author-card{
  width: 100%;
  margin-top: 10px;
  background: rgba(18,20,24,0.62);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
  border-radius: 18px;
  padding: 12px;
  backdrop-filter: blur(12px);
  text-align: left;
  cursor: pointer;
}
.bd-author-card:active{ transform: scale(0.995); }

.bd-author-row{
  display:flex;
  align-items:flex-start;
  gap: 12px;
}
.bd-author-avatar{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  overflow:hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  flex: 0 0 52px;
}
.bd-author-avatar img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.bd-author-body{ flex: 1; min-width: 0; }
.bd-author-name{
  font-weight: 900;
  font-size: 15px;
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.2px;
  margin-bottom: 2px;
}
.bd-author-title{
  font-size: 12.5px;
  color: rgba(255,255,255,0.72);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bd-author-bio{
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(255,255,255,0.70);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* contributors card (screenshot layout) */
.bd-contrib-card{
  width: 100%;
  margin-top: 10px;
  background: rgba(18,20,24,0.62);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
  border-radius: 18px;
  padding: 14px;
  backdrop-filter: blur(12px);
  text-align: left;
  cursor: pointer;
}
.bd-contrib-card:active{ transform: scale(0.995); }

.bd-contrib-row{
  display:flex;
  align-items:flex-start;
  gap: 12px;
}
.bd-contrib-avatar{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  overflow:hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  flex: 0 0 56px;
}
.bd-contrib-avatar img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.bd-contrib-body{
  flex: 1;
  min-width: 0;
}
.bd-contrib-title2{
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -0.2px;
  color: rgba(255,255,255,0.92);
  margin-top: 2px;
  margin-bottom: 6px;
}
.bd-contrib-names2{
  font-size: 14px;
  color: rgba(255,255,255,0.70);
  line-height: 1.25;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bd-contrib-seeall{
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  color: rgba(205,231,190,0.95);
}

/* epub bookmark icon (shown when has-progress) */
.epub-bookmark-ico{
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--bd-accent, #232538);
  opacity: 0.72;
}

.epub-bookmark-ico svg{
  width: 18px;
  height: 22px;
  display: block;
}

.track-item.has-progress .epub-bookmark-ico{
  display: inline-flex;
}

.track-status{ display:none; }
.track-item.is-active .track-status{ display:inline-flex; }