/* BestYou — beton, mürekkep, sinyal sarısı. Tokenlar mobil theme.ts ile aynı aile.
   Kurallar: sarı yalnız dolgu (asla yazı rengi) · gölge yok, ayraç ince çizgi ·
   başlıklar dar genişlikli Instrument Sans (skorbord hissi), gövde normal genişlik. */
:root{
  color-scheme: light;
  --kagit:#FFFFFF; --zemin:#F4F5F2; --cizgi:#E4E6E1; --murekkep:#1A1D21;
  --kursun:#5C6570; --puf:#8E959C; --voltaj:#F5C518; --voltaj-koyu:#E3B40C;
  --ust:#FFFFFFEB; --blok:#1A1D21;
  --r:10px;
  --dar: "wdth" 78;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--kagit); color:var(--murekkep);
  font:400 16px/1.6 "Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
.sar{ width:min(1120px,100%); margin:0 auto; padding:0 24px; }
:focus-visible{ outline:2px solid var(--murekkep); outline-offset:3px; border-radius:6px; }

/* üst bar */
.ust{ position:sticky; top:0; z-index:9; background:var(--ust); backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--cizgi); }
.ust .sar{ display:flex; align-items:center; gap:28px; height:64px; }
.logo{ height:20px; width:auto; }
.ust nav{ display:flex; gap:26px; margin-left:auto; font-size:14px; color:var(--kursun); }
.ust nav a{ text-decoration:none; transition:color .15s; }
.ust nav a:hover{ color:var(--murekkep); }
.ustbtn{ display:flex; gap:8px; }
@media (max-width:760px){ .ust nav{ display:none; } .ustbtn{ margin-left:auto; } }

/* tipografi */
h1,h2{ font-variation-settings:var(--dar); font-weight:600; letter-spacing:-.015em; }
h1{ font-size:clamp(46px,7.4vw,88px); line-height:.96; margin:0 0 22px; }
h2{ font-size:clamp(30px,4vw,46px); line-height:1.02; margin:0 0 14px; }
h3{ font-size:17px; font-weight:600; margin:0 0 6px; letter-spacing:-.005em; }
p{ margin:0 0 12px; }
.lead{ font-size:clamp(17px,1.7vw,19px); color:var(--kursun); max-width:46ch; line-height:1.55; }
.kucuk{ font-size:13px; color:var(--puf); }
.alt{ color:var(--kursun); max-width:52ch; }

/* bölüm */
section{ padding:96px 0; }
section + section{ border-top:1px solid var(--cizgi); }
.bas{ max-width:62ch; margin-bottom:44px; }

/* buton — ince, sakin; ağırlık dolgudan değil kontrasttan gelir */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 18px;
  border-radius:var(--r); border:1px solid var(--murekkep); background:var(--murekkep); color:#fff;
  font-family:inherit; font-size:14px; font-weight:500; line-height:1; letter-spacing:.005em; text-decoration:none; white-space:nowrap;
  transition:background-color .15s, border-color .15s, color .15s; }
