@font-face {
  font-family: "Kelson";
  src: url("../fonts/kelson-sans.woff") format("woff");
  font-display: swap;
  font-weight: 400;
}

@font-face {
  font-family: "Kelson";
  src: url("../fonts/kelson-sans-bold.woff") format("woff");
  font-display: swap;
  font-weight: 700;
}

:root {
  --navy: #151c26;
  --navy-deep: #0b121b;
  --ink: #26313d;
  --muted: #697783;
  --cyan: #cb5c18;
  --paper: #fbfaf8;
  --warm: #f1eee8;
  --rail-width: 220px;
  --serif: Georgia, "Times New Roman", serif;
  --display: "Kelson", "Trebuchet MS", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--serif); font-size: 17px; line-height: 1.7; }
a { color: inherit; text-decoration: none; }
img { height: auto; max-width: 100%; }
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; word-wrap: normal !important; }

.site-rail { background: var(--navy); bottom: 0; color: #fff; left: 0; overflow-y: auto; position: fixed; top: 0; width: var(--rail-width); z-index: 20; }
.site-rail__inner { display: flex; flex-direction: column; min-height: 100%; padding: 32px 29px 30px; }
.brand { align-items: center; color: #fff; display: inline-flex; flex-direction: column; font-family: var(--display); letter-spacing: .17em; line-height: 1.08; text-align: center; }
.brand__mark { color: #f5c052; font-size: 29px; line-height: 1; margin-bottom: 10px; text-shadow: 0 0 15px rgba(245,192,82,.35); }
.brand__name { font-size: 20px; font-weight: 700; letter-spacing: .12em; }
.brand__legacy-logo { background: url("../images/legacy-logo-reference.png") -45px -25px / 1894px 917px no-repeat; display: block; height: 160px; width: 100px; }
.brand .custom-logo { height: auto; max-height: 100px; max-width: 170px; width: auto; }
.brand__rule { background: rgba(255,255,255,.9); display: block; height: 2px; margin: 19px auto 27px; width: 31px; }
.site-social { display: flex; gap: 8px; justify-content: center; margin: 0 0 22px; }
.site-social span { align-items: center; border: 1px solid rgba(255,255,255,.7); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); color: #fff; display: inline-flex; font-family: Arial, sans-serif; font-size: 15px; font-weight: 700; height: 32px; justify-content: center; width: 36px; }
.site-navigation { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .075em; line-height: 1.35; text-transform: uppercase; }
.site-navigation ul { list-style: none; margin: 0; padding: 0; }
.site-navigation li { border-bottom: 1px solid rgba(255,255,255,.08); }
.site-navigation li:first-child { border-top: 1px solid rgba(255,255,255,.08); }
.site-navigation a { color: rgba(255,255,255,.83); display: block; padding: 12px 0; transition: color .2s ease, padding-left .2s ease; }
.site-navigation a:hover, .site-navigation .current-menu-item > a { color: var(--cyan); padding-left: 5px; }
.site-navigation .sub-menu { display: none; }
.site-rail__contact { font-family: var(--display); font-size: 10px; letter-spacing: .04em; margin-top: auto; padding-top: 40px; }
.site-rail__contact a { color: rgba(255,255,255,.5); display: block; padding-top: 4px; }
.site-canvas { margin-left: var(--rail-width); min-height: 100vh; }

.menu-toggle { background: var(--navy); border: 0; display: none; height: 48px; padding: 13px; position: fixed; right: 14px; top: 14px; width: 48px; z-index: 40; }
.menu-toggle span:not(.screen-reader-text) { background: #fff; display: block; height: 2px; margin: 5px 0; width: 22px; }

.home-hero { align-items: center; background: #14232a url("../images/legacy/hakkimizda/kisik_konagi_hakkimizda_04.jpg") center center / cover no-repeat; color: #fff; display: flex; min-height: 100vh; overflow: hidden; position: relative; }
.home-hero__shade { background: linear-gradient(90deg, rgba(0,0,0,.25), rgba(2,7,10,.35)), rgba(4,10,15,.25); inset: 0; position: absolute; }
.home-hero__content { margin: 0 auto; max-width: 1200px; padding: 80px 42px 52px; position: relative; text-align: center; width: 100%; }
.home-hero__eyebrow, .page-hero__eyebrow, .archive-header__eyebrow { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .26em; margin: 0 0 18px; text-transform: uppercase; }
.home-hero h1 { border: 5px solid rgba(255,255,255,.95); display: inline-block; font-family: var(--display); font-size: clamp(39px, 6vw, 78px); font-weight: 400; letter-spacing: .24em; line-height: 1; margin: 0 0 276px; padding: 18px 24px 15px 33px; text-indent: .24em; text-transform: uppercase; }
.home-hero__tagline { font-family: var(--display); font-size: 19px; letter-spacing: .24em; margin: 26px 0 0; text-transform: uppercase; }
.home-hero__rule { background: var(--cyan); height: 2px; margin: 31px auto 51px; width: 55px; }
.home-cards { display: grid; gap: 28px; grid-template-columns: repeat(3, 1fr); }
.home-card { align-items: center; background: rgba(8,12,15,.38); border: 2px solid rgba(203,92,24,.85); color: #fff; display: flex; flex-direction: column; justify-content: center; min-height: 258px; padding: 29px 34px 24px; text-align: center; transition: background .2s ease, transform .2s ease; }
.home-card:hover { background: rgba(8,12,15,.64); transform: translateY(-5px); }
.home-card h2 { font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: .02em; line-height: 1.1; margin: 0 0 32px; text-transform: uppercase; }
.home-card p { color: rgba(255,255,255,.95); font-family: var(--display); font-size: clamp(21px, 2.2vw, 29px); font-weight: 700; line-height: 1.15; margin: 0; }
.home-card__link { background: var(--cyan); display: inline-block; font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .02em; margin-top: 28px; padding: 7px 14px; text-transform: none; }

.welcome-section { background: var(--paper); display: grid; gap: 70px; grid-template-columns: .9fr 1.1fr; padding: 95px min(10vw, 130px); }
.section-heading { font-family: var(--display); text-align: center; }
.section-heading span { color: var(--cyan); font-size: 18px; }
.section-heading p { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .23em; margin: 13px 0 10px; }
.section-heading h2 { color: var(--ink); font-family: var(--display); font-size: clamp(28px, 3vw, 42px); font-weight: 400; letter-spacing: .06em; line-height: 1.2; margin: 0; text-transform: uppercase; }
.welcome-section__text { align-self: center; border-left: 1px solid #d5d9da; padding-left: 47px; }
.welcome-section__text p { font-size: 20px; margin: 0 0 24px; }
.text-link { color: #187e9f; font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.text-link span { color: var(--cyan); font-size: 18px; padding-left: 4px; }
.discover-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.discover-card { background: #162a32 var(--card-image) center / cover no-repeat; color: #fff; min-height: 330px; padding: 42px 37px; position: relative; }
.discover-card::before { background: linear-gradient(0deg, rgba(3,10,16,.78), rgba(3,10,16,.08)); content: ""; inset: 0; position: absolute; transition: background .2s ease; }
.discover-card:hover::before { background: linear-gradient(0deg, rgba(3,10,16,.9), rgba(3,10,16,.22)); }
.discover-card span, .discover-card small { display: block; position: relative; }
.discover-card span { font-family: var(--display); font-size: 30px; letter-spacing: .08em; line-height: 1; text-transform: uppercase; }
.discover-card small { bottom: 39px; font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .14em; position: absolute; text-transform: uppercase; }
.discover-card b { color: var(--cyan); font-size: 18px; padding-left: 4px; }

.page-hero { align-items: end; background: #172a33 var(--page-hero) center / cover no-repeat; color: #fff; display: flex; min-height: 310px; position: relative; }
.page-hero__shade { background: linear-gradient(0deg, rgba(4,15,22,.82), rgba(4,15,22,.16)); inset: 0; position: absolute; }
.page-hero__content { margin: 0 auto; max-width: 1080px; padding: 58px 58px 47px; position: relative; width: 100%; }
.page-hero h1 { font-family: var(--display); font-size: clamp(38px, 5vw, 62px); font-weight: 400; letter-spacing: .1em; line-height: 1.1; margin: 0; text-transform: uppercase; }
.content-shell { margin: 0 auto; max-width: 940px; padding: 76px 50px 95px; }
.page-entry h1, .page-entry h2, .page-entry h3 { color: var(--ink); font-family: var(--display); font-weight: 400; letter-spacing: .05em; line-height: 1.2; text-transform: uppercase; }
.page-entry h1 { font-size: 42px; }
.page-entry h2 { font-size: 29px; margin-top: 47px; }
.page-entry h3 { font-size: 22px; margin-top: 35px; }
.page-entry p, .page-entry li { font-size: 18px; }
.page-entry img { margin: 25px 0; }
.page-entry blockquote { border-left: 3px solid var(--cyan); font-size: 23px; margin: 36px 0; padding-left: 26px; }
.archive-header { border-bottom: 1px solid #dce0e1; margin-bottom: 45px; padding-bottom: 28px; }
.archive-header h1 { font-family: var(--display); font-size: 43px; font-weight: 400; letter-spacing: .07em; line-height: 1.15; margin: 0; text-transform: uppercase; }
.post-card { border-bottom: 1px solid #dce0e1; margin-bottom: 42px; padding-bottom: 35px; }
.post-card__meta { color: var(--muted); font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.post-card h2 { font-family: var(--display); font-size: 29px; font-weight: 400; letter-spacing: .04em; line-height: 1.2; margin: 7px 0 12px; }
.not-found { min-height: 440px; }

.site-footer { background: var(--navy-deep); color: rgba(255,255,255,.7); }
.site-footer__inner { display: grid; gap: 30px; grid-template-columns: 1.2fr 1fr auto; margin: 0 auto; max-width: 1180px; padding: 48px 58px; }
.site-footer p { font-size: 14px; line-height: 1.6; margin: 0; }
.site-footer__title { color: #fff; font-family: var(--display); font-size: 19px !important; letter-spacing: .12em; margin-bottom: 8px !important; text-transform: uppercase; }
.site-footer__contact { font-family: var(--display); font-size: 12px; letter-spacing: .05em; }
.site-footer__contact a { display: block; padding: 1px 0; }
.site-footer__copy { align-self: end; font-family: var(--display); font-size: 11px !important; letter-spacing: .06em; text-align: right; }

@media (max-width: 980px) {
  :root { --rail-width: 220px; }
  .site-rail__inner { padding-left: 26px; padding-right: 26px; }
  .home-cards { gap: 13px; }
  .home-card { padding: 23px 18px; }
  .home-card h2 { font-size: 23px; }
  .welcome-section { gap: 42px; padding-left: 50px; padding-right: 50px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .menu-toggle { display: block; }
  .site-rail { box-shadow: 12px 0 35px rgba(0,0,0,.28); transform: translateX(-102%); transition: transform .25s ease; width: 275px; }
  .site-rail.is-open { transform: translateX(0); }
  .site-canvas { margin-left: 0; }
  .site-rail__inner { padding-top: 34px; }
  .home-hero { align-items: flex-start; min-height: 100vh; }
  .home-hero__content { padding: 85px 23px 43px; }
  .home-hero h1 { border-width: 2px; font-size: clamp(33px, 10vw, 50px); letter-spacing: .16em; margin: 0 0 54px; padding: 15px 14px 12px 21px; }
  .home-hero__tagline { font-size: 14px; letter-spacing: .16em; }
  .home-hero__rule { margin-bottom: 31px; }
  .home-cards { grid-template-columns: 1fr; }
  .home-card { min-height: 190px; padding: 19px 21px 17px; }
  .home-card h2 { font-size: 15px; margin: 0 0 16px; }
  .home-card p { font-size: 22px; }
  .home-card__link { margin-top: 18px; }
  .welcome-section { display: block; padding: 63px 28px; }
  .welcome-section__text { border-left: 0; margin-top: 31px; padding-left: 0; }
  .welcome-section__text p { font-size: 18px; }
  .discover-grid { grid-template-columns: 1fr; }
  .discover-card { min-height: 250px; }
  .page-hero { min-height: 270px; }
  .page-hero__content { padding: 48px 27px 38px; }
  .page-hero h1 { font-size: 35px; }
  .content-shell { padding: 52px 27px 68px; }
  .page-entry h1 { font-size: 35px; }
  .page-entry p, .page-entry li { font-size: 17px; }
  .site-footer__inner { grid-template-columns: 1fr; padding: 38px 27px; }
  .site-footer__copy { text-align: left; }
}