/* LA Apps vitrini. Zemin sıcak siyah, tek vurgu altın; her ürün kendi rengini kendi karolarında taşır. */
/* Jost (SIL Open Font License), sitenin font-src 'self' kuralı için yerel. */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/jost-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/jost-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #0c0a08;
  --surface: #181512;
  --surface-2: #221e1a;
  --ink: #ffffff;
  --muted: #b3ada6;
  --accent: #c9a45a;
  --accent-ink: #0c0a08;

  /* ürün renkleri (her biri kendi uygulamasının marka dosyasından) */
  --mos: #ff5a4e;      --mos-ink: #1a0a08;
  --lafish: #1f4e7a;   --lafish-ink: #ffffff;
  --midpoint: #0d84ff; --midpoint-ink: #06101c;
  --laplayer: #e11d48; --laplayer-ink: #ffffff;
  --lacar: #c4d99a;    --lacar-ink: #18200f;

  --gap: 8px;
  --m: 24px;
  --r: 0px;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-giant: clamp(4rem, 9vw, 8.25rem);

  --ease: cubic-bezier(.2, .7, .1, 1);
}

[data-u="mos"]      { --u: var(--mos);      --u-ink: var(--mos-ink); }
[data-u="lafish"]   { --u: var(--lafish);   --u-ink: var(--lafish-ink); }
[data-u="midpoint"] { --u: var(--midpoint); --u-ink: var(--midpoint-ink); }
[data-u="laplayer"] { --u: var(--laplayer); --u-ink: var(--laplayer-ink); }
[data-u="lacar"]    { --u: var(--lacar);    --u-ink: var(--lacar-ink); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Jost", system-ui, sans-serif; font-size: var(--step-body); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  background: var(--accent); color: var(--accent-ink); font-weight: 500; text-decoration: none;
  border-radius: var(--r); transition: transform .18s var(--ease), background-color .18s;
}
.btn:hover { background: #d8b56b; }
.btn:active { transform: scale(.97); }
.btn-u { background: var(--u-ink); color: var(--u); }
.btn-u:hover { background: var(--bg); color: var(--ink); }
.btn-kucuk { min-height: 44px; padding: 0 16px; font-size: var(--step-small); }
.lnk { text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.lnk:hover { text-decoration-thickness: 3px; }

/* ---------- Hero: ekran görüntüsü sayfası + metin hücresi ---------- */
.hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; }
.sheet {
  position: absolute; inset: 0 var(--m); display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
}
.col { display: flex; flex-direction: column; gap: 12px; transform: translateY(var(--off)); }
.fr { background: var(--surface); }
.fr img { width: 100%; }
.fr figcaption {
  height: 28px; padding: 0 10px; display: flex; align-items: center; font-size: var(--step-small);
  background: var(--u); color: var(--u-ink); white-space: nowrap; overflow: hidden;
}
.ic-frame { aspect-ratio: 3 / 4; display: grid; place-items: center; background: var(--surface-2); }
.ic-frame img { width: 46%; }
.col-panel, .col-panel2 { padding-top: 0; }
.panel {
  position: absolute; z-index: 2; top: 22%;
  left: calc(var(--m) + (100% - 2 * var(--m) - 60px) / 6 * 2 + 24px);
  width: calc((100% - 2 * var(--m) - 60px) / 6 * 3 + 24px);
  min-height: 410px; padding: 24px; background: var(--ink); color: var(--bg);
  display: flex; flex-direction: column; gap: 16px;
}
.wordmark { font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.panel h1 { font-size: clamp(2.5rem, 1.2rem + 3.4vw, 4.5rem); font-weight: 700; line-height: .95; letter-spacing: -0.03em; }
.panel-text { font-size: var(--step-body); color: #2b2622; }
.panel .btn { align-self: flex-start; margin-top: 4px; }
.panel-links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--step-small); }
.panel-links a { text-underline-offset: 3px; }
.panel-links a:hover { color: #6b5320; }

/* ---------- Intro: günün beş saati ---------- */
.intro { padding: 200px var(--m) 0; }
.intro-ust { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: end; margin-bottom: 40px; }
.intro-ust h2 { grid-column: 1 / 8; font-size: clamp(3rem, 1rem + 5.6vw, 6.5rem); font-weight: 700; text-transform: uppercase; line-height: .86; letter-spacing: -0.03em; }
.intro-ust p { grid-column: 8 / 13; font-size: var(--step-lead); line-height: 1.38; }
.dilimler { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); height: 62svh; min-height: 460px; }
.dilim {
  background: var(--u); color: var(--u-ink); text-decoration: none; padding: 22px;
  display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden;
  transition: transform .18s var(--ease);
}
.dilim b { font-size: clamp(2.5rem, 1rem + 3.4vw, 4.25rem); font-weight: 700; letter-spacing: -0.03em; line-height: .9; font-variant-numeric: tabular-nums; }
.dilim img { width: clamp(64px, 6vw, 96px); height: auto; border-radius: 22%; margin-top: auto; margin-bottom: 18px; transition: transform .4s var(--ease); }
.dilim-ad { font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.dilim span:last-child { font-size: var(--step-body); }
.dilim:hover img, .dilim:focus-visible img { transform: scale(1.08) rotate(-3deg); }
.dilim:active { transform: scale(.985); }
.dilim[aria-current="time"]::after { content: attr(data-simdi); font-size: var(--step-small); font-weight: 700; margin-top: 4px; }

/* ---------- Gün: saatler + ürün panoları ---------- */
.gun { padding: 140px var(--m) 0; }
.gun-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 32px; margin-bottom: 24px; }
.gun-head h2 { font-size: var(--step-head); font-weight: 700; text-transform: uppercase; letter-spacing: -0.03em; line-height: .95; }
.gun-note { color: var(--muted); max-width: 46ch; }
.saatler { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); margin-bottom: var(--gap); position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 8px 0; }
.saat {
  font: inherit; color: var(--ink); background: var(--surface); border: 0; border-radius: var(--r);
  padding: 14px 16px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px;
  transition: background-color .2s, color .2s, transform .18s var(--ease);
}
.saat b { font-size: var(--step-lead); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.saat span { font-size: var(--step-small); color: var(--muted); }
.saat:hover { background: var(--surface-2); }
.saat:active { transform: scale(.98); }
.saat[aria-selected="true"] { background: var(--u); color: var(--u-ink); }
.saat[aria-selected="true"] span { color: var(--u-ink); }

.urun {
  display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(90px, auto); gap: var(--gap);
  margin-bottom: 64px; scroll-margin-top: 110px; transition: opacity .3s;
}
.k { background: var(--surface); padding: 22px; }
.k-ad { grid-column: 1 / 7; grid-row: span 4; background: var(--u); color: var(--u-ink); display: flex; flex-direction: column; gap: 14px; }
.ikon { width: 72px; height: 72px; border-radius: 16px; }
.k-ad h3 { font-size: var(--step-head); font-weight: 700; letter-spacing: -0.03em; line-height: .95; margin-top: auto; }
.slogan { font-size: var(--step-lead); line-height: 1.3; max-width: 30ch; }
.durum { font-size: var(--step-small); font-weight: 500; }
.k-ekran { grid-column: span 3; grid-row: span 6; padding: 0; overflow: hidden; background: var(--u); position: relative; }
.k-ekran img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.k-ekran:hover img { transform: scale(1.04); }
.k-ekran figcaption {
  position: absolute; left: 0; bottom: 0; height: 28px; padding: 0 10px; display: flex; align-items: center;
  font-size: var(--step-small); background: var(--u); color: var(--u-ink);
}
.k-liste { grid-column: 1 / 7; grid-row: span 2; display: grid; gap: 12px; }
.k-liste li { padding-left: 18px; position: relative; }
.k-liste li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--u); }
.k-eylem { grid-column: 1 / 13; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; background: var(--surface-2); }
.k-eylem .btn-u { background: var(--u); color: var(--u-ink); }
.k-eylem .btn-u:hover { background: var(--ink); color: var(--bg); }
.k-eylem p { max-width: 70ch; }
.not { font-size: var(--step-small); color: var(--muted); flex-basis: 100%; }
.uyari { font-weight: 500; background: var(--u); color: var(--u-ink); padding: 8px 12px; }
.yakinda { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; background: var(--surface); color: var(--muted); }

