/* ═══ KOPARAN TASARIM SİSTEMİ v0.2 — logodan türetildi ═══ */
:root{
--k-blue-900:#00263D; --k-blue-800:#003A5D; --k-blue-700:#005080;
--k-blue-600:#0069A8; --k-blue-500:#0086D6;
--k-gray-700:#51575C; --k-gray-500:#7D868C; --k-gray-400:#A3A9AE;
/* Yer tutucu metni için ayrı ton: --k-gray-500 girdi zemininde 3.45:1
kalıyordu (SC 1.4.3 metin tabanı 4.5:1). #646E75 aynı zeminde 4.85:1. */
--k-gray-600:#646E75;
--k-gray-300:#C2C6C9; --k-gray-200:#DDDFE1; --k-gray-100:#EFF0F1; --k-gray-50:#F7F8F8;
/* sayfa zemini — saf beyaz yerine ılık kırık beyaz */
--k-paper:#FAF8F4; --k-paper-2:#F3EFE8;
--k-red-500:#F63440; --k-red-600:#C81924; --k-red-700:#A3141D;
--k-ink-900:#12181C; --k-ink-700:#3A444B; --k-ink-500:#626D75;
--k-white:#FFFFFF; --k-ok:#1F6F45; --k-warn:#8A5A00; --k-err:#B3261E;
--k-font-display:"Fraunces",Georgia,serif;
--k-font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
--k-s-1:.25rem; --k-s-2:.5rem; --k-s-3:.75rem; --k-s-4:1rem; --k-s-5:1.5rem;
--k-s-6:2rem; --k-s-7:3rem; --k-s-8:4rem; --k-s-9:6rem; --k-s-10:8rem;
--k-r-sm:4px; --k-r-md:8px; --k-r-lg:14px; --k-r-full:999px;
--k-sh-1:0 1px 2px rgba(0,38,61,.06),0 1px 3px rgba(0,38,61,.08);
--k-sh-2:0 2px 4px rgba(0,38,61,.05),0 4px 12px rgba(0,38,61,.08);
--k-sh-3:0 4px 8px rgba(0,38,61,.05),0 12px 28px rgba(0,38,61,.11);
--k-container:1180px;
--k-ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--k-paper);color:var(--k-ink-900);
font:1rem/1.65 var(--k-font-body);-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
:focus-visible{outline:3px solid var(--k-red-600);outline-offset:3px;border-radius:2px}
/* Proje kurali dokunma alanini >= 44 px istiyor; altbilgi baglari 19 px'ti
(65 hedefin 23'u kuralin altinda). WCAG 2.2 SC 2.5.8 zaten geciyordu,
asagidaki dolgu kendi kuralimizi da tutturuyor. */
footer.site a{display:inline-block;padding-block:11px;line-height:1.35}
footer.site .faddr a{padding-block:9px}
/* Arka plan gecisi icin durdurma denetimi (SC 2.2.2). Sahne dort kareyi
28 saniyede donduruyor ve ziyaretcinin durdurabilecegi bir sey yoktu. */
/* 01.10.2026 (2): ekrana sabit sol alt kose, 1254 px'ten dar her ekranda
icerigin sol kenarina biniyordu (icerik 24 px'te, dugme 14-46 px; olculdu
320 · 375 · 390 · 1024). Dugme artik hero'nun sag ust kosesinde ve hero'yla
birlikte kayiyor: orasi 305-1585 px arasi her genislikte bos (icerik 84 px
asagidan basliyor). Sag altta yukari don dugmesiyle de cakismiyor. DOM'da
hero'nun icinde oldugu icin odak sirasi da duzeldi (eskiden atlama baginin
onundeydi). */
.sahne-dur{position:absolute;right:var(--k-s-4);top:var(--k-s-4);z-index:2;
display:inline-flex;align-items:center;justify-content:center;
/* 01.10.2026: kullanici istegiyle kuculdu. 32 px, WCAG 2.5.8'in 24 px
tabaninin ustunde; metin ekran okuyucuya ve ipucuna (title) kaldi. */
width:32px;height:32px;padding:0;border-radius:50%;cursor:pointer;
background:rgba(0,38,61,.86);color:#fff;
border:1.5px solid rgba(255,255,255,.42);
font:600 .8125rem/1 var(--k-font-body)}
.sahne-dur:hover{background:rgba(0,38,61,.96)}
/* 01.10.2026: 'Gumruk musavirligi hizmetimizin ayrintilari' dugmesi nowrap
ve 345 px; 375 px ekranda panel sutununu genisletip sayfayi 411 px'e
tasiyordu (olculdu). Dugme sarabilir, govde sutunu icerige gore
genislemez. */
.hpanel .btn{white-space:normal;max-width:100%;text-align:left}
.hp-govde{min-width:0}
/* 01.10.2026: EN "History, memberships and our two companies" dugmesi
nowrap; 375 px ekranda sayfayi 385 px'e tasiyordu (olculdu). */
.hk-daha .btn{white-space:normal;max-width:100%;text-align:left}
.sahne-dur:focus-visible{outline:3px solid var(--k-red-400);outline-offset:3px}
.sahne-dur i{width:12px;height:12px;flex:none;
border-left:4px solid currentColor;border-right:4px solid currentColor}
.sahne-dur[aria-pressed="true"] i{border:0;width:0;height:0;
border-left:11px solid currentColor;border-top:7px solid transparent;
border-bottom:7px solid transparent}
/* 01.10.2026: 'animation:none' dort kareyi de baslangic saydamligina
dondurup arka plani yok ediyordu. Artik gecis oldugu karede donuyor.
Sayfa DURMUS acilirsa (tercih kayitli) ilk kare gosterilir: sifirinci
saniyede donmus animasyonda butun kareler saydamdir. */
.sahne-durdu #sahneKat span{animation-play-state:paused!important}
.sahne-durdu-bas #sahneKat span{animation:none!important;opacity:0}
.sahne-durdu-bas #sahneKat span:nth-child(1){opacity:1}
.sahne-dur b{position:absolute;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap}
.sahne-dur i{width:10px;height:10px;border-left-width:3px;border-right-width:3px}
.sahne-dur[aria-pressed="true"] i{border-left-width:9px;border-top-width:6px;
border-bottom-width:6px;margin-left:2px}
@media(prefers-reduced-motion:reduce){.sahne-dur{display:none}}
/* Gorsel olarak gizli, ekran okuyucuya acik. Sihirbazdaki iki sehir alani
ortak bir soruyu paylasiyor; ayirt edici adi bu span veriyor. */
.qf-gizli{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 🔴 Koyu yüzeylerde halka rengi değişir (konsey 4. tur, SC 1.4.11).
--k-red-600 (#C81924) altbilgide 2.69:1, .cta panelinde 2.05:1 ve hero
fotoğrafında 1.61-2.49:1 veriyordu: hiçbirinde 3:1 tabanını geçmiyor.
--k-red-400 (#FF8A93) aynı zeminlerde 6.92:1 ve 5.28:1.
Etkilenen: 24 sayfa × 17 altbilgi bağı + hero düğmeleri = 412 öge. */
footer.site :focus-visible,
.hero :focus-visible,
.cta :focus-visible,
.band.koyu :focus-visible{outline-color:var(--k-red-400)}
img,svg{max-width:100%;display:block}
a{color:var(--k-blue-600)}
.wrap{max-width:var(--k-container);margin:0 auto;padding:0 var(--k-s-5)}
@media(max-width:640px){.wrap{padding:0 var(--k-s-4)}}
/* ── prototip şeridi ── */
.protobar{background:var(--k-ink-900);color:#fff;font-size:.75rem;padding:var(--k-s-2) var(--k-s-4);
text-align:center;letter-spacing:.02em}
.protobar b{color:var(--k-red-500)}
/* ── skip ── */
.skip{position:absolute;left:-9999px;top:0;background:var(--k-blue-800);color:#fff;
padding:var(--k-s-3) var(--k-s-4);z-index:200;border-radius:0 0 var(--k-r-md) 0;font-weight:600}
.skip:focus{left:0}
/* ── header ── */
header.site{position:sticky;top:0;z-index:100;background:rgba(254,253,251,.96);
backdrop-filter:blur(10px);border-bottom:1px solid var(--k-gray-200)}
.hbar{display:flex;align-items:center;gap:var(--k-s-5);padding-block:var(--k-s-3);min-height:88px}
.brand{flex:none}
.brand img{height:64px;width:auto}
@media(max-width:600px){.brand img{height:56px}}
/* Dar ekranda başlık satırı sıkışır: logo küçülür, boşluk daralır,
TR/EN gizlenir (EN içerik hazır olana dek zaten kalkacak: E7).
Aksi hâlde satırın küçülemeyen genişliği 408px'e çıkıp sayfayı
yana kaydırıyordu (kullanıcı bulgusu, 24.08). */
@media(max-width:560px){
.hbar{gap:var(--k-s-3)}
.brand img{height:50px}
/* asagidaki temel .langtoggle kurali sonra geldigi icin ezmesin diye
secici guclendirildi (30.08 bulgusu: dugme mobilde geri gelmisti).
Dar ekranda dil gecisi mobil menudeki "English" satirindan yapilir. */
.hbar .langtoggle{display:none}
}
.dil-mobil{display:none}
@media(max-width:560px){.dil-mobil{display:block}}
nav.main{margin-left:var(--k-s-7)}
nav.main ul{list-style:none;display:flex;gap:var(--k-s-2);margin:0;padding:0;align-items:center}
nav.main a{color:var(--k-ink-700);text-decoration:none;font-size:.9375rem;font-weight:550;
padding:var(--k-s-3) var(--k-s-3);border-radius:var(--k-r-sm);display:block;
/* "Bilgi Bankasi" daralan satirda iki satira sariyordu; baslik 88'den
98px'e cikip nav taban cizgisi bozuluyordu (olculdu 15.09.2026). */
white-space:nowrap;
transition:color .15s var(--k-ease),background .15s var(--k-ease)}
/* 01.10.2026: gri hover (gray-50) kagit zeminde fiilen gorunmuyordu.
Tarihce bandinin lacivert zemini ve mavi isigi; isik fareyi izler
(--mx/--my menu betiginde). Yalniz fare olan cihazlarda: dokunmatikte
hover takili kalir. Beyaz metin lacivertte 15:1. */
nav.main a{transition:color .15s ease,background-color .15s ease}
@media(hover:hover){nav.main a:hover{color:#fff;background:radial-gradient(64px circle at var(--mx,50%) var(--my,50%),rgba(0,134,214,.45),transparent 75%) var(--k-blue-900)}}
@media(prefers-reduced-motion:reduce){nav.main a{transition:none}}
.hmeta{display:flex;align-items:center;gap:var(--k-s-3);flex:none;margin-left:auto}
.htel-btn svg{width:16px;height:16px}
/* 01.10.2026 (K1, canli olcum): baslik satiri kuculmuyor; EN "Get a Quote"
375 px ekranda sayfayi 7 px yana kaydiriyordu, TR 320 px'te. Dar ekranda
dugme kisa adini gosteriyor ("Teklif" / "Quote"); erisilebilir ad gorunen
metni iceriyor (SC 2.5.3). */
@media(max-width:420px){.hcta-uzun{display:none}}
/* Dugme flex; kelimeler ayri ogeler oldugu icin aradaki bosluk 8 px'lik
aralikla aciliyordu. Aralik bir bosluk genisligine indi. */
.btn.hcta{gap:.28em}
/* 360 px'ten dar ekran (320): kisa adla da satir 16-20 px tasiyordu. Logo
44 px, aralar 8 px, dugme kenari 12 px, menu dugmesi 44 px (dokunma
alani alt siniri). IATA muhru ayni esikte 54 px'e iner (kilavuz). */
@media(max-width:359px){
.hbar,.hmeta{gap:var(--k-s-2)}
.brand img{height:44px}
.btn.hcta{padding-left:var(--k-s-3);padding-right:var(--k-s-3)}
.hmeta .menubtn{width:44px;height:44px}
}
.langtoggle{position:relative;display:inline-flex;align-items:center;width:66px;height:34px;
border-radius:var(--k-r-md);background:var(--k-gray-100);border:none;
cursor:pointer;padding:3px;flex:none}
.langtoggle .lt-knob{position:absolute;top:3px;left:3px;width:29px;height:26px;
border-radius:calc(var(--k-r-md) - 2px);background:var(--k-blue-800);transition:transform .2s var(--k-ease)}
.langtoggle[aria-pressed="true"] .lt-knob{transform:translateX(30px)}
.langtoggle .lt-opt{position:relative;z-index:1;flex:1;text-align:center;font-size:.75rem;
font-weight:700;color:var(--k-ink-500);transition:color .2s var(--k-ease)}
.langtoggle[aria-pressed="false"] .lt-tr{color:#fff}
.langtoggle[aria-pressed="true"] .lt-en{color:#fff}
.menubtn{display:none;background:none;border:1.5px solid var(--k-gray-300);border-radius:var(--k-r-md);
width:46px;height:46px;cursor:pointer;align-items:center;justify-content:center;color:var(--k-ink-900)}
.menubtn svg{width:22px;height:22px}
/* ── buton ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--k-s-2);
font:600 1rem/1 var(--k-font-body);padding:var(--k-s-4) var(--k-s-5);border-radius:var(--k-r-md);
border:2px solid transparent;cursor:pointer;text-decoration:none;min-height:48px;
transition:all .18s var(--k-ease);white-space:nowrap}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn--primary{background:var(--k-red-600);color:#fff}
.btn--primary:hover{background:var(--k-red-700);transform:translateY(-1px);box-shadow:var(--k-sh-2)}
.btn--onDark{background:#fff;color:var(--k-blue-800)}
.btn--onDark:hover{background:var(--k-gray-100);transform:translateY(-1px)}
.btn--ghostDark{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn--ghostDark:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--ghost{background:#fff;color:var(--k-blue-700);border-color:var(--k-gray-300)}
.btn--ghost:hover{border-color:var(--k-blue-600);background:var(--k-gray-50)}
.btn--sm{font-size:.9375rem;padding:var(--k-s-3) var(--k-s-4);min-height:44px}
/* ── HERO ──
Dort gorsel sirayla birbirine geciyor; adlari asagida .sahne-kat
span'larinda. Dosyalar yoksa duz lacivert zemin gorunur, sayfa bozulmaz.
Spec: 1920x960 px, yatay, JPG + WebP, her biri 300 KB alti; ayrica
-m son ekli mobil varyant.
⚠️ Bu yorumda gecen dosya adlari onizleme ureticisinin gomme listesine
giriyor (liste sayfadan turetiliyor). Kullanilmayan bir ad burada
birakilirsa Artifact'e bosuna gomuluyor: 16.09.2026'da eski tasarimdan
kalan bir liman karesinin adi yorumda duruyordu ve onizleme 118 KB'i
bosuna tasiyordu. Yorumda dosya adi yazmayin. */
/* ══ SAHNE · sayfa arkasinda sabit duran gorsel katman ══════════
Eskiden .hero-bg hero'nun icindeydi ve hero ekrandan cikinca
gorsel de kayboluyordu. Artik sabit: hero'dan sonra hizmetler
ve hizmet bolumlerinin arkasinda da duruyor.
Filtre sabittir ve gecis yapmaz: contrast(.50) hem en parlak
noktayi 191'e indiriyor hem en koyu noktayi 63'e cikariyor,
yani hem lacivert camin hem beyaz camin isini ayni anda goruyor.
Degisen bir filtre olsaydi hero ile sonraki bolum ayni anda
ekrandayken biri mutlaka yanlis degeri alirdi. */
#sahne{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
opacity:1;transition:opacity .7s var(--k-ease)}
#sahne[data-kapali="1"]{opacity:0}
/* Bulaniklik bolumlerin backdrop-filter'inda degil, dogrudan
gorselin uzerinde. Sebebi: her bolumun kendi backdrop-filter'i
oldugunda her ogenin arka plani AYRI orneklenir ve bolum
sinirlarinda gorunur bir cizgi olusur. Tek katmana tasindiginda
dikis tamamen kayboluyor, ustelik dort ayri blur yerine tek blur
hesaplandigi icin daha ucuz.
Yaricap degisken: hero bolgesinde 3px, cam bolumlerde 22px. */
.sahne-kat{position:absolute;left:0;right:0;top:-14%;height:128%;
filter:contrast(.50) blur(var(--sahne-blur,3px));
transition:filter .55s var(--k-ease);will-change:transform}
.sahne-kat span{position:absolute;inset:0;background-size:cover;background-position:center 45%;
opacity:0;animation:heroFade 28s infinite}
/* ══ HERO · lacivert cam ════════════════════════════════════════
rgba(0,38,61,.72) hesaplandi: fotografin en parlak noktasinda
bile beyaz baslik 8.39:1, lede 6.63:1, gri etiket 4.88:1.
Eski ortu .96 idi, yani fotografin %4'u goruluyordu; simdi %28.
backdrop-filter kaldirildi: bulaniklik artik sahne katmaninda,
hero bolgesinde zaten 3px. Gorunen sonuc ayni, dikis yok. */
.hero{background:rgba(0,38,61,.72);color:#fff;position:relative}
/* Ilk gorsel hemen yuklenir; 2., 3. ve 4. ancak sayfa yuklendikten
sonra (html.yuklendi) gelir. Dort gorselin masaustu toplami ~645 KB;
hepsi birden istenirse LCP'yi bekletirdi.
4. gorsel (hero-uld) hava kargo ULD yuklemesi: kural 7 geregi hava
ve deniz esit agirlikta olmali, uc gorselin ikisi denizdi. */
.sahne-kat span:nth-child(1){animation-delay:0s;
background-image:url("../hero-vinc.jpg");
background-image:image-set(url("../hero-vinc.webp") type("image/webp"),
url("../hero-vinc.jpg") type("image/jpeg"))}
.yuklendi .sahne-kat span:nth-child(2){animation-delay:7s;
background-image:url("../hero-hava.jpg");
background-image:image-set(url("../hero-hava.webp") type("image/webp"),
url("../hero-hava.jpg") type("image/jpeg"))}
.yuklendi .sahne-kat span:nth-child(3){animation-delay:14s;
background-image:url("../hero-gemi.jpg");
background-image:image-set(url("../hero-gemi.webp") type("image/webp"),
url("../hero-gemi.jpg") type("image/jpeg"))}
.yuklendi .sahne-kat span:nth-child(4){animation-delay:21s;
background-image:url("../hero-uld.jpg");
background-image:image-set(url("../hero-uld.webp") type("image/webp"),
url("../hero-uld.jpg") type("image/jpeg"))}
/* Mobilde kucuk varyantlar */
@media(max-width:560px){
.sahne-kat span:nth-child(1){background-image:url("../hero-vinc-m.jpg");
background-image:image-set(url("../hero-vinc-m.webp") type("image/webp"),
url("../hero-vinc-m.jpg") type("image/jpeg"))}
.yuklendi .sahne-kat span:nth-child(2){background-image:url("../hero-hava-m.jpg");
background-image:image-set(url("../hero-hava-m.webp") type("image/webp"),
url("../hero-hava-m.jpg") type("image/jpeg"))}
.yuklendi .sahne-kat span:nth-child(3){background-image:url("../hero-gemi-m.jpg");
background-image:image-set(url("../hero-gemi-m.webp") type("image/webp"),
url("../hero-gemi-m.jpg") type("image/jpeg"))}
.yuklendi .sahne-kat span:nth-child(4){background-image:url("../hero-uld-m.jpg");
background-image:image-set(url("../hero-uld-m.webp") type("image/webp"),
url("../hero-uld-m.jpg") type("image/jpeg"))}
}
/* Dort gorsel, 28 saniyelik tur: her biri ~7 saniye ekranda. */
@keyframes heroFade{
0%{opacity:0} 3%{opacity:1} 22%{opacity:1} 25%{opacity:0} 100%{opacity:0}
}
/* hareket tercihi kapaliysa: tek gorsel, animasyon yok */
@media(prefers-reduced-motion:reduce){
.sahne-kat span{animation:none;opacity:0}
.sahne-kat span:nth-child(1){opacity:1}
}
/* Camin uzerinde hafif bir isik: fotografi bogmadan derinlik verir.
Opaklik hesabina dahil degil, cunku camin altinda degil ustunde. */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(1100px 500px at 88% 8%,rgba(0,134,214,.16),transparent 62%)}
.hero .wrap{position:relative;z-index:1;padding-top:calc(var(--k-s-8) + 20px);padding-bottom:calc(var(--k-s-6) + 60px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
gap:var(--k-s-8);align-items:stretch}
.eyebrow{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--k-gray-200);
font-weight:650;margin:0 0 var(--k-s-4)}
h1{font-family:var(--k-font-display);font-size:clamp(2rem,4.4vw,3.125rem);line-height:1.12;
letter-spacing:-.025em;font-weight:600;margin:0 0 var(--k-s-5);max-width:16ch;text-wrap:balance}
h1 .dot{color:var(--k-red-500)}
.hero p.lede{font-size:1.1875rem;line-height:1.6;color:#DCE6EE;margin:0 0 var(--k-s-6);max-width:46ch}
.hero-list{list-style:none;padding:0;margin:0 0 var(--k-s-6);max-width:48ch}
.hero-list li{position:relative;padding-left:var(--k-s-6);margin-bottom:var(--k-s-3);
font-size:1.0625rem;line-height:1.55;color:#DCE6EE}
.hero-list li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;
border-radius:50%;background:var(--k-red-500)}
.hero-cta{display:flex;gap:var(--k-s-3);flex-wrap:wrap}
.herofacts{display:flex;flex-direction:column;gap:var(--k-s-3);justify-content:space-between;height:100%}
.hf-item{padding:var(--k-s-4);background:rgba(255,255,255,.1);border-radius:var(--k-r-md)}
/* Zemin 7 saniyede bir değişen bir fotoğraf: ilk kare geçiyordu, sonraki
üçü kalıyordu (en kötü .hf-lbl 3.63:1). #DCE6EE en kötü karede 9.26:1. */
.hf-lbl{display:block;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
color:#DCE6EE;font-weight:700;margin-bottom:var(--k-s-2)}
.hf-val{display:block;font-family:var(--k-font-display);font-size:2.25rem;font-weight:600;
color:#fff;line-height:1.1;letter-spacing:-.02em;margin-bottom:4px}
.hf-sub{display:block;font-size:.8125rem;color:#DCE6EE;line-height:1.5}
.hero-offices{display:flex;flex-direction:column;gap:var(--k-s-3);margin-top:var(--k-s-2);
padding-top:var(--k-s-4);border-top:1px solid rgba(255,255,255,.16)}
.ho-item{display:flex;align-items:flex-start;gap:var(--k-s-3);font-size:.875rem}
.ho-item svg{width:18px;height:18px;color:var(--k-gray-200);flex:none;margin-top:2px}
.ho-item b{display:block;color:#fff;font-weight:650}
.ho-item span{color:#B6C4CE}
/* ── tarih şeridi ── */
.timeline{background:var(--k-blue-900);color:#fff;position:relative;overflow:hidden}
.timeline::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(900px 420px at 12% 0%,rgba(0,134,214,.22),transparent 62%)}
.timeline .wrap{position:relative}
.tl-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--k-s-3)}
.tl-item{position:relative;padding:var(--k-s-5) 0 0 var(--k-s-4);border-left:2px solid rgba(255,255,255,.16)}
.tl-item::before{content:"";position:absolute;left:-6px;top:-1px;width:10px;height:10px;
border-radius:50%;background:var(--k-blue-900);border:2px solid rgba(255,255,255,.4)}
.tl-item:first-child{border-left-color:var(--k-red-500)}
.tl-item:first-child::before{border-color:var(--k-red-500);background:var(--k-red-500)}
.tl-y{font-family:var(--k-font-display);font-size:1.75rem;font-weight:700;line-height:1;
letter-spacing:-.02em;display:block;margin-bottom:var(--k-s-2)}
.tl-t{font-size:.8125rem;color:var(--k-gray-300);line-height:1.45;display:block}
/* ── üyelik şeridi ── */
.credbar{background:#fff;border-bottom:1px solid var(--k-gray-200)}
.credbar .wrap{display:flex;flex-direction:column;align-items:stretch;
padding-top:var(--k-s-5);padding-bottom:var(--k-s-5)}
.cb-row{display:flex;align-items:center;gap:var(--k-s-6);flex-wrap:wrap}
.cb-lbl{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--k-ink-500);font-weight:700;flex:none}
.cb-logos{list-style:none;display:flex;align-items:center;gap:var(--k-s-7);
margin:0;padding:0;flex-wrap:wrap}
.cb-logos img{width:auto;opacity:.85;transition:opacity .2s var(--k-ease)}
/* optik denge: yatay logolar alçak, dikey logo yüksek */
/* IATA mührü · kılavuz: renk sabit (soluklaştırılmaz) ve firma logosundan küçük.
Daire kutunun 231/284'ü; kutu = başlık logosu x 1,229 sınırının altında:
64 px logo -> 78 · 56 -> 68 · 50 -> 60 (25.09.2026) */
.cb-logos li:nth-child(1) img{height:78px;opacity:1}
.cb-logos li:nth-child(2) img{height:23px} /* UTİKAD — çok geniş */
.cb-logos li:nth-child(3) img{height:48px} /* WCA First — dikey */
.cb-logos img:hover{opacity:1}
@media(max-width:640px){
.credbar .wrap{gap:var(--k-s-4)}
.cb-logos{gap:var(--k-s-5)}
.cb-logos li:nth-child(1) img{height:68px}
.cb-logos li:nth-child(2) img{height:18px}
.cb-logos li:nth-child(3) img{height:38px}
}
@media(max-width:560px){.cb-logos li:nth-child(1) img{height:60px}}
/* 44 px logo -> 54 (01.10.2026, 320 px duzeltmesi) */
@media(max-width:359px){.cb-logos li:nth-child(1) img{height:54px}}
/* ── bölüm ── */
section.band{padding:var(--k-s-8) 0}
section.band.tight{padding:var(--k-s-7) 0}
section.alt{background:var(--k-paper-2)}
/* Ekran okuyucuya gorunur, goze gorunmez. */
.gizli-baslik{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Alt seritteki sutun basliklari h4 iken h3 oldu; stil korunuyor. */
footer.site .fgrid h3{font-size:.9375rem;font-weight:700;
margin:0 0 var(--k-s-4);color:#fff;letter-spacing:.01em}
/* ══ HIZ CIZGISI ISARETI ══════════════════════════════════════
Logodaki dort gri cubuk: genislikler 4:3:2:1, aralar sabit,
ince olan solda. Bolum basliginin yaninda bir kez gorunur.
Desen degil, tipografik isaret; metnin altina girmedigi icin
kontrast butcesine dokunmuyor. Petek denemesi bu yuzden
birakildi: bir logoyu doseme haline getirmek kitsch uretiyor.
Isaret asili bir madde imi gibi davranir: h2 icinde, mutlak
konumlu, birinci satira hizali. Olculer em cinsinden, yani
basligin punto boyuna gore olceklenir; ayri bir clamp yok.
Onceki surumde flex satirinda dikeyde ortalanmisti ve iki
satirli baslikta iki satirin ortasinda asili kaliyordu.
Renk gri-500. Once logonun kendi grisi (#C2C6C9) kullanildi ve
kagit uzerinde 1.62:1 ile fiilen gorunmuyordu: logoda o cubuklar
beyaz dairenin icinde ve laciverdin yaninda duruyor, kagit
zeminde 16 pikselde kayboluyor. gri-500 kagitta 3.50:1, yani
gorunur ama basligin laciverdinin (11.23:1) cok altinda. */
/* Isaret ic sayfalarda da bolum basinda gorunur: orada .sechead
sarmalayicisi yok, uretici h2'lere .bolum-basi veriyor. */
.sechead h2,h2.bolum-basi{position:relative;padding-left:1.36em}
.sechead h2::before,h2.bolum-basi::before{content:"";position:absolute;left:0;top:.47em;
width:.954em;height:.5em;
background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2049.6%2026%22%3E%3Cg%20fill=%22%237D868C%22%3E%3Crect%20width=%223%22%20height=%2226%22%20rx=%221%22/%3E%3Crect%20x=%229.5%22%20width=%226%22%20height=%2226%22%20rx=%221.2%22/%3E%3Crect%20x=%2222.1%22%20width=%229%22%20height=%2226%22%20rx=%221.2%22/%3E%3Crect%20x=%2237.6%22%20width=%2212%22%20height=%2226%22%20rx=%221.2%22/%3E%3C/g%3E%3C/svg%3E")
no-repeat center/contain}
/* Tablo kalkti, yerine kontrol listesi gecti: sol sutun baslik ve
eylem, sag sutun uc madde. Sagdaki sutun daha dar, cunku madde
metinleri kisa; boylece iki sutun da 45-70 karakter araliginda
kaliyor. */
.split .yan{align-self:start}
.split .yan .check{margin:0}
.split .yan .check li{max-width:46ch}
/* ══ CAM BOLUMLER ══════════════════════════════════════════════
rgba(ton,.84) hesaplandi: fotografin en koyu noktasinda bile
ink-900 12.88:1, ink-700 7.17:1, mavi bag 8.57:1, cerceve 4.00:1.
Camin UZERINE yalnizca bu renkler biner. ink-500 (3.81:1),
kirmizi-600 (4.17:1) ve gri-500 (2.67:1) gecmiyor; onlar opak
kartlarin icinde kalir, cama hic dokunmazlar.
Ozgullukte .band.alt ile esitlenmesi icin section.band.cam. */
:root{--sayfa-ton:250,248,244}
/* Dort cam bolumun opakligi AYNI (.80). Farkli olsaydi sinirda
basamak gorunurdu; kullanicinin "garip cizgi" dedigi seyin
ikinci sebebi buydu. Renk farki tonda, opaklikta degil.
Ton --sayfa-ton ile surekli olarak kayiyor, yani iki bolum
arasinda her an ayni rengi tasiyorlar ve dikis olusmuyor.
.78 icin hesaplanan kontrastlar .80'de daha da rahat:
acik ton koyu fotograf uzerinde, alfa arttikca kontrast artar. */
section.band.cam{
background:rgba(var(--sayfa-ton),.80);
transition:background-color .35s linear}
/* Uyelik seridi cam degil, duz beyaz: logolarin PNG arka plani
#FFFFFF ve alfa kanallari yok. Tonlu zeminde beyaz dikdortgen
olarak duruyorlardi. Serit logonun zeminiyle ayni renk. */
div.credbar{background:#FFFFFF;border-bottom:1px solid var(--k-gray-200)}
/* Teklif bolumu saydam: fotograf formun etrafinda goruluyor.
Bolumde iki oge var, .cta ve .qf-help-box; IKISININ DE kendi
opak zemini var, yani hicbir metin fotografin uzerine binmiyor.
Cerceve simetrik: ust 64, alt 64, yanlar 67 (olculdu). */
section.band.sahneli{background:transparent}
/* Sahnesiz bolumler acik zemin almali. Aksi halde iki bolum ayni
anda ekrandayken (ornegin gumrukleme henuz cikmamisken cografya
girerken) sahne acik kaliyor ve saydam bolumun metni camsiz
fotografin uzerine biniyor. Kontrasti dogrulanmamis tek durum
buydu. .alt kendi zeminini korur. */
section.band:not(.cam):not(.sahneli):not(.alt):not(.timeline){
background:var(--k-paper)}
/* Kartlar opak kalir: ikincil metin ve kirmizi orada yasiyor. */
section.band.cam .card{background:var(--k-white,#fff)}
/* Koyu varyant bu kuraldan muaf. Ozgulluk dersi (langtoggle, 30.08) burada
tekrar cikti: ".card.feat" (0,2,0) "section.band.cam .card" (0,3,1)
kuralina yeniliyor, kart beyaz zemin + beyaz yazi oluyor ve basligi hic
gorunmuyordu. Olculdu 15.09.2026: h3 kontrasti 1.00:1. */
section.band.cam .card.feat{background:var(--k-blue-800)}
/* Mobil blur degerleri JS tarafinda seciliyor (--sahne-blur),
cunku satir ici degisken medya sorgusunu yenerdi. */
@media(prefers-reduced-motion:reduce){
section.band.cam{transition:none}
#sahne{transition:none}
.sahne-kat{transition:none}
}
/* ══ HARITA ═══════════════════════════════════════════════════
SVG artik ![]()
degil satir ici: ![]()
icindeki renklere ne
CSS ne JS erisebiliyordu. Satir ici olunca uc grup da
secilebilir hale geldi.
Genisletme: kapsayicidan %16 tasiyor ama min() ile ekran
genisligine kirpiliyor, yani yatay kaydirma dogurmuyor. */
.mapwrap .harita{display:block;height:auto;
/* Dar ekranda wrap'in yan dolgusunu geri al: harita ekran kenarina
oturur, ulkeler gorunur buyuklukte cizilir. Dolgu degeri wrap ile
ayni degiskenden geliyor, ikisi birlikte degisir. */
width:calc(100% + 2 * var(--k-s-5));
margin-left:calc(-1 * var(--k-s-5))}
@media(max-width:640px){
.mapwrap .harita{width:calc(100% + 2 * var(--k-s-4));
margin-left:calc(-1 * var(--k-s-4))}
}
@media(min-width:75rem){
/* Genis ekranda kapsayicidan tasiyor. %116 -> %132; ust sinir yine
min() ile ekrana bagli, 3rem pay kaydirma cubugu icin duruyor. */
.mapwrap .harita{width:min(132%,calc(100vw - 3rem));
margin-left:50%;transform:translateX(-50%)}
}
/* A+B: bolum gelince Turkiye'den disari dogru bir kez dalga,
ardindan nefes devralir. Nefeste her ulkenin KENDI periyodu
var (5.5-11 sn); tek frekansta hareket fark edilmiyordu.
Renk lejant rengi #4E7A99 ETRAFINDA gidip geliyor, yani
ortalama deger lejanttaki kareyle ayni kaliyor. Tek yone
kaysaydi lejant yanlis olurdu.
Gecikme ve periyot uretim aninda hesaplanip her yola
--g / --p / --f olarak yaziliyor, tarayicida hesap yok. */
@keyframes haritaDalga{from{fill:#DFE1E0} to{fill:#4E7A99}}
@keyframes haritaNefes{
0%,100%{fill:#2A5B80} 50%{fill:#729CB6}
}
.harita .hi path,.harita .hi circle{fill:#DFE1E0}
.harita.calis .hi path,.harita.calis .hi circle{
animation:haritaDalga .5s ease-out var(--g,0s) forwards,
haritaNefes var(--p,7s) ease-in-out 1.8s infinite}
@media(prefers-reduced-motion:reduce){
.harita .hi path,.harita.calis .hi path,.harita .hi circle,.harita.calis .hi circle{animation:none;fill:#4E7A99}
}
.sechead{max-width:62ch;margin-bottom:var(--k-s-7)}
.sechead .kicker{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--k-red-600);font-weight:700;margin:0 0 var(--k-s-3)}
h2{font-family:var(--k-font-display);font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.15;
letter-spacing:-.025em;font-weight:600;margin:0 0 var(--k-s-4)}
.sechead p{font-size:1.0625rem;color:var(--k-ink-700);margin:0;line-height:1.65}
h3{font-family:var(--k-font-body);font-size:1.1875rem;font-weight:650;margin:0 0 var(--k-s-3);
letter-spacing:-.01em}
/* ── hizmet kartları ── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:var(--k-s-4)}
/* ── hizmet grubu basligi ──────────────────────────────────────
Alti hizmet etiketsiz tek izgaraya konsaydi okuma sirasi 1'den 6'ya
akar ve gumruk musavirligi "dorduncu siradaki" olurdu; kural 7 hava
kargo ile gumrugu esit agirlikta tutmamizi istiyor. Iki etiketli
satirda ikisi de kendi satirinin basinda duruyor.
Ayrim emsalde de var: K+N tasima kiplerini katma degerli hizmetlerden
ayri listeliyor, DSV dort eksenli mimari kuruyor (15.09.2026 taramasi). */
.grupbas{display:flex;align-items:baseline;gap:var(--k-s-4);margin:0 0 var(--k-s-4)}
.grupbas:not(:first-of-type){margin-top:var(--k-s-7)}
.grupbas h3{font:700 .75rem/1 var(--k-font-body);letter-spacing:.16em;
text-transform:uppercase;color:var(--k-ink-700);margin:0;flex:none}
.grupbas .cizgi{flex:1;height:1px;background:var(--k-gray-200)}
/* 320 px: EN "Customs and complementary services" flex:none ile daralmiyor,
sayfayi 348 px'e tasiyordu (olculdu 01.10.2026). */
@media(max-width:359px){.grupbas h3{flex-shrink:1;min-width:0;line-height:1.4}}
/* Uc sutun: alti hizmet 3+3 okunuyor. auto-fit birakilsaydi genis ekranda
4+2 kirilip gruplar birbirine karisirdi. */
.cards--uc{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.cards--uc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.cards--uc{grid-template-columns:1fr}}
/* Kart altinda ikincil bag (ulusal transit gumruk kartindan aciliyor). */
.altbag{display:block;font-size:.8125rem;color:var(--k-ink-500);margin-top:var(--k-s-3);
padding-top:var(--k-s-3);border-top:1px solid var(--k-gray-100)}
.altbag a{color:var(--k-blue-600)}
.hpanel .altbag{max-width:62ch}
.card{border:1px solid var(--k-gray-200);border-radius:var(--k-r-lg);padding:var(--k-s-5);
background:#fff;text-decoration:none;color:inherit;display:flex;flex-direction:column;
transition:all .2s var(--k-ease)}
.card:hover{border-color:var(--k-blue-600);box-shadow:var(--k-sh-3);transform:translateY(-3px)}
.card .ic{width:46px;height:46px;border-radius:var(--k-r-md);background:var(--k-blue-800);
color:#fff;display:grid;place-items:center;margin-bottom:var(--k-s-4);flex:none}
.card .ic svg{width:23px;height:23px}
.card.feat{border-color:var(--k-blue-800);border-width:2px;background:var(--k-blue-800);color:#fff}
.card.feat .ic{background:var(--k-red-600)}
.card.feat p{color:#C9D8E2}
.card.feat .go{color:#fff}
.card.feat:hover{border-color:var(--k-red-500)}
.card h3{margin-bottom:var(--k-s-2)}
.card p{font-size:.9375rem;color:var(--k-ink-500);margin:0 0 var(--k-s-5);line-height:1.6;flex:1}
.card .go{font-size:.9375rem;font-weight:650;color:var(--k-blue-600);
display:inline-flex;align-items:center;gap:var(--k-s-2)}
.card .go svg{width:14px;height:14px;transition:transform .2s var(--k-ease)}
.card:hover .go svg{transform:translateX(3px)}
/* ── karar kriteri etiketi ────────────────────────────────────
Emsal taramasi 15.09.2026: DSV (dsv.com/en-gb/our-solutions) tasima
kiplerini teknik tanimla degil musterinin karar kriteriyle etiketliyor
(hava icin zaman, deniz icin maliyet). Ilk kez tasitan ziyaretcinin
"hangi kipi secmeliyim" sorusunu menu seviyesinde cevapliyor; fotograf,
referans veya rakam gerektirmiyor. Etiket secim olcutudur, yetkinlik
iddiasi degil (kural 3 kapsami disinda).
Renk ink-500: gray-500 beyaz kart uzerinde 3.71:1 ile AA'nin altinda
kaliyordu, ink-500 5.30:1. */
.card .krit{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--k-ink-500);margin-bottom:var(--k-s-2)}
.card.feat .krit{color:#9FB6C6}
/* ── kip disi kart ────────────────────────────────────────────
Emsal taramasi 15.09.2026: her kademede 2-6 kip disi hizmet basligi var
(ESA'da sigorta, Interline'da depolama ve proje kargo, CK'de YYS ve
egitim, K+N'de sekiz kalem). Bizde sifirdi; site yalniz ne tasidigimizi
soyluyor, baska ne yaptigimizi soylemiyordu. "Tek dosya, tek muhatap"
konumlandirmasi kip disi bir iddia ve arkasinda sayfasi yoktu.
Tam genislik: dort hizmetin yanina besinci sutun olarak girseydi genis
ekranda oksuz sutun doguyordu (ayni hata teklif formunda vardi) ve kart
hizmet degil calisma bicimi oldugu icin zaten ayrismasi gerekiyor. */
.card--genis{grid-column:1/-1;flex-direction:row;align-items:flex-start;
gap:var(--k-s-5);margin-top:var(--k-s-2)}
.card--genis .ic{margin-bottom:0}
.card--genis .govde{flex:1;min-width:0;display:flex;flex-direction:column}
.card--genis p{margin-bottom:var(--k-s-4);max-width:78ch}
@media(max-width:640px){
.card--genis{flex-direction:column;gap:0;margin-top:0}
.card--genis .ic{margin-bottom:var(--k-s-4)}
}
.tagpill{display:inline-block;font-size:.6875rem;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;background:var(--k-red-600);color:#fff;padding:3px 8px;
border-radius:var(--k-r-sm);margin-bottom:var(--k-s-3)}
/* ══ HİZMET SEÇİCİ ═══════════════════════════════════════════════
Kart artik paragraf tasimiyor: ikon + ad + secim olcutu. Ayrinti
asagidaki tek panelde, secime gore degisiyor. Boylece ana sayfadaki
ayni cumlenin iki kez gecmesi bitti ve bolum ~600 piksel kisaldi.
Otomatik ilerleme YOK: ziyaretci seciyor, yani K2'nin "karusel yok"
karariyla catismiyor (NN/g de otomatik karuseli bu yuzden onermiyor).
ARIA tarafinda sekme (tablist) yerine .qf-chips ile ayni desen
kullanildi: role="group" + aria-pressed. Depoda zaten bu var, ikinci
bir etkilesim sozlugu acmaya gerek yok. */
.hsec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--k-s-3)}
/* Grup etiketi izgarada tam satir kapliyor. Kendi kenar bosluklari
izgaranin gap'iyle ust uste binmesin diye sifirlaniyor; ikinci grup
oncesinde biraz nefes birakiliyor. */
.hsec .grupbas{grid-column:1/-1;margin:0}
.hsec .grupbas:not(:first-child){margin-top:var(--k-s-4)}
@media(max-width:860px){.hsec{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.hsec{grid-template-columns:1fr}}
/* Izgara, flex degil: ikon iki satiri birden kapsiyor, ad ve olcut
sag sutunda alt alta duruyor. Flex satirinda ucu yan yana diziliyor ve
uzun olcut adin uzerine biniyordu (16.09.2026'da ekranda goruldu). */
.hchip{display:grid;grid-template-columns:44px minmax(0,1fr) 18px;
align-items:center;column-gap:var(--k-s-4);text-align:left;width:100%;
min-height:76px;padding:var(--k-s-3) var(--k-s-4);cursor:pointer;
border:1px solid var(--k-gray-200);border-radius:var(--k-r-lg);background:#fff;
font:inherit;color:inherit;position:relative;
transition:border-color .16s var(--k-ease),box-shadow .16s var(--k-ease),
transform .16s var(--k-ease)}
.hchip:hover{border-color:var(--k-blue-600);box-shadow:var(--k-sh-2)}
.hchip:focus-visible{outline:3px solid var(--k-red-600);outline-offset:3px}
.hchip .ic{grid-row:1/3;width:44px;height:44px;border-radius:var(--k-r-md);
background:var(--k-gray-50);color:var(--k-blue-800);display:grid;place-items:center;
transition:background .16s var(--k-ease),color .16s var(--k-ease)}
.hchip .ic svg{width:24px;height:24px}
.hchip .ad{grid-column:2;align-self:end;font:650 1rem/1.25 var(--k-font-body);
color:var(--k-ink-900);min-width:0}
.hchip .krit{grid-column:2;align-self:start;font-size:.6875rem;font-weight:700;
letter-spacing:.09em;text-transform:uppercase;color:var(--k-ink-500);margin-top:3px}
/* ── tiklanabilirlik ipucu ────────────────────────────────────
Kart metin tasimadigi icin tiklanabilir oldugu belli olmuyordu.
Chevron VARSAYILAN HALDE SAGA bakiyor (kural D), acilinca 90 derece
donup asagiyi, yani panelin yonunu gosteriyor. Hem "tiklanir" hem
"su an acik" bilgisini tek isaretle veriyor, metin eklemeden. */
.hchip .ipucu{grid-column:3;grid-row:1/3;display:grid;place-items:center;
color:var(--k-ink-500);transition:transform .2s var(--k-ease),color .15s var(--k-ease)}
.hchip .ipucu svg{width:18px;height:18px;display:block}
.hchip:hover .ipucu{color:var(--k-blue-600)}
.hchip.on .ipucu{color:#9FB6C6;transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){.hchip .ipucu{transition:none}}
/* Secili kart: lacivert dolgu. Kirmizi yalniz alt cizgide, cunku kirmizi
sayfada eylem rengi; secim durumu onu calmamali. */
.hchip.on{background:var(--k-blue-800);border-color:var(--k-blue-800)}
.hchip.on .ad{color:#fff}
.hchip.on .krit{color:#9FB6C6}
.hchip.on .ic{background:var(--k-red-600);color:#fff}
/* Isaret kartla panel arasindaki bagi kuruyor: kart panelin ustundeyken
alt kenarda. Tek sutuna dusunce (<=520px) kartlar alt alta diziliyor ve
alttaki cizgi neyi gosterdigini soylemiyor; orada sol kenara geciyor. */
.hchip.on::after{content:"";position:absolute;left:var(--k-s-4);right:var(--k-s-4);
bottom:-1px;height:3px;background:var(--k-red-500);border-radius:2px 2px 0 0}
@media(max-width:520px){
.hchip.on::after{left:-1px;right:auto;top:var(--k-s-3);bottom:var(--k-s-3);
width:3px;height:auto;border-radius:0 2px 2px 0}
}
/* ── acilan panel ── */
.hpanel{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);
gap:var(--k-s-7);align-items:start;margin-top:var(--k-s-6);
border:1px solid var(--k-gray-200);border-radius:var(--k-r-lg);background:#fff;
padding:var(--k-s-6)}
.hpanel[hidden]{display:none}
/* Panel yuksekligi hizmetten hizmete 503-564px arasinda degisiyordu
(olculdu 16.09.2026, 1180px): secim degisince sayfa 61px zipliyordu.
Taban yukseklik zipmayi durduruyor. rem cinsinden, cunku kullanici
yazi boyutunu buyutunce metin de buyuyor. Dar ekranda konmuyor:
panel zaten tek sutun ve cok daha uzun. */
@media(min-width:861px){.hpanel{min-height:36rem}}
/* ══ AKORDIYON / IZGARA ═══════════════════════════════════════
Paneller izgaranin icinde, her biri kendi kartinin ardinda duruyor.
Dar ekranda (tek sutun) DOM sirasi dogrudan akordiyon veriyor: cevap
dokunulan kartin hemen altinda aciliyor. Masaustunde `order` kartlari
one, panelleri sona aliyor; panel tam satir kapliyor.
JS tasimasi denendi ve birakildi: `matchMedia` change ve `resize`
olaylari bu panelde atesletmiyor, yani davranis dogrulanamiyordu. */
.hsec > .hpanel{grid-column:1/-1;margin:var(--k-s-1) 0 var(--k-s-4)}
/* ══ DAR EKRANDA YAPIŞAN KARTLAR ════════════════════════════════
Panel acilinca hem okudugumuz hizmetin karti hem de sıradaki kart
ekranda kaliyor: biri ust kenara, digeri alt kenara yapisiyor.
Panel ikisinin arasinda kayiyor, yani ziyaretci nerede oldugunu ve
siradakinin ne oldugunu hic kaybetmiyor.
Sticky saf CSS: kaydirma olayi dinlenmiyor, IntersectionObserver
kullanilmiyor (ikisi de bu panelde calismiyor, davranis
dogrulanamazdi). --basik JS ile baslik yuksekligine ayarlaniyor. */
@media(max-width:860px){
.hchip.on{position:sticky;top:var(--basik,88px);z-index:3;
box-shadow:0 6px 16px rgba(0,38,61,.22)}
.hchip.sonraki{position:sticky;bottom:0;z-index:3;
box-shadow:0 -6px 16px rgba(0,38,61,.14)}
/* Alt kenara yapisan kart artik ana gezinme ogesi; yukari-don dugmesi
onun sag kenarini kapatiyordu. Panel acikken dugme cekiliyor.
Kaydirmaya bagli degil: sinif sec() icinde konuyor. */
body.panel-acik #ustDon{display:none}
/* Yapisan kartin altindan panel gecerken kenar cizgisi kesilmesin */
.hchip.on::after{bottom:-3px;height:4px}
}
@media(min-width:861px){
.hsec > .hpanel{order:99;margin:var(--k-s-5) 0 0}
.hsec > .grupbas:first-child{order:-4}
.hchip[data-hedef="hava"]{order:-3}
.hchip[data-hedef="deniz"]{order:-2}
.hchip[data-hedef="kara"]{order:-1}
.hsec > .grupbas:not(:first-child){order:0}
.hchip[data-hedef="gumruk"]{order:1}
.hchip[data-hedef="depo"]{order:2}
.hchip[data-hedef="sigorta"]{order:3}
}
@media(max-width:860px){
.hpanel{grid-template-columns:1fr;gap:var(--k-s-5);padding:var(--k-s-5)}
}
/* Stilize gorsel alan: buyuk cizgi ikonu lacivert zeminde. Metin bu
alanin UZERINDE degil YANINDA; hareketli ya da desenli bir zeminin
sabit kontrast orani olmadigi icin metin oraya konmuyor. */
.hp-gorsel{position:relative;border-radius:var(--k-r-md);overflow:hidden;
background:var(--k-blue-800);min-height:190px;display:grid;place-items:center}
/* Fotograf varsa: kare tam alani kapliyor, uzerine lacivert ortu geliyor.
Ortu opakligi .62; altindaki ikon beyaz ve dekoratif (aria-hidden), yani
WCAG metin esigi aranmiyor ama gorunur kalmasi gerekiyor.
METIN BU ALANA KONMAZ: fotografin sabit kontrast orani yok, metin
panelin sag sutununda duz zeminde duruyor.
Gorseller zaten depomuzda ve lisansli (hero kareleri); kural 9 geregi
okunur marka, plaka ve yuz icermiyorlar. */
.hp-foto{position:absolute;inset:0}
.hp-foto img{width:100%;height:100%;object-fit:cover;display:block;
filter:saturate(.85)}
/* Ozgullugu bilerek (0,2,1): asagidaki .hp-gorsel::before ile esit
ozgullukte yazilinca kaynak sirasina yeniliyor ve ortu hic
uygulanmiyordu (17.09.2026). Sinif iki kez yaziliyor. */
.hp-gorsel.hp-gorsel--foto::before{background:rgba(0,58,93,.62)}
.hp-gorsel::before{content:"";position:absolute;inset:0;
background:radial-gradient(420px 220px at 22% 12%,rgba(0,134,214,.34),transparent 68%)}
/* Logodaki 4:3:2:1 ritmi: dort cubuk, ince solda kalin sagda, hareket
soldan saga. Tek geometrik ozellik, buyuk olcekte, bir kez. */
.hp-gorsel::after{content:"";position:absolute;left:var(--k-s-5);bottom:var(--k-s-5);
width:76px;height:10px;opacity:.5;
background:linear-gradient(90deg,
#fff 0 3px,transparent 3px 12.5px,
#fff 12.5px 21.5px,transparent 21.5px 34px,
#fff 34px 47px,transparent 47px 59.5px,
#fff 59.5px 76px)}
.hp-isaret{position:relative;width:96px;height:96px;color:#fff;opacity:.92;
stroke-width:1.1}
@media(max-width:860px){
.hp-gorsel{min-height:120px}
.hp-isaret{width:64px;height:64px}
}
.hpanel .sechead{margin-bottom:var(--k-s-5)}
.hpanel h2{font-size:clamp(1.5rem,2.6vw,2rem)}
/* Panel degisince icerik soldan gelir (logodan gelen yon kurali). */
.hpanel.giris .hp-govde{animation:hpGir .32s var(--k-ease) both}
@keyframes hpGir{from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
.hpanel.giris .hp-govde{animation:none}
.hchip{transition:none}
}
/* ── NCTS bölümü ── */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--k-s-8);align-items:start}
.riskbox{border:1px solid var(--k-gray-200);border-radius:var(--k-r-lg);overflow:hidden;background:#fff;margin-top:2.5rem}
.riskbox h3,.riskbox h4{margin:0;padding:var(--k-s-4) var(--k-s-5);background:var(--k-gray-50);
font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--k-ink-700);
border-bottom:1px solid var(--k-gray-200);font-weight:700}
.risktable{width:100%;border-collapse:collapse;font-size:.9375rem}
.risktable td,.risktable th{padding:var(--k-s-4) var(--k-s-5);border-bottom:1px solid var(--k-gray-100);
vertical-align:top;color:var(--k-ink-700)}
/* sol sutun kucuk buyuk-harf etiket: Claude Design sentezi (30.08) */
.risktable td:first-child,.risktable th[scope="row"]{text-align:left;color:var(--k-ink-500);font-weight:700;width:44%;
font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;padding-top:calc(var(--k-s-4) + 3px)}
.risktable tr:last-child td{border-bottom:none}
.risktable tr.warn td{background:#FFF6F6}
.risktable tr.warn td:first-child{color:var(--k-red-700)}
.risktable td:first-child .n,.risktable th .n{color:var(--k-red-600);font-variant-numeric:tabular-nums;
margin-right:var(--k-s-2);font-size:.8125rem}
.notebox{background:var(--k-gray-50);border-left:3px solid var(--k-blue-600);
border-radius:0 var(--k-r-md) var(--k-r-md) 0;padding:var(--k-s-4) var(--k-s-5);
margin:var(--k-s-5) 0;font-size:.9375rem;color:var(--k-ink-700)}
.notebox b{color:var(--k-ink-900)}
ul.check{list-style:none;padding:0;margin:var(--k-s-5) 0 0}
ul.check li{position:relative;padding-left:var(--k-s-6);margin-bottom:var(--k-s-4);
font-size:1rem;color:var(--k-ink-700);line-height:1.6}
ul.check li b{color:var(--k-ink-900)}
.chk{position:absolute;left:0;top:.15em;width:20px;height:20px;border-radius:50%;
background:var(--k-blue-800);display:flex;align-items:center;justify-content:center;flex:none}
.chk svg{width:11px;height:11px;display:block}
/* ── neden biz ── */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--k-s-6)}
.whyitem{border-top:3px solid var(--k-blue-800);padding-top:var(--k-s-5)}
.whyitem:nth-child(2){border-top-color:var(--k-red-600)}
.whyitem h3{font-size:1.25rem;margin-bottom:var(--k-s-3)}
.whyitem p{color:var(--k-ink-700);margin:0;font-size:1rem;line-height:1.65}
/* ── sektörler ── */
.sectors{display:flex;flex-wrap:wrap;gap:var(--k-s-3)}
.sector{border:1.5px solid var(--k-gray-300);border-radius:var(--k-r-full);
padding:var(--k-s-3) var(--k-s-5);font-size:1rem;font-weight:600;color:var(--k-blue-800);
background:#fff;display:inline-flex;align-items:center;gap:var(--k-s-3)}
.sector svg{width:18px;height:18px;color:var(--k-gray-500);flex:none}
/* ── üyelikler ── */
.creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--k-s-4)}
.cred{border:1px solid var(--k-gray-200);border-radius:var(--k-r-lg);padding:var(--k-s-5);background:#fff;
display:flex;gap:var(--k-s-4);align-items:flex-start}
.cred .mk{width:104px;flex:none;display:flex;align-items:center;justify-content:flex-start;
padding-top:2px}
.cred .mk img{max-width:100%;height:auto;width:auto}
.cred:nth-child(1) .mk img{max-height:56px} /* WCA First — dikey */
.cred:nth-child(2) .mk img{max-height:26px} /* UTİKAD — geniş */
.cred:nth-child(3) .mk img{max-height:78px} /* IATA mührü: ölçü şeritle aynı gerekçe */
@media(max-width:600px){.cred:nth-child(3) .mk img{max-height:68px}}
@media(max-width:560px){.cred:nth-child(3) .mk img{max-height:60px}}
@media(max-width:359px){.cred:nth-child(3) .mk img{max-height:54px}}
.cred .bd h3{font-size:1.0625rem;margin:0 0 2px}
.cred .yr{font-size:.75rem;color:var(--k-red-600);font-weight:700;letter-spacing:.06em;
text-transform:uppercase;display:block;margin-bottom:var(--k-s-3)}
.cred .bd p{margin:0;font-size:.9375rem;color:var(--k-ink-500);line-height:1.55}
.cred .no{font-size:.75rem;color:var(--k-ink-500);margin-top:var(--k-s-3);display:block;
font-family:ui-monospace,Menlo,monospace}
.credminor{margin-top:var(--k-s-5);padding-top:var(--k-s-5);border-top:1px solid var(--k-gray-200);
font-size:.9375rem;color:var(--k-ink-500)}
.credminor b{color:var(--k-ink-700)}
/* ── tüzel kişilik kimliği ─────────────────────────────────
İki ayrı şirket var: nakliyat ve gümrük müşavirliği.
Ayrım mevzuat gereği (Gümrük Yönetmeliği m.563(6)) — gümrük
müşavirliği şirketine yalnızca gümrük müşavirleri ortak olabilir.
Rozet görünür ama gürültü yapmaz; ilgilenen ayrıntıya ulaşır. */
.tk{display:inline-flex;align-items:center;gap:var(--k-s-2);font-size:.8125rem;font-weight:600;
padding:.3125rem .6875rem;border-radius:var(--k-r-full);border:1px solid var(--k-gray-200);
background:var(--k-gray-50);color:var(--k-ink-700);text-decoration:none;line-height:1.35;
transition:border-color .15s var(--k-ease),color .15s var(--k-ease)}
a.tk:hover{border-color:var(--k-gray-400);color:var(--k-ink-900)}
.tk .dot{width:7px;height:7px;border-radius:50%;flex:none}
.tk.nak .dot{background:var(--k-blue-600)}
.tk.gum .dot{background:#6B2C74}
.tk-row{display:flex;flex-wrap:wrap;gap:var(--k-s-2);margin:var(--k-s-3) 0 0}
.tk-sm{font-size:.75rem;padding:.25rem .5625rem}
/* ── form v3: çipler, ayrıntı katmanı, A↔C geçişi ── */
.qf-chips{display:flex;flex-wrap:wrap;gap:var(--k-s-2);justify-content:center;
margin:0 0 var(--k-s-4)}
.qf-chips--sm{justify-content:flex-start;margin:0}
.qf-chips .chip{border:1.5px solid rgba(255,255,255,.42);border-radius:var(--k-r-full);
background:transparent;color:#DCE6EE;font:550 .9375rem/1.2 var(--k-font-body);
padding:var(--k-s-3) var(--k-s-5);min-height:44px;cursor:pointer;
transition:border-color .15s var(--k-ease),background .15s var(--k-ease)}
.qf-chips .chip:hover{border-color:#fff}
.qf-chips .chip.on{background:#fff;border-color:#fff;color:var(--k-blue-800);font-weight:700}
.qf-chips .chip.on::before{content:"✓ ";color:var(--k-red-600)}
.qf-chips .chip:focus-visible{outline:3px solid var(--k-red-400,#FF8A93);outline-offset:3px}
.qf-lbl{font-size:.8125rem;font-weight:650;color:#DCE6EE;display:block;margin-bottom:var(--k-s-2)}
details.qf-ayrinti{border:1px dashed rgba(255,255,255,.4);border-radius:var(--k-r-md);
margin:var(--k-s-5) 0;text-align:left}
details.qf-ayrinti summary{padding:var(--k-s-3) var(--k-s-4);min-height:44px;cursor:pointer;
list-style:none;display:flex;align-items:center;justify-content:space-between;
font:550 .9375rem var(--k-font-body);color:#DCE6EE}
details.qf-ayrinti summary::-webkit-details-marker{display:none}
details.qf-ayrinti summary::after{content:"▾"}
details.qf-ayrinti[open] summary::after{content:"▴"}
details.qf-ayrinti .qf-grid{padding:0 var(--k-s-4) var(--k-s-4)}
.qf-modlar{display:flex;justify-content:center;gap:var(--k-s-6);margin:0 0 var(--k-s-5);
flex-wrap:wrap}
.qf-mod{background:none;border:none;cursor:pointer;min-height:44px;padding:var(--k-s-2) 2px;
font:600 .75rem/1 var(--k-font-body);letter-spacing:.14em;text-transform:uppercase;
color:#8FA3B0;border-bottom:2px solid transparent;
transition:color .15s var(--k-ease),border-color .15s var(--k-ease)}
.qf-mod:hover{color:#fff}
.qf-mod.on{color:#fff;border-bottom-color:var(--k-red-500)}
.qf-mod:focus-visible{outline:3px solid var(--k-red-400,#FF8A93);outline-offset:3px}
/* Dar ekranda uc kip 2+1 kiriliyordu: satirin gerektirdigi genislik 344px,
kapsayici 295px (olculdu 15.09.2026, 375px ekran; gap 32px). Ucuncu
secenek tek basina ikinci satirda ortalanip, altindaki kirmizi cizgi de
ust satirda kaldigi icin secenek degil baslik gibi okunuyordu.
Izgara uc esit sutun verir: etiket sarsa da ucu ayni yukseklikte kalir
ve etkin secenegin alt cizgisi sutunun tamamini kaplar. */
@media(max-width:560px){
.qf-modlar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:0;align-items:stretch}
.qf-mod{letter-spacing:.06em;padding:var(--k-s-2) 2px;line-height:1.3}
}
.qf-gecis{margin:var(--k-s-4) 0 0;text-align:center}
.qf-gecislink{background:none;border:none;color:#9FB6C6;font:550 .8125rem var(--k-font-body);
min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
padding:0 var(--k-s-3)}
.qf-gecislink:hover{color:#fff}
.sector-tum{display:flex;align-items:center;justify-content:center;gap:var(--k-s-2);
margin-top:var(--k-s-3);width:100%;min-height:52px;border:1.5px dashed var(--k-gray-300);
border-radius:var(--k-r-full);padding:var(--k-s-3) var(--k-s-5);
font-size:.9375rem;font-weight:600;color:var(--k-ink-500);text-decoration:none;background:transparent;
transition:color .15s var(--k-ease),border-color .15s var(--k-ease)}
.sector-tum:hover{color:var(--k-blue-600);border-color:var(--k-blue-600)}
.sector-tum svg{width:18px;height:18px;flex:none}
/* ── teklif sihirbazı ── */
.qfw-bar{display:flex;align-items:center;gap:var(--k-s-3);margin:0 0 var(--k-s-5)}
.qfw-geri{background:none;border:1.5px solid rgba(255,255,255,.42);color:#DCE6EE;
border-radius:var(--k-r-full);min-width:44px;min-height:44px;cursor:pointer;
font:600 .875rem/1 var(--k-font-body);padding:0 var(--k-s-4)}
.qfw-geri[disabled]{opacity:.3;cursor:default}
.qfw-ilerleme{flex:1;height:6px;background:rgba(255,255,255,.40);border-radius:3px;overflow:hidden}
.qfw-ilerleme i{display:block;height:100%;background:var(--k-red-400,#FF8A93);border-radius:3px;
transition:width .25s var(--k-ease)}
.qfw-no{font:600 .75rem var(--k-font-body);color:#9FB6C6;white-space:nowrap}
.qfw-adim{display:none;text-align:left}
.qfw-adim.on{display:block}
.qfw-soru{font:600 1.1875rem/1.3 var(--k-font-display);margin:0 0 var(--k-s-4);color:#fff}
.qfw-secler{display:flex;flex-direction:column;gap:var(--k-s-2)}
.qfw-sec{border:1.5px solid rgba(255,255,255,.42);border-radius:var(--k-r-md);background:transparent;
color:#DCE6EE;font:550 .9375rem/1.3 var(--k-font-body);padding:var(--k-s-4);min-height:54px;
cursor:pointer;text-align:left}
.qfw-sec:hover{border-color:#fff}
.qfw-sec i{display:block;font-style:normal;font-size:.78125rem;color:#9FB6C6;margin-top:2px}
.qfw-devam{width:100%;min-height:48px;border:none;border-radius:var(--k-r-md);background:#fff;
color:var(--k-blue-800);font:700 .875rem var(--k-font-body);cursor:pointer;margin-top:var(--k-s-4)}
/* firmadan alınacak bilgi — yayına çıkmadan doldurulacak */
.bekliyor{border-bottom:1px dashed var(--k-red-600);opacity:.9}
/* kurumsal yapı bloğu */
.yapi{border:1px solid var(--k-gray-200);border-radius:var(--k-r-lg);background:#fff;
padding:var(--k-s-5);margin-top:var(--k-s-5)}
.yapi-kicker{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:var(--k-ink-500);margin-bottom:var(--k-s-2)}
.yapi h3{font-size:1.0625rem;margin:0 0 var(--k-s-3)}
.yapi p{margin:0 0 var(--k-s-4);font-size:.9375rem;color:var(--k-ink-700);line-height:1.6}
.yapi table{width:100%;border-collapse:collapse;font-size:.875rem}
.yapi th{text-align:left;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
color:var(--k-ink-500);padding:var(--k-s-2) var(--k-s-3);border-bottom:1px solid var(--k-gray-200)}
.yapi td{padding:var(--k-s-3);border-bottom:1px solid var(--k-gray-100);vertical-align:top;
color:var(--k-ink-700)}
.yapi tr:last-child td{border-bottom:none}
/* footer tüzel kişilik blokları */
.ftk{display:grid;grid-template-columns:1fr 1fr;gap:var(--k-s-5);margin-top:var(--k-s-6);
padding-top:var(--k-s-5);border-top:1px solid rgba(255,255,255,.12)}
.ftk .blk{border-left:3px solid var(--k-blue-500);padding-left:var(--k-s-4);
font-size:.8125rem;color:#B6C4CE;line-height:1.65}
.ftk .blk.g{border-left-color:#B07ABA}
.ftk .blk b{display:block;color:#fff;font-size:.875rem;margin-bottom:var(--k-s-1);font-weight:600}
.ftk .blk .rol{color:#9FB0BC;display:block;margin-bottom:var(--k-s-2)}
@media(max-width:700px){.ftk{grid-template-columns:1fr;gap:var(--k-s-4)}}
/* Kalin yazi paragrafin icinde tarama noktalari kuruyor: goz once yuk
cinslerini yakaliyor, sonra cumleyi okuyor. Kalinlastirilan sey ulke
degil yuk cinsi (kural 5). */
.sectornote b{color:var(--k-ink-900);font-weight:650}
.sectornote{max-width:70ch;margin:var(--k-s-6) 0 0;font-size:1rem;line-height:1.75;
font-style:italic;quotes:"\201C" "\201D";
color:var(--k-ink-700);border-left:2px solid var(--k-gray-300);padding-left:var(--k-s-5)}
.sectornote::before{content:open-quote;font:700 2.2rem/0 var(--k-font-display);
color:var(--k-gray-400);vertical-align:-0.35em;margin-right:.15em}
.sectornote::after{content:close-quote;font:700 1.4rem/0 var(--k-font-display);
color:var(--k-gray-400);margin-left:.1em}
/* ── harita ── */
.mapwrap{position:relative}
.mapwrap img{width:100%;height:auto}
.maplegend{list-style:none;display:flex;gap:var(--k-s-5);padding:0;
margin:var(--k-s-4) 0 0;font-size:.875rem;color:var(--k-ink-500);flex-wrap:wrap}
.maplegend li{display:flex;align-items:center;gap:var(--k-s-2)}
.maplegend .sw{width:14px;height:14px;border-radius:3px;display:inline-block;flex:none}
.maplegend .sw-main{background:var(--k-red-600)}
.maplegend .sw-hi{background:#4E7A99}
/* ── NCTS küçük blok ── */
.nctsblock{border:1px solid var(--k-gray-200);border-radius:var(--k-r-lg);
padding:var(--k-s-5) var(--k-s-6);background:#fff;display:grid;
grid-template-columns:minmax(0,1fr) auto;gap:var(--k-s-6);align-items:center}
.nctsblock h3{margin:0 0 var(--k-s-2)}
.nctsblock p{margin:0;font-size:.9375rem;color:var(--k-ink-500);line-height:1.6;max-width:62ch}
@media(max-width:760px){.nctsblock{grid-template-columns:1fr;gap:var(--k-s-4)}}
.mapnote{margin:var(--k-s-3) 0 0;font-size:.8125rem;color:var(--k-ink-500)}
.dislink{color:var(--k-blue-600);text-decoration:none}
.dislink:hover{text-decoration:underline}
/* ── bilgi bankası ── */
.arts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--k-s-4)}
@media(max-width:900px){.arts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.arts{grid-template-columns:1fr}}
.art{border:1px solid var(--k-gray-200);border-radius:var(--k-r-lg);padding:var(--k-s-5);
text-decoration:none;color:inherit;background:#fff;transition:all .2s var(--k-ease);
display:flex;flex-direction:column}
.art:hover{border-color:var(--k-blue-600);box-shadow:var(--k-sh-2);transform:translateY(-2px)}
.art .cat{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--k-ink-500);
font-weight:700;margin-bottom:var(--k-s-3)}
.artsmore{margin:calc(var(--k-s-7) * -1 + var(--k-s-2)) 0 var(--k-s-5);text-align:right}
.artsmore a{font-size:.9375rem;font-weight:650;text-decoration:none;color:var(--k-blue-600);
display:inline-flex;align-items:center;gap:var(--k-s-2)}
.artsmore a:hover{text-decoration:underline}
.artsmore svg{width:14px;height:14px}
@media(max-width:640px){.artsmore{text-align:left;margin-top:0}}
.art h3{font-size:1.0625rem;margin-bottom:var(--k-s-3);line-height:1.4}
.art p{font-size:.875rem;color:var(--k-ink-500);margin:0;line-height:1.55;flex:1}
/* ── CTA ── */
/* overflow:hidden KALDIRILDI (17.09.2026). Buradaki tek isi ::before
gradyanini yuvarlak koseye kirpmakti; ama ayni zamanda oneri listesini
de kirpiyordu. Olculdu: "Adim adim" formunun Nereden alaninda tam boy
liste (264 px) .cta sinirini masaustunde 56 px asiyor ve kesiliyordu
(mobilde 12 px payla kil payi siginca fark edilmemis). Gradyan artik
kendi yariçapiyla kirpiliyor, kapsayiciya gerek yok. */
.cta{background:var(--k-blue-800);color:#fff;border-radius:var(--k-r-lg);padding:var(--k-s-8) var(--k-s-7);
text-align:center;position:relative}
.cta::before{content:"";position:absolute;inset:0;border-radius:inherit;
background:radial-gradient(700px 300px at 50% 0%,rgba(0,134,214,.25),transparent 65%)}
.cta > *{position:relative}
.cta h2{margin-bottom:var(--k-s-4)}
.cta p{font-size:1.0625rem;color:#DCE6EE;max-width:52ch;margin:0 auto var(--k-s-6)}
.cta-row{display:flex;gap:var(--k-s-3);justify-content:center;flex-wrap:wrap}
.pledge{display:inline-flex;align-items:center;gap:var(--k-s-3);background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.2);border-radius:var(--k-r-full);
padding:var(--k-s-2) var(--k-s-4);font-size:.875rem;font-weight:600;margin-bottom:var(--k-s-5)}
.pledge svg{width:16px;height:16px;color:var(--k-red-500)}
/* ── teklif formu ── */
.qf-tabs{display:inline-flex;gap:4px;background:rgba(255,255,255,.05);padding:4px;
border-radius:var(--k-r-md);margin:0 0 var(--k-s-6)}
.qf-tab{font:600 .9375rem var(--k-font-body);padding:var(--k-s-3) var(--k-s-5);
border-radius:calc(var(--k-r-md) - 2px);border:none;background:transparent;color:#8FA3B0;
cursor:pointer;transition:all .18s var(--k-ease);
/* dokunma alanı en az 44px — mobil testte 43px ölçüldü, düzeltildi */
min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.qf-tab.is-active{background:rgba(255,255,255,.82);color:var(--k-blue-700)}
.quoteform{text-align:left;max-width:720px;margin:0 auto}
.qf-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--k-s-4)}
.qf-field{display:flex;flex-direction:column;gap:6px;position:relative}
/* ── özel açılır öneri listesi ─────────────────────────────────