/*==============================================================================
  MentoraHub — tanitim (giris oncesi) sayfasi

  Panelin (erp-dashboard.css) ve giris ekraninin (erp-auth.css) aksine bu sayfa
  tema kitini yuklemiyor: bootstrap ve style.css birlikte 640 KB ve giris
  oncesi ilk ekran, bu yukun en az yakistigi yer. Dosya bu yuzden kendi
  izgarasini ve kendi temel bicimlerini tasiyor.

  Palet ve olcek uydurulmuyor: ayni verdicta belirtecleri (lacivert govde,
  altin vurgu, Inter Tight baslik / Roboto metin) panelden birebir aliniyor,
  boylece tanitimdan girise, giristen panele gecen kullanici ayni urunu
  goruyor. Tanitima ozgu turevler `--tnt-` onekiyle ayri duruyor.

  Sinif onekleri: `tnt-` (tanitim). Panelin `erp-` bilesenleriyle karismiyor;
  tek istisna kabuktan devralinan marka amblemi (asagida notu var).
==============================================================================*/

:root {
  /* Temadan devralinan cekirdek palet (bkz. erp-dashboard.css) */
  --verdicta-font: "Roboto", -apple-system, "Segoe UI", sans-serif;
  --verdicta-font-two: "Inter Tight", "Roboto", -apple-system, sans-serif;
  --verdicta-base: #bb9880;
  --verdicta-base-rgb: 187, 152, 128;
  --verdicta-black: #0c1f38;
  --verdicta-black-rgb: 12, 31, 56;
  --verdicta-white: #ffffff;
  --verdicta-white-rgb: 255, 255, 255;
  --verdicta-gray-bg: #f2f3f5;
  --verdicta-bdr-color: #e5e5e5;
  /* Tanitima ozgu turevler */
  --tnt-ink: var(--verdicta-black);
  --tnt-ink-soft: #4a5a70;
  --tnt-muted: #8894a5;
  --tnt-line: var(--verdicta-bdr-color);
  --tnt-line-soft: #eef0f3;
  --tnt-surface: var(--verdicta-white);
  --tnt-canvas: #f7f8fa;
  --tnt-kap: 1200px;
  --tnt-kap-dar: 820px;
  --tnt-ust-h: 72px;
  --tnt-radius: 14px;
  --tnt-radius-sm: 8px;
  --tnt-golge-sm: 0 1px 2px rgba(var(--verdicta-black-rgb), .06);
  --tnt-golge: 0 6px 22px rgba(var(--verdicta-black-rgb), .08);
  --tnt-golge-lg: 0 26px 60px rgba(var(--verdicta-black-rgb), .22);
  --tnt-gecis: all .25s ease;
}

/*------------------------------------------------------------------ 1. Temel */
*, *::before, *::after {
  box-sizing: border-box;
}

body.tnt {
  margin: 0;
  background: var(--tnt-surface);
  color: var(--tnt-ink-soft);
  font-family: var(--verdicta-font);
  font-size: 16px;
  line-height: 27px;
  -webkit-font-smoothing: antialiased;
  /* Capa baglantilari yapisik ust seridin altinda kalmasin. */
  scroll-behavior: smooth;
}

/* Bolum capalari: `scroll-margin` olmadan `#moduller` baglantisi bolumun
   basligini ust seridin altina surerdi. */
.tnt [id] {
  scroll-margin-top: calc(var(--tnt-ust-h) + 18px);
}

.tnt h1, .tnt h2, .tnt h3 {
  margin: 0;
  color: var(--tnt-ink);
  font-family: var(--verdicta-font-two);
  font-weight: 600;
  letter-spacing: -.02em;
}

.tnt p {
  margin: 0;
}

.tnt ul, .tnt ol {
  margin: 0;
  padding: 20px 0 10px 0px;
  list-style: none;
}

/* Renk bilincli olarak burada verilmiyor. `.tnt a` bir tur secici tasidigi
   icin tek sinifli `.tnt-dugme`den daha ozguldur; renk buraya yazilinca
   dugmenin kendi rengini eziyor ve altin zeminli dugme altin yaziyla, yani
   bos bir dikdortgen olarak ciziliyordu. Her baglanti rengini kendi
   bileseninden aliyor (menu, dugme, alt bilgi, atlama baglantisi). */
.tnt a {
  text-decoration: none;
  transition: var(--tnt-gecis);
}

