/* ═══════════════════════════════════════════════════════════
   SEOTECH PORTOFOLIO — MOBILE RESPONSIVE PATCH
   Covers: Android Chrome, Safari iOS, iPad portrait/landscape
   Breakpoints: 480 / 640 / 768 / 900 / 1024 / 1180
   INSERT: <link rel="stylesheet" href="porto-mobile.css">
   sebelum </head> di portofolio/index.html
   Zero perubahan logika / konten / JS
═══════════════════════════════════════════════════════════ */

/* ── Safe Area (notch / Dynamic Island / home bar) ── */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* Prevent horizontal overflow */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Tap highlight off */
a, button, [onclick] {
  -webkit-tap-highlight-color: transparent;
}

/* ── Container safe area ── */
.container {
  padding-left: max(24px, calc(16px + var(--sal)));
  padding-right: max(24px, calc(16px + var(--sar)));
}
@media (max-width: 640px) {
  .container {
    padding-left: max(16px, var(--sal));
    padding-right: max(16px, var(--sar));
  }
}

/* ─────────────────────────────────────────
   HEADER / NAVBAR
───────────────────────────────────────── */
header {
  padding-top: calc(12px + var(--sat));
  padding-left: var(--sal);
  padding-right: var(--sar);
}

@media (max-width: 900px) {
  .header-inner {
    flex-wrap: wrap;
    gap: 10px;
  }
  .nav-links {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4px;
    padding-bottom: 6px;
  }
  .nav-links a {
    padding: 7px 12px;
    font-size: 0.82rem;
  }
  .lang-switch {
    margin-left: auto;
  }
}

@media (max-width: 640px) {
  .logo span {
    font-size: 1rem;
  }
  .logo img {
    height: 28px;
  }
  /* Collapse nav links to horizontal scroll on very small */
  .nav-links {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    gap: 2px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a {
    flex-shrink: 0;
    padding: 6px 10px;
    font-size: 0.78rem;
  }
  .lang-switch {
    flex-shrink: 0;
  }
  /* Hide discuss button in header on very small, keep nav clean */
  header > .container > .header-inner > .btn-primary {
    display: none;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  header > .container > .header-inner > .btn-primary {
    padding: 8px 16px;
    font-size: 0.82rem;
  }
}

/* ─────────────────────────────────────────
   HERO SECTION
───────────────────────────────────────── */
.hero {
  padding-top: calc(100px + var(--sat));
  padding-left: max(24px, var(--sal));
  padding-right: max(24px, var(--sar));
}

@media (max-width: 900px) {
  .hero {
    min-height: auto;
    padding-top: calc(140px + var(--sat));
    padding-bottom: 48px;
  }
  .hero h1 {
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    line-height: 1.2;
  }
  .hero p {
    font-size: 0.9rem;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-top: calc(160px + var(--sat));
    padding-bottom: 40px;
    text-align: center;
  }
  .hero h1 {
    font-size: clamp(1.4rem, 6.5vw, 1.9rem);
  }
  .hero p {
    font-size: 0.85rem;
    line-height: 1.65;
  }
  /* CTA buttons stack */
  .hero > div > div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: center;
    gap: 10px !important;
  }
  .hero .btn-primary,
  .hero .btn-outline {
    width: 100%;
    max-width: 280px;
    text-align: center;
    justify-content: center;
  }
}

/* ── SAFARI fix: 100vh keyboard push ── */
@supports (-webkit-touch-callout: none) {
  .hero { min-height: -webkit-fill-available; }
}

/* ─────────────────────────────────────────
   STATS GRID
───────────────────────────────────────── */
@media (max-width: 640px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
    margin-top: 32px;
  }
  .stat-card {
    padding: 16px 12px;
    border-radius: 16px;
  }
  .stat-number {
    font-size: 1.5rem;
  }
  .stat-card > div:last-child {
    font-size: 0.75rem;
    color: #A0A0B0;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px;
    margin-top: 36px;
  }
}

/* ─────────────────────────────────────────
   SECTION TITLES
───────────────────────────────────────── */
@media (max-width: 768px) {
  .section-title {
    font-size: clamp(1.3rem, 5vw, 1.6rem) !important;
    margin: 48px 0 24px;
  }
}