/* LA Marketing OS: ekran görüntüsü yok, saat karosu taşıyor */
.k-mos-onay { grid-column: 7 / 13; grid-row: span 6; background: var(--surface-2); display: flex; flex-direction: column; justify-content: space-between; }
.mos-saat { font-size: var(--step-giant); font-weight: 700; letter-spacing: -0.04em; line-height: .85; color: var(--mos); font-variant-numeric: tabular-nums; }
.mos-satir { font-size: var(--step-lead); max-width: 22ch; }
#mos .k-liste { grid-row: span 2; }
.urun .k-mos-resim { grid-column: 7 / 13; grid-row: span 6; }
.k-mos-resim img { object-position: center; }

/* LA Player: yatay ekranlar */
.urun-genis .k-yatay { grid-column: 7 / 13; grid-row: span 3; }
.urun-genis .k-yatay img { object-position: center; }

/* ---------- Nerede: dev kelime + açılan çubuklar ---------- */
.nerede { padding: 180px var(--m) 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: start; }
.nerede-col { grid-column: 1 / 6; container-type: inline-size; }
.dev { font-size: 24cqw; font-weight: 700; text-transform: uppercase; line-height: .8; letter-spacing: -0.04em; margin-bottom: 20px; }
.bar { background: var(--surface); margin-bottom: 6px; }
.bar summary {
  min-height: 56px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between;
  font-weight: 500; cursor: pointer; list-style: none; transition: background-color .2s;
}
.bar summary::-webkit-details-marker { display: none; }
.bar summary::after { content: "+"; font-size: 1.4em; font-weight: 400; transition: transform .25s var(--ease); }
.bar[open] summary::after { transform: rotate(45deg); }
.bar summary:hover { background: var(--surface-2); }
.bar ul { padding: 4px 20px 20px; display: grid; gap: 14px; }
.bar li { display: flex; justify-content: space-between; gap: 16px; }
.bar li span:last-child { color: var(--muted); text-align: right; }
.nerede-resim { grid-column: 6 / 13; align-self: stretch; overflow: hidden; background: var(--laplayer); }
.nerede-resim img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- İletişim: şerit + üç hücre ---------- */
.iletisim { margin-top: 180px; background: var(--accent); color: var(--accent-ink); padding: 48px var(--m) 72px; overflow: hidden; }
.serit { margin: 0 calc(-1 * var(--m)); overflow: hidden; }
.serit-ic { display: flex; gap: 8px; width: max-content; animation: kay 60s linear infinite; }
.serit img { height: 150px; width: auto; }
@keyframes kay { to { transform: translateX(-50%); } }
.iletisim-ic { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; margin-top: 72px; align-items: end; }
.iletisim-ic h2 { grid-column: 1 / 6; }
.iletisim-ic .hucreler { grid-column: 6 / 13; }
.hucreler .kucuk { grid-column: 1 / 3; margin-top: 4px; }
.iletisim h2 { margin: 0; font-size: clamp(2.25rem, 4vw, 3.75rem); font-weight: 700; text-transform: uppercase; letter-spacing: -0.03em; line-height: .95; }
.hucreler { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hucre-ana { grid-column: 1 / 3; }
.hucre {
  min-height: 96px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 16px;
  background: #b8934c; color: var(--accent-ink); font-size: var(--step-lead); text-decoration: none; transition: background-color .2s, transform .18s var(--ease);
}
.hucre:hover, .hucre:focus-visible { background: #e2c88f; }
.hucre:active { transform: scale(.98); }
.hucre-ana { background: var(--accent-ink); color: var(--ink); }
.hucre-ana:hover { background: #2a241e; }
.kucuk { margin-top: 12px; font-size: var(--step-small); }

/* ---------- Altbilgi: bloklardan işaret ---------- */
.altbilgi { padding: 48px var(--m) 24px; background: var(--surface); }
.isaret { height: 34svh; display: grid; grid-template-columns: 2fr 2fr 1fr 1fr 1fr; gap: 4px; align-items: end; }
.isaret span {
  height: var(--h); background: var(--u); color: var(--surface); display: flex; flex-direction: column; justify-content: space-between;
  font-weight: 700; font-size: clamp(6rem, 22vw, 20rem); line-height: .78; letter-spacing: -0.05em; padding-left: .04em; overflow: hidden;
}
.isaret i { font-style: normal; font-weight: 500; font-size: var(--step-small); letter-spacing: 0; line-height: 1.2; padding: 12px 12px 0 calc(12px - .04em); color: var(--u-ink); }
.alt-sutun { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); margin-top: 56px; }
.alt-sutun nav { grid-column: 1 / 9; display: grid; grid-template-columns: repeat(5, max-content); gap: 8px 40px; }
.alt-sutun nav a { text-decoration: none; }
.alt-sutun nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.alt-sutun address { grid-column: 9 / 13; font-style: normal; }
.alt-son { margin-top: 40px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: var(--step-small); color: var(--muted); }

/* ---------- Hareket ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}
.panel { animation: perde 1.1s var(--ease) both; }
@keyframes perde { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.col { animation: kol 1.4s var(--ease) both; }
.col:nth-child(even) { animation-delay: .08s; }
@keyframes kol { from { opacity: 0; transform: translateY(calc(var(--off) + 60px)); } to { opacity: 1; transform: translateY(var(--off)); } }
.sheet .fr img { transition: transform 8s linear; }
.hero:hover .sheet .fr img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .panel, .col { animation: none; }
  .serit-ic { animation: none; }
  .k-ekran img, .sheet .fr img { transition: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .hero { height: auto; min-height: 0; overflow: visible; display: flex; flex-direction: column; }
  .panel { position: static; order: -1; width: auto; margin: var(--m); min-height: 0; animation: none; }
  .sheet { position: relative; inset: auto; margin: 0 var(--m); grid-template-columns: repeat(4, 1fr); height: 640px; overflow: hidden; }
  .sheet .col:nth-child(n+5) { display: none; }
  .k-ad, .k-liste { grid-column: 1 / 13; }
  .k-ad { grid-row: span 3; }
  .k-ekran { grid-column: span 6; }
  .k-mos-onay { grid-column: 1 / 13; grid-row: span 3; }
  .urun .k-mos-resim { grid-column: 1 / 13; grid-row: auto; aspect-ratio: 7 / 6; }
  .urun-genis .k-yatay { grid-column: 1 / 13; }
  .nerede-col { grid-column: 1 / 13; }
  .nerede-resim { grid-column: 1 / 13; aspect-ratio: 2 / 1; }
  .intro-ust h2 { grid-column: 1 / 13; }
  .intro-ust p { grid-column: 1 / 13; margin-top: 20px; }
  .dilimler { height: auto; min-height: 0; grid-template-columns: repeat(5, 1fr); }
  .dilim { min-height: 340px; padding: 16px; }
  .dilim-ad { font-size: var(--step-body); }
}

/* ---------- Telefon ---------- */
@media (max-width: 640px) {
  :root { --m: 16px; --gap: 6px; }
  .hero { height: auto; min-height: 0; overflow: visible; display: flex; flex-direction: column; }
  .panel { position: static; order: -1; width: auto; margin: var(--m); min-height: 40svh; animation: none; }
  .wordmark { font-size: 7vw; }
  .panel .btn { align-self: stretch; }
  .sheet { position: relative; inset: auto; margin: 0 var(--m); grid-template-columns: 1fr 1fr; gap: 8px; height: 560px; overflow: hidden; }
  .sheet .col { display: flex; animation: none; transform: none; }
  .sheet .col:nth-child(n+3) { display: none; }
  .sheet .col:nth-child(2) { transform: translateY(-60px); }

  .intro { padding-top: 96px; }
  .intro-ust h2 { font-size: 14vw; }
  .intro-ust p { font-size: 1.125rem; }
  .dilimler { grid-template-columns: 1fr; gap: 6px; }
  .dilim { min-height: 0; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 16px; }
  .dilim b { font-size: 2.25rem; grid-row: 1 / 3; }
  .dilim img { display: none; }
  .dilim-ad { font-size: 1.125rem; }
  .dilim[aria-current="time"]::after { position: absolute; top: 50%; transform: translateY(-50%); right: 16px; margin: 0; }
  .gun { padding-top: 120px; }
  .saatler { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .saat { padding: 10px 6px; }
  .saat b { font-size: 1.0625rem; }
  .saat span { display: none; }
  .iletisim-ic h2, .iletisim-ic .hucreler { grid-column: 1 / 13; }
  .iletisim-ic { gap: 32px; }
  .hucre-ana { grid-column: auto; }
  .urun { grid-template-columns: 1fr 1fr; }
  .k-ad, .k-liste, .k-eylem, .k-mos-onay, .urun-genis .k-yatay { grid-column: 1 / 3; }
  .k-ekran { grid-column: span 1; grid-row: auto; aspect-ratio: 9 / 16; }
  .urun-genis .k-yatay { aspect-ratio: 16 / 9; }
  .k-mos-onay { grid-row: auto; gap: 24px; }
  .urun .k-mos-resim { grid-column: 1 / 3; aspect-ratio: 7 / 6; }
  .k-eylem .btn { flex: 1 1 140px; }

  .nerede { padding-top: 120px; }
  .iletisim { margin-top: 120px; }
  .serit img { height: 110px; }
  .iletisim h2 { font-size: 9vw; }
  .hucreler { grid-template-columns: 1fr; }
  .hucre { min-height: 60px; font-size: var(--step-body); }
  .isaret { height: 22svh; }
  .alt-sutun nav { grid-column: 1 / 13; grid-template-columns: 1fr 1fr; }
  .alt-sutun address { grid-column: 1 / 13; margin-top: 16px; }
}