/* GitGelVize · paylaşılan stil. Düzen: lacivert "biniş kartı" bantları + açık içerik yüzeyi */
:root{
  --bg:#F2F4F8; --surface:#FFFFFF; --ink:#0D1A30; --muted:#4A5872; --line:#D7DDE8;
  --navy:#0D1A30; --on-navy:#F3F6FB; --on-navy-muted:#B7C3D8; --navy-line:rgba(255,255,255,.18);
  --accent:#F4B24A; --accent-ink:#9A5A00; --on-accent:#0D1A30;
  --ok:#1F7A55; --wa:#1A8F49;
  --f-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --f-body:"Figtree","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --radius:18px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#08111F; --surface:#0F1C33; --ink:#EAF0FA; --muted:#A3B1C8; --line:#22314D;
  --navy:#132442; --accent-ink:#F4B24A; --ok:#5BD3A0; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#08111F; --surface:#0F1C33; --ink:#EAF0FA; --muted:#A3B1C8; --line:#22314D;
  --navy:#132442; --accent-ink:#F4B24A; --ok:#5BD3A0; color-scheme:dark }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.6}
img{max-width:100%; display:block}
[hidden]{display:none!important}
.wrap{max-width:1180px; margin:0 auto; padding-inline:20px}
h1,h2,h3{font-family:var(--f-display); line-height:1.08; margin:0; text-wrap:balance; letter-spacing:-0.02em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:6px}
.eyebrow{font-family:var(--f-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); font-weight:700}
.on-navy .eyebrow{color:var(--accent)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 22px; border-radius:999px; font-weight:700; font-size:16px; text-decoration:none; border:2px solid transparent; cursor:pointer; font-family:var(--f-body)}
.btn-primary{background:var(--accent); color:var(--on-accent)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{border-color:currentColor; background:transparent; color:inherit}

/* header */
header.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--bg); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px 20px; min-height:68px; flex-wrap:wrap}
.logo{font-family:var(--f-display); font-weight:800; font-size:26px; text-decoration:none; letter-spacing:-.02em}
.logo span{color:var(--accent-ink)}
nav.menu{display:flex; gap:6px; flex-wrap:nowrap}
nav.menu a{text-decoration:none; font-weight:600; color:var(--muted); padding:8px 12px; border-radius:999px; white-space:nowrap}
nav.menu a:hover{color:var(--ink)}
nav.menu a[aria-current="page"]{color:var(--ink); background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--line)}
@media (max-width:900px){
  nav.menu{order:3; width:100%; overflow-x:auto; padding-bottom:10px; margin-top:-4px; scrollbar-width:none}
  nav.menu::-webkit-scrollbar{display:none}
  .top .btn{min-height:42px; padding:0 16px; font-size:15px}
}

/* lacivert bant */
.on-navy{background:var(--navy); color:var(--on-navy)}
.on-navy .muted{color:var(--on-navy-muted)}

/* ana sayfa hero */
.hero{padding-block:72px 64px}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:center}
.hero h1{font-size:clamp(44px,6.4vw,84px); font-weight:800}
.hero h1 em{font-style:normal; color:var(--accent-ink)}
.lead{font-size:20px; color:var(--muted); max-width:36ch; margin-top:22px}
.ctas{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}
.pass{background:var(--navy); color:var(--on-navy); border-radius:24px; display:grid; grid-template-columns:minmax(0,1fr) 120px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(13,26,48,.55)}
.pass-main{padding:28px 28px 26px; display:flex; flex-direction:column; gap:22px; min-width:0}
.pass-head{display:flex; justify-content:space-between; gap:12px; font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; color:var(--on-navy-muted)}
.route{display:flex; align-items:center; justify-content:space-between; gap:12px}
.code{font-family:var(--f-mono); font-weight:700; font-size:clamp(40px,6vw,64px); line-height:1}
.code small{display:block; font-family:var(--f-body); font-weight:500; font-size:14px; color:var(--on-navy-muted); margin-top:8px; letter-spacing:0}
.route svg{flex:1; min-width:30px; max-width:150px}
#dest{color:var(--accent); transition:opacity .35s}
.pass-fields{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; color:var(--on-navy-muted)}
.pass-fields b{display:block; font-size:16px; color:var(--on-navy); letter-spacing:.02em; margin-top:4px}
.stub{border-left:2px dashed rgba(255,255,255,.28); padding:28px 16px; display:flex; flex-direction:column; justify-content:space-between; align-items:center; text-align:center; font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; color:var(--on-navy-muted)}
.stub b{writing-mode:vertical-rl; transform:rotate(180deg); font-size:18px; color:var(--accent); letter-spacing:.2em}
.bars{display:grid; grid-template-columns:repeat(12,1fr); gap:2px; width:70px; height:40px}
.bars i{background:var(--on-navy-muted); opacity:.7}
.pass-note{font-size:13px; color:var(--muted); margin-top:12px; text-align:right}
@media (max-width:480px){.pass{grid-template-columns:minmax(0,1fr) 72px}.stub{padding:20px 8px}.bars{width:48px}}

