:root{
  --zemin:#0d0f12; --kart:rgba(18,21,26,.82); --cizgi:rgba(255,255,255,.10);
  --metin:#f3f4f6; --soluk:#a3a9b3; --vurgu:#e30a17; --wa:#25d366;
  --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{min-height:100%}
body{font-family:"Manrope",system-ui,sans-serif;background:var(--zemin);color:var(--metin);
  line-height:1.5;-webkit-font-smoothing:antialiased;display:flex;justify-content:center;
  align-items:center;min-height:100vh;min-height:100dvh;padding:32px 18px 120px}
.arka{position:fixed;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(13,15,18,.55) 0%,rgba(13,15,18,.88) 55%,#0d0f12 100%),
  url(../img/arka.jpg) center 35%/cover no-repeat;filter:blur(5px);transform:scale(1.06)}
.kart{width:100%;max-width:460px;background:var(--kart);border:1px solid var(--cizgi);
  border-radius:26px;padding:40px 24px 22px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 80px rgba(0,0,0,.45);animation:gir .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes gir{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.ust{text-align:center;margin-bottom:30px}
.logo{display:inline-flex;align-items:baseline;gap:8px;line-height:1.15;padding-top:4px}
.logo-bzm{font-size:44px;font-weight:800;letter-spacing:.02em}
.logo-motors{font-size:15px;font-weight:700;letter-spacing:.32em;color:var(--vurgu)}
.altbaslik{margin-top:6px;color:var(--soluk);font-size:15px}
.butonlar{display:flex;flex-direction:column;gap:12px}
.buton{display:flex;align-items:center;gap:14px;padding:16px 16px;border-radius:var(--r);
  background:rgba(255,255,255,.05);border:1px solid var(--cizgi);color:var(--metin);text-decoration:none;
  transition:transform .2s ease,background .2s ease,border-color .2s ease;min-height:72px}
.buton:hover,.buton:focus-visible{transform:translateY(-2px);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22)}
.buton:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ikon{flex:0 0 44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:rgba(255,255,255,.08)}
.metin{flex:1;display:flex;flex-direction:column;min-width:0}
.metin strong{font-size:17px;font-weight:700;line-height:1.35}
.metin small{font-size:13.5px;color:var(--soluk);line-height:1.4}
.ok{color:var(--soluk);font-size:14px;transition:transform .2s}
.buton:hover .ok{transform:translateX(3px);color:#fff}
.buton-ana{background:var(--vurgu);border-color:var(--vurgu)}
.buton-ana:hover,.buton-ana:focus-visible{background:#c80914;border-color:#c80914}
.buton-ana .ikon{background:rgba(0,0,0,.18)}
.buton-ana small,.buton-ana .ok{color:rgba(255,255,255,.85)}
.buton-wa .ikon{background:var(--wa);color:#fff;font-size:24px}
.buton[data-eksik]{border-style:dashed;opacity:.75}
.buton[data-eksik] small::after{content:" · numara eklenecek";color:#fbbf24}
.alt{margin-top:26px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13.5px}
.insta{color:var(--soluk);text-decoration:none}
.insta:hover{color:#fff}
.link-buton{background:none;border:0;color:var(--soluk);font:inherit;text-decoration:underline;cursor:pointer;padding:0}
.link-buton:hover{color:#fff}

/* Çerez bildirimi */
.cerez{position:fixed;left:12px;right:12px;bottom:16px;margin:0 auto;max-width:560px;
  background:#16191f;border:1px solid var(--cizgi);border-radius:18px;padding:20px;z-index:50;
  box-shadow:0 20px 60px rgba(0,0,0,.6);animation:gir .4s ease both}
.cerez h2{font-size:16px;margin-bottom:6px}
.cerez p{font-size:13.5px;color:#cfd3d9}
.secenekler{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.secenekler label{display:grid;grid-template-columns:20px 1fr;column-gap:10px;font-size:14px;font-weight:600;align-items:start}
.secenekler input{margin-top:3px;width:18px;height:18px;accent-color:var(--vurgu)}
.secenekler small{grid-column:2;font-weight:400;color:var(--soluk);font-size:12.5px}
.cerez-butonlar{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;justify-content:flex-end}
.c-btn{font:inherit;font-size:14px;font-weight:700;border-radius:12px;padding:11px 16px;cursor:pointer;border:1px solid var(--cizgi)}
.c-ikincil{background:transparent;color:var(--metin)}
.c-ikincil:hover{background:rgba(255,255,255,.07)}
.c-birincil{background:var(--vurgu);border-color:var(--vurgu);color:#fff}
.c-birincil:hover{background:#c80914}
.perde{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:60;display:grid;place-items:center;padding:16px}
.perde-ic{position:relative;background:#16191f;border:1px solid var(--cizgi);border-radius:18px;padding:28px 22px 22px;
  max-width:560px;max-height:85vh;overflow:auto;font-size:14px;color:#cfd3d9}
.perde-ic h2{font-size:18px;color:#fff;margin-bottom:12px}
.perde-ic p+p{margin-top:10px}
.perde-ic strong{color:#fff}
.kapat{position:absolute;top:12px;right:12px;background:none;border:0;color:#fff;font-size:20px;cursor:pointer;width:36px;height:36px}

@media (max-width:480px){
  body{padding:20px 14px 200px;align-items:flex-start}
  .kart{padding:32px 16px 18px;border-radius:22px}
  .logo-bzm{font-size:38px}
  .metin strong{font-size:16px}
  .cerez-butonlar .c-btn{flex:1 1 calc(50% - 8px)}
  .cerez-butonlar .c-birincil{flex-basis:100%;order:-1}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}