/* Gulet Alışveriş — public site (landing + legal + contact).
   Separate from the app's styles.css: these pages are static, bilingual and
   must render fast for first-time visitors. Brand: heritage navy, no gold. */

:root{
  --navy:#0c1f33; --navy-2:#102a45; --navy-3:#173352;
  --ink:#11253b; --ink-2:#45576b; --muted:#7a8a9c;
  --line:#e4e9ef; --line-soft:#eef2f6;
  --bg:#ffffff; --bg-soft:#f4f7fa;
  --accent:#2f6fb0; --accent-soft:#e8f0f9; --accent-ink:#1d4f80;
  --r:14px;
  --shadow:0 4px 16px -6px rgba(11,27,44,.14);
  --shadow-lg:0 24px 60px -28px rgba(11,27,44,.42);
  --max:1080px; --max-doc:820px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans','Inter',sans-serif; line-height:1.2; letter-spacing:-.02em; margin:0;}
p{margin:0;}
a{color:var(--accent-ink);}
.wrap{max-width:var(--max); margin:0 auto; padding:0 22px;}
.wrap-doc{max-width:var(--max-doc); margin:0 auto; padding:0 22px;}
.section{padding:76px 0;}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:14px;}
.lead{font-size:17.5px; color:var(--ink-2); max-width:62ch;}
h2.big{font-size:clamp(25px,3.2vw,35px);}

/* ---------- i18n: only the active language is shown ---------- */
html[data-lang="tr"] [lang="en"]{display:none !important;}
html[data-lang="en"] [lang="tr"]{display:none !important;}

/* ---------- Nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(12,31,51,.94);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid rgba(255,255,255,.08);}
.nav .wrap{display:flex; align-items:center; gap:16px; height:62px;}
.brand{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:800;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:17px; letter-spacing:-.01em;}
.brand svg{width:26px; height:26px; flex:0 0 auto;}
.nav-links{margin-left:auto; display:flex; align-items:center; gap:22px;}
.nav-links a{color:rgba(255,255,255,.82); text-decoration:none; font-size:14.5px; font-weight:500;}
.nav-links a:hover{color:#fff;}
/* The CTA must never wrap: at ~390px "Uygulamayı Aç" broke onto a second line,
   which pushed the pill to 64px inside a 62px bar so it overflowed and looked
   both oversized and vertically off-centre. nowrap + flex centring fixes it. */
