/* HLB-TTK teması — canlı hlb-ttk.com'dan ölçülen birebir kimlik (1280 viewport referans):
   teal #005a77 · koyu gri #3c3c3b · açık mavi #dce8ed · buz #edf4f6 · sarı #fbba00 · pasif menü #c8d3d9
   gövde: Gotham fallback (helvetica/arial) · hero: Roboto */

:root {
  --teal: #005a77;
  --dark: #3c3c3b;
  --light-blue: #dce8ed;
  --ice: #edf4f6;
  --yellow: #fbba00;
  --pale: #c8d3d9;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Gotham A', 'Gotham B', Lato, helvetica, arial, sans-serif; color: #000; background: #fff; line-height: 1.4; font-size: 16px; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { max-width: 1171px; margin: 0 auto; }
@media (max-width: 1219px) { .container { padding-left: 24px; padding-right: 24px; } }

/* ---------- Header (anasayfada hero üzerine bindirme, iç sayfada teal bant) ---------- */
.site-header { position: absolute; inset: 0 0 auto 0; z-index: 90; }
body.inner .site-header { position: relative; background: var(--teal); }
.header-in { display: flex; align-items: flex-start; max-width: 1187px; margin: 0 auto; padding-top: 20px; }
.header-crumbs { padding: 28px 0 26px; }
body.stuck .site-header { position: fixed; top: 0; left: 0; right: 0; background: var(--teal); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
@media (max-width: 1219px) { .header-in { padding-left: 24px; padding-right: 24px; } }
.brand img { width: 300px; height: 100px; object-fit: contain; }
.nav { display: flex; align-items: center; margin-left: auto; margin-top: 44px; }
.nav a.top { position: relative; color: #fff; font-size: 18px; font-weight: 400; padding: 6px 25px 8px 20px; display: inline-flex; align-items: center; gap: 8px; }
.nav .nav-item:not(.has-mega) a.top { padding: 6px 20px 8px; }
.nav-lang a.top { padding: 6px 10px 8px !important; }
.nav-lang img { width: 18px; height: 12px; }
.nav .nav-item:hover a.top::after, .nav .nav-item.active a.top::after { content: ''; position: absolute; left: 20px; right: 25px; bottom: 0; height: 3px; background: var(--yellow); }
.nav-lang a.top:hover::after { display: none; }
.nav .caret { width: 14px; height: 9px; margin-top: 3px; opacity: .9; transition: transform .15s; }
.nav .nav-item.open a.top { color: var(--yellow); }
.nav .nav-item.open a.top::after { content: ''; position: absolute; left: 20px; right: 25px; bottom: 0; height: 3px; background: var(--yellow); }
.nav .nav-item.open .caret { transform: rotate(180deg); }

/* ---------- Mega menü — canlı UberMenu düzeni: tam genişlik teal panel,
   solda 30px sekmeler (aktif beyaz / pasif soluk), sağda aktif sekmenin altları ---------- */
.mega { display: none; position: absolute; left: 0; right: 0; top: 95px; background: var(--teal); min-height: 348px; z-index: 89; box-shadow: 0 18px 30px rgba(0,0,0,.18); }
.site-header.mega-open .mega { display: block; }
.mega-in { max-width: 1187px; margin: 0 auto; display: flex; padding: 50px 0 40px; }
@media (max-width: 1219px) { .mega-in { padding-left: 24px; padding-right: 24px; } }
.mega-tabs { width: 238px; flex: none; border-right: 1px solid rgba(255,255,255,.28); align-self: stretch; }
.mega-tab { display: flex; align-items: center; color: var(--pale); font-size: 30px; font-weight: 700; line-height: 42px; padding: 10px 20px 10px 0; }
.mega-tab .slash { width: 26px; height: 3px; background: var(--yellow); transform: rotate(-55deg); flex: none; margin-right: 12px; }
.mega-tab.active, .mega-tab:hover { color: #fff; }
.mega-panels { flex: 1; padding-left: 38px; }
.mega-panel { display: none; }
.mega-panel.active { display: block; }
.mega-head { display: block; width: max-content; color: #fff; font-size: 24px; font-weight: 700; line-height: 31px; padding: 10px 20px; }
.mega-link { display: block; width: max-content; color: rgba(255,255,255,.78); font-size: 18px; font-weight: 300; line-height: 26px; padding: 10px 20px; }
.mega-link:hover { color: #fff; }

/* mobil menü */
.nav-toggle { display: none; margin-left: auto; background: rgba(0,90,119,.25); border: 0; border-radius: 4px; padding: 9px 8px; cursor: pointer; z-index: 100; }
.nav-toggle span { display: block; width: 26px; height: 3px; background: #fff; margin: 5px 0; border-radius: 2px; transition: .25s; }
.mobile-nav { display: none; position: fixed; inset: 0; background: var(--teal); z-index: 95; padding: 84px 28px 40px; overflow-y: auto; }
body.nav-open .mobile-nav { display: block; }
body.nav-open { overflow: hidden; }
.mobile-close { position: absolute; top: 14px; right: 16px; font-size: 44px; line-height: 1; color: #fff; background: none; border: 0; cursor: pointer; padding: 6px 10px; }
.mobile-nav a { display: block; color: #fff; font-size: 19px; font-weight: 600; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.mobile-nav .sub a { font-size: 15.5px; font-weight: 500; color: rgba(255,255,255,.88); padding-left: 14px; border-left: 3px solid var(--yellow); border-bottom: 0; }
@media (max-width: 960px) {
  .nav { display: none; }
  .mega { display: none !important; }
  .nav-toggle { display: block; margin-top: 10px; }
  .header-in { padding: 14px 18px; align-items: center; }
  .brand img { width: 180px; height: 60px; }
}

/* ---------- Hero (768px sabit slider; içerik 1240 konteynerde) ---------- */
.hero { position: relative; height: 768px; overflow: hidden; background: #14181c; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.hero-slide.active { opacity: 1; }
.hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-slide::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.hero-wrap { position: relative; max-width: 1240px; margin: 0 auto; height: 100%; z-index: 5; }
.hero-content { position: absolute; left: 35px; right: 35px; top: 198px; }
.hero-content h1 { font-family: Roboto, sans-serif; color: #fff; font-size: clamp(34px, 4.7vw, 60px); line-height: 1.167; font-weight: 700; transition: opacity .35s ease; }
.hero-content p { font-family: Roboto, sans-serif; color: #fff; font-size: 18px; line-height: 30px; margin-top: 17px; max-width: 640px; transition: opacity .35s ease; }
.btn-hero { display: inline-block; font-family: Roboto, sans-serif; background: var(--yellow); color: #000; font-size: 20px; line-height: 25px; font-weight: 400; padding: 21px 19px; margin-top: 176px; transition: filter .15s; }
.btn-hero:hover { filter: brightness(1.06); }
.hero-dots { position: absolute; top: 170px; left: 36px; display: flex; gap: 20px; }
.hero-dots button { position: relative; width: 69px; height: 5px; border: 0; background: rgba(255,255,255,.26); cursor: pointer; overflow: hidden; }
.hero-dots button i { position: absolute; inset: 0; width: 0; background: #fff; }
.hero-dots button.done i { width: 100%; }
.hero-dots button.active i { animation: dotfill 5s linear forwards; }
@keyframes dotfill { from { width: 0; } to { width: 100%; } }
.hero-arrow { position: absolute; bottom: 50px; right: 11px; opacity: .85; }
.hero-arrow:hover { opacity: 1; }
@media (max-width: 960px) {
  .hero { height: 560px; }
  .hero-content { left: 24px; right: 24px; top: 150px; }
  .btn-hero { margin-top: 60px; }
  .hero-dots { left: 24px; top: 110px; }
  .hero-dots button { width: 44px; }
}

/* ---------- Anasayfa: Hakkımızda bandı (üst yarı teal, alt yarı beyaz) ---------- */
.band-about { background: linear-gradient(180deg, var(--teal) 50%, #fff 50%); color: #fff; padding: 40px 0 250px; }
.band-about h2 { font-size: 24px; font-weight: 400; line-height: 1.4; margin-bottom: 22px; }
.band-about p { color: #fff; font-size: 18px; line-height: 1.4; margin-bottom: 26px; }
.btn-yellow { display: inline-block; background: var(--yellow); color: #000; font-weight: 700; font-size: 16px; line-height: 21px; padding: 17px 34px; transition: filter .15s; }
.btn-yellow:hover { filter: brightness(1.06); }
@media (max-width: 960px) { .band-about { padding: 40px 0 120px; } }

/* ---------- Anasayfa: Hizmetler bandı (diyagonal üst, düz koyu gri) ---------- */
.band-services { position: relative; background: var(--dark); color: #fff; padding: 150px 0; }
.svc-angle { position: absolute; bottom: 100%; left: 0; right: 0; height: 100px; pointer-events: none; }
.svc-angle svg { width: 100%; height: 100%; display: block; }
@media (max-width: 960px) { .svc-angle { height: 48px; } }
.band-services h2 { font-size: 36px; font-weight: 700; line-height: 1.4; margin-bottom: 66px; }
.services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 16px; }
@media (max-width: 860px) { .services-grid { grid-template-columns: 1fr; } }
.service-block h3 { font-size: clamp(26px, 2.8vw, 36px); font-weight: 700; line-height: 1.4; margin-bottom: 20px; max-width: 460px; }
.service-block ul { list-style: disc; padding-left: 26px; margin-bottom: 40px; }
.service-block li { color: #fff; font-size: 16px; line-height: 22.4px; }
.service-block li::marker { color: #fff; }
.service-block .btn-yellow { padding: 16px 33px; }
@media (max-width: 960px) { .band-services { padding: 90px 0; } }

/* ---------- CTA bandı (sol açık mavi / sağ beyaz + diyagonal çıkış) ---------- */
.band-cta { position: relative; background: linear-gradient(90deg, var(--light-blue) 50%, #fff 50%); padding: 150px 0; }
.band-cta.home-cta { margin-bottom: 100px; }
.cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .cta-grid { grid-template-columns: 1fr; gap: 64px; } .band-cta { background: var(--light-blue); } }
.cta-left { padding-left: 81px; }
.cta-right { padding-left: 120px; }
@media (max-width: 960px) { .cta-left, .cta-right { padding-left: 0; } }
.cta-cell .illo { margin-bottom: 20px; }
.cta-cell .lead { font-size: 18px; font-weight: 700; color: var(--dark); line-height: 25px; }
.cta-cell .txt { font-size: 18px; font-weight: 300; color: var(--dark); line-height: 25px; max-width: 377px; margin-bottom: 48px; }
.cta-cell h3 { font-size: 24px; font-weight: 700; line-height: 31.2px; color: #000; max-width: 377px; margin: 35px 0 46px; }
.btn-outline { display: inline-block; background: #fff; border: 1px solid #000; color: #000; font-size: 14px; font-weight: 700; line-height: 18px; padding: 22px 33px; transition: all .15s; }
.btn-outline:hover { background: #000; color: #fff; }
.cta-angle { position: absolute; top: 100%; left: 0; right: 0; height: 100px; pointer-events: none; }
.cta-angle svg { width: 100%; height: 100%; display: block; }
@media (max-width: 960px) { .band-cta { padding: 90px 0; } .band-cta.home-cta { margin-bottom: 60px; } .cta-angle { height: 48px; } }

/* ---------- Sabit iletişim kutusu (tam sağa yaslı; hover'da sola açılıp "İletişim" gösterir) ---------- */
.contact-widget { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 80; display: flex; align-items: center; width: 70px; height: 70px; background: #fff; border: 3px solid var(--yellow); overflow: hidden; transition: width .22s ease; }
.contact-widget::after { content: ''; position: absolute; right: 0; top: 0; height: 100%; width: 58px; background: var(--yellow) url('/assets/img/GetInTouch_lg_yellow.svg') center / 42px auto no-repeat; }
.contact-widget span { flex: 1; text-align: center; font-size: 14px; font-weight: 700; color: #000; white-space: nowrap; opacity: 0; transition: opacity .15s ease .08s; margin-right: 58px; }
.contact-widget:hover { width: 250px; }
.contact-widget:hover span { opacity: 1; }

/* ---------- Şablon A: teal başlık + tam genişlik görsel ---------- */
.teal-head { background: var(--teal); color: #fff; padding: 57px 0 8px; }
.crumbs { font-size: 12.25px; color: var(--pale); }
.crumbs a { color: var(--pale); }
.crumbs a:hover { color: #fff; }
.crumbs .cur { color: #fff; }
.teal-head h1 { font-size: 40px; font-weight: 700; line-height: 46px; margin: 0 0 8px; }
.page-hero { position: relative; width: 100%; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 120px; background: var(--teal); clip-path: polygon(0 0, 100% 0, 0 100%); z-index: 1; }
.page-hero img { width: 100%; height: 67vh; max-height: 760px; object-fit: cover; }
@media (max-width: 960px) { .page-hero img { height: 40vh; } .page-hero::before { height: 56px; } }

/* ---------- Şablon B: açık renk başlık bandı ---------- */
.light-head { padding: 0 0 78px; }
.light-head.ice { background: var(--ice); }
.light-head.blue { background: var(--light-blue); }
.light-head h1 { font-size: 40px; font-weight: 700; line-height: 46px; color: #000; margin: 0; padding-top: 79px; margin-bottom: 14px; }
.light-head h2 { font-size: 30px; font-weight: 400; color: var(--dark); }
.light-head.blue h2 { font-size: 20px; }

/* ---------- İç sayfa gövdesi ---------- */
.page-body { padding: 45px 0 90px; }
.page-body .inset { margin-left: 118px; max-width: 756px; }
@media (max-width: 960px) { .page-body .inset { margin-left: 0; } }
.pb-head { font-size: 30px; font-weight: 700; color: #000; margin: 40px 0 42px; }
.pb-head:first-child { margin-top: 0; }
.pb-head a:hover { color: var(--teal); }
.page-body p { font-size: 18px; line-height: 30.6px; color: var(--dark); margin-bottom: 27px; }
.page-body p a { color: var(--teal); text-decoration: underline; }
.plain-list { list-style: disc; padding-left: 30px; margin-bottom: 27px; }
.plain-list li { font-size: 18px; line-height: 30.6px; color: var(--dark); }

/* ---------- Kurumsal İlkeler (görsel + buz panel + liste/görsel) ---------- */
.pr-hero img { width: 100%; height: 72vh; max-height: 780px; object-fit: cover; }
.pr-panel { margin-top: -320px; position: relative; }
.pr-panel-in { max-width: 1240px; margin: 0 auto; background: var(--ice); padding: 50px 70px 40px; }
@media (max-width: 960px) { .pr-panel { margin-top: -80px; } .pr-panel-in { padding: 28px 24px; } }
.pr-panel-in h1 { font-size: 40px; font-weight: 700; margin-bottom: 24px; }
.pr-panel-in p { font-size: 18px; line-height: 30.6px; color: var(--dark); margin-bottom: 18px; }
.pr-body { padding-top: 90px; }
.pr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 16px; align-items: start; }
@media (max-width: 860px) { .pr-cols { grid-template-columns: 1fr; } }
.pr-cols p { font-size: 18px; line-height: 26px; margin-bottom: 27px; }
.pr-cols ul { list-style: disc; padding-left: 26px; }
.pr-cols li { font-size: 16px; line-height: 22.4px; color: var(--dark); margin-bottom: 8px; }
.pr-cols img { width: 100%; height: auto; }

/* ---------- Ortaklar ---------- */
.team-head { font-size: 40px; font-weight: 700; margin: 20px 0 40px; }
.team-grid { display: flex; gap: 70px; flex-wrap: wrap; }
.team-card { display: block; width: 115px; }
.team-card .ph { position: relative; display: block; }
.team-card .ph::before { content: ''; position: absolute; left: -6px; top: 8px; bottom: 8px; width: 6px; background: var(--yellow); }
.team-card .ph img { width: 115px; height: 115px; object-fit: cover; }
.team-card .nm { display: block; margin-top: 10px; font-size: 16px; font-weight: 400; color: #000; }
.team-card:hover .nm { color: var(--teal); }

/* özgeçmiş */
.emp-cols { display: grid; grid-template-columns: 1fr 312px; gap: 49px; align-items: start; }
@media (max-width: 860px) { .emp-cols { grid-template-columns: 1fr; } }
.emp-bio p { font-size: 18px; line-height: 26px; margin-bottom: 26px; color: #000; }
.emp-side img { width: 312px; max-width: 100%; height: 176px; object-fit: cover; margin-bottom: 34px; }
.emp-mail { display: inline-block; font-size: 19.2px; font-weight: 700; color: var(--teal); }
.emp-mail:hover { text-decoration: underline; }

/* ---------- İletişim ---------- */
.contact-body { padding-top: 70px; }
.contact-cols { display: grid; grid-template-columns: 715px 379px; justify-content: space-between; gap: 40px; }
@media (max-width: 1219px) { .contact-cols { grid-template-columns: 1.8fr 1fr; } }
@media (max-width: 860px) { .contact-cols { grid-template-columns: 1fr; } }
.cform { padding: 0 12px; }
.cform-head { font-size: 32px; font-weight: 700; color: #000; margin-bottom: 44px; }
.cform .row { position: relative; margin-bottom: 30px; }
.cform label { position: absolute; left: 0; top: 12px; font-size: 16px; font-weight: 300; color: #000; pointer-events: none; transition: all .15s ease; }
.cform .row.filled label, .cform .row:focus-within label { top: -14px; font-size: 12px; color: #6b7d85; }
.cform input, .cform textarea { width: 100%; border: 0; border-bottom: 1px solid var(--pale); padding: 10px 0 14px; font: inherit; font-size: 18px; background: #fff; border-radius: 0; }
.cform input:focus, .cform textarea:focus { outline: none; border-bottom-color: var(--teal); }
.cform textarea { min-height: 232px; resize: vertical; }
.cform .q { font-size: 20px; color: var(--dark); margin: 36px 0 14px; }
.cform .chk { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; margin-right: 84px; cursor: pointer; position: relative; }
.cform .chk input { position: absolute; opacity: 0; }
.cform .chk .box { width: 26px; height: 26px; border: 1px solid #9fb2ba; background: #fff; display: inline-block; position: relative; }
.cform .chk input:checked + .box::after { content: ''; position: absolute; left: 8px; top: 2px; width: 8px; height: 15px; border: solid #000; border-width: 0 2px 2px 0; transform: rotate(40deg); }
.captcha { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: 22px; letter-spacing: 7px; color: #2e7d32; user-select: none; margin-bottom: 18px; min-height: 28px; }
.cform .btn-outline { border-width: 2px; border-color: var(--dark); background: transparent; color: var(--dark); padding: 24px 30px; margin-top: 16px; cursor: pointer; font-family: inherit; }
.cform .btn-outline:hover { background: var(--dark); color: #fff; }
.cform .msg { display: none; margin-top: 16px; padding: 12px 16px; font-weight: 600; font-size: 14px; }
.cinfo h3 { font-size: 24px; font-weight: 700; color: #000; margin-bottom: 32px; }
.cinfo-card { border: 2px solid var(--teal); padding: 20px 24px; margin-bottom: 40px; max-width: 330px; }
.cinfo-lines { font-size: 16px; line-height: 23px; color: var(--dark); margin: 0; }
.cinfo a { color: var(--dark); }
.cinfo a:hover { color: var(--teal); }
.cmap { width: 100%; height: 213px; border: 0; display: block; }

/* footer öncesi diyagonal geçiş (CTA bandı olmayan sayfalar) */
.pre-foot { background: var(--teal); height: 100px; }
.pre-foot svg { width: 100%; height: 100%; display: block; }
@media (max-width: 960px) { .pre-foot { height: 48px; } }

/* ---------- Footer (teal, canlı düzen + breadcrumb satırı) ---------- */
.site-footer { background: var(--teal); color: #fff; padding: 58px 0 62px; }
.f-crumbs { font-size: 14px; color: var(--pale); margin-bottom: 36px; }
.f-crumbs a { color: var(--pale); }
.f-crumbs a:hover, .f-crumbs .cur { color: #fff; }
.f-grid { display: grid; grid-template-columns: 757px 385px; justify-content: space-between; }
@media (max-width: 1219px) { .f-grid { grid-template-columns: 1.9fr 1fr; gap: 40px; } }
@media (max-width: 860px) { .f-grid { grid-template-columns: 1fr; } }
.f-links { display: grid; grid-template-columns: repeat(2, max-content); gap: 32px; font-size: 18px; font-weight: 400; margin-bottom: 49px; }
.f-links a:hover { color: var(--yellow); }
.f-legal { font-size: 12px; line-height: 18px; color: #fff; margin-bottom: 18px; }
.f-right p { font-size: 18px; line-height: 25.3px; margin-bottom: 26px; }
.f-right .name { margin-bottom: 28px; }
.f-right a:hover { color: var(--yellow); }