/* =========================================================
   RITMA — İnsan Kaynakları (Ritma Flex İK)
   Ortak: assets/css/style.css

   İskelet (hero ızgarası, subnav, figür katmanı, logo şeridi,
   yorumlar) diğer çözüm sayfalarıyla ortak; buradaki kopya
   solutions-depo.css'ten süzülerek üretildi.

   Sayfaya özgü görsel araçlar bölüm bölüm farklı (K10):
     hero  personel kartı
     02    beş sekmeli kart anatomisi
     03    izin bakiyesi çubuğu + üç adımlı onay akışı
     04    toplu hakediş tablosu (deep zemin + figür)
     05    sertifika geçerlilik çubuğu

   NOT: Demo ekranlarında PDKS var, üründe yok. Vardiya, konum,
   cihaz ve giriş-çıkış kaydına dair hiçbir bileşen yok.
   ========================================================= */

/* ---- çözüm sayfalarının ortak iskeleti ---- */

.ik-hero {
  position: relative;
  background: var(--bg-soft);
  min-height: 760px;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center
}

.hero-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 760px;
  display: grid;
  grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
  gap: 84px;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px
}

.hv-blob {
  position: absolute;
  top: -84px;
  right: -96px;
  width: 520px;
  height: 520px;
  border-radius: 52% 48% 56% 44% / 44% 52% 48% 56%;
  background: radial-gradient(circle closest-side at 50% 48%, rgba(244, 71, 11, .20), rgba(244, 71, 11, .07) 52%, rgba(255, 183, 128, .03) 74%, transparent 100%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0
}

.hero-copy {
  max-width: 620px;
  min-width: 0
}

.ik-hero h1 {
  margin-top: 0;
  text-wrap: balance;
  font-size: clamp(46px, 4.8vw, 64px);
  font-weight: 800;
  line-height: 1.05;
  color: var(--ink)
}

.ik-hero h1 .accent {
  color: var(--orange)
}

.ik-hero .lede {
  margin: 26px 0 0;
  max-width: 48ch;
  text-wrap: pretty;
  font-size: 18px;
  line-height: 1.66;
  color: var(--gray)
}

.ik-hero .lede b {
  color: var(--ink);
  font-weight: 750
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap
}

.hero-fine {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 650;
  color: var(--gray-light)
}

.hero-fine svg {
  width: 19px;
  height: 19px;
  color: var(--deep);
  flex-shrink: 0
}

.hero-visual {
  position: relative;
  min-width: 0;
  z-index: 1
}

.has-person {
  position: relative;
  overflow: hidden
}

.hero-person-layer,
.sec-person-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  pointer-events: none
}

.hero-person-layer>.wrap,
.sec-person-layer>.wrap {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end
}

.hero-person,
.sec-person {
  height: clamp(360px, 29vw, 450px);
  margin-right: clamp(-150px, -7.5vw, -56px)
}

.hero-person {
  height: clamp(430px, 44vw, 600px);
  margin-right: clamp(40px, 12vw, 210px)
}

.ik-hakedis .sec-person {
  height: clamp(500px, 40vw, 600px);
  margin-right: clamp(-24px, 3vw, 48px)
}

.hero-person>img,
.sec-person>img {
  display: block;
  width: auto;
  height: 100%
}

.sec-head {
  max-width: 780px
}

.sec-head .eyebrow {
  display: block;
  margin-bottom: 16px
}

.sec-center {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  text-align: center
}

.ik-hakedis {
  background: var(--deep);
  padding-bottom: 0
}

.ik-hakedis .sec-h {
  color: #fff
}

.ik-hakedis .eyebrow {
  color: var(--orange)
}

.ik-hakedis .sec-p {
  color: rgba(255, 255, 255, .66)
}

.sector-list {
  margin: 28px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px 12px;
  flex-wrap: wrap
}

.sector-list span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  padding: 9px 15px;
  font-size: 14px;
  font-weight: 760;
  line-height: 1;
  color: var(--gray);
  box-shadow: 0 14px 36px -32px rgba(20, 24, 31, .25)
}