.tnt img {
  max-width: 100%;
  height: auto;
  display: block;
}

.tnt :focus-visible {
  outline: 2px solid var(--verdicta-base);
  outline-offset: 3px;
  border-radius: 4px;
}

.tnt-kap {
  width: 100%;
  max-width: var(--tnt-kap);
  margin-inline: auto;
  padding-inline: 24px;
}

.tnt-kap--dar {
  max-width: var(--tnt-kap-dar);
}

/* Klavye kullanicisi icin: sekme tusuna ilk basista beliren atlama baglantisi. */
.tnt-atla {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 60;
  padding: 10px 18px;
  border-radius: var(--tnt-radius-sm);
  background: var(--tnt-ink);
  color: var(--verdicta-white);
  font-size: 14px;
  transition: top .2s ease;
}

  .tnt-atla:focus {
    top: 14px;
    color: var(--verdicta-white);
  }

/*------------------------------------------------------------------ 2. Dugmeler */
.tnt-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border: 1px solid var(--verdicta-base);
  border-radius: var(--tnt-radius-sm);
  background: var(--verdicta-base);
  color: var(--verdicta-white);
  font-family: var(--verdicta-font-two);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--tnt-gecis);
}

  .tnt-dugme:hover {
    background: var(--tnt-ink);
    border-color: var(--tnt-ink);
    color: var(--verdicta-white);
    transform: translateY(-1px);
  }

  .tnt-dugme i {
    font-size: 13px;
  }

.tnt-dugme--buyuk {
  padding: 15px 30px;
  font-size: 15px;
}

/* Acik zeminde ikincil eylem. */
.tnt-dugme--sade {
  background: transparent;
  border-color: var(--tnt-line);
  color: var(--tnt-ink);
}

  .tnt-dugme--sade:hover {
    background: var(--tnt-ink);
    border-color: var(--tnt-ink);
    color: var(--verdicta-white);
  }

/* Koyu zeminde ikincil eylem. */
.tnt-dugme--hayalet {
  background: rgba(var(--verdicta-white-rgb), .08);
  border-color: rgba(var(--verdicta-white-rgb), .34);
  color: var(--verdicta-white);
}

  .tnt-dugme--hayalet:hover {
    background: var(--verdicta-white);
    border-color: var(--verdicta-white);
    color: var(--tnt-ink);
  }

/*------------------------------------------------------------------ 3. Ust serit */
.tnt-ust {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(var(--verdicta-white-rgb), .88);
  border-bottom: 1px solid transparent;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  transition: var(--tnt-gecis);
}

  /* Sayfa kaydirildiginda serit kahraman bolumunden ayrilsin. */
  .tnt-ust.is-kaydi {
    background: rgba(var(--verdicta-white-rgb), .96);
    border-bottom-color: var(--tnt-line-soft);
    box-shadow: var(--tnt-golge-sm);
  }

.tnt-ust__ic {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: var(--tnt-ust-h);
}

.tnt-marka {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-inline-end: auto;
}

/* Amblem urunun kendi simgesi (favicon-mentora.png); kurum logosu bu sayfada
   basilmiyor (v0.76.1, bkz. TanitimController). Sinif adi panelin amblemiyle
   ayni ama kendi bicimi erp-okul.css'te ve o dosya burada yuklenmiyor; kural
   bu yuzden burada. Kapsam `.tnt-marka` ile sinirli. */
.tnt-marka .erp-marka__amblem {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  object-fit: contain;
}

/* Kurum Gorselleri'nden yuklenen logo (v0.76.4). Panel kenar menusu ve giris
   ekrani logoyu lacivert zemin ustunde basiyor ve Kurum Gorselleri'ndeki
   onizleme de oyle; acik renkli serite ayni zemin kucuk bir kutu olarak
   geliyor ki koyu zemin icin hazirlanmis bir logo beyazda kaybolmasin.
   Secici amblemdeki gibi `.tnt-marka` ile: `.tnt img { height: auto }` kurali
   tek sinifli seciciyi eziyor. */
.tnt-marka .tnt-marka__logo {
  flex: 0 0 auto;
  height: 74px;
  padding: 4px 10px;
  border-radius: 10px;

  object-fit: contain;
}

