/*
Theme Name: Linetogel Ocean 60TUdVwB
Theme URI: https://linetogellogin.asia/
Author: Linetogel Panduan Indonesia
Description: Tema editorial panorama untuk panduan merek Linetogel berbahasa Indonesia.
Version: 1.0.0
Text Domain: linetogel-ocean
*/

:root {
  --ink: #17303d;
  --muted: #566f7b;
  --paper: #ffffff;
  --wash: #f2f7fa;
  --blue-soft: #dcecf3;
  --navy: #0b324b;
  --navy-deep: #071f31;
  --ocean: #0c7395;
  --teal: #178f84;
  --amber: #d69a32;
  --line: #bfd6df;
  --info: #e5f4f2;
  --warning: #fff2d4;
  --focus: #f0b85a;
  --content: 780px;
  --wide: 1240px;
  --shadow: 0 20px 48px rgba(20, 70, 95, .14);
  --radius: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--wash);
  font-family: Inter, "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.76;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: #075f7d; text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: #064863; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.skip-link { position: fixed; left: 16px; top: -90px; z-index: 9999; padding: 10px 16px; background: #fff; color: var(--navy); border-radius: 8px; }
.skip-link:focus { top: 16px; }

.site-header {
  position: relative;
  z-index: 50;
  background: var(--navy-deep);
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.header-inner {
  width: min(var(--wide), calc(100% - 48px));
  min-height: 82px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.site-branding { flex: 0 0 auto; }
.custom-logo-link { display: block; min-height: 48px; padding: 8px 0; }
.custom-logo { width: auto; max-width: 330px; height: 54px; object-fit: contain; }
.site-name-fallback { color: #fff; font-size: 1.05rem; font-weight: 800; text-decoration: none; }
.menu-toggle { display: none; min-width: 48px; min-height: 48px; border: 1px solid rgba(255,255,255,.45); border-radius: 10px; background: transparent; color: #fff; font: inherit; font-weight: 700; }
.primary-menu { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.primary-menu a { display: flex; min-height: 48px; align-items: center; padding: 9px 11px; color: #f5fbfd; border-radius: 8px; font-size: .83rem; font-weight: 700; line-height: 1.2; text-decoration: none; }
.primary-menu a:hover, .primary-menu .current-menu-item > a { background: rgba(255,255,255,.12); color: #fff; }

.site-main { overflow: clip; }
.article-shell { background: var(--paper); }
.entry-content > :not(.panorama):not(.wide-block):not(.review-section) { width: min(var(--content), calc(100% - 48px)); margin-left: auto; margin-right: auto; }
.entry-content > .review-section > :not(.panorama):not(.wide-block) { width: min(var(--content), calc(100% - 48px)); margin-left: auto; margin-right: auto; }
.entry-content > .review-section { padding: clamp(56px, 7vw, 98px) 0; }
.entry-content > .review-section:first-child { padding-top: clamp(52px, 7vw, 88px); }
.entry-content > .review-section:nth-of-type(3n+2) { background: var(--blue-soft); }
.entry-content > .review-section:nth-of-type(3n) { background: linear-gradient(180deg, #fff 0%, #edf6f8 100%); }
.entry-content > h1, .entry-content > .review-section:first-child h1 {
  margin-top: 0;
  margin-bottom: 22px;
  color: var(--navy);
  font-size: clamp(2.35rem, 5.2vw, 4.65rem);
  line-height: 1.06;
  letter-spacing: -.045em;
}
.entry-content > h2, .entry-content > .review-section h2 { margin-top: 56px; margin-bottom: 18px; color: var(--navy); font-size: clamp(1.65rem, 3vw, 2.55rem); line-height: 1.18; letter-spacing: -.025em; }
.entry-content h3 { margin-top: 36px; margin-bottom: 14px; color: var(--navy); font-size: 1.35rem; line-height: 1.25; }
.entry-content p { margin-top: 0; margin-bottom: 1.3em; }
.entry-content ul, .entry-content ol { margin-top: 0; margin-bottom: 1.6em; padding-left: 1.45em; }
.entry-content li + li { margin-top: .58em; }
.entry-content strong { color: #0b3348; }
.entry-content > h1:first-child { padding-top: clamp(56px, 7vw, 92px); }
.entry-content > p:last-child { padding-bottom: 80px; margin-bottom: 0; }

.front-page .review-section:first-child {
  color: #f5fbfd;
  background:
    radial-gradient(circle at 78% 20%, rgba(42,182,166,.25), transparent 38%),
    linear-gradient(135deg, #071f31 0%, #0e4863 56%, #0b6880 100%);
}
.front-page .review-section:first-child h1 { color: #fff; max-width: 1000px; font-size: clamp(2.45rem, 6vw, 4.75rem); }
.front-page .review-section:first-child p { color: #e7f5f8; }
.front-page .review-section:first-child a { color: #fff; text-decoration-color: var(--focus); }

.panorama { width: min(1440px, calc(100% - 48px)); margin: clamp(32px, 5vw, 58px) auto 0; }
.panorama img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); background: #0d3650; }
.panorama.is-portrait img { aspect-ratio: 4 / 3; }
.panorama figcaption { width: min(var(--content), 100%); margin: 10px auto 0; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.front-page .review-section:first-child .panorama figcaption { color: #d6edf2; }

.wide-block, .table-wrap { width: min(1080px, calc(100% - 48px)); margin: 34px auto; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 12px 28px rgba(20,70,95,.08); }
table { width: 100%; min-width: 690px; border-collapse: collapse; font-size: .93rem; line-height: 1.48; }
th, td { padding: 16px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: #fff; background: var(--navy); }
tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: #f4f9fb; }

.faq-section { padding: clamp(54px, 7vw, 88px) 0; background: var(--navy); color: #f5fbfd; }
.faq-section > * { width: min(var(--content), calc(100% - 48px)); margin-left: auto; margin-right: auto; }
.faq-section h2 { color: #fff; margin-top: 0; }
.faq-item { border-top: 1px solid rgba(255,255,255,.22); }
.faq-item:last-child { border-bottom: 1px solid rgba(255,255,255,.22); }
.faq-item summary { min-height: 58px; padding: 17px 36px 17px 0; cursor: pointer; color: #fff; font-weight: 750; line-height: 1.45; }
.faq-answer { padding: 0 0 19px; color: #dceff3; }
.faq-answer p { margin: 0; }

.site-footer { padding: 58px 0 26px; color: #d8edf2; background: #061c2c; }
.footer-inner { width: min(var(--wide), calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; }
.footer-title { margin: 0 0 10px; color: #fff; font-size: 1.15rem; }
.footer-copy { margin: 0 0 16px; max-width: 620px; }
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.footer-links a, .footer-contact { color: #f5fbfd; }
.footer-meta { width: min(var(--wide), calc(100% - 48px)); margin: 34px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.15); color: #9fc1cb; font-size: .82rem; }

@media (max-width: 1080px) {
  body { font-size: 17px; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .primary-navigation { position: absolute; left: 0; right: 0; top: 100%; display: none; padding: 12px 24px 24px; background: var(--navy-deep); border-top: 1px solid rgba(255,255,255,.12); }
  .primary-navigation.is-open { display: block; }
  .primary-menu { flex-direction: column; align-items: stretch; }
  .primary-menu a { padding: 12px 14px; font-size: .96rem; }
}

@media (max-width: 700px) {
  body { font-size: 16px; line-height: 1.7; }
  .header-inner, .footer-inner, .footer-meta { width: min(100% - 32px, var(--wide)); }
  .custom-logo { max-width: 238px; height: 46px; }
  .entry-content > :not(.panorama):not(.wide-block):not(.review-section),
  .entry-content > .review-section > :not(.panorama):not(.wide-block),
  .faq-section > * { width: calc(100% - 32px); }
  .entry-content > .review-section { padding: 50px 0; }
  .entry-content > h1, .entry-content > .review-section:first-child h1 { font-size: clamp(2.05rem, 10vw, 2.75rem); }
  .entry-content > h2, .entry-content > .review-section h2 { margin-top: 42px; font-size: 1.75rem; }
  .panorama { width: calc(100% - 32px); margin-top: 28px; }
  .panorama img { aspect-ratio: 5 / 4; }
  .panorama.is-wide img { object-position: center; }
  .wide-block, .table-wrap { width: calc(100% - 32px); margin: 28px auto; }
  th, td { padding: 13px 14px; }
  .footer-inner { grid-template-columns: 1fr; gap: 30px; }
  .footer-links { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}