.nav-cta{
  background:#fff; color:var(--navy)!important; padding:9px 16px; border-radius:999px;
  font-weight:700!important; font-size:14px!important; line-height:1!important;
  white-space:nowrap; display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto;
}
.brand{white-space:nowrap;}
.lang-switch{display:inline-flex; border:1px solid rgba(255,255,255,.26); border-radius:999px; overflow:hidden; flex:0 0 auto;}
.lang-switch button{
  background:transparent; border:0; color:rgba(255,255,255,.72); cursor:pointer;
  font:600 12.5px/1 'Inter',sans-serif; padding:7px 11px; letter-spacing:.04em;
}
.lang-switch button[aria-pressed="true"]{background:#fff; color:var(--navy);}

@media(max-width:820px){
  .nav-links a:not(.nav-cta){display:none;}
  .nav .wrap{gap:10px;}
  .nav-links{gap:10px;}
}
/* Phone widths: the bar holds brand + language + CTA, so everything tightens
   just enough to fit 390px without wrapping or clipping. */
@media(max-width:560px){
  .nav .wrap{padding:0 16px; gap:8px;}
  .brand{font-size:15px; gap:8px;}
  .brand svg{width:23px; height:23px;}
  .nav-links{gap:8px;}
  .nav-cta{font-size:13px!important; padding:8px 13px;}
  .lang-switch button{font-size:11.5px; padding:6px 9px;}
  /* Comfortable thumb targets. The bar is 62px tall, so these grow the tap area
     without changing how anything looks. */
  .nav-cta{min-height:38px;}
  .lang-switch button{min-height:34px;}
  .brand{padding:9px 0;}
}
/* Very narrow phones (≤360px): keep the mark, drop the wordmark so the CTA
   never gets squeezed or pushed off-screen. */
@media(max-width:360px){
  .brand{font-size:0; gap:0;}
  .brand svg{width:24px; height:24px;}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; text-decoration:none; border:0; cursor:pointer;
  padding:14px 24px; border-radius:999px; font-weight:700; font-size:15.5px;
  font-family:'Inter',sans-serif; transition:transform .15s ease, background .15s ease;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:#fff; color:var(--navy); box-shadow:0 10px 30px -12px rgba(0,0,0,.5);}
.btn-ghost{background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.24);}
.btn-ghost:hover{background:rgba(255,255,255,.17);}
.btn-solid{background:var(--navy); color:#fff;}
.btn-solid:hover{background:var(--navy-3);}

/* ---------- Document pages (legal / contact) ---------- */
.doc-head{background:linear-gradient(165deg,#153a5e,#0a1a2b); color:#fff; padding:56px 0 46px;}
.doc-head h1{font-size:clamp(27px,3.6vw,40px); color:#fff;}
.doc-head .sub{margin-top:12px; color:rgba(255,255,255,.74); font-size:16.5px; max-width:60ch;}
.doc-head .meta{margin-top:16px; font-size:13px; color:rgba(255,255,255,.55);}
.doc{padding:46px 0 80px;}
.doc h2{font-size:21px; margin:38px 0 10px; color:var(--navy); scroll-margin-top:80px;}
.doc h3{font-size:16.5px; margin:24px 0 6px; color:var(--navy);}
.doc p, .doc li{font-size:15.6px; color:#28394b;}
.doc p{margin:10px 0;}
.doc ul, .doc ol{padding-left:20px; margin:10px 0;}
.doc li{margin:6px 0;}
.doc hr{border:0; border-top:1px solid var(--line); margin:36px 0;}
.toc{background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r); padding:18px 22px; margin:26px 0 8px;}
.toc strong{display:block; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:8px;}
.toc ol{margin:0; padding-left:20px;}
.toc li{margin:4px 0; font-size:14.6px;}
.callout{background:var(--accent-soft); border-left:4px solid var(--accent); border-radius:0 var(--r) var(--r) 0;
  padding:16px 20px; margin:20px 0;}
.callout p{margin:6px 0; font-size:15.2px; color:#1c3a58;}
.callout strong{color:var(--navy);}
.notice{background:#fff8e8; border-left:4px solid #d9a441; border-radius:0 var(--r) var(--r) 0; padding:16px 20px; margin:20px 0;}
.notice p{margin:6px 0; font-size:15px; color:#5c4611;}

/* tables (sub-processors) */
.tbl-wrap{overflow-x:auto; margin:18px 0; border:1px solid var(--line); border-radius:var(--r);}
table{border-collapse:collapse; width:100%; min-width:640px; font-size:14.4px; background:#fff;}
th,td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--line-soft); vertical-align:top;}
th{background:var(--bg-soft); font-weight:700; color:var(--navy); font-size:13.4px; letter-spacing:.02em;}
tr:last-child td{border-bottom:0;}

/* ---------- Footer ---------- */
footer.site{background:var(--navy); color:rgba(255,255,255,.6); font-size:14px; padding:38px 0;}
footer.site .wrap{display:flex; flex-wrap:wrap; gap:16px 26px; align-items:flex-start;}
footer.site a{color:rgba(255,255,255,.78); text-decoration:none;}
footer.site a:hover{color:#fff; text-decoration:underline;}
.foot-links{margin-left:auto; display:flex; gap:10px 22px; flex-wrap:wrap;}
.foot-note{width:100%; border-top:1px solid rgba(255,255,255,.10); padding-top:16px; font-size:12.8px; color:rgba(255,255,255,.45); line-height:1.6;}