.tnt-marka__yazi strong {
  display: block;
  color: var(--tnt-ink);
  font-family: var(--verdicta-font-two);
  font-size: 19px;
  font-weight: 600;
  line-height: 22px;
}

.tnt-marka__yazi span {
  display: block;
  color: var(--tnt-muted);
  font-size: 10.5px;
  line-height: 15px;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tnt-ust__ac {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tnt-line);
  border-radius: var(--tnt-radius-sm);
  background: var(--tnt-surface);
  color: var(--tnt-ink);
  font-size: 16px;
  cursor: pointer;
}

.tnt-menu {
  display: flex;
  align-items: center;
  gap: 28px;
}

.tnt-menu__liste {
  display: flex;
  align-items: center;
  gap: 26px;
}

  .tnt-menu__liste a {
    position: relative;
    display: block;
    padding-block: 6px;
    color: var(--tnt-ink-soft);
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap;
  }

    .tnt-menu__liste a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 2px;
      background: var(--verdicta-base);
      transition: width .25s ease;
    }

    .tnt-menu__liste a:hover,
    .tnt-menu__liste a.is-active {
      color: var(--tnt-ink);
    }

      .tnt-menu__liste a:hover::after,
      .tnt-menu__liste a.is-active::after {
        width: 100%;
      }

.tnt-menu__eylem {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tnt-perde {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: rgba(var(--verdicta-black-rgb), .45);
}

/*------------------------------------------------------------------ 4. Kahraman */
.tnt-hero {
  position: relative;
  padding-block: 84px 96px;
  background: var(--verdicta-black);
  overflow: hidden;
  isolation: isolate;
}

  /* Giris ekraniyla ayni zemin: iki ekran arka arkaya goruluyor. */
  .tnt-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("../images/backgrounds/contact-v1-bg.jpg") center/cover no-repeat;
  }

  .tnt-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(150deg, rgba(var(--verdicta-black-rgb), .95) 0%, rgba(var(--verdicta-black-rgb), .9) 52%, rgba(var(--verdicta-base-rgb), .5) 100%);
  }

.tnt-hero__ic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 54px;
}

.tnt-hero h1 {
  color: var(--verdicta-white);
  font-size: 50px;
  line-height: 1.14;
  margin-block: 18px 20px;
}

  .tnt-hero h1 em {
    font-style: normal;
    color: var(--verdicta-base);
  }

.tnt-hero__ozet {
  max-width: 48ch;
  color: rgba(var(--verdicta-white-rgb), .72);
  font-size: 16.5px;
  line-height: 29px;
}

.tnt-hero__eylem {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
  margin-bottom: 40px;
}

.tnt-hero__rozet {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(var(--verdicta-white-rgb), .14);
}

  .tnt-hero__rozet li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(var(--verdicta-white-rgb), .82);
    font-size: 13.5px;
  }

  .tnt-hero__rozet i {
    color: var(--verdicta-base);
    font-size: 11px;
  }

/* Ekran goruntusu hafifce cevrilmis duruyor: duz bir dikdortgen, koyu zeminde
   sayfaya yapistirilmis gibi gorunuyordu. */
.tnt-hero__gorsel {
  margin: 0;
  border-radius: var(--tnt-radius);
  overflow: hidden;
  border: 1px solid rgba(var(--verdicta-white-rgb), .16);
  box-shadow: var(--tnt-golge-lg);
  transform: perspective(1400px) rotateY(-5deg) rotateX(1.5deg);
  transition: transform .5s ease;
}

  .tnt-hero__gorsel:hover {
    transform: perspective(1400px) rotateY(0) rotateX(0);
  }

/*------------------------------------------------------------------ 5. Sayilar */
.tnt-sayilar {
  background: var(--tnt-ink);
  border-top: 1px solid rgba(var(--verdicta-white-rgb), .08);
}

/* Ayirici cizgiler izgara boslugundan geliyor: 1px'lik bosluktan alttaki
   zemin gorunuyor. Bu yuzden zemin kabin kendisine degil izgaraya veriliyor --
   kaba verilseydi kabin yatay dolgusu da boyanir ve seridin iki ucunda acik
   renk birer serit kalirdi. */
.tnt-sayilar__izgara {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(var(--verdicta-white-rgb), .1);
}