/* ─────────────────────────────────────────
   PORTFOLIO GRID
───────────────────────────────────────── */
@media (max-width: 1024px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .portfolio-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .card-img {
    height: 160px;
  }
  .card-content {
    padding: 16px;
  }
  .card-title {
    font-size: 1.1rem;
  }
  .card-desc {
    font-size: 0.8rem;
  }
  .card-stats {
    gap: 4px;
  }
  .card-stat-value {
    font-size: 0.8rem;
  }
  .card-stat-label {
    font-size: 0.6rem;
  }
  .portfolio-card {
    border-radius: 18px;
  }
}

/* iPad portrait — 2 col */
@media (min-width: 641px) and (max-width: 900px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px;
  }
}

/* iPad landscape — 3 col */
@media (min-width: 900px) and (max-width: 1180px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px;
  }
}

/* ─────────────────────────────────────────
   SERVICES GRID
───────────────────────────────────────── */
@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px;
  }
}

@media (max-width: 600px) {
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .service-card {
    padding: 20px;
    border-radius: 18px;
  }
  .service-card i {
    font-size: 1.6rem;
    margin-bottom: 12px;
  }
  .service-card h3 {
    font-size: 1rem;
  }
  .service-card p {
    font-size: 0.8rem;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ─────────────────────────────────────────
   ABOUT CARD
───────────────────────────────────────── */
@media (max-width: 640px) {
  .about-card {
    padding: 24px 18px;
    border-radius: 20px;
    margin: 24px 0;
  }
  .about-card h3 {
    font-size: 1.1rem;
  }
  .about-card p {
    font-size: 0.83rem;
    line-height: 1.7;
  }
}

/* ─────────────────────────────────────────
   CONTACT FORM
───────────────────────────────────────── */
@media (max-width: 768px) {
  .contact-form {
    padding: 24px 18px;
    border-radius: 20px;
    max-width: 100%;
  }
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px !important; /* prevent Safari auto-zoom */
    padding: 11px 14px;
    border-radius: 12px;
  }
  .form-group label {
    font-size: 0.83rem;
  }
  .contact-form .btn-primary {
    padding: 13px;
    font-size: 0.95rem;
    border-radius: 14px;
  }
}

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
footer {
  padding-bottom: calc(24px + var(--sab));
  padding-left: var(--sal);
  padding-right: var(--sar);
}

@media (max-width: 640px) {
  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  .footer-logo img {
    height: 32px;
  }
  footer > .container > div:last-child {
    margin-top: 32px;
    font-size: 0.75rem;
  }
  footer h4 {
    font-size: 0.85rem;
    margin-bottom: 10px;
  }
  footer p {
    font-size: 0.8rem;
    line-height: 1.8;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .footer-inner {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px;
  }
}

/* ─────────────────────────────────────────
   BG ORBS — reduce on mobile (performance)
───────────────────────────────────────── */
@media (max-width: 640px) {
  .orb-1 { width: 300px; height: 300px; }
  .orb-2 { width: 250px; height: 250px; }
  .orb-3 { width: 200px; height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .orb { animation: none !important; }
}

/* ─────────────────────────────────────────
   iPAD PORTRAIT (768–900px)
───────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 900px) {
  .hero {
    padding-top: calc(160px + var(--sat));
  }
  .hero h1 {
    font-size: 2.2rem;
  }
  .stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .footer-inner {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ─────────────────────────────────────────
   iPAD LANDSCAPE (900–1180px)
───────────────────────────────────────── */
@media (min-width: 900px) and (max-width: 1180px) {
  .hero h1 {
    font-size: 2.6rem;
  }
  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px;
  }
  .services-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .footer-inner {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ─────────────────────────────────────────
   SAFARI-SPECIFIC FIXES
───────────────────────────────────────── */
/* Fallback when backdrop-filter not supported */
@supports not (backdrop-filter: blur(1px)) {
  header { background: rgba(10, 10, 15, 0.98) !important; }
  .glass { background: rgba(20, 20, 30, 0.95) !important; }
  .glass-strong { background: rgba(25, 25, 35, 0.97) !important; }
}

/* Fix flex gap for older Safari */
@supports (-webkit-touch-callout: none) {
  .hero > div > div[style*="display: flex"] {
    gap: 16px !important;
  }
  .nav-links {
    gap: 4px;
  }
}

/* Smooth scroll on iOS */
html {
  -webkit-overflow-scrolling: touch;
}

/* Fix select styling on iOS */
.form-group select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23A0A0B0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}