/* bölümler */
section{padding-block:80px}
.sec-head{display:flex; flex-direction:column; gap:14px; max-width:720px; margin-bottom:44px}
.sec-head h2{font-size:clamp(32px,4.4vw,52px); font-weight:800}
.sec-head p{color:var(--muted); font-size:18px}
.on-navy .sec-head p{color:var(--on-navy-muted)}

/* illüstrasyon kutusu (+ isteğe bağlı gerçek fotoğraf) */
.art{position:relative; overflow:hidden; background:#13254A; aspect-ratio:12/5; max-width:100%}
.art img{width:100%; height:100%; object-fit:cover}
.art .photo{position:absolute; inset:0}

/* ülke kartları */
.countries{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px}
@media (max-width:700px){.countries{grid-template-columns:1fr}}
.country{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; text-decoration:none; transition:transform .2s, box-shadow .2s}
.country:hover{transform:translateY(-3px); box-shadow:0 22px 40px -26px rgba(13,26,48,.45)}
.country .body{padding:24px 26px 26px; display:flex; flex-direction:column; gap:10px}
.country .row1{display:flex; align-items:center; justify-content:space-between; gap:12px}
.country h3{font-size:30px}
.country .type{font-family:var(--f-mono); font-size:13px; color:var(--accent-ink); font-weight:700; letter-spacing:.06em}
.country p{color:var(--muted)}
.country .go{font-weight:700; color:var(--accent-ink); margin-top:4px}
.flag{width:48px; height:32px; border-radius:5px; flex:none; overflow:hidden}

/* süreç */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:0; counter-reset:s}
.steps li{counter-increment:s; padding:24px 22px 26px 0; border-top:2px solid var(--navy-line); position:relative; display:flex; flex-direction:column; gap:10px}
.steps li::before{content:counter(s,decimal-leading-zero); font-family:var(--f-mono); font-weight:700; color:var(--accent); font-size:14px}
.steps li::after{content:""; position:absolute; top:-7px; left:0; width:12px; height:12px; border-radius:50%; background:var(--accent)}
.steps h3{font-size:21px}
.steps p{color:var(--on-navy-muted); font-size:15.5px}
@media (max-width:700px){.steps{grid-template-columns:1fr}}