.logo-marquee {
  width: 100%;
  max-width: 100%;
  margin: 72px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)
}

.logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform
}

.logo-set {
  display: flex;
  align-items: center;
  gap: 78px;
  flex: 0 0 auto;
  padding-right: 78px
}

.client-logo {
  flex-shrink: 0;
  opacity: .72;
  filter: grayscale(1);
  transition: opacity .2s, filter .2s
}

.client-logo:hover {
  opacity: 1;
  filter: grayscale(0)
}

.client-logo img {
  display: block;
  max-height: 46px;
  max-width: 190px;
  width: auto;
  height: auto;
  object-fit: contain
}

.testi-wrap {
  max-width: 820px;
  margin: 0 auto
}

.testi-stage {
  display: grid
}

.testi {
  grid-area: 1/1;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: #fff;
  padding: 34px 36px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease, visibility .55s
}

.testi.is-on {
  opacity: 1;
  visibility: visible
}

.testi p {
  font-size: 20px;
  line-height: 1.55;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -.008em
}

.testi .tq {
  width: 30px;
  height: 30px;
  color: var(--deep);
  margin-bottom: 16px;
  display: block
}

.testi-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap
}

.testi-person {
  display: flex;
  align-items: center;
  gap: 13px
}

.testi-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-gray)
}

.testi-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.testi-person b {
  display: block;
  font-size: 15.5px;
  font-weight: 850;
  color: var(--ink);
  line-height: 1.2
}

.testi-person>span>span {
  display: block;
  font-size: 13px;
  color: var(--gray);
  margin-top: 3px
}

.testi-logo img {
  display: block;
  max-height: 44px;
  max-width: 172px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 1;
  filter: none
}

.testi-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 22px
}

.testi-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: background .2s, width .2s
}

.testi-dot:hover {
  background-color: var(--gray-light)}

.testi-dot.is-on {
  width: 24px;
  border-radius: 999px;
  background: var(--deep)
}

.testi-dot:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px
}

@media (min-width:1440px) {
.hero-grid {
    gap: 96px
  }
}

@media (min-width:1680px) {
.hero-grid {
    gap: 108px
  }
}

@media (max-width:1080px) {
.ik-hero {
    display: block;
    min-height: 0;
    padding: 52px 0
  }

.hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0
  }

.hero-copy {
    max-width: none
  }

.hero-visual {
    max-width: 560px;
    margin: 0 auto;
    width: 100%
  }

.hero-person {
    height: clamp(340px, 44vw, 430px);
    margin-right: 0
  }
}

@media (max-width:1080px) {
.sec-person {
    height: clamp(360px, 56vw, 470px);
    margin-right: 0
  }
}

/* =================== HERO =================== */
/* Hero kabuğu (760px yükseklik, flex hizalama) yukarıdaki ortak
   bloktan geliyor — burada tekrar tanımlamak onu eziyordu. */

/* --- personel kartı --- */
.pkart {
  position: relative;
  z-index: 1;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--sh-lg);
  overflow: hidden
}

.pk-top {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 22px 24px;
  border-bottom: 1px solid var(--border)
}

/* yuvarlak çerçeve resmi kırpmalı: object-fit olmadan taşıyordu */
.pk-foto {
  display: block;
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--deep-soft);
  overflow: hidden
}

.pk-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.pk-kim b {
  display: block;
  font-size: 17px;
  font-weight: 850;
  color: var(--ink)
}

.pk-kim>span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 450;
  color: var(--gray)
}

.pk-sicil {
  font-size: 11.5px !important;
  color: var(--gray-light) !important
}

.pk-durum {
  border-radius: 999px;
  background: var(--deep-soft);
  padding: 6px 13px;
  font-size: 11.5px;
  font-weight: 850;
  color: var(--deep)
}

.pk-sek {
  display: flex;
  gap: 4px;
  padding: 12px 16px 0;
  overflow-x: auto;
  scrollbar-width: none
}

