/**
 * JeNNa - Mobil & Tablet Uyumluluk Stilleri (responsive.css)
 */

@media (max-width: 1100px) {
  .notebook-container.mode-open {
    width: 95vw;
  }
  
  .page-half {
    padding: 32px 30px 40px;
  }

  .page-left {
    padding-right: 36px;
  }

  .page-right {
    padding-left: 36px;
  }
}

@media (max-width: 880px) {
  .desk-topbar {
    padding: 16px 20px 8px;
    flex-direction: row;
  }

  .desk-brand-name {
    font-size: 30px;
  }

  .desk-brand-motto {
    font-size: 20px;
  }

  .notebook-viewport {
    padding: 12px 12px 60px;
  }

  /* Çift sayfa yerine mobilde dikey akış */
  .notebook-container.mode-open .open-book-spread {
    flex-direction: column;
  }

  .center-spine-spiral {
    display: none;
  }

  .page-half {
    max-height: none;
    overflow-y: visible;
    padding: 24px 20px;
  }

  .page-left {
    border-right: none;
    border-bottom: 2px dashed rgba(180, 160, 140, 0.4);
    padding-right: 20px;
  }

  .page-right {
    padding-left: 20px;
  }

  /* Tek Defter Kapak */
  .cover-cards-row {
    grid-template-columns: 1fr;
  }

  .cover-page-inner {
    padding: 36px 24px 30px 65px;
  }

  .single-spine-spiral {
    left: 18px;
  }

  .cover-main-title {
    font-size: 38px;
  }

  .cover-main-subtitle {
    font-size: 22px;
  }

  .cover-footer-section {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .btn-open-notebook {
    justify-content: center;
  }

  /* Sekme Kulakçıkları - Mobilde sağ kenar taşması küçültülür */
  .notebook-tabs-spine {
    right: -36px;
  }

  .notebook-tab-btn {
    width: 36px;
    height: 80px;
    font-size: 9px;
  }

  .notebook-tab-btn:hover,
  .notebook-tab-btn.active {
    width: 44px;
  }

  /* OTP digit inputs */
  .otp-digit-input {
    width: 38px;
    height: 46px;
    font-size: 20px;
  }

  .article-title {
    font-size: 25px;
  }

  /* Admin Modal */
  .admin-modal-card {
    height: 95vh;
    border-radius: 8px;
  }

  .admin-modal-nav {
    overflow-x: auto;
  }

  .admin-tab-btn {
    padding: 12px 14px;
    font-size: 12px;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .desk-brand-name {
    font-size: 24px;
  }

  .desk-brand-motto {
    font-size: 16px;
    opacity: 0.8;
  }

  .cover-page-inner {
    padding: 30px 16px 24px 50px;
  }

  .single-spine-spiral {
    left: 12px;
    width: 24px;
  }

  .cover-main-title {
    font-size: 30px;
  }

  .notebook-tabs-spine {
    right: -28px;
    gap: 8px;
  }

  .notebook-tab-btn {
    width: 28px;
    height: 70px;
  }

  .notebook-tab-btn span.tab-icon {
    font-size: 13px;
  }
}