Fix responsive layout

frontend/about.html

@@ -8,49 +8,99 @@
     :root{
       --bg:#f6f7f9; --card:#fff; --ink:#111; --sub:#666; --line:#e9ecef;
       --shadow:0 8px 24px rgba(0,0,0,.08); --radius:14px; --pad:clamp(12px,2.5vw,20px); --maxw:1120px;
+      --fx:clamp(14px,2.6vw,16px);
     }
     *{box-sizing:border-box}
-    html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Noto Sans,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
+    html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Noto Sans,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:var(--fx)}
 
-    header{position:sticky;top:0;z-index:30;background:var(--card);box-shadow:0 4px 16px rgba(0,0,0,.06)}
-    .nav{max-width:var(--maxw);margin:auto;display:flex;align-items:center;justify-content:space-between;padding:var(--pad)}
-    .logo{font-weight:800;font-size:clamp(18px,4vw,22px)}
-    .menu{display:flex;gap:8px;flex-wrap:wrap}
-    .pill{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:1px solid var(--ink);border-radius:999px;min-height:42px}
-    .pill:hover{background:var(--ink);color:#fff}
+    /* Header Responsif */
+    header{position:sticky;top:0;z-index:30;background:var(--card);box-shadow:0 4px 16px rgba(0,0,0,.06);backdrop-filter:blur(8px)}
+    .nav{max-width:var(--maxw);margin:auto;display:flex;align-items:center;justify-content:space-between;padding:var(--pad);gap:10px}
+    .logo{font-weight:800;font-size:clamp(18px,4vw,22px);white-space:nowrap}
+    
+    /* Menu Responsif */
+    .menu{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
+    .pill{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border:1px solid var(--ink);border-radius:999px;min-height:38px;font-size:clamp(12px,3vw,14px);white-space:nowrap;transition:all 0.2s ease}
+    .pill:hover{background:var(--ink);color:#fff;transform:translateY(-1px)}
 
+    /* Mobile Menu */
+    .menu-toggle{display:none;flex-direction:column;gap:3px;background:none;border:none;cursor:pointer;padding:8px}
+    .menu-toggle span{width:20px;height:2px;background:var(--ink);transition:0.3s}
+
+    /* Hero Responsif */
     .hero{background:var(--card);border-bottom:1px solid var(--line)}
     .hero-inner{max-width:var(--maxw);margin:auto;text-align:center;padding:clamp(18px,6vw,30px) var(--pad)}
-    .hero h2{margin:0 0 6px;font-size:clamp(20px,6vw,28px)}
-    .hero p{margin:0;color:var(--sub)}
+    .hero h2{margin:0 0 6px;font-size:clamp(20px,6vw,28px);line-height:1.3}
+    .hero p{margin:0;color:var(--sub);font-size:clamp(13px,3.5vw,15px);max-width:600px;margin-inline:auto}
 
+    /* Main Content */
     .wrap{max-width:var(--maxw);margin:auto;padding:var(--pad)}
     .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);margin-bottom:clamp(12px,2vw,16px)}
-    .title{font-weight:800;margin:0 0 8px;font-size:clamp(16px,4.5vw,18px)}
-    .meta{display:grid;grid-template-columns:minmax(120px,160px) 1fr;gap:8px;margin-top:8px}
-    .label{color:#666}
-    .value{color:#111}
-
-    .team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2.4vw,18px)}
-    .member{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.06);padding:clamp(12px,2.2vw,18px);text-align:center}
-    .avatar{width:clamp(120px,28vw,160px);height:clamp(120px,28vw,160px);border-radius:50%;margin-inline:auto 10px auto;display:flex;align-items:center;justify-content:center;overflow:hidden;border:2px solid #ddd;cursor:pointer;transition:transform .2s}
-    .avatar:hover{transform:scale(1.03)}
+    .title{font-weight:800;margin:0 0 12px;font-size:clamp(16px,4.5vw,18px);line-height:1.3}
+    
+    /* Meta Info Responsif */
+    .meta{display:grid;grid-template-columns:minmax(140px,160px) 1fr;gap:12px;margin-top:12px}
+    .label{color:var(--sub);font-weight:600;font-size:clamp(13px,3.5vw,15px)}
+    .value{color:var(--ink);font-size:clamp(13px,3.5vw,15px);line-height:1.4}
+
+    /* Team Grid Responsif */
+    .team{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:clamp(16px,3vw,24px)}
+    .member{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:clamp(16px,3vw,24px);text-align:center;transition:transform 0.2s ease}
+    .member:hover{transform:translateY(-2px)}
+    .avatar{width:clamp(100px,20vw,140px);height:clamp(100px,20vw,140px);border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:3px solid #f0f0f0;cursor:pointer;transition:all 0.3s ease}
+    .avatar:hover{transform:scale(1.05);border-color:#ddd}
     .avatar img{width:100%;height:100%;object-fit:cover}
-    .m-name{font-weight:800;margin-top:8px}
-    .m-role{color:#666;font-size:clamp(12px,3.3vw,14px)}
-
-    /* Modal */
-    .modal{display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.8)}
-    .modal img{display:block;margin:auto;max-width:86vw;max-height:86vh;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.35)}
-    .modal .caption{color:#fff;text-align:center;padding:8px;font-size:clamp(12px,3.2vw,16px)}
-    .close{position:absolute;top:14px;right:18px;color:#fff;font-size:34px;font-weight:800;cursor:pointer}
-
-    @media (max-width:900px){ .team{grid-template-columns:repeat(2,1fr)} }
-    @media (max-width:600px){
-      .meta{grid-template-columns:1fr}
-      .team{grid-template-columns:1fr}
+    .m-name{font-weight:800;margin:0 0 4px;font-size:clamp(14px,3.8vw,16px);line-height:1.3}
+    .m-role{color:var(--sub);font-size:clamp(12px,3.3vw,14px);line-height:1.4}
+
+    /* Modal Responsif */
+    .modal{display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.9);padding:20px;align-items:center;justify-content:center}
+    .modal-content{position:relative;max-width:90vw;max-height:90vh}
+    .modal img{display:block;max-width:100%;max-height:70vh;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.5);margin:0 auto}
+    .modal .caption{color:#fff;text-align:center;padding:16px 0;font-size:clamp(14px,3.8vw,18px);font-weight:600}
+    .close{position:absolute;top:-40px;right:0;color:#fff;font-size:32px;font-weight:700;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center}
+
+    /* Mobile Styles */
+    @media (max-width: 768px) {
+      .nav{flex-wrap:wrap;gap:12px}
+      .menu-toggle{display:flex}
+      .menu{display:none;width:100%;flex-direction:column;gap:8px}
+      .menu.active{display:flex}
+      .pill{justify-content:center;min-height:44px;font-size:14px}
+      
+      .hero-inner{padding:clamp(16px,5vw,24px) var(--pad)}
+      .hero h2{font-size:clamp(18px,5vw,24px)}
+      
+      .meta{grid-template-columns:1fr;gap:8px}
+      .label{font-weight:700}
+      
+      .team{grid-template-columns:1fr;gap:16px}
+      .member{padding:20px}
+      .avatar{width:120px;height:120px}
     }
+
+    @media (max-width: 480px) {
+      .nav{padding:12px}
+      .logo{font-size:16px}
+      .pill{padding:10px 16px;font-size:13px}
+      
+      .hero h2{font-size:20px}
+      .hero p{font-size:13px}
+      
+      .card{padding:16px;margin-bottom:12px}
+      .title{font-size:16px}
+      
+      .m-name{font-size:15px}
+      .m-role{font-size:13px}
+      
+      .modal{padding:10px}
+      .modal img{max-width:95vw;max-height:60vh}
+      .close{top:-35px;right:-10px;font-size:28px}
+    }
+
+    /* Safe area untuk iPhone */
     body{padding-bottom:env(safe-area-inset-bottom)}
+    header{padding-top:env(safe-area-inset-top)}
   </style>
 </head>
 <body>
@@ -58,6 +108,13 @@
 <header>
   <div class="nav" role="navigation" aria-label="Menu about">
     <div class="logo">PapuaTranslate</div>
+    
+    <button class="menu-toggle" aria-label="Toggle menu" aria-expanded="false">
+      <span></span>
+      <span></span>
+      <span></span>
+    </button>
+    
     <nav class="menu">
       <a class="pill" href="/">Beranda</a>
       <a class="pill" href="/about">About</a>
@@ -77,11 +134,18 @@
   <section class="card">
     <h3 class="title">Judul Skripsi</h3>
     <p><b>Penerapan Causal Encoder Decoder Natural Language Instructions in Indonesian (CENDOL) untuk Translasi Bahasa Papua ke Bahasa Indonesia Baku</b></p>
-    <div class="meta" style="margin-top:10px">
-      <div class="label">Dosen Pembimbing</div><div class="value">Viny Christanti Mawardi, S.Kom., M.Kom.</div>
-      <div class="label">Dosen Pendamping</div><div class="value">Manatap Dolok Lauro, S.Kom., M.M.S.I.</div>
-      <div class="label">Program/Kampus</div><div class="value">Teknik Informatika, Universitas Tarumanagara</div>
-      <div class="label">Tahun</div><div class="value">2025</div>
+    <div class="meta" style="margin-top:16px">
+      <div class="label">Dosen Pembimbing</div>
+      <div class="value">Viny Christanti Mawardi, S.Kom., M.Kom.</div>
+      
+      <div class="label">Dosen Pendamping</div>
+      <div class="value">Manatap Dolok Lauro, S.Kom., M.M.S.I.</div>
+      
+      <div class="label">Program/Kampus</div>
+      <div class="value">Teknik Informatika, Universitas Tarumanagara</div>
+      
+      <div class="label">Tahun</div>
+      <div class="value">2025</div>
     </div>
   </section>
 
@@ -90,21 +154,23 @@
     <div class="team">
       <div class="member">
         <div class="avatar" onclick="openModal('m1')">
-          <img src="{{ url_for('static', filename='image/pembuat.jpg') }}" alt="Amos Valentino Nababan" onerror="this.style.display='none'; this.parentNode.innerHTML='<div style=&quot;color:#999&quot;>Foto Tidak Ditemukan</div>'"/>
+          <img src="{{ url_for('static', filename='image/pembuat.jpg') }}" alt="Amos Valentino Nababan" onerror="this.style.display='none'; this.parentNode.innerHTML='<div style=&quot;color:#999;padding:40px 0;font-size:14px&quot;>Foto Tidak Ditemukan</div>'"/>
         </div>
         <div class="m-name">Amos Valentino Nababan</div>
         <div class="m-role">Pembuat</div>
       </div>
+      
       <div class="member">
         <div class="avatar" onclick="openModal('m2')">
-          <img src="{{ url_for('static', filename='image/dosen1.jpg') }}" alt="Viny Christanti Mawardi" onerror="this.style.display='none'; this.parentNode.innerHTML='<div style=&quot;color:#999&quot;>Foto Tidak Ditemukan</div>'"/>
+          <img src="{{ url_for('static', filename='image/dosen1.jpg') }}" alt="Viny Christanti Mawardi" onerror="this.style.display='none'; this.parentNode.innerHTML='<div style=&quot;color:#999;padding:40px 0;font-size:14px&quot;>Foto Tidak Ditemukan</div>'"/>
         </div>
         <div class="m-name">Viny Christanti Mawardi, S.Kom., M.Kom.</div>
         <div class="m-role">Dosen Pembimbing</div>
       </div>
+      
       <div class="member">
         <div class="avatar" onclick="openModal('m3')">
-          <img src="{{ url_for('static', filename='image/dosen2.jpg') }}" alt="Manatap Dolok Lauro" onerror="this.style.display='none'; this.parentNode.innerHTML='<div style=&quot;color:#999&quot;>Foto Tidak Ditemukan</div>'"/>
+          <img src="{{ url_for('static', filename='image/dosen2.jpg') }}" alt="Manatap Dolok Lauro" onerror="this.style.display='none'; this.parentNode.innerHTML='<div style=&quot;color:#999;padding:40px 0;font-size:14px&quot;>Foto Tidak Ditemukan</div>'"/>
         </div>
         <div class="m-name">Manatap Dolok Lauro, S.Kom., M.M.S.I.</div>
         <div class="m-role">Dosen Pendamping</div>
@@ -114,38 +180,82 @@
 
   <section class="card">
     <h3 class="title">Deskripsi Singkat</h3>
-    <p>Aplikasi ini menerapkan arsitektur <i>Causal Encoder-Decoder</i> (CENDOL) berbasis mT5 dengan LoRA Adapter untuk translasi dialek Papua ke Bahasa Indonesia baku.</p>
+    <p style="margin:0;font-size:clamp(14px,3.5vw,16px);line-height:1.6">Aplikasi ini menerapkan arsitektur <i>Causal Encoder-Decoder</i> (CENDOL) berbasis mT5 dengan LoRA Adapter untuk translasi dialek Papua ke Bahasa Indonesia baku. Sistem ini dirancang untuk memahami dan menerjemahkan berbagai variasi dialek Papua dengan akurasi tinggi.</p>
   </section>
 </main>
 
 <footer>
-  <div class="wrap" style="text-align:center;padding-top:8px;border-top:1px solid var(--line)">
-    © 2025 PapuaTranslate • Halaman About
+  <div class="wrap" style="text-align:center;padding:20px 0;border-top:1px solid var(--line)">
+    <div style="color:var(--sub);font-size:clamp(11px,3vw,13px)">© 2025 PapuaTranslate • Halaman About</div>
   </div>
 </footer>
 
 <!-- Modals -->
 <div id="m1" class="modal" role="dialog" aria-modal="true" aria-label="Foto Amos">
-  <span class="close" onclick="closeModal('m1')">×</span>
-  <img src="{{ url_for('static', filename='image/pembuat.jpg') }}" alt="Amos Valentino Nababan">
-  <div class="caption">Amos Valentino Nababan — Pembuat</div>
+  <div class="modal-content">
+    <span class="close" onclick="closeModal('m1')" aria-label="Tutup">×</span>
+    <img src="{{ url_for('static', filename='image/pembuat.jpg') }}" alt="Amos Valentino Nababan">
+    <div class="caption">Amos Valentino Nababan — Pembuat</div>
+  </div>
 </div>
+
 <div id="m2" class="modal" role="dialog" aria-modal="true" aria-label="Foto Viny">
-  <span class="close" onclick="closeModal('m2')">×</span>
-  <img src="{{ url_for('static', filename='image/dosen1.jpg') }}" alt="Viny Christanti Mawardi">
-  <div class="caption">Viny Christanti Mawardi, S.Kom., M.Kom.</div>
+  <div class="modal-content">
+    <span class="close" onclick="closeModal('m2')" aria-label="Tutup">×</span>
+    <img src="{{ url_for('static', filename='image/dosen1.jpg') }}" alt="Viny Christanti Mawardi">
+    <div class="caption">Viny Christanti Mawardi, S.Kom., M.Kom.</div>
+  </div>
 </div>
+
 <div id="m3" class="modal" role="dialog" aria-modal="true" aria-label="Foto Manatap">
-  <span class="close" onclick="closeModal('m3')">×</span>
-  <img src="{{ url_for('static', filename='image/dosen2.jpg') }}" alt="Manatap Dolok Lauro">
-  <div class="caption">Manatap Dolok Lauro, S.Kom., M.M.S.I.</div>
+  <div class="modal-content">
+    <span class="close" onclick="closeModal('m3')" aria-label="Tutup">×</span>
+    <img src="{{ url_for('static', filename='image/dosen2.jpg') }}" alt="Manatap Dolok Lauro">
+    <div class="caption">Manatap Dolok Lauro, S.Kom., M.M.S.I.</div>
+  </div>
 </div>
 
 <script>
-  function openModal(id){ document.getElementById(id).style.display = 'block'; }
-  function closeModal(id){ document.getElementById(id).style.display = 'none'; }
-  window.addEventListener('keydown', e => { if (e.key === 'Escape') ['m1','m2','m3'].forEach(closeModal) });
-  window.addEventListener('click', e => { if (e.target.classList.contains('modal')) e.target.style.display='none'; });
+  // Mobile menu toggle
+  const menuToggle = document.querySelector('.menu-toggle');
+  const menu = document.querySelector('.menu');
+  
+  menuToggle.addEventListener('click', () => {
+    menu.classList.toggle('active');
+    const expanded = menu.classList.contains('active');
+    menuToggle.setAttribute('aria-expanded', expanded);
+  });
+
+  function openModal(id){ 
+    document.getElementById(id).style.display = 'flex'; 
+    document.body.style.overflow = 'hidden';
+  }
+  
+  function closeModal(id){ 
+    document.getElementById(id).style.display = 'none'; 
+    document.body.style.overflow = 'auto';
+  }
+  
+  window.addEventListener('keydown', e => { 
+    if (e.key === 'Escape') {
+      ['m1','m2','m3'].forEach(closeModal);
+    }
+  });
+  
+  window.addEventListener('click', e => { 
+    if (e.target.classList.contains('modal')) {
+      e.target.style.display = 'none';
+      document.body.style.overflow = 'auto';
+    }
+  });
+
+  // Close mobile menu when clicking outside
+  document.addEventListener('click', (e) => {
+    if (!menu.contains(e.target) && !menuToggle.contains(e.target)) {
+      menu.classList.remove('active');
+      menuToggle.setAttribute('aria-expanded', 'false');
+    }
+  });
 </script>
 </body>
-</html>
+</html>

frontend/index.html

@@ -15,58 +15,103 @@
     *{box-sizing:border-box}
     html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Noto Sans,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:var(--fx)}
     a{color:inherit;text-decoration:none}
-    /* Header */
-    header{position:sticky;top:0;z-index:50;background:var(--card);box-shadow:0 4px 16px rgba(0,0,0,.06)}
+    
+    /* Header Responsif */
+    header{position:sticky;top:0;z-index:50;background:var(--card);box-shadow:0 4px 16px rgba(0,0,0,.06);backdrop-filter:blur(8px)}
     .nav{max-width:var(--maxw);margin:auto;display:flex;align-items:center;gap:10px;justify-content:space-between;padding:var(--pad)}
-    .logo{font-weight:800;font-size:clamp(18px,4vw,24px)}
-    .menu{display:flex;gap:8px;flex-wrap:wrap}
-    .pill{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:1px solid var(--ink);border-radius:999px;min-height:42px}
-    .pill:hover{background:var(--ink);color:#fff}
-    .badge{background:#000;color:#fff;border-radius:999px;padding:6px 12px;font-size:12px}
+    .logo{font-weight:800;font-size:clamp(18px,4vw,24px);white-space:nowrap}
+    
+    /* Menu Responsif */
+    .menu{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
+    .pill{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border:1px solid var(--ink);border-radius:999px;min-height:38px;font-size:clamp(12px,3vw,14px);white-space:nowrap;transition:all 0.2s ease}
+    .pill:hover{background:var(--ink);color:#fff;transform:translateY(-1px)}
+    .badge{background:#000;color:#fff;border-radius:999px;padding:4px 8px;font-size:11px;min-width:20px;text-align:center}
 
-    /* Hero */
+    /* Mobile Menu */
+    .menu-toggle{display:none;flex-direction:column;gap:3px;background:none;border:none;cursor:pointer;padding:8px}
+    .menu-toggle span{width:20px;height:2px;background:var(--ink);transition:0.3s}
+
+    /* Hero Responsif */
     .hero{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card)}
     .hero-inner{max-width:var(--maxw);margin:auto;text-align:center;padding:clamp(16px,6vw,30px) var(--pad)}
-    .hero h1{margin:0 0 6px;font-size:clamp(20px,6vw,32px)}
-    .hero p{margin:0;color:var(--sub);font-size:clamp(13px,3.5vw,15px)}
+    .hero h1{margin:0 0 6px;font-size:clamp(20px,6vw,32px);line-height:1.3}
+    .hero p{margin:0;color:var(--sub);font-size:clamp(13px,3.5vw,15px);max-width:600px;margin-inline:auto}
 
-    /* Main */
+    /* Main Content */
     .wrap{max-width:var(--maxw);margin:auto;padding:var(--pad)}
     .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
     .card-pad{padding:var(--pad)}
     .title{margin:0 0 12px;text-align:center;font-weight:800;font-size:clamp(16px,4.5vw,20px)}
 
-    /* Translator full width */
-    .input-group{margin-bottom:12px}
-    .lbl{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:#222;font-weight:700;font-size:clamp(13px,3.6vw,15px)}
-    .hint{font-size:clamp(11px,3.2vw,13px);color:var(--sub);margin-left:8px}
+    /* Translator Responsif */
+    .input-group{margin-bottom:16px}
+    .lbl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:8px;color:#222;font-weight:700;font-size:clamp(13px,3.6vw,15px);gap:8px}
+    .hint{font-size:clamp(11px,3.2vw,13px);color:var(--sub)}
     textarea{
-      width:100%;min-height:clamp(140px,30vh,220px);resize:vertical;border:1px solid #ddd;border-radius:12px;
+      width:100%;min-height:clamp(120px,25vh,200px);resize:vertical;border:1px solid #ddd;border-radius:12px;
       padding:14px 12px;font-size:clamp(14px,3.6vw,16px);background:#fafafa;outline:none;transition:border .2s,background .2s;
+      font-family:inherit;
     }
-    textarea:focus{border-color:#555;background:#fff}
+    textarea:focus{border-color:#555;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,0.1)}
     .btn{
       width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;
       padding:clamp(12px,3.5vw,14px);border:none;border-radius:12px;background:var(--brand);color:var(--brand-ink);
-      font-weight:900;cursor:pointer;touch-action:manipulation;min-height:48px;
+      font-weight:700;cursor:pointer;touch-action:manipulation;min-height:48px;font-size:clamp(14px,3.6vw,16px);
+      transition:all 0.2s ease;
     }
-    .btn[disabled]{opacity:.6}
+    .btn:hover:not([disabled]){transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
+    .btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}
     .result{border:1px solid var(--line);background:#fafafa;border-radius:12px;padding:14px;min-height:clamp(84px,16vh,120px)}
     .result h4{margin:0 0 6px;font-size:clamp(12px,3.2vw,13px);color:var(--sub)}
-    .result-text{font-size:clamp(14px,3.6vw,16px);white-space:pre-wrap;color:#000}
-    .note{font-size:clamp(11px,3vw,12px);color:var(--sub);margin-top:8px}
+    .result-text{font-size:clamp(14px,3.6vw,16px);white-space:pre-wrap;color:#000;line-height:1.5}
+    .note{font-size:clamp(11px,3vw,12px);color:var(--sub);margin-top:8px;text-align:center}
 
-    /* History under translator */
+    /* History Responsif */
     .history{margin-top:var(--gap)}
     .list{margin:0;padding-left:20px}
-    .list li{margin-bottom:6px}
+    .list li{margin-bottom:8px;font-size:clamp(13px,3.5vw,15px);line-height:1.4}
+    .list li small{font-size:clamp(11px,3vw,12px);color:var(--sub)}
 
     /* Footer */
     footer{margin-top:var(--gap);background:var(--card);border-top:1px solid var(--line)}
     .foot{max-width:var(--maxw);margin:auto;padding:var(--pad);text-align:center}
     .copy{font-size:clamp(11px,3vw,12px);color:var(--sub)}
-    /* Safe area iphones */
+
+    /* Mobile Styles */
+    @media (max-width: 768px) {
+      .nav{flex-wrap:wrap;gap:12px}
+      .menu-toggle{display:flex}
+      .menu{display:none;width:100%;flex-direction:column;gap:8px}
+      .menu.active{display:flex}
+      .pill{justify-content:center;min-height:44px;font-size:14px}
+      
+      .hero-inner{padding:clamp(14px,5vw,24px) var(--pad)}
+      .hero h1{font-size:clamp(18px,5vw,24px)}
+      
+      .lbl{flex-direction:column;align-items:flex-start;gap:4px}
+      .hint{margin-left:0}
+      
+      textarea{min-height:100px;font-size:16px} /* Prevent zoom on iOS */
+    }
+
+    @media (max-width: 480px) {
+      .nav{padding:12px}
+      .logo{font-size:16px}
+      .pill{padding:10px 16px;font-size:13px}
+      
+      .hero h1{font-size:20px}
+      .hero p{font-size:13px}
+      
+      .card-pad{padding:16px}
+      .title{font-size:18px}
+      
+      .list{padding-left:16px}
+      .list li{font-size:14px}
+    }
+
+    /* Safe area untuk iPhone */
     body{padding-bottom:env(safe-area-inset-bottom)}
+    header{padding-top:env(safe-area-inset-top)}
   </style>
 </head>
 <body>
@@ -74,6 +119,13 @@
 <header>
   <div class="nav" role="navigation" aria-label="Menu utama">
     <div class="logo">PapuaTranslate</div>
+    
+    <button class="menu-toggle" aria-label="Toggle menu" aria-expanded="false">
+      <span></span>
+      <span></span>
+      <span></span>
+    </button>
+    
     <nav class="menu">
       <a class="pill" href="/">Home</a>
       <a class="pill" href="/about">About</a>
@@ -114,7 +166,7 @@
       <span id="btn-spin" aria-hidden="true" style="display:none">⏳</span>
     </button>
 
-    <div class="input-group" style="margin-top:12px">
+    <div class="input-group" style="margin-top:16px">
       <div class="lbl">
         <label for="indonesia-output">Bahasa Indonesia Baku</label>
         <span class="hint">Hasil terjemahan</span>
@@ -148,10 +200,24 @@
 </footer>
 
 <script>
-  // Auto-resize textarea (nyaman di HP)
+  // Mobile menu toggle
+  const menuToggle = document.querySelector('.menu-toggle');
+  const menu = document.querySelector('.menu');
+  
+  menuToggle.addEventListener('click', () => {
+    menu.classList.toggle('active');
+    const expanded = menu.classList.contains('active');
+    menuToggle.setAttribute('aria-expanded', expanded);
+  });
+
+  // Auto-resize textarea
   const ta = document.getElementById('papua-input');
-  function autoresize(){ ta.style.height='auto'; ta.style.height=(ta.scrollHeight+6)+'px'; }
-  ta.addEventListener('input', autoresize); window.addEventListener('load', autoresize);
+  function autoresize(){ 
+    ta.style.height='auto'; 
+    ta.style.height=(ta.scrollHeight + 6)+'px'; 
+  }
+  ta.addEventListener('input', autoresize); 
+  window.addEventListener('load', autoresize);
 
   async function translateText() {
     const input = document.getElementById('papua-input');
@@ -161,10 +227,16 @@
     const btnSpin = document.getElementById('btn-spin');
 
     const text = input.value.trim();
-    if (!text) { out.textContent = "Silakan masukkan teks logat Papua."; input.focus(); return; }
+    if (!text) { 
+      out.textContent = "Silakan masukkan teks logat Papua."; 
+      input.focus(); 
+      return; 
+    }
 
     out.textContent = "Menerjemahkan…";
-    btn.disabled = true; btnText.style.display='none'; btnSpin.style.display='inline';
+    btn.disabled = true; 
+    btnText.style.display='none'; 
+    btnSpin.style.display='inline';
 
     try {
       const r = await fetch('/translate', {
@@ -177,15 +249,22 @@
       if (r.ok && data && (data.mt || data.result)) {
         out.textContent = data.mt || data.result;
         loadHistory();
-        // scroll ke hasil di layar kecil
-        if (window.innerWidth < 700) document.getElementById('indonesia-output-wrap').scrollIntoView({behavior:'smooth', block:'center'});
+        // Scroll ke hasil di layar kecil
+        if (window.innerWidth < 768) {
+          document.getElementById('indonesia-output-wrap').scrollIntoView({
+            behavior: 'smooth', 
+            block: 'center'
+          });
+        }
       } else {
         out.textContent = 'Error: ' + ((data && (data.error || data.detail)) || 'Terjadi kesalahan.');
       }
     } catch (e) {
       out.textContent = 'Gagal terhubung ke server.';
     } finally {
-      btn.disabled = false; btnText.style.display='inline'; btnSpin.style.display='none';
+      btn.disabled = false; 
+      btnText.style.display='inline'; 
+      btnSpin.style.display='none';
     }
   }
 
@@ -212,6 +291,14 @@
   ta.addEventListener('keydown', (e)=>{
     if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) translateText();
   });
+
+  // Close mobile menu when clicking outside
+  document.addEventListener('click', (e) => {
+    if (!menu.contains(e.target) && !menuToggle.contains(e.target)) {
+      menu.classList.remove('active');
+      menuToggle.setAttribute('aria-expanded', 'false');
+    }
+  });
 </script>
 </body>
-</html>
+</html>