.pk-sek::-webkit-scrollbar {
  display: none
}

.pk-sek span {
  flex-shrink: 0;
  border-radius: 9px 9px 0 0;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gray);
  white-space: nowrap
}

.pk-sek span.is-on {
  background: var(--bg-soft);
  color: var(--ink);
  font-weight: 850
}

.pk-ic {
  display: grid;
  gap: 1px;
  background: var(--bg-soft);
  padding: 16px 20px 18px
}

.pk-sat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0
}

.pk-sat+.pk-sat {
  border-top: 1px solid var(--border)
}

.pk-sat span {
  font-size: 13px;
  font-weight: 450;
  color: var(--gray)
}

.pk-sat b {
  font-size: 13.5px;
  font-weight: 750;
  color: var(--ink)
}

.pk-alt {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--border)
}

.pk-oz {
  padding: 16px 18px
}

.pk-oz+.pk-oz {
  border-left: 1px solid var(--border)
}

.pk-oz>span {
  display: block;
  font-size: 11.5px;
  font-weight: 750;
  color: var(--gray-light)
}

.pk-oz b {
  display: block;
  margin-top: 6px;
  font-size: 19px;
  font-weight: 850;
  color: var(--ink);
  font-variant-numeric: tabular-nums
}

.pk-oz em {
  font-size: 11.5px;
  font-style: normal;
  font-weight: 750;
  color: var(--gray)
}

.pk-oz b.is-borc {
  color: var(--orange)
}

/* =================== 02 · CARİ HESAP =================== */
.ik-cari {
  background: #fff;
  padding: 106px 0
}

/* hesap ekstresi: hakediş bölümündeki ödeme listesiyle karışmasın
   diye borç ve alacak ayrı sütunda, bakiye yürüyor */
.ch {
  margin-top: 52px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--sh-lg);
  overflow: hidden
}

.ch-oz {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft)
}

.ch-oz>div {
  padding: 22px 26px
}

.ch-oz>div+div {
  border-left: 1px solid var(--border)
}

.ch-oz span {
  display: block;
  font-size: 12px;
  font-weight: 750;
  color: var(--gray-light)
}

.ch-oz b {
  display: block;
  margin-top: 7px;
  font-size: 24px;
  font-weight: 850;
  letter-spacing: -.014em;
  color: var(--ink);
  font-variant-numeric: tabular-nums
}

.ch-oz em {
  font-size: 13px;
  font-style: normal;
  font-weight: 750;
  color: var(--gray)
}

.ch-oz .is-bakiye b {
  color: var(--deep)
}

.ch-list {
  display: grid
}

.ch-head,
.ch-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 116px 116px 128px;
  gap: 18px;
  align-items: center;
  padding: 14px 26px
}

.ch-head {
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-light)
}

.ch-head span:nth-child(n+3),
.ch-row>span:nth-child(n+3) {
  text-align: right
}

.ch-row+.ch-row {
  border-top: 1px solid var(--border)
}

.ch-tar {
  font-size: 13px;
  font-weight: 800;
  color: var(--gray);
  font-variant-numeric: tabular-nums
}

.ch-is b {
  display: block;
  font-size: 15px;
  font-weight: 750;
  color: var(--ink)
}

.ch-is em {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-style: normal;
  font-weight: 400;
  color: var(--gray)
}

.ch-borc,
.ch-alacak {
  font-size: 14.5px;
  font-weight: 750;
  color: var(--gray-light);
  font-variant-numeric: tabular-nums
}

/* borç turuncu, alacak deep: renk hangi yöne aktığını söylüyor */
.ch-row .ch-borc:not(:empty) {
  color: var(--orange)
}

.ch-row .ch-alacak:not(:empty) {
  color: var(--deep)
}

.ch-bak {
  font-size: 15px;
  font-weight: 900;
  color: var(--ink);
  font-variant-numeric: tabular-nums
}

