/* ============ Unidanışmanlık — Apple-inspired design system ============ */
:root {
--blue: #174978;
--blue-hover: #1e5c97;
--blue-soft: #3e6e96;
--blue-light: #8fc1f0;
--brand-gray: #6b6b6b;
--gold: #d9a35c;
--gold-light: #f0c987;
--gold-deep: #b3782f;
--ink: #1d1d1f;
--ink-2: #424245;
/* Açık zeminlerde gövde metni için kullanılır. Eski #86868b beyaz üzerinde
3.62:1 idi — WCAG AA (4.5:1) altında. #6e6e73: beyazda 5.07:1,
--bg-soft (#f5f5f7) üzerinde 4.66:1. Koyu zeminler için erişilebilirlik
katmanındaki .subhead kuralı devreye giriyor. */
--gray: #6e6e73;
--bg: #ffffff;
--bg-soft: #f5f5f7;
--bg-dark: #000000;
--bg-dark-2: #161617;
--radius: 18px;
--radius-lg: 28px;
--ease: cubic-bezier(0.28, 0.11, 0.32, 1);
--maxw: 1024px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: clip;
max-width: 100vw;
}
img { max-width: 100%; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
/* ---------- Typography ---------- */
h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; }
.display {
font-size: clamp(2.6rem, 7vw, 5rem);
line-height: 1.05;
letter-spacing: -0.025em;
font-weight: 700;
}
.headline {
font-size: clamp(2rem, 5vw, 3.5rem);
line-height: 1.08;
letter-spacing: -0.022em;
}
.subhead {
font-size: clamp(1.1rem, 2.2vw, 1.45rem);
line-height: 1.4;
color: var(--gray);
font-weight: 500;
letter-spacing: 0.002em;
}
.section-dark .eyebrow, .hero .eyebrow, .search-hero .eyebrow, .prog-hero .eyebrow { color: var(--blue-light); }
.eyebrow {
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--blue);
display: block;
margin-bottom: 0.8rem;
}
/* ---------- Nav ---------- */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
background: rgba(251, 251, 253, 0.72);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
transition: background 0.4s var(--ease);
}
.nav.dark {
background: rgba(22, 22, 23, 0.72);
}
.nav-inner {
max-width: var(--maxw); margin: 0 auto;
display: flex; align-items: center; justify-content: space-between;
height: 48px; padding: 0 22px;
}
.nav-logo { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.nav-logo:hover { text-decoration: none; }
.nav-logo .dot { color: var(--blue); }
.nav-logo .w-uni { color: #1d1d1f; font-weight: 800; }
.nav-logo .w-dan { color: var(--brand-gray); font-weight: 700; }
.nav.dark .nav-logo .w-uni { color: #ffffff; }
.nav.dark .nav-logo .w-dan { color: #9a9aa0; }
.nav.dark .nav-logo { color: #f5f5f7; }
.nav-links { display: flex; gap: 28px; align-items: center; list-style: none; }
.nav-links a {
font-size: 0.82rem; color: var(--ink-2); font-weight: 400;
transition: color 0.2s;
position: relative; /* su damlası efekti için */
--navblue: #a3c6ea; /* "Ücretsiz Görüşme" butonunun mavisi */
}
.nav.dark .nav-links a { color: rgba(255,255,255,0.8); }
.nav-links a:hover { text-decoration: none; }
/* Koyu ve açık nav'da aynı mavi: CTA butonunun rengi */
.nav.dark .nav-links a { --navblue: #a3c6ea; }
/* Su damlası: farenin konumundan dairesel genişleyen mavi metin kopyası */
.nav-links a:not(.nav-cta)::after {
content: attr(data-text);
position: absolute; left: 0; top: 0; width: 100%; height: 100%;
/* Kopya metin, gerçek metnin TAM üstüne oturmalı. Mobil menüde 'nın
17px dikey padding'i var; padding devralınmazsa kopya 17px yukarı
kayıyor ve damla açılırken yazı kayıyormuş gibi görünüyordu.
Masaüstünde 'nın padding'i 0 → hiçbir şey değişmez. */
padding: inherit; box-sizing: border-box;
color: var(--navblue); pointer-events: none; white-space: nowrap;
clip-path: circle(0% at var(--rx, 50%) var(--ry, 50%));
transition: clip-path 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Damla yalnızca gerçek imleçli cihazlarda açılır. Dokunmatikte :hover
dokunduktan sonra "yapışır" ve 7 sn'lik geçiş menüde asılı kalırdı. */
@media (hover: hover) and (pointer: fine) {
.nav-links a:not(.nav-cta):hover::after {
clip-path: circle(150% at var(--rx, 50%) var(--ry, 50%));
}
}
.nav-links a:not(.nav-cta).is-active::after {
clip-path: circle(150% at var(--rx, 50%) var(--ry, 50%));
}
/* Aktif sayfa: tıklandıktan sonra mavi kalır (koyu nav kuralını ezmesi için özgüllük yüksek) */
.nav .nav-links a.is-active,
.nav.dark .nav-links a.is-active { color: var(--navblue); }
@media (prefers-reduced-motion: reduce) {
.nav-links a:not(.nav-cta)::after { transition: none; }
}
.nav-cta {
background: #a3c6ea; color: #0b2540 !important; padding: 6px 14px;
border-radius: 980px; font-size: 0.8rem !important; font-weight: 600;
transition: background 0.2s, transform 0.15s;
white-space: nowrap;
}
.nav-cta:hover { background: #bcd6f2; text-decoration: none; }
.nav-cta:active { transform: scale(0.97); }
/* ---------- WhatsApp logosu (emoji yerine, buton rengini alır) ---------- */
.wa-ico {
width: 1.15em; height: 1.15em; fill: currentColor;
display: inline-block; vertical-align: -0.2em; margin-right: 0.45em;
flex: none;
}
.wa-ico-lg { width: 1.6rem; height: 1.6rem; margin: 0; fill: #174978; }
a[href^="https://wa.me"] { white-space: nowrap; }
/* ---------- Buttons ---------- */
.btn {
display: inline-block; padding: 13px 28px; border-radius: 980px;
font-size: 1.05rem; font-weight: 500; cursor: pointer; border: none;
transition: transform 0.15s var(--ease), background 0.2s, box-shadow 0.3s;
}
.btn:active { transform: scale(0.97); }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-hover); box-shadow: 0 8px 30px rgba(0, 113, 227, 0.35); }
.btn-ghost { background: transparent; color: var(--blue); border: 1px solid var(--blue); }
.btn-ghost:hover { background: var(--blue); color: #fff; }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { box-shadow: 0 8px 30px rgba(255,255,255,0.25); }
/* ---------- Sections ---------- */
section { padding: 110px 22px; position: relative; overflow-x: clip; }
.container { max-width: var(--maxw); margin: 0 auto; }
.container-wide { max-width: 1280px; margin: 0 auto; }
.center { text-align: center; }
.section-dark { background: var(--bg-dark); color: #f5f5f7; }
.section-dark .subhead { color: #a1a1a6; }
.section-soft { background: var(--bg-soft); }
/* ---------- Hero ---------- */
.hero {
min-height: 100vh; /* eski tarayıcı yedeği */
min-height: 100svh; /* mobil: adres çubuğu açıkken de tam ekran, zıplamaz */
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center;
background: radial-gradient(ellipse 80% 60% at 50% -10%, #12233f 0%, #000 62%);
color: #f5f5f7;
padding: 130px 22px 90px;
perspective: 1200px;
overflow: hidden;
}
.hero > *:not(.float-chip) { position: relative; z-index: 2; }
.hero .display { max-width: 900px; }
.hero .subhead { max-width: 640px; margin: 1.4rem auto 2.2rem; }
.hero-badge {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.14);
padding: 7px 16px; border-radius: 980px;
font-size: 0.82rem; color: #d2d2d7; margin-bottom: 1.6rem;
backdrop-filter: blur(10px);
}
.hero-badge .eu-star { color: var(--gold-light); }
/* Rozetler AB Şeffaflık Sicili'ndeki kaydımıza açılır: tıklanabilir olduğu
belli olsun diye hafif bir hover, ama altı çizili link görünümü olmadan. */
a.hero-badge, a.eu-badge { text-decoration: none; transition: background 0.2s var(--ease), border-color 0.2s var(--ease); }
a.hero-badge:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.26); text-decoration: none; }
a.eu-badge:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.3); text-decoration: none; }
.hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.gradient-text {
background: linear-gradient(100deg, #a8cdf0 0%, #5b93c9 55%, #3e6e96 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
/* ---------- Hero başlık: Apple tarzı harf saçılma (scatter) animasyonu ---------- */
.hero-line1, .hero-line2 { display: inline-block; }
.hero-answer { display: none; }
.hero .display .hero-answer { white-space: normal; } /* uzun cevap satırı tam boyutta kalır, gerekirse sarar */
/* Başlık+alt metin bloğu: min-height JS'te sabitlenir; içerik üstten hizalı olduğundan
geçişte ilk satır asla kaymaz, CTA butonları da yerinden oynamaz */
#heroTextBlock { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
/* Alt metin hero'da KALIR (denetim Y2): sitenin ne yaptığını anlatan tek cümle
o. Eskiden 2,5 saniyede blur'lanıp `display:none` ile siliniyordu; sayfaya
üç saniye sonra bakan herkes ürünü açıklayan metni hiç görmüyordu.
Gizleme kuralı (`#heroSubhead.hide`) bu yüzden kaldırıldı. */
/* Harf parçacıkları: JS her harfi .hchar span'ına böler ve transform/blur değerlerini atar.
.hword sarmalayıcısı kelimelerin harf ortasından bölünmesini engeller. */
.hword { display: inline-block; white-space: nowrap; }
.hchar {
display: inline-block;
transition: transform 0.69s cubic-bezier(0.16,1,0.3,1), opacity 0.69s cubic-bezier(0.16,1,0.3,1), filter 0.69s cubic-bezier(0.16,1,0.3,1);
will-change: transform, opacity, filter;
}
/* background-clip:text, transform'lu alt span'larda kırılır — gradyan her harfe, satır
genelindeki konumuna göre dilimlenerek uygulanır (background-size/position JS'te atanır) */
.gradient-text .hchar {
background-image: linear-gradient(100deg, #a8cdf0 0%, #5b93c9 55%, #3e6e96 100%);
background-repeat: no-repeat;
-webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Nokta/soru işareti: genişlik baştan "?" genişliğine göre rezerve edilir — geçişte satır kaymaz */
.hero-dot {
display: inline-block; width: 0.62em; text-align: left;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.hero-dot.flip { opacity: 0; transform: scale(0.3); }
/* EP rozet metni yalnızca mobilde iki satıra kırılır */
@media (min-width: 861px) { .bp-m { display: none; } }
/* Mobil hero CTA sırası: "409 Bölümü Gör" üstte, simülasyon altta */
@media (max-width: 860px) {
.hero-ctas { flex-direction: column; align-items: center; }
.hero-ctas .btn-ghost { order: 1; }
.hero-ctas .btn-primary { order: 2; }
}
/* ---------- 3D Logo (brand emblem) ---------- */
.logo-scene {
width: 280px; height: 260px; margin: 0 auto 1.4rem;
perspective: 1000px; position: relative;
}
.logo3d {
width: 100%; height: 100%; position: relative;
transform-style: preserve-3d;
animation: logoFloat 9s ease-in-out infinite;
transition: transform 0.3s var(--ease);
}
@keyframes logoFloat {
0%, 100% { transform: rotateX(14deg) rotateY(-12deg) translateZ(0); }
33% { transform: rotateX(6deg) rotateY(10deg) translateZ(22px); }
66% { transform: rotateX(12deg) rotateY(-2deg) translateZ(8px); }
}
/* Original logo, untouched: cap static, star ring revolves around its own circle center.
A STATIC conic mask hides the sector behind the cap, so stars fade out there and re-emerge. */
.logo-orig { position: relative; width: 100%; height: 100%; }
.logo-orig img, .logo-orig .star-mask {
position: absolute; inset: 0; width: 100%; height: 100%;
}
.logo-orig img { object-fit: contain; }
.star-mask {
/* Kepin altındaki yıldızları gizler + bir sektörü %45 karartıp gölge/derinlik
hissi verir. (Sabit görünen "ölü yıldız" bu maske değildi; emblem-cap.webp'ye
gömülü başıboş bir yıldızdı, kaynaktan silindi.) */
-webkit-mask-image: conic-gradient(from 180deg at 49.9% 49.9%,
#000 0deg, #000 58deg, rgba(0,0,0,0.45) 70deg, transparent 82deg, transparent 195deg, rgba(0,0,0,0.45) 210deg, #000 224deg, #000 360deg);
mask-image: conic-gradient(from 180deg at 49.9% 49.9%,
#000 0deg, #000 58deg, rgba(0,0,0,0.45) 70deg, transparent 82deg, transparent 195deg, rgba(0,0,0,0.45) 210deg, #000 224deg, #000 360deg);
}
.logo-orig .lo-stars {
transform-origin: 49.9% 49.9%;
animation: starsRevolve 36s linear infinite;
}
@keyframes starsRevolve { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.logo-orig .lo-stars, .mini-logo .mini-mask img { animation: none; }
}
/* legacy alias kept for pages using old markup */
.cap-scene {
width: 260px; height: 210px; margin: 0 auto 1.2rem;
perspective: 1100px; position: relative;
}
.cap-3d {
width: 100%; height: 100%; position: relative;
transform-style: preserve-3d;
animation: capFloat 9s ease-in-out infinite;
}
@keyframes capFloat {
0%, 100% { transform: rotateX(62deg) rotateZ(-14deg) translateZ(0); }
33% { transform: rotateX(55deg) rotateZ(2deg) translateZ(14px); }
66% { transform: rotateX(59deg) rotateZ(10deg) translateZ(6px); }
}
/* skullcap: 8-sided tapered drum */
.cap-skull {
position: absolute; left: 50%; top: 42%; width: 0; height: 0;
transform-style: preserve-3d;
transform: translateZ(-40px);
}
.cap-skull .sk {
position: absolute; left: -22px; top: -52px;
width: 44px; height: 52px;
background: linear-gradient(180deg, #26262b 0%, #101013 100%);
transform-origin: bottom center;
}
.cap-skull .sk:nth-child(1) { transform: rotateZ(0deg) translateY(-50px) rotateX(95deg); }
.cap-skull .sk:nth-child(2) { transform: rotateZ(45deg) translateY(-50px) rotateX(95deg); }
.cap-skull .sk:nth-child(3) { transform: rotateZ(90deg) translateY(-50px) rotateX(95deg); }
.cap-skull .sk:nth-child(4) { transform: rotateZ(135deg) translateY(-50px) rotateX(95deg); }
.cap-skull .sk:nth-child(5) { transform: rotateZ(180deg) translateY(-50px) rotateX(95deg); }
.cap-skull .sk:nth-child(6) { transform: rotateZ(225deg) translateY(-50px) rotateX(95deg); }
.cap-skull .sk:nth-child(7) { transform: rotateZ(270deg) translateY(-50px) rotateX(95deg); }
.cap-skull .sk:nth-child(8) { transform: rotateZ(315deg) translateY(-50px) rotateX(95deg); }
/* alternate facet shading for roundness */
.cap-skull .sk:nth-child(odd) { background: linear-gradient(180deg, #2e2e34 0%, #141417 100%); }
.cap-skull .sk:nth-child(2), .cap-skull .sk:nth-child(3) { background: linear-gradient(180deg, #3a3a41 0%, #1a1a1e 100%); }
.cap-skull .sk:nth-child(6), .cap-skull .sk:nth-child(7) { background: linear-gradient(180deg, #1a1a1d 0%, #0b0b0d 100%); }
/* headband rim */
.cap-rim {
position: absolute; left: 50%; top: 42%;
width: 118px; height: 118px; margin: -59px;
border-radius: 50%;
background: transparent;
border: 5px solid #0c0c0e;
box-shadow: 0 0 0 2px rgba(255,255,255,0.04), inset 0 0 12px rgba(0,0,0,0.8);
transform: translateZ(-52px);
}
/* mortarboard */
.cap-board {
position: absolute; left: 50%; top: 42%;
width: 190px; height: 190px; margin: -95px;
transform-style: preserve-3d;
transform: rotateZ(45deg);
}
.cap-board .face {
position: absolute; inset: 0; border-radius: 8px;
}
.cap-board .face.bottom {
transform: translateZ(-5px);
background: #0d0d0f;
box-shadow: inset 0 0 30px rgba(0,0,0,0.9);
}
.cap-board .face.top {
transform: translateZ(5px);
background:
radial-gradient(ellipse 120% 90% at 30% 25%, #3d3d45 0%, #26262b 45%, #17171a 100%);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
overflow: hidden;
}
/* moving light sheen across fabric */
.cap-board .sheen {
position: absolute; inset: -60%;
background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.10) 50%, transparent 58%);
animation: sheenMove 9s ease-in-out infinite;
}
@keyframes sheenMove {
0%, 100% { transform: translateX(-24%) translateY(-10%); }
50% { transform: translateX(24%) translateY(10%); }
}
/* stitched cross seams */
.cap-board .stitch {
position: absolute; inset: 14px; border-radius: 5px;
border: 1px dashed rgba(255,255,255,0.10);
}
.cap-board .stitch::before, .cap-board .stitch::after {
content: ""; position: absolute; background: rgba(0,0,0,0.35);
}
.cap-board .stitch::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.cap-board .stitch::after { top: 50%; left: 0; right: 0; height: 1px; }
/* board edge thickness (4 sides) */
.cap-board .edge {
position: absolute; background: linear-gradient(180deg, #2c2c32, #101013);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.09);
}
.cap-board .edge.e1 { left: 0; right: 0; top: 0; height: 10px; transform-origin: top; transform: rotateX(-90deg) translateZ(0px); }
.cap-board .edge.e2 { left: 0; right: 0; bottom: 0; height: 10px; transform-origin: bottom; transform: rotateX(90deg); background: linear-gradient(180deg, #141417, #060608); }
.cap-board .edge.e3 { top: 0; bottom: 0; left: 0; width: 10px; transform-origin: left; transform: rotateY(90deg); }
.cap-board .edge.e4 { top: 0; bottom: 0; right: 0; width: 10px; transform-origin: right; transform: rotateY(-90deg); background: linear-gradient(180deg, #18181c, #0a0a0c); }
/* covered center button */
.cap-button {
position: absolute; left: 50%; top: 42%;
width: 22px; height: 22px; margin: -11px;
border-radius: 50%;
background: radial-gradient(circle at 34% 30%, #4a4a52, #232328 60%, #121215);
box-shadow: 0 1px 3px rgba(0,0,0,0.6);
transform: translateZ(7px);
}
/* cord from button to board corner */
.tassel-cord {
position: absolute; left: 50%; top: 42%;
width: 96px; height: 2.5px; margin-top: -1px;
transform-origin: left center;
background: linear-gradient(90deg, #e6b400, #ffd23e);
transform: translateZ(7px) rotateZ(38deg);
border-radius: 2px;
}
/* hanging tassel: pivots from board corner, true vertical fall */
.cap-tassel {
position: absolute; left: 50%; top: 42%;
width: 3px; height: 84px;
margin-left: -1.5px;
transform-origin: top center;
/* place at corner: cord end (96px at 38deg) */
transform: translateZ(7px) translate(75px, 59px) rotateX(-62deg) rotateZ(4deg);
background: linear-gradient(180deg, #ffd23e, #e6a800 70%, #d19a00);
border-radius: 2px;
animation: tasselSwing 9s ease-in-out infinite;
}
@keyframes tasselSwing {
0%, 100% { transform: translateZ(7px) translate(75px, 59px) rotateX(-62deg) rotateZ(7deg); }
33% { transform: translateZ(7px) translate(75px, 59px) rotateX(-66deg) rotateZ(-8deg); }
66% { transform: translateZ(7px) translate(75px, 59px) rotateX(-60deg) rotateZ(3deg); }
}
.tassel-head {
position: absolute; bottom: 16px; left: 50%;
width: 9px; height: 12px; margin-left: -4.5px;
background: linear-gradient(180deg, #ffdb5c, #e6a800);
border-radius: 3px 3px 2px 2px;
box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.tassel-fringe {
position: absolute; bottom: -6px; left: 50%; width: 16px; margin-left: -8px;
display: flex; justify-content: space-between;
}
.tassel-fringe i {
width: 1.6px; height: 22px;
background: linear-gradient(180deg, #ffcc21, #cf9a00);
border-radius: 1px;
transform-origin: top;
}
.tassel-fringe i:nth-child(2n) { height: 20px; transform: rotateZ(3deg); }
.tassel-fringe i:nth-child(3n) { height: 23px; transform: rotateZ(-3deg); }
/* soft contact shadow below cap */
.cap-shadow {
position: absolute; left: 50%; bottom: -6px;
width: 190px; height: 34px; margin-left: -95px;
background: radial-gradient(ellipse at center, rgba(0,0,0,0.55), transparent 70%);
filter: blur(6px);
animation: shadowPulse 9s ease-in-out infinite;
}
@keyframes shadowPulse {
0%, 100% { transform: scale(1); opacity: 0.9; }
33% { transform: scale(0.88); opacity: 0.6; }
66% { transform: scale(0.95); opacity: 0.75; }
}
/* ---------- Floating 3D chips in hero ---------- */
.float-chip {
position: absolute;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
backdrop-filter: blur(14px);
border-radius: 16px; padding: 12px 18px;
font-size: 0.85rem; color: #e8e8ed; font-weight: 500;
transform-style: preserve-3d;
animation: chipFloat 9s ease-in-out infinite;
box-shadow: 0 20px 50px rgba(0,0,0,0.4);
white-space: nowrap;
}
.float-chip b { display: block; font-size: 1.15rem; color: #fff; }
@keyframes chipFloat {
0%, 100% { transform: translateY(0) rotateX(8deg) rotateY(-6deg); }
50% { transform: translateY(-16px) rotateX(-4deg) rotateY(6deg); }
}
@media (max-width: 900px) { .float-chip { display: none; } }
/* ---------- Stats band ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 30px; }
.stat b { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -0.03em; display: block;
background: linear-gradient(180deg, #fff 20%, var(--gold-light)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { color: #a1a1a6; font-size: 0.95rem; }
/* ---------- Cards ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 22px; }
.card {
background: var(--bg); border-radius: var(--radius-lg); padding: 40px 34px;
box-shadow: 0 2px 12px rgba(0,0,0,0.05);
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
transform-style: preserve-3d;
will-change: transform;
}
.card:hover { box-shadow: 0 24px 60px rgba(0,0,0,0.12); }
.card h3 { font-size: 1.35rem; margin-bottom: 0.6rem; letter-spacing: -0.015em; }
.card p { color: var(--gray); font-size: 0.98rem; line-height: 1.55; }
.card .icon3d {
width: 58px; height: 58px; border-radius: 16px; margin-bottom: 1.2rem;
display: grid; place-items: center; font-size: 1.7rem;
background: linear-gradient(145deg, #eaf3ff, #d5e8ff);
box-shadow: 0 8px 20px rgba(0,113,227,0.18), inset 0 1px 0 rgba(255,255,255,0.9);
transform: translateZ(30px);
}
.card-dark {
background: var(--bg-dark-2); color: #f5f5f7;
box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.card-dark p { color: #a1a1a6; }
.card-dark .icon3d { background: linear-gradient(145deg, #1f2c40, #14213a); box-shadow: 0 8px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08); }
/* tilt effect target */
.tilt { transition: transform 0.25s var(--ease), box-shadow 0.4s var(--ease); }
/* ---------- Belgium 3D map section ---------- */
.map-wrap {
perspective: 1400px;
display: flex; justify-content: center; padding: 20px 0;
}
.belgium-3d {
transform-style: preserve-3d;
transform: rotateX(22deg);
transition: transform 0.5s var(--ease);
filter: drop-shadow(0 34px 40px rgba(0, 0, 0, 0.45));
}
.belgium-3d svg { display: block; overflow: visible; }
.province {
cursor: pointer;
transition: filter 0.3s var(--ease), transform 0.3s var(--ease);
}
.province:hover { filter: brightness(1.25) saturate(1.15); transform: translateY(-6px); }
.city-pillar { cursor: pointer; transition: filter 0.25s; }
.city-pillar:hover { filter: brightness(1.4); }
.city-pillar .pulse { animation: pinPulse 2.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pinPulse {
0% { transform: scale(0.6); opacity: 0.9; }
70% { transform: scale(2.6); opacity: 0; }
100% { transform: scale(2.6); opacity: 0; }
}
/* Outside city labels: fade + leader line draw-in, staggered */
.city-label { opacity: 0; }
.belgium-3d.labels-in .city-label {
animation: labelIn 0.8s var(--ease) forwards;
animation-delay: var(--d, 0s);
}
@keyframes labelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.city-label .leader { stroke-dasharray: 400; stroke-dashoffset: 400; }
.belgium-3d.labels-in .city-label .leader {
animation: leaderDraw 1.1s var(--ease) forwards;
animation-delay: calc(var(--d, 0s) + 0.15s);
}
@keyframes leaderDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
.city-label { opacity: 1; }
.city-label .leader { stroke-dasharray: none; stroke-dashoffset: 0; }
}
.map-legend { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; margin-top: 34px; color: #a1a1a6; font-size: 0.84rem; }
.map-legend span { display: inline-flex; align-items: center; gap: 8px; }
.map-legend i { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }
.map-legend .pillar-demo { width: 3px; height: 16px; border-radius: 2px; background: linear-gradient(180deg, #5aa2ff, transparent); }
.map-tooltip {
position: absolute; pointer-events: none;
background: rgba(22,22,23,0.9); color: #fff; backdrop-filter: blur(10px);
padding: 10px 16px; border-radius: 12px; font-size: 0.85rem;
opacity: 0; transition: opacity 0.25s; z-index: 10;
border: 1px solid rgba(255,255,255,0.15);
transform: translate(-50%, -130%);
}
.map-tooltip b { display: block; font-size: 0.95rem; }
.map-tooltip span { color: #a1a1a6; font-size: 0.78rem; }
/* ---------- EU institutions 3D carousel ----------
Dönen halka, kartları yanlara doğru 3B'de savurur; 320px'te kartın kenarı
sayfa genişliğini ~74px aşıyordu ve bu taşmayı SAYFA seviyesindeki
`html/body { overflow-x: clip }` gizliyordu. Kendi sahnesinde kırpılıyor:
görsel sonuç aynı, ama taşma artık belgeye hiç ulaşmıyor.
Dikey serbest bırakıldı ki kartların gölgeleri kesilmesin. */
.eu-scene {
perspective: 1600px; height: 340px;
display: flex; align-items: center; justify-content: center;
overflow-x: clip; overflow-y: visible;
}
.eu-ring {
position: relative; width: 260px; height: 260px;
transform-style: preserve-3d;
animation: euSpin 36s linear infinite;
}
.eu-ring:hover { animation-play-state: paused; }
@keyframes euSpin {
from { transform: rotateY(0deg) rotateX(-6deg); }
to { transform: rotateY(360deg) rotateX(-6deg); }
}
.eu-card {
position: absolute; inset: 0;
background: linear-gradient(155deg, rgba(255,255,255,0.97) 0%, rgba(238,243,249,0.94) 55%, rgba(223,232,242,0.92) 100%);
border: 1px solid rgba(255,255,255,0.75);
border-radius: 22px; padding: 26px;
display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
backface-visibility: hidden;
box-shadow:
0 34px 70px rgba(0,0,0,0.5),
0 2px 8px rgba(11,30,61,0.10),
inset 0 1px 0 rgba(255,255,255,0.95),
inset 0 -1px 0 rgba(23,73,120,0.06);
overflow: hidden;
}
.eu-card::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(120% 70% at 20% 0%, rgba(255,255,255,0.9) 0%, transparent 55%),
radial-gradient(90% 60% at 85% 100%, rgba(143,193,240,0.16) 0%, transparent 60%);
pointer-events: none;
}
.eu-card > * { position: relative; }
.eu-card .waffle3d {
font-size: 3.6rem; align-self: center; margin: auto;
filter: drop-shadow(0 10px 16px rgba(0,0,0,0.25));
transform: translateZ(20px);
}
.eu-card .emoji { font-size: 2.4rem; margin-bottom: auto; }
.eu-card .logo {
height: 88px; width: 100%; max-width: 94%; object-fit: contain;
background: transparent; padding: 0;
align-self: center; margin: auto auto 14px;
}
.eu-card b { color: var(--ink); font-size: 1.05rem; letter-spacing: -0.01em; }
.eu-card span { color: var(--ink-2); opacity: 0.75; font-size: 0.8rem; line-height: 1.4; }
/* ---------- Process timeline ---------- */
.timeline { counter-reset: step; display: grid; gap: 18px; }
.step {
display: flex; gap: 24px; align-items: flex-start;
background: #fff; border-radius: var(--radius); padding: 28px 30px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.step:hover { transform: translateX(6px); box-shadow: 0 12px 34px rgba(0,0,0,0.1); }
.step::before {
counter-increment: step; content: counter(step, decimal-leading-zero);
font-size: 1.4rem; font-weight: 700; color: var(--blue);
background: linear-gradient(145deg, #eaf3ff, #d5e8ff);
min-width: 58px; height: 58px; border-radius: 16px;
display: grid; place-items: center;
box-shadow: 0 6px 16px rgba(0,113,227,0.15);
}
.step h3 { font-size: 1.15rem; margin-bottom: 4px; }
.step p { color: var(--gray); font-size: 0.95rem; line-height: 1.5; }
/* ---------- Search page ---------- */
.search-hero {
background: radial-gradient(ellipse 70% 60% at 50% -20%, #12233f 0%, #000 65%);
color: #f5f5f7; padding: 150px 22px 60px; text-align: center;
}
.search-box {
max-width: 700px; margin: 2rem auto 0; position: relative;
}
.search-box input {
width: 100%; padding: 18px 26px 18px 56px;
border-radius: 980px; border: 1px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.1); backdrop-filter: blur(20px);
color: #fff; font-size: 1.1rem; outline: none;
transition: background 0.3s, border 0.3s, box-shadow 0.3s;
font-family: inherit;
}
.search-box input::placeholder { color: rgba(255,255,255,0.5); }
.search-box input:focus { background: rgba(255,255,255,0.16); border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,113,227,0.25); }
.search-box .lens { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); font-size: 1.2rem; opacity: 0.6; }
.filters {
display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
margin-top: 1.6rem;
}
.filters select, .filters .seg {
background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
color: #fff; border-radius: 980px; padding: 9px 18px; font-size: 0.88rem;
outline: none; cursor: pointer; font-family: inherit;
backdrop-filter: blur(10px);
appearance: none; -webkit-appearance: none;
}
.filters select option { color: #1d1d1f; }
.seg-group { display: inline-flex; background: rgba(255,255,255,0.1); border-radius: 980px; padding: 3px; border: 1px solid rgba(255,255,255,0.18); }
.seg-group button {
border: none; background: transparent; color: rgba(255,255,255,0.75);
padding: 8px 20px; border-radius: 980px; font-size: 0.88rem; cursor: pointer;
transition: background 0.25s, color 0.25s; font-family: inherit; font-weight: 500;
}
.seg-group button.active { background: #fff; color: var(--ink); }
.clear-btn {
background: transparent; border: 1px solid rgba(255,255,255,0.3);
color: rgba(255,255,255,0.75); border-radius: 980px; padding: 9px 18px;
font-size: 0.85rem; cursor: pointer; font-family: inherit;
transition: background 0.2s, color 0.2s;
}
.clear-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.prog-link { color: inherit; }
.prog-link:hover { color: var(--blue); text-decoration: none; }
.prog-link .ext { font-size: 0.8em; color: var(--blue); opacity: 0; transition: opacity 0.2s; }
.prog-card:hover .ext { opacity: 1; }
.result-meta { color: var(--gray); font-size: 0.92rem; margin: 26px 0 18px; }
.results { display: grid; gap: 14px; }
.prog-card {
background: #fff; border-radius: var(--radius); padding: 24px 28px;
display: grid; grid-template-columns: 1fr auto; gap: 6px 18px; align-items: center;
box-shadow: 0 1px 6px rgba(0,0,0,0.05);
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
animation: cardIn 0.5s var(--ease) backwards;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(14px); } }
.prog-card:hover { transform: translateY(-3px) scale(1.008); box-shadow: 0 16px 40px rgba(0,0,0,0.1); }
.prog-card h3 { font-size: 1.12rem; letter-spacing: -0.01em; }
/* Türkçe bölüm adı — İngilizce başlığın altında, üniversite adının üstünde */
.prog-card .prog-tr { font-size: 0.84rem; color: var(--gray); margin: 3px 0 5px; letter-spacing: -0.005em; }
.prog-card .uni { color: var(--blue); font-size: 0.9rem; font-weight: 500; }
.prog-card .meta { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.chip {
font-size: 0.76rem; padding: 5px 12px; border-radius: 980px;
background: var(--bg-soft); color: var(--ink-2); font-weight: 500;
}
.chip.level-bachelor { background: #e8f4e8; color: #1a7a2e; }
.chip.level-master { background: #e3edf7; color: #174978; }
.prog-card .price { font-size: 1.05rem; font-weight: 700; text-align: right; white-space: nowrap; }
.prog-card .price small { display: block; font-weight: 400; color: var(--gray); font-size: 0.72rem; }
.prog-card .price.price-eu { font-size: 0.82rem; font-weight: 600; color: var(--blue); margin-top: 4px; }
.prog-card .price.price-eu small { font-size: 0.66rem; }
.load-more { display: block; margin: 34px auto 0; }
.no-result { text-align: center; padding: 60px 0; color: var(--gray); }
/* ---------- FAQ ---------- */
details {
background: #fff; border-radius: var(--radius); padding: 24px 30px; margin-bottom: 12px;
transition: box-shadow 0.3s;
}
details:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.07); }
details summary {
font-weight: 600; font-size: 1.08rem; cursor: pointer; list-style: none;
display: flex; justify-content: space-between; align-items: center;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; font-size: 1.5rem; color: var(--blue); font-weight: 300; transition: transform 0.3s var(--ease); }
details[open] summary::after { transform: rotate(45deg); }
details p { margin-top: 14px; color: var(--gray); line-height: 1.6; }
/* ---------- Contact / footer ---------- */
.contact-band {
background: linear-gradient(140deg, #0b1e3d 0%, #000 70%);
color: #f5f5f7; text-align: center; border-radius: var(--radius-lg);
padding: 80px 40px; max-width: 1100px; margin: 0 auto;
box-shadow: 0 40px 100px rgba(0, 30, 80, 0.35);
}
footer { overflow-x: clip; background: var(--bg-soft); padding: 50px 22px 40px; font-size: 0.85rem; color: var(--gray); }
footer .cols { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; }
footer h4 { color: var(--ink); font-size: 0.85rem; margin-bottom: 12px; }
footer ul { list-style: none; }
footer li { margin-bottom: 8px; }
footer a { color: var(--gray); }
footer a:hover { color: var(--blue); }
footer .fineprint { max-width: var(--maxw); margin: 34px auto 0; padding-top: 22px; border-top: 1px solid #d2d2d7; }
/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition-duration: 0.01ms !important; }
.reveal { opacity: 1; transform: none; }
}
/* ---------- Nav: burger + mobile menu ---------- */
.nav-burger {
display: none; flex-direction: column; gap: 5px;
background: none; border: 0; cursor: pointer; padding: 8px;
}
.nav-burger span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s; }
.nav.dark .nav-burger span { background: #f5f5f7; }
.nav.open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 860px) {
.nav-burger { display: flex; position: relative; z-index: 2; }
.nav-links {
flex-direction: column; gap: 0;
display: none;
}
.nav.open .nav-links { display: flex; }
.nav-links li { width: 100%; }
}
/* Program detay sayfası — başlık altındaki Türkçe bölüm adı */
.prog-tr-name {
font-size: clamp(0.95rem, 2vw, 1.12rem); font-weight: 500;
color: #9ec7ff; margin-top: 10px; letter-spacing: -0.005em;
}
/* ---------- Program detay: üçlü kart (Hakkında · Koşullar · Meslek Portföyü) ---------- */
.prog-cards {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
margin-bottom: 40px; align-items: stretch;
}
@media (max-width: 860px) { .prog-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .prog-cards { grid-template-columns: 1fr; } }
.prog-cards .card { padding: 26px 22px; display: flex; flex-direction: column; }
.prog-cards .card h3 { font-size: 1.18rem; margin-bottom: 0.55rem; }
.prog-cards .card p { font-size: 0.93rem; line-height: 1.6; color: var(--ink-2); }
/* Koşul / meslek listeleri */
.pc-list { list-style: none; margin: 0; padding: 0; }
.pc-list li {
position: relative; padding-left: 20px; margin-bottom: 9px;
font-size: 0.91rem; line-height: 1.55; color: var(--ink-2);
}
.pc-list li::before {
content: ""; position: absolute; left: 0; top: 8px;
width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}
.pc-list.careers li::before { background: #1a7a2e; }
.pc-label { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray); margin: 14px 0 7px; }
.pc-label:first-of-type { margin-top: 4px; }
.pc-src { margin-top: auto; padding-top: 14px; font-size: 0.78rem; }
.pc-src a { color: var(--blue); text-decoration: none; }
.pc-src a:hover { text-decoration: underline; }
.pc-note { font-size: 0.86rem; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 860px) {
.prog-cards { gap: 16px; }
.prog-cards .card { padding: 26px 22px; }
}
/* ---------- Mobil dokunma ve okunabilirlik (Apple HIG: min 44px hedef) ---------- */
@media (max-width: 760px) {
/* Dokunma hedefleri en az 44px */
.nav-burger { padding: 12px 10px; min-width: 44px; min-height: 44px; justify-content: center; }
.filters select, .filters .seg, .filters-toggle,
.seg-group button, .adm-field select, .adm-field input, .adm-nav button {
min-height: 44px;
}
.filters select, .adm-field select { padding-top: 10px; padding-bottom: 10px; }
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
/* Program kartındaki üniversite linki daha rahat tıklanır */
.prog-card .uni { display: inline-block; padding: 6px 0; }
.prog-card .prog-link { display: inline-block; padding: 2px 0; }
/* Küçük yazıları okunabilir tabana çek (min 12px) */
.chip { font-size: 0.78rem; padding: 6px 12px; }
.prog-card .prog-tr { font-size: 0.86rem; }
.eu-badge { font-size: 0.78rem; }
.pc-list li { font-size: 0.93rem; }
/* Liste madde işaretleri hizası */
.pc-list li::before { top: 9px; }
/* Chat widget: 9.6px/11.2px yazılar mobilde okunmuyordu */
.uda-disc { font-size: 0.72rem; max-width: 60%; }
.uda-sub { font-size: 0.76rem; }
/* Chat widget dokunma hedefleri */
.uda-close { width: 40px; height: 40px; }
.uda-form input { min-height: 44px; }
.uda-form button { min-width: 44px; min-height: 44px; }
}
@media (max-width: 400px) {
/* Çok dar ekranlarda yatay nefes payı */
.prog-card { padding: 18px 15px; }
.prog-cards .card { padding: 22px 18px; }
.chip { font-size: 0.75rem; padding: 5px 10px; }
}
/* ---------- Ana sayfa: program arama (2×2 kart) ---------- */
.home-search {
background: #000; /* mavi gradyan kaldırıldı — düz siyah */
color: #f5f5f7; padding: 24px 22px 78px; text-align: center;
}
.home-search .headline { font-size: clamp(1.9rem, 4.5vw, 3rem); }
.home-search .search-box { margin-top: 1.8rem; }
.home-meta { color: #a1a1a6; font-size: 0.88rem; margin: 26px 0 16px; }
.home-results {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
max-width: 980px; margin: 0 auto; text-align: left;
}
/* Ana sayfa kartı: dikey akış (başlık → çipler → ücret) */
.home-results .prog-card {
display: flex; flex-direction: column; gap: 12px;
padding: 22px 24px; align-items: stretch;
color: var(--ink); /* koyu bölümden miras kalan açık rengi ez */
}
.home-results .prog-card h3, .home-results .prog-link { color: var(--ink); }
.home-card .uni-plain { color: var(--blue); font-size: 0.88rem; font-weight: 500; display: block; margin-top: 4px; }
/* Kartın her yeri tıklanabilir: başlık linki kartın tamamına yayılır */
.home-results .prog-card { position: relative; cursor: pointer; }
.home-card .prog-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.home-results .prog-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0,0,0,0.16); }
.home-card .meta { display: flex; flex-wrap: wrap; gap: 7px; }
.home-card .home-price {
margin-top: auto; padding-top: 4px;
font-size: 1.15rem; font-weight: 700; letter-spacing: -0.015em; color: var(--ink);
}
.home-card .home-price small { display: block; font-size: 0.72rem; font-weight: 400; color: var(--gray); letter-spacing: 0; }
.home-card h3 { font-size: 1.02rem; line-height: 1.35; }
@media (max-width: 720px) {
.home-search { padding: 70px 18px 64px; }
.home-results { grid-template-columns: 1fr; gap: 13px; }
}
/* İstatistikler — mavi ton (hero altından şehir bölümünün altına taşındı) */
.stats-blue .stat b {
background: linear-gradient(180deg, #ffffff 15%, #a3c6ea);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Kart 2: mavi yönlendirme metinleri ve simülasyon butonu */
.pc-note-blue { color: var(--blue) !important; font-weight: 500; }
.pc-services { margin-top: 8px; font-size: 0.86rem; }
.pc-services a {
display: inline-flex; align-items: center; gap: 6px;
color: var(--blue); font-weight: 600; text-decoration: none;
}
.pc-services a:hover { text-decoration: none; }
.pc-arrow {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; flex: none;
border-radius: 50%; background: rgba(23,73,120,0.08); color: var(--blue);
font-size: 0.86rem; line-height: 1;
transition: background 0.2s, transform 0.2s;
}
.pc-services a:hover .pc-arrow { background: rgba(23,73,120,0.18); transform: translate(2px, -2px); }
/* "Ücretsiz Başvuru Simülasyonu" — mavi buton */
.pc-simbtn {
display: inline-block; margin-top: 9px; padding: 8px 16px;
border-radius: 980px; background: rgba(23,73,120,0.08);
color: var(--blue); font-size: 0.8rem; font-weight: 600; text-decoration: none;
transition: background 0.2s;
}
.pc-simbtn:hover { background: rgba(23,73,120,0.16); text-decoration: none; }
/* ---------- Kabul simülasyonu: "Nasıl hesaplıyoruz?" kartı ----------
Üstteki simülasyon kartıyla aynı genişlik (900px) ve aynı köşe yarıçapı. */
.calc-band {
max-width: 900px; margin: 0 auto; padding: 64px 52px;
background: linear-gradient(150deg, #0b1e3d 0%, #000 72%);
color: #f5f5f7; text-align: center;
border-radius: var(--radius-lg);
box-shadow: 0 30px 80px rgba(0, 30, 80, 0.30);
}
.calc-band h2 {
font-size: clamp(2rem, 4.8vw, 2.9rem);
letter-spacing: -0.024em; line-height: 1.1; margin: 12px 0 0;
}
.calc-band p {
color: #a1a1a6;
font-size: clamp(1.1rem, 2.2vw, 1.45rem); /* hero alt metniyle aynı */
line-height: 1.4; font-weight: 500;
max-width: 780px; margin: 22px auto 0;
}
.calc-band b { color: #fff; font-weight: 600; }
.calc-band .eyebrow { font-size: 0.95rem; letter-spacing: 0.09em; }
/* Kapanış cümlesi: ince ayraçla ayrılır */
.calc-band .calc-kicker {
margin-top: 30px; padding-top: 26px;
border-top: 1px solid rgba(255,255,255,0.12);
font-size: clamp(1.15rem, 2.4vw, 1.55rem);
}
@media (max-width: 760px) {
/* Mobilde .subhead 1.02rem'e iniyor — kart gövdesi de aynı ölçekte kalsın */
.calc-band p { font-size: 1.02rem; line-height: 1.5; }
.calc-band .calc-kicker { font-size: 1.1rem; }
.calc-band .eyebrow { font-size: 0.8rem; }
}
@media (max-width: 620px) {
.calc-band { padding: 44px 24px; }
}
/* Brüksel halkası: karta gelince hafifçe büyür.
Kartların satır içi 3D transformu olduğu için `scale` özelliği kullanılır —
transform'u ezmez, onunla birlikte uygulanır. */
.eu-card { transition: scale 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.eu-card:hover {
scale: 1.07;
box-shadow:
0 46px 90px rgba(0,0,0,0.58),
0 4px 14px rgba(11,30,61,0.16),
inset 0 1px 0 rgba(255,255,255,0.98),
inset 0 -1px 0 rgba(23,73,120,0.08);
}
/* Kartlar 3D dönerken tilt efekti yumuşak olsun */
.card, .cred, .plan { transform-style: preserve-3d; }
@media (prefers-reduced-motion: reduce) {
.eu-card { transition: none; }
.eu-card:hover { scale: 1; }
}
/* ---------- Site footer ---------- */
.site-footer {
background: radial-gradient(ellipse 80% 60% at 50% -10%, #12233f 0%, #000 62%);
color: #c8cdd6; padding: 44px 22px 24px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.foot-cols {
max-width: 1180px; margin: 0 auto;
display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr; gap: 28px 30px;
}
@media (max-width: 1000px) { .foot-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-cols { grid-template-columns: 1fr; } }
.foot-brand img { margin-bottom: 14px; }
.foot-brand p { font-size: 0.88rem; line-height: 1.6; color: #9aa3b2; }
.eu-badge {
display: inline-flex; align-items: center; gap: 10px;
margin-top: 14px; padding: 9px 14px;
border: 1px solid rgba(255,255,255,0.18); border-radius: 14px;
background: rgba(255,255,255,0.04);
color: #d2d2d7; font-size: 0.72rem; font-weight: 600;
line-height: 1.45; text-align: left; max-width: 100%;
}
.eu-badge span { white-space: nowrap; }
.eu-badge img { height: 26px !important; width: auto !important; flex: none; margin: 0 !important; vertical-align: middle !important; }
/* Sütun başlıkları h4 iken sayfa başlığından (h2) sonra bir seviye atlıyordu;
h3'e çekildi. Boyut/renk burada açıkça verildiği için görünüm değişmez. */
.site-footer h3, .site-footer h4 { color: #fff; font-size: 0.9rem; margin-bottom: 11px; letter-spacing: 0.02em; font-weight: 700; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 7px; }
.site-footer a { color: #9aa3b2; font-size: 0.88rem; transition: color 0.2s; }
.site-footer a:hover { color: #ffffff; text-decoration: none; }
.foot-cta .btn { display: inline-block; }
.foot-cta .hours { font-size: 0.8rem; color: #9aa3b2; margin-top: 12px; }
.foot-bottom {
max-width: 1180px; margin: 28px auto 0; padding-top: 16px;
border-top: 1px solid rgba(255,255,255,0.1);
display: flex; flex-wrap: wrap; gap: 10px 26px;
font-size: 0.78rem; color: #7d8593;
}
/* #5d6472 siyah üzerinde 3.53:1 idi — 0.78rem gövde metni için AA altı.
#8b93a2 → 6.79:1. */
.foot-bottom .foot-note { flex-basis: 100%; color: #8b93a2; }
/* ---------- Buttons on dark backgrounds: light-blue for contrast ---------- */
.hero .btn-primary, .section-dark .btn-primary, .search-hero .btn-primary,
.prog-hero .btn-primary, .contact-band .btn-primary, .site-footer .btn-primary {
background: #a3c6ea; color: #0b2540; font-weight: 600;
}
.hero .btn-primary:hover, .section-dark .btn-primary:hover, .search-hero .btn-primary:hover,
.prog-hero .btn-primary:hover, .contact-band .btn-primary:hover, .site-footer .btn-primary:hover {
background: #bcd6f2; box-shadow: 0 8px 30px rgba(163, 198, 234, 0.35);
}
.nav.dark .nav-cta { background: #a3c6ea; color: #0b2540 !important; }
.nav.dark .nav-cta:hover { background: #bcd6f2; }
/* ---------- Mini rotating logo (nav + footer) ---------- */
.mini-logo { position: relative; display: inline-block; flex: none; }
.mini-logo img, .mini-logo .mini-mask { position: absolute; inset: 0; width: 100%; height: 100%; }
.mini-logo img { object-fit: contain; }
.mini-logo .mini-mask {
-webkit-mask-image: conic-gradient(from 180deg at 49.9% 49.9%,
#000 0deg, #000 58deg, rgba(0,0,0,0.45) 70deg, transparent 82deg, transparent 195deg, rgba(0,0,0,0.45) 210deg, #000 224deg, #000 360deg);
mask-image: conic-gradient(from 180deg at 49.9% 49.9%,
#000 0deg, #000 58deg, rgba(0,0,0,0.45) 70deg, transparent 82deg, transparent 195deg, rgba(0,0,0,0.45) 210deg, #000 224deg, #000 360deg);
}
.mini-logo .mini-mask img {
transform-origin: 49.9% 49.9%;
animation: starsRevolve 36s linear infinite;
}
.nav-logo .wordmark { display: inline-flex; font-size: 1.18rem; font-weight: 800; letter-spacing: -0.02em; }
.foot-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
/* ---------- Uni page filters (light background) ---------- */
.uni-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.uni-filters select {
background: #fff; border: 1px solid #d2d2d7; color: var(--ink);
border-radius: 980px; padding: 10px 18px; font-size: 0.88rem;
font-family: inherit; outline: none; cursor: pointer;
appearance: none; -webkit-appearance: none;
transition: border 0.2s, box-shadow 0.2s;
}
.uni-filters select:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(23,73,120,0.12); }
/* ============ Mobile responsive pass ============ */
@media (max-width: 760px) {
section { padding: 64px 18px; }
.display { font-size: clamp(2.1rem, 9vw, 2.8rem); }
.headline { font-size: clamp(1.55rem, 6.5vw, 2.1rem); }
.subhead { font-size: 1.02rem; line-height: 1.5; }
.eyebrow { font-size: 0.74rem; }
.hero { padding: 108px 18px 64px; min-height: auto; }
.logo-scene { width: 210px; height: 195px; margin-bottom: 1rem; }
.hero .subhead { margin: 1.1rem auto 1.7rem; }
.hero-ctas { gap: 10px; }
.hero-ctas .btn { padding: 12px 22px; font-size: 0.95rem; }
.stats { grid-template-columns: 1fr 1fr; gap: 22px 12px; }
.stat b { font-size: 2.1rem; }
.stat span { font-size: 0.82rem; }
.card { padding: 26px 22px; }
.card h3 { font-size: 1.15rem; }
.card p { font-size: 0.92rem; }
.card .icon3d { width: 48px; height: 48px; font-size: 1.4rem; border-radius: 13px; margin-bottom: 0.9rem; }
.step { padding: 20px 18px; gap: 16px; }
.step::before { min-width: 44px; height: 44px; font-size: 1.05rem; border-radius: 12px; }
.step h3 { font-size: 1.02rem; }
.step p { font-size: 0.88rem; }
/* EU ring: smaller cards, tighter orbit */
.eu-scene { height: 270px; }
.eu-ring { width: 190px; height: 200px; }
.eu-card { padding: 18px; border-radius: 18px; }
.eu-card .logo { height: 58px; }
.eu-card b { font-size: 0.9rem; }
.eu-card span { font-size: 0.72rem; }
.eu-card .waffle3d { font-size: 2.6rem; }
/* Map */
.map-wrap { padding: 0; }
.map-legend { gap: 12px 16px; font-size: 0.76rem; margin-top: 22px; }
/* Search page */
.search-hero { padding: 110px 18px 50px; }
.search-box input { padding: 15px 20px 15px 48px; font-size: 1rem; }
.search-box .lens { left: 18px; font-size: 1rem; }
.filters { gap: 8px; }
.filters select, .clear-btn { flex: 1 1 45%; text-align: center; padding: 9px 10px; font-size: 0.82rem; }
.seg-group { flex: 1 1 100%; justify-content: center; }
.seg-group button { flex: 1; padding: 9px 8px; }
/* Program cards: stack price under title */
.prog-card { grid-template-columns: 1fr; gap: 8px; padding: 20px 18px; }
.prog-card h3 { font-size: 1.02rem; }
.prog-card .price { text-align: left; font-size: 1rem; }
.prog-card .price small { display: inline; margin-left: 6px; }
.chip { font-size: 0.78rem; padding: 6px 11px; }
/* Pricing */
.plan { padding: 28px 22px; }
.plan .price { font-size: 2rem; }
/* Uni & program pages */
.uni-hero { min-height: 48vh; padding: 110px 18px 40px; }
.facts .chip { font-size: 0.78rem; }
.keyfacts { grid-template-columns: 1fr 1fr; gap: 10px; }
.kf { padding: 14px; }
.kf b { font-size: 1.05rem; }
.map-embed { height: 250px; }
.video-wrap { border-radius: 18px; }
.uni-filters select { flex: 1 1 45%; font-size: 0.82rem; padding: 9px 12px; }
/* Contact band & footer */
.contact-band { padding: 48px 22px; border-radius: 20px; }
.contact-form { padding: 26px 20px; }
.site-footer { padding: 36px 18px 22px; }
.foot-bottom { font-size: 0.72rem; gap: 8px 18px; }
/* Künye satırındaki bağlantılar (Eurovia VZW, Unidanışmanlık) `.site-footer a`'nın
genel 0.88rem tabanını miras alıp metinden %22 büyük görünüyordu. Metinle
aynı boyuta indirip yalnızca ~%8 büyütme + kalınlıkla ayırt ediliyor. */
.foot-bottom a { font-size: 0.78rem; font-weight: 700; }
.office iframe { height: 210px; }
details { padding: 18px 20px; }
details summary { font-size: 0.95rem; }
details p { font-size: 0.9rem; }
.cost-table th, .cost-table td { padding: 11px 12px; font-size: 0.8rem; }
}
@media (max-width: 340px) {
.filters select, .clear-btn, .uni-filters select { flex-basis: 100%; }
}
/* ---------- Apple-style collapsible filters ---------- */
.filters-primary { align-items: center; }
.filters-toggle {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
color: #fff; border-radius: 980px; padding: 9px 18px; font-size: 0.88rem;
font-family: inherit; font-weight: 500; cursor: pointer;
backdrop-filter: blur(10px);
transition: background 0.25s, border 0.25s;
}
.filters-toggle:hover { background: rgba(255,255,255,0.16); }
.filters-toggle.active { background: #fff; color: var(--ink); border-color: #fff; }
.fcount[hidden] { display: none; }
.fcount {
background: var(--blue); color: #fff; font-size: 0.7rem; font-weight: 700;
min-width: 18px; height: 18px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}
.filters-toggle.active .fcount { background: var(--blue); }
.adv-filters {
display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
gap: 10px; max-width: 860px; margin: 0 auto;
overflow: hidden; opacity: 0; transform: translateY(-8px);
visibility: hidden; max-height: 0; margin-top: 0;
/* Yükseklik animasyonu yok: layout tetikleyen max-height GEÇİŞİ kaldırıldı.
Panel opacity+transform ile belirir (compositor dostu); kutu anında açılır.
Kapanışta max-height/margin çöküşü 0.35s gecikmeli tek sıçrama (süre 0s):
içerik yerinde solup kaybolur, kutu ancak ondan sonra kapanır.
(height:auto↔0 interpolasyon yapamadığı için gecikmeyi yok sayar;
bu yüzden sayısal max-height kullanılıyor — 600px her içeriği aşar.) */
transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
visibility 0s 0.35s, max-height 0s 0.35s, margin-top 0s 0.35s;
}
.adv-filters.open {
opacity: 1; transform: none; visibility: visible; max-height: 600px;
margin-top: 14px;
transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s;
}
.adv-filters select, .adv-filters .clear-btn {
background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
color: #fff; border-radius: 14px; padding: 11px 14px; font-size: 0.86rem;
font-family: inherit; outline: none; cursor: pointer;
appearance: none; -webkit-appearance: none;
backdrop-filter: blur(10px); text-align: left;
}
.adv-filters select option { color: #1d1d1f; }
.adv-filters .clear-btn { text-align: center; }
@media (max-width: 760px) {
/* `1fr` = minmax(auto, 1fr) ve bir