/* Fishstory — tema gelap dan terang, berganti menurut jam pengunjung */

/* ---------- Token tema ---------- */
:root{
  --bg:#07090c;
  --bg-2:#0d1117;
  --bg-3:#141c27;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.22);
  --ink:#f2f5f8;
  --ink-2:#9aa7b7;
  --ink-3:#66748a;
  --accent:#4aa8ff;
  --nav-bg:rgba(7,9,12,.82);
  --btn-bg:#ffffff;
  --btn-ink:#07090c;
  --chip-bg:rgba(7,9,12,.62);
  --chip-ink:#dbe4ef;
  --logo-filter:grayscale(1) brightness(1.7);
  --logo-opacity:.72;
  --tile-img-opacity:.88;
  --shadow:none;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#ffffff;
  --bg-2:#f5f7fa;
  --bg-3:#eceff4;
  --line:rgba(13,20,32,.12);
  --line-2:rgba(13,20,32,.28);
  --ink:#0d1420;
  --ink-2:#4b5766;
  --ink-3:#7a8595;
  --accent:#0a5fc2;
  --nav-bg:rgba(255,255,255,.88);
  --btn-bg:#0d1420;
  --btn-ink:#ffffff;
  --chip-bg:rgba(255,255,255,.78);
  --chip-ink:#0d1420;
  --logo-filter:grayscale(1) contrast(.85);
  --logo-opacity:.6;
  --tile-img-opacity:1;
  --shadow:0 1px 2px rgba(13,20,32,.05), 0 8px 24px rgba(13,20,32,.06);
  color-scheme:light;
}