.tnt-sayi {
  padding: 30px 26px;
  background: var(--tnt-ink);
}

  .tnt-sayi strong {
    display: block;
    color: var(--verdicta-base);
    font-family: var(--verdicta-font-two);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
  }

  .tnt-sayi > span {
    display: block;
    margin-top: 2px;
    color: var(--verdicta-white);
    font-size: 14px;
    font-weight: 500;
  }

  .tnt-sayi p {
    margin-top: 8px;
    color: rgba(var(--verdicta-white-rgb), .55);
    font-size: 12.5px;
    line-height: 19px;
  }

/*------------------------------------------------------------------ 6. Bolum kabugu */
.tnt-bolum {
  padding-block: 92px;
}

.tnt-bolum--sakin {
  background: var(--tnt-canvas);
}

.tnt-bolum--koyu {
  background: var(--tnt-ink);
  color: rgba(var(--verdicta-white-rgb), .72);
}

.tnt-etiket {
  display: inline-flex;
  align-items: center;
  color: var(--verdicta-base);
  font-family: var(--verdicta-font-two);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.tnt-baslik {
  max-width: 62ch;
  margin-bottom: 48px;
}

  .tnt-baslik h2 {
    margin-block: 12px 14px;
    font-size: 36px;
    line-height: 1.22;
  }

  .tnt-baslik > p:last-child {
    color: var(--tnt-ink-soft);
    font-size: 16px;
    line-height: 28px;
  }

.tnt-baslik--acik h2 {
  color: var(--verdicta-white);
}

.tnt-baslik--acik > p:last-child {
  color: rgba(var(--verdicta-white-rgb), .66);
}

/*------------------------------------------------------------------ 7. Moduller */
.tnt-modul__izgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.tnt-modul {
  padding: 30px 28px;
  background: var(--tnt-surface);
  border: 1px solid var(--tnt-line-soft);
  border-radius: var(--tnt-radius);
  box-shadow: var(--tnt-golge-sm);
  transition: var(--tnt-gecis);
}

  .tnt-modul:hover {
    border-color: rgba(var(--verdicta-base-rgb), .5);
    box-shadow: var(--tnt-golge);
    transform: translateY(-3px);
  }

.tnt-modul__simge {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 10px;
  background: rgba(var(--verdicta-base-rgb), .14);
  color: var(--verdicta-base);
  font-size: 18px;
}

.tnt-modul h3 {
  font-size: 20px;
  line-height: 26px;
}

.tnt-modul__ozet {
  margin-top: 8px;
  color: var(--tnt-ink-soft);
  font-size: 14.5px;
  line-height: 24px;
}

.tnt-modul__liste {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--tnt-line-soft);
  display: grid;
  gap: 10px;
}

  .tnt-modul__liste li {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 9px;
    color: var(--tnt-ink-soft);
    font-size: 13.5px;
    line-height: 21px;
  }

  .tnt-modul__liste i {
    margin-top: 5px;
    color: var(--verdicta-base);
    font-size: 10px;
  }

/*------------------------------------------------------------------ 7b. Kimler icin */
/* Dort kart tek satirda: kurum turleri yan yana okunmali, "hangisi biziz"
   sorusu bir bakista cevaplanmali. 1100px altinda 2x2, 640px altinda tek
   sutun (asagida). */
.tnt-kitle__izgara {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.tnt-kitle {
  padding: 28px 26px;
  background: var(--tnt-surface);
  border: 1px solid var(--tnt-line-soft);
  border-radius: var(--tnt-radius);
  box-shadow: var(--tnt-golge-sm);
  transition: var(--tnt-gecis);
}

  .tnt-kitle:hover {
    border-color: rgba(var(--verdicta-base-rgb), .5);
    box-shadow: var(--tnt-golge);
    transform: translateY(-3px);
  }

  .tnt-kitle i {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    border-radius: 10px;
    background: rgba(var(--verdicta-base-rgb), .14);
    color: var(--verdicta-base);
    font-size: 18px;
  }

  .tnt-kitle h3 {
    font-size: 18px;
    line-height: 25px;
  }

  .tnt-kitle p {
    margin-top: 10px;
    color: var(--tnt-ink-soft);
    font-size: 14px;
    line-height: 24px;
  }

/*------------------------------------------------------------------ 7c. Roller */
/* Dokuz rol 3x3: simge solda, ad ve gorev sagda. Kart degil satir gibi
   okunuyor -- rollerin listesi bir karsilastirma, bir vitrin degil. */
.tnt-rol__izgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 24px;
}