.ch-alt {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  padding: 18px 26px
}

.ch-alt>span {
  font-size: 12px;
  font-weight: 850;
  color: var(--gray-light)
}

.ch-alt div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px
}

.ch-alt div span {
  border-radius: 999px;
  background: #fff;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gray)
}

.ch-not {
  display: flex;
  gap: 12px;
  max-width: 78ch;
  margin: 26px 0 0;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.66;
  color: var(--gray)
}

/* =================== 03 · İZİN =================== */
.ik-izin {
  background: var(--bg-soft);
  padding: 102px 0
}

.iz-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 44px;
  align-items: start;
  margin-top: 52px
}

.iz-bakiye {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #fff;
  padding: 28px 30px 30px;
  box-shadow: var(--sh-sm)
}

.ib-ust {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap
}

.ib-ust span {
  font-size: 13.5px;
  font-weight: 750;
  color: var(--gray)
}

.ib-ust b {
  font-size: 30px;
  font-weight: 850;
  letter-spacing: -.014em;
  color: var(--ink);
  font-variant-numeric: tabular-nums
}

.ib-ust em {
  font-size: 13px;
  font-style: normal;
  font-weight: 750;
  color: var(--gray)
}

/* tek çubuk üç bilgiyi taşıyor: kullanılan, bekleyen, kalan */
.ib-track {
  display: flex;
  height: 12px;
  margin-top: 18px;
  border-radius: 999px;
  background: var(--deep-soft);
  overflow: hidden
}

.ib-bar {
  width: var(--w);
  background: var(--deep);
  border-right: 3px solid #fff
}

.ib-etiket {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 14px
}

.ib-etiket span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gray)
}

.ib-etiket i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--deep)
}

.ib-etiket i.is-kul {
  background: var(--deep)
}

.ib-etiket i.is-bek {
  background: var(--orange)
}

.ib-etiket i.is-kal {
  background: var(--deep-soft)
}

.ib-tur {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--border)
}

.ib-tur span {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 750;
  color: var(--gray)
}

.ib-tur span.is-on {
  border-color: var(--deep);
  background: var(--deep);
  color: #fff
}

.ib-talep {
  margin-top: 24px
}

.it-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid var(--border)
}

.it-tar {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums
}

.it-tur {
  font-size: 13.5px;
  font-weight: 450;
  color: var(--gray)
}

.it-durum {
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 850;
  white-space: nowrap
}

.it-durum.is-onay {
  background: var(--deep-soft);
  color: var(--deep)
}

.it-durum.is-bekliyor {
  background: rgba(244, 71, 11, .1);
  color: var(--orange)
}

/* --- üç adımlı onay akışı --- */
.iz-akis {
  display: grid;
  gap: 2px
}

.iz-adim {
  position: relative;
  padding: 0 0 26px 46px
}

.iz-adim::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: 0;
  width: 1px;
  background: var(--border)
}

.iz-adim:last-of-type::before {
  display: none
}

.iz-n {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  font-size: 11.5px;
  font-weight: 900;
  color: var(--ink);
  font-variant-numeric: tabular-nums
}

.iz-adim b {
  display: block;
  padding-top: 5px;
  font-size: 17px;
  font-weight: 850;
  color: var(--ink)
}

.iz-p {
  display: block;
  margin-top: 8px;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.62;
  color: var(--gray)
}

.iz-not {
  display: flex;
  gap: 12px;
  margin: 6px 0 0;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--border);
  padding: 18px 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--gray)
}

.iz-not>svg,
.ch-not>svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--orange)
}

.iz-not>span,
.ch-not>span {
  min-width: 0
}

.iz-not b {
  font-weight: 850;
  color: var(--ink)
}

/* =================== 04 · TOPLU HAKEDİŞ =================== */
.ik-hakedis {
  position: relative;
  overflow: hidden;
  padding: 102px 0
}

.ik-hakedis .sec-h {
  color: #fff
}

.ik-hakedis .sec-p {
  color: rgba(255, 255, 255, .68)
}