:root{
  --radius:14px;
  --wrap:1180px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --display:'Bricolage Grotesque','Inter',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 16px/1.65 var(--font);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background-color .35s ease,color .35s ease;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.05;margin:0}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------- Nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px 28px;border-bottom:1px solid transparent;
  transition:background .3s ease,backdrop-filter .3s ease,border-color .3s ease;
}
.nav.is-stuck{background:var(--nav-bg);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav__brand{font-family:var(--display);font-weight:700;font-size:19px;text-decoration:none;letter-spacing:-.02em;color:#fff}
.nav.is-stuck .nav__brand{color:var(--ink)}
.nav__links{display:flex;align-items:center;gap:26px}
.nav__links a{text-decoration:none;font-size:14.5px;color:rgba(255,255,255,.78);transition:color .2s}
.nav.is-stuck .nav__links a{color:var(--ink-2)}
.nav__links a:hover{color:#fff}
.nav.is-stuck .nav__links a:hover{color:var(--ink)}
.nav__cta{
  padding:9px 18px;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:#fff!important;
  transition:background .2s,border-color .2s,color .2s;
}
.nav.is-stuck .nav__cta{border-color:var(--line-2);color:var(--ink)!important}
.nav__cta:hover{background:var(--btn-bg);color:var(--btn-ink)!important;border-color:var(--btn-bg)}

/* tombol bahasa dan tema */
.nav__tools{display:flex;align-items:center;gap:8px;margin-left:4px}
.iconbtn{
  display:grid;place-items:center;min-width:34px;height:34px;padding:0 9px;
  border:1px solid rgba(255,255,255,.26);border-radius:999px;background:transparent;
  color:#fff;font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.06em;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s;
}
.nav.is-stuck .iconbtn{border-color:var(--line-2);color:var(--ink)}
.iconbtn:hover{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)}
.iconbtn svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.iconbtn .ico-sun{display:none}
:root[data-theme="light"] .iconbtn .ico-sun{display:block}
:root[data-theme="light"] .iconbtn .ico-moon{display:none}
.nav__burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav__burger span{display:block;width:22px;height:2px;background:#fff;margin:4px 0;transition:transform .25s,opacity .25s}
.nav.is-stuck .nav__burger span{background:var(--ink)}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}

/* ---------- Hero ---------- */
/* Teks hero selalu putih karena berdiri di atas video, di tema apa pun. */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#000}
.hero__media{position:absolute;inset:0;overflow:hidden}
/* iframe dibesarkan melebihi bingkai, dan pointer-events:none mematikan hover
   sehingga judul serta logo YouTube tidak pernah muncul */
.hero__frame{
  position:absolute;top:50%;left:50%;
  width:100vw;height:56.25vw;min-height:100svh;min-width:177.78svh;
  transform:translate(-50%,-50%) scale(1.06);
  border:0;pointer-events:none;
}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,var(--bg) 0%,rgba(0,0,0,.34) 44%,rgba(0,0,0,.14) 72%),
    rgba(0,0,0,var(--scrim,.45));
}
.hero__body{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px 104px;color:#fff}
.hero__title{font-size:clamp(2.6rem,7.2vw,5.6rem);max-width:15ch;text-wrap:balance}
.hero__sub{margin:20px 0 0;max-width:52ch;font-size:clamp(1rem,1.6vw,1.2rem);color:rgba(255,255,255,.86)}
.hero__hint{margin-top:18px;font-size:14px;color:rgba(255,255,255,.72)}
.hero__hint a{color:#8ec6ff}
.btn{
  display:inline-block;margin-top:34px;padding:14px 30px;border-radius:999px;
  text-decoration:none;font-weight:600;font-size:15px;transition:transform .18s,background .2s;
}
.btn--primary{background:#fff;color:#07090c}
.btn--primary:hover{transform:translateY(-2px)}
.hero__stat{position:absolute;right:28px;bottom:104px;z-index:2;text-align:right;color:#fff}
.hero__stat strong{display:block;font-family:var(--display);font-size:clamp(2rem,4vw,3rem);line-height:1}
.hero__stat span{font-size:13px;color:rgba(255,255,255,.72)}
.hero__scroll{
  position:absolute;left:50%;bottom:28px;z-index:2;width:22px;height:36px;
  border:1.5px solid rgba(255,255,255,.35);border-radius:12px;transform:translateX(-50%);
}
.hero__scroll::after{
  content:'';position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;
  background:rgba(255,255,255,.75);transform:translateX(-50%);animation:scrolldot 1.8s ease-in-out infinite;
}
@keyframes scrolldot{0%,100%{opacity:0;transform:translate(-50%,0)}45%{opacity:1;transform:translate(-50%,9px)}}

/* ---------- Section ---------- */
.section{padding:120px 0;border-top:1px solid var(--line)}
.section--tight{padding:72px 0}
.section--contact{background:var(--bg-2)}
.section__title{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:44px}
.section__title--sm{font-size:clamp(.85rem,1.4vw,1rem);font-family:var(--font);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:34px}

/* ---------- Filter ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:-24px 0 36px}
.chip{
  padding:8px 18px;border-radius:999px;border:1px solid var(--line);background:transparent;
  color:var(--ink-2);font:inherit;font-size:14px;cursor:pointer;transition:all .2s;
}
.chip:hover{color:var(--ink);border-color:var(--line-2)}
.chip.is-active{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)}

/* ---------- Grid portfolio, 3 kolom rapat ---------- */
.section--work{padding-bottom:0}
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:0;width:100%;margin-top:8px;border-top:1px solid var(--line)}
.tile{
  position:relative;display:block;text-decoration:none;color:inherit;
  background:var(--bg-2);overflow:hidden;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.tile--wide{grid-column:span 2}
.tile:nth-child(3n){border-right:0}
.tile__media{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:#05070a}
.tile__media img{
  width:100%;height:100%;object-fit:cover;opacity:var(--tile-img-opacity);
  transition:transform .65s cubic-bezier(.2,.7,.3,1),opacity .4s ease;
}
.tile__blank{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--bg-3),var(--bg-2))}
a.tile:hover .tile__media img,a.tile:focus-visible .tile__media img{transform:scale(1.045);opacity:1}
.tile__cat{
  position:absolute;left:14px;top:14px;padding:5px 11px;border-radius:999px;
  background:var(--chip-bg);backdrop-filter:blur(6px);color:var(--chip-ink);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s;
}
a.tile:hover .tile__cat,a.tile:focus-visible .tile__cat{opacity:1;transform:translateY(0)}
.tile__bar{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:17px 16px;text-align:center;background:var(--bg-2);transition:background .3s ease;
}
a.tile:hover .tile__bar,a.tile:focus-visible .tile__bar{background:var(--bg-3)}
.tile__title{font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);line-height:1.45}
.tile__meta{font-size:11.5px;letter-spacing:.06em;color:var(--ink-3)}
a.tile:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ---------- Logo klien ---------- */
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.logos__item{
  display:grid;place-items:center;min-height:104px;padding:20px;
  border:1px solid var(--line);border-radius:12px;background:var(--bg-2);
  text-decoration:none;transition:border-color .25s,background .25s;box-shadow:var(--shadow);
}
.logos__item:hover{border-color:var(--line-2);background:var(--bg-3)}
/* Logo klien. Aturan warnanya ada di blok di bawah. */
.logos__item img{
  max-height:56px;max-width:100%;width:auto;object-fit:contain;
  transition:filter .3s ease,opacity .3s ease;
}
/* Logo klien: abu-abu saat diam, warna asli saat disentuh.
   grayscale menjaga tulisan dan simbol tetap terbaca. Versi sebelumnya memakai
   brightness(0) yang memaksa setiap piksel jadi satu warna, jadi logo berubah
   menjadi siluet dan semua detail di dalamnya hilang. */
.logos__img{filter:grayscale(1);opacity:.78;transition:filter .28s ease,opacity .28s ease}
/* Logo gelap perlu dibalik supaya terbaca di latar gelap. invert menukar
   terang gelapnya tanpa membuang beda tonal, jadi detail tetap ada. */
.logos__img.is-gelap{filter:grayscale(1) invert(1)}
.logos__img.is-terang{filter:grayscale(1)}
.logos__img.is-warna{filter:none;opacity:.9}
:root[data-theme="light"] .logos__img.is-gelap{filter:grayscale(1)}
:root[data-theme="light"] .logos__img.is-terang{filter:grayscale(1) invert(1)}
/* Disentuh kursor: warna asli penuh, di kedua tema.
   Selektor tema ikut ditulis supaya bobotnya mengalahkan aturan di atas. */
.logos__item:hover .logos__img,
.logos__item:focus-visible .logos__img,
:root[data-theme="light"] .logos__item:hover .logos__img,
:root[data-theme="light"] .logos__item:focus-visible .logos__img{filter:none;opacity:1}

/* Warna asli saja tidak cukup. Logo yang warnanya gelap akan hilang begitu
   dikembalikan ke warna asli di atas latar gelap, jadi kotaknya diberi alas
   terang saat disentuh. Begitu juga sebaliknya di tema terang. */
.logos__item.is-gelap:hover,
.logos__item.is-gelap:focus-visible{background:#eef1f5;border-color:#dde3ea}
.logos__item.is-terang:hover,
.logos__item.is-terang:focus-visible{background:var(--bg-3);border-color:var(--line-2)}
:root[data-theme="light"] .logos__item.is-gelap:hover,
:root[data-theme="light"] .logos__item.is-gelap:focus-visible{background:var(--bg-3);border-color:var(--line-2)}
:root[data-theme="light"] .logos__item.is-terang:hover,
:root[data-theme="light"] .logos__item.is-terang:focus-visible{background:#151b26;border-color:#232c3b}
.logos__text{font-size:14px;color:var(--ink-2);text-align:center}
.logos__item--link{position:relative}
.logos__item--link::after{
  content:'';position:absolute;right:11px;top:11px;width:13px;height:13px;
  background:var(--accent);opacity:0;transition:opacity .25s;
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
          mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
}
.logos__item--link:hover::after,.logos__item--link:focus-visible::after{opacity:1}
.logos__item--link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Galeri foto ---------- */
/* Galeri memakai grid, bukan kolom masonry.
   columns:3 mengalirkan foto ke bawah dulu baru pindah kolom, jadi walau
   urutannya sudah dikelompokkan per klien, yang terbaca di baris paling atas
   tetap berselang seling. Grid mengalir kiri ke kanan seperti orang membaca,
   jadi kelompok klien benar-benar terlihat berkelompok. */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
/* Judul kelompok klien memotong selebar grid. */
.gallery__judul{
  grid-column:1 / -1;margin:14px 0 2px;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;
  display:flex;align-items:center;gap:12px;
}
.gallery__judul:first-child{margin-top:0}
.gallery__judul::after{content:'';flex:1;height:1px;background:var(--line)}
.gphoto{
  display:block;width:100%;margin:0;padding:0;border:0;cursor:zoom-in;
  position:relative;overflow:hidden;border-radius:10px;
  background:var(--bg-2);box-shadow:var(--shadow);
}
/* Tinggi tile disamakan supaya barisnya rata dan pengelompokan terbaca.
   Gambar utuh tetap muncul di lightbox, yang dipotong hanya pratinjaunya. */
.gphoto img{
  width:100%;height:100%;display:block;aspect-ratio:4 / 3;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1),opacity .3s;opacity:.94;
}
.gphoto:hover img,.gphoto:focus-visible img{transform:scale(1.035);opacity:1}
.gphoto__cap{
  position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent);
  color:#fff;font-size:12.5px;text-align:left;letter-spacing:.02em;
  opacity:0;transition:opacity .3s;
}
.gphoto:hover .gphoto__cap,.gphoto:focus-visible .gphoto__cap{opacity:1}
.gphoto:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:860px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.gallery{grid-template-columns:1fr}}
.gallery__more{display:flex;justify-content:center;margin-top:26px}
.gallery__empty{text-align:center;color:var(--ink-3);padding:40px 0;margin:0}
.filters--client{margin:-14px 0 30px;align-items:center}
.filters__label{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-right:4px}
.chip--sm{padding:6px 14px;font-size:13px}
.logos__item--gallery{position:relative;cursor:pointer}
.logos__item--gallery::after{
  content:'';position:absolute;right:11px;top:11px;width:13px;height:13px;
  background:var(--accent);opacity:0;transition:opacity .25s;
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M4 6h16v12H4zM8 13l2.5 2.5L14 11l4 5'/%3E%3C/svg%3E");
          mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M4 6h16v12H4zM8 13l2.5 2.5L14 11l4 5'/%3E%3C/svg%3E");
}
.logos__item--gallery:hover::after,.logos__item--gallery:focus-visible::after{opacity:1}
.logos__item--gallery:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:1040px){.gallery{columns:2}}
@media (max-width:620px){.gallery{columns:1}}

