/* ══ JETONLAR ══════════════════════════════════════════════════════════ */ :root { color-scheme:light; /* Kalynda çekirdeği (kalynda-app KBrand) */ --k-lacivert:#19256F; --k-lacivert-2:#101841; --k-murekkep:#0B1030; --k-lacivert-3:#25369A; /* Nötr gri — laciverde çekik; seçilmiş, devralınmış değil */ --n-0:#FFFFFF; --n-25:#F7F8FB; --n-50:#F0F2F7; --n-100:#E3E6EE; --n-200:#CDD2DE; --n-300:#AEB5C6; --n-400:#8A92A8; --n-500:#687088; --n-600:#4E566D; --n-700:#363D54; --n-800:#22283F; --n-900:#12172E; --basari:#1F7A4D; --hata:#B42318; /* 8px ritmi */ --b-1:4px; --b-2:8px; --b-3:12px; --b-4:16px; --b-5:24px; --b-6:32px; --b-7:40px; --b-8:48px; --b-9:64px; --b-10:80px; --b-11:96px; --b-12:128px; /* Tipografi ölçeği */ --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-24:24px; --fs-28:28px; --fs-32:32px; --fs-h3:clamp(20px, 0.6vw + 16px, 24px); --fs-h2:clamp(32px, 2.4vw + 18px, 48px); --fs-h1:clamp(40px, 4.6vw + 16px, 80px); --fs-dev:clamp(44px, 6vw + 16px, 96px); --yazi-baslik:"Marcellus", "Forum", "Amiri", Georgia, serif; --yazi-govde:"Figtree", "Manrope", "IBM Plex Sans Arabic", -apple-system, "Segoe UI", system-ui, sans-serif; --kose-1:4px; --kose-2:8px; --kose-3:12px; --gecis:cubic-bezier(.2,.7,.2,1); /* Yükselti e0–e4 — laciverde çekik, katmanlı (yakın + uzak gölge) */ --e0:none; --e1:0 1px 2px rgb(11 16 48 / .06), 0 1px 1px rgb(11 16 48 / .04); --e2:0 1px 2px rgb(11 16 48 / .05), 0 3px 8px rgb(11 16 48 / .05), 0 12px 24px -12px rgb(11 16 48 / .14); --e3:0 2px 4px rgb(11 16 48 / .05), 0 8px 16px -4px rgb(11 16 48 / .08), 0 24px 48px -16px rgb(11 16 48 / .18); --e4:0 4px 8px rgb(11 16 48 / .06), 0 16px 32px -8px rgb(11 16 48 / .14), 0 44px 88px -24px rgb(11 16 48 / .30); --parilti:inset 0 1px 0 rgb(255 255 255 / .9); --koyu-e:0 1px 2px rgb(0 0 0 / .25), 0 16px 40px -16px rgb(0 0 0 / .6); /* Roller — varsayılan: Kurumsal Beyaz. Bileşenler yalnız bunları okur. */ --gece:#FFFFFF; --derin:#FFFFFF; --yuzey:#FFFFFF; --sig:#F7F8FB; --cizgi:#E3E6EE; --kart-zemin:#FFFFFF; --kart-kenar:#E3E6EE; --alan-kenar:#CDD2DE; --fildisi:#12172E; --soluk:#4E566D; --platin:#19256F; --platin-acik:#19256F; --deniz:#19256F; --deniz-koyu:#101841; --murekkep:#FFFFFF; --deniz-isik:#F0F2F7; --odak:#1D4ED8; --eylem-zemin:#19256F; --eylem-yazi:#FFFFFF; --eylem-basili:#101841; --rozet-zemin:#19256F; --rozet-yazi:#FFFFFF; --olur:#1F7A4D; --olur-metin:#FFFFFF; --cam:rgb(255 255 255 / .94); --cam-kenar:#FFFFFF; --turkuaz:#C9D1F2; --turkuaz-acik:#D9DFF7; --mercan:#19256F; --mercan-metin:#101841; --mercan-koyu:#19256F; --golge-yumusak:var(--e1); --golge-kalk:var(--e3); --derinlik:var(--e4); --dolu-cizgi:#CDD2DE; --takvim-ikon:none; --t-hero-1:#0B1030; --t-hero-2:#111A4D; --t-hero-3:#1C2A78; --t-hero-yazi:#FFFFFF; --t-hero-soluk:#C3C9E0; --t-bant-1:#16215E; --t-bant-2:#0B1030; --t-bant-kart:#1A2563; --t-metal:linear-gradient(90deg, #19256F, #25369A); --t-alt:#0B1030; --t-alt-yazi:#A7AECB; --t-alt-baglanti:#FFFFFF; --t-alt-cizgi:rgb(255 255 255 / .12); --t-alt-alan:rgb(255 255 255 / .06); /* Bileşen jetonları — tema bunları değiştirerek kahramanı, küre madalyonları ve haritayı boyar. */ --secim:#19256F; --hk-gunes:transparent; --hk-isik-1:rgb(143 166 255 / .16); --hk-isik-2:rgb(37 54 154 / .5); --t-cam-koyu:rgb(5 8 26 / .42); --acik-dugme-yazi:#19256F; --kure-dolgu:radial-gradient(circle at 34% 28%, #4458C4 0%, #22318A 46%, #121B52 100%); --kure-yazi:#FFFFFF; --kure-alt:#C9D1F2; --kure-uc-dolgu:radial-gradient(circle at 34% 28%, #FFFFFF 0%, #F3F5FB 55%, #DCE2F2 100%); --kure-uc-yazi:#19256F; --kure-uc-halka:#19256F; --kure-golge:rgb(11 16 48 / .55); --iz-cizgi:linear-gradient(180deg, #25369A, rgb(37 54 154 / .12)); --harita-golge:rgb(5 8 26 / .5); } /* ══ TEMALAR ══ Panelden seçilir (Ayarlar → Site teması), ile. Dördü de kurumsal ailede: iki açık zemin, iki lacivert zemin; kahraman hep lacivert. Kontrast: gövde ≥ 7, ikincil metin ≥ 4.8, kahraman ≥ 9. */ /* 1 · Kurumsal Beyaz (platin-ege) — varsayılan: kök jetonlar. */ :root[data-tema="platin-ege"] { color-scheme:light; } /* 2 · Kurumsal Gri (turkuaz) — zemin açık gri, kartlar ve bantlar beyaz. */ :root[data-tema="turkuaz"] { color-scheme:light; --gece:#F3F4F8; --sig:#FFFFFF; --cizgi:#DCE0E9; --kart-kenar:#DCE0E9; --alan-kenar:#C6CCDA; --deniz-isik:#E8EBF2; } /* 3 · Lacivert (derin-ege) — sayfanın kendisi Kalynda laciverti. */ :root[data-tema="derin-ege"] { color-scheme:dark; --gece:#101841; --derin:#0C1338; --yuzey:#151E4C; --sig:#0D1439; --cizgi:#28316B; --kart-zemin:#151E4C; --kart-kenar:#28316B; --alan-kenar:#3A4480; --fildisi:#F2F4FA; --soluk:#B4BAD4; --platin:#E4E7F4; --platin-acik:#FFFFFF; --deniz:#BAC6FF; --deniz-koyu:#DCE2FF; --murekkep:#101841; --deniz-isik:#1B255A; --odak:#8FA6FF; --eylem-zemin:#FFFFFF; --eylem-yazi:#19256F; --eylem-basili:#E3E6EE; --rozet-zemin:#2E3F9E; --rozet-yazi:#FFFFFF; --cam:rgb(16 24 65 / .92); --cam-kenar:rgb(255 255 255 / .10); --e1:0 1px 2px rgb(0 0 0 / .35); --e2:0 1px 2px rgb(0 0 0 / .3), 0 10px 24px -10px rgb(0 0 0 / .55); --e3:0 2px 4px rgb(0 0 0 / .3), 0 12px 28px -8px rgb(0 0 0 / .5), 0 28px 56px -20px rgb(0 0 0 / .55); --e4:0 4px 8px rgb(0 0 0 / .35), 0 20px 40px -10px rgb(0 0 0 / .55), 0 48px 96px -28px rgb(0 0 0 / .7); --parilti:inset 0 1px 0 rgb(255 255 255 / .06); --dolu-cizgi:#3A4480; --takvim-ikon:invert(1); --t-hero-1:#070B22; --t-hero-2:#0B1030; --t-hero-3:#18236A; --t-bant-1:#0B1030; --t-bant-2:#070B22; --t-bant-kart:#141D4F; --t-metal:linear-gradient(90deg, #8FA6FF, #C9D1F2); --t-alt:#070B22; } /* 4 · Gece (gece-platin) — mürekkep laciverdi, eylem Kalynda mavisi. */ :root[data-tema="gece-platin"] { color-scheme:dark; --gece:#0B1030; --derin:#080C26; --yuzey:#121A3E; --sig:#0E1436; --cizgi:#232B55; --kart-zemin:#121A3E; --kart-kenar:#232B55; --alan-kenar:#353E72; --fildisi:#F1F3F9; --soluk:#A6AEC9; --platin:#DCE1F2; --platin-acik:#FFFFFF; --deniz:#8FA6FF; --deniz-koyu:#B7C4FF; --murekkep:#FFFFFF; --deniz-isik:#171F4A; --odak:#8FA6FF; --eylem-zemin:#1D4ED8; --eylem-yazi:#FFFFFF; --eylem-basili:#1E40AF; --rozet-zemin:#1D4ED8; --rozet-yazi:#FFFFFF; --cam:rgb(11 16 48 / .92); --cam-kenar:rgb(255 255 255 / .08); --e1:0 1px 2px rgb(0 0 0 / .4); --e2:0 1px 2px rgb(0 0 0 / .35), 0 10px 24px -10px rgb(0 0 0 / .6); --e3:0 2px 4px rgb(0 0 0 / .35), 0 12px 28px -8px rgb(0 0 0 / .55), 0 28px 56px -20px rgb(0 0 0 / .6); --e4:0 4px 8px rgb(0 0 0 / .4), 0 20px 40px -10px rgb(0 0 0 / .6), 0 48px 96px -28px rgb(0 0 0 / .75); --parilti:inset 0 1px 0 rgb(255 255 255 / .05); --dolu-cizgi:#353E72; --takvim-ikon:invert(1); --t-hero-1:#05081A; --t-hero-2:#0B1030; --t-hero-3:#141C4A; --t-bant-1:#0E1436; --t-bant-2:#05081A; --t-bant-kart:#121A3E; --t-metal:linear-gradient(90deg, #1D4ED8, #8FA6FF); --t-alt:#05081A; } /* 5 · Yaz Platini (yaz-platin) — Ege turkuazı + derin okyanus + platin yüzeyler. Yaz ışığı, kurumsal disiplin: sarı/turuncu/pembe yok, rozet ve düğmeler dolu renk + beyaz yazı, açık zemin üstüne aynı rengin koyusu yok. Sayfa platin, kartlar beyaz ve yüzer. */ :root[data-tema="yaz-platin"] { color-scheme:light; --gece:#F2F5F8; --derin:#FFFFFF; --yuzey:#FFFFFF; --sig:#FFFFFF; --cizgi:#D9DFE6; --kart-zemin:#FFFFFF; --kart-kenar:#D9DFE6; --alan-kenar:#C2CAD4; --fildisi:#0A2540; --soluk:#48596B; --platin:#0A6E81; --platin-acik:#0A6E81; --deniz:#0A6E81; --deniz-koyu:#075466; --murekkep:#FFFFFF; --deniz-isik:#E9EDF2; --odak:#0B7FD1; --eylem-zemin:#0A7C8F; --eylem-yazi:#FFFFFF; --eylem-basili:#07606F; --rozet-zemin:#0A7C8F; --rozet-yazi:#FFFFFF; --turkuaz:#8FE3EE; --turkuaz-acik:#BDF0F6; --mercan:#0A7C8F; --mercan-metin:#075466; --mercan-koyu:#0A7C8F; --e1:0 1px 2px rgb(4 38 66 / .07), 0 1px 1px rgb(4 38 66 / .05); --e2:0 1px 2px rgb(4 38 66 / .06), 0 4px 10px rgb(4 38 66 / .06), 0 14px 28px -12px rgb(4 38 66 / .18); --e3:0 2px 4px rgb(4 38 66 / .06), 0 10px 20px -6px rgb(4 38 66 / .1), 0 28px 56px -18px rgb(4 38 66 / .24); --e4:0 4px 8px rgb(4 38 66 / .07), 0 18px 36px -8px rgb(4 38 66 / .16), 0 48px 96px -26px rgb(4 38 66 / .34); --parilti:inset 0 1px 0 rgb(255 255 255 / .95); --t-hero-1:#05325A; --t-hero-2:#0A64A0; --t-hero-3:#12B0C6; --t-hero-yazi:#FFFFFF; --t-hero-soluk:#D6F1F6; --t-bant-1:#0A5C92; --t-bant-2:#05325A; --t-bant-kart:#0B6AA3; --t-metal:linear-gradient(90deg, #0A7C8F, #3CCBDC); --t-alt:#04243F; --t-alt-yazi:#A9C8D8; --secim:#0A7C8F; --hk-gunes:rgb(255 255 255 / .2); --hk-isik-1:rgb(170 245 252 / .3); --hk-isik-2:rgb(25 200 220 / .5); --t-cam-koyu:rgb(3 35 65 / .3); --acik-dugme-yazi:#07506A; --kure-dolgu:radial-gradient(circle at 34% 28%, #5AD6E6 0%, #0C8497 44%, #064B5D 100%); --kure-yazi:#FFFFFF; --kure-alt:#CBF3F8; --kure-uc-dolgu:radial-gradient(circle at 34% 28%, #FFFFFF 0%, #EEF1F5 50%, #C7CED8 100%); --kure-uc-yazi:#07506A; --kure-uc-halka:#0A7C8F; --kure-golge:rgb(4 38 66 / .5); --iz-cizgi:linear-gradient(180deg, #0A7C8F, rgb(10 124 143 / .12)); --harita-golge:rgb(3 50 85 / .2); } /* Platin yüzey: kartlar beyazdan platine süzülen bir parıltı taşır, düğmeler basılabilir tuş gibi kalın. */ :root[data-tema="yaz-platin"] .kart-t, :root[data-tema="yaz-platin"] .rota-kart, :root[data-tema="yaz-platin"] .gunluk li, :root[data-tema="yaz-platin"] .adim, :root[data-tema="yaz-platin"] .panel { background:linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 55%, #F6F8FA 100%); } :root[data-tema="yaz-platin"] .dugme.dolu, :root[data-tema="yaz-platin"] .dugme.mercan, :root[data-tema="yaz-platin"] .ara-dugme { background:linear-gradient(180deg, #0E90A4 0%, #0A7C8F 55%, #086C7D 100%); box-shadow:var(--e2), inset 0 1px 0 rgb(255 255 255 / .28), inset 0 -2px 0 rgb(0 0 0 / .14); } :root[data-tema="yaz-platin"] .kahraman.deniz .dugme.mercan, :root[data-tema="yaz-platin"] .kahraman.deniz .dugme.dolu, :root[data-tema="yaz-platin"] section.blok.derin .dugme.dolu, :root[data-tema="yaz-platin"] section.blok.derin .dugme.mercan { background:linear-gradient(180deg, #FFFFFF 0%, #F1F4F7 100%); color:var(--acik-dugme-yazi); } /* Yaz haritası: turkuaz deniz (sol üstten güneş alır), platin kara denizden yükselir, rota derin lacivert çizgi + beyaz hale, duraklar derin deniz mavisi küre + beyaz numara. */ :root[data-tema="yaz-platin"] .gece-harita, :root[data-tema="yaz-platin"] .gece-harita .atlas, :root[data-tema="okyanus"] .gece-harita, :root[data-tema="okyanus"] .gece-harita .atlas { --hrt-deniz:#0B7DB5; --hrt-deniz-2:#2BD0E2; --hrt-deniz-isik:rgb(255 255 255 / .3); --hrt-kara:#BCC4CF; --hrt-kara-2:#F7F8FA; --hrt-kiyi:rgb(255 255 255 / .95); --hrt-izgara:rgb(255 255 255 / .12); --hrt-etiket:#0A2540; --hrt-koyu:#04213B; --hrt-vurgu:#04213B; --hrt-ikincil:#0A6E81; --hrt-parlak:rgb(255 255 255 / .7); --hrt-zemin:#FFFFFF; --hrt-golge:rgb(3 45 75 / .5); --hrt-rota:#04213B; --hrt-rota-isik:rgb(255 255 255 / .95); --hrt-durak:#064B5D; --hrt-durak-isik:#46CDE0; --hrt-durak-yazi:#FFFFFF; --hrt-durak-kenar:#FFFFFF; --hrt-etiket-zemin:#FFFFFF; } :root[data-tema="yaz-platin"] .kahraman.deniz .kahraman-harita, :root[data-tema="okyanus"] .kahraman.deniz .kahraman-harita { --hrt-kiyi:rgb(190 240 246 / .42); --hrt-ikincil:#BDF0F6; } :root[data-tema="yaz-platin"] .atlas { --hrt-deniz:#CFEFF4; --hrt-deniz-2:#E8F7FA; --hrt-kara:#FFFFFF; --hrt-kiyi:#7FA3B6; --hrt-izgara:rgb(10 110 129 / .08); --hrt-etiket:#0A2540; --hrt-koyu:#04213B; --hrt-vurgu:#0A6E81; --hrt-ikincil:#0B7FD1; --hrt-parlak:rgb(10 140 163 / .35); --hrt-zemin:#FFFFFF; } /* 6 · Okyanus (okyanus) — kullanıcı isteği (26 Eyl): "kahramandaki bu renk bütün sayfaların gövdesine". Gövde Ege okyanus mavisi, kartlar açık deniz mavisi ve yüzer, eylem parlak turkuaz + koyu yazı (9:1), vurgu metni açık turkuaz (≥4.5:1). Bantlar kahramanla aynı degrade. Rozet dolu beyaz + deniz mavisi yazı. */ :root[data-tema="okyanus"] { color-scheme:dark; --gece:#07497A; --derin:#05385F; --yuzey:#0B5C92; --sig:#084272; --cizgi:rgb(255 255 255 / .16); --kart-zemin:#0B6AA3; --kart-kenar:rgb(255 255 255 / .18); --alan-kenar:rgb(255 255 255 / .3); --fildisi:#FFFFFF; --soluk:#CFE6EF; --platin:#B5EEF4; --platin-acik:#D6F6FA; --deniz:#B5EEF4; --deniz-koyu:#D6F6FA; --murekkep:#07497A; --deniz-isik:rgb(255 255 255 / .1); --odak:#7FE7F2; --eylem-zemin:#2BC4D6; --eylem-yazi:#03243F; --eylem-basili:#1FA9BA; --rozet-zemin:#FFFFFF; --rozet-yazi:#07506A; --cam:rgb(7 73 122 / .9); --cam-kenar:rgb(255 255 255 / .14); --turkuaz:#8FE3EE; --turkuaz-acik:#BDF0F6; --mercan:#2BC4D6; --mercan-metin:#03243F; --mercan-koyu:#2BC4D6; --e1:0 1px 2px rgb(0 18 36 / .3); --e2:0 1px 2px rgb(0 18 36 / .28), 0 10px 24px -10px rgb(0 18 36 / .5); --e3:0 2px 4px rgb(0 18 36 / .28), 0 14px 30px -8px rgb(0 18 36 / .45), 0 30px 60px -22px rgb(0 18 36 / .5); --e4:0 4px 8px rgb(0 18 36 / .3), 0 22px 44px -10px rgb(0 18 36 / .5), 0 52px 104px -30px rgb(0 18 36 / .62); --parilti:inset 0 1px 0 rgb(255 255 255 / .12); --dolu-cizgi:rgb(255 255 255 / .3); --takvim-ikon:invert(1); --t-hero-1:#05325A; --t-hero-2:#0A64A0; --t-hero-3:#12B0C6; --t-hero-yazi:#FFFFFF; --t-hero-soluk:#D6F1F6; --t-bant-1:#0A5C92; --t-bant-2:#05325A; --t-bant-kart:#0B6AA3; --t-metal:linear-gradient(90deg, #2BC4D6, #B5EEF4); --t-alt:#031A2F; --t-alt-yazi:#A9C8D8; --secim:#2BC4D6; --hk-gunes:rgb(255 255 255 / .2); --hk-isik-1:rgb(170 245 252 / .3); --hk-isik-2:rgb(25 200 220 / .5); --t-cam-koyu:rgb(3 35 65 / .3); --acik-dugme-yazi:#07506A; --kure-dolgu:radial-gradient(circle at 34% 28%, #9CF0F7 0%, #2BC4D6 44%, #128DA2 100%); --kure-yazi:#03243F; --kure-alt:#05385F; --kure-uc-dolgu:radial-gradient(circle at 34% 28%, #FFFFFF 0%, #EEF1F5 50%, #C7CED8 100%); --kure-uc-yazi:#07506A; --kure-uc-halka:#2BC4D6; --kure-golge:rgb(0 12 28 / .55); --iz-cizgi:linear-gradient(180deg, #2BC4D6, rgb(43 196 214 / .15)); --harita-golge:rgb(2 30 55 / .3); } /* Gövdeye kahramanın ışığı: sol üstten turkuaz parıltı, derinde okyanus. */ :root[data-tema="okyanus"] body { background:radial-gradient(90% 50% at 12% 0%, rgb(43 196 214 / .14), transparent 62%), radial-gradient(70% 40% at 100% 30%, rgb(10 100 160 / .35), transparent 70%), var(--gece); } :root[data-tema="okyanus"] .kart-t, :root[data-tema="okyanus"] .rota-kart, :root[data-tema="okyanus"] .gunluk li, :root[data-tema="okyanus"] .adim, :root[data-tema="okyanus"] .panel { background:linear-gradient(180deg, #0E74B0 0%, #0B6AA3 60%, #0A6399 100%); } :root[data-tema="okyanus"] .gunluk li::after { background:#0E74B0; } :root[data-tema="okyanus"] .dugme.dolu, :root[data-tema="okyanus"] .dugme.mercan, :root[data-tema="okyanus"] .ara-dugme { background:linear-gradient(180deg, #4FD4E3 0%, #2BC4D6 55%, #1FB0C4 100%); color:#03243F; box-shadow:var(--e2), inset 0 1px 0 rgb(255 255 255 / .4), inset 0 -2px 0 rgb(0 0 0 / .12); } :root[data-tema="okyanus"] .atlas { --hrt-deniz:#0A4F80; --hrt-deniz-2:#0E6AA6; --hrt-kara:#06325A; --hrt-kiyi:rgb(155 231 240 / .6); --hrt-izgara:rgb(155 231 240 / .1); --hrt-etiket:#FFFFFF; --hrt-koyu:#FFFFFF; --hrt-vurgu:#9BE7F0; --hrt-ikincil:#C4F1F6; --hrt-parlak:rgb(155 231 240 / .45); --hrt-zemin:#05385F; } /* Okyanus · tarihler (kullanıcı örneği, 26 Eyl): AÇIK turkuaz geçiş #1093B8 → #10A9C2 — koyu/siyah ton yok. Bu açık zeminde yazı derin lacivert (4.4–5.6:1; beyaz 2.8:1 kalırdı). Günler beyaz kabartma tuş, fiyat hapı dolu lacivert + beyaz. Müsaitlik takvimi, özet bandı, fiyat tablosu ve tarih seçici aynı dilde. Belirteçler kökte: tarih seçici (.tarih-kutu) her temada bu açık geçişle açılır. */ :root { --acik-gecis:linear-gradient(115deg, #1093B8 0%, #139CBD 50%, #10A9C2 100%); --acik-yazi:#03243F; --acik-soluk:rgb(3 36 63 / .72); --tus-zemin:linear-gradient(180deg, #FFFFFF 0%, #F1F9FB 100%); --tus-yazi:#07506A; --tus-golge:0 1px 1px rgb(3 36 63 / .16), 0 3px 8px -2px rgb(3 36 63 / .3), inset 0 -1px 0 rgb(3 36 63 / .08), inset 0 1px 0 #FFFFFF; } :root[data-tema="okyanus"] .takvim-ay, :root[data-tema="okyanus"] table.fiyatlar, :root[data-tema="okyanus"] .takvim-ozet { background:var(--acik-gecis); border-color:rgb(255 255 255 / .5); color:var(--acik-yazi); box-shadow:0 2px 4px rgb(3 36 63 / .14), 0 16px 32px -12px rgb(3 36 63 / .38), inset 0 1px 0 rgb(255 255 255 / .45); } :root[data-tema="okyanus"] .takvim-bas { border-bottom-color:rgb(3 36 63 / .16); } :root[data-tema="okyanus"] .takvim-ad { color:var(--acik-yazi); } :root[data-tema="okyanus"] .takvim-fiyat { background:#05325A; color:#FFFFFF; } :root[data-tema="okyanus"] .takvim-ay .gun-bas, :root[data-tema="okyanus"] .takvim-ay .gun-bas.hafta-sonu { color:var(--acik-yazi); } :root[data-tema="okyanus"] .takvim-ay .gun { color:var(--acik-soluk); } :root[data-tema="okyanus"] .takvim-ay .gun.gecmis { color:rgb(3 36 63 / .42); } :root[data-tema="okyanus"] .takvim-ay .gun.acik { background:var(--tus-zemin); border-color:#FFFFFF; color:var(--tus-yazi); box-shadow:var(--tus-golge); } :root[data-tema="okyanus"] .takvim-ay a.gun.acik:active, :root[data-tema="okyanus"] .takvim-ay a.gun.acik:focus-visible { background:#05325A; color:#FFFFFF; border-color:#05325A; box-shadow:none; } :root[data-tema="okyanus"] .takvim-ay .gun.dolu { color:rgb(3 36 63 / .62); border-color:rgb(255 255 255 / .55); text-decoration-color:rgb(3 36 63 / .62); background:repeating-linear-gradient(135deg, rgb(3 36 63 / .22) 0 1px, transparent 1px 6px), rgb(255 255 255 / .3); } :root[data-tema="okyanus"] .takvim-ay .gun.bugun { box-shadow:0 0 0 2px #05325A inset, var(--tus-golge); } /* Takvim anahtarı (okyanus gövdesinde): örnek tuşlar kartın içindekilerle birebir. */ :root[data-tema="okyanus"] .takvim-anahtar .gun.acik { background:var(--tus-zemin); border-color:#FFFFFF; color:var(--tus-yazi); box-shadow:var(--tus-golge); } :root[data-tema="okyanus"] .takvim-anahtar .gun.dolu { color:#FFFFFF; border-color:rgb(255 255 255 / .5); text-decoration-color:#FFFFFF; background:repeating-linear-gradient(135deg, rgb(255 255 255 / .35) 0 1px, transparent 1px 6px), rgb(255 255 255 / .12); } :root[data-tema="okyanus"] .takvim-anahtar .gun.bugun { box-shadow:0 0 0 2px #05325A inset, var(--tus-golge); } :root[data-tema="okyanus"] .takvim-ozet { --odak:#03243F; } :root[data-tema="okyanus"] .takvim-ozet-us { color:var(--acik-soluk); } :root[data-tema="okyanus"] .takvim-ozet b { color:var(--acik-yazi); } :root[data-tema="okyanus"] .takvim-ozet-fiyat { color:var(--acik-soluk); } :root[data-tema="okyanus"] .takvim-ozet .dugme.dolu, :root[data-tema="okyanus"] .takvim-ozet .dugme.cam { background:#05325A; color:#FFFFFF; border-color:#05325A; box-shadow:0 2px 6px rgb(3 36 63 / .3), inset 0 1px 0 rgb(255 255 255 / .16); } :root[data-tema="okyanus"] .takvim-ozet .dugme.dolu:active, :root[data-tema="okyanus"] .takvim-ozet .dugme.cam:active { background:#03243F; box-shadow:0 1px 2px rgb(3 36 63 / .3); } :root[data-tema="okyanus"] table.fiyatlar th { background:rgb(255 255 255 / .18); color:var(--acik-yazi); } :root[data-tema="okyanus"] table.fiyatlar th, :root[data-tema="okyanus"] table.fiyatlar td { border-bottom-color:rgb(3 36 63 / .14); } :root[data-tema="okyanus"] table.fiyatlar td, :root[data-tema="okyanus"] table.fiyatlar td:last-child { color:var(--acik-yazi); } :root[data-tema="okyanus"] table.fiyatlar .cip:not(.olur) { background:#05325A; color:#FFFFFF; } /* Okyanus · onay kutusu: giriş kutularıyla aynı açık yarı saydam kutu (koyu gri yerel kutu yerine); işaretlenince dolu turkuaz + koyu tik. */ :root[data-tema="okyanus"] input[type="checkbox"] { -webkit-appearance:none; appearance:none; display:inline-grid; place-content:center; width:22px; height:22px; min-height:0; margin:0; padding:0; flex:none; cursor:pointer; border-radius:6px; background:rgb(255 255 255 / .12); border:1px solid rgb(255 255 255 / .38); box-shadow:inset 0 1px 2px rgb(0 18 36 / .25), 0 1px 0 rgb(255 255 255 / .1); transition:background-color .15s var(--gecis), border-color .15s var(--gecis); } :root[data-tema="okyanus"] input[type="checkbox"]::before { content:""; width:11px; height:6px; margin-top:-3px; border-left:2.5px solid #03243F; border-bottom:2.5px solid #03243F; transform:rotate(-45deg); opacity:0; } :root[data-tema="okyanus"] input[type="checkbox"]:checked { background:#2BC4D6; border-color:#2BC4D6; box-shadow:0 1px 3px rgb(0 18 36 / .35), inset 0 1px 0 rgb(255 255 255 / .4); } :root[data-tema="okyanus"] input[type="checkbox"]:checked::before { opacity:1; } :root[data-tema="okyanus"] input[type="checkbox"]:focus-visible { outline:2px solid var(--odak); outline-offset:2px; } :root[data-tema="okyanus"] .ek-satir input[type="checkbox"] { margin:1px 0 0; } /* Betik yüklenmeden/yoksa yerel tarih kutusu: takvimi koyu değil açık açılsın. */ :root[data-tema="okyanus"] input[type="date"] { color-scheme:light; } /* ══ TABAN ══ */ * { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; text-size-adjust:100%; } /* overflow-x:clip — taşan süs öğesi yatay kaydırma açmasın; clip kaydırma kabı kurmaz, yapışkan arama çubuğu çalışır. */ body { margin:0; background:var(--gece); color:var(--fildisi); overflow-x:clip; font:400 var(--fs-16)/1.65 var(--yazi-govde); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } a { color:var(--deniz); text-decoration:none; } :focus-visible { outline:2px solid var(--odak); outline-offset:3px; } ::selection { background:var(--secim); color:#FFFFFF; } /* ══ BAŞLIK ══ */ header.site { display:flex; align-items:center; gap:var(--b-5); padding:var(--b-5) clamp(16px, 5vw, 56px); position:absolute; top:0; inset-inline:0; z-index:5; } .marka { display:inline-flex; align-items:center; gap:var(--b-3); white-space:nowrap; } .marka-yelken { width:20px; height:auto; flex:none; display:block; } .yelken-bez, .yelken-direk { fill:var(--platin); } .yelken-su { fill:var(--fildisi); } .yelken-su-alt { fill:var(--soluk); } .marka-ad { font-family:"Marcellus", "Forum", Georgia, serif; letter-spacing:.28em; font-size:var(--fs-14); color:var(--fildisi); } @media (max-width:560px) { .marka-ad { font-size:var(--fs-13); letter-spacing:.2em; } } header.site nav { margin-inline-start:auto; display:flex; gap:var(--b-5); } header.site nav a { position:relative; color:var(--soluk); font-size:var(--fs-13); font-weight:500; letter-spacing:.14em; text-transform:uppercase; padding:var(--b-4) var(--b-2); margin:calc(-1 * var(--b-4)) 0; white-space:nowrap; } header.site nav a[aria-current] { color:var(--fildisi); } header.site nav a[aria-current]::after { content:""; position:absolute; inset-inline:var(--b-2); bottom:6px; height:2px; background:currentColor; } header.site nav a:active { opacity:.72; } /* Uzun menü adları (ÜBER UNS, МАРШРУТЫ) dar masaüstünde sıkışmasın. */ @media (max-width:1180px) { header.site { gap:var(--b-4); } header.site nav { gap:var(--b-3); } header.site nav a { font-size:var(--fs-12); letter-spacing:.1em; padding-inline:var(--b-1); } header.site nav a[aria-current]::after { inset-inline:var(--b-1); } } /* ⌘K arama düğmesi: başlıkta küçük hap; telefonda yalnız büyüteç. Betik yoksa filo aramasına gider. */ .ara-ac { display:inline-flex; align-items:center; gap:var(--b-2); margin-inline-start:var(--b-3); padding:7px 10px 7px 12px; border:1px solid var(--cizgi); border-radius:999px; color:var(--soluk); font-size:var(--fs-12); font-weight:600; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; background:var(--yuzey); box-shadow:var(--e1); } .ara-ac:active { transform:translateY(1px); box-shadow:none; } .ara-ac svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; flex:none; } .ara-ac kbd { font:600 11px/1 var(--yazi-govde); letter-spacing:.04em; text-transform:none; padding:4px 6px; border-radius:4px; color:var(--fildisi); background:var(--deniz-isik); border:1px solid var(--cizgi); } body.deniz-ust .ara-ac { color:#FFFFFF; border-color:rgb(255 255 255 / .34); background:rgb(255 255 255 / .1); box-shadow:none; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } body.deniz-ust .ara-ac kbd { color:#FFFFFF; background:rgb(255 255 255 / .16); border-color:rgb(255 255 255 / .24); } @media (max-width:1180px) { .ara-ac span { display:none; } } @media (max-width:900px) { .ara-ac { margin-inline-start:auto; padding:8px; } .ara-ac kbd { display:none; } .ara-ac + .dil-sec { margin-inline-start:var(--b-2); } } /* ⌘K paleti: modal pencere, e4 derinlik, bulanık arka plan. Seçili satır DOLU eylem rengi + beyaz. */ dialog.ara-kutu { width:min(640px, calc(100vw - 32px)); max-height:min(76vh, 640px); margin:10vh auto auto; padding:0; overflow:hidden; display:none; flex-direction:column; border:1px solid var(--kart-kenar); border-radius:16px; background:var(--yuzey); color:var(--fildisi); box-shadow:var(--e4), var(--parilti); } dialog.ara-kutu[open] { display:flex; } dialog.ara-kutu::backdrop { background:rgb(4 22 42 / .52); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .ara-giris { display:flex; align-items:center; gap:var(--b-3); padding:var(--b-4) var(--b-5); border-bottom:1px solid var(--kart-kenar); } .ara-giris svg { width:20px; height:20px; fill:none; stroke:var(--platin); stroke-width:2; stroke-linecap:round; flex:none; } .ara-giris input { flex:1; min-width:0; min-height:0; border:0; border-radius:0; padding:var(--b-1) 0; background:transparent; box-shadow:none; font:400 var(--fs-18)/1.4 var(--yazi-govde); color:var(--fildisi); } .ara-giris input:focus { box-shadow:none; } .ara-giris input::-webkit-search-cancel-button { display:none; } .ara-giris kbd { font:600 11px/1 var(--yazi-govde); padding:4px 6px; border-radius:4px; color:var(--soluk); border:1px solid var(--cizgi); } .ara-liste { list-style:none; margin:0; padding:var(--b-2); overflow-y:auto; flex:1; } .ara-grup { padding:var(--b-3) var(--b-3) var(--b-1); font-size:var(--fs-11); font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--soluk); } .ara-oge a { display:flex; align-items:center; gap:var(--b-3); padding:var(--b-2) var(--b-3); border-radius:10px; color:var(--fildisi); } .ara-ikon { display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:50%; background:var(--eylem-zemin); box-shadow:inset 0 1px 0 rgb(255 255 255 / .25), 0 1px 2px rgb(11 16 48 / .2); } .ara-ikon svg { width:17px; height:17px; fill:none; stroke:var(--eylem-yazi); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .ara-metin { display:flex; flex-direction:column; min-width:0; } .ara-metin b { font-weight:600; font-size:var(--fs-16); line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ara-metin span { font-size:var(--fs-13); color:var(--soluk); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ara-oge[aria-selected="true"] a { background:var(--eylem-zemin); color:var(--eylem-yazi); box-shadow:var(--e2), inset 0 1px 0 rgb(255 255 255 / .18); } .ara-oge[aria-selected="true"] .ara-metin span { color:rgb(255 255 255 / .86); } .ara-oge[aria-selected="true"] .ara-ikon { background:#FFFFFF; } .ara-oge[aria-selected="true"] .ara-ikon svg { stroke:var(--acik-dugme-yazi); } .ara-oge a:active { transform:translateY(1px); } .ara-bos { padding:var(--b-6) var(--b-4); text-align:center; color:var(--soluk); font-size:var(--fs-14); } .ara-ipucu { margin:0; padding:var(--b-3) var(--b-5); border-top:1px solid var(--kart-kenar); font-size:var(--fs-12); color:var(--soluk); background:var(--sig); } @media (max-width:620px) { dialog.ara-kutu { margin-top:var(--b-4); max-height:calc(100vh - 32px); } .ara-ipucu { display:none; } } /* Dil seçici: başlıkta açılır liste (betiksiz
), altbilgide tam adlar. */ .dil-sec { position:relative; margin-inline-start:var(--b-1); padding-inline-start:var(--b-4); border-inline-start:1px solid var(--cizgi); } .dil-sec summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:var(--b-2); padding:var(--b-3) var(--b-1); font-size:var(--fs-12); font-weight:600; letter-spacing:.16em; color:var(--soluk); } .dil-sec summary::-webkit-details-marker { display:none; } .dil-sec summary::after { content:""; width:6px; height:6px; margin-top:-3px; border-inline-end:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform .2s var(--gecis); } .dil-sec[open] summary::after { transform:rotate(225deg); margin-top:3px; } .dil-sec[open] summary { color:var(--fildisi); } .dil-liste { position:absolute; inset-inline-end:0; top:calc(100% + var(--b-2)); z-index:30; min-width:208px; display:grid; gap:2px; padding:var(--b-2); background:var(--yuzey); border:1px solid var(--kart-kenar); border-radius:var(--kose-2); box-shadow:var(--e4); } .dil-liste a { display:flex; justify-content:space-between; align-items:center; gap:var(--b-4); padding:var(--b-2) var(--b-3); border-radius:var(--kose-1); font-size:var(--fs-14); color:var(--fildisi); } .dil-liste a span { font-size:var(--fs-11); font-weight:600; letter-spacing:.16em; color:var(--soluk); } .dil-liste a:active { background:var(--deniz-isik); } .dil-liste a[aria-current] { background:var(--rozet-zemin); color:var(--rozet-yazi); font-weight:600; } .dil-liste a[aria-current] span { color:inherit; } .dil-alt { display:flex; flex-wrap:wrap; gap:var(--b-1) var(--b-4); margin-top:var(--b-3); font-size:var(--fs-13); letter-spacing:.04em; } .dil-alt a[aria-current] { color:var(--t-alt-baglanti); text-decoration:underline; text-underline-offset:4px; } /* Telefonda başlık iki satır: üstte marka + dil, altta yatay kayan menü (taşma yok). */ @media (max-width:900px) { header.site { flex-wrap:wrap; gap:var(--b-1) var(--b-4); padding-top:var(--b-4); padding-bottom:var(--b-2); } header.site > nav { order:3; flex:1 0 100%; margin-inline-start:0; gap:var(--b-1); overflow-x:auto; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg, #000 88%, transparent); mask-image:linear-gradient(90deg, #000 88%, transparent); } [dir="rtl"] header.site > nav { -webkit-mask-image:linear-gradient(270deg, #000 88%, transparent); mask-image:linear-gradient(270deg, #000 88%, transparent); } header.site > nav::-webkit-scrollbar { display:none; } header.site > nav a { font-size:var(--fs-12); padding:var(--b-3) var(--b-2); margin:0; } header.site > nav a:first-child { padding-inline-start:0; } header.site > nav a:first-child[aria-current]::after { inset-inline-start:0; } .dil-sec { margin-inline-start:auto; padding-inline-start:0; border-inline-start:0; } .kahraman.deniz, .kahraman.deniz.sayfa { padding-top:128px; } } /* ══ KAHRAMAN ══ */ .kahraman { min-height:76vh; display:grid; place-items:center; text-align:center; padding:120px var(--b-5) 88px; position:relative; overflow:hidden; background:var(--gece); isolation:isolate; } .kahraman::before { content:""; position:absolute; inset:0; z-index:-2; pointer-events:none; } .kahraman.tam::after { content:""; position:absolute; inset-inline:0; bottom:11%; height:8px; z-index:-1; pointer-events:none; background:linear-gradient(90deg, transparent, var(--platin) 26%, var(--platin) 74%, transparent) top/100% 1px no-repeat, repeating-linear-gradient(90deg, var(--platin) 0 1px, transparent 1px 96px) bottom/100% 4px no-repeat; opacity:.2; } .kahraman .ic { max-width:760px; position:relative; } /* Deniz kahramanı: Kalynda laciverdi degrade, altında denizcilik haritası, ufukta geçen tekneler, en altta kurumsal güven şeridi. Metin satır başına dayalı (RTL'de sağa). */ .kahraman.deniz { --hk-zemin:var(--t-hero-1); --hk-zemin-2:var(--t-hero-2); --hk-su:var(--t-hero-3); --hk-yazi:var(--t-hero-yazi); --hk-soluk:var(--t-hero-soluk); --hk-cizgi:rgb(255 255 255 / .14); --odak:#FFFFFF; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; text-align:start; min-height:min(94vh, 900px); padding:152px 0 0; color:var(--hk-yazi); background:linear-gradient(180deg, var(--hk-zemin) 0%, var(--hk-zemin-2) 58%, var(--hk-su) 100%); } .kahraman.deniz::before { background: radial-gradient(38% 46% at 84% 6%, var(--hk-gunes), transparent 70%), radial-gradient(64% 52% at 12% 0%, var(--hk-isik-1), transparent 64%), radial-gradient(56% 44% at 92% 100%, var(--hk-isik-2), transparent 62%); } [dir="rtl"] .kahraman.deniz::before { background: radial-gradient(38% 46% at 16% 6%, var(--hk-gunes), transparent 70%), radial-gradient(64% 52% at 88% 0%, var(--hk-isik-1), transparent 64%), radial-gradient(56% 44% at 8% 100%, var(--hk-isik-2), transparent 62%); } .kahraman.deniz::after { display:none; } .kahraman.deniz .ic.sol { position:relative; z-index:2; max-width:none; margin:0 auto; padding:0 0 152px; width:min(1240px, 100% - clamp(32px, 10vw, 96px)); } .kahraman.deniz .ust-cizgi { color:var(--turkuaz-acik); margin-bottom:var(--b-5); } .kahraman.deniz h1.buyuk { color:#FFFFFF; max-width:15ch; font-size:var(--fs-dev); line-height:1.04; letter-spacing:-.02em; margin-bottom:var(--b-6); text-shadow:0 2px 32px rgb(5 8 26 / .35); } .kahraman.deniz .alt-soz { color:var(--hk-soluk); margin:0 0 var(--b-6); max-width:52ch; font-size:clamp(16px, 0.4vw + 14px, 20px); } .kahraman.deniz .saat { color:var(--hk-soluk); margin:0; } .kahraman.deniz .saat b { color:#FFFFFF; } .kahraman-eylem { display:flex; gap:var(--b-3); flex-wrap:wrap; margin:0 0 var(--b-6); } .kahraman-eylem .dugme { min-height:52px; padding-inline:var(--b-6); } /* Deniz sahnesi: alt %42, hareketsiz ufuk çizgisi. */ .deniz-sahne { position:absolute; inset:auto 0 0 0; height:42%; z-index:1; pointer-events:none; overflow:hidden; } .deniz-sahne .ufuk { position:absolute; inset-inline:0; top:52%; height:1px; background:linear-gradient(90deg, transparent, rgb(255 255 255 / .3) 18%, rgb(255 255 255 / .3) 82%, transparent); } /* Derinlik: kendiliğinden hareket YOK (tekneler/dalgalar kaldırıldı). Yalnız kaydırmaya bağlı, çok ince paralaks: arka plandaki harita ve ışık metinden yavaş kayar. Hareket azaltma tercihinde ve desteklemeyen tarayıcıda hiç çalışmaz; betik yok. */ @media (prefers-reduced-motion:no-preference) { @supports (animation-timeline:scroll()) { .kahraman.deniz .kahraman-harita { animation:prl-uzak linear both; animation-timeline:scroll(root block); animation-range:0px 90vh; } .kahraman.deniz::before { animation:prl-isik linear both; animation-timeline:scroll(root block); animation-range:0px 90vh; } } } @keyframes prl-uzak { to { transform:translate3d(0, 16%, 0); } } @keyframes prl-isik { to { transform:translate3d(0, 24%, 0); opacity:.6; } } /* Güven şeridi: kahramanın alt bandı, buzlu koyu cam. */ .guven { position:relative; z-index:3; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0; margin:0; padding:0; background:var(--t-cam-koyu); border-top:1px solid var(--hk-cizgi); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .guven > div { padding:var(--b-5) var(--b-5) var(--b-6); border-inline-start:1px solid var(--hk-cizgi); } .guven > div:first-child { border-inline-start:0; } .guven dt { font-family:var(--yazi-baslik); font-size:var(--fs-20); color:#FFFFFF; margin:0 0 var(--b-2); line-height:1.25; } .guven dd { margin:0; color:var(--hk-soluk); font-size:var(--fs-13); line-height:1.6; max-width:34ch; } @media (min-width:1240px) { .guven { padding:0 calc((100% - 1240px) / 2); } } @media (max-width:900px) { .guven { grid-template-columns:1fr 1fr; } .guven > div:nth-child(3) { border-inline-start:0; } .guven > div:nth-child(n+3) { border-top:1px solid var(--hk-cizgi); } } @media (max-width:560px) { .guven { grid-template-columns:1fr; } .guven > div { border-inline-start:0; border-top:1px solid var(--hk-cizgi); padding:var(--b-5) clamp(16px, 6vw, 32px); } .kahraman.deniz { min-height:auto; padding-top:120px; } .kahraman.deniz .ic.sol { padding-bottom:152px; } } /* Sayfa kahramanı: ana sayfanın dili, alt sayfa ölçüsünde. Sahne piksel ölçülü — en büyük teknenin direği metnin altında kalır; şerit yoksa metin kendi payını bırakır. */ .kahraman.deniz.sayfa { min-height:min(74vh, 720px); padding-top:144px; } .kahraman.deniz.sayfa.kisa { min-height:min(54vh, 520px); } .kahraman.deniz.sayfa .ic.sol { padding-bottom:136px; } .kahraman.deniz.sayfa .deniz-sahne { height:264px; } .kahraman.deniz.sayfa.seritsiz .ic.sol { padding-bottom:224px; } .kahraman.deniz.sayfa.kisa .deniz-sahne { height:200px; } .kahraman.deniz.sayfa.kisa .ic.sol { padding-bottom:176px; } .kahraman.deniz.sayfa h1.buyuk { font-size:var(--fs-h1); max-width:16ch; } .kahraman.deniz.sayfa.kisa h1.buyuk { font-size:clamp(36px, 3.4vw + 18px, 68px); } .kahraman.deniz.sayfa .alt-soz { margin-bottom:var(--b-5); } .kahraman.deniz.sayfa.kisa::after { display:block; content:""; position:absolute; inset-inline:0; bottom:0; top:auto; height:1px; background:rgb(255 255 255 / .2); z-index:3; } /* İki sütun: metin + fotoğraf/kart. */ .kahraman.deniz .ic.sol.ikili { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:clamp(32px, 5vw, 72px); align-items:end; } @media (max-width:900px) { .kahraman.deniz .ic.sol.ikili { grid-template-columns:minmax(0, 1fr); } } .kahraman-sag { position:relative; z-index:2; } .kahraman-foto { position:relative; margin:0; border-radius:var(--kose-2); overflow:hidden; aspect-ratio:4/3; box-shadow:0 2px 4px rgb(0 0 0 / .2), 0 24px 48px -16px rgb(0 0 0 / .55), 0 56px 112px -40px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .14); } .kahraman-foto img { width:100%; height:100%; object-fit:cover; display:block; } .kahraman-foto::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 56%, rgb(5 8 26 / .6)); } .kahraman-foto figcaption { position:absolute; inset-inline-start:var(--b-4); bottom:var(--b-4); z-index:1; color:#FFFFFF; font-size:var(--fs-12); font-weight:600; letter-spacing:.18em; text-transform:uppercase; } .kahraman-fiyat { margin:0 0 var(--b-6); color:var(--hk-soluk); font-size:var(--fs-14); letter-spacing:.06em; } .kahraman-fiyat b { font-family:var(--yazi-baslik); font-weight:400; font-size:var(--fs-32); color:#FFFFFF; letter-spacing:0; margin:0 var(--b-2); } .kahraman-kart { background:rgb(5 8 26 / .4); border:1px solid rgb(255 255 255 / .16); border-radius:var(--kose-2); padding:var(--b-5); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:var(--hk-yazi); box-shadow:var(--koyu-e); } .kahraman-kart dl { margin:0; display:grid; gap:var(--b-4); } .kahraman-kart dt { font-size:var(--fs-11); font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--turkuaz-acik); margin:0 0 var(--b-1); } .kahraman-kart dd { margin:0; font-size:var(--fs-16); color:#FFFFFF; } .kahraman-kart a { color:#FFFFFF; text-decoration:underline; text-decoration-color:rgb(255 255 255 / .4); text-underline-offset:4px; } /* Deniz kahramanın üstünde başlık beyaza döner. */ body.deniz-ust header.site { --odak:#FFFFFF; } body.deniz-ust header.site nav a { color:var(--t-hero-soluk); } body.deniz-ust header.site nav a[aria-current] { color:#FFFFFF; } body.deniz-ust .dil-sec { border-inline-start-color:rgb(255 255 255 / .24); } body.deniz-ust .dil-sec summary { color:var(--t-hero-soluk); } body.deniz-ust .dil-sec[open] summary { color:#FFFFFF; } body.deniz-ust .marka-ad { color:#FFFFFF; } body.deniz-ust .yelken-bez, body.deniz-ust .yelken-direk, body.deniz-ust .yelken-su { fill:#FFFFFF; } body.deniz-ust .yelken-su-alt { fill:var(--t-hero-soluk); } /* Kahramandaki harita koyu zemine göre: açık kıyı çizgisi, saydam deniz, beyaz iğne. Maske: metnin oturduğu taraf silik, karşı taraf belirgin; en alt sahneye bırakılır. */ .kahraman.deniz .kahraman-harita { --hrt-deniz:transparent; --hrt-deniz-2:; --hrt-kara:rgb(255 255 255 / .05); --hrt-kiyi:rgb(201 209 242 / .38); --hrt-izgara:rgb(255 255 255 / .05); --hrt-etiket:#DDE2F5; --hrt-koyu:#FFFFFF; --hrt-vurgu:#FFFFFF; --hrt-ikincil:#C9D1F2; --hrt-parlak:rgb(255 255 255 / .5); --hrt-zemin:#0B1030; opacity:1; -webkit-mask-image:linear-gradient(90deg, rgb(0 0 0 / .18) 0%, rgb(0 0 0 / .45) 42%, #000 66%), linear-gradient(180deg, #000 0%, #000 52%, transparent 78%); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg, rgb(0 0 0 / .18) 0%, rgb(0 0 0 / .45) 42%, #000 66%), linear-gradient(180deg, #000 0%, #000 52%, transparent 78%); mask-composite:intersect; } [dir="rtl"] .kahraman.deniz .kahraman-harita { -webkit-mask-image:linear-gradient(270deg, rgb(0 0 0 / .18) 0%, rgb(0 0 0 / .45) 42%, #000 66%), linear-gradient(180deg, #000 0%, #000 52%, transparent 78%); mask-image:linear-gradient(270deg, rgb(0 0 0 / .18) 0%, rgb(0 0 0 / .45) 42%, #000 66%), linear-gradient(180deg, #000 0%, #000 52%, transparent 78%); } /* ══ DÜĞMELER ══ Birincil: dolu lacivert + beyaz. İkincil: lacivert çerçeve. Koyu zeminde (kahraman, bant, hesaplayıcı başlığı) birincil beyaz dolu + lacivert yazı, ikincil beyaz çerçeve. Tepki: basınca 1px iner, gölge kısalır. */ .dugme { display:inline-flex; align-items:center; justify-content:center; gap:var(--b-2); min-height:48px; padding:var(--b-3) var(--b-6); font:600 var(--fs-13)/1.2 var(--yazi-govde); letter-spacing:.16em; text-transform:uppercase; text-align:center; color:var(--deniz); background:transparent; border:1px solid currentColor; border-radius:var(--kose-1); cursor:pointer; transition:transform .1s var(--gecis), box-shadow .15s var(--gecis), background-color .15s var(--gecis); } .dugme:active { transform:translateY(1px); background:var(--deniz-isik); } .dugme.dolu, .dugme.mercan { background:var(--eylem-zemin); color:var(--eylem-yazi); border-color:var(--eylem-zemin); box-shadow:var(--e2), inset 0 1px 0 rgb(255 255 255 / .12); } .dugme.dolu:active, .dugme.mercan:active { background:var(--eylem-basili); border-color:var(--eylem-basili); box-shadow:var(--e1); } .kahraman.deniz .dugme.mercan, .kahraman.deniz .dugme.dolu, .yap-satir .dugme.dolu, .takvim-ozet .dugme.dolu, section.blok.derin .dugme.dolu, section.blok.derin .dugme.mercan { background:#FFFFFF; color:var(--acik-dugme-yazi); border-color:#FFFFFF; box-shadow:var(--koyu-e), inset 0 -1px 0 rgb(11 16 48 / .08); } .kahraman.deniz .dugme.mercan:active, .kahraman.deniz .dugme.dolu:active, .yap-satir .dugme.dolu:active, .takvim-ozet .dugme.dolu:active, section.blok.derin .dugme.dolu:active, section.blok.derin .dugme.mercan:active { background:#E3E6EE; border-color:#E3E6EE; } .dugme.cam, section.blok.derin .dugme:not(.dolu):not(.mercan) { color:#FFFFFF; border-color:rgb(255 255 255 / .5); background:rgb(255 255 255 / .04); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .dugme.cam:active, section.blok.derin .dugme:not(.dolu):not(.mercan):active { background:rgb(255 255 255 / .14); } /* ══ BÖLÜMLER ══ */ main.govde { max-width:1240px; margin:0 auto; padding:0 clamp(16px, 5vw, 48px) var(--b-10); } /* Giriş animasyonu YOK: sayfa açılırken hiçbir şey kendiliğinden süzülmez (kurumsal kural). */ section.blok { margin:var(--b-12) 0 0; } /* Açık bant: bir bölümü tam genişlik gri zemine oturtur. Tam genişlik zemin border-image dış taşmasıyla: 100vw kutu gibi yatay kaydırma açmaz. */ section.blok.sulu { position:relative; padding:var(--b-10) 0; margin-top:var(--b-12); border-image:linear-gradient(var(--kart-kenar) 0 1px, var(--sig) 1px calc(100% - 1px), var(--kart-kenar) calc(100% - 1px)) fill 0 // 0 100vw; } section.blok.sulu .adim, section.blok.sulu .panel, section.blok.sulu .kart-t { background:var(--yuzey); } /* Derin bant: bölüm lacivert kapanır. */ section.blok.derin { position:relative; padding:var(--b-11) 0; margin-top:var(--b-12); color:#F3F5FB; --odak:#FFFFFF; border-image:linear-gradient(180deg, var(--t-bant-1) 0%, var(--t-bant-2) 100%) fill 0 // 0 100vw; } section.blok.derin .bolum-us { color:var(--turkuaz-acik); } section.blok.derin .bolum-us::before { background:rgb(255 255 255 / .6); } section.blok.derin h2.bolum { color:#FFFFFF; } section.blok.derin .disiplin { color:#C3C9E0; } section.blok.derin .panel-izgara { background:rgb(255 255 255 / .14); border-color:rgb(255 255 255 / .14); box-shadow:none; } section.blok.derin .panel { background:var(--t-bant-kart); border:0; color:#F3F5FB; } section.blok.derin a.panel:active { background:color-mix(in srgb, var(--t-bant-kart) 86%, #FFFFFF); } section.blok.derin .panel b, section.blok.derin .panel .panel-baslik { color:#FFFFFF; } section.blok.derin .panel .panel-us { color:var(--turkuaz-acik); } section.blok.derin .panel p { color:#C3C9E0; } section.blok.derin .panel .git { color:#FFFFFF; } .ust-cizgi { font-size:var(--fs-12); font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:var(--platin); margin:0 0 var(--b-5); } h1.buyuk { font-family:var(--yazi-baslik); font-weight:400; font-size:var(--fs-h1); line-height:1.12; letter-spacing:-.012em; margin:0 0 var(--b-5); text-wrap:balance; } .alt-soz { color:var(--soluk); font-size:clamp(16px, 0.4vw + 14px, 18px); line-height:1.6; max-width:46ch; margin:0 auto var(--b-6); } .bolum-us { font-size:var(--fs-11); font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--platin); margin:0 0 var(--b-4); display:flex; align-items:center; gap:var(--b-3); } .bolum-us::before { content:""; width:32px; height:2px; background:var(--t-metal); flex:none; } .bolum-us a { color:inherit; } h2.bolum { font-family:var(--yazi-baslik); font-weight:400; font-size:var(--fs-h2); line-height:1.12; letter-spacing:-.01em; margin:0 0 var(--b-5); text-wrap:balance; color:var(--fildisi); } .disiplin { max-width:60ch; margin:0 0 var(--b-8); color:var(--soluk); font-size:var(--fs-16); line-height:1.75; } /* Süreç adımları */ .adimlar { display:grid; grid-template-columns:repeat(auto-fit, minmax(232px, 1fr)); gap:var(--b-4); } .adim { background:var(--kart-zemin); border:1px solid var(--kart-kenar); border-radius:var(--kose-2); padding:var(--b-5); box-shadow:var(--e1), var(--parilti); } .adim b { font-family:var(--yazi-baslik); font-weight:400; font-size:var(--fs-20); display:block; margin:0 0 var(--b-2); color:var(--fildisi); } .adim p { color:var(--soluk); font-size:var(--fs-14); margin:0; line-height:1.65; } /* ══ FİLO KARTLARI ══ katmanlı gölge + üst kenar ışığı; basınca iner. */ .filo { display:grid; grid-template-columns:repeat(auto-fill, minmax(288px, 1fr)); gap:var(--b-5); } .kart-t { position:relative; display:flex; flex-direction:column; background:var(--kart-zemin); border:1px solid var(--kart-kenar); border-radius:var(--kose-2); overflow:hidden; color:inherit; box-shadow:var(--e2); transition:transform .1s var(--gecis), box-shadow .15s var(--gecis); } .kart-t:active { transform:translateY(1px); box-shadow:var(--e1); } .kart-t .gorsel { aspect-ratio:3/2; background:var(--sig); display:grid; place-items:center; overflow:hidden; border-bottom:1px solid var(--kart-kenar); } .kart-t .gorsel img { width:100%; height:100%; object-fit:cover; display:block; } .kart-t .gorsel .mono { font-family:var(--yazi-baslik); letter-spacing:.3em; color:var(--platin); font-size:var(--fs-13); } .kart-t .icerik { padding:var(--b-5); display:flex; flex-direction:column; flex:1; } .kart-t h3 { font-family:var(--yazi-baslik); font-weight:400; font-size:var(--fs-24); line-height:1.2; margin:0 0 var(--b-2); color:var(--fildisi); } .kart-t .ozellik { color:var(--soluk); font-size:var(--fs-13); margin:0 0 var(--b-3); line-height:1.55; } .kart-t .ozet-satir { color:var(--soluk); font-size:var(--fs-14); line-height:1.55; margin:0 0 var(--b-4); } .kart-t .fiyat { margin:auto 0 0; padding-top:var(--b-3); border-top:1px solid var(--kart-kenar); color:var(--soluk); font-size:var(--fs-13); letter-spacing:.04em; } .kart-t .fiyat b { font-family:var(--yazi-baslik); font-weight:400; font-size:var(--fs-24); color:var(--platin); letter-spacing:0; font-variant-numeric:tabular-nums; } /* ══ ARAMA ÇUBUĞU ══ tek satır, bölümlü, sonda tek eylem. Yapışkan: kaydırırken kalır. */ .arama-bar { position:sticky; top:var(--b-2); z-index:6; display:grid; grid-template-columns:minmax(180px, 1.3fr) repeat(2, minmax(132px, 1fr)) repeat(2, minmax(84px, .6fr)) auto; background:var(--cam); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); border:1px solid var(--kart-kenar); border-radius:var(--kose-2); margin:0 0 var(--b-2); box-shadow:var(--e3); overflow:hidden; } @supports not (backdrop-filter:blur(1px)) { .arama-bar { background:var(--yuzey); } } .arama-bar .bolum { padding:var(--b-4) var(--b-5); border-inline-end:1px solid var(--kart-kenar); min-width:0; } .arama-bar .bolum:focus-within { background:var(--deniz-isik); } .arama-bar label { display:block; font-size:var(--fs-11); font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--soluk); margin:0 0 var(--b-1); } .arama-bar input, .arama-bar select { width:100%; min-height:0; background:none; border:0; border-radius:0; padding:0; margin:0; box-shadow:none; color:var(--fildisi); font:500 var(--fs-16)/1.4 var(--yazi-govde); } .arama-bar input:focus, .arama-bar select:focus { box-shadow:none; } .arama-bar select { cursor:pointer; } .arama-bar input:focus-visible, .arama-bar select:focus-visible { outline:2px solid var(--odak); outline-offset:6px; } .arama-bar input::placeholder { color:var(--soluk); } .ara-dugme { border:0; margin:0; background:var(--eylem-zemin); color:var(--eylem-yazi); cursor:pointer; font:600 var(--fs-12)/1.2 var(--yazi-govde); letter-spacing:.18em; text-transform:uppercase; padding:0 var(--b-6); white-space:nowrap; box-shadow:inset 0 1px 0 rgb(255 255 255 / .12); } .ara-dugme:active { background:var(--eylem-basili); } /* İnce ayar: sessiz, betiksiz açılır kapanır */ .arama-bar .ince { grid-column:1/-1; border-top:1px solid var(--kart-kenar); } .arama-bar .ince summary { padding:var(--b-3) var(--b-5); cursor:pointer; font-size:var(--fs-12); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--soluk); list-style:none; } .arama-bar .ince summary::-webkit-details-marker { display:none; } .arama-bar .ince summary::before { content:"+ "; color:var(--platin); } .arama-bar .ince[open] summary::before { content:"− "; } .arama-bar .ince[open] summary { color:var(--fildisi); } .arama-bar .ince-ic { display:grid; grid-template-columns:1fr; border-top:1px solid var(--kart-kenar); } .arama-bar .ince-ic .bolum:last-child { border-inline-end:0; } /* Orta genişlikte (ve uzun düğme adlarında) düğme alt satıra iner. */ @media (max-width:1100px) and (min-width:821px) { .arama-bar { grid-template-columns:minmax(150px, 1.3fr) repeat(2, minmax(120px, 1fr)) repeat(2, minmax(76px, .6fr)); } .arama-bar > .bolum:nth-child(5) { border-inline-end:0; } .ara-dugme { grid-column:1/-1; padding:var(--b-4) var(--b-6); } } @media (max-width:820px) { .arama-bar { position:static; -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--yuzey); grid-template-columns:1fr 1fr; } .arama-bar .bolum { border-inline-end:0; border-bottom:1px solid var(--kart-kenar); } .arama-bar .bolum:nth-child(odd) { border-inline-end:1px solid var(--kart-kenar); } .ara-dugme { grid-column:1/-1; padding:var(--b-4) var(--b-6); } .arama-bar .ince-ic { grid-template-columns:1fr; } } /* Kanıt satırı, künye şeridi */ .kanit { display:flex; flex-wrap:wrap; justify-content:center; gap:0; margin:var(--b-7) 0 0; padding:0; } .kanit > div { padding:0 var(--b-6); border-inline-start:1px solid var(--cizgi); } .kanit > div:first-child { border-inline-start:0; } .kanit dt { font-family:var(--yazi-baslik); font-size:var(--fs-28); color:var(--fildisi); line-height:1.1; font-variant-numeric:tabular-nums; } .kanit dd { margin:var(--b-2) 0 0; font-size:var(--fs-11); font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--soluk); } @media (max-width:620px) { .kanit > div { padding:0 var(--b-4); } .kanit dt { font-size:var(--fs-20); } } .kunye-serit { margin:var(--b-6) 0 0; font-size:var(--fs-11); letter-spacing:.2em; text-transform:uppercase; color:var(--soluk); line-height:2.1; } /* Ülke şeridi — sabit, ortalanmış etiket listesi (kayan bant kaldırıldı). */ .ulke-serit { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--b-2); margin:0 0 var(--b-6); padding:var(--b-4) 0; border-top:1px solid var(--kart-kenar); border-bottom:1px solid var(--kart-kenar); } .ulke-kutu { border:1px solid var(--kart-kenar); border-radius:var(--kose-1); padding:var(--b-1) var(--b-3); font-size:var(--fs-12); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--soluk); white-space:nowrap; background:var(--yuzey); box-shadow:var(--e1); } /* Telefonda tek satır, elle kaydırılır (kendiliğinden hareket yok); kenarlar solar. */ @media (max-width:700px) { .ulke-serit { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; padding-inline:var(--b-4); -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .ulke-serit::-webkit-scrollbar { display:none; } } /* ══ PANEL IZGARASI ══ sitenin tek kart dili: aynı ızgara, aynı iç boşluk; ayrım 1px çizgiden. */ .panel-izgara { display:grid; grid-template-columns:repeat(var(--sutun, 3), minmax(0, 1fr)); gap:1px; background:var(--kart-kenar); border:1px solid var(--kart-kenar); border-radius:var(--kose-2); overflow:hidden; margin:0 0 var(--b-2); box-shadow:var(--e1); } .panel-izgara.iki { --sutun:2; } .panel-izgara.dort { --sutun:4; } @media (max-width:980px) { .panel-izgara { --sutun:2 !important; } } @media (max-width:620px) { .panel-izgara { --sutun:1 !important; } } .panel { background:var(--yuzey); padding:var(--b-6) var(--b-6) var(--b-5); display:block; color:inherit; } a.panel:active { background:var(--deniz-isik); } .panel-us { display:block; font-size:var(--fs-11); font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--platin); margin:0 0 var(--b-3); } .panel b, .panel-baslik { display:block; font-family:var(--yazi-baslik); font-weight:400; font-size:var(--fs-h3); line-height:1.3; color:var(--fildisi); margin:0 0 var(--b-3); letter-spacing:0; } .panel p { margin:0 0 var(--b-4); color:var(--soluk); font-size:var(--fs-14); line-height:1.65; } .panel p:last-child { margin:0; } .panel .git { font-size:var(--fs-11); font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--platin); } /* Tema şeridi — "the trips we design" */ .temalar { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1px; background:var(--kart-kenar); border:1px solid var(--kart-kenar); border-radius:var(--kose-2); overflow:hidden; margin:0 0 var(--b-2); box-shadow:var(--e1); } @media (max-width:980px) { .temalar { grid-template-columns:repeat(2, minmax(0, 1fr)); } } @media (max-width:620px) { .temalar { grid-template-columns:1fr; } } .tema { background:var(--yuzey); padding:var(--b-6); display:block; color:inherit; } a.tema:active { background:var(--deniz-isik); } .tema b { display:block; font-family:var(--yazi-baslik); font-weight:400; font-size:var(--fs-h3); line-height:1.25; color:var(--fildisi); margin:0 0 var(--b-3); letter-spacing:0; } .tema p { margin:0 0 var(--b-4); color:var(--soluk); font-size:var(--fs-14); line-height:1.65; } .tema .git { font-size:var(--fs-11); font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--platin); } /* Varış — ultra lüks segmentin ilk sorusu: oraya nasıl gideceğim */ .varis { display:grid; grid-template-columns:repeat(auto-fit, minmax(248px, 1fr)); gap:1px; background:var(--kart-kenar); border:1px solid var(--kart-kenar); border-radius:var(--kose-2); overflow:hidden; margin:0 0 var(--b-5); box-shadow:var(--e1); } .varis-k { background:var(--yuzey); padding:var(--b-6) var(--b-5); } .varis-us { display:block; font-family:var(--yazi-baslik); font-size:var(--fs-20); color:var(--fildisi); margin:0 0 var(--b-3); } .varis-k p { margin:0; color:var(--soluk); font-size:var(--fs-14); line-height:1.7; } .varis-not { max-width:60ch; color:var(--soluk); font-size:var(--fs-14); line-height:1.7; margin:0; } /* ══ KÜNYE ══ iki sütun, rakamlar tabular. */ .kunye { display:grid; gap:0; margin:var(--b-5) 0 0; border-top:1px solid var(--cizgi); max-width:760px; } .kunye > div { display:grid; grid-template-columns:minmax(152px, 224px) 1fr; gap:var(--b-4); padding:var(--b-4) 0; border-bottom:1px solid var(--cizgi); } .kunye dt { margin:0; font-size:var(--fs-11); font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--platin); padding-top:3px; } .kunye dd { margin:0; color:var(--fildisi); font-size:var(--fs-14); line-height:1.6; font-variant-numeric:tabular-nums; } .kunye dd a { color:var(--deniz); text-decoration:underline; text-underline-offset:3px; } @media (max-width:560px) { .kunye > div { grid-template-columns:1fr; gap:var(--b-1); } } .kunye-satir { color:var(--soluk); font-size:var(--fs-12); letter-spacing:.02em; } /* Tekne künyesi ve donanımı — tedarikçiden gelen gerçek veriden */ .kunye-tablo-sar { background:var(--kart-zemin); border:1px solid var(--kart-kenar); border-radius:var(--kose-2); overflow:hidden; overflow-x:auto; margin:0 0 var(--b-5); box-shadow:var(--e1); } .kunye-tablo { border-collapse:collapse; width:100%; font-size:var(--fs-14); } .kunye-tablo caption { text-align:start; padding:var(--b-4) var(--b-5) var(--b-3); font-size:var(--fs-11); font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--platin); } .kunye-tablo th, .kunye-tablo td { text-align:start; padding:var(--b-3) var(--b-5); border-top:1px solid var(--kart-kenar); vertical-align:top; } .kunye-tablo th { font-weight:500; color:var(--soluk); white-space:nowrap; width:34%; } .kunye-tablo td { color:var(--fildisi); } .donanim { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:var(--b-3); margin:0 0 var(--b-6); } .donanim-k { position:relative; background:var(--kart-zemin); border:1px solid var(--kart-kenar); border-radius:var(--kose-2); padding:var(--b-5); box-shadow:var(--e1), var(--parilti); } .donanim-k::before { content:""; position:absolute; inset-inline-start:var(--b-5); top:0; width:32px; height:2px; background:var(--t-metal); } .donanim-us { display:block; font-size:var(--fs-11); font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--platin); margin:0 0 var(--b-2); } .donanim-k p { margin:0; color:var(--soluk); font-size:var(--fs-14); line-height:1.65; } /* ══ SIKÇA SORULANLAR ══ içinde başlık: ekran okuyucu ve FAQPage şeması aynı yapıyı görür. */ .sss { border-top:1px solid var(--cizgi); } .sss-madde { border-bottom:1px solid var(--cizgi); } .sss-madde summary { list-style:none; cursor:pointer; padding:var(--b-5) var(--b-8) var(--b-5) 0; padding-inline:0 var(--b-8); position:relative; } .sss-madde summary::-webkit-details-marker { display:none; } .sss-madde summary h2 { display:inline; font-family:var(--yazi-baslik); font-weight:400; font-size:clamp(18px, 0.6vw + 14px, 22px); line-height:1.35; color:var(--fildisi); margin:0; letter-spacing:0; } .sss-madde summary::after { content:"+"; position:absolute; inset-inline-end:0; top:50%; width:32px; height:32px; margin-top:-16px; display:grid; place-items:center; border:1px solid var(--kart-kenar); border-radius:50%; background:var(--yuzey); box-shadow:var(--e1); font-size:var(--fs-20); line-height:1; color:var(--platin); transition:transform .25s var(--gecis); } .sss-madde[open] summary::after { transform:rotate(45deg); } .sss-madde summary:active::after { box-shadow:none; } .sss-madde summary:focus-visible { outline:2px solid var(--odak); outline-offset:3px; border-radius:var(--kose-1); } .sss-cevap { padding:0 var(--b-8) var(--b-5) 0; padding-inline:0 var(--b-8); max-width:74ch; animation:sssAc .3s var(--gecis) both; } .sss-cevap p { margin:0; color:var(--soluk); font-size:var(--fs-16); line-height:1.8; } @keyframes sssAc { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } } /* ══ HARİTALAR ══ gezilebilir atlas + dönen küre, tek çerçevede; sekmeler saf CSS. İki sahne aynı ızgara gözünde durur ki gizli olanın da ölçüsü olsun. */ .harita-kutu { position:relative; } .gorunum-radyo { position:absolute; opacity:0; pointer-events:none; } .gorunum-sekme { display:inline-flex; gap:var(--b-1); margin:0 0 var(--b-4); border:1px solid var(--kart-kenar); border-radius:var(--kose-2); padding:var(--b-1); background:var(--deniz-isik); } .gorunum-sekme label { margin:0; font-size:var(--fs-11); font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--soluk); padding:var(--b-2) var(--b-5); cursor:pointer; border-radius:var(--kose-1); } #gr-atlas:checked ~ .gorunum-sekme label[for="gr-atlas"], #gr-kure:checked ~ .gorunum-sekme label[for="gr-kure"] { background:var(--yuzey); color:var(--platin); box-shadow:var(--e1), var(--parilti); } .gorunum-radyo:focus-visible ~ .gorunum-sekme { outline:2px solid var(--odak); outline-offset:3px; } /* minmax(0, 1fr): sütun içerikle (tuvalin px genişliği) büyümesin — harita kabı ekranı taşırmasın. */ .harita-sahne { display:grid; grid-template-columns:minmax(0, 1fr); } .harita-sahne > .gorunum { grid-area:1 / 1; min-width:0; opacity:0; visibility:hidden; transition:opacity .4s var(--gecis); } #gr-atlas:checked ~ .harita-sahne .gorunum-atlas, #gr-kure:checked ~ .harita-sahne .gorunum-kure { opacity:1; visibility:visible; } /* Atlas paleti: deniz soğuk açık mavi-gri, kara beyaz, kıyı lacivert-gri, iğne lacivert. */ .atlas { --hrt-deniz:#DDE4F1; --hrt-deniz-2:#ECF0F8; --hrt-kara:#FFFFFF; --hrt-kiyi:#8390B0; --hrt-izgara:rgb(25 37 111 / .07); --hrt-etiket:#12172E; --hrt-koyu:#0B1030; --hrt-vurgu:#19256F; --hrt-ikincil:#1D4ED8; --hrt-parlak:rgb(29 78 216 / .35); --hrt-zemin:#FFFFFF; } :root[data-tema="derin-ege"] .atlas, :root[data-tema="gece-platin"] .atlas { --hrt-deniz:#0E1640; --hrt-deniz-2:#16215A; --hrt-kara:#1C2658; --hrt-kiyi:#6F7FD0; --hrt-izgara:rgb(143 166 255 / .10); --hrt-etiket:#E6E9F5; --hrt-koyu:#FFFFFF; --hrt-vurgu:#8FA6FF; --hrt-ikincil:#B7C4FF; --hrt-parlak:rgb(143 166 255 / .45); --hrt-zemin:#0B1030; } .atlas-sahne { position:relative; height:clamp(360px, 52vh, 520px); border:1px solid var(--kart-kenar); border-radius:var(--kose-2); overflow:hidden; background:var(--hrt-deniz); box-shadow:var(--e3); } .atlas-tuval { display:block; width:100%; height:100%; touch-action:none; cursor:grab; } .atlas-tuval.tutuluyor { cursor:grabbing; } .atlas-tuval:focus-visible { outline:2px solid var(--odak); outline-offset:-2px; } .atlas-kontrol { position:absolute; top:var(--b-4); inset-inline-end:var(--b-4); display:flex; flex-direction:column; gap:1px; border:1px solid var(--kart-kenar); border-radius:var(--kose-2); overflow:hidden; box-shadow:var(--e2); background:var(--kart-kenar); } .atlas-kontrol button { width:40px; height:40px; border:0; background:var(--hrt-zemin); cursor:pointer; font:400 18px/1 var(--yazi-govde); color:var(--fildisi); } .atlas-kontrol button:active { background:var(--deniz-isik); } .atlas-ipucu { margin:var(--b-3) 0 0; font-size:var(--fs-11); font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--soluk); } /* Detay menüsü: iğneye basınca açılır. Masaüstünde kart, telefonda alt levha. */ .atlas-menu { position:absolute; top:var(--b-4); inset-inline-start:var(--b-4); width:min(320px, calc(100% - 32px)); max-height:calc(100% - 32px); overflow:auto; background:var(--hrt-zemin); border:1px solid var(--kart-kenar); border-radius:var(--kose-2); padding:var(--b-5); box-shadow:var(--e4); animation:menuGel .3s var(--gecis) both; } .atlas-menu[hidden] { display:none; } @keyframes menuGel { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } } .atlas-kapa { position:absolute; top:var(--b-2); inset-inline-end:var(--b-2); width:32px; height:32px; border:0; cursor:pointer; background:none; font-size:22px; line-height:1; color:var(--soluk); border-radius:var(--kose-1); } .atlas-kapa:active { background:var(--deniz-isik); color:var(--fildisi); } .atlas-us { font-size:var(--fs-11); font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--platin); margin:0 0 var(--b-2); } .atlas-baslik { font-size:var(--fs-24); line-height:1.2; margin:0 0 var(--b-3); color:var(--fildisi); } .atlas-ozet, .atlas-bos { margin:0; font-size:var(--fs-14); line-height:1.7; color:var(--soluk); } .atlas-filo { list-style:none; margin:0; padding:0; display:grid; gap:var(--b-2); } .atlas-filo a { display:block; padding:var(--b-3) var(--b-4); border:1px solid var(--kart-kenar); border-radius:var(--kose-1); text-decoration:none; background:var(--yuzey); box-shadow:var(--e1); } .atlas-filo a:active { background:var(--deniz-isik); box-shadow:none; } .atlas-filo b { display:block; font-size:var(--fs-16); color:var(--fildisi); font-weight:500; } .atlas-filo span { display:block; font-size:var(--fs-12); color:var(--soluk); margin-top:var(--b-1); } .atlas-filo .atlas-git { color:var(--platin); letter-spacing:.1em; font-size:var(--fs-11); font-weight:600; text-transform:uppercase; margin-top:var(--b-2); } .atlas-eylem { margin:var(--b-5) 0 0; } .atlas-eylem .dugme { min-height:40px; padding:var(--b-2) var(--b-5); font-size:var(--fs-11); } @media (max-width:620px) { .atlas-sahne { height:340px; } /* Telefonda küre yok: küçük ekranda harita araç, küre süs. */ .gorunum-sekme, .gorunum-kure { display:none; } .atlas-menu { top:auto; bottom:0; inset-inline-start:0; width:100%; max-height:64%; border-width:1px 0 0; border-radius:var(--kose-2) var(--kose-2) 0 0; } @keyframes menuGel { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } } } /* Kahramanın arkasındaki sessiz deniz haritası: dokunulmaz, yazısız, ekran okuyucuya görünmez. */ .kahraman-harita { position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; --hrt-deniz:#EEF1F8; --hrt-deniz-2:#F6F8FC; --hrt-kara:#FFFFFF; --hrt-kiyi:#8390B0; --hrt-izgara:rgb(25 37 111 / .05); --hrt-etiket:#12172E; --hrt-koyu:#0B1030; --hrt-vurgu:#19256F; --hrt-ikincil:#1D4ED8; --hrt-parlak:rgb(29 78 216 / .3); --hrt-zemin:#FFFFFF; -webkit-mask-image:radial-gradient(96% 66% at 50% 40%, transparent 24%, #000 72%); mask-image:radial-gradient(96% 66% at 50% 40%, transparent 24%, #000 72%); } /* Betiksiz yedek — ve klavye yolu. Betik varken haritayı oraya uçurur. */ .atlas-liste { list-style:none; margin:var(--b-5) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--b-2); } .atlas-liste a { display:inline-flex; align-items:baseline; gap:var(--b-2); padding:var(--b-2) var(--b-3); border-radius:var(--kose-1); border:1px solid var(--kart-kenar); background:var(--yuzey); text-decoration:none; font-size:var(--fs-13); color:var(--soluk); box-shadow:var(--e1); } .atlas-liste a:active { background:var(--deniz-isik); box-shadow:none; } .atlas-liste .liman .ad { color:var(--fildisi); } .atlas-liste .alt { font-size:var(--fs-11); font-weight:600; color:var(--platin); } /* Tuvaller geometriyi soldan sağa hesaplar; Arapça sayfada da etiketler iğnenin sağına düşsün. */ .atlas-tuval, .kure-tuval, canvas.kahraman-harita { direction:ltr; } .kure-sar { display:grid; grid-template-columns:minmax(260px, 340px) 1fr; gap:var(--b-8); align-items:center; } @media (max-width:820px) { .kure-sar { grid-template-columns:1fr; gap:var(--b-6); justify-items:center; } } .kure { width:100%; display:flex; flex-direction:column; align-items:center; gap:var(--b-3); } .kure-tuval { display:block; touch-action:none; cursor:grab; border-radius:50%; outline-offset:6px; } .kure-tuval.tutuluyor { cursor:grabbing; } .kure-tuval:focus-visible { outline:2px solid var(--odak); } .kure-ipucu { margin:0; font-size:var(--fs-11); font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--soluk); } .kure-liste { color:var(--soluk); font-size:var(--fs-13); letter-spacing:.04em; line-height:2.1; margin:0; max-width:52ch; } /* ══ UYGUNLUK TAKVİMİ ══ gerçek ay ızgarası. Açık gün: kabartma tuş (tıklanabilirliği hover olmadan gösterir); dolu: taralı + üstü çizili; bugün: lacivert halka. */ .takvim-ozet { position:relative; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--b-3) var(--b-5); padding:var(--b-5); margin:0 0 var(--b-4); border-radius:var(--kose-2); color:#FFFFFF; --odak:#FFFFFF; background:linear-gradient(115deg, var(--t-hero-1) 0%, var(--t-hero-2) 55%, var(--t-hero-3) 100%); box-shadow:var(--e3); } .takvim-ozet-us { display:block; font-size:var(--fs-11); font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--turkuaz-acik); margin:0 0 var(--b-2); } .takvim-ozet b { font-family:var(--yazi-baslik); font-weight:400; font-size:clamp(20px, 0.8vw + 14px, 24px); color:#FFFFFF; } .takvim-ozet-fiyat { margin-inline-start:var(--b-3); font-size:var(--fs-14); color:var(--t-hero-soluk); white-space:nowrap; } .takvim { display:grid; grid-template-columns:repeat(auto-fill, minmax(256px, 1fr)); gap:var(--b-4); margin:0 0 var(--b-4); } .takvim-ay { background:var(--kart-zemin); border:1px solid var(--kart-kenar); border-radius:var(--kose-2); padding:var(--b-4); box-shadow:var(--e1), var(--parilti); } .takvim-bas { display:flex; align-items:center; justify-content:space-between; gap:var(--b-2); margin:0 0 var(--b-3); padding:0 0 var(--b-3); border-bottom:1px solid var(--kart-kenar); } .takvim-ad { font-family:var(--yazi-baslik); font-size:var(--fs-18); color:var(--fildisi); white-space:nowrap; } .takvim-fiyat { background:var(--rozet-zemin); color:var(--rozet-yazi); border-radius:999px; padding:var(--b-1) var(--b-3); font-size:var(--fs-12); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; } .takvim-fiyat .birim { color:inherit; opacity:.8; font-weight:500; } .takvim-gunler { display:grid; grid-template-columns:repeat(7, 1fr); gap:var(--b-1); } .gun-bas { display:grid; place-items:center; height:24px; font-size:var(--fs-11); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--soluk); } .gun-bas.hafta-sonu { color:var(--platin); } .gun { display:grid; place-items:center; height:36px; border-radius:var(--kose-1); font-size:var(--fs-13); font-variant-numeric:tabular-nums; color:var(--soluk); } .gun.bosluk { visibility:hidden; } .gun.gecmis { color:color-mix(in srgb, var(--soluk) 42%, transparent); } .gun.acik { color:var(--platin); font-weight:600; background:var(--yuzey); border:1px solid var(--kart-kenar); box-shadow:var(--e1), var(--parilti); transition:transform .1s var(--gecis), background-color .15s var(--gecis); } a.gun.acik:active, a.gun.acik:focus-visible { background:var(--eylem-zemin); color:var(--eylem-yazi); border-color:var(--eylem-zemin); transform:translateY(1px); box-shadow:none; } .gun.dolu { color:var(--soluk); border:1px solid var(--kart-kenar); background:repeating-linear-gradient(135deg, var(--dolu-cizgi) 0 1px, transparent 1px 6px), var(--deniz-isik); text-decoration:line-through; text-decoration-color:var(--soluk); } .gun.bugun { box-shadow:0 0 0 2px var(--platin) inset; font-weight:700; } .gun.ornek { display:inline-grid; width:32px; height:28px; vertical-align:middle; margin:0; font-size:var(--fs-12); } .takvim-anahtar { display:flex; flex-wrap:wrap; gap:var(--b-3) var(--b-5); align-items:center; margin:var(--b-4) 0 var(--b-6); color:var(--soluk); font-size:var(--fs-13); line-height:2; } .takvim-anahtar > span { display:inline-flex; align-items:center; gap:var(--b-2); } .takvim-bos { color:var(--platin); } /* ══ TARİH SEÇİCİ ══ (tarih-betik.js) Yerel takvim yerine: açık turkuaz geçiş kutu, günler beyaz kabartma tuş, seçilen uçlar dolu lacivert + beyaz, aradaki günler dolu okyanus mavisi + beyaz (açık zemin üstünde aynı rengin koyusu yok). Kendiliğinden hareket yok, hover yok. Dar ekranda alttan açılan levha. */ .tarih-sar { position:relative; display:block; } .tarih-alan { cursor:pointer; caret-color:transparent; padding-inline-end:44px; text-overflow:ellipsis; } .tarih-ikon { position:absolute; inset-inline-end:14px; top:50%; width:18px; height:18px; margin-top:-9px; pointer-events:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; opacity:.85; } .arama-bar .tarih-alan { padding-inline-end:26px; } .arama-bar .tarih-ikon { inset-inline-end:0; } .tarih-kutu { position:fixed; z-index:70; width:min(336px, calc(100vw - 16px)); max-height:calc(100vh - 16px); overflow-y:auto; padding:14px; border-radius:18px; background:var(--acik-gecis); color:var(--acik-yazi); border:1px solid rgb(255 255 255 / .55); box-shadow:0 2px 4px rgb(3 36 63 / .16), 0 18px 40px -12px rgb(3 36 63 / .45), 0 40px 80px -30px rgb(3 36 63 / .5), inset 0 1px 0 rgb(255 255 255 / .5); font:500 var(--fs-14)/1.2 var(--yazi-govde); } .tarih-kutu[hidden] { display:none; } .tarih-bas { display:flex; align-items:center; gap:var(--b-2); margin:0 0 var(--b-3); } .tarih-ay { flex:1; text-align:center; font-weight:700; font-size:var(--fs-16); letter-spacing:.01em; color:var(--acik-yazi); } .tarih-kutu button { font:inherit; margin:0; cursor:pointer; -webkit-tap-highlight-color:transparent; } .tarih-ok { display:grid; place-items:center; width:38px; height:38px; padding:0 0 3px; border-radius:10px; border:1px solid #FFFFFF; background:var(--tus-zemin); color:var(--tus-yazi); box-shadow:var(--tus-golge); font-size:24px; line-height:1; } .tarih-ok:disabled { opacity:.35; cursor:default; box-shadow:none; } [dir="rtl"] .tarih-ok { transform:scaleX(-1); } .tarih-gunler { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:5px; } .tarih-gun-adi { padding:2px 0 4px; text-align:center; font-size:var(--fs-11); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--acik-soluk); } .tarih-gun { height:38px; padding:0; border-radius:9px; border:1px solid #FFFFFF; background:var(--tus-zemin); color:var(--tus-yazi); box-shadow:var(--tus-golge); font-size:var(--fs-16); font-weight:600; font-variant-numeric:tabular-nums; } .tarih-gun:disabled { background:none; border-color:transparent; box-shadow:none; color:rgb(3 36 63 / .4); cursor:default; } .tarih-gun.aralik { background:#0B6AA3; border-color:#0B6AA3; color:#FFFFFF; box-shadow:0 1px 2px rgb(3 36 63 / .3), inset 0 1px 0 rgb(255 255 255 / .14); } .tarih-gun.uc { background:#05325A; border-color:#05325A; color:#FFFFFF; box-shadow:0 2px 6px rgb(3 36 63 / .4), inset 0 1px 0 rgb(255 255 255 / .16); } .tarih-gun.bugun:not(.uc):not(:disabled) { box-shadow:0 0 0 2px #05325A inset, var(--tus-golge); } .tarih-gun:not(:disabled):active, .tarih-ok:not(:disabled):active { transform:translateY(1px); box-shadow:0 1px 1px rgb(3 36 63 / .2); } [dir="rtl"] .tarih-ok:not(:disabled):active { transform:scaleX(-1) translateY(1px); } .tarih-kutu button:focus-visible { outline:2px solid #03243F; outline-offset:2px; } .tarih-alt { display:flex; justify-content:space-between; gap:var(--b-2); margin:var(--b-3) 0 0; } .tarih-temizle, .tarih-kapat { min-height:40px; padding:0 var(--b-4); border-radius:10px; font-size:var(--fs-13); font-weight:600; letter-spacing:.02em; } .tarih-temizle { border:1px solid #FFFFFF; background:var(--tus-zemin); color:var(--tus-yazi); box-shadow:var(--tus-golge); } .tarih-kapat { border:1px solid #05325A; background:#05325A; color:#FFFFFF; box-shadow:0 2px 6px rgb(3 36 63 / .3), inset 0 1px 0 rgb(255 255 255 / .16); } @media (max-width:560px) { .tarih-kutu { inset:auto 0 0 0; width:auto; border-radius:20px 20px 0 0; border-width:1px 0 0; padding:var(--b-4) var(--b-4) calc(var(--b-4) + env(safe-area-inset-bottom)); } .tarih-gun { height:44px; } } /* ══ FİYAT HESAPLAYICI ══ lacivert başlık + makbuz; hesap sunucuda. */ .yapilandirici { background:var(--kart-zemin); border:1px solid var(--kart-kenar); border-radius:var(--kose-2); margin:0 0 var(--b-5); overflow:hidden; box-shadow:var(--e3); } .yap-satir { position:relative; display:grid; grid-template-columns:1fr 1fr .7fr auto; gap:var(--b-4); align-items:end; padding:var(--b-5); color:#FFFFFF; --odak:#FFFFFF; background:linear-gradient(115deg, var(--t-hero-1), var(--t-hero-2) 60%, var(--t-hero-3)); } .yap-satir label { display:block; margin:0 0 var(--b-2); font-size:var(--fs-11); font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--t-hero-soluk); } .yap-satir input { width:100%; background:rgb(255 255 255 / .1); color:#FFFFFF; border:1px solid rgb(255 255 255 / .3); border-radius:var(--kose-1); box-shadow:none; color-scheme:dark; } .yap-satir input:focus { outline:none; border-color:#FFFFFF; box-shadow:0 0 0 3px rgb(255 255 255 / .18); } .yap-satir .dugme { white-space:nowrap; } @media (max-width:760px) { .yap-satir { grid-template-columns:1fr 1fr; } .yap-satir .dugme { grid-column:1/-1; } } .yap-ek { border:0; margin:0; padding:var(--b-5) var(--b-5) var(--b-2); min-width:0; } /* Legend içerik kutusuna alınır (float): yoksa fieldset kenarına yapışır. */ .yap-ek legend { float:left; float:inline-start; width:100%; padding:0; margin:0 0 var(--b-3); font-size:var(--fs-11); font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--platin); } .yap-ek legend + * { clear:both; } /* .ek-satir bir