/* ülke sayfası hero */
.page-hero{padding-block:44px 56px}
.crumbs{font-size:14px; color:var(--on-navy-muted); display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--on-navy)}
.page-hero .grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:44px; align-items:center}
@media (max-width:900px){.page-hero .grid{grid-template-columns:1fr}}
.page-hero h1{font-size:clamp(42px,6vw,76px); font-weight:800; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.page-hero h1 .flag{width:64px; height:43px; border-radius:7px}
.page-hero .lead{color:var(--on-navy-muted)}
.page-hero .art{border-radius:22px; box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.page-hero .btn-ghost{color:var(--on-navy)}
.facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:44px; border-top:1px solid var(--navy-line)}
.facts div{padding:18px 18px 0 0; display:flex; flex-direction:column; gap:4px; min-width:0}
.facts dt{font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; color:var(--on-navy-muted)}
.facts dd{margin:0; font-weight:700; font-size:17px}
@media (max-width:640px){.facts{grid-template-columns:1fr}.facts div{padding:14px 0; border-bottom:1px solid var(--navy-line)}}

/* vize türleri */
.types{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
@media (max-width:900px){.types{grid-template-columns:1fr}}
.type-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; gap:10px}
.type-card .code-tag{align-self:flex-start; font-family:var(--f-mono); font-weight:700; font-size:13px; letter-spacing:.06em; padding:4px 10px; border-radius:999px; background:var(--bg); border:1px solid var(--line); color:var(--accent-ink)}
.type-card h3{font-size:23px}
.type-card p{color:var(--muted); font-size:16px}

/* evrak listesi */
.checklist{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(20px,3vw,36px); display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:36px}
@media (max-width:820px){.checklist{grid-template-columns:1fr}}
.items{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.items li{border-bottom:1px solid var(--line)}
.items label{display:flex; gap:14px; align-items:flex-start; padding:14px 0; cursor:pointer}
.items input{width:22px; height:22px; margin-top:2px; accent-color:var(--ok); flex:none}
.items .t{font-weight:600}
.items .d{display:block; color:var(--muted); font-size:14.5px; font-weight:400}
.items input:checked + span .t{text-decoration:line-through; color:var(--muted)}
.meter{display:flex; flex-direction:column; gap:14px; align-self:start; position:sticky; top:110px}
.meter .num{font-family:var(--f-mono); font-size:44px; font-weight:700; font-variant-numeric:tabular-nums}
.track{height:10px; background:var(--line); border-radius:999px; overflow:hidden}
.track i{display:block; height:100%; width:0; background:var(--ok); transition:width .3s}
.meter p{font-size:14px; color:var(--muted)}

/* dikkat edilecekler */
.tips{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; border-top:1px solid var(--line)}
@media (max-width:700px){.tips{grid-template-columns:1fr}}
.tips > div{padding:26px 28px 26px 0; border-bottom:1px solid var(--line); display:flex; gap:16px}
.tips svg{flex:none; color:var(--accent-ink); margin-top:4px}
.tips h3{font-size:21px; margin-bottom:6px}
.tips p{color:var(--muted)}

/* neden biz + uyarı */
.why{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; border-top:1px solid var(--line)}
@media (max-width:700px){.why{grid-template-columns:1fr}}
.why div{padding:28px 28px 28px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:8px}
.why h3{font-size:24px}
.why p{color:var(--muted)}
.notice{margin-top:36px; padding:22px 24px; border-radius:var(--radius); background:var(--surface); border:1.5px solid var(--accent); display:flex; gap:16px; align-items:flex-start}
.notice svg{flex:none; color:var(--accent-ink)}

/* SSS */
.faq{display:flex; flex-direction:column; max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:22px 0; font-family:var(--f-display); font-weight:700; font-size:21px; display:flex; justify-content:space-between; gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--f-mono); color:var(--accent-ink); font-size:24px; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:22px; color:var(--muted); max-width:68ch}

/* CTA bandı */
.cta{padding-block:64px}
.cta .wrap{display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap}
.cta h2{font-size:clamp(30px,4vw,46px); font-weight:800; max-width:18ch}
.cta .ctas{margin-top:0}
.cta .btn-ghost{color:var(--on-navy)}

/* diğer ülkeler */
.others{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
@media (max-width:800px){.others{grid-template-columns:1fr}}
.other{display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); text-decoration:none; font-weight:700; font-size:18px}
.other:hover{border-color:var(--accent)}
.other span{margin-left:auto; color:var(--accent-ink)}

/* iletişim */
.contact .wrap{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:48px}
@media (max-width:900px){.contact .wrap{grid-template-columns:1fr}}
.info{display:flex; flex-direction:column; gap:22px}
.info dl{margin:0; display:flex; flex-direction:column; gap:16px}
.info dt{font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; color:var(--muted)}
.info dd{margin:4px 0 0; font-size:20px; font-weight:700}
form.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(20px,3vw,34px); display:flex; flex-direction:column; gap:18px}
.frow{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
@media (max-width:560px){.frow{grid-template-columns:1fr}}
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field label{font-weight:600; font-size:14.5px}
.field input,.field select,.field textarea{font:inherit; font-size:16px; padding:12px 14px; border-radius:12px; border:1.5px solid var(--line); background:var(--bg); color:var(--ink); width:100%}
.field textarea{min-height:110px; resize:vertical}
.hint{font-size:13.5px; color:var(--muted)}
.result{padding:16px; border-radius:12px; background:var(--bg); border:1px dashed var(--line); display:flex; flex-direction:column; gap:12px}
.result pre{margin:0; white-space:pre-wrap; font-family:var(--f-mono); font-size:14px}
.result .btns{display:flex; flex-wrap:wrap; gap:10px}

footer{border-top:1px solid var(--line); padding-block:36px; color:var(--muted); font-size:14.5px}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px}
footer nav{display:flex; gap:16px; flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}

/* WhatsApp baloncuğu */
.wa-float{position:fixed; right:20px; top:75%; transform:translateY(-50%); z-index:50; display:flex; align-items:center; gap:10px; text-decoration:none; background:var(--wa); color:#FFFFFF; border-radius:999px; padding:0 20px 0 14px; min-height:60px; font-weight:700; font-size:16px; box-shadow:0 14px 30px -10px rgba(13,26,48,.5); transition:transform .2s}
.wa-float:hover{transform:translateY(calc(-50% - 2px))}
.wa-float svg{flex:none}
@media (max-width:560px){.wa-float{padding:0; width:60px; justify-content:center}.wa-float span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}}

@media (prefers-reduced-motion: reduce){*{transition:none!important; animation:none!important; scroll-behavior:auto!important}}

/* popüler rotalar */
.places{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
@media (max-width:1000px){.places{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.places{grid-template-columns:1fr}}
.place{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column}
.art-place{aspect-ratio:3/2}
.place .body{padding:18px 20px 22px; display:flex; flex-direction:column; gap:6px}
.place .type{font-family:var(--f-mono); font-size:12px; color:var(--accent-ink); font-weight:700; letter-spacing:.08em}
.place h3{font-size:22px}
.place p:last-child{color:var(--muted); font-size:15.5px}