/* ==========================================================================
   HC MARIN WORKS — v4: beyaz tema  (html[data-theme="beyaz"])
   Beyaz tema lacivert temanin renk paletini kullanir (v2.css'teki kurallar html[data-theme="navy"] yerine
   navy+beyaz icin gecerlidir). Bu dosya yalnizca koyu yuzeyleri acik yuzeye cevirir.
   - Her kural html[data-theme="beyaz"] ile baslar: lacivert ve siyah temalara dokunmaz.
   - .hero-visual / .page-hero-visual (tekne sistem haritasi) baska ekipte: icindeki renk belirtecleri
     lacivert paletle birakildi, o bolgeye kural yazilmadi.
   - Metin kontrasti: normal >= 4.5:1, buyuk metin / ikon >= 3:1.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. renk belirtecleri */
html[data-theme="beyaz"] {
  --w-sky: #f4f8fb;      /* hero / page-hero / cta zemini */
  --w-band: #eaf1f6;     /* koyu bolumlerin acik karsiligi (footer, marquee, hizmet kartlari) */
  --w-tint: #e3eef6;     /* acik mavi blok (eski koyu kartlar) */
  --w-edge: #c5d6e3;     /* acik mavi blok kenari */
  --paper-2: #eef4f8;    /* ikinci bant */
  --paper-3: #e6eef4;
  --line: #d5e1ea;
  --line-2: #c2d3e0;
  --accent: #27699b;     /* acik zeminde okunur mavi (metin / ikon / cizgi); dekor icin acik mavi #7db5d6 kullanilir */
  --accent-soft: rgba(125, 181, 214, .22);
  --silver: #7b97ad;
  --metal: linear-gradient(115deg, #0b1f33 0%, #1b4268 46%, #0b1f33 100%);
  --metal-text: linear-gradient(100deg, #0b1f33 0%, #1d4f7a 36%, #0b1f33 54%, #2a6b9c 78%, #0b1f33 100%);
  --shadow: 0 1px 2px rgba(11, 31, 51, .05), 0 14px 34px -14px rgba(11, 31, 51, .2);
  color-scheme: light;
}

/* Eskiden koyu olan yuzeylerde "koyu zemin ustu acik metin" renkleri koyu metne doner (hepsi var(--steel-*) kullanir) */
html[data-theme="beyaz"] :is(.site-header, .mobile-nav, .dd, .hero, .page-hero, .section-dark, .cta, .marquee, .site-footer,
  .emergency, .elec-card, .area-fig, .about-card, .product-card, .partner-note, .prob-answer, .milestones-lg li, .preview,
  .contact-card-wa, .service-card.sc-dark, .step-cta, .xp-more, .rs-cta, .svc-hero-fig, .svc-tile) {
  --steel-100: #1c3349;
  --steel-200: #2d475d;
  --steel-300: #476176;
  --steel-400: #4d6376;
  --line-dark: rgba(11, 31, 51, .13);
}
/* tekne sistem haritasi (baska ekip): icindeki belirtecler lacivert paletle kalir */
html[data-theme="beyaz"] :is(.hero-visual, .page-hero-visual) {
  --steel-100: #dde6ec;
  --steel-200: #bccbd6;
  --steel-300: #92a6b6;
  --steel-400: #687e90;
  --accent: #7db5d6;
  --accent-soft: rgba(125, 181, 214, .16);
  --line-dark: rgba(188, 203, 214, .12);
}

html[data-theme="beyaz"] ::selection { background: #bcd9ec; color: var(--ink-900); }
html[data-theme="beyaz"] .field input::placeholder,
html[data-theme="beyaz"] .field textarea::placeholder { color: #66798a; }
html[data-theme="beyaz"] .hc-stories-head span:last-child { opacity: 1; }   /* "Kaydirin ->" ipucu 4.5:1 */
html[data-theme="beyaz"] .nf .ill-card { border-color: var(--line); }

/* ---------------------------------------------------------------- 2. hero / page-hero / section-dark / cta -> acik zemin */
html[data-theme="beyaz"] :is(.hero, .page-hero, .cta) { background: var(--w-sky); color: var(--text); }
html[data-theme="beyaz"] .section-dark { background: #e9f1f7; color: var(--text); }
html[data-theme="beyaz"] .section-dark { border-block: 1px solid var(--line); }
html[data-theme="beyaz"] .cta { border-top: 1px solid var(--line); }
html[data-theme="beyaz"] .page-hero { border-bottom: 1px solid #dfe9f1; }
html[data-theme="beyaz"] .hero-bg {
  background:
    radial-gradient(900px 520px at 78% 12%, rgba(125, 181, 214, .27), transparent 62%),
    radial-gradient(700px 480px at 6% 94%, rgba(160, 200, 226, .24), transparent 62%),
    linear-gradient(180deg, #f8fbfd 0%, #edf4f9 100%);
}
html[data-theme="beyaz"] :is(.section-dark, .cta) > .hero-bg {
  background:
    radial-gradient(900px 520px at 80% 18%, rgba(125, 181, 214, .26), transparent 62%),
    radial-gradient(700px 480px at 6% 92%, rgba(160, 200, 226, .22), transparent 62%),
    linear-gradient(180deg, #eef4f9 0%, #e3edf5 100%);
}
/* batimetri deseni beyaz cizgiliydi: sekli maske olarak kullanip lacivert-maviye boyuyoruz (acik zeminde ince kontur) */
html[data-theme="beyaz"] .hero-bg::before {
  background: #1f5f8b;
  -webkit-mask: url("../img/bathymetry.svg") center / cover no-repeat;
  mask: url("../img/bathymetry.svg") center / cover no-repeat;
  opacity: .1;
}
html[data-theme="beyaz"] .hero-bg::after {
  background-image: linear-gradient(rgba(11, 31, 51, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 31, 51, .05) 1px, transparent 1px);
}
html[data-theme="beyaz"] .page-hero-mark { color: var(--ink-900); opacity: .05; }   /* logo filigrani */

/* eyebrow / kicker */
html[data-theme="beyaz"] :is(.hero, .page-hero, .section-dark, .cta) .eyebrow .idx { color: var(--ink-900); border-color: #9fb4c4; }
html[data-theme="beyaz"] .eyebrow-live::before,
html[data-theme="beyaz"] .h1-kicker::before { background: var(--accent); }

/* ana sayfa hero metinleri */
html[data-theme="beyaz"] .h1-sub,
html[data-theme="beyaz"] .hero-loc b { color: var(--ink-900); }
html[data-theme="beyaz"] .hero-call a { color: var(--ink-900); border-bottom-color: rgba(11, 31, 51, .32); }
html[data-theme="beyaz"] .hero-call a:hover { border-color: var(--accent); }
html[data-theme="beyaz"] .hero-badge { border-color: var(--line-2); background: rgba(255, 255, 255, .7); color: var(--steel-100); }
html[data-theme="beyaz"] .crumbs a:hover { color: var(--ink-900); }

/* hizmet sayfasi hero */
html[data-theme="beyaz"] .svc-badge { border-color: var(--line-2); background: rgba(255, 255, 255, .75); color: var(--ink-900); }
html[data-theme="beyaz"] .proof-list li { color: var(--ink-900); }
html[data-theme="beyaz"] .hero-note { border-color: #9fb4c4; }
html[data-theme="beyaz"] .chips-dark li { background: rgba(255, 255, 255, .78); border-color: var(--line-2); color: var(--steel-100); }
html[data-theme="beyaz"] .svc-hero-fig { background: #fff; border-color: var(--line); box-shadow: 0 24px 44px -28px rgba(11, 31, 51, .35); }
html[data-theme="beyaz"] .svc-hero-fig .ill { background: #eef1f3; border-bottom-color: var(--line); }
html[data-theme="beyaz"] .svc-hero-fig figcaption { color: var(--text-3); }
html[data-theme="beyaz"] .svc-hero-fig figcaption b { color: var(--ink-900); }
html[data-theme="beyaz"] .svc-hero-fig figcaption .ico { color: var(--accent-ink); }

/* section-dark ve cta icerikleri */
html[data-theme="beyaz"] .section-dark .closing-big { color: var(--ink-900); }
html[data-theme="beyaz"] .cta-meta a:hover { color: var(--ink-900); }

/* "Tuzla'dan Antalya'ya" rota cizimi (acik zemin) */
html[data-theme="beyaz"] .route-grid path { stroke: rgba(11, 31, 51, .09); }
html[data-theme="beyaz"] .route-line { stroke: var(--accent); }
html[data-theme="beyaz"] .route-pt { fill: #fff; stroke: var(--ink-900); }
html[data-theme="beyaz"] .route-pt-end { fill: var(--accent); stroke: none; }
html[data-theme="beyaz"] .route-ring { stroke: var(--accent); }
html[data-theme="beyaz"] .route-boat { fill: var(--ink-900); }
html[data-theme="beyaz"] .route-label { fill: var(--ink-900); }
html[data-theme="beyaz"] .route-coord { fill: var(--steel-300); }

/* ---------------------------------------------------------------- 3. ust bilgi (header), hizmetler menusu, mobil menu */
html[data-theme="beyaz"] .site-header { color: var(--text); }
html[data-theme="beyaz"] .site-header::after { background: rgba(11, 31, 51, .12); }
html[data-theme="beyaz"] .site-header.is-scrolled { background: rgba(255, 255, 255, .94); box-shadow: 0 10px 28px -24px rgba(11, 31, 51, .45); }
@media (max-width: 899px), (hover: none) {
  html[data-theme="beyaz"] .site-header.is-scrolled { background: #fff; }
}
html[data-theme="beyaz"] .brand,
html[data-theme="beyaz"] .brand-mark { color: var(--ink-900); }                    /* logo (currentColor) lacivert */
html[data-theme="beyaz"] .main-nav a:hover { color: var(--ink-900); background: rgba(11, 31, 51, .06); }
html[data-theme="beyaz"] .main-nav a[aria-current="page"] { color: var(--ink-900); }
html[data-theme="beyaz"] .lang { border-color: rgba(11, 31, 51, .24); }
html[data-theme="beyaz"] .lang a:hover { color: var(--ink-900); }
html[data-theme="beyaz"] .lang a[aria-current] { background: var(--ink-900); color: #fff; }
html[data-theme="beyaz"] .header-phone:hover { color: var(--ink-900); }
html[data-theme="beyaz"] .nav-toggle { border-color: rgba(11, 31, 51, .28); }
html[data-theme="beyaz"] .nav-toggle-bars,
html[data-theme="beyaz"] .nav-toggle-bars::before,
html[data-theme="beyaz"] .nav-toggle-bars::after { background: var(--ink-900); }
html[data-theme="beyaz"] .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }

/* hizmetler acilir menusu */
html[data-theme="beyaz"] .dd { background: #fff; border-color: var(--line); box-shadow: 0 30px 60px -28px rgba(11, 31, 51, .38), 0 2px 8px rgba(11, 31, 51, .06); }
html[data-theme="beyaz"] .main-nav .dd-list a .mono { color: var(--accent); }
html[data-theme="beyaz"] .main-nav .dd-list a:hover,
html[data-theme="beyaz"] .main-nav .dd-list a:focus-visible { background: var(--paper-2); color: var(--ink-900); }
html[data-theme="beyaz"] .dd-foot { border-top-color: var(--line); }
html[data-theme="beyaz"] .main-nav .dd-foot a { color: var(--ink-900); }
html[data-theme="beyaz"] .main-nav .dd-foot a:hover { color: var(--accent); }

/* mobil menu */
html[data-theme="beyaz"] .mobile-nav { background: rgba(244, 248, 251, .985); color: var(--text); }

/* tema anahtari (menu + footer) */
html[data-theme="beyaz"] .theme-switch { border-color: rgba(11, 31, 51, .22); }
html[data-theme="beyaz"] .theme-switch button:hover { color: var(--ink-900); }
html[data-theme="beyaz"] .theme-switch button[aria-pressed="true"] { background: var(--ink-900); color: #fff; }

/* ---------------------------------------------------------------- 4. dugmeler (WhatsApp yesili ayni kalir) */
html[data-theme="beyaz"] .btn-metal {
  --bg: #0b1f33; --fg: #fff; --bd: #0b1f33;
  background-color: #0b1f33;
  background-image: var(--metal);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 26px -14px rgba(11, 31, 51, .6);
}
html[data-theme="beyaz"] .btn-metal::after { background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .22) 48%, transparent 66%); }
html[data-theme="beyaz"] .btn-metal:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 16px 32px -14px rgba(11, 31, 51, .65); }
html[data-theme="beyaz"] .btn-ghost { --bg: transparent; --fg: var(--ink-900); --bd: #6f8ba1; }
html[data-theme="beyaz"] .btn-ghost:hover { --bg: rgba(11, 31, 51, .06); --bd: var(--ink-900); }

/* ---------------------------------------------------------------- 5. marquee */
html[data-theme="beyaz"] .marquee { background: var(--w-band); border-block-color: var(--line); }

/* ---------------------------------------------------------------- 6. eskiden koyu bloklar -> acik mavi bloklar */
html[data-theme="beyaz"] :is(.emergency, .elec-card, .about-card, .partner-note, .prob-answer, .milestones-lg li, .preview, .contact-card-wa) {
  background-color: var(--w-tint); color: var(--ink-900); border: 1px solid var(--w-edge);
}
html[data-theme="beyaz"] .emergency:hover { background-color: #d9e8f3; }
html[data-theme="beyaz"] .prob-answer { border-left: 3px solid var(--accent); }
html[data-theme="beyaz"] .partner-note strong { color: var(--ink-900); }

/* elektrik partneri karti */
html[data-theme="beyaz"] .elec-card .cap-icon { background: #fff; color: var(--accent-ink); border: 1px solid var(--w-edge); }
html[data-theme="beyaz"] .elec-card h3,
html[data-theme="beyaz"] .elec-msg { color: var(--ink-900); }
html[data-theme="beyaz"] .elec-card .chips li { background: rgba(255, 255, 255, .78); border-color: var(--w-edge); color: var(--steel-100); }

/* hakkimizda: kilometre taslari */
html[data-theme="beyaz"] .milestones-lg .ms-year { color: var(--ink-900); }

/* iletisim: WhatsApp karti + mesaj onizleme */
html[data-theme="beyaz"] .contact-card-wa > .ico:first-child { color: #11803f; }
html[data-theme="beyaz"] .contact-card-wa:hover > .ico:last-child { color: var(--ink-900); }
html[data-theme="beyaz"] .preview { background-image: radial-gradient(400px 240px at 100% 0, var(--accent-soft), transparent 60%); }
html[data-theme="beyaz"] .preview-body { background: #fff; color: var(--text-2); box-shadow: 0 1px 2px rgba(11, 31, 51, .1); }
html[data-theme="beyaz"] .preview-body::before { border-top-color: #fff; border-right-color: #fff; }

/* ana sayfa: hizmet bolgesi haritasi */
html[data-theme="beyaz"] .area-fig { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
html[data-theme="beyaz"] .am-grid path { stroke: rgba(11, 31, 51, .07); }
html[data-theme="beyaz"] .am-land { fill: rgba(11, 31, 51, .05); }
html[data-theme="beyaz"] .am-city.is-hq circle { fill: var(--ink-900); }
html[data-theme="beyaz"] .am-city.is-hq text { fill: var(--ink-900); }
html[data-theme="beyaz"] .am-sea { fill: rgba(11, 31, 51, .32); }

/* surec kapanis hucresi / projeler "daha fazla" / refit CTA karti / akis son adimi */
html[data-theme="beyaz"] .step.step-cta,
html[data-theme="beyaz"] .xp-card.xp-more,
html[data-theme="beyaz"] .rs-card.rs-cta { background: var(--w-tint); border-color: var(--w-edge); color: var(--ink-900); }
html[data-theme="beyaz"] .step.step-cta h3,
html[data-theme="beyaz"] .xp-card.xp-more a,
html[data-theme="beyaz"] .rs-card.rs-cta h3,
html[data-theme="beyaz"] .rs-card.rs-cta h3 a,
html[data-theme="beyaz"] .rs-card.rs-cta .sc-more { color: var(--ink-900); }
html[data-theme="beyaz"] .step.step-cta p,
html[data-theme="beyaz"] .xp-card.xp-more p,
html[data-theme="beyaz"] .rs-card.rs-cta > p { color: var(--text-2); }
html[data-theme="beyaz"] .xp-card.xp-more:hover { background: #d9e8f3; }
html[data-theme="beyaz"] .xp-more-ico { background: rgba(11, 31, 51, .07); }
html[data-theme="beyaz"] .rs-card.rs-cta .cap-icon { background: #fff; color: var(--accent-ink); border: 1px solid var(--w-edge); }
html[data-theme="beyaz"] .flow-step:last-child { background: var(--w-tint); border-color: var(--accent); color: var(--ink-900); }

/* hizmetler sayfasi: "koyu" kart */
html[data-theme="beyaz"] .service-card.sc-dark {
  background-color: var(--w-band); border-color: var(--w-edge); color: var(--text);
  background-image: linear-gradient(rgba(11, 31, 51, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 31, 51, .05) 1px, transparent 1px);
}
html[data-theme="beyaz"] .service-card.sc-dark h3,
html[data-theme="beyaz"] .service-card.sc-dark h3 a { color: var(--ink-900); }
html[data-theme="beyaz"] .service-card.sc-dark > p,
html[data-theme="beyaz"] .service-card.sc-dark .sc-num,
html[data-theme="beyaz"] .service-card.sc-dark .sc-more,
html[data-theme="beyaz"] .sc-dark .sc-list li { color: var(--text-2); }
html[data-theme="beyaz"] .service-card.sc-dark .sc-icon { background: #fff; border-color: var(--w-edge); color: var(--ink-900); }
html[data-theme="beyaz"] .service-card.sc-dark:hover .sc-icon { background: #7db5d6; border-color: #7db5d6; color: var(--ink-900); }
html[data-theme="beyaz"] .service-card.sc-dark .chips li { color: var(--text-2); background: rgba(255, 255, 255, .78); border-color: var(--w-edge); }
html[data-theme="beyaz"] .service-card.sc-dark:hover { box-shadow: var(--shadow); }
html[data-theme="beyaz"] .sc-dark .sc-list li + li { border-top-color: rgba(11, 31, 51, .1); }

/* urun karti / hizmet karosu (su an sayfalarda kullanilmiyor, stilleri hazir) */
html[data-theme="beyaz"] .product-card { background: var(--w-tint); color: var(--text); border: 1px solid var(--w-edge); }
html[data-theme="beyaz"] .product-card::before { background: radial-gradient(500px 300px at 100% 0%, rgba(125, 181, 214, .3), transparent 60%); opacity: 1; }
html[data-theme="beyaz"] .product-card::after { background: none; }
html[data-theme="beyaz"] .tag { border-color: #9fb4c4; color: var(--steel-100); }
html[data-theme="beyaz"] .product-card .btn-dark { --bg: var(--ink-900); --fg: #fff; --bd: var(--ink-900); }
html[data-theme="beyaz"] .product-card .btn-dark:hover { --bg: var(--ink-600); --bd: var(--ink-600); }
html[data-theme="beyaz"] .svc-tile {
  background-color: var(--w-band); color: var(--steel-300);
  background-image: linear-gradient(rgba(11, 31, 51, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 31, 51, .07) 1px, transparent 1px);
}

/* lacivert kalan kucuk ogeler (ikon cipleri, rozetler, secili filtre...) beyaz zeminde de lacivert-beyaz okunur;
   yalnizca rozet ikonu (kart gorselinin ustunde) acik mavi kalmali */
html[data-theme="beyaz"] .sc-badge .ico { color: #7db5d6; }
html[data-theme="beyaz"] .service-card:hover .sc-icon { background: #7db5d6; color: var(--ink-900); }

/* ---------------------------------------------------------------- 7. footer */
html[data-theme="beyaz"] .site-footer { background: var(--w-band); border-top: 1px solid var(--line); }
html[data-theme="beyaz"] .footer-social a:hover { color: #fff; background: var(--ink-900); border-color: var(--ink-900); }
html[data-theme="beyaz"] .footer-col a:hover,
html[data-theme="beyaz"] .footer-legal a:hover { color: var(--ink-900); }
html[data-theme="beyaz"] .footer-rel b { color: var(--ink-900); }

/* ---------------------------------------------------------------- 8. hikaye cubugu (zaten acik) + hikaye goruntuleyici */
html[data-theme="beyaz"] .hc-sv::backdrop { background: rgba(213, 227, 238, .92); }
html[data-theme="beyaz"] .hc-sv-frame { box-shadow: 0 0 0 1px var(--line), 0 40px 80px -34px rgba(11, 31, 51, .45); }
html[data-theme="beyaz"] .hc-sv-arrow { background: #fff; color: var(--ink-900); border-color: var(--line-2); box-shadow: 0 10px 22px -12px rgba(11, 31, 51, .5); }

/* ---------------------------------------------------------------- 9. yazdirma */
@media print {
  html[data-theme="beyaz"] :is(.hero, .page-hero) { background: none; color: #000; }
}