.btn:hover{ background:#33383E; border-color:#33383E; }
.btn.bos{ background:transparent; color:var(--murekkep); border-color:var(--cizgi); }
.btn.bos:hover{ border-color:var(--murekkep); }
.btn.sari{ background:var(--voltaj); border-color:var(--voltaj); color:var(--murekkep); }
.btn.sari:hover{ background:var(--voltaj-koyu); border-color:var(--voltaj-koyu); }
.btn.kucuk-btn{ height:36px; padding:0 14px; font-size:13.5px; }
.btn svg{ width:15px; height:15px; fill:currentColor; flex:none; }
.btnler{ display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 12px; }

/* hero */
.hero{ padding:88px 0 80px; }
.hero .sar{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
@media (max-width:900px){ .hero{ padding:56px 0 64px; } .hero .sar{ grid-template-columns:1fr; gap:48px; } }

/* üyelik kartı — sayfanın tek gösterişli öğesi: turnikede okutulan an */
.kart{ background:var(--blok); color:#fff; border-radius:22px; padding:24px 24px 22px; max-width:340px;
  justify-self:end; width:100%; }
@media (max-width:900px){ .kart{ justify-self:start; } }
.kart-ust{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.kart-salon{ font-size:13px; color:#AEB4BA; }
.kart-ad{ font-variation-settings:var(--dar); font-size:25px; white-space:nowrap; font-weight:600; line-height:1.05; margin-top:2px; }
.durum{ display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 11px; border-radius:999px;
  background:var(--voltaj); color:var(--murekkep); font-size:12.5px; font-weight:600; white-space:nowrap; }
.durum::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--murekkep); }
.qr{ margin:26px 0 22px; background:#fff; border-radius:14px; padding:16px; aspect-ratio:1; position:relative;
  overflow:hidden; }
.qr svg{ width:100%; height:100%; display:block; }
.qr::after{ content:""; position:absolute; left:10px; right:10px; height:2px; top:10%; background:var(--voltaj);
  box-shadow:0 0 0 1px #F5C51855; animation:tara 2.4s ease-in-out .4s infinite; opacity:0; }
@keyframes tara{ 0%{ top:10%; opacity:0 } 15%{ opacity:1 } 85%{ opacity:1 } 100%{ top:88%; opacity:0 } }
@media (prefers-reduced-motion:reduce){ .qr::after{ animation:none; } }
.kalan{ display:flex; justify-content:space-between; font-size:13px; color:#AEB4BA; margin-bottom:8px; }
.kalan b{ color:#fff; font-weight:600; }
.cubuk{ height:6px; border-radius:6px; background:#2E3339; overflow:hidden; }
.cubuk i{ display:block; height:100%; width:62%; background:var(--voltaj); border-radius:6px; }

/* hero altı üç kısa gerçek */
.gercekler{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:24px; padding-top:28px;
  border-top:1px solid var(--cizgi); grid-column:1 / -1; }
.gercekler b{ display:block; font-weight:600; margin-bottom:4px; }
.gercekler span{ font-size:14.5px; color:var(--kursun); }
@media (max-width:760px){ .gercekler{ grid-template-columns:1fr; gap:20px; margin-top:8px; } }

/* uygulama kartları */
.uyg{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.uyg > div{ background:var(--zemin); border-radius:18px; padding:30px 30px 26px; display:flex; flex-direction:column; }
.uygbas{ display:flex; gap:16px; align-items:center; margin-bottom:20px; }
.ikon{ width:56px; height:56px; border-radius:13px; flex:none; }
.uygbas p{ margin:0; color:var(--kursun); font-size:14px; }
.uyg ul{ list-style:none; margin:0 0 6px; padding:0; }
.uyg li{ padding:11px 0; border-top:1px solid var(--cizgi); font-size:15px; }
.uyg .btnler{ margin-top:auto; padding-top:20px; margin-bottom:0; }
.uyg .btn.bos{ background:var(--kagit); }
.not{ margin-top:22px; font-size:13px; color:var(--puf); }
@media (max-width:860px){ .uyg{ grid-template-columns:1fr; } .uyg > div{ padding:24px 20px 22px; } }

/* özellikler */
.izgara{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px 44px; }
.izgara > div{ border-top:2px solid var(--murekkep); padding-top:18px; }
.izgara p{ color:var(--kursun); font-size:15px; margin:0; }
@media (max-width:860px){ .izgara{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .izgara{ grid-template-columns:1fr; gap:28px; } }

/* işletme bandı */
.koyu{ background:var(--blok); color:#fff; border-radius:24px; padding:56px 52px; }
.koyu h2{ color:#fff; }
.koyu p{ color:#B8BEC4; }
.koyu ul{ list-style:none; padding:0; margin:0; }
.koyu li{ color:#D5D9DD; padding:12px 0; border-top:1px solid #30353B; font-size:15px; }
.koyu li:first-child{ border-top:0; padding-top:0; }
.koyu .btn.bos{ color:#fff; border-color:#3A4047; }
.koyu .btn.bos:hover{ border-color:#fff; }
.iki{ display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:start; }
@media (max-width:860px){ .iki{ grid-template-columns:1fr; gap:32px; } .koyu{ padding:36px 24px; border-radius:18px; } }

/* sss */
.sss{ margin:0; max-width:760px; }
.sss dt{ font-weight:600; font-size:17px; padding-top:22px; margin-top:22px; border-top:1px solid var(--cizgi); }
.sss dt:first-child{ margin-top:0; }
.sss dd{ margin:6px 0 0; color:var(--kursun); }

/* alt bilgi */
footer{ border-top:1px solid var(--cizgi); padding:36px 0 56px; font-size:14px; color:var(--kursun); }
footer .sar{ display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; }
footer nav{ display:flex; gap:22px; margin-left:auto; flex-wrap:wrap; }
footer a{ text-decoration:none; }
footer a:hover{ color:var(--murekkep); }

/* politika/destek sayfaları */
.belge{ padding:56px 24px 24px; max-width:calc(72ch + 48px); }
.belge h1{ font-size:clamp(34px,5vw,52px); margin:0 0 8px; }
.belge h2{ font-size:26px; margin:40px 0 8px; }
.belge h3{ font-size:16px; margin:22px 0 4px; }
.belge p, .belge li{ color:var(--kursun); }
.belge strong{ color:var(--murekkep); }
.belge ul{ padding-left:20px; }
.belge li{ margin:5px 0; }
.belge .date{ font-size:14px; color:var(--puf); }
.belge dt{ font-weight:600; color:var(--murekkep); margin-top:20px; }
.belge dd{ margin:5px 0 0; color:var(--kursun); }
.belge .kutu, .belge .box{ background:var(--zemin); border-radius:14px; padding:18px 20px; margin:22px 0; color:var(--kursun); }
.belge .lang{ margin-top:56px; padding-top:8px; border-top:1px solid var(--cizgi); }
.belge a{ color:var(--murekkep); text-underline-offset:3px; }