/* AmiralAC — site tasarım sistemi.
   Kâğıt beyazı + derin deniz laciverdi, altın yalnız vurgu. Sıkı büyük başlıklar, ince çizgiler, gerçek ürün görüntüleri. */
:root {
  color-scheme: light;
  /* gece bronzu + eski parşömen; altın vurgu, kızıl = hile, yeşim = korunuyor */
  --paper: #efe6d4; --paper-2: #e5d9c0; --white: #fbf7ee;
  --ink: #1b130c; --ink-2: #3d3024; --ink-3: #6e5d4b; --ink-4: #98866f;
  --rule: #d5c6a8; --rule-2: #c2b08d;
  --sea: #0e0b09; --sea-2: #17110d; --sea-3: #241a12; --sea-rule: rgba(232, 200, 140, .14); --sea-ink: #dccfb8; --sea-ink-2: #a3927a;
  --gold: #e0a944; --gold-h: #c99332; --gold-d: #8c5d14; --gold-50: #f6ead0; --gold-hi: #f6d48a;
  --blood: #c4352a; --jade: #3f9e72;
  --ok: #2f7d4f; --no: #b4382b;
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --gl: max(22px, env(safe-area-inset-left, 0px)); --gr: max(22px, env(safe-area-inset-right, 0px));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 18px/1.6 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); letter-spacing: .005em; line-height: 1.08; font-weight: 700; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: var(--gl); padding-right: var(--gr); }
.dark { background: radial-gradient(120% 80% at 50% 0%, #1d1510 0%, var(--sea) 60%); color: #fff; }
/* parşömen dokusu */
body { background-image: radial-gradient(rgba(120, 90, 50, .06) 1px, transparent 1px); background-size: 3px 3px; }
.mono { font-family: var(--mono); }

/* etiket: "01 / Mimari" */
.lbl { display: inline-flex; gap: 14px; align-items: baseline; font: 700 13px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.lbl b { color: var(--gold-d); font-weight: 500; }
.dark .lbl { color: var(--sea-ink-2); } .dark .lbl b { color: var(--gold); }

.d1 { font-size: clamp(44px, 6.6vw, 92px); }
.d2 { font-size: clamp(32px, 4.2vw, 56px); }
.d3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; }
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 34em; }
.dark .lead { color: var(--sea-ink); }
.muted { color: var(--ink-3); } .dark .muted { color: var(--sea-ink-2); }

/* düğmeler */
.btn { --cut: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 30px; border: 0;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  font: 700 15px var(--display); letter-spacing: .06em; white-space: nowrap; cursor: pointer; transition: filter .2s, background .2s, color .2s; }
.btn .ar { transition: transform .2s; font-family: var(--body); }
.btn:hover .ar { transform: translateX(4px); }
.btn-gold { color: #2a1a06; background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 48%, #b07a1f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(80, 45, 0, .35); text-shadow: 0 1px 0 rgba(255, 235, 190, .5); }
.btn-gold:hover { filter: brightness(1.08) saturate(1.1); }
.btn-ink { background: linear-gradient(180deg, #3a2c1f, #1b130c); color: var(--gold-hi); box-shadow: inset 0 0 0 1px rgba(224, 169, 68, .45); } .btn-ink:hover { filter: brightness(1.2); }
.btn-line { background: rgba(27, 19, 12, .04); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(27, 19, 12, .35); } .btn-line:hover { background: rgba(27, 19, 12, .08); }
.dark .btn-line, .foot .btn-line { background: rgba(224, 169, 68, .06); color: var(--gold-hi); box-shadow: inset 0 0 0 1.5px rgba(224, 169, 68, .55); } .dark .btn-line:hover, .foot .btn-line:hover { background: rgba(224, 169, 68, .14); }
.btn-sm { --cut: 7px; min-height: 42px; padding: 0 20px; font-size: 13.5px; }
.txtlink { font-weight: 600; display: inline-flex; gap: 8px; align-items: center; border-bottom: 1.5px solid var(--gold); padding-bottom: 2px; }
.txtlink .ar { transition: transform .2s; } .txtlink:hover .ar { transform: translateX(4px); }

/* ------------------------------------------------------------- menü: yüzen oval cam */
.hdr { position: fixed; z-index: 50; top: calc(env(safe-area-inset-top, 0px) + 14px); left: 0; right: 0; pointer-events: none; padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); }
.pill { pointer-events: auto; max-width: 1200px; margin: 0 auto; height: 64px; display: flex; align-items: center; gap: 26px; padding: 0 9px 0 22px; border-radius: 999px;
  color: var(--ink); background: rgba(246, 238, 222, .78); border: 1px solid rgba(140, 93, 20, .22);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: 0 14px 40px -18px rgba(27, 19, 12, .35), inset 0 1px 0 rgba(255, 255, 255, .85);
  transition: background .35s, color .35s, border-color .35s, box-shadow .35s; }
.hdr.on-dark .pill { color: #fff; background: rgba(20, 14, 9, .5); border-color: rgba(224, 169, 68, .28); box-shadow: 0 14px 40px -16px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .12); }
.logo img { height: 34px; width: auto; }
.menu { display: flex; gap: 2px; flex: 1; justify-content: center; }
.menu a { font: 700 13.5px var(--display); letter-spacing: .08em; padding: 9px 15px; border-radius: 999px; opacity: .78; transition: opacity .2s, background .2s; }
.menu a:hover { opacity: 1; background: rgba(27, 19, 12, .06); }
.hdr.on-dark .menu a:hover { background: rgba(255, 255, 255, .1); }
.menu a[aria-current] { opacity: 1; }
.menu a[aria-current]::after { content: ""; display: block; height: 2px; margin-top: 3px; border-radius: 2px; background: var(--gold); }
.hdr-r { display: flex; align-items: center; gap: 6px; }
.hdr-r .login { font-weight: 600; font-size: 15px; padding: 9px 14px; border-radius: 999px; opacity: .78; } .hdr-r .login:hover { opacity: 1; }
.burger { display: none; width: 46px; height: 46px; border: 0; background: none; border-radius: 999px; cursor: pointer; padding: 0; place-content: center; gap: 5px; color: inherit; }
.burger span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; }
.open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.open .burger span:nth-child(2) { opacity: 0; }
.open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.drawer { display: none; }
@media (max-width: 960px) {
  .menu, .hdr-r .login, .hdr-r .btn { display: none; }
  .pill { height: 58px; justify-content: space-between; padding: 0 6px 0 18px; }
  .logo img { height: 29px; }
  .burger { display: grid; }
  .drawer { display: block; pointer-events: none; max-width: 1200px; margin: 10px auto 0; border-radius: 26px; padding: 8px 18px 18px; color: var(--ink);
    background: rgba(246, 238, 222, .96); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
    border: 1px solid rgba(27, 19, 12, .08); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top center; transition: opacity .2s, transform .2s; }
  .open .drawer { opacity: 1; transform: none; pointer-events: auto; }
  .drawer a:not(.btn) { display: flex; justify-content: space-between; padding: 15px 6px; font: 600 18px var(--display); letter-spacing: -.01em; border-bottom: 1px solid var(--rule); }
  .drawer a:not(.btn)::after { content: "→"; color: var(--gold-d); }
  .drawer .btn { width: 100%; margin-top: 16px; }
}

/* ------------------------------------------------------------- deniz sahnesi */
.scene { position: relative; overflow: hidden; isolation: isolate; background: var(--sea); color: #fff; }
.scene .sea { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.6s ease; }
.scene .sea.on { opacity: 1; }
.scene .shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.scene > .wrap { position: relative; z-index: 4; }

/* iç sayfa başlığı (kısa deniz bandı) */
.phead .shade { background: linear-gradient(90deg, rgba(14, 10, 8, .82) 0%, rgba(14, 10, 8, .45) 55%, rgba(14, 10, 8, .1) 100%), linear-gradient(180deg, rgba(14, 10, 8, .3), rgba(14, 10, 8, 0) 40%, rgba(14, 10, 8, .55)); }
.phead > .wrap { padding-block: 168px 84px; display: grid; gap: 22px; }
.phead h1 { max-width: 12em; }
.phead .lead { color: var(--sea-ink); }
@media (max-width: 760px) { .phead > .wrap { padding-block: 128px 56px; } }

/* bölümler */
.sec { padding-block: clamp(80px, 11vw, 150px); }
.sec-sm { padding-block: clamp(56px, 7vw, 96px); }
.head2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: clamp(44px, 6vw, 80px); }
.head2 .lbl { grid-column: 1 / -1; }
@media (max-width: 860px) { .head2 { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
.rule-top { border-top: 1px solid var(--rule); } .dark .rule-top { border-top-color: var(--sea-rule); }

/* ekran görüntüsü çerçevesi */
.frame { border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid rgba(27, 19, 12, .12); box-shadow: 0 50px 100px -40px rgba(30, 18, 8, .45), 0 18px 36px -24px rgba(30, 18, 8, .3); }
.frame .bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; background: #eef0f3; border-bottom: 1px solid #dfe2e7; }
.frame .bar i { width: 10px; height: 10px; border-radius: 50%; background: #cfd3da; }
.frame .bar span { margin-left: 12px; font: 500 12px var(--mono); color: #7a828f; background: #fff; border: 1px solid #e2e5ea; border-radius: 6px; padding: 3px 12px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame img { width: 100%; height: auto; }
.dark .frame { border-color: rgba(255, 255, 255, .1); box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .8); }

/* terminal ve pencere görünümleri */
.term { border-radius: 10px; overflow: hidden; background: #0b0f17; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .7); }
.term .bar { display: flex; gap: 7px; align-items: center; height: 34px; padding: 0 14px; background: #141a25; }
.term .bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a4252; }
.term .bar span { margin-left: 10px; font: 500 12px var(--mono); color: #7c8596; }
.term pre { margin: 0; padding: 20px 22px 24px; font: 13.5px/1.75 var(--mono); color: #c9d2e0; overflow-x: auto; white-space: pre; }
.term .p { color: #7fb0ff; } .term .ok { color: #5fd38d; } .term .ac { color: #e3ab3c; } .term .dim { color: #6b7485; }

/* özellik tablosu */
.spec { width: 100%; border-collapse: collapse; }
.spec th, .spec td { text-align: left; padding: 16px 0; border-bottom: 1px solid var(--rule); vertical-align: top; font-size: 16px; }
.spec th { width: 34%; font: 500 12.5px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding-right: 24px; }
.spec td code { font: 500 13.5px var(--mono); color: var(--ink-2); background: var(--paper-2); padding: 2px 7px; border-radius: 4px; margin: 0 4px 4px 0; display: inline-block; }
.dark .spec th, .dark .spec td { border-bottom-color: var(--sea-rule); } .dark .spec th { color: var(--sea-ink-2); }

/* güven ölçeği */
.conf { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.conf i { display: inline-grid; grid-auto-flow: column; gap: 3px; }
.conf i::before, .conf i::after, .conf i b { content: ""; }
.bars4 { display: inline-flex; gap: 3px; }
.bars4 span { width: 6px; height: 14px; border-radius: 2px; background: var(--rule-2); }
.bars4.l1 span:nth-child(-n+1), .bars4.l2 span:nth-child(-n+2), .bars4.l3 span:nth-child(-n+3), .bars4.l4 span { background: var(--gold-h); }
.dark .bars4 span { background: rgba(255, 255, 255, .16); }

/* ------------------------------------------------------------- alt bilgi */
.foot { background: var(--sea); color: var(--sea-ink-2); border-top: 1px solid rgba(224, 169, 68, .25); }
.foot-cta { border-bottom: 1px solid var(--sea-rule); background: linear-gradient(90deg, rgba(14, 10, 8, .9) 0%, rgba(14, 10, 8, .55) 45%, rgba(14, 10, 8, .08) 100%), linear-gradient(0deg, rgba(14, 10, 8, .9), rgba(14, 10, 8, 0) 40%), url(../img/oyun-tapinak.jpg) 70% 40% / cover no-repeat; }
.foot-cta .wrap { min-height: clamp(320px, 34vw, 460px); }
.foot-cta .wrap { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; padding-block: clamp(56px, 8vw, 104px); }
.foot-cta h2 { color: var(--gold-hi); font-size: clamp(30px, 4.4vw, 60px); max-width: 13em; }
.foot-cols .wrap { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; padding-block: 56px 28px; font-size: 15px; }
.foot-cols img { height: 40px; width: auto; }
.foot-cols h4 { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sea-ink-2); margin-bottom: 16px; }
.foot-cols li + li { margin-top: 10px; }
.foot-cols a { color: var(--sea-ink); } .foot-cols a:hover { color: #fff; }
.foot-legal { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--sea-rule); padding-top: 22px; font: 12.5px var(--mono); }
@media (max-width: 860px) { .foot-cols .wrap { grid-template-columns: 1fr 1fr; } .foot-cols .wrap > div:first-child { grid-column: 1 / -1; } }

/* görünür olunca beliren öğeler */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } .js .rv { opacity: 1; transform: none; } }