/* solda metin, sağda tablo; figür de sağ kolonun ortasında duruyor */
.hk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start
}

.hk-grid .sec-head {
  padding-top: 18px
}

.hk-sag {
  min-width: 0
}

/* sol kolon başlıktan sonra boş kalıyordu: hakediş ekranının yan
   özellikleri burada duruyor */
.hk-mad {
  display: grid;
  gap: 22px;
  margin-top: 40px
}

.hk-mad>div {
  display: flex;
  align-items: flex-start;
  gap: 15px
}

.hm-ik {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .1);
  color: #fff
}

.hm-ik svg {
  width: 20px;
  height: 20px
}

.hk-mad b {
  display: block;
  font-size: 15.5px;
  font-weight: 800;
  color: #fff
}

.hk-mad b+span {
  display: block;
  margin-top: 6px;
  max-width: 46ch;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, .62)
}

.hk {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--sh-lg);
  overflow: hidden
}

.hk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
  padding: 16px 22px
}

.hk-ad {
  font-size: 14px;
  font-weight: 850;
  color: var(--ink)
}

.hk-para {
  display: flex;
  gap: 4px
}

.hk-para span {
  border-radius: 8px;
  padding: 6px 11px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--gray)
}

.hk-para span.is-on {
  background: var(--deep);
  color: #fff
}

.hk-list {
  display: grid
}

.hk-head,
.hk-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 108px 118px;
  gap: 16px;
  align-items: center;
  padding: 13px 22px
}

.hk-head {
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-light)
}

.hk-row+.hk-row {
  border-top: 1px solid var(--border)
}

.hk-kisi b {
  display: block;
  font-size: 14.5px;
  font-weight: 750;
  color: var(--ink)
}

.hk-kisi em {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  color: var(--gray)
}

.hk-tutar {
  font-size: 15px;
  font-weight: 850;
  color: var(--ink);
  font-variant-numeric: tabular-nums
}

.hk-tutar i {
  font-style: normal;
  font-size: 12px;
  font-weight: 750;
  color: var(--gray)
}

.hk-vade {
  font-size: 13px;
  font-weight: 450;
  color: var(--gray);
  font-variant-numeric: tabular-nums
}

.hk-durum {
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
  white-space: nowrap
}

.hk-durum.is-bek {
  background: rgba(244, 71, 11, .1);
  color: var(--orange)
}

.hk-durum.is-odendi {
  background: var(--deep-soft);
  color: var(--deep)
}

.hk-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  padding: 18px 22px
}

.hk-toplam span {
  display: block;
  font-size: 11.5px;
  font-weight: 750;
  color: var(--gray-light)
}

.hk-toplam b {
  display: block;
  margin-top: 4px;
  font-size: 21px;
  font-weight: 850;
  color: var(--ink);
  font-variant-numeric: tabular-nums
}

.hk-toplam em {
  font-size: 13px;
  font-style: normal;
  font-weight: 750;
  color: var(--gray)
}

.hk-akt {
  display: flex;
  gap: 9px
}

.hk-tus {
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #fff;
  padding: 11px 17px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--gray)
}

.hk-tus.is-ana {
  border-color: var(--orange);
  background: var(--orange);
  color: #fff
}

/* figür katmanı bölümün ızgarasını taşıyor: sağ kolonun ortasında
   kalsın, sayfanın sağ kenarına yaslanmasın */
.ik-hakedis .sec-person-layer>.wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: end
}

.ik-hakedis .sec-person {
  grid-column: 2;
  justify-self: center;
  margin-right: 0
}

/* =================== 05 · EĞİTİM & SERTİFİKA =================== */
.ik-belge {
  background: #fff;
  padding: 102px 0
}

.bg-list {
  margin-top: 48px;
  border-top: 1px solid var(--border)
}

.bg-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 168px 128px;
  gap: 24px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--border)
}

.bg-ad b {
  display: block;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--ink)
}