/* ---------- Lightbox foto ---------- */
.lb{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:56px 20px;
  background:rgba(4,6,9,.95);backdrop-filter:blur(10px);
}
.lb[hidden]{display:none}
.lb__figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.lb__figure img{max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:8px;object-fit:contain}
.lb__figure figcaption{color:#cfd8e4;font-size:13.5px;text-align:center;max-width:70ch}
.lb__figure figcaption:empty{display:none}
.lb__btn{
  position:absolute;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;
  font-size:26px;line-height:1;transition:background .2s;
}
.lb__btn:hover{background:rgba(255,255,255,.2)}
.lb__close{top:18px;right:20px;width:44px;height:44px}
.lb__prev,.lb__next{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:30px}
.lb__prev{left:18px}
.lb__next{right:18px}
@media (max-width:620px){
  .lb{padding:56px 10px}
  .lb__prev,.lb__next{width:40px;height:40px;font-size:24px}
  .lb__prev{left:8px}.lb__next{right:8px}
}

/* ---------- Layanan ---------- */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.service{padding:30px 26px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg-2);transition:border-color .25s;box-shadow:var(--shadow)}
.service:hover{border-color:var(--line-2)}
.service h3{font-size:1.16rem;margin-bottom:11px}
.service p{margin:0;font-size:14.5px;color:var(--ink-2)}