.tnt-rol {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  padding: 22px 22px 22px 20px;
  background: var(--tnt-canvas);
  border: 1px solid var(--tnt-line-soft);
  border-radius: var(--tnt-radius);
}

.tnt-rol__simge {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(var(--verdicta-black-rgb), .06);
  color: var(--tnt-ink);
  font-size: 17px;
}

.tnt-rol h3 {
  font-size: 16px;
  line-height: 23px;
}

.tnt-rol p {
  margin-top: 6px;
  color: var(--tnt-ink-soft);
  font-size: 13.5px;
  line-height: 22px;
}

/*------------------------------------------------------------------ 8. Ekran galerisi */
.tnt-galeri__sekmeler {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.tnt-galeri.is-hazir .tnt-galeri__sekmeler {
  display: flex;
}

.tnt-galeri__sekme {
  padding: 10px 18px;
  border: 1px solid rgba(var(--verdicta-white-rgb), .18);
  border-radius: 99px;
  background: rgba(var(--verdicta-white-rgb), .06);
  color: rgba(var(--verdicta-white-rgb), .74);
  font-family: var(--verdicta-font-two);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--tnt-gecis);
}

  .tnt-galeri__sekme:hover {
    border-color: rgba(var(--verdicta-base-rgb), .6);
    color: var(--verdicta-white);
  }

  .tnt-galeri__sekme.is-active {
    background: var(--verdicta-base);
    border-color: var(--verdicta-base);
    color: var(--verdicta-white);
  }

/* Betiksiz durumda paneller alt alta akar; betik varsa yalnizca etkin olan
   gorunur. */
.tnt-galeri__kutu {
  display: grid;
  gap: 28px;
}

.tnt-galeri.is-hazir .tnt-galeri__kutu {
  display: block;
}

.tnt-galeri__panel {
  margin: 0;
  border-radius: var(--tnt-radius);
  overflow: hidden;
  background: rgba(var(--verdicta-white-rgb), .04);
  border: 1px solid rgba(var(--verdicta-white-rgb), .14);
  box-shadow: var(--tnt-golge-lg);
}

.tnt-galeri.is-hazir .tnt-galeri__panel {
  display: none;
}

  .tnt-galeri.is-hazir .tnt-galeri__panel.is-active {
    display: block;
    animation: tnt-belir .35s ease both;
  }

.tnt-galeri__panel figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  padding: 16px 22px 18px;
  border-top: 1px solid rgba(var(--verdicta-white-rgb), .12);
}

  .tnt-galeri__panel figcaption strong {
    color: var(--verdicta-white);
    font-family: var(--verdicta-font-two);
    font-size: 15px;
    font-weight: 600;
  }

.tnt-galeri__aciklama {
  flex: 1 1 260px;
  color: rgba(var(--verdicta-white-rgb), .6);
  font-size: 13px;
  line-height: 20px;
}

.tnt-rozet {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(var(--verdicta-base-rgb), .2);
  color: var(--verdicta-base);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@keyframes tnt-belir {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/*------------------------------------------------------------------ 9. Adimlar */
.tnt-adim__izgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  counter-reset: tnt-adim;
}

.tnt-adim {
  position: relative;
  padding: 30px 28px;
  background: var(--tnt-surface);
  border: 1px solid var(--tnt-line-soft);
  border-radius: var(--tnt-radius);
  box-shadow: var(--tnt-golge-sm);
}

.tnt-adim__no {
  display: block;
  margin-bottom: 14px;
  color: rgba(var(--verdicta-base-rgb), .95);
  font-family: var(--verdicta-font-two);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}

.tnt-adim h3 {
  font-size: 19px;
  line-height: 26px;
}

.tnt-adim p {
  margin-top: 10px;
  color: var(--tnt-ink-soft);
  font-size: 14.5px;
  line-height: 25px;
}

/*------------------------------------------------------------------ 10. One cikanlar */
/* Dokuz kart: dört sütunda son satır tek başına kalıyordu. Üç sütun 3×3
   veriyor ve modül ızgarasıyla aynı ritmi tutuyor; dar ekran kuralları
   (2 ve 1 sütun) aşağıda değişmedi. */
.tnt-ozellik__izgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 24px;
}

.tnt-ozellik i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: rgba(var(--verdicta-black-rgb), .06);
  color: var(--tnt-ink);
  font-size: 16px;
}

