@charset "utf-8";

/* ==========================================================================
   Yilport Theme v3 — "Main Page.jpg" + "terminal-1.jpg" tasarim sistemi
   Palet: lacivert #1B3585, mavi #0560C6, gok #0679C6, indigo #4645DE,
          mor #7A4FBE, murekkep #0D1233
   ========================================================================== */

:root {
    --ink: #0d1233;
    --navy: #16305f;
    --menu: #1d3e8a;
    --primary: #1b3585;
    --blue: #0560c6;
    --sky: #0679c6;
    --skylight: #0aaef5;
    --indigo: #4645de;
    --purple: #7a4fbe;
    --panel: #3d85d8;
    --more: #1470c4;
    --text: #545b6e;
    --slate: #28384f;
    --line: #e3e9f2;
    --line-soft: #edf1f8;
    --bg-soft: #f5f9fd;
    --bg-tint: #edf3fb;
    --radius: 10px;
    --shadow: 0 10px 30px rgba(23, 64, 133, .08);
    --wrap: 1400px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset,
input, textarea, p, blockquote, table, tr, th, td, figure { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 400; }
a { outline: 0; cursor: pointer; text-decoration: none; color: inherit; }
img { border: none; max-width: 100%; display: block; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }
html, html a { -webkit-font-smoothing: antialiased !important; }

.saver { clear: both !important; height: 0 !important; line-height: 0 !important; float: none !important; display: block !important; }
.hiddenText { font-size: 0 !important; text-indent: -9999px !important; }
.leftContainer { float: left; }
.rightContainer { float: right; }

.wrapper { width: var(--wrap); max-width: calc(100% - 60px); margin: 0 auto !important; position: relative !important; }

body {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    background: #fff;
    margin: 0;
    overflow-x: hidden;
}

/* ---------- butonlar ---------- */
.btnSolid {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--primary); color: #fff;
    font-size: 13px; font-weight: 700; letter-spacing: .06em;
    padding: 13px 24px; border: 0; border-radius: 4px; line-height: 1;
    transition: background .15s ease;
}
.btnSolid:hover { background: #24439c; }
.btnOutline {
    display: inline-flex; align-items: center; gap: 10px;
    background: #fff; color: var(--navy);
    font-size: 13px; font-weight: 700; letter-spacing: .06em;
    padding: 12px 22px; border: 1.5px solid #9dbbe8; border-radius: 4px; line-height: 1;
    transition: border-color .15s ease, color .15s ease;
}
.btnOutline:hover { border-color: var(--blue); color: var(--blue); }
/* Hero CTA'sinin BUYUK HARFI CSS'te, C#'ta DEGIL.
   Onceki hali `lt.ToUpperInvariant()` ile buyutuyordu ve bu Turkce'de YANLIS:
   invariant buyutme "i" harfini "I" yapiyor, oysa Turkce'de "Ilgi" degil "İlgi" olmali.
   CSS text-transform ise elementin lang'ine gore davraniyor ve dogru harfi uretiyor.
   Ayrica anahtar "LEARN MORE" iken ayni metnin "Learn More" hali baska bir widget'ta
   kullaniliyordu; cikarici bunu HARF DURUMU CARPISMASI olarak reddetti -- hakliydi,
   iki varyant admin ceviri ekranini o kulturde 500 yapiyor. Tek anahtara indirildi.
   Bkz. .claude/memory/gotchas.md */
.ypHeroBtn .btnOutline { text-transform: uppercase; }

.btnOutline svg, .btnSolid svg { flex: none; }
.btnMore {
    display: inline-block; background: var(--more); color: #fff;
    font-size: 12.5px; font-weight: 700; padding: 8px 20px; border-radius: 3px; line-height: 1.2;
}
.btnMore:hover { background: #1a80da; }

.ypCaption {
    display: block; font-size: 13px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: #2f3fb8; margin: 0 0 14px 0;
}

/* ---------- header ---------- */
/* Referansta (Main Page.jpg) header altinda ne hairline ne golge var; ayrim tonal.
   Sticky header icerigin uzerine bindiginde tek katmanli hafif golge devreye girer. */
header.ypHeader {
    position: sticky; top: 0; z-index: 200; background: #fff;
    box-shadow: none;
}
/* Sayfa kaydirilinca tek katmanli hafif ayrim (yilport.js .isScrolled ekler).
   Ustteyken golge yok = referans gorunumu. */
header.ypHeader.isScrolled { box-shadow: 0 4px 14px rgba(23, 64, 133, .07); }
.ypHeader .wrapper { display: flex; align-items: center; height: 76px; gap: 26px; }
/* BASLIK KABI SAYFA KABINDAN GENIS. Genel .wrapper 1400 px'te sabit ve ekran
   buyurken menuye yer ACILMIYORDU: 1920 px'te bile kullanilabilir alan 1400 px
   kaliyordu. Olculdu (tr, 1920 px): marka 338 + menu 1260 + dil 85 = 1683 --
   dil secici sagdan 335 px tasip ekran disinda kaliyordu, sayfada yatay
   kaydirma olusuyordu.
   1600 px SECILDI, sinirsiz degil: tamamen tam genislik yapmak logoyu pencere
   kenarina yapistirip asagidaki icerik hizasindan kopariyordu. 1600'de menu
   Turkce'de de rahat siğiyor, hiza farki gozle secilmeyecek kadar kaliyor. */
.ypHeader .wrapper { width: min(calc(100% - 60px), 1600px); max-width: none; }
.ypBrand { display: flex; align-items: center; gap: 20px; }
/* flex: 0 0 auto + max-width: none ZORUNLU. Marka bloğu flex ogesi; varsayilan
   shrink ile dar ekranda YATAYDA EZILIYOR -- yukseklik 44 px kalirken genislik
   392 yerine 246 px'e dusuyordu (mobilde 302 yerine 117). Eski logo 2.6:1 oldugu
   icin ezilme fark edilmiyordu; yeni logo 8.9:1, aninda belli oluyor. */
.ypBrand a { display: block; flex: 0 0 auto; }
.ypBrand img { max-width: none; }
/* Tek BIRLESIK logo (Yilport + ayirici + CoreX ayni gorselde). Iki ayri logo yerine
   tek gorsel oldugu icin 52px'te marka bloğu yarı yarıya daralıyor ve "PORTS &
   TERMINALS" alt yazisi okunmaz hale geliyordu; 60px'te 157px genislige geliyor
   (76px'lik header'a ust/alt 8px bosluk kalir). Ayirici span'a artik gerek yok. */
/* Yeni birlesik logo 8.9:1 oraninda (eski 2.6:1). 60 px yukseklikte 534 px genislige
   ulasip menuyu sikistiriyordu; 44 px'te 392 px. Yukseklik geri buyutulecekse once
   1024-1300 px arasinda menu tasmasi olculmeli. */
.ypBrand img { height: 38px; width: auto; }
.ypNav { margin-left: auto; }
/* `flex-wrap: nowrap` + linklerde `white-space: nowrap` ZORUNLU. Aksi halde cok kelimeli
   etiketler KENDI ICINDE ikiye kiriliyor ("ABOUT / US", "PORTS & / TERMINALS") ve 76px'lik
   header'i tasiriyor. Kullanici bunu bildirdi.

   OLCUM (2026-08-02, 13.5px yazi + 22px oluk ile, tek satirin gerektirdigi viewport):
       en 1382 · pt 1435 · es 1541 · tr 1550 piksel
   Yani 1440'lik bir ekranda TR ve ES hicbir zaman sigmiyordu, EN de 1366'da sigmiyordu --
   ama drawer esigi 1180'di, yani sigmadigi 200-370 piksellik bant boyunca menu kiriliyordu.
   Turkce icin 34px oluk HICBIR cozunurlukte yetmiyor (1516px'te bile en cok ~17px'e yer var).
   Cozum: oluk + yazi boyu + harf araligi kademeli daraliyor, ve sigmanin bittigi yerde
   (1300px) hamburger devreye giriyor. Kademeler asagida, hepsi olcumle dogrulandi. */
.ypNav ul { display: flex; align-items: center; flex-wrap: nowrap; gap: 13px; }
/* MENU SABLONU HER OGEDEN ONCE BOS BIR <li> BASIYOR (9 gercek oge, 18 li).
   Bos olanlar 0 px genisliginde ama HER BIRI BIR FLEX OLUGU tuketiyor:
   9 x 15 px = 135 px gorunmez alan. Turkce menunun tasmasinin buyuk parcasi
   buydu. Sablonu degistirmek yerine burada dusuruluyor -- :empty yalnizca
   cocugu VE metni olmayan ogeye uyar, gercek ogelere dokunmaz. */
.ypNav ul li:empty { display: none; }
.ypNav ul li a {
    color: var(--menu); font-size: 12.5px; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; padding: 8px 0; display: block; position: relative;
    white-space: nowrap;
}
.ypNav ul li a::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
    height: 2px; background: var(--blue); transition: right .18s ease;
}
.ypNav ul li a:hover::after, .ypNav ul li.selectedItem a::after { right: 0; }
/* ---------- dil secici ----------
   Iskelet surumunde yalniz .ypLang (hap gorunumu) vardi; .ypLangToggle ve .ypLangMenu
   icin HIC kural yoktu, o yuzden <ul> surekli acik duruyor ve header'in uzerine
   biniyordu. Menu artik konumlandirilmis ve varsayilan olarak KAPALI. */
/* align-self: stretch ZORUNLU. Aksi halde .ypLang yalnizca hapin yuksekligi kadar
   oluyor ve "top: calc(100% + 8px)" menuyu 58px'e koyuyor -- header 76px oldugu icin
   menu NAV'IN UZERINE biniyor (kullanici bunu bildirdi). Stretch ile .ypLang header
   yuksekligini kapliyor, 100% = header alti. */
.ypLang { position: relative; align-self: stretch; display: flex; align-items: center; }
.ypLangToggle {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--primary); color: #fff; border: 0; border-radius: 8px;
    padding: 9px 12px; font-size: 12px; font-weight: 700; line-height: 1;
    transition: background .16s ease;
}
.ypLangToggle:hover, .ypLang.isOpen .ypLangToggle { background: #24439c; }
.ypLangToggle:focus-visible { outline: 2px solid var(--skylight); outline-offset: 2px; }
.ypLangCurrent { letter-spacing: .04em; }
/* Oku acikken cevir: durumun tek gorsel isareti hover olmasin. */
.ypLangToggle svg:last-child { transition: transform .18s ease; }
.ypLang.isOpen .ypLangToggle svg:last-child { transform: rotate(180deg); }

.ypLangMenu {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 60;
    min-width: 168px; padding: 6px;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
    /* Kapaliyken display:none DEGIL: gecis animasyonu icin gorunurluk kullaniliyor,
       ama visibility de kapatiliyor ki klavye ile ulasilamasin. */
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.ypLang.isOpen .ypLangMenu { opacity: 1; visibility: visible; transform: none; }
.ypLangMenu a {
    display: block; padding: 9px 12px; border-radius: 7px;
    font-size: 13px; font-weight: 600; color: var(--slate); white-space: nowrap;
}
.ypLangMenu a:hover { background: var(--bg-tint); color: var(--primary); }
.ypLangMenu a:focus-visible { outline: 2px solid var(--skylight); outline-offset: -2px; }
.ypLangMenu a.isCurrent { background: var(--primary); color: #fff; }
/* Cevirisi OLMAYAN dil: gizlenmiyor, ziyaretci gorup secebiliyor (kaynak kulture
   dusecek) ama beklentiyi dogru kurmak icin soluk ve isaretli. */
.ypLangMenu a.noTranslation { color: var(--text); opacity: .62; }
.ypLangMenu a.noTranslation::after {
    content: "EN"; float: right; margin-left: 10px;
    font-size: 10px; font-weight: 800; letter-spacing: .06em;
    color: var(--text); opacity: .8;
}
.mobileMenuButton { display: none; color: var(--menu); font-weight: 800; font-size: 14px; align-items: center; gap: 8px; background: none; border: 0; }

/* ---------- sosyal yan bar ----------
   position:fixed oldugu icin sayfanin SOL 46px'ini kapatir. .wrapper ise
   `min(--wrap, 100vw - 60px)` genisliginde ortalanir; yani 100vw <= 1460px iken
   icerigin sol kenari 30px'te kalir ve bar metnin/hero baslik kutusunun UZERINE biner.
   Bar ancak oluk (gutter) 46px + 12px bosluga yetince gosterilir:
   (100vw - 1400) / 2 >= 58  ->  100vw >= 1516px. Altinda gizli. */
.ypSideBar { position: fixed; left: 0; top: 32%; z-index: 90; display: none; }
.ypSideBar a {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; background: var(--sky); color: #fff; margin: 0 0 2px 0;
    border-radius: 0 2px 2px 0;
}
.ypSideBar a:hover { background: var(--primary); }

/* ---------- flow (FlowPart) ---------- */
.flow { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 28px; align-items: stretch; }
.flow > * { width: 100%; }
.flow > .ypBox { width: auto; }

/* ---------- ana slider (HeroSlider) ---------- */
.ypHero { position: relative; overflow: hidden; }
.ypHero .slide { display: none; position: relative; min-height: clamp(480px, 54vw, 820px); }
.ypHero .slide.active { display: block; }
.ypHero .slideBg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ypHero .slideBg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(234, 243, 252, .92) 0%, rgba(234, 243, 252, .55) 34%, rgba(234, 243, 252, 0) 62%);
}
.ypHero .wrapper { height: 100%; }
.ypHeroContent { position: relative; z-index: 2; padding: clamp(60px, 9vw, 130px) 0 90px; max-width: 720px; }
/* Tek kolonlu grid: kolon en genis satira gore olculur, tum satirlar ayni genislige gelir
   (merdiven gorunumu kalkar). em tabanli padding her clamp degerinde ayni orani korur. */
.ypHeroTitle {
    display: grid;
    grid-template-columns: minmax(0, max-content);
    max-width: 100%;
    margin: 0 0 0 -.22em;
    font-size: clamp(26px, 4vw, 56px);
    font-weight: 800; line-height: 1.04; color: #14305e;
    letter-spacing: .01em; text-transform: uppercase;
}
.ypHeroTitle span {
    display: block; width: 100%;
    background: rgba(214, 233, 248, .82);
    padding: .14em .5em .14em .22em;
    margin: 0;
    overflow-wrap: normal; hyphens: none;
}
.ypHeroSub { font-size: 17px; font-weight: 500; color: #1b2c53; line-height: 1.55; margin: 26px 0 0 0; max-width: 430px; }
.ypHeroBtn { margin: 34px 0 0 0; }
.ypHeroBadge {
    position: absolute; right: 40px; bottom: 30px; z-index: 3;
    background: var(--primary); color: #fff; padding: 10px 20px;
    font-size: 13px; letter-spacing: .14em; font-weight: 400; text-transform: uppercase;
}
.ypHeroBadge strong { font-weight: 800; }
.ypHeroDots {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 3;
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
    max-width: min(760px, calc(100% - 140px));
}
.ypHeroDots span { width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: .6; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: background .15s ease, opacity .15s ease; }
.ypHeroDots span:hover { opacity: .9; }
.ypHeroDots span.active { background: var(--blue); opacity: 1; }
.ypHeroDots.compact { gap: 6px; }
.ypHeroDots.compact span { width: 8px; height: 8px; }

/* ---------- terminal secici + harita ---------- */
.ypMapSec { background: #f2f7fc; padding: 26px 0 0 0; position: relative; }
.ypMapCard {
    background: #fff; border-radius: 10px; box-shadow: var(--shadow);
    padding: 24px 34px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    position: relative; z-index: 5;
}
.ypMapCard h2 { font-size: 26px; font-weight: 800; color: #1e3fa8; line-height: 1.1; max-width: 175px; }
.ypMapSearch { position: relative; flex: 1 1 260px; }
.ypMapSearch input {
    width: 100%; height: 48px; border: 1px solid #d9e2f0; border-radius: 4px;
    font-family: inherit; font-size: 14px; color: var(--slate); padding: 0 44px 0 16px; outline: none;
}
.ypMapSearch input:focus { border-color: var(--blue); }
.ypMapSearch svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #33415e; pointer-events: none; }
.ypMapSelect { flex: 1 1 220px; position: relative; }
.ypMapSelect select {
    width: 100%; height: 48px; border: 1px solid #d9e2f0; border-radius: 4px; background: #fff;
    font-family: inherit; font-size: 14px; color: var(--slate); padding: 0 40px 0 14px;
    appearance: none; -webkit-appearance: none; outline: none;
}
.ypMapSelect svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #33415e; pointer-events: none; }
/* Z-INDEX: 0 SILINMEZ -- YIGIN BAGLAMI ACIYOR.
   Leaflet kendi panellerine z-index 400, denetimlerine 800 veriyor. Bu sarmalayici
   konumlandirilmis olup da z-index ALMAZSA yigin baglami acmaz; o 400/800 degerleri
   dogrudan .ypMapCard'in z-index: 5'ine karsi yarisir ve harita arama kartinin
   USTUNE biner (baslik yarisindan kesilir). z-index: 0 ile Leaflet'in tum
   siralamasi bu kutunun icinde kalir, kart yine ustte olur.
   Gec fark edildi cunku harita kutuya SIGDIRILIRKEN gorsel tepeden 87px asagida
   basliyordu ve karta hic degmiyordu; KAPLAMA oturtmasina gecince gorsel kutunun
   tepesine dayandi ve sorun ortaya cikti. */
.ypMapCanvasWrap { position: relative; margin-top: -46px; z-index: 0; }
/* ---- dunya haritasi: Leaflet ---------------------------------------------
   Eski .ypMapCanvas duzeni (arka plan gorseli + yuzdeyle konumlanan dugmeler)
   yerini Leaflet'e birakti. O kurallar artik hicbir sey secmiyor ama SILINMEDI:
   .ypMapCanvas hala terminal sayfalarindaki eski duzende kullanilmiyor olsa da,
   kurallari birakmak geri donusu tek satira indiriyor.
   YUKSEKLIK SART: Leaflet kutuyu kendi olcuyor, yukseklik verilmezse 0 kalir ve
   harita hic gorunmez -- en sik yapilan hata budur. */
/* OLCU ESKI SITEDEN: oradaki #map_canvas 680px yuksekti. */
/* ZEMIN = HARITANIN DENIZ RENGI. Kutu haritadan genis kaldiginda (ornegin cok
   genis ekranda) kenarda farkli renkte bir serit gorunmesin. */
.ypLeafletWorld { width: 100%; height: 680px; background: #f2f7fc; }
.ypLeafletWorld .leaflet-container { background: #f2f7fc; }
/* MOBILDE SABIT YUKSEKLIK OLMAZ. Kutu KAPLAMA ile oturdugu icin dar ve yuksek
   bir kutuda dunyanin yalniz dar bir dilimi gorunur: 375x440'ta genisligin ancak
   %42'si. Yukseklik genislikle birlikte kuculunce kutu 2:1'e yaklasiyor, yani
   haritanin dogal orani -- hem serit kalmiyor hem dunyanin neredeyse tamami
   goruluyor. min-height cok dar telefonlarda haritayi seride cevirmesin diye. */
@media (max-width: 760px) { .ypLeafletWorld { height: 50vw; min-height: 240px; } }

/* ISARETCI: divIcon, Leaflet'in varsayilan PNG'si degil. Boylece efsanedeki
   renk kodu (marine/inland/dry) ayni CSS degiskenlerinden besleniyor. */
/* ISARETCI OLCUSU ESKI SITEDEN: oradaki pin 15x15 duz bir daireydi (#DD1B3D).
   Olcu ve bicim alindi; RENK KODU KORUNDU cunku efsane (Marine/Inland/Dry) ona
   bagli -- tek renge dusurmek efsaneyi anlamsiz kilardi.
   Beyaz kenar bej/mavi altlikta okunurlugu ayakta tutuyor. */
.ypLMarker i { display: block; width: 11px; height: 11px; border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 1px 3px rgba(8, 20, 40, .5); }
.ypLMarker.marine i { background: var(--primary); }
.ypLMarker.inland i { background: #4aa3df; }
.ypLMarker.dry i { background: #e4572e; }

/* BALON: site tipografisiyle uyumlu olsun diye Leaflet'in varsayilani eziliyor. */
.ypLPop .leaflet-popup-content { margin: 14px 16px; font-size: 14px; }
.ypLPop .leaflet-popup-content strong { display: block; font-size: 16px; font-weight: 800;
    color: var(--navy); margin-bottom: 10px; }
.ypLPop .leaflet-popup-content a { display: block; font-weight: 700; color: var(--blue);
    padding: 7px 0; border-top: 1px solid var(--line); }
.ypLPop .leaflet-popup-content a:hover { text-decoration: underline; }

/* ATIF GORUNUR KALMALI: OSM verisi ODbL, kaynak gosterimi zorunlu. */
.ypLeafletWorld .leaflet-control-attribution { font-size: 10.5px; background: rgba(255,255,255,.82); }
.ypLeafletWorld .leaflet-control-attribution a { color: var(--blue); }

/* Katman dugmeleri haritanin USTUNDE kalmali: Leaflet kendi katmanlarini
   z-index 400-700 araliginda kuruyor. */
/* CAKISMA: Leaflet yakinlastirma denetimini SOL USTE koyuyor, Harita/Uydu
   dugmeleri de oradaydi (top:66 left:20) -- tam ust uste bindiler. Ilk denemede
   Leaflet denetimini asagi almak YETMEDI, ikisi ayni yukseklige dustu.
   Cozum: dugmeleri denetimin SAGINA almak. 34px genislik + 10px kenar + bosluk. */
.ypMapCanvasWrap .ypMapChips { left: 58px; z-index: 500; }
/* ZOOM DENETIMI CIPLERLE AYNI HIZAYA. Harita sarmalayicisi arama kartinin altina
   46px giriyor; Leaflet denetimi varsayilan olarak kutunun en tepesine oturdugu
   icin kartin ARKASINDA kaliyor ve yakinlastirma dugmesine tiklanamiyor.
   (Onceden ustte goruluyordu, cunku denetim z-index 800 ile karti eziyordu; o
   ezme .ypMapCanvasWrap'a yigin baglami verilince -- dogru olarak -- bitti.)
   Leaflet denetime 10px kenar bosluk ekler: 56 + 10 = 66, ciplerle ayni satir. */
/* CTRL IPUCU: duz tekerlekle kaydirinca kisa sure gorunur. pointer-events: none
   SART -- kutunun ortasinda duruyor, tiklamayi veya suruklemeyi yutmamali.
   z-index Leaflet denetimlerinin (800) uzerinde, yoksa altlarinda kalir. */
.ypMapIpucu {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(16, 28, 54, .45); color: #fff; font-size: 15px; font-weight: 600;
    text-align: center; padding: 0 24px; pointer-events: none; z-index: 900;
    opacity: 0; transition: opacity .18s ease;
}
.ypMapIpucu.acik { opacity: 1; }

.ypLeafletWorld .leaflet-top { top: 56px; }
.ypLeafletWorld .leaflet-left { left: 8px; }
.ypMapCanvasWrap .ypMapLegend { position: relative; z-index: 500; }

/* Equirectangular SVG (viewBox 1000x500 = 2:1). Kutu da 2:1 tutulur ve gorsel
   `contain` ile tam sigar; boylece marker yuzdeleri = gercek lat/lon karsiligi.
   `cover` kullanilirsa gorsel kirpilir ve isaretciler cografi olarak kayar. */
/* VIEWPORT yakinlastirmanin tasan kismini kirpar. Efsane ve liste DISINDA kalir. */
.ypMapViewport { position: relative; overflow: hidden; touch-action: pan-y; }
/* TOUCH-ACTION 1x'TE "PAN-Y": sabit "none" iken telefonda harita uzerinde parmakla
   sayfa kaydirilamiyordu, ziyaretci haritada kaliyordu. Surukleme yalnizca
   yakinlasmisken anlamli oldugu icin "none" da yalnizca o zaman veriliyor
   (.ypYakin sinifini yilport.js takiyor). */
.ypMapViewport.ypYakin { touch-action: none; }
.ypMapCanvas {
    position: relative;
    aspect-ratio: 2 / 1;
    /* 560 -> 760: olcek buyudukce cakisan terminal sayisi dusuyor. 1440px'lik bir
       ekranda harita 1120px yerine 1440px genisligine cikiyor, yani 1 derece boylam
       3.1px yerine 4px. */
    max-height: 760px;
    margin: 0 auto;
    background: #f2f7fc url(../images/map/world-land.svg) center / contain no-repeat;
    /* HARITA KAYNAKLARI -- ikisi de KAMU MALI, atif zorunlu degil:
       world-land.svg            Natural Earth 1:50m land (naturalearthdata.com).
                               GeoJSON'dan uretildi, Douglas-Peucker ile 0.3 px
                               toleransla sadelestirildi, 0.4 px2 altindaki adalar atildi.
       world-satellite-nasa.jpg NASA Blue Marble Next Generation (visibleearth.nasa.gov),
                               world.topo.bathy.200412 5400x2700 -> 2240x1120.
       ONCEKI DOSYALAR DEGISTIRILDI (world.svg / world-satellite.jpg): uydu goruntusunun
       kaynagi belirsizdi (2240x1120 standart bir dagitim boyutu degil, EXIF silinmis),
       bir harita servisinden alinmis olma ihtimali vardi.
       PROJEKSIYON DEGISEMEZ: pin konumlari equirectangular 2:1 varsayiyor
       (lon = x/100*360-180, lat = 90-y/100*180). Mercator bir gorsel konulursa
       25 terminalin hepsi kayar.
       DOSYA ADLARI BILEREK DEGISTI: ayni adla degistirseydik eski gorseli onbellekte
       tutan ziyaretci yeni haritayi gormezdi -- CSS surumu gorsel adresini etkilemiyor. */
    /* YAKINLASTIRMA transform:scale ILE YAPILMIYOR -- BILEREK.
       scale() altinda tarayici SVG'yi 1x boyutta rasterleyip buyutuyor, yani
       yakinlastikca GORUNTU BULANIKLASIYOR (kullanici bildirdi). Onun yerine JS
       kutunun GERCEK genisligini buyutuyor; background-size:contain SVG'yi yeni
       boyutta yeniden ciziyor ve goruntu her olcekte net kaliyor.
       transform yalnizca KAYDIRMA icin (translate bulaniklastirmaz). */
    transform-origin: 0 0;
    will-change: transform;
}
.ypMapCanvas.ypSuruklenir { cursor: grab; }
.ypMapCanvas.ypSurukleniyor { cursor: grabbing; }

/* ZOOM DUGMELERI */
.ypMapZoom { position: absolute; right: 18px; bottom: 18px; display: flex; flex-direction: column;
             gap: 1px; z-index: 6; box-shadow: 0 2px 8px rgba(23,64,133,.18); border-radius: 4px; overflow: hidden; }
.ypMapZoom button { width: 32px; height: 32px; border: 0; background: #fff; color: #1b3585;
                    font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1;
                    cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ypMapZoom button:hover { background: var(--primary); color: #fff; }

/* SECILI TERMINAL BALONU */
.ypMapPop { position: absolute; z-index: 8; min-width: 190px; background: #fff; border-radius: 5px;
            box-shadow: 0 6px 20px rgba(16,32,62,.24); padding: 11px 13px 9px;
            transform: translate(-50%, calc(-100% - 14px)); }
.ypMapPop::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px;
                   background: #fff; transform: translateX(-50%) rotate(45deg); }
/* Ust kenara yakin isaretcide balon ASAGI acilir, yoksa harita disina tasar. */
.ypMapPop.ypAlta { transform: translate(-50%, 14px); }
.ypMapPop.ypAlta::after { bottom: auto; top: -6px; }
.ypMapPopName { display: block; font-size: 13px; font-weight: 800; color: #10203e; margin: 0 0 8px 0; }
.ypMapPop a { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
              color: var(--blue); padding: 4px 0; text-decoration: none; }
.ypMapPop a:hover { color: var(--primary); }
.ypMapPop a + a { border-top: 1px solid var(--line); margin-top: 2px; padding-top: 6px; }
.ypMapChips { position: absolute; top: 66px; left: 20px; display: flex; box-shadow: 0 2px 8px rgba(23,64,133,.18); border-radius: 4px; overflow: hidden; z-index: 4; }
/* span DEGIL button: bkz. Widget-TerminalSelector.cshtml. Tarayici varsayilanlarini
   (kenarlik, font) sifirlamak gerekiyor, yoksa dugmeler chip gibi gorunmuyor. */
.ypMapChips button { padding: 9px 16px; font-size: 12.5px; font-weight: 600; background: #fff; color: #55606f; border: 0; font-family: inherit; cursor: pointer; }
.ypMapChips button:hover { color: var(--primary); }
.ypMapChips button.active { background: var(--primary); color: #fff; font-weight: 700; }

/* UYDU KATMANI. Ayni equirectangular 2:1 projeksiyon (NASA Blue Marble, kamu mali),
   bu yuzden `contain` ile tam oturuyor ve ISARETCI YUZDELERI AYNEN GECERLI kaliyor --
   baska bir projeksiyon secilse noktalar cografi olarak kayardi.
   Zemin rengi de koyulasiyor: acik #f2f7fc, goruntunun kenarinda serit gibi duruyordu. */
.ypMapCanvas.satellite { background-color: #0a1626; background-image: url(../images/map/world-satellite-nasa.jpg); }
/* TERS OLCEGE GEREK YOK: yakinlastirma kutunun gercek genisligini buyutuyor,
   isaretciler yuzdeyle konumlandigi icin dogru yere kayiyor ama kendi boyutlari
   degismiyor. (transform:scale ile yapilsaydi noktalar da buyurdu.) */
.ypMarker { position: absolute; transform: translate(-50%, -50%);
            z-index: 3; display: block; border: 0; background: none; padding: 0;
            cursor: pointer; font-family: inherit; }
.ypMarker i {
    /* 15 -> 9px: 15px'lik bir nokta bu haritada 4.8 DERECE boylam kapliyordu --
       Portekiz'den genis. 9px ile 2.2 dereceye iniyor ve komsu limanlar birbirini
       ezmeden yan yana durabiliyor. */
    display: block; width: 9px; height: 9px; border-radius: 50%;
    border: 2px solid var(--blue); background: #fff; position: relative;
    transition: transform .12s ease;
}
.ypMarker.marine i::after {
    content: ""; position: absolute; inset: 1.5px; border-radius: 50%; background: var(--blue);
}
.ypMarker.inland i { border-color: #5ab1f5; }
.ypMarker.dry i { border-color: #7a2fc0; width: 10px; height: 10px; }
.ypMarker:hover i { transform: scale(1.25); }
/* Tiklama kolayligi. Nokta 15px; gorunumu buyutmeden hedefi ~21px yapiyoruz.
   -3px'ten fazlasi ISE YARAMAZ: JS cakisan isaretcileri 26px araliga aciyor
   (bkz. yilport.js "ust uste binen isaretcileri ac"), daha genis bir hedef o
   araligi yeniden ortusturur ve cozdugumuz sorunu geri getirirdi. */
.ypMarker::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
/* Ustune gelinen isaretci one cikar: yakin duranlarda etiket ve nokta alttakinin
   arkasinda kaliyordu. */
.ypMarker:hover { z-index: 9; }
.ypMarker b {
    position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%);
    background: var(--primary); color: #fff; font-size: 11.5px; font-weight: 700;
    padding: 5px 10px; border-radius: 3px; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity .12s ease;
}
.ypMarker:hover b { opacity: 1; }
.ypMapLegend { display: flex; justify-content: center; align-items: center; gap: 64px; padding: 18px 0 20px; background: #f7fafd; flex-wrap: wrap; }
.ypMapLegend span { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #33415e; }
.ypMapLegend i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--blue); position: relative; }
.ypMapLegend .marine i::after { content: ""; position: absolute; inset: 1.5px; border-radius: 50%; background: var(--blue); }
.ypMapLegend .inland i { border-color: #5ab1f5; }
.ypMapLegend .dry i { border-color: #7a2fc0; }
.ypMapList { display: none; background: #fff; border-top: 1px solid var(--line); padding: 26px 0; }
.ypMapList.open { display: block; }
.ypMapList ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 28px; }
.ypMapList a { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--navy); padding: 8px 10px; border-radius: 4px; }
.ypMapList a:hover { background: var(--bg-tint); color: var(--blue); }
.ypMapList small { color: #8a94a6; font-weight: 500; }

/* ---------- key figures ---------- */
.ypKf { padding: 64px 0 70px; }
.ypKf h2 { text-align: center; font-size: 26px; font-weight: 800; color: var(--blue); letter-spacing: .02em; margin: 0 0 46px 0; }
.ypKfGrid { display: grid; grid-template-columns: repeat(4, 1fr); }
.ypKfItem { padding: 0 36px; border-left: 1px solid #e5eaf2; }
.ypKfItem:first-child { border-left: 0; }
.ypKfIcon { display: flex; justify-content: center; color: #4776c9; margin: 0 0 20px 0; }
.ypKfLabel {
    text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
    color: var(--slate); line-height: 1.45; min-height: 58px;
    display: flex; align-items: flex-start; justify-content: center;
}
.ypKfRows { margin: 22px 0 0 0; }
.ypKfRow { display: flex; gap: 22px; align-items: baseline; margin: 0 0 16px 0; }
.ypKfRow .y { font-size: 15px; font-weight: 800; color: var(--navy); min-width: 66px; }
.ypKfRow .v { font-size: 15px; font-weight: 800; color: var(--blue); }
.ypKfRow.target .y, .ypKfRow.target .v { color: var(--purple); }
.ypKfRow sup { font-size: 10px; }

/* ---------- bolge slideri (ExploreSlider) ---------- */
.ypRegion { position: relative; overflow: hidden; }
/* KUTU GORSELIN ORANINDA. Onceki hali `min-height: 340px` idi: 1425px genislikte kutu
   4.19 oranina cikiyordu, oysa bolge gorselleri 1920x860 yani 2.23. `cover` aradaki farki
   kapatmak icin yuksekligin yaklasik yarisini kirpiyordu -- gorselin ust ve alt bandi hic
   gorunmuyordu.
   1920/860 kaynaktaki bes gorselin ORTAK orani (mediterranean 1980x860 ile cok yakin).
   min-height dar ekranlarda taban olarak kaliyor. */
/* SLIDER YUKSEKLIGINI TASARIM BELIRLER, GORSEL DEGIL. aspect-ratio: 1920/860 denendi ve
   geri alindi -- genis ekranda kutuyu 840px'e cikariyor, ekrani kaplayan bir kapak gorseli
   uretiyor. Gorsel .slideBg uzerinde background-size: cover ile bu kutuya sigar, tasan
   kirpilir; boylece butun slaytlar ayni yukseklikte kalir. */
.ypRegion .slide { display: none; position: relative; min-height: 340px; height: 44vw; max-height: 560px; }
.ypRegion .slide.active { display: block; }
.ypRegion .slideBg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ypRegion .slideBg::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(244, 249, 253, .88) 0%, rgba(244, 249, 253, .35) 34%, rgba(244, 249, 253, 0) 60%);
}
.ypRegionHead { position: absolute; top: 34px; left: 0; width: 100%; z-index: 2; }
.ypRegionTitle { float: left; color: var(--navy); font-size: 27px; line-height: 1.2; letter-spacing: .04em; }
.ypRegionTitle strong { display: block; font-weight: 800; letter-spacing: .06em; }
.ypRegionCap { float: right; text-align: right; }
.ypRegionCap i { display: block; font-style: normal; font-size: 18px; font-weight: 500; color: #1d3e8a; margin: 0 0 6px 0; }
.ypRegionCap h3 { font-size: 30px; font-weight: 800; color: #16357f; letter-spacing: .01em; }
/* Slogan iki satira bolunmusse alt alta dizilir. span KULLANILIYOR, <br> degil:
   sablon Yp.Lines ile bolup her satiri ayri span basiyor (hero slider ile ayni
   desen) ve boylece metin HTML olarak degil, duz metin olarak kodlaniyor. */
.ypRegionCap h3 span { display: block; }
.ypRegionCap .btnSolid { margin: 22px 0 0 0; font-size: 14px; letter-spacing: .02em; }
.ypRegionNav { position: absolute; bottom: 40px; left: 0; width: 100%; z-index: 2; }
.ypRegionNav button {
    width: 44px; height: 44px; border: 0; border-radius: 4px; background: var(--primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; margin: 0 10px 0 0;
}
.ypRegionNav button:hover { background: #24439c; }

/* ---------- degerler (ValuesSection) ---------- */
.ypValues { display: flex; align-items: stretch; background: #fff; }
.ypValuesPhoto { flex: 0 0 37%; background-size: cover; background-position: center top; position: relative; min-height: 320px; }
.ypValuesPhoto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,0) 55%, #fff 98%); }
.ypValuesBody { flex: 1; padding: 44px 0 48px 50px; }
.ypValuesBody .wrapper { width: auto; max-width: none; margin: 0 !important; padding-right: max(30px, calc((100vw - var(--wrap)) / 2)); }
.ypValuesCap { font-size: 15px; font-weight: 800; letter-spacing: .04em; color: #0f6fe0; text-transform: uppercase; margin: 0 0 26px 0; }
.ypValuesGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.ypValuesGrid > div { border-left: 1px solid #e5eaf2; padding-left: 32px; display: flex; flex-direction: column; }
.ypValuesGrid > div:first-child { border-left: 0; padding-left: 0; }
.ypValuesGrid h3 { font-size: 20px; font-weight: 800; color: #1b2430; margin: 0 0 14px 0; }
.ypValuesGrid p { font-size: 13.5px; line-height: 1.7; color: var(--text); margin: 0 0 20px 0; }
.ypValuesGrid .btnMore { margin-top: auto; align-self: flex-start; }

/* ---------- gorsel banner (ImageBanner) ---------- */
.ypTile { position: relative; border-radius: var(--radius); overflow: hidden; margin: 30px 0; min-height: 250px; display: block; }
.ypTile img, .ypTileBg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
.ypTileChip {
    position: absolute; top: 18px; left: 18px; z-index: 2;
    background: rgba(255, 255, 255, .95); color: var(--navy);
    font-size: 14px; font-weight: 700; padding: 9px 16px; border-radius: 4px;
    box-shadow: 0 3px 10px rgba(23, 64, 133, .18);
}

/* ---------- geri bildirim paneli (FeedbackPanel) ---------- */
.ypFeedback { background: var(--panel); border-radius: var(--radius); margin: 30px 0; padding: 8px 30px; display: flex; flex-direction: column; justify-content: center; min-height: 250px; }
.ypFeedback a { display: flex; align-items: center; gap: 18px; color: #fff; padding: 26px 0; }
.ypFeedback a + a { border-top: 1px solid rgba(255, 255, 255, .4); }
.ypFeedback .fIcon { flex: none; color: #fff; }
.ypFeedback .fText { font-size: 15.5px; font-weight: 700; line-height: 1.35; }
.ypFeedback .fArrow { margin-left: auto; color: #fff; }
.ypFeedback a:hover { opacity: .92; }

/* ---------- haberler (NewsList) ---------- */
.ypNews { padding: 26px 0 60px; }
.ypNews h2 { font-size: 24px; font-weight: 800; color: #1b2430; margin: 0 0 24px 0; }
.ypNewsRow { display: flex; gap: 28px; align-items: center; }
.ypNewsCards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; flex: 1; }
.ypNewsItem { display: block; }
/* SABIT ORAN, sabit yukseklik degil. Onceki hali `height: 92px` idi: kart genisligi
   381px oldugunda kutu 4.14 oranina cikiyordu, oysa haber gorselleri 1.74 oraninda.
   `cover` aradaki farki kapatmak icin yuksekligin dortte ucunu kirpiyor ve geriye
   taninmayan bir serit kaliyordu. 16/9 kaynagin oranina yakin; ayni gorsel newsroom
   kartlarinda da 16/9 ile duruyor, iki yer artik ayni cerceveyi kullaniyor. */
.ypNewsItem .img { aspect-ratio: 16 / 9; border-radius: 6px; background-size: cover; background-position: center; }
.ypNewsItem h3 { font-size: 14.5px; font-weight: 700; color: #1b2430; line-height: 1.45; margin: 12px 0 0 0; }
.ypNewsItem time { display: block; font-size: 12.5px; color: #8a94a6; margin: 7px 0 0 0; }
.ypNewsItem:hover h3 { color: var(--blue); }
.ypNewsAll { flex: none; }

/* ==========================================================================
   Terminal sayfasi bilesenleri
   ========================================================================== */

/* ---------- terminal hero ---------- */
.tHero { display: grid; grid-template-columns: 47% 53%; background: linear-gradient(115deg, #eaf3fc 0%, #dce9f8 100%); min-height: 430px; }
.tHeroBody { display: flex; flex-direction: column; justify-content: center; padding: 70px 30px 60px max(30px, calc((100vw - var(--wrap)) / 2)); }
.tCrumb { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--indigo); margin: 0 0 22px 0; }
.tCrumb .sep { color: #8a94a6; padding: 0 10px; font-weight: 400; }
.tCrumb a { border-bottom: 1px solid transparent; transition: border-color .15s ease; }
.tCrumb a:hover { border-bottom-color: currentColor; }
.tCrumb .c2 { color: #6d6af0; }
.tHeroTitle { font-size: clamp(44px, 5vw, 74px); font-weight: 800; letter-spacing: .01em; color: #131a33; line-height: 1; text-transform: uppercase; }
.tHeroBlock { width: min(420px, 90%); height: 36px; background: rgba(214, 231, 247, .9); margin: 14px 0 0 -16px; }
.tHeroRule { width: 48px; height: 4px; border-radius: 2px; background: #5a2bd0; margin: 26px 0; }
.tHeroTag { font-size: 18px; font-weight: 600; color: #1e2a4a; }
.tHeroMeta { display: flex; align-items: center; gap: 34px; margin: 26px 0 0 0; flex-wrap: wrap; }
.tHeroLoc { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 500; color: #333f55; }
.tHeroLoc svg { color: var(--navy); }
.tHeroMap { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--indigo); }
.tHeroMap:hover { color: #2d2bc4; }
.tHeroImg { background-size: cover; background-position: center; min-height: 320px; }

/* ---------- stat kartlari (StatStrip) ---------- */
.tStats { position: relative; margin-top: -44px; margin-bottom: 34px; z-index: 5; }
.tStatsCard { background: #fff; border-radius: 12px; box-shadow: var(--shadow); padding: 16px; }
.tStatsRow { display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.tStatsRow::-webkit-scrollbar { display: none; }
/* Kartlar bos alani PAYLASIR. Onceden `flex: 0 0 172px` idi: dort kart 172'ser piksel
   kalip genis ekranda beyaz panelin sagini bos birakiyordu. Simdi 172px TABAN genislik,
   fazlasi esit dagitiliyor.
   min-width TABANI KORUYOR: cok sayida istatistik oldugunda kartlar okunamayacak kadar
   daralmak yerine satiri tasiriyor ve yatay kaydirma (oklar) devreye giriyor. */
.tStat {
    flex: 1 1 172px; min-width: 172px;
    border: 1px solid #e5eaf2; border-radius: 8px; padding: 16px 14px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
}
/* min-height ikon boyuyla birlikte buyudu: 50px ikon 44px'lik satira sigmiyor,
   sigmayinca flex kutuyu tasiriyor ve kartlarin basligi kayiyordu. */
.tStatHead { display: flex; align-items: center; gap: 9px; color: #22337a; min-height: 50px; }
.tStatHead svg { color: #2f4da8; flex: none; }
/* PNG ikon yanindaki SVG ile AYNI 26px kutuda dursun. Sablon yalnizca width=26 veriyor;
   gorseller kare degil (94x68), o yuzden yukseklik 19px'e dusup baslikla hizasi kayiyordu.
   object-fit: contain -> oran korunur, kirpilmaz. flex:none -> daralan satirda ezilmez. */
/* Olcu BURADA belirleniyor; sablondaki width ozniteligi yalnizca CSS yuklenmeden
   onceki ani icin duruyor. Ikisini birlikte degistirmek sart -- sadece HTML'i
   degistirmek hicbir sey yapmiyor, cunku bu kural onu eziyor. */
.tStatHead img { width: 50px; height: 50px; flex: none; object-fit: contain; }
.tStatHead b { font-size: 10px; font-weight: 800; letter-spacing: .04em; line-height: 1.3; text-align: left; text-transform: uppercase; }
.tStat .v { font-size: 15px; font-weight: 800; color: #16223c; margin: 12px 0 0 0; }
.tStat .s { font-size: 11px; color: #7a879c; margin: 4px 0 0 0; }
.tArrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
    width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 6px;
    background: #fff; color: var(--navy); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px rgba(23, 64, 133, .12);
}
.tArrow.prev { left: -14px; }
.tArrow.next { right: -14px; }
/* `hidden` niteligi tek basina yetmiyor: yukaridaki `display: flex` tarayicinin
   varsayilan `[hidden] { display: none }` kuralini EZIYOR. Acikca geri aliniyor. */
.tArrow[hidden] { display: none; }
.tArrow:hover { color: var(--blue); border-color: #9dbbe8; }

/* ---------- overview ---------- */
.tOverview { display: grid; grid-template-columns: 44% 1fr; gap: 52px; padding: 40px 0 46px; }
/* Gorsel yoksa metin tum genisligi kullanir (bkz. Widget-OverviewSection.cshtml). */
.tOverview.noMedia { grid-template-columns: 1fr; }
.tOverview h2 { font-size: 26px; font-weight: 800; color: #10203e; line-height: 1.35; margin: 0 0 18px 0; }
.tOverview .body { font-size: 14px; line-height: 1.75; color: var(--text); }
.tOverview .body p { margin: 0 0 14px 0; }
/* Kaynak metin <strong> ve <ul>/<li> iceriyor (CFS, GENEL KARGO, BUYUME basliklari ve
   madde listeleri). Kural yazilmadiginda tarayici varsayilani devreye giriyor ve liste
   govdeden fazla iceri kaciyor. */
.tOverview .body strong { color: #10203e; }
.tOverview .body ul { margin: 0 0 14px 0; padding: 0 0 0 20px; }
.tOverview .body li { margin: 0 0 4px 0; }
.tOverview .btnOutline { margin: 24px 0 0 0; border-color: #c9d6f2; color: #22337a; border-radius: 6px; padding: 14px 24px; letter-spacing: .02em; font-size: 14px; text-transform: none; }

/* ---------- overview: 50 kelimeden sonrasi pop-up ---------- */
/* Metin sunucuda kesiliyor; buradaki dugme yalnizca pencereyi aciyor. Baglantı degil
   BUTON: bir yere gitmiyor, ayni sayfada bir katman aciyor. */
.tOvMore { display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 0; padding: 0; border: 0; background: none; color: #22337a; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.tOvMore:hover { color: #16223c; text-decoration: underline; }
.tOvMore svg { transition: transform .15s ease; }
.tOvMore:hover svg { transform: translateX(3px); }

.tOvModal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.tOvModal[hidden] { display: none; }
.tOvModalBack { position: absolute; inset: 0; background: rgba(13, 18, 51, .62); }
.tOvModalBox { position: relative; z-index: 1; width: min(820px, 100%); max-height: 86vh; overflow-y: auto; padding: 34px 38px 38px; border-radius: 12px; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }
.tOvModalClose { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #eef2fa; color: #22337a; font-size: 22px; line-height: 1; cursor: pointer; }
.tOvModalClose:hover { background: #dde5f6; }
.tOvModalText { margin: 14px 0 0; font-size: 14px; line-height: 1.75; color: var(--text); }
.tOvModalText p { margin: 0 0 14px 0; }
.tOvModalText strong { color: #10203e; }
.tOvModalText ul { margin: 0 0 14px 0; padding: 0 0 0 20px; }
.tOvModalText li { margin: 0 0 4px 0; }
/* Pencere acikken arka plan kaymasin. */
body.ypNoScroll { overflow: hidden; }
@media (max-width: 700px) {
    .tOvModalBox { padding: 30px 20px 26px; }
}
.tOverviewMedia { position: relative; max-height: 420px; }
/* YUKSEKLIK SINIRI. Kutu yanindaki METIN SUTUNUNA gore uzuyordu: terminal
   sayfalarinda 300px (min-height) kalirken /services'te metin uzun oldugu icin
   682px'e cikiyor ve KARE'ye yaklasiyordu. Slayt gorselleri ~2:1 panorama; kare bir
   kutuda cover, genisligin YARISINI atiyor. 420px ust sinirinda kutu 732x420 = 1.74:1,
   yani kapak gorselleriyle ayni orana yakin ve kirpma ihmal edilebilir hale geliyor.
   Metni kisa olan sayfalar etkilenmiyor, onlar zaten 300-420 arasinda. */
.tOverviewMedia .slide { display: none; height: 100%; min-height: 300px; border-radius: 12px; background-size: cover; background-position: center; }
/* PORTRE GORSEL GERCEK BOYUTUNDA: kaynak 540x720 (oran 0.75), kutu ise 623x420
   (1.48). Eskiden contain + 420px tavan yuzunden gorsel 315x420'ye kuculuyor ve
   iki yaninda genis bos serit kaliyordu. Referans (corexholding.com/yuksel-yildirim)
   gorseli dogal boyutuyla, ustten hizali gosteriyor.
   Tavan yalniz portre slayt varken kalkiyor; diger OverviewSection'lar 420px'de kalir.
   aspect-ratio kutuyu gorselin oranina kilitliyor, boylece contain'in birakacagi
   bosluk hic olusmuyor -- zemin rengine de gerek kalmiyor.
   SADECE forewords SAYFALARINDA: bu varyanti kullanan baska sayfa yok (about-us ve
   executives portre gorselleri .ypCardImage tarafinda, ayri kural). */
.tOverviewMedia:has(.slide.imgPortrait) { max-height: none; align-self: start; }
.tOverviewMedia .slide.imgPortrait { width: min(100%, 540px); height: auto; min-height: 0; aspect-ratio: 540 / 720; background-size: contain; background-repeat: no-repeat; background-position: center top; background-color: transparent; }
.tOverviewMedia .slide.imgContain { background-size: contain; background-repeat: no-repeat; background-position: center; background-color: #fff; }
/* TAMAMI GORUNSUN. Slogan/afis gorsellerinde kenarlarda yazi ve logo oluyor; cover
   kutuya sigdirmak icin yanlardan kesiyor ve metnin bir kismi kayboluyor. */
.tOverviewMedia .slide.active { display: block; }
.tOverviewMedia .tArrow.prev { left: -16px; }
.tOverviewMedia .tArrow.next { right: -16px; }

/* ---------- surdurulebilirlik temel basliklari (CardGrid "pillar" gorunumu) ---------- */
/* Kaynak sayfadaki duzen UC SATIR, uc sutun DEGIL: her satirda solda dikey ikon karti,
   sagda acik zeminde madde listesi. Izgara gorunumu kartlari yan yana dizdigi icin
   ayri bir kural seti gerekti; CardGrid'in kalan 84 kullanimi etkilenmiyor. */
.pillarRows { display: flex; flex-direction: column; gap: 26px; }
.pillarRow {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    border-radius: var(--radius);
    overflow: hidden;
}
/* Ikon beyaz zeminde kaliyor: gorselin kendi fonu beyaz, lavanta seride oturtulursa
   cevresinde gorunur bir kutu olusuyor. */
.pillarIcon {
    background: #fff;
    border: 1px solid var(--line);
    border-right: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 18px 14px;
}
.pillarIcon img { display: block; width: 100%; max-width: 132px; height: auto; }
.pillarBody {
    background: #eef0fb;
    border: 1px solid var(--line);
    border-left: 0;
    padding: 24px 28px;
    display: flex; flex-direction: column; justify-content: center;
}
.pillarBody ul { margin: 0; padding-left: 20px; }
.pillarBody li { font-size: 14.5px; line-height: 1.7; color: var(--text); margin: 0 0 14px 0; }
.pillarBody li:last-child { margin-bottom: 0; }
.pillarBody p { margin: 0 0 12px 0; font-size: 14.5px; line-height: 1.7; }
.pillarBody p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
    /* Dar ekranda ikon ustte: 190px sabit sutun telefonda metne yer birakmiyor. */
    .pillarRow { grid-template-columns: 1fr; }
    .pillarIcon { border-right: 1px solid var(--line); border-bottom: 0; padding: 16px; }
    .pillarIcon img { max-width: 108px; }
    .pillarBody { border-left: 1px solid var(--line); padding: 20px; }
}

/* ---------- hava durumu ---------- */
.tWeather { background: var(--skylight); border-radius: var(--radius); padding: 22px 20px; color: #fff; margin: 8px 0 40px; }
.tWeather h3 { text-align: center; font-size: 15.5px; font-weight: 800; margin: 0 0 16px 0; }
.tWeatherRow { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; gap: 8px; }
.tWeatherRow .d { font-size: 11.5px; font-weight: 500; opacity: .95; }
.tWeatherRow .i { display: flex; justify-content: center; margin: 10px 0; }
.tWeatherRow .t { font-size: 18px; font-weight: 800; }

/* ---------- ekipman bandi ---------- */
.tEquip { padding: 8px 0 40px; position: relative; }
.tEquip h3 { text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #1e2f9e; margin: 0 0 24px 0; }
/* SARIYOR, kaydirmyor. Onceki hali `overflow-x:auto` + gizli scrollbar idi ve karta
   `flex: 1 0 25%` veriyordu: seride 4'ten fazla kart olunca gerisi hicbir isaret
   birakmadan gorunmez oluyordu. Ekipman listeleri kaynaga gore tamamlanınca cogu
   terminal 5-7 karta cikti, yani bu artik istisna degil kural. */
.tEquipRow { display: flex; flex-wrap: wrap; row-gap: 18px; }
.tEquipItem { flex: 1 1 172px; min-width: 172px; text-align: center; border-left: 1px solid #e5eaf2; padding: 4px 18px; }
.tEquipItem:first-child { border-left: 0; }
.tEquipItem .icon { display: flex; justify-content: center; color: #2f4da8; margin: 0 0 12px 0; }
.tEquipItem .n { font-size: 21px; font-weight: 800; color: #16223c; }
.tEquipItem .l { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #22337a; line-height: 1.4; margin: 8px 0 0 0; }
/* Ek teknik ayrinti (ornek: "4 x 22 Sira"). Etiketten SONRA ve daha soluk: rakamla
   yarismasin, ama kaynakta verilen bilgi de kaybolmasin. */
.tEquipItem .s { font-size: 10px; color: #7a879c; line-height: 1.4; margin: 4px 0 0 0; }

/* ---------- Connection Magazine arsivi: kapak izgarasi ----------
   Kaynak sayfanin (yilport.com/en/media/magazine/...) duzeni: satirda dort sayi, acik mavi
   kart zemini, kapak ustte, baslik altta.
   Kaynak kapaga SABIT 278px yukseklik veriyor; burada oran kullaniliyor cunku sabit
   yukseklik dar ekranda kapagi eziyor ve kartlar farkli boya dusuyor. 1/1.414 = A4 orani,
   dergi kapaklarinin gercek orani. */
.magGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 0; padding: 0; list-style: none; }
.magGrid li { background: #c9dde6; padding: 12px; }
.magGrid a { display: block; color: inherit; text-decoration: none; }
.magCover { display: block; aspect-ratio: 1 / 1.414; background-size: cover; background-position: top center; background-repeat: no-repeat; background-color: #fff; }
.magTitle { display: block; font-size: 16px; font-weight: 600; color: #004f6d; padding: 10px 0 2px; line-height: 1.35; }
.magGrid a:hover .magTitle { color: #16357f; }

@media (max-width: 1100px) { .magGrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .magGrid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 480px)  { .magGrid { grid-template-columns: 1fr; } }

/* ---------- rihtim tablosu ---------- */
.tBerth { padding: 6px 0 40px; }
.tBerth h3, .tCaption { font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #1e2f9e; margin: 0 0 14px 0; }
.tBerthTable { border: 1px solid #e2e8f4; border-radius: var(--radius); overflow: hidden; background: #fff; }
.tBerthTable table { width: 100%; border-collapse: collapse; }
.tBerthTable th { background: #eef2fb; color: #22337a; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; text-align: left; padding: 13px 16px; text-transform: uppercase; }
.tBerthTable td { font-size: 13px; color: #33415e; padding: 15px 16px; border-top: 1px solid var(--line-soft); }
.tBerthTable td:nth-child(2), .tBerthTable td:nth-child(3), .tBerthTable th:nth-child(2), .tBerthTable th:nth-child(3) { text-align: center; }

/* ---------- konum haritasi ---------- */
.tMap { padding: 6px 0 40px; }
.tMapFrame { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-tint); }
.tMapFrame iframe { display: block; width: 100%; height: 320px; border: 0; }
/* LEAFLET KUTUSU: eski Google iframe'iyle AYNI yukseklik (320px) -- sayfa duzeni
   degismesin diye. Leaflet kutuyu kendi olcuyor, yukseklik verilmezse 0 kalir ve
   harita hic gorunmez; bu en sik yapilan hata. */
.tMapFrame .ypLeaflet { display: block; width: 100%; height: 320px; }
/* Leaflet kendi z-index'lerini 400-1000 araliginda kullaniyor; site basligi
   (.ypHeader) ve pop-up'lar bunun uzerinde kalmali. */
.tMapFrame .leaflet-pane,
.tMapFrame .leaflet-control { z-index: 1; }
.tMapFrame .leaflet-top, .tMapFrame .leaflet-bottom { z-index: 2; }
/* ATIF GORUNUR KALMALI: OSM verisi ODbL, kaynak gosterimi zorunlu. Kucultulmus
   ama gizlenmemis. */
.tMapFrame .leaflet-control-attribution { font-size: 10.5px; background: rgba(255,255,255,.82); }
.tMapFrame .leaflet-control-attribution a { color: var(--blue); }
/* Betik yuklenemezse kutu bos gri kalmasin. */
.tMapFrame .ypLeafletHata { display: flex; align-items: center; justify-content: center; background: var(--bg-tint); }
.tMapChip { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; padding: 10px 18px; border-radius: 3px; }
.tMapDir { display: inline-flex; align-items: center; gap: 12px; margin: 18px 0 0 0; font-size: 15px; font-weight: 700; color: var(--navy); }
.tMapDir svg { color: var(--blue); }
.tMapDir:hover { color: var(--blue); }

/* ---------- galeri ---------- */
.tGallery { padding: 6px 0 44px; }
/* Kategori suzgeci ve buyutme penceresi (bkz. Widget-GalleryStrip.cshtml). */
.tGalleryBar { display: flex; justify-content: flex-end; margin: 0 0 22px; }
.tGallerySelect { min-width: 220px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--navy); font: inherit; font-weight: 600; cursor: pointer; }
.tGalleryGrid .img { width: 100%; padding: 0; border: 0; cursor: pointer; }
.tGalleryGrid figure[hidden] { display: none; }
.tGalleryEmpty { margin: 26px 0 0; text-align: center; color: var(--muted); }
.tGalleryModal[hidden] { display: none; }
.tGalleryModal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.tGalleryModalBack { position: absolute; inset: 0; background: rgba(8, 20, 40, .82); }
.tGalleryModalBox { position: relative; width: min(1100px, 100%); max-height: 92vh; display: flex; flex-direction: column; align-items: center; }
.tGalleryModalBox img { max-width: 100%; max-height: 82vh; border-radius: 4px; display: block; }
.tGalleryModalTitle { margin: 12px 0 0; color: #fff; font-size: 15px; font-weight: 600; }
.tGalleryModalClose { position: absolute; top: -6px; right: -6px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: #fff; color: var(--navy); cursor: pointer; z-index: 2; }
/* Terminal karti: kapak uzerinde gorsel sayisi, altinda bolge etiketi. */
.tGalleryGrid figure { margin: 0; }
.tGalleryGrid .img { position: relative; }
.tGalleryCount { position: absolute; right: 10px; bottom: 10px; min-width: 26px; padding: 3px 8px; border-radius: 20px; background: rgba(6, 72, 141, .88); color: #fff; font-size: 12.5px; font-weight: 700; }
.tGalleryRegion { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.tGalleryMoreBar { display: flex; justify-content: center; margin: 30px 0 0; }
.tGalleryMoreBar[hidden] { display: none; }
/* Pencere: buyuk slayt + kucuk onizlemeler. */
.tGalleryModalBox { align-items: stretch; padding: 0 0 6px; }
.tGalleryModalTitle { order: -1; margin: 0 0 12px; text-align: center; }
.tGalleryStage { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; }
.tGalleryStage img { max-width: 100%; max-height: 66vh; border-radius: 4px; display: block; }
.tGalleryNav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--navy); cursor: pointer; z-index: 2; }
.tGalleryNav.prev { left: 10px; }
.tGalleryNav.next { right: 10px; }
.tGalleryNav[hidden] { display: none; }
.tGalleryCounter { position: absolute; right: 14px; bottom: 12px; padding: 4px 10px; border-radius: 20px; background: rgba(6, 72, 141, .88); color: #fff; font-size: 12.5px; font-weight: 700; }
.tGalleryThumbs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.tGalleryThumbs button { width: 78px; height: 54px; padding: 0; border: 2px solid transparent; border-radius: 4px; background: center / cover no-repeat; cursor: pointer; opacity: .55; transition: opacity .2s ease, border-color .2s ease; }
.tGalleryThumbs button.isOn { opacity: 1; border-color: #fff; }
.tGalleryThumbs[hidden] { display: none; }

@media (max-width: 640px) {
    .tGalleryNav.prev { left: 4px; }
    .tGalleryNav.next { right: 4px; }
}
/* auto-FILL, auto-fit DEGIL: bir bolgede tek terminal kalinca auto-fit o karti tum
   satira yayiyordu (Afrika seciliyken kart sayfa genisligi kadar oluyordu). */
.tGalleryGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 30px; }
.tGalleryGrid .img { aspect-ratio: 16 / 9; border-radius: var(--radius); background-size: cover; background-position: center; box-shadow: 0 4px 14px rgba(23, 64, 133, .08); }
.tGalleryGrid figcaption { text-align: center; font-size: 13.5px; font-weight: 700; color: #22337a; margin: 12px 0 0 0; }

/* ---------- servis listesi ---------- */
.tServices { padding: 6px 0 50px; }
.tServicesCard { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 22px 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.tServicesCard span { display: inline-flex; align-items: center; gap: 12px; font-size: 13.5px; font-weight: 600; color: #33415e; }
.tServicesCard svg { color: #2f4da8; flex: none; }

/* ---------- zaman cizelgesi (Timeline) ----------
   Yil seridi + tek kart. Kilometre taslari yan yana kart olarak degil, seritten secilen
   TEK kart olarak gosteriliyor: 15 kayitla yatay kaydirmali serit okunmuyordu. */
.tTimeline { padding: 14px 0 54px; position: relative; }
.tTlHeading { font-size: 40px; font-weight: 800; color: var(--blue); letter-spacing: .5px; margin: 0 0 28px; }

/* yil seridi */
.tTlNav { display: flex; align-items: center; gap: 10px; margin: 0 0 26px; }
.tTlYearsWrap { flex: 1; position: relative; overflow: hidden; }
/* Noktalarin uzerinde durdugu cizgi; seritle birlikte kaymamasi icin sarmalayicida. */
.tTlYearsWrap::before { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: var(--line); }
.tTlYears { display: flex; align-items: flex-end; gap: clamp(10px, 3vw, 44px); overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 2px 0; }
.tTlYears::-webkit-scrollbar { display: none; }
.tTlYear { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--slate); }
.tTlYear .txt { font-size: 15px; font-weight: 700; padding: 5px 11px; border-radius: 6px; transition: background .18s, color .18s; }
.tTlYear .dot { width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2px solid var(--line); transition: background .18s, border-color .18s; }
.tTlYear:hover .txt { color: var(--blue); }
.tTlYear.isActive .txt { background: var(--blue); color: #fff; }
.tTlYear.isActive .dot { background: var(--blue); border-color: var(--blue); }
.tTlYearArrow { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy); display: grid; place-items: center; cursor: pointer; }
.tTlYearArrow:hover { border-color: var(--blue); color: var(--blue); }

/* kart */
.tTlCard { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 300px; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, #1c2a6d 0%, #141a4d 100%); }
.tTlCardText { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 42px 46px; color: #fff; }
.tTlYearBig { font-size: 34px; font-weight: 800; letter-spacing: .5px; margin: 0 0 14px; }
.tTlTitle { font-size: 16px; font-weight: 700; line-height: 1.5; margin: 0 0 22px; }
.tTlRule { width: 54px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.tTlCardMedia { position: relative; min-height: 300px; }
.tTlCardMedia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .25s; }
.tTlCardMedia img.isChanging { opacity: 0; }
.tTlCardText.isChanging { animation: tTlFade .35s ease; }
@keyframes tTlFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tTlCardArrow { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; cursor: pointer; }
.tTlCardArrow.prev { left: 18px; }
.tTlCardArrow.next { right: 18px; }
.tTlCardArrow:hover { background: rgba(255, 255, 255, .24); }

/* sayfalama */
.tTlDots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 20px 0 0; }
.tTlDot { width: 26px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: var(--line); cursor: pointer; }
.tTlDot.isActive { background: var(--blue); }

@media (max-width: 900px) {
    .tTlHeading { font-size: 30px; }
    .tTlCard { grid-template-columns: 1fr; }
    /* Gorsel ustte: dar ekranda once metin gelirse gorsel katlamanin cok altinda kaliyor. */
    .tTlCardMedia { order: -1; min-height: 220px; }
    .tTlCardText { padding: 28px 24px; }
    .tTlCardArrow { display: none; }
}

/* ---------- amac bolumu (PurposeSection) ----------
   Tasarim preview.corexholding.com'daki .purpose-section bolumunden alindi:
   arka plan gorseli, ust etiket ve ortalanmis ikonlu uc kart. */
.tPurpose { position: relative; width: 100%; min-height: 620px; padding: 65px 20px 70px; background: #06488d center / cover no-repeat; }
.tPurposeInner { position: relative; z-index: 2; width: 100%; max-width: 1280px; margin: 0 auto; }
.tPurposeHead { max-width: 1000px; margin: 0 auto 55px; text-align: center; }
.tPurposeLabel { display: inline-flex; align-items: center; justify-content: center; margin: 0 0 22px; padding: 5px 11px; background: #fff; color: #06488d; font-size: 23px; font-weight: 600; line-height: 1.1; }
.tPurposeTitle { margin: 0; color: #fff; font-size: 21px; font-weight: 700; line-height: 1.35; text-transform: uppercase; }
.tPurposeCards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; width: 100%; }
.tPurposeCard { display: flex; flex-direction: column; align-items: center; min-height: 320px; padding: 28px 30px 34px; border-radius: 3px; background: #fff; text-align: center; box-shadow: 0 12px 35px rgba(0, 0, 0, .18); transition: transform .3s ease, box-shadow .3s ease; }
.tPurposeCard:hover { transform: translateY(-8px); box-shadow: 0 18px 42px rgba(0, 0, 0, .24); }
.tPurposeIcon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 0 12px; }
.tPurposeIcon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tPurposeCardTitle { margin: 0; color: #06488d; font-size: 23px; font-weight: 700; line-height: 1.25; }
.tPurposeLine { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; margin: 8px 0 17px; }
.tPurposeLine span { display: block; width: 67px; height: 3px; background: #06488d; }
.tPurposeLine i { display: block; width: 3px; height: 3px; background: #06488d; }
.tPurposeText { max-width: 320px; margin: 0; color: #111; font-size: 14px; font-weight: 500; line-height: 1.55; }
.tPurposeText p { margin: 0 0 8px; }
.tPurposeText ul { margin: 0; padding: 0; list-style: none; }
.tPurposeText li { margin: 0 0 6px; }

@media (max-width: 1024px) {
    .tPurpose { min-height: auto; padding: 55px 20px 60px; }
    .tPurposeTitle { font-size: 18px; }
    .tPurposeCards { gap: 16px; }
    .tPurposeCard { min-height: 330px; padding: 25px 20px 30px; }
    .tPurposeCardTitle { font-size: 20px; }
    .tPurposeText { font-size: 13px; }
}

/* Telefonda kartlar ALT ALTA.
   Onceki surumde yatay kaydirmali seritti (kart %82 genislikte, scroll-snap ile);
   gerekce "referansta da boyle" idi. Kullanici talebiyle degistirildi: ucuncu kart
   ekranin disinda kaldigi icin parmakla kaydirmadan gorunmuyordu.
   min-height sifirlaniyor: 1024 kuralindaki 330px her kartta ayri ayri geçerli olur,
   alt alta dizilince ucu birden bos alan uretirdi. */
@media (max-width: 767px) {
    .tPurpose { padding: 40px 0 45px; }
    .tPurposeHead { margin-bottom: 35px; padding: 0 18px; }
    .tPurposeLabel { margin-bottom: 17px; padding: 5px 10px; font-size: 17px; }
    .tPurposeTitle { font-size: 14px; line-height: 1.5; }
    .tPurposeCards { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 0 18px; }
    .tPurposeCard { min-height: 0; }
}

/* ---------- yonetici izgarasi (ExecutiveGrid) ----------
   Kart tiklanabilir; biyografi kartta degil acilan pencerede. */
.tExecs { padding: 10px 0 44px; }
.tExecGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.tExecCard { display: flex; flex-direction: column; padding: 0 0 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; text-align: left; font: inherit; cursor: pointer; overflow: hidden; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.tExecCard:hover { border-color: #9dbbe8; box-shadow: var(--shadow); transform: translateY(-3px); }
.tExecCard.noBio { cursor: default; }
.tExecCard.noBio:hover { transform: none; box-shadow: none; border-color: var(--line); }
.tExecPhoto { display: block; width: 100%; height: 260px; background: var(--bg-tint) center top / cover no-repeat; }
.tExecBody { display: block; padding: 16px 18px 0; }
.tExecName { display: block; color: #10203e; font-size: 15.5px; font-weight: 800; line-height: 1.35; }
.tExecRole { display: block; margin: 6px 0 0; color: var(--text); font-size: 12.5px; line-height: 1.5; }
.tExecArrow { display: inline-flex; align-items: center; margin: 12px 18px 0; color: var(--blue); }
.tExecCard:hover .tExecArrow { transform: translateX(4px); }

/* pencere */
.tExecModal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; }
.tExecModal[hidden] { display: none; }
.tExecModalBack { position: absolute; inset: 0; background: rgba(13, 18, 51, .62); }
.tExecModalBox { position: relative; z-index: 1; width: min(760px, 100%); max-height: 86vh; overflow-y: auto; padding: 34px 38px 38px; border-radius: 12px; background: linear-gradient(135deg, #1c2a6d 0%, #141a4d 100%); color: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .4); }
.tExecModalClose { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.tExecModalClose:hover { background: rgba(255, 255, 255, .26); }
.tExecModalHead h3 { margin: 0; font-size: 22px; font-weight: 800; }
.tExecModalRole { margin: 6px 0 18px; color: rgba(255, 255, 255, .72); font-size: 13.5px; }
.tExecModalText { font-size: 14.5px; line-height: 1.7; }
.tExecModalText p { margin: 0 0 12px; }

@media (max-width: 1180px) {
    .tExecGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .tExecGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .tExecPhoto { height: 210px; }
}

@media (max-width: 560px) {
    .tExecGrid { grid-template-columns: 1fr; }
    .tExecModalBox { padding: 28px 22px 30px; }
}

/* ---------- basvuru baglantilari (ApplyLinks) ----------
   Uzerine gelince ikinci gorsele gecer. Swap saf CSS: ikinci gorsel --applyHover
   degiskeninde arka plan olarak duruyor, <img> hover'da saydamlasip altindakini gosteriyor. */
/* Basvuru bolumu: referanstaki (preview.corexholding.com/join-us) gibi acik gri zeminde
   ortalanmis baslik ve yan yana iki buyuk gorsel. Sayfanin tek icerigi bu oldugu icin
   bolum nefes alacak kadar genis. */
.tApply { padding: 58px 0 66px; background: #fafafa; }
.tApply .sectionHeading { max-width: 900px; margin: 0 auto 42px; text-align: center; font-size: 26px; line-height: 1.4; }
/* UC KART: LinkedIn, Kariyer.net ve CV yukle. Onceden iki sutundu; ucuncu kart
   eklenince tek basina alt satira dusuyordu. 900px altinda tekrar ikiye, 640 altinda
   tek sutuna iniyor -- uc kutucuk dar ekranda yan yana okunmuyor. */
.tApplyRow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 1100px; margin: 0 auto; }
@media (max-width: 900px) { .tApplyRow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tApplyLink { display: block; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--bg-tint) center / cover no-repeat; }
.tApplyLink.hasHover { background-image: var(--applyHover); }
.tApplyLink img { display: block; width: 100%; height: auto; transition: opacity .25s ease; }
.tApplyLink.hasHover:hover img { opacity: 0; }
.tApplyLink:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

@media (max-width: 700px) {
    .tApplyRow { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- video galerisi ---------- */
.tVideos { padding: 20px 0 56px; }
.tVideoGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.tVideoCard { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; text-align: left; cursor: pointer; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.tVideoCard:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0, 0, 0, .12); }
.tVideoCard:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.tVideoThumb { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--bg-tint); overflow: hidden; }
.tVideoThumb img, .tVideoThumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tVideoPlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(6, 72, 141, .34); transition: background .25s ease; }
.tVideoCard:hover .tVideoPlay { background: rgba(6, 72, 141, .5); }
.tVideoBody { display: block; padding: 16px 18px 18px; }
.tVideoTitle { display: block; font-size: 17px; font-weight: 700; color: var(--navy); }
.tVideoMeta { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }

.tVideoModal[hidden] { display: none; }
.tVideoModal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.tVideoModalBack { position: absolute; inset: 0; background: rgba(8, 20, 40, .78); }
.tVideoModalBox { position: relative; width: min(980px, 100%); max-height: 90vh; overflow: auto; padding: 22px; border-radius: var(--radius); background: #fff; }
.tVideoModalClose { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--bg-tint); color: var(--navy); cursor: pointer; }
.tVideoModalTitle { margin: 0 44px 14px 0; font-size: 19px; color: var(--navy); }
.tVideoModalPlayer video { width: 100%; height: auto; display: block; border-radius: 4px; background: #000; }

@media (max-width: 640px) {
    .tVideoGrid { grid-template-columns: 1fr; gap: 18px; }
    .tVideoModalBox { padding: 16px; }
}

/* ---------- kaynaklar ---------- */
.tResources { padding: 6px 0 50px; }
.tResources a {
    display: flex; align-items: center; gap: 14px; background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 12px 0;
}
.tResources .rIcon { flex: none; width: 36px; height: 36px; border-radius: 6px; background: #eef2fb; color: #2f4da8; display: flex; align-items: center; justify-content: center; }
.tResources .rName { font-size: 13.5px; font-weight: 700; color: #1e2a4a; }
.tResources .rMeta { font-size: 11.5px; color: #8a94a6; margin: 2px 0 0 0; }
.tResources .rDl { margin-left: auto; color: var(--primary); }
.tResources a:hover { border-color: #9dbbe8; }
.tResources a:hover .rDl { color: var(--blue); }

/* ---------- haber akisi (NewsFeed) + haber detayi ---------- */
.nFeed { padding: 10px 0 48px; }
.nFeedHead { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0 0 22px 0; }
.nFeedHead .tCaption { margin: 0; }
.nFeedEmpty { border: 1px dashed var(--line); border-radius: var(--radius); padding: 26px; text-align: center; color: #7f8ca3; font-size: 14px; }
.nFeedGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.nCard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s ease, transform .15s ease; }
.nCard:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
/* SABIT ORAN, sabit yukseklik degil. Onceki hali `height: 190px` idi: kart genisligi
   382px oldugunda kutu 2.01 oranina duşüyor, oysa haber gorselleri 1.74 (2028x1166 ve
   1014x583 -- hepsi ayni oranda). Fark `cover` ile ustten/alttan kirpiliyordu.
   16/9 = 1.78, kaynagin oranina yakin; kirpma neredeyse sifira iniyor ve kutu genislik
   degistikce oranini koruyor. */
.nCardImg { display: block; aspect-ratio: 16 / 9; background: var(--bg-tint) center / cover no-repeat; position: relative; }
.nCat { position: absolute; top: 12px; left: 12px; background: var(--primary); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 6px 11px; border-radius: 3px; }
.nCardBody { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.nCardBody time { font-size: 12px; font-weight: 700; color: var(--indigo); letter-spacing: .04em; }
.nCardBody h4 { font-size: 16px; font-weight: 800; color: #10203e; line-height: 1.4; margin: 8px 0 0 0; }
.nCardBody h4 a:hover { color: var(--blue); }
.nCardBody p { font-size: 13px; line-height: 1.6; color: var(--text); margin: 10px 0 0 0; }
/* Haber kartlarindaki "Read More" de KART ALTINA hizalanir. Ayni duzeltme .ypCard
   icin yapilmisti ama haber kartlari BASKA bir sinif kullaniyor (.nMore), o yuzden
   disarida kalmisti: ozet metinleri farkli uzunlukta oldugu icin ayni satirdaki
   butonlar kayiyordu (olculdu: 912, 912, 890).
   Aradaki 16px bosluk son paragrafa tasindi -- `margin-top: auto` ile sabit ust bosluk
   ayni anda yazilamaz. */
.nMore { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--blue); margin: 0; margin-top: auto; align-self: flex-start; }
.nCardBody > p:last-of-type { margin-bottom: 16px; }
.nMore:hover { gap: 12px; }

/* ---------- newsroom sayfalama (NewsFeed) ---------- */
.nPager {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin: 34px 0 0 0; padding: 20px 0 0 0; border-top: 1px solid var(--line);
}
.nPagerNav {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--navy);
    border: 1.5px solid #9dbbe8; border-radius: 4px; padding: 9px 15px; line-height: 1;
    transition: border-color .15s ease, color .15s ease;
}
.nPagerNav:hover { border-color: var(--blue); color: var(--blue); }
.nPagerNav.isOff { color: #a9b4c6; border-color: var(--line); pointer-events: none; }
.nPagerNav svg { flex: none; }
.nPagerPages { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nPagerPage {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 9px;
    font-size: 13px; font-weight: 700; color: var(--navy);
    border: 1px solid var(--line); border-radius: 4px;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.nPagerPage:hover { border-color: var(--blue); color: var(--blue); }
.nPagerPage.isCurrent { background: var(--primary); border-color: var(--primary); color: #fff; }
.nPagerGap { color: #a9b4c6; font-size: 13px; padding: 0 2px; }
.nPagerCount { margin-left: auto; font-size: 12px; color: #7f8ca3; }

.nDetailHero { background: linear-gradient(115deg, #eaf3fc 0%, #dce9f8 100%); position: relative; overflow: hidden; padding: 70px 0 56px; min-height: clamp(300px, 24.75vw, 500px); display: flex; flex-direction: column; justify-content: center; }
/* MIN-HEIGHT SERIDI 16:9'A GETIRIYOR. Serit 44vw genisliginde; 44vw x 9/16 = 24.75vw
   yukseklik demek, yani gorsel kutusu kapak gorselleriyle AYNI orana oturuyor ve
   kartta ne goruluyorsa banner'da da o goruluyor.
   Onceden yukseklik yalniz basliktan geliyordu (~2,1:1) ve cover dikeyde %15'i
   atiyordu: tam boy bir portrede tam da BASIN oldugu yer kesiliyordu -- Marmara
   haberinde canlida goruldu.
   clamp: 1180px altinda gorsel zaten gizli; ust sinir 500px cunku 2560px'lik bir
   ekranda 24.75vw = 634px olur ve banner sayfayi yutardi. */
.nDetailHero .heroImg { position: absolute; top: 0; right: 0; bottom: 0; width: 44%; background-size: cover; background-position: top center; }
/* KIRPMA USTTEN DEGIL ALTTAN ALINIYOR. Serit 16:9 oldugu icin 16:9 kapaklarda kirpma
   zaten SIFIR -- bu ayar yalniz oran tutmayan gorselleri etkiliyor. Orada da dogrusu
   ust: haber kapaklarinda konu (insan, gemi, vinc) ust yarida duruyor, "center"
   ustten ve alttan esit kesip BASI goturuyordu. */
.nDetailHero .heroImg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #e2edf9 0%, rgba(226, 237, 249, 0) 55%); }
.nDetailHero .wrapper { position: relative !important; }
.nDetailHero h1 { font-size: clamp(28px, 3.2vw, 44px); font-weight: 800; color: #131a33; line-height: 1.2; max-width: 58%; }
.nDetailMeta { display: flex; align-items: center; gap: 18px; margin: 18px 0 0 0; flex-wrap: wrap; }
.nDetailMeta span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #33415e; }
/* UC OZELLIK BURADA TEKRAR EDILIYOR: ustteki ".nDetailMeta span" kurali
   (font-size:13px; font-weight:600; color:#33415e) .nCat'inkileri eziyordu --
   ozgullugu daha yuksek (0,1,1 > 0,1,0). Iki sonucu vardi: lacivert zeminde lacivert
   yazi (rozet hic okunmuyordu) ve rozetin kart rozetlerinden buyuk/ince cikmasi
   (13px/600 yerine tasarimdaki 10.5px/800). ".nDetailMeta .nCat" 0,2,0 ile geciyor;
   boylece detay rozeti kart rozetiyle birebir ayni. letter-spacing, text-transform,
   padding ve border-radius zaten .nCat'ten geliyor, tekrar edilmiyor. */
.nDetailMeta .nCat { position: static; color: #fff; font-size: 10.5px; font-weight: 800; }
.nDetailBody { padding: 44px 0 56px; }
.nLead { font-size: 17px; font-weight: 600; line-height: 1.6; color: #1e2a4a; margin: 0 0 24px 0; padding: 0 0 0 18px; border-left: 3px solid var(--blue); }
.nBack { margin: 30px 0 0 0; }

/* ---------- iletisim formu (ContactForm) ---------- */
.cForm { padding: 6px 0 48px; }
/* Dogrulama kodu satiri: cizim, yenile dugmesi ve giris kutusu yan yana. */
.cFormCaptcha { display: flex; align-items: flex-start; gap: 12px; margin: 22px 0 0; flex-wrap: wrap; }
.cCapImage { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: #eef3fb; overflow: hidden; }
.cCapImage svg { display: block; }
.cCapRefresh { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--blue); cursor: pointer; }
.cCapRefresh:hover { background: var(--bg-tint); }
.cCapField { flex: 1 1 220px; min-width: 200px; }
/* Ayni satir geri bildirim ve CV formlarinda da var (Yilport.Forms, M10). Orada etiket GORUNUR
   ve kutunun ustunde; cizim ve yenile dugmesi kutunun alt hizasina oturuyor. */
.cfGrid .cFormCaptcha { margin: 0; align-items: flex-end; }
.cvCard .cFormCaptcha { margin: 4px 0 0; align-items: flex-end; }
.cvField.cCapField { margin: 0; }
.cvField.cCapField > span { text-transform: uppercase; }
.visuallyHidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cFormIntro { font-size: 14px; line-height: 1.7; color: var(--text); margin: 0 0 22px 0; }
.cFormBody { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 26px 28px 28px; }
.cFormGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 26px; }
.cField { display: flex; flex-direction: column; }
.cField.cFieldWide { grid-column: 1 / -1; }
.cField > span { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #22337a; margin: 0 0 8px 0; }
.cField > span i { color: #d33; font-style: normal; }
.cField input, .cField select, .cField textarea {
    font-family: inherit; font-size: 14px; color: var(--slate);
    border: 1px solid #d9e2f0; border-radius: 4px; padding: 0 14px; height: 46px;
    background: #fff; outline: none; transition: border-color .15s ease;
}
.cField textarea { height: auto; padding: 12px 14px; line-height: 1.6; resize: vertical; }
.cField select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #33415e 50%), linear-gradient(135deg, #33415e 50%, transparent 50%); background-position: calc(100% - 19px) 20px, calc(100% - 14px) 20px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; }
.cField input:focus, .cField select:focus, .cField textarea:focus { border-color: var(--blue); }
.cErr { display: none; font-size: 12px; font-style: normal; color: #d33; margin: 6px 0 0 0; }
.cField.invalid input, .cField.invalid select, .cField.invalid textarea { border-color: #e39; }
.cField.invalid .cErr { display: block; }
.cFormFoot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 24px 0 0 0; }
.cFormNote { font-size: 12.5px; color: #8a94a6; margin: 0; }

/* ---------- terminal iletisim dizini (ContactDirectory) ---------- */
.cDir { padding: 6px 0 48px; }
.cDirGroup { margin: 0 0 30px 0; }
.cDirGroup h4 { font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); margin: 0 0 14px 0; padding: 0 0 10px 0; border-bottom: 1px solid var(--line); }
.cDirGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cDirItem { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 16px 18px 18px; }
.cDirItem h5 { font-size: 15px; font-weight: 800; color: #10203e; margin: 0 0 10px 0; }
.cDirItem h5 a:hover { color: var(--blue); }
.cDirItem p { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.55; color: var(--text); margin: 0 0 7px 0; }
.cDirItem p svg { color: #7f8ca3; flex: none; margin-top: 2px; }
.cDirItem a { color: inherit; }
.cDirItem p a:hover { color: var(--blue); }
.cDirAddr { color: #6b7689; }

/* ---------- calisan yorumlari (Testimonials) ---------- */
.tsList { padding: 6px 0 44px; }
.tsGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.tsCard { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px 28px; position: relative; }
.tsCard::before {
    content: "\201C"; position: absolute; top: 6px; right: 22px;
    font-size: 78px; line-height: 1; color: #e4ecf8; font-weight: 800;
}
.tsHead { display: flex; align-items: center; gap: 14px; position: relative; }
.tsAvatar {
    flex: none; width: 52px; height: 52px; border-radius: 50%;
    background: #eef4fd center / cover no-repeat; color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 800; border: 1px solid #d8e4f5;
}
.tsName { display: block; font-size: 17px; font-weight: 800; color: #10203e; }
.tsRole { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--indigo); margin: 4px 0 0 0; }
.tsLead { font-size: 15px; font-weight: 700; color: var(--blue); margin: 18px 0 0 0; }
.tsCard blockquote { margin: 12px 0 0 0; font-size: 13.5px; line-height: 1.7; color: var(--text); position: relative; }
.tsCard blockquote p { margin: 0 0 10px 0; }
.tsCard blockquote p:last-child { margin-bottom: 0; }
.tsCard blockquote strong { color: #22337a; font-weight: 700; }

/* ---------- iletisim karti (ContactCard) ---------- */
/* UST DOLGU 6px DEGIL 44px: .cCard sayfanin HERO'SUNUN HEMEN ALTINDAKI ilk blok,
   yani ustunde bosluk birakacak baska blok yok. Asagidaki .cForm / .cDir de 6px
   ust dolguya sahip ama onlar bir onceki blogun ALT dolgusundan bosluk aliyor;
   .cCard alamiyordu ve mor baslik hero bandina yapisik duruyordu. */
.cCard { padding: 44px 0; }
.cCardBody { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 24px 26px 26px; }
.cCompany { font-size: 16px; font-weight: 800; color: #10203e; margin: 0 0 16px 0; }
.cCardBody dl { margin: 0; }
.cRow { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line-soft); align-items: start; }
.cRow:first-child { border-top: 0; padding-top: 0; }
.cRow dt { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #22337a; }
.cRow dt svg { color: #2f4da8; flex: none; }
.cRow dd { margin: 0; font-size: 14px; line-height: 1.6; color: #33415e; }
.cRow dd a { color: var(--blue); font-weight: 600; }
.cRow dd a:hover { text-decoration: underline; }
.cCardBody .btnOutline { margin: 20px 0 0 0; }

/* ---------- bolge tanitimi + harita (RegionMap) ---------- */
.rMap { padding: 44px 0 40px; }
.rMapBody { display: grid; grid-template-columns: 44% 1fr; gap: 52px; align-items: center; }
.rMapText h2 { font-size: 26px; font-weight: 800; color: #10203e; line-height: 1.35; margin: 0 0 18px 0; }
.rMapText .body { font-size: 14px; line-height: 1.75; color: var(--text); }
.rMapText .body p { margin: 0 0 14px 0; }
.rMapStats { display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 26px 0 0 0; }
.rMapStats > div { display: flex; flex-direction: column; }
.rMapStats .n { font-size: 26px; font-weight: 800; color: var(--blue); line-height: 1.1; }
.rMapStats .l { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #22337a; margin: 6px 0 0 0; }
.rMapImage { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; padding: 10px; }
.rMapImage img { width: 100%; height: auto; display: block; }

/* ---------- gomulu PDF goruntuleyici (PdfViewer) ----------
   --pdfvH: iframe yuksekligi VE liste maks. yuksekligi. Tek degisken oldugu icin ikisi
   birbirinden kaymaz; 34 sayi listelendiginde sayfa asagi uzamak yerine liste kendi
   icinde kayar. */
.pdfV { padding: 14px 0 54px; --pdfvH: 680px; }
.pdfVBody { display: grid; grid-template-columns: 340px 1fr; gap: 26px; align-items: start; }
.pdfVSide { display: flex; flex-direction: column; min-width: 0; }
.pdfVSearch { position: relative; margin: 0 0 12px 0; }
.pdfVSearch svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #7f8ca3; pointer-events: none; }
.pdfVSearch input {
    width: 100%; height: 42px; padding: 0 14px 0 40px;
    font-family: inherit; font-size: 13.5px; color: var(--slate);
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); outline: none;
    transition: border-color .12s ease;
}
.pdfVSearch input:focus { border-color: var(--blue); }
.pdfVSearch input::-webkit-search-cancel-button { cursor: pointer; }
.pdfVList {
    max-height: var(--pdfvH); overflow-y: auto; overscroll-behavior: contain;
    /* Kayan kutunun sag kenarinda odak halkasi/gölge kirpilmasin */
    padding: 2px 4px 2px 2px;
}
.pdfVList::-webkit-scrollbar { width: 8px; }
.pdfVList::-webkit-scrollbar-track { background: var(--bg-tint); border-radius: 8px; }
.pdfVList::-webkit-scrollbar-thumb { background: #b9cbe6; border-radius: 8px; }
.pdfVList::-webkit-scrollbar-thumb:hover { background: #9dbbe8; }
.pdfVEmpty { margin: 10px 2px 0; font-size: 13px; color: #7f8ca3; }
.pdfVCount { margin: 12px 2px 0; font-size: 12px; color: #7f8ca3; }
.pdfVItem {
    display: flex; align-items: center; gap: 14px; background: #fff; cursor: pointer;
    border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 12px 0;
    transition: border-color .12s ease, background .12s ease;
}
.pdfVItem:hover { border-color: #9dbbe8; }
.pdfVItem.active { border-color: var(--blue); background: #eef4fd; }
.pdfVItem.active .rIcon { background: var(--primary); color: #fff; }
.pdfVName { min-width: 0; }
.pdfVName .rName { display: block; }
.pdfVName .rMeta { display: block; }
.pdfVItem .rDl { margin-left: auto; color: var(--primary); }
.pdfVFrame { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-tint); }
.pdfVFrame iframe { display: block; width: 100%; height: var(--pdfvH); border: 0; }

/* ==========================================================================
   ic sayfa bilesenleri (PageHero / RichText / CardGrid)
   ========================================================================== */
.pageHero { background: linear-gradient(115deg, #eaf3fc 0%, #dce9f8 100%); position: relative; overflow: hidden; }
.pageHero .heroImg { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; background-size: cover; background-position: center; }
.pageHero .heroImg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #e2edf9 0%, rgba(226, 237, 249, 0) 45%); }
.pageHero .wrapper { padding: 90px 0 70px; }
.pageHero h1 { font-size: clamp(36px, 4vw, 56px); font-weight: 800; color: #131a33; line-height: 1.05; text-transform: uppercase; max-width: 56%; position: relative; }
.pageHero .rule { width: 48px; height: 4px; border-radius: 2px; background: #5a2bd0; margin: 24px 0; }
.pageHero p { font-size: 17px; font-weight: 500; color: #1e2a4a; max-width: 50%; line-height: 1.5; position: relative; }

.pageSection { padding: 54px 0; }
.pageSection + .pageSection { padding-top: 0; }
.sectionHeading { font-size: 26px; font-weight: 800; color: var(--blue); text-align: center; margin: 0 0 36px 0; }

.richText { font-size: 15px; line-height: 1.75; color: var(--text); padding: 44px 0; }
.richText h2 { font-size: 27px; font-weight: 800; color: #10203e; margin: 0 0 18px 0; line-height: 1.25; }
.richText h3 { font-size: 19px; font-weight: 800; color: var(--navy); margin: 26px 0 10px 0; line-height: 1.3; }
.richText p { margin: 0 0 16px 0; }
.richText ul, .richText ol { margin: 0 0 16px 20px; list-style: disc; }
.richText li { margin: 0 0 8px 0; }
.richText a { color: var(--blue); font-weight: 700; }
.richText strong { font-weight: 700; color: var(--slate); }
.richText hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }

/* UST USTE BINEN DOLGU: .pageSection zaten 54px veriyor, .richText kendi 44px'ini
   ekliyor ve ilk basligin 26px ust margin'i da bunlarin uzerine biniyor -- kariyer
   sayfasinda Overview ile "Core Competencies" arasinda 184px bosluk aciyordu.
   Dikey bosluk tek kaynaktan, bolumden gelsin.
   .pageSection + .pageSection ust dolguyu sifirladigi icin ardisik bolumlerde
   arayi onceki bolumun alt dolgusu veriyor; ek bir kurala gerek yok.
   HABER GOVDESINDE DOKUNULMUYOR: Content-NewsArticle .richText'i .pageSection
   OLMADAN kullaniyor, orada 44px tek bosluk kaynagi. */
.pageSection > .wrapper.richText { padding-top: 0; padding-bottom: 0; }
.richText > :first-child { margin-top: 0; }

.cardGridSec { padding: 40px 0 56px; }
.cardGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.ypCard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s ease, transform .15s ease; }
.ypCard:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
/* TUM KART GORSELLERI AYNI ORANDA. Onceki hali sabit yukseklikti (200px) ve portre
   varyanti 300px'ti -- ayni izgarada yan yana duran kartlarin gorselleri farkli
   boydaydi. 16/9 hem fotograflarin dogal oranina yakin (1.74-1.78) hem de haber
   kartlariyla ayni cerceve. */
.ypCardImage { aspect-ratio: 16 / 9; background-size: cover; background-position: center; }
/* Kare/portre kesit fotograflar (or. yonetici vesikaliklari): kirpmadan, beyaz zeminde ortala */
.ypCardImage.imgPortrait {
    background-size: contain; background-repeat: no-repeat;
    background-position: center center; background-color: #fff; border-bottom: 1px solid var(--line-soft);
}
.ypCardBody { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.ypCardBody h3 { font-size: 19px; font-weight: 800; color: #10203e; line-height: 1.3; }
.ypCardSubtitle { display: block; color: var(--indigo); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 8px 0 0 0; }
.ypCardBody p { font-size: 13.5px; line-height: 1.65; margin: 12px 0 0 0; }
.ypCardBody ul { margin: 12px 0 0 18px; font-size: 13.5px; list-style: disc; }
.ypCardBody li { margin: 0 0 7px 0; }
/* Butonlar KART ALTINA HIZALANIR. Onceki hali `margin: 18px 0 0 0` idi: buton metnin
   hemen ardindan geliyordu, metinler farkli uzunlukta oldugu icin yan yana duran
   kartlarda butonlar farkli yuksekliklerde kaliyordu (olculdu: ayni satirda 1816 ve
   1916 px). `margin-top: auto` dikey flex'te kalan boslugu butonun USTUNE veriyor.
   Ayni cozum .ypValuesGrid'de zaten kullaniliyordu.

   ARADAKI 18px BOSLUK son metin ogesine tasindi: `margin-top: auto` ile sabit bir ust
   bosluk ayni anda yazilamaz -- icerik uzun oldugunda auto sifira duser ve buton yaziya
   yapisirdi. */
.ypCard .btnMore { margin: 0; margin-top: auto; align-self: flex-start; }
.ypCardBody > p:last-of-type,
.ypCardBody > ul:last-of-type { margin-bottom: 18px; }

/* Aciklamasi OLMAYAN kartta alt baslik ile buton arasina ayni bosluk.
   Bolge kartlarindan paragraf kaldirilinca (goc 161) "4 terminals" ile
   "Explore Region" birbirine yapisti; ustteki kural yalniz p/ul icin calisiyordu.

   BOSLUK BUTONA DEGIL ALT BASLIGA VERILIYOR: `.ypCard .btnMore`'da
   `margin-top: auto` var ve butonu kart ALTINA yasliyor (farkli uzunluktaki
   kartlarda butonlar ayni hizada dursun diye -- bkz. yukaridaki not). Butona
   sabit bir margin-top yazmak o hizalamayi bozardi.

   `:has(+ .btnMore)` SART: bu sablon (Widget-CardGrid) sitedeki BUTUN kart
   izgaralarinda kullaniliyor. Kosulsuz bir margin, alt basligin altinda
   paragraf olan kartlarda da araya bosluk sokardi. Kural yalnizca alt basligin
   HEMEN ardindan buton geldiginde, yani paragraf yokken devreye giriyor.
   Destegi olmayan cok eski bir tarayicida kural dusuyor ve gorunum bugunku
   haline donuyor -- bozulma degil, yalnizca boslugun olmamasi. */
.ypCardBody > .ypCardSubtitle:has(+ .btnMore) { margin-bottom: 18px; }

/* ==========================================================================
   Online Services (Yilport.OnlineServices modulu)
   Modulun kendi wwwroot'u yok: stiller burada, boylece tasarim sistemi tek dosyada
   kalir ve modul assembly'sine gomulu asset tasinmaz.
   ========================================================================== */
.osWrap { padding: 34px 0 60px; }
.osRegion { margin: 0 0 38px 0; }
.osRegion .tCaption { margin: 0 0 16px 0; }

.osCrumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; color: #7f8ca3; margin: 0 0 22px 0; }
.osCrumbs a { color: var(--blue); font-weight: 700; }
.osCrumbs a:hover { text-decoration: underline; }

.osGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.osGridApps { grid-template-columns: repeat(3, 1fr); }

.osCard, .osApp {
    display: flex; flex-direction: column; gap: 6px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 20px 22px; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.osCard:hover, .osApp:hover { border-color: #9dbbe8; box-shadow: var(--shadow); transform: translateY(-2px); }
.osCardName { font-size: 15px; font-weight: 800; color: var(--navy); }
.osCardMeta { font-size: 12.5px; color: var(--text); }
.osCardCount { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
/* Sayac ve ok ayni satirda: kartin tiklanabilir oldugu okla belli oluyor. Ok yalnizca
   hover'da degil HER ZAMAN gorunur, sadece hover'da kayiyor -- dokunmatikte hover yok. */
.osCardFoot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.osCardArrow { color: var(--blue); flex: none; transition: transform .14s ease; }
.osCard:hover .osCardArrow { transform: translateX(3px); }

/* ---------- Online Services terminal secim suzgeci ----------
   JS `hidden`'i kaldirana kadar gorunmez (bkz. Index.cshtml): calismayan bir arama kutusu
   gostermek, hic gostermemekten kotu. */
.osFilter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0 0 18px 0; }
.osFilter[hidden] { display: none; }
.osFilterSearch {
    display: flex; align-items: center; gap: 9px;
    background: #fff; border: 1px solid var(--line); border-radius: 999px;
    padding: 9px 16px; min-width: 268px; color: #7f8ca3;
}
.osFilterSearch:focus-within { border-color: #9dbbe8; box-shadow: var(--shadow); }
.osFilterSearch input {
    border: 0; outline: 0; background: none; font: inherit; font-size: 13.5px;
    color: var(--navy); width: 100%;
}
.osFilterRegions { display: flex; flex-wrap: wrap; gap: 8px; }
.osChip {
    border: 1px solid var(--line); background: #fff; color: var(--text);
    border-radius: 999px; padding: 7px 15px; font-size: 12.5px; font-weight: 700;
    cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.osChip:hover { border-color: #9dbbe8; }
.osChip.isOn { background: var(--primary); border-color: var(--primary); color: #fff; }
.osChip:focus-visible { outline: 2px solid var(--skylight); outline-offset: 2px; }

.osCount { font-size: 12.5px; color: #7f8ca3; margin: 0 0 22px 0; }
.osEmpty { font-size: 14px; color: var(--text); margin: 8px 0 40px 0; }
.osEmpty[hidden] { display: none; }
/* Suzgec bir bolgenin TUM kartlarini gizlediyse bolge basligi da gitmeli, aksi halde
   bos bir baslik kaliyor. */
.osRegion[hidden] { display: none; }

.osApp { min-height: 150px; }
.osAppName { font-size: 15.5px; font-weight: 800; color: var(--navy); }
.osAppDesc { font-size: 13px; color: var(--text); line-height: 1.5; }
.osAppFoot { margin-top: auto; padding-top: 12px; }
.osTag {
    display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; padding: 5px 10px; border-radius: 3px;
    background: var(--bg-tint); color: var(--primary);
}
.osTag.osTagExt { background: #fff3e0; color: #9a5b00; }
.osTag.osTagSoon { background: var(--line-soft); color: #7f8ca3; }
.osLead { font-size: 14px; color: var(--text); margin: 0 0 18px 0; }
.osSectionGap { margin-top: 34px; margin-bottom: 14px; }

/* --- dis sisteme devir ekrani --- */
.osHandoff {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 30px 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.osHandoffLead { font-size: 15px; color: var(--slate); }
.osHandoffNote { font-size: 13px; color: var(--text); }
.osHandoffNote code {
    display: inline-block; margin-top: 6px; padding: 6px 10px;
    background: var(--bg-tint); border-radius: 4px; font-size: 12px; color: var(--primary);
    word-break: break-all;
}
.osHandoff .btnOutline { margin-top: 4px; }

.osFrame { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-tint); }
.osFrame iframe { display: block; width: 100%; height: 720px; border: 0; }

/* --- bilgi / bos durum --- */
.osNotice {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px;
}
.osNotice h2 { font-size: 20px; font-weight: 800; color: var(--navy); margin: 0 0 10px 0; }
.osNotice p { font-size: 14px; color: var(--text); margin: 0 0 10px 0; }
.osNoticeMeta { font-size: 13px; color: #7f8ca3; }
.osNotice.osNoticeWarn { border-color: #f0d9a8; background: #fffaf0; color: #8a5a00; font-size: 14px; }
.osEmpty { border: 1px dashed var(--line); border-radius: var(--radius); padding: 26px; text-align: center; color: #7f8ca3; font-size: 14px; }

/* --- sekmeler --- */
.osTabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px 0; }
.osTab {
    font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--navy);
    border: 1px solid var(--line); border-radius: 4px; padding: 10px 18px; background: #fff;
    transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.osTab:hover { border-color: var(--blue); color: var(--blue); }
.osTab.isActive { background: var(--primary); border-color: var(--primary); color: #fff; }

/* --- veri tablosu: genis oldugu icin KENDI icinde yatay kayar, sayfa kaymaz --- */
.osTableWrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.osTable { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.osTable thead th {
    text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: #5b6a85; background: var(--bg-soft); padding: 12px 14px; border-bottom: 1px solid var(--line);
}
.osTable tbody td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); color: var(--slate); }
.osTable tbody tr:last-child td { border-bottom: 0; }
.osTable tbody tr:hover { background: #f8fbff; }
.osStrong { font-weight: 800; color: var(--navy); }
.osPhase {
    display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .04em;
    padding: 4px 9px; border-radius: 3px; background: var(--bg-tint); color: var(--primary);
}
.osFlag { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 800; padding: 3px 6px; border-radius: 3px; }
.osFlag.osFlagHaz { background: #fdecea; color: #b3261e; }
.osFlag.osFlagRf { background: #e8f1fd; color: #0b57d0; }
.osFlag.osFlagOog { background: #fff3e0; color: #9a5b00; }
.osFlag.osFlagVgm { background: #e6f4ea; color: #137333; margin-left: 0; }

/* ---------- Online Services: konteyner kartlari (portal duzeni) ----------
   online.yilport.com'daki Container Search satiriyla ayni bilgi mimarisi:
   boyut rozeti | numara+tanim | hat/kategori | yard in | yard out | pozisyon.
   <details> tabanli: JS yok, ok isareti summary'nin ::after'i. */
.osUnits { display: flex; flex-direction: column; gap: 14px; }
.osUnit { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.osUnitRow {
    list-style: none; cursor: pointer; display: grid; align-items: center;
    grid-template-columns: 92px minmax(200px, 1.4fr) minmax(150px, 1fr) repeat(3, minmax(128px, .9fr)) 34px;
    gap: 10px 18px; padding: 16px 18px;
}
.osUnitRow::-webkit-details-marker { display: none; }
.osUnitSize { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.osUnitFeet { font-size: 21px; font-weight: 800; color: var(--navy); line-height: 1; }
.osUnitIso { font-size: 11.5px; font-weight: 700; color: #7f8ca3; }
.osUnitMain { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.osUnitId { font-size: 17px; font-weight: 800; color: var(--navy); letter-spacing: .02em; }
.osUnitDesc { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #7f8ca3; }
.osUnitRef { font-size: 12px; color: #5b6a85; }
.osUnitRef b { color: var(--blue); font-weight: 700; }
.osUnitTrade { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.osUnitChips { display: flex; }
.osChip { font-size: 11px; font-weight: 800; letter-spacing: .04em; padding: 4px 10px; }
.osChipLine { background: #eef2f8; color: var(--slate); border-radius: 3px 0 0 3px; }
.osChipCat { background: var(--blue); color: #fff; border-radius: 0 3px 3px 0; }
.osChipLine:only-child, .osChipCat:only-child { border-radius: 3px; }
.osUnitFreight { font-size: 12.5px; color: var(--slate); display: flex; align-items: center; gap: 10px; }
.osUnitSeal { font-size: 11.5px; color: #7f8ca3; }
.osUnitSeal::before { content: "
F512"; font-size: 10px; margin-right: 3px; }
.osUnitWhen { display: flex; flex-direction: column; gap: 2px; }
.osUnitWhenLabel { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.osUnitIn .osUnitWhenLabel { color: #b3690f; }
.osUnitOutCol .osUnitWhenLabel { color: #137333; }
.osUnitPos .osUnitWhenLabel { color: #5b6a85; }
.osUnitWhen b { font-size: 13px; font-weight: 700; color: var(--navy); }
.osUnitWhen small { font-size: 11.5px; color: #7f8ca3; }
.osUnitToggle {
    width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line);
    position: relative; justify-self: end; transition: transform .15s ease;
}
.osUnitToggle::after {
    content: ""; position: absolute; left: 8px; top: 7px; width: 8px; height: 8px;
    border-right: 2px solid #7f8ca3; border-bottom: 2px solid #7f8ca3; transform: rotate(45deg);
}
.osUnit[open] .osUnitToggle { transform: rotate(180deg); }
.osUnitDetail { border-top: 1px solid var(--line-soft); padding: 18px; background: #f8fafd; border-radius: 0 0 var(--radius) var(--radius); }
.osUnitCfs { display: grid; grid-template-columns: 1fr 1fr minmax(200px, .8fr); gap: 14px; }
.osUnitCfsCard { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 14px 16px; }
.osUnitCfsCard h3 { margin: 0 0 10px 0; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--blue); }
.osUnitCfsCard dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: 12.5px; }
.osUnitCfsCard dt { color: #7f8ca3; font-weight: 600; }
.osUnitCfsCard dd { margin: 0; color: var(--slate); font-weight: 600; }
.osUnitEvent { display: block; }
.osUnitFacts { display: flex; flex-direction: column; gap: 8px; }
.osUnitFact {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 9px 14px;
}
.osUnitFact span { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--blue); }
.osUnitFact b { font-size: 11.5px; font-weight: 800; background: var(--blue); color: #fff; border-radius: 3px; padding: 3px 10px; }
.osUnitStats { margin-top: 14px; }

/* ---------- Online Services: calisan gemiler (working sekmesi) ----------
   GetCarrierVisitVesselWorking'in ilerleme yuku icin kart + cift ilerleme cubugu. */
.osShips { display: flex; flex-direction: column; gap: 16px; }
.osShip { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.osShipHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.osShipTitle h2 { margin: 0; font-size: 19px; font-weight: 800; color: var(--navy); }
.osShipMeta { margin: 4px 0 0 0; font-size: 12.5px; color: #7f8ca3; }
.osShipPct { text-align: right; }
.osShipPct b { font-size: 30px; font-weight: 800; color: var(--blue); line-height: 1; }
.osShipPct b i { font-style: normal; font-size: 16px; }
.osShipPct span { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7f8ca3; }
.osShipBars { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0 0 0; }
.osShipBarHead { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px 0; }
.osShipBarHead span { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #5b6a85; }
.osShipBarHead b { font-size: 12.5px; font-weight: 700; color: var(--navy); }
.osShipTrack { height: 8px; background: #edf1f7; border-radius: 4px; overflow: hidden; }
.osShipFill { height: 100%; border-radius: 4px; }
.osShipFillDis { background: #b3690f; }
.osShipFillLoad { background: #137333; }
.osShipStats { margin-top: 16px; }
@media (max-width: 700px) {
    .osShipBars { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
    .osUnitRow { grid-template-columns: 72px 1fr 1fr 30px; }
    .osUnitTrade { grid-column: 2; }
    .osUnitWhen { grid-column: auto; }
    .osUnitToggle { grid-row: 1; grid-column: 4; }
    .osUnitCfs { grid-template-columns: 1fr; }
}

/* --- arama formu --- */
.osSearch { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin: 0 0 22px 0; }
.osSearchRow { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.osField { display: flex; flex-direction: column; gap: 6px; flex: 0 0 220px; }
.osField.osFieldWide { flex: 1 1 320px; }
.osField > span { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #5b6a85; text-transform: uppercase; }
.osField input, .osField select {
    height: 44px; padding: 0 14px; font-family: inherit; font-size: 14px; color: var(--slate);
    background: #fff; border: 1px solid #d9e2f0; border-radius: 4px; outline: none;
}
.osField input:focus, .osField select:focus { border-color: var(--blue); }
.osSearch .btnSolid { height: 44px; }
.osSearchNote { margin: 12px 0 0 0; font-size: 12px; color: #7f8ca3; }

/* ---------- Online Services: sonuc kartlari (booking / vgm / osd) ---------- */
.osBooking {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px 24px; margin: 0 0 18px 0;
}
.osBookingHead {
    display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between;
    align-items: flex-start; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft);
}
.osBookingNumber { font-size: 20px; font-weight: 800; color: var(--navy); margin: 0; }
.osBookingMeta { margin: 4px 0 0 0; font-size: 12.5px; color: #7f8ca3; }
.osBookingNotes { margin: 16px 0 0 0; font-size: 13.5px; color: var(--text); }
.osBookingActions { margin: 18px 0 0 0; }

/* Sayac serisi: bookingde adet/tamamlanan/kalan, vgm'de agirliklar. */
.osStats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.osStats > div {
    min-width: 92px; padding: 10px 14px; background: var(--bg-tint);
    border: 1px solid var(--line-soft); border-radius: 4px; text-align: center;
}
.osStats dt { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7f8ca3; }
.osStats dd { margin: 4px 0 0 0; font-size: 17px; font-weight: 800; color: var(--navy); }

/* Etiket/deger listesi. */
.osKv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 24px; margin: 18px 0 0 0; }
.osKv > div { min-width: 0; }
.osKv dt { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #7f8ca3; }
.osKv dd { margin: 4px 0 0 0; font-size: 14px; color: var(--slate); overflow-wrap: anywhere; }

.osErrors { margin: 0; padding-left: 20px; }
.osErrors li { margin-bottom: 6px; font-size: 14px; }
.osErrors li:last-child { margin-bottom: 0; }

/* ---------- Port Entry Request: kayit tipine gore bolumler ---------- */
.peSection { margin-top: 26px; }
.peSectionTitle {
    font-size: 16px; font-weight: 800; color: var(--navy); margin: 0 0 16px 0;
    padding-bottom: 10px; border-bottom: 2px solid var(--line-soft);
}
.peDocs {
    margin-top: 18px; padding: 16px 20px 8px; background: var(--bg-tint);
    border: 1px dashed var(--line); border-radius: 4px;
}
.peDocs h3 { font-size: 13px; font-weight: 800; color: var(--navy); margin: 0 0 10px 0; }
.peDocs h3 em { font-weight: 600; font-style: normal; font-size: 12px; color: #9a5b00; margin-left: 8px; }
.peDocs ol { margin: 0; padding-left: 20px; }
.peDocs li { margin-bottom: 8px; font-size: 13px; color: var(--text); line-height: 1.5; }
/* Onay kutusu satiri: .osField dikey yerlesimini yatay yapar. */
.cfGrid .peCheck { flex-direction: row; align-items: center; gap: 10px; }
.cfGrid .peCheck > span { text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--text); }
.cfGrid .peCheck input { width: 18px; height: 18px; flex: 0 0 auto; }
/* Dosya secici .osField input yuksekligini kullanmamali. */
.cfGrid input[type="file"] { height: auto; padding: 10px 12px; background: var(--bg-tint); }

/* ---------- musteri geri bildirim formu (Yilport.Forms) ---------- */
.cfForm { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 30px; }
.cfGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 20px; }
.cfGrid .osField { flex: 1 1 auto; }
.cfGrid .cfWide { grid-column: 1 / -1; }
.cfGrid .osField > span i { color: #b3261e; font-style: normal; }
.cfGrid textarea {
    padding: 12px 14px; font-family: inherit; font-size: 14px; color: var(--slate);
    background: #fff; border: 1px solid #d9e2f0; border-radius: 4px; outline: none; resize: vertical;
}
.cfGrid textarea:focus { border-color: var(--blue); }
.cfFoot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 24px 0 0 0; }
.cfNote { font-size: 12px; color: #7f8ca3; margin: 0; }
.cfNote i { color: #b3261e; font-style: normal; }
.cfResult, .cFormResult {
    margin: 18px 0 0 0; padding: 12px 16px; border-radius: 4px; font-size: 13.5px; font-weight: 700;
}
.cfResult.isOk, .cFormResult.isOk { background: #e9f7ec; color: #1b6b32; }
.cfResult.isBad, .cFormResult.isBad { background: #fdecea; color: #b3261e; }

/* ---------- footer ---------- */
footer { clear: both; background: #f7fafd; border-top: 1px solid #e7f0fa; margin-top: 20px; }
.footerMenu { padding: 44px 0 24px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 30px 70px; }
.footerMenu ul { margin: 0; }
.footerMenu li { list-style: none; }
.footerMenu li.level0 a { color: #1b2430; font-weight: 800; font-size: 14px; letter-spacing: .04em; margin: 0 0 18px 0; display: block; text-transform: uppercase; }
.footerMenu li a { color: #55606f; font-weight: 500; font-size: 13.5px; margin: 0 0 11px 0; display: block; }
.footerMenu li a:hover { color: var(--blue); }
/* ---------- footer CTA (menu sutunlarinin sagindaki bosluk) ---------- */
.footerCta {
    flex: 1 1 280px; min-width: 260px;
    display: flex; flex-direction: column;
    padding: 24px 24px 20px; border-radius: 6px; color: #fff;
    background: linear-gradient(135deg, var(--blue) 0%, var(--primary) 100%);
    box-shadow: 0 14px 30px rgba(23, 64, 133, .16);
}
.footerCtaKicker { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.footerCtaTitle { display: block; margin: 8px 0 0 0; font-size: 19px; font-weight: 800; line-height: 1.25; color: #fff; }
.footerCtaStats { display: flex; gap: 20px; margin: 16px 0 0 0; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.footerCtaStats b { display: block; font-size: 21px; font-weight: 800; line-height: 1.1; letter-spacing: 0; color: #fff; }
.footerCtaRows { margin: 18px 0 0 0; border-top: 1px solid rgba(255, 255, 255, .24); }
.footerCtaRow { display: flex; align-items: center; gap: 12px; padding: 11px 0; font-size: 13.5px; font-weight: 700; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .24); }
/* `>` SART: dogrudan cocuk degil de torun secilirse .footerCtaIcon dairesinin icindeki
   ikon svg'si de "son cocuk" oldugu icin margin-left:auto aliyor ve 30px'lik dairenin
   sag kenarina yasiyordu (olculen kayma: +7px). Ok yalniz satirin kendi son cocugudur. */
.footerCtaRow > svg:last-child { margin-left: auto; }
.footerCtaIcon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.footerCtaRow:hover .footerCtaIcon { background: rgba(255, 255, 255, .3); }
.footerCtaMeta { margin: 16px 0 0 0; display: flex; flex-direction: column; gap: 7px; }
.footerCtaMeta a { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, .88); }
.footerCtaMeta a:hover { color: #fff; }
/* Sosyal ikon satiri. .footerCtaMeta column yonunde oldugu icin sarmalayici sart:
   olmazsa iki daire alt alta dizilir. */
.footerCtaSocial { display: flex; gap: 8px; margin-top: 4px; }
.footerCtaIn { width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .16); justify-content: center; }
.footerCtaIn:hover { background: rgba(255, 255, 255, .3); }

.footerBottom { padding: 30px 0 36px; position: relative; display: flex; align-items: center; }
.footerCopy { font-size: 12px; color: #55606f; }
.footerCopy .footerLinks { margin: 6px 0 0 0; }
.footerCopy .footerLinks a { color: #55606f; }
.footerCopy .footerLinks a::after { content: "|"; padding: 0 6px; color: #c3ccd9; }
.footerCopy .footerLinks a:last-child::after { display: none; }
/* Header logosunun footer kopyasi. Gorsel 1602x180 (8.9:1) -- yukseklik verilip
   genislik serbest birakiliyor, aksi halde satiri asar. max-width:none SART:
   global `img { max-width: 100% }` kurali bu oranda logoyu yassiltiyor (header'da
   ayni sorun yasanmisti, bkz. .ypBrand img). */
.footerBrand { margin-left: auto; }
.footerBrand img { display: block; height: 26px; width: auto; max-width: none; }

/* ==========================================================================
   responsive
   ========================================================================== */
/* Sol sosyal bar yalniz oluk yetince gorunur (yukaridaki .ypSideBar notu).
   Gorunurken hero'nun sol okuyla da cakisir (bar 0-46px, ok 24-70px, ikisi de
   dikeyde ortada) — o yuzden sol ok saga, "next"in yanina alinir. */
@media only screen and (min-width: 1516px) {
    .ypSideBar { display: block; }
}

/* Menu kademeleri. Esikler OLCULDU (yukaridaki .ypNav notu), tahmin degil: her kademe
   EN UZUN dile (Turkce) gore secildi, cunku menu dile gore ~%17 uzuyor. Temel oluk 15px --
   34px yalnizca Ingilizce icin yetiyordu, Turkce'de 1634px'e kadar tasiyordu. Havadar
   gorunum yalnizca gercekten yer olan cok genis ekranlara birakildi. */
/* GENIS EKRANDA OLUGU BUYUTME KADEMESI YOK -- denendi ve OLCUMLE elendi.
   `.wrapper` sabit genislikte (`--wrap`, max `100% - 60px`), yani ekran buyurken menuye
   yer ACILMIYOR: kullanilabilir alan 1516px'te 1104px, 1700px'te yalnizca 1128px.
   `min-width: 1700` icin oluk 30px denendi ve Turkce 168px TASTI. Temel 15px her genislikte
   gecerli; ust sinirda TR icin ~33px payla siğiyor (olculdu). */
@media only screen and (max-width: 1599px) {
    /* SIKI KADEME, alt sinir 1481 (altinda hamburger devrede).
       UST SINIR OLCUMLE BULUNDU, hesapla degil: 12.5 px'lik kademe 1510 px istiyor,
       kap ise ekran - 60. Once 1567 denendi ve 1568 px'te dil secici 17 px TASTI --
       hesap 1509 diyordu, gercek 1510 cikti. 1599 secildi: 1600 px'te kap 1540,
       yani 30 px pay kaliyor. */
    .ypNav ul { gap: 11px; }
    .ypNav ul li a { font-size: 11.5px; letter-spacing: .02em; }
}

@media only screen and (max-width: 1515px) {
    .ypKfItem { padding: 0 22px; }
}

@media only screen and (max-width: 1400px) {
    .ypNav ul { gap: 11px; }
    .ypNav ul li a { font-size: 11.5px; letter-spacing: .02em; }
}

/* Yatay menunun BITTIGI yer. 1180 degil 1300: olcume gore 1300'un altinda Turkce menu
   en dar ayarlarla bile sigmiyor (bkz. .ypNav notu). Eskiden esik 1180'di ve 1180-1550
   bandinda menu kiriliyordu.
   HAMBURGER DUGMESI DE BURADA aciliyor -- drawer'i 1300'e tasiyip dugmeyi 1180'de
   birakmak 1180-1300 arasinda HIC MENU OLMAMASI demekti. */
/* ESIK 1300 -> 1460 (2026-09-04). Yeni birlesik logo 8.9:1 ve 44 px yukseklikte
   392 px yer kapliyor; eski logo ayni yukseklikte 115 px idi. Olculdu: 1301 px'te
   marka 392 + menu 841 + dil 87 + bosluklar = 1372, kap ise 1226 -- 116 px tasma.
   Menu bu genislikte artik acilmiyor, hamburger devrede.
   ALTERNATIF: esik geri indirilecekse logo yuksekligi ~28 px'e dusurulmeli;
   o boyutta iki markanin yazilari okunmuyor, bu yuzden esik tercih edildi. */
/* ESIK 1480 -> 1269 (2026-09-10). Kullanici 1920 ekranda Windows olceklemesiyle
   tarayiciyi 1280 CSS px'te kullaniyor; %80 yakinlastirinca 1600'e cikip menu
   aciliyordu, %100'de hamburger kaliyordu. Cozum esigi indirmek TEK BASINA
   YETMEDI -- 1280'de olculdu: kap 1205, marka 338 + menu 907 + dil 85 = 1330,
   yani 125 px tasma. Bu yuzden 1270-1480 bandi icin asagida AKISKAN bir kademe
   var; esik onsuz indirilirse menu dil secicinin uzerine biner. */
@media only screen and (max-width: 1269px) {
    .ypNav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; box-shadow: 0 18px 30px rgba(23, 64, 133, .12); padding: 18px 30px 24px; margin: 0; }
    .ypNav.open { display: block; }
    .ypNav ul { display: block; }
    /* Drawer'da satir kirilmasi ISTENEN davranis: dikey listede uzun etiket alta akabilir. */
    .ypNav ul li a { padding: 12px 0; font-size: 14px; letter-spacing: .02em; white-space: normal; border-bottom: 1px solid var(--line-soft); }
    .mobileMenuButton { display: inline-flex; margin-left: auto; }
    .ypLang { margin-left: 6px; }
}

/* 1270-1480: yatay menunun EN DAR bandi. Degerler sabit degil AKISKAN, cunku
   kullanicilarin gercek genisligi bu bandin her yerine dagiliyor (1280, 1366,
   1440 hepsi gorulur) ve her biri icin ayri kademe yazmak surdurulemez.
   OLCULDU (1280 px, Turkce -- en uzun dil):
     logo 38 / oluk 11 / punto 11.5 -> 125 px TASMA
     logo 30 / oluk  8 / punto 11   ->   6 px pay  (cok riskli)
     logo 28 / oluk  8 / punto 11   ->  24 px pay  <- alt ucta hedeflenen
   clamp alt sinirlari bu olcume gore secildi; ust sinirlar 1480'de mevcut
   gorunumu bozmayacak degerler.
   1280'de: logo ~27, punto ~11.0, oluk ~7.9.
   Dil hapi da daraliyor ama katkisi kucuk (olculdu: 2-6 px) -- asil kazanc
   logo yuksekliginden geliyor, gorsel 8.9:1 oldugu icin 1 px yukseklik ~9 px
   genislik demek. */
@media only screen and (min-width: 1270px) and (max-width: 1480px) {
    .ypBrand img { height: clamp(26px, 2.1vw, 32px); }
    .ypNav ul { gap: clamp(7px, 0.62vw, 10px); }
    .ypNav ul li a { font-size: clamp(10.5px, 0.86vw, 12px); letter-spacing: .015em; }
    .ypLangToggle { padding: 7px 9px; }
    .mobileMenuButton { display: none; }
}

@media only screen and (max-width: 1180px) {
    .flow > .ypBox { width: calc(100% - 48px) !important; }
    .ypHeader .wrapper { height: 64px; }
    /* Tablette TAM logo, yalniz daha kucuk: 34 px -> 303 px genislik. 768-1180 arasinda
       menu zaten hamburger'de oldugu icin yer bol, kirpmaya gerek yok. */
    .ypBrand img { height: 34px; }
    .ypLangToggle { padding: 8px 10px; }
    .ypLangMenu { right: 0; min-width: 156px; }
    .ypHero .slide { min-height: 480px; }
    .ypHeroContent { padding: 70px 0; }
    .ypKfGrid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
    .ypKfItem:nth-child(odd) { border-left: 0; }
    .ypKfLabel { min-height: 0; }
    .ypValues { flex-direction: column; }
    .ypValuesPhoto { min-height: 240px; }
    .ypValuesPhoto::after { background: linear-gradient(180deg, rgba(255,255,255,0) 60%, #fff 100%); }
    .ypValuesBody { padding: 34px 30px; }
    .ypValuesBody .wrapper { padding-right: 0; }
    .ypValuesGrid { grid-template-columns: 1fr; gap: 26px; }
    .ypValuesGrid > div { border-left: 0; padding-left: 0; }
    .ypNewsRow { flex-direction: column; align-items: flex-start; }
    .ypNewsCards { grid-template-columns: 1fr; width: 100%; }
    .tHero { grid-template-columns: 1fr; }
    .tHeroBody { padding: 50px 30px 44px; }
    .tHeroImg { min-height: 260px; order: -1; }
    .tStats { margin-top: 20px; }
    .tOverview { grid-template-columns: 1fr; gap: 30px; }
    .nFeedGrid { grid-template-columns: repeat(2, 1fr); }
    .nDetailHero h1 { max-width: 100%; }
    .nDetailHero .heroImg { display: none; }
    .cFormGrid { grid-template-columns: 1fr; }
    .cDirGrid { grid-template-columns: 1fr; }
    .nFeedGrid { grid-template-columns: 1fr; }
    .tsGrid { grid-template-columns: 1fr; }
    .cRow { grid-template-columns: 1fr; gap: 6px; }
    .rMapBody { grid-template-columns: 1fr; gap: 30px; }
    .pdfVBody { grid-template-columns: 1fr; }
    /* Tek kolona dusunce liste ustte kalir; iframe 480px, liste 360px'te kayar
       (--pdfvH ikisini birden surukleyecegi icin liste burada ayrica sinirlaniyor). */
    .pdfV { --pdfvH: 480px; }
    .pdfVList { max-height: 360px; }
    .tOverviewMedia .slide { min-height: 240px; }
    .pageHero h1, .pageHero p { max-width: 100%; }
    .pageHero .heroImg { display: none; }
    .cardGrid { grid-template-columns: 1fr 1fr; }
    .osGrid, .osGridApps { grid-template-columns: 1fr 1fr; }
    .osFrame iframe { height: 520px; }
    .ypMapCard h2 { max-width: none; }
    /* CTA karti tam genislige gecer, menu sutunlarinin altinda iletisim seridi olur */
    .footerCta { flex: 1 1 100%; }
}

@media only screen and (max-width: 700px) {
    /* TELEFONDA HEADER IKI SATIR: ustte TAM logo, altta hamburger + dil secici.
       Neden: logo 8.9:1. Tek satirda 375 px'te logoya 163 px kaliyor, bu da 18 px
       yukseklik demek -- PORTS & TERMINALS ve HOLDING INC. satirlari okunmuyor.
       Onceki surumde logo soldan kirpilip yalniz CoreX yarisi gosteriliyordu;
       tam logo istendigi icin satir sayisi artirildi. Iki satirda logo tam
       genisligiyle sigiyor.

       height: auto ZORUNLU: 1180 blogundaki sabit 64 px ikinci satiri kirpardi.
       Bu blok 1180'den SONRA geldigi icin onu eziyor; yukari tasinirsa calismaz. */
    .ypHeader .wrapper { flex-wrap: wrap; height: auto; padding-top: 10px;
        padding-bottom: 10px; gap: 0; row-gap: 8px; }
    .ypBrand { flex: 1 0 100%; justify-content: center; }
    .ypBrand img { height: 34px; width: auto; }
    /* Ikinci satir: hamburger solda, dil secici sagda. margin-left: auto ust
       satirdan miras kaliyor, sifirlanmazsa ikisi de saga yapisir. */
    .mobileMenuButton { margin-left: 0; }
    .ypLang { margin-left: auto; }

    body { font-size: 14px; }
    .wrapper { max-width: calc(100% - 40px); }
    .flow > .ypBox { width: calc(100% - 40px) !important; }
    .ypHeroTitle span { padding: 6px 18px 6px 10px; margin-left: -10px; }
    .ypHeroBadge { right: 20px; bottom: 18px; font-size: 11px; }
    .ypHeroDots { max-width: calc(100% - 100px); bottom: 16px; }
    .ypMapCard { padding: 20px; gap: 14px; }
    .ypMapCanvas { max-height: none; }
    .ypMarker i { width: 11px; height: 11px; border-width: 2px; }
    .ypMapLegend { gap: 24px; }
    .ypKfGrid { grid-template-columns: 1fr; }
    .ypKfItem { border-left: 0; padding: 0; }
    /* DAR EKRANDA DAHA UZUN ORAN. 1920/860 ile 375px genislikte kutu 168px kalirdi;
       uzerindeki baslik, aciklama ve dugme sigmaz. min-height KULLANILAMAZ: aspect-ratio
       ile birlikte yukseklik tabana takilinca GENISLIK buyuyor (olculdu: 375px ekranda
       kutu 759px'e cikip overflow:hidden ile kirpiliyordu). Cozum orani degistirmek. */
    .ypRegion .slide { height: auto; }
    .ypRegionTitle { font-size: 20px; }
    .ypRegionCap h3 { font-size: 21px; }
    .ypRegionCap i { font-size: 14px; }
    .cardGrid { grid-template-columns: 1fr; }
    /* Hizmet listesi telefonda tek sutun: iki sutunda "CFS (Stuffing, stripping,
       inspection)" gibi uzun basliklar ikonun altina sariyordu. */
    .tServicesCard { grid-template-columns: 1fr; padding: 18px 20px; gap: 16px; }
    .osGrid, .osGridApps { grid-template-columns: 1fr; }
    .osSearchRow { flex-direction: column; align-items: stretch; }
    .osField, .osField.osFieldWide { flex: 1 1 auto; }
    .cfGrid { grid-template-columns: 1fr; }
    .cfForm { padding: 22px 20px; }
    .osKv { grid-template-columns: 1fr; }
    .osBooking { padding: 18px 18px; }
    .osStats > div { min-width: 78px; padding: 8px 10px; }
    .nPager { gap: 8px; }
    .nPagerCount { margin-left: 0; flex: 1 1 100%; }
    .tServicesCard { grid-template-columns: 1fr; }
    .tWeather { margin-bottom: 24px; }
    /* Alt serit dikeye gecer. Esik 700'de KALIYOR: ortadaki kurumsal logo
       kaldirildiktan sonra satirda yalniz copyright (219 px) ve logo (232 px)
       var, kenar bosluguyla 511 px -- 700 px'e kadar rahat sigiyorlar.
       (Uc oge varken 774 px'in altinda cakisiyorlardi ve esik gecici olarak
       820'ye cekilmisti; sebep ortadan kalkti.) */
    .footerBottom { flex-direction: column; gap: 16px; }
    /* Kolon yonunde margin-left:auto ogeyi saga iter; sifirlanmazsa logo tek
       basina saga kacik durur. */
    .footerBrand { margin-left: 0; }
}

/* ---- Ana sayfa pop-up ------------------------------------------------------
   z-index 1300: video penceresi 1200'de. Pop-up acikken onunde baska bir katman
   kalmamali, yoksa arka plan tiklanabilir gorunup kapatma butonu erisilemez olur.
   Icerik SERBEST HTML oldugu icin govdeye .richText veriliyor ve gorsel/tablo
   tasmasi burada sinirlaniyor -- editorun yapistirdigi genis bir gorsel kutuyu
   yirtmasin.                                                                  */
.tPopup[hidden] { display: none; }
.tPopup { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 24px; }
.tPopupBack { position: absolute; inset: 0; background: rgba(8, 20, 40, .78); }
.tPopupBox { position: relative; width: min(560px, 100%); max-height: 88vh; overflow: auto; padding: 28px; border-radius: var(--radius); background: #fff; box-shadow: 0 18px 48px rgba(8, 20, 40, .28); }
.tPopupClose { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--bg-tint); color: var(--navy); cursor: pointer; }
.tPopupBody { margin-right: 30px; }
.tPopupBody > :first-child { margin-top: 0; }
.tPopupBody > :last-child { margin-bottom: 0; }
.tPopupBody img { max-width: 100%; height: auto; border-radius: 4px; }
.tPopupBody table { width: 100%; display: block; overflow-x: auto; }

@media (max-width: 720px) {
    .tPopup { padding: 14px; }
    .tPopupBox { padding: 20px; max-height: 92vh; }
    .tPopupBody { margin-right: 26px; }
}

/* --- CV basvuru formu ---------------------------------------------------------------
   Duzen kaynak sayfadan (corexholding.com/cv): iki beyaz kart yan yana, altta tam
   genislikte gonder dugmesi. Olculen degerler: radius 18px, golge rgba(0,0,0,.08)
   0 8px 16px, kart basligi 28px/800, etiket 13px/700, dugme 54px/radius 12px.
   Renkler temanin kendi degiskenlerinden -- kaynagin lacivertî zaten --navy'ye yakin. */
.cvPage { background: #f8f9fa; padding: 40px 0 70px; }

/* Sol kart daha dar: icinde uzun onay metinleri var ve satir uzunlugu okunabilir kalmali.
   Sag sutun daha genis cunku alanlar tam genislikte. */
.cvCols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 26px;
    align-items: start; }

.cvCard { background: #fff; border-radius: 18px; box-shadow: 0 8px 16px rgba(0, 0, 0, .08);
    padding: 30px 32px; }

/* Yukleme gorseli kartin ust kenarina DAYANIYOR, o yuzden dolgu ic sarmalayiciya tasindi.
   overflow:hidden -- gorselin koseleri kartin radius'unu asmasin. */
.cvCardFlush { padding: 0; overflow: hidden; }
.cvCardInner { padding: 24px 32px 30px; }

/* Gorselin TAMAMI dosya secici. Girdi gizlenmiyor, seffaf olarak alanin uzerine
   seriliyor: "display:none" + JS ile secim, JavaScript kapaliyken formu dosya
   alinamaz hale getirirdi. */
.cvUpload { display: block; position: relative; cursor: pointer; line-height: 0; }
.cvUpload img { display: block; width: 100%; height: 240px; object-fit: cover; }
.cvUpload input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; }
.cvUploadOverlay { position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; background: rgba(0, 0, 0, .22); color: #fff;
    transition: background .2s ease; }
.cvUpload:hover .cvUploadOverlay { background: rgba(0, 0, 0, .38); }
/* Klavye ile gezen kullanici da alanin secili oldugunu gormeli. */
.cvUpload input[type=file]:focus-visible + .cvUploadOverlay,
.cvUpload:focus-within .cvUploadOverlay { box-shadow: inset 0 0 0 3px var(--blue); }

.cvFormats { text-align: center; color: #5b6a85; font-size: 12px; margin: -12px 0 22px; }
.cvCardTitle { text-align: center; font-size: 17px; font-weight: 800; letter-spacing: .02em;
    color: var(--navy); margin: 0 0 22px; line-height: 1.4; }
.cvCardTitle span { font-weight: 700; }
.cvContact { font-size: 28px; letter-spacing: .04em; margin-bottom: 26px; }

.cvNotice { text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .06em;
    color: var(--navy); text-transform: uppercase; margin: 0 0 12px; }

/* Aydinlatma metni PDF baglantisi. Baslik ile onay kutulari ARASINDA duruyor:
   aday okumadan onaylamasin. Onay metinleriyle ayni puntoda ama link rengi ve
   alti cizili -- tiklanabilir oldugu belli olsun. */
.cvNoticeLink { text-align: center; margin: 0 0 18px; font-size: 12.5px; }
.cvNoticeLink a { color: var(--blue); text-decoration: underline; }
.cvNoticeLink a:hover { color: var(--navy); }

/* Onay satiri: kutu sabit, metin kalan genisligi alip sariliyor. align-items:flex-start --
   metin cok satira dustugunde kutu ORTAYA degil ILK SATIRA hizali kalmali. */
.cvCheck { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 14px; cursor: pointer; }
.cvCheck input { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--navy); }
.cvCheck span { font-size: 12.5px; line-height: 1.55; color: #46536b; }

.cvField { display: block; margin: 0 0 18px; }
.cvField > span { display: block; font-size: 13px; font-weight: 700; letter-spacing: .03em;
    color: var(--navy); margin: 0 0 8px; }
.cvField input, .cvField select { width: 100%; height: 46px; padding: 0 14px;
    border: 1px solid #dfe4ec; border-radius: 10px; background: #fff; font: inherit;
    font-size: 14px; color: var(--text); }
.cvField input:focus, .cvField select:focus { border-color: var(--blue); outline: none; }

/* Ulke kodu sabit genislikte, numara kalani aliyor. minmax(0,...) ZORUNLU: select'in
   icindeki uzun ulke adlari yoksa sutunu itip kutuyu tasirir. */
.cvPhone { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr); gap: 12px; }

.cvSubmit { display: block; width: 100%; height: 54px; margin-top: 22px; border: 0;
    border-radius: 12px; background: var(--navy); color: #fff; font: inherit;
    font-size: 15px; font-weight: 700; letter-spacing: .06em; cursor: pointer;
    transition: background .2s ease; }
.cvSubmit:hover { background: var(--blue); }

/* Sunucu dogrulama ozeti. role="alert" ile birlikte: ekran okuyucu da haberdar olur. */
.cvErrors { border: 1px solid #e2b4b4; background: #fdf3f3; border-radius: 12px;
    padding: 14px 18px; margin: 0 0 22px; color: #8c2f2f; font-size: 14px; }
.cvErrors ul { margin: 8px 0 0; padding-left: 20px; }
.cvErrors li { margin: 3px 0; }

@media (max-width: 900px) {
    .cvCols { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 520px) {
    .cvCard { padding: 24px 20px; }
    .cvCardFlush { padding: 0; }
    .cvCardInner { padding: 20px 20px 24px; }
    .cvUpload img { height: 180px; }
    .cvContact { font-size: 23px; }
    /* Ulke kodu ve numara alt alta: 160px + numara 320px altinda sigmiyor. */
    .cvPhone { grid-template-columns: 1fr; }
}