/* ---------- Tentang ---------- */
.about{display:grid;grid-template-columns:1.6fr .9fr;gap:56px;align-items:start}
.about__text{font-size:17px;color:var(--ink-2);max-width:62ch}
.about__side{display:grid;gap:16px}
.stat{padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);box-shadow:var(--shadow)}
.stat strong{display:block;font-family:var(--display);font-size:1.8rem;line-height:1.15}
.stat span{font-size:13.5px;color:var(--ink-3)}
@media (max-width:860px){.about{grid-template-columns:1fr;gap:34px}}

/* ---------- Kontak ---------- */
.contact__lead{margin:-28px 0 34px;color:var(--ink-2);max-width:56ch}
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.contact__item{
  display:block;padding:24px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg);text-decoration:none;transition:border-color .25s,transform .25s;box-shadow:var(--shadow);
}
.contact__item:hover{border-color:var(--line-2);transform:translateY(-3px)}
.contact__item span{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.contact__item strong{font-size:1.06rem;font-weight:600;word-break:break-word}
.socials{display:flex;gap:22px;margin-top:30px}
.socials a{font-size:14px;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.socials a:hover{color:var(--ink)}

/* ---------- Footer ---------- */
.foot{padding:32px 0;border-top:1px solid var(--line)}
.foot__in{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  font-size:13.5px;color:var(--ink-3)}
.foot__in a{text-decoration:none}
.foot__in a:hover{color:var(--ink)}

/* ---------- Mobile ---------- */
@media (max-width:760px){
  .nav{padding:12px 16px;gap:10px}
  .nav__burger{display:block}
  .nav__links{
    position:fixed;inset:58px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--nav-bg);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);
    padding:10px 0 18px;transform:translateY(-130%);transition:transform .3s cubic-bezier(.2,.7,.3,1);
  }
  .nav__links.is-open{transform:translateY(0)}
  .nav__links a{padding:14px 22px;font-size:16px;color:var(--ink-2)}
  .nav__cta{margin:10px 22px 0;text-align:center;border-color:var(--line-2);color:var(--ink)!important}
  .hero__body{padding-bottom:132px}
  .hero__stat{right:18px;bottom:60px}
  .section{padding:78px 0}
  .wrap{padding:0 18px}
  .work{grid-template-columns:1fr}
  .tile{border-right:0}
  .tile--wide{grid-column:span 1}
}
@media (max-width:1040px) and (min-width:761px){
  .work{grid-template-columns:repeat(2,1fr)}
  .tile:nth-child(3n){border-right:1px solid var(--line)}
  .tile:nth-child(2n){border-right:0}
  .tile--wide{grid-column:span 2}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}