.tnt-ozellik h3 {
  font-size: 17px;
  line-height: 24px;
}

.tnt-ozellik p {
  margin-top: 8px;
  color: var(--tnt-ink-soft);
  font-size: 14px;
  line-height: 24px;
}

/*------------------------------------------------------------------ 11. Fiyatlandirma */
.tnt-fiyat__izgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 24px;
}

.tnt-fiyat {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  background: var(--tnt-surface);
  border: 1px solid var(--tnt-line);
  border-radius: var(--tnt-radius);
  box-shadow: var(--tnt-golge-sm);
}

  /* Onerilen paket buyuyup one cikiyor; mobilde bu buyutme kaldiriliyor
   (asagidaki kirilim), yoksa tek sutunda kartlar farkli genislikte kalirdi. */
  .tnt-fiyat.is-vurgulu {
    padding-block: 40px 32px;
    background: var(--tnt-ink);
    border-color: var(--tnt-ink);
    box-shadow: var(--tnt-golge-lg);
    transform: scale(1.03);
  }

.tnt-fiyat__rozet {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 16px;
  border-radius: 99px;
  background: var(--verdicta-base);
  color: var(--verdicta-white);
  font-family: var(--verdicta-font-two);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tnt-fiyat h3 {
  font-size: 21px;
  line-height: 28px;
}

.tnt-fiyat__ozet {
  margin-top: 6px;
  color: var(--tnt-muted);
  font-size: 13.5px;
  line-height: 21px;
}

.tnt-fiyat__tutar {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--tnt-line-soft);
}

.tnt-fiyat__deger,
.tnt-fiyat__teklif {
  color: var(--tnt-ink);
  font-family: var(--verdicta-font-two);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}

.tnt-fiyat__teklif {
  font-size: 30px;
}

.tnt-fiyat__birim {
  color: var(--tnt-muted);
  font-size: 14px;
  font-weight: 500;
}

  .tnt-fiyat__birim small {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 16px;
  }

.tnt-fiyat__liste {
  display: grid;
  gap: 11px;
  margin-bottom: 26px;
}

  .tnt-fiyat__liste li {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 9px;
    color: var(--tnt-ink-soft);
    font-size: 14px;
    line-height: 22px;
  }

  .tnt-fiyat__liste i {
    margin-top: 6px;
    color: var(--verdicta-base);
    font-size: 10px;
  }

/* Eylem dugmesi kartin en altina yapisik: madde sayilari farkli oldugunda
   dugmeler ayni hizada kalsin. */
.tnt-fiyat__eylem {
  margin-top: auto;
  width: 100%;
}

/* Vurgulu kart koyu zeminli; metin renkleri terse cevriliyor. */
.tnt-fiyat.is-vurgulu h3,
.tnt-fiyat.is-vurgulu .tnt-fiyat__deger,
.tnt-fiyat.is-vurgulu .tnt-fiyat__teklif {
  color: var(--verdicta-white);
}

.tnt-fiyat.is-vurgulu .tnt-fiyat__ozet,
.tnt-fiyat.is-vurgulu .tnt-fiyat__birim {
  color: rgba(var(--verdicta-white-rgb), .6);
}

.tnt-fiyat.is-vurgulu .tnt-fiyat__liste li {
  color: rgba(var(--verdicta-white-rgb), .82);
}

.tnt-fiyat.is-vurgulu .tnt-fiyat__tutar {
  border-bottom-color: rgba(var(--verdicta-white-rgb), .16);
}

.tnt-ortak {
  margin-top: 34px;
  padding: 24px 28px;
  background: var(--tnt-surface);
  border: 1px solid var(--tnt-line-soft);
  border-radius: var(--tnt-radius);
}

.tnt-ortak__baslik {
  margin-bottom: 14px;
  color: var(--tnt-ink);
  font-family: var(--verdicta-font-two);
  font-size: 14px;
  font-weight: 600;
}

.tnt-ortak ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 24px;
}

.tnt-ortak li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--tnt-ink-soft);
  font-size: 13.5px;
}

.tnt-ortak i {
  color: var(--verdicta-base);
  font-size: 10px;
}

.tnt-not {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  color: var(--tnt-muted);
  font-size: 13px;
  line-height: 21px;
}

  .tnt-not > i {
    flex: 0 0 auto;
    margin-top: 4px;
    color: var(--verdicta-base);
  }

  /* `min-width: 0` olmadan esnek metin ogesi en dar icerigin altina inemez. */
  .tnt-not > span {
    min-width: 0;
  }

/*------------------------------------------------------------------ 12. S.S.S. */
.tnt-sss {
  display: grid;
  gap: 12px;
}

.tnt-sss__oge {
  background: var(--tnt-surface);
  border: 1px solid var(--tnt-line-soft);
  border-radius: var(--tnt-radius-sm);
  box-shadow: var(--tnt-golge-sm);
  overflow: hidden;
}

  .tnt-sss__oge[open] {
    border-color: rgba(var(--verdicta-base-rgb), .5);
  }

  .tnt-sss__oge summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    color: var(--tnt-ink);
    font-family: var(--verdicta-font-two);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
  }

    .tnt-sss__oge summary::-webkit-details-marker {
      display: none;
    }

    .tnt-sss__oge summary i {
      flex: 0 0 auto;
      color: var(--verdicta-base);
      font-size: 12px;
      transition: transform .25s ease;
    }

  .tnt-sss__oge[open] summary i {
    transform: rotate(180deg);
  }

.tnt-sss__cevap {
  padding: 0 22px 20px;
  color: var(--tnt-ink-soft);
  font-size: 14.5px;
  line-height: 26px;
}

/*------------------------------------------------------------------ 13. Kapanis */
.tnt-cta {
  padding-block: 72px;
  background: var(--tnt-ink);
}

.tnt-cta__ic {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: 40px;
}

.tnt-cta h2 {
  color: var(--verdicta-white);
  font-size: 32px;
  line-height: 1.24;
}

.tnt-cta__yazi p {
  margin-top: 12px;
  max-width: 52ch;
  color: rgba(var(--verdicta-white-rgb), .66);
  font-size: 15.5px;
  line-height: 27px;
}

.tnt-cta__kutu {
  justify-self: end;
  text-align: right;
}

.tnt-cta__alt {
  margin-top: 16px;
  color: rgba(var(--verdicta-white-rgb), .5);
  font-size: 13px;
  line-height: 22px;
}

  .tnt-cta__alt + .tnt-cta__alt {
    margin-top: 8px;
  }

  .tnt-cta__alt a {
    color: var(--verdicta-base);
  }

    .tnt-cta__alt a:hover {
      color: var(--verdicta-white);
    }

/*------------------------------------------------------------------ 14. Alt bilgi */
.tnt-alt {
  padding-block: 54px 26px;
  background: #081627;
  color: rgba(var(--verdicta-white-rgb), .55);
}

.tnt-alt__ust {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: 36px;
  padding-bottom: 34px;
}

.tnt-alt__marka strong {
  display: block;
  margin-bottom: 10px;
  color: var(--verdicta-white);
  font-family: var(--verdicta-font-two);
  font-size: 18px;
  font-weight: 600;
}

.tnt-alt__marka p {
  max-width: 46ch;
  font-size: 13.5px;
  line-height: 23px;
}

