*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { height: calc(var(--vh, 1vh) * 100); }
    body { height: calc(var(--vh, 1vh) * 100); background: #f8fafc; color: #0f172a; font-family: 'Inter', sans-serif; overflow: auto; touch-action: auto; }

    /* Loading book icon animation */
    .ld-icon::before, .ld-icon::after {
      content: ''; position: absolute; top: 10px; bottom: 0; width: 32px;
      background: #cbd5e1; border: 1px solid #94a3b8; border-radius: 4px;
      animation: bookPulse 1.5s infinite ease-in-out;
    }
    .ld-icon::before { left: 6px; border-radius: 8px 2px 2px 8px; background: #93c5fd; }
    .ld-icon::after  { right: 6px; animation-delay: 0.75s; }
    @keyframes bookPulse {
      0%, 100% { transform: scaleY(1); opacity: 0.5; }
      50%       { transform: scaleY(1.1); opacity: 1; }
    }

    #viewer {
    display: none;
    flex-direction: column;
    height: calc(var(--vh, 1vh) * 100);
    position: relative;

    overflow-y: auto;   /* 🔥 scroll burada */
}

    /* Range slider */
    #page-slider { flex: 1; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
    #page-slider::-webkit-slider-runnable-track { width: 100%; height: 4px; background: #e2e8f0; border-radius: 2px; }
    #page-slider::-webkit-slider-thumb {
      height: 16px; width: 16px; border-radius: 50%; background: #3b82f6;
      cursor: pointer; -webkit-appearance: none; appearance: none; margin-top: -6px;
      box-shadow: 0 0 10px rgba(59,130,246,0.4);
    }

    /* PageFlip library overrides */
    .stf__parent { background-color: transparent !important; }
    .stf__item { background-color: white; box-shadow: inset 0 0 100px rgba(0,0,0,0.04); }
    .stf__item.blank-item { background-color: #f8fafc !important; box-shadow: none !important; }
    .stf__item.blank-item .page-content { box-shadow: none !important; }
    .page-content { width: 100%; height: 100%; position: relative; box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08); }
    .page-content img { width: 100%; height: 100%; object-fit: contain; }

    /* JS-toggled visibility */
    #viewer { display: none; flex-direction: column; height: calc(var(--vh, 1vh) * 100); position: relative; }

    #thumb-tray { transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }
    #thumb-tray.open { transform: translateY(0); }

    /* Toolbar button component */
    .t-btn {
      background: rgba(241,245,249,0.8); border: 1px solid #e2e8f0;
      color: #64748b; width: 34px; height: 34px; border-radius: 8px;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    }
    .t-btn:hover { background: rgba(59,130,246,0.1); border-color: #3b82f6; color: #3b82f6; transform: translateY(-1px); }
    .t-btn.active { background: #3b82f6; color: white; border-color: #3b82f6; }
    .t-btn svg { width: 16px; height: 16px; }

    /* Nav arrows */
    .nav-arrow {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 46px; height: 46px; border-radius: 50%;
      background: rgba(255,255,255,0.9); border: 1px solid #e2e8f0;
      color: #64748b; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      z-index: 50; backdrop-filter: blur(8px); transition: all 0.2s;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    .nav-arrow:hover { background: #fff; color: #3b82f6; border-color: #3b82f6; transform: translateY(-50%) scale(1.08); box-shadow: 0 4px 16px rgba(59,130,246,0.2); }
    .nav-arrow:disabled { opacity: 0; cursor: default; pointer-events: none; }
    #btn-prev { left: 20px; }
    #btn-next { right: 20px; }

    /* JS-created element classes */
    .ld-sub { font-size: 14px; color: #64748b; margin-top: 8px; text-align: center; }
    .thumb-item {
      flex-shrink: 0; height: 100%; aspect-ratio: 1/1.41;
      background: #e2e8f0; border-radius: 4px; cursor: pointer;
      overflow: hidden; border: 2px solid transparent; transition: all 0.2s; position: relative;
    }
    .thumb-item:hover { border-color: rgba(59,130,246,0.5); transform: translateY(-4px); }
    .thumb-item.active { border-color: #3b82f6; box-shadow: 0 0 15px rgba(59,130,246,0.3); }
    .thumb-item img { width: 100%; height: 100%; object-fit: cover; }
    .thumb-num { position: absolute; bottom: 4px; right: 4px; background: rgba(0,0,0,0.5); color: white; font-size: 10px; padding: 2px 6px; border-radius: 4px; }


    /* Book viewport wrappers (JS-manipulated) */
    #book-viewport { width: 100%; height: 100%; transform-origin: center center; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); will-change: transform; display: flex; align-items: center; justify-content: center; }
    #centering-wrapper { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; will-change: transform; }
    #book-container { width: 100%; height: 100%; max-width: 98vw; max-height: 98vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
    #book-flip-root { width: 100%; height: 100%; }


    @media (max-width: 1023px) {
      /* Toolbar: sadece başlık + temel butonlar */
      #toolbar { padding: 0 10px !important; height: 44px !important; }
      #btn-zoom-in, #btn-zoom-out, #btn-zoom-reset, #btn-thumbs, #btn-download, #btn-fullscreen { display: none !important; }
      .toolbar-sep { display: none !important; }

      /* Kitap alanı: arka plan görünsün */
      #book-area { padding: 0 !important; background: #dde3ea;  overflow-y: auto;   /* 🔥 scroll aktif */
    align-items: flex-start; /* üstten başlasın */}

      /* Flip animasyonu sayfa sınırları içinde kalsın */
      #centering-wrapper { overflow: hidden !important; }
      #book-container { overflow: hidden !important; border-radius: 3px; box-shadow: 0 12px 48px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.12); }
      .stf__parent { overflow: hidden !important; }

      /* Oklar: küçük, yarı saydam, kitabın üzerinde yüzer */
      .nav-arrow { width: 36px !important; height: 36px !important; opacity: 0.75; background: rgba(255,255,255,0.9) !important; }
      .nav-arrow:hover { opacity: 1; }
      #btn-prev { left: 6px !important; }
      #btn-next { right: 6px !important; }

      /* Alt bar: sıkıştır */
      #bottom-bar { padding: 0 10px !important; gap: 6px !important; height: 40px !important; }
      #page-indicator { min-width: 60px !important; }

      /* Arama paneli: tam genişlik */
      #search-panel { width: calc(100% - 20px) !important; right: 10px !important; top: 44px !important; }

      /* Thumbnail tray: mobilde alt bara göre hizala */
      #thumb-tray { bottom: 40px !important; }
    }

@media (max-width: 640px) {

    /* toolbar küçült */
    #toolbar {
        height: 44px !important;
        padding: 0 8px !important;
    }

    /* alt bar küçült */
    #bottom-bar {
        height: 40px !important;
        padding: 0 8px !important;
    }

    /* kitap alanı */
    #book-area {
        padding: 0;
        align-items: center;
    }

    /* kitap */
    #book-container {
        width: 100%;
        height: auto;

        max-width: 100%;
        max-height: calc(100vh - 100px); /* toolbar + bottom */
    }

    /* ok butonları küçült */
    .nav-arrow {
        width: 34px;
        height: 34px;
    }

    #btn-prev { left: 6px; }
    #btn-next { right: 6px; }
}