.bg-ad span {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  font-weight: 400;
  color: var(--gray)
}

.bg-sure {
  font-size: 13px;
  font-weight: 750;
  color: var(--gray);
  font-variant-numeric: tabular-nums
}

/* geçerlilik çubuğu: dolduğu oranda süre tükeniyor */
.bg-track {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--bg-gray);
  overflow: hidden
}

.bg-track i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: 999px;
  background: var(--deep)
}

.bg-row:has(.is-uyari) .bg-track i {
  background: var(--orange)
}

.bg-durum {
  border-radius: 999px;
  background: var(--deep-soft);
  padding: 7px 13px;
  font-size: 11.5px;
  font-weight: 850;
  text-align: center;
  color: var(--deep)
}

.bg-durum.is-uyari {
  background: rgba(244, 71, 11, .1);
  color: var(--orange)
}

.bg-klasor {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 40px;
  border-radius: 18px;
  background: var(--bg-soft);
  padding: 24px 28px
}

.bg-klasor>span {
  font-size: 13px;
  font-weight: 850;
  color: var(--ink)
}

.bg-klasor div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.bg-klasor div span {
  border-radius: 999px;
  background: #fff;
  padding: 8px 15px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gray)
}

/* =================== 06 · REFERANSLAR =================== */
.ik-cta {
  background: var(--bg-soft);
  padding: 102px 0
}

/* =================== KIRILIMLAR =================== */
@media (max-width:1080px) {
  .iz-grid {
    grid-template-columns: 1fr;
    gap: 34px
  }

  .bg-row {
    grid-template-columns: minmax(0, 1fr) 128px;
    gap: 12px 20px
  }

  .bg-sure,
  .bg-track {
    display: none
  }
}

@media (max-width:760px) {
  .ik-cari,
  .ik-izin,
  .ik-belge,
  .ik-cta {
    padding: 66px 0
  }

  .ik-hakedis {
    padding: 66px 0
  }

  .pk-alt {
    grid-template-columns: 1fr
  }

  .pk-oz+.pk-oz {
    border-left: 0;
    border-top: 1px solid var(--border)
  }

  .ch-oz {
    grid-template-columns: 1fr
  }

  .ch-oz>div+div {
    border-left: 0;
    border-top: 1px solid var(--border)
  }

  .ch-head {
    display: none
  }

  .ch-row {
    grid-template-columns: 68px minmax(0, 1fr) auto;
    gap: 8px 14px;
    padding: 14px 20px
  }

  .ch-borc,
  .ch-alacak {
    display: none
  }

  .hk-head {
    display: none
  }

  .hk-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px
  }

  .hk-vade {
    display: none
  }

  .hk-grid {
    grid-template-columns: 1fr;
    gap: 34px
  }

  .hk-grid .sec-head {
    padding-top: 0
  }

  .it-row {
    grid-template-columns: 1fr;
    gap: 6px
  }

  .it-durum {
    justify-self: start
  }
}

@media (prefers-reduced-motion:reduce) {

  .ks-t,
  .iz-adim {
    transition: none
  }
}

/* Yorum yüksekliği içeriğinden geliyor: gizli yorumlar akıştan çıkıyor,
   görünen yorum kendi boyunu alıyor. Üst üste bindirmede kutu en uzun
   yoruma göre boyutlanıyor, kısa yorumun altında boşluk kalıyordu. */
.testi-stage {
  display: block
}

.testi-stage .testi {
  display: none;
  opacity: 1;
  visibility: visible
}

.testi-stage .testi.is-on {
  display: block;
  animation: testiGir .4s ease both
}

@keyframes testiGir {
  from {
    opacity: 0;
    transform: translateY(6px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@media (prefers-reduced-motion: reduce) {
  .testi-stage .testi.is-on {
    animation: none
  }
}

/* Sekmeye tıklandığında bölüm sabit menünün altında kalmasın:
   menü 80 piksel, üstüne biraz nefes payı. */
section[id] {
  scroll-margin-top: 104px
}