.tnt-alt__baslik {
  margin-bottom: 12px;
  color: var(--verdicta-white);
  font-family: var(--verdicta-font-two);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tnt-alt__menu ul {
  display: grid;
  gap: 9px;
}

.tnt-alt__menu a {
  color: rgba(var(--verdicta-white-rgb), .6);
  font-size: 13.5px;
}

  .tnt-alt__menu a:hover {
    color: var(--verdicta-base);
  }

.tnt-alt__cizgi {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  padding-top: 22px;
  border-top: 1px solid rgba(var(--verdicta-white-rgb), .1);
  font-size: 12.5px;
}

/*------------------------------------------------------------------ 15. Beliren bolumler */
/* Baslangic durumu yalnizca betik calisiyorken uygulaniyor: `js` sinifini
   erp-tanitim.js ekliyor. Betik yuklenmezse hicbir sey gizlenmez. */
.js .tnt-anim {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}

  .js .tnt-anim.is-gorunur {
    opacity: 1;
    transform: none;
  }

/*------------------------------------------------------------------ 16. Kirilimlar */
@media (max-width: 1100px) {
  .tnt-hero h1 {
    font-size: 42px;
  }

  .tnt-ozellik__izgara,
  .tnt-kitle__izgara,
  .tnt-rol__izgara {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Ust menu acilir panele donuyor. Kirilim 980'den 1100'e cekildi
     (v0.76.1): alti baglantili menu, marka ve iki dugme 1000px'te yan yana
     sigmiyor, baglantilar iki satira kiriliyordu. */
  .tnt-ust__ac {
    display: inline-flex;
  }

  .tnt-menu {
    position: fixed;
    inset: var(--tnt-ust-h) 0 auto;
    z-index: 38;
    display: block;
    padding: 18px 24px 26px;
    background: var(--tnt-surface);
    border-bottom: 1px solid var(--tnt-line);
    box-shadow: var(--tnt-golge);
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: var(--tnt-gecis);
  }

    .tnt-menu.is-acik {
      transform: none;
      opacity: 1;
      visibility: visible;
    }

  .tnt-menu__liste {
    display: grid;
    gap: 2px;
    margin-bottom: 16px;
  }

    .tnt-menu__liste a {
      padding: 11px 0;
      border-bottom: 1px solid var(--tnt-line-soft);
      font-size: 15.5px;
    }

      .tnt-menu__liste a::after {
        display: none;
      }

  .tnt-menu__eylem {
    display: grid;
    gap: 10px;
  }

    .tnt-menu__eylem .tnt-dugme {
      width: 100%;
    }
}

@media (max-width: 980px) {
  .tnt-bolum {
    padding-block: 68px;
  }

  .tnt-hero {
    padding-block: 60px 72px;
  }

  .tnt-hero__ic,
  .tnt-cta__ic {
    grid-template-columns: minmax(0, 1fr);
  }

  .tnt-hero__gorsel {
    transform: none;
  }

  .tnt-cta__kutu {
    justify-self: start;
    text-align: left;
  }

  .tnt-modul__izgara,
  .tnt-adim__izgara {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tnt-sayilar__izgara {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Tek sutuna dusen fiyat kartinda buyutme yaniltici olurdu. */
  .tnt-fiyat__izgara {
    grid-template-columns: minmax(0, 1fr);
  }

  .tnt-fiyat.is-vurgulu {
    transform: none;
  }

  .tnt-ortak ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tnt-alt__ust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .tnt-kap {
    padding-inline: 16px;
  }

  .tnt-bolum {
    padding-block: 54px;
  }

  .tnt-baslik {
    margin-bottom: 32px;
  }

    .tnt-baslik h2 {
      font-size: 27px;
    }

  .tnt-hero h1 {
    font-size: 33px;
  }

  .tnt-hero__ozet {
    font-size: 15.5px;
    line-height: 27px;
  }

  .tnt-hero__eylem .tnt-dugme {
    flex: 1 1 100%;
  }

  .tnt-sayilar__izgara {
    grid-template-columns: minmax(0, 1fr);
  }

  .tnt-sayi {
    padding: 22px 20px;
  }

  .tnt-modul__izgara,
  .tnt-adim__izgara,
  .tnt-ozellik__izgara,
  .tnt-kitle__izgara,
  .tnt-rol__izgara {
    grid-template-columns: minmax(0, 1fr);
  }

  .tnt-modul, .tnt-adim, .tnt-fiyat, .tnt-kitle {
    padding: 24px 20px;
  }

  .tnt-rol {
    padding: 18px 16px;
  }

    .tnt-fiyat.is-vurgulu {
      padding-block: 32px 24px;
    }

  .tnt-ortak ul,
  .tnt-alt__ust {
    grid-template-columns: minmax(0, 1fr);
  }

  .tnt-cta h2 {
    font-size: 25px;
  }

  .tnt-cta__kutu .tnt-dugme {
    width: 100%;
  }

  .tnt-galeri__panel figcaption {
    padding: 14px 16px 16px;
  }

  .tnt-sss__oge summary {
    padding: 15px 16px;
    font-size: 15px;
  }

  .tnt-sss__cevap {
    padding: 0 16px 16px;
    font-size: 14px;
    line-height: 24px;
  }
}

/*------------------------------------------------------------------ 17. Hareket tercihi */
@media (prefers-reduced-motion: reduce) {
  body.tnt {
    scroll-behavior: auto;
  }

  .tnt *,
  .tnt *::before,
  .tnt *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .js .tnt-anim {
    opacity: 1;
    transform: none;
  }

  .tnt-hero__gorsel {
    transform: none;
  }
}