:root {
  --page-x: clamp(16px, 6vw, 120px);
  --section-y: clamp(28px, 6vw, 60px);
  --gap-1: clamp(12px, 2.2vw, 16px);
  --gap-2: clamp(16px, 3.2vw, 32px);
  --radius-card: 20px;
}


.header-bar {
  padding: 20px var(--page-x);
}

#header.sticky .header-bar {
  padding: 12px var(--page-x);
}

.logo {
  height: clamp(44px, 6vw, 75px);
}


.landing {
  padding: var(--section-y) var(--page-x);
}

.landing-grid {
  gap: var(--gap-2);
  
  grid-template-columns: repeat(3, 1fr);
}

.landing-card {
  padding: clamp(18px, 3.2vw, 32px);
  gap: var(--gap-1);
  min-height: unset;
  border-radius: var(--radius-card);
}

.hero-card .hero-text {
  right: clamp(12px, 3vw, 32px);
  max-width: min(32rem, 50%);
}


.landing-card.hero-card {
  --hero-stop: 10%;
  --hero-stop-2: min(calc(var(--hero-stop) + 30%), 92%);
  
  min-height: 340px;

  background-image:
    linear-gradient(
      rgba(90,169,223,0.92),
      rgba(90,169,223,0.92)
    ),
    linear-gradient(
      to right,
      rgba(90,169,223,0.2) var(--hero-stop),
      rgba(90,169,223,0.55) var(--hero-stop-2),
      rgba(90,169,223,0.92) 100%
    ),
    url("/img/remote/hero-bg.jpg") !important;

  background-size:
    var(--side-block) 100%,
    calc(100% - var(--side-block)) 100%,
    cover !important;

  background-position:
    right top,
    left top,
    center !important;

  background-repeat: no-repeat !important;
}

@media (max-width: 1100px) {
  .landing-card.hero-card {
    --hero-stop: 34%;
  }
}

@media (max-width: 800px) {
  .landing-card.hero-card {
    --hero-stop: 28%;
  }
}

.landing-split {
  gap: var(--gap-2);
  margin-top: var(--section-y);
  margin-bottom: clamp(24px, 5vw, 50px);
}

.split-block {
  gap: var(--gap-1);
}

.split-block > div {
  gap: clamp(16px, 4vw, 40px);
}


.split-block iframe {
  width: 100% !important;
  max-width: 100% !important;
  height: clamp(220px, 35vh, 320px) !important;
}


.account-container {
  padding-left: var(--page-x);
  padding-right: var(--page-x);
  gap: var(--gap-2);
  
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}


.account-container.form-hidden {
  
  grid-template-columns: 1fr;
  justify-items: center;
}

.account-container.form-hidden .account-left {
  width: 100%;
  
  max-width: calc((100% - 40px) / 2);
  max-width: calc((100% - var(--gap-2)) / 2);
}

.account-container.form-hidden .account-right {
  display: none;
}



.account-right {
  width: 100%;
  min-width: 0; 
  min-height: 0;
  display: flex; 
}

.account-right .form-container {
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;

  
  height: 100%;
  min-height: 520px;
  max-height: calc(110dvh);
}

.file-box {
  width: min(220px, 60vw);
  height: auto;
  aspect-ratio: 1 / 1;
}

.action-row {
  transform: none;
  margin-top: clamp(8px, 2vw, 16px);
}



.members-container {
  gap: var(--gap-2);
}

.members-grid {
  
  grid-template-columns: repeat(auto-fill, minmax(100px, 144px));
  justify-content: start;
  gap: var(--gap-1);
  
}

.member {
  width: 100%;
  max-width: 200px;
}

.member img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}


.study-item {
  gap: var(--gap-1);
}

.study-info {
  max-width: 100%;
}


@media (max-width: 780px) {
  
  #header .header-bar,
  #header.sticky .header-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    
    gap: 10px;
    align-items: stretch;
    justify-content: stretch;
    justify-items: stretch;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 16px clamp(24px, 6vw, 56px);
  }

  #header .header-left,
  #header .header-actions {
    display: contents;
  }

  #header .header-left > a[href="/"] {
    grid-column: 1 / span 2;
    grid-row: 1;
    align-self: center;
  }

  #seasonButton {
    grid-column: 3;
    grid-row: 1;
    justify-self: stretch; 
    text-align: center;
    align-self: center;
  }

  
  #header a.btn.ghost[href="/hesap/"] {
    grid-column: 1;
    grid-row: 2;
  }

  #header a.btn.ghost[href="/uyeler/"] {
    grid-column: 2;
    grid-row: 2;
  }

  #header a.btn.ghost[href="/study/"] {
    grid-column: 3;
    grid-row: 2;
  }

  
  #header a.btn.ghost[href="/hesap/"],
  #header a.btn.ghost[href="/uyeler/"],
  #header a.btn.ghost[href="/study/"] {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    height: 100%; 
    padding: 10px 10px;
    margin: 0;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
  }

  #seasonButton {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    height: auto;
    padding: 10px 10px;
    margin: 0;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
  }

  .hero-card .hero-text {
    position: static;
    transform: none;
    max-width: 100%;
    padding: clamp(18px, 3.2vw, 32px);
  }

  .landing-card.hero-card {
    display: flex;
    flex-direction: column;
  }

  .landing-card.span-2 {
    grid-column: auto;
  }

  .landing-grid {
    grid-template-columns: 1fr;
  }

  .members-grid {
    justify-content: center;
  }

  .landing-split {
    grid-template-columns: 1fr;
  }

  .split-block > div {
    grid-template-columns: 1fr;
  }

  .account-container {
    grid-template-columns: 1fr;
  }

  .study-item {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 520px) {
  #header a.btn.ghost[href="/hesap/"],
  #header a.btn.ghost[href="/uyeler/"],
  #header a.btn.ghost[href="/study/"],
  #seasonButton {
    
    font-size: clamp(11px, calc(7.3px + 1.2vw), 13.5px);
    padding: clamp(8px, 2.4vw, 10px) clamp(8px, 2.2vw, 10px);
  }

  #header .header-left {
    font-size: clamp(18px, calc(10px + 2.2vw), 24px);
  }
}