/* ============================================================
   Bitasis web sitesi — sayfa stilleri
   Renk, yazı ve boşluk değerleri tokens.css'ten gelir.
   ============================================================ */

/* --- Temel --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 116px; }
body {
  margin: 0;
  /* kısa alt sayfalarda alt bilginin altında boşluk kalmasın */
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--white);
  font-family: var(--font-body);
  color: var(--ink-soft);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }
img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--orange); text-decoration: none; transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
a:hover { color: var(--orange-600); }
button, input, select, textarea { font-family: var(--font-body); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }

.container { max-width: 1180px; margin: 0 auto; }
.container--narrow { max-width: 900px; }
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 260px), 100%), 1fr));
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  background: var(--orange); color: var(--white);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  padding: 10px 16px; border-radius: var(--radius-md);
}
.skip-link:focus { top: 12px; color: var(--white); }

/* --- Bölümler --- */
.section { position: relative; padding: clamp(52px, 6vw, 92px) clamp(20px, 4vw, 40px); }
.section--white { background: var(--white); }
.section--blue { background: var(--bg-blue); }
.section--navy { background: var(--navy); overflow: hidden; overflow: clip; }
.section > .container { position: relative; }

/* Lacivert zeminlerdeki turuncu köşe bloğu */
.diamond {
  position: absolute;
  background: var(--orange);
  transform: rotate(45deg);
  pointer-events: none;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; line-height: 1;
  color: var(--orange);
}
.section--navy .eyebrow { color: var(--orange-300); }

.h2 {
  margin-top: 12px;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.14; letter-spacing: -.01em;
  color: var(--navy); text-wrap: pretty;
}
.section--navy .h2 { color: var(--white); line-height: 1.12; }

.lead {
  margin-top: 16px;
  font-size: clamp(15px, 1.1vw, 17px); line-height: 1.62;
  max-width: 62ch; text-wrap: pretty;
}
.section--navy .lead { margin-top: 18px; color: var(--text-muted-on-navy); }

/* --- Butonlar --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  padding: 14px 22px; border-radius: var(--radius-md);
  border: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, transform .05s ease;
}
.btn:active { transform: translateY(1px); }
.btn--sm { font-size: 13.5px; padding: 11px 20px; }
.btn--primary { background: var(--orange); color: var(--white); box-shadow: 0 2px 8px rgba(255,102,0,.28); }
.btn--primary:hover { background: var(--orange-600); color: var(--white); }
.btn--navy { background: var(--navy); color: var(--white); }
.btn--navy:hover { background: var(--navy-700); color: var(--white); }
.btn--outline {
  background: transparent; color: var(--navy);
  border: 1.5px solid var(--navy); font-size: 13.5px; padding: 10px 18px;
}
.btn--outline:hover { background: var(--navy); color: var(--white); }
.btn--white { background: var(--white); color: var(--navy); }
.btn--white:hover { background: #EEF2F9; color: var(--navy); }
.btn--ghost-light { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,.28); }
.btn--ghost-light:hover { background: rgba(255,255,255,.08); color: var(--white); }
.btn--whatsapp { background: #25D366; color: #fff; box-shadow: 0 6px 18px rgba(37,211,102,.32); }
.btn--whatsapp:hover { background: #1EBE5A; color: #fff; box-shadow: 0 8px 22px rgba(37,211,102,.42); }
.wa-icon { flex: none; display: block; }

/* --- Kartlar (tasarım sistemi Card bileşeni) --- */
.card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 22px;
  background: var(--white); color: var(--ink-soft);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: 14.5px; line-height: 1.6;
}
.card--muted { background: var(--bg-blue); border-color: var(--bg-blue-200); box-shadow: none; }
.card--callout { background: var(--bg-orange); border-color: var(--bg-orange-200); box-shadow: none; }
.card--dark { background: rgba(255,255,255,.06); border-color: rgba(255,176,122,.35); color: var(--text-muted-on-navy); box-shadow: none; padding: 20px; }
.card--highlight { border: 2px solid var(--orange); box-shadow: 0 8px 24px rgba(255,102,0,.14); }
.card--accent { border-top: 4px solid var(--orange); }

.card__num {
  font-family: var(--font-stat); font-weight: 800; font-size: 15px;
  color: var(--orange); letter-spacing: .06em;
}
.card__title {
  font-family: var(--font-display); font-weight: 800; font-size: 16.5px;
  color: var(--navy); margin-bottom: 7px; line-height: 1.25;
}
.card--dark .card__title { color: var(--white); margin-bottom: 6px; }
.card p { font-size: 14px; line-height: 1.55; }
.card--dark p, .card--problem p { font-size: 14.5px; line-height: 1.58; }
.card--problem { padding: 24px; }
.card--problem .card__num { margin-bottom: 10px; }
.card--problem p { font-size: 15.5px; line-height: 1.6; color: var(--navy); }
.card__icon {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  background: var(--bg-orange); color: var(--orange);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}

/* --- Telefon ekran görüntüleri --- */
.phone {
  position: relative; overflow: hidden; flex: none;
  aspect-ratio: 1179 / 2556;
  border: 1px solid var(--line);
  box-shadow: 0 22px 48px rgba(13,48,99,.18);
}
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

/* --- Üst bilgi --- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 1px 0 var(--line);
}
.topbar { background: var(--navy); }
.topbar__inner {
  max-width: 1180px; margin: 0 auto;
  padding: 7px clamp(18px, 4vw, 40px);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.topbar__tag {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 10.5px;
  letter-spacing: .12em; color: var(--orange-300); white-space: nowrap;
}
.topbar__links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-left: auto; font-size: 12px; }
.topbar__links a, .footer a { color: var(--text-muted-on-navy); }
.topbar__links a:hover, .footer a:hover { color: var(--white); }

.header__inner {
  max-width: 1180px; margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 40px); min-height: 68px;
  display: flex; align-items: center; gap: 32px;
}
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand img { height: 28px; width: auto; display: block; }
.brand__rule { width: 1px; height: 26px; background: var(--line); display: block; }
.brand__text { display: flex; flex-direction: column; gap: 2px; }
.brand__name { font-family: var(--font-display); font-weight: 800; font-size: 10px; letter-spacing: .13em; color: var(--navy); }

.site-nav { display: flex; align-items: center; gap: 32px; flex: 1; }
.site-nav__links { display: flex; align-items: center; gap: 28px; margin: 0 auto; }
.site-nav__link {
  position: relative;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: var(--ink-soft); padding: 8px 0; white-space: nowrap;
}
.site-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--orange); border-radius: 2px;
  transform: scaleX(0); transition: transform .2s ease;
}
.site-nav__link:hover { color: var(--navy); }
.site-nav__link:hover::after { transform: scaleX(1); }
.site-nav__link[aria-current="page"] { color: var(--navy); }
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.site-nav__actions { display: flex; align-items: center; gap: 18px; flex: none; }
.site-nav__login {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; padding: 8px 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--navy);
  white-space: nowrap; transition: color .15s ease;
}
.site-nav__login:hover { color: var(--orange); }

.nav-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius-md);
  color: var(--navy); cursor: pointer;
}
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 1060px) {
  .header__inner { flex-wrap: wrap; gap: 0 16px; min-height: 64px; }
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none; flex-basis: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 4px 0 16px; border-top: 1px solid var(--line);
  }
  .site-nav.is-open { display: flex; }
  .site-nav__links { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .site-nav__link { padding: 14px 2px; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--navy); }
  .site-nav__link::after { display: none; }
  .site-nav__actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 14px; }
  .site-nav__login { justify-content: center; border: 1.5px solid var(--navy); border-radius: var(--radius-md); padding: 12px 18px; font-size: 15px; }
}

@media (max-width: 480px) {
  .brand__rule, .brand__text, .topbar__tag { display: none; }
  .topbar__links { margin-left: 0; }
}

/* --- Hero --- */
.hero .diamond { right: -160px; top: -160px; width: 520px; height: 520px; opacity: .16; }
.hero__inner {
  padding: clamp(48px, 6vw, 86px) clamp(20px, 4vw, 40px) clamp(44px, 5vw, 72px);
  --min: 300px; gap: clamp(28px, 4vw, 52px); align-items: center;
}
.hero__kicker { display: flex; align-items: center; gap: 13px; padding-left: 15px; border-left: 3px solid var(--orange); }
.hero__kicker svg { flex: none; }
.hero__kicker-text { display: flex; flex-direction: column; gap: 3px; }
.hero__kicker-title { font-family: var(--font-display); font-weight: 800; font-size: 12.5px; letter-spacing: .1em; color: var(--white); }
.hero__kicker-sub { font-size: 12.5px; color: var(--text-muted-on-navy); }
.hero h1 {
  margin-top: 22px;
  font-family: var(--font-display); font-weight: 800;
  font-size: calc(clamp(32px, 4.6vw, 56px) - 8px); line-height: 1.06; letter-spacing: -.015em;
  color: var(--white); text-wrap: pretty;
}
.hero__text { margin-top: 20px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.62; color: var(--text-muted-on-navy); max-width: 56ch; text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 28px; }
.hero__actions .btn { font-size: 14.5px; padding: 13px 22px; box-shadow: 0 2px 12px rgba(255,102,0,.32); }
.link-wa {
  display: inline-flex; align-items: center; gap: 7px;
  color: #4ADE80; font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  border-bottom: 1px solid rgba(37,211,102,.45); padding-bottom: 2px;
}
.link-wa:hover { color: #25D366; border-bottom-color: #25D366; }

/* --- Nasıl çalışır (StepItem) --- */
.how__grid { --min: 320px; gap: clamp(28px, 4vw, 56px); margin-top: 12px; align-items: start; }
.how__main .h2 { margin-top: 0; }
.how__main .steps { margin-top: 36px; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.step { display: flex; gap: 18px; }
.step__rail { display: flex; flex-direction: column; align-items: center; flex: none; }
.step__num {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--orange); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  box-shadow: 0 2px 8px rgba(255,102,0,.3);
}
.step__line { width: 2px; flex: 1; min-height: 14px; background: var(--bg-blue-200); margin-top: 4px; }
.step__body { padding-bottom: 20px; }
.step:last-child .step__line { display: none; }
.step:last-child .step__body { padding-bottom: 0; }
.step__title { font-family: var(--font-display); font-weight: 800; font-size: 16.5px; color: var(--navy); margin-bottom: 4px; }
.step__text { font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.how__aside { display: flex; flex-direction: column; gap: 14px; }

/* --- Nasıl çalışır: dikey akış hattı --- */
.akis {
  position: relative; list-style: none;
  margin: clamp(26px, 3.2vw, 38px) 0 0; padding: 0;
}
/* adımları birbirine bağlayan dikey hat */
.akis::before {
  content: ""; position: absolute; left: 7px; top: 30px; bottom: 22px; width: 2px;
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange) 44%, var(--navy) 56%, var(--navy) 100%);
  opacity: .3;
}

.akis__adim {
  position: relative; display: grid;
  grid-template-columns: 34px auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 0 16px;
  padding: 18px 16px 18px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background-color .18s ease, padding-left .18s ease;
}
.akis__adim:first-child { border-top: 1px solid var(--line); }
.akis__adim:hover { background: var(--bg-blue); }
.akis__adim:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }

.akis__dot {
  grid-column: 1; justify-self: start;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--white); box-shadow: 0 0 0 3px var(--orange);
}
.akis__adim--oto .akis__dot { box-shadow: 0 0 0 3px var(--navy); }

.akis__no {
  font-family: var(--font-stat); font-weight: 800; font-size: 13px;
  letter-spacing: .04em; color: var(--orange);
}
.akis__adim--oto .akis__no { color: var(--navy); }

.akis__ad {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.25; color: var(--navy);
}

.akis__who {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: .05em; text-transform: uppercase;
  border-radius: var(--radius-pill); padding: 6px 12px;
  color: var(--orange); background: var(--bg-orange); white-space: nowrap;
}
.akis__adim--siz .akis__who { color: var(--orange); background: var(--bg-orange); }
.akis__adim--oto .akis__who { color: var(--navy); background: var(--bg-blue); }
.stepmodal .akis__who { display: inline-block; white-space: normal; }
.akis__adim--oto:hover .akis__who { background: var(--white); }

.akis__ok { display: flex; color: var(--ink-faint); transition: transform .18s ease, color .18s ease; }
.akis__adim:hover .akis__ok { color: var(--orange); transform: translateX(4px); }

/* döngü satırı */
.akis__dongu {
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr);
  align-items: center; gap: 0 16px; padding: 16px 0 0;
}
.akis__dot--dongu {
  width: 16px; height: 16px; border-radius: 50%; justify-self: start;
  background: var(--white); box-shadow: 0 0 0 2px var(--bg-blue-200);
  display: flex; align-items: center; justify-content: center; color: var(--orange);
}
.akis__dongu-metin { font-size: 13px; line-height: 1.5; color: var(--ink-faint); }

@media (max-width: 720px) {
  .akis__adim {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 5px 14px; padding: 16px 4px 16px 0;
  }
  .akis__dot { grid-column: 1; grid-row: 1; }
  .akis__no { grid-column: 2; grid-row: 1; }
  .akis__ok { grid-column: 3; grid-row: 1; }
  .akis__ad { grid-column: 2 / -1; grid-row: 2; }
  .akis__who { grid-column: 2 / -1; grid-row: 3; justify-self: start; margin-top: 3px; white-space: normal; }
}

/* Anasayfa — bölüm sonu derinleşme bağlantısı */
.section-more { margin-top: clamp(24px, 3vw, 34px); }
.why-story__body .section-more { margin-top: 22px; }
.section-more a {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 14.5px;
  color: var(--orange); border-bottom: 1px solid rgba(255,102,0,.35); padding-bottom: 3px;
  transition: border-color .18s ease, gap .18s ease;
}
.section-more a:hover { border-bottom-color: var(--orange); gap: 11px; }
.section--navy .section-more a { color: var(--orange-300); border-bottom-color: rgba(255,176,122,.4); }

/* Anasayfa — ürün yayında kanıtı */
.urun__head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
/* --- Mobil uygulama bölümü --- */
.appview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.appview__side .h2 { margin-top: 6px; }
.appview__list { list-style: none; margin: clamp(22px, 2.6vw, 30px) 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.appview__list li { display: grid; grid-template-columns: auto 1fr; gap: 13px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.appview__list b { font-family: var(--font-display); font-weight: 700; color: var(--navy); }
.appview__icon {
  flex: none; width: 34px; height: 34px; border-radius: 10px; margin-top: 1px;
  background: var(--white); border: 1px solid var(--bg-blue-200); color: var(--orange);
  display: flex; align-items: center; justify-content: center;
}
.appview .app-badges__list { margin-top: clamp(24px, 2.8vw, 32px); }

/* telefonlar ve üstlerine düşen bildirimler */
.appview__visual { position: relative; display: flex; justify-content: center; padding: 26px 0; }
.appview__visual .phone {
  width: min(240px, 46%); aspect-ratio: 9 / 19; border-radius: 28px;
  box-shadow: 0 24px 54px rgba(13,48,99,.22);
}
.appview__visual .phone--arka { margin: 38px 0 0 -30px; z-index: 0; }
.appview__visual .phone:first-child { z-index: 1; }

.notif {
  position: absolute; z-index: 2; width: min(244px, 72%);
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  padding: 11px 13px; border-radius: 14px;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(13,48,99,.08);
  box-shadow: 0 14px 30px rgba(13,48,99,.18);
}
.notif--ogrenci { top: 5%; left: -2%; }
.notif--veli { bottom: 4%; right: -1%; }
.notif__logo {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  background: var(--orange); color: var(--white);
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.notif__body { min-width: 0; }
.notif__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.notif__head b { font-family: var(--font-display); font-weight: 700; font-size: 11.5px; color: var(--navy); }
.notif__head em { font-style: normal; font-size: 10.5px; color: var(--ink-faint); }
.notif__text { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--ink-soft); }

@media (max-width: 900px) {
  .appview { grid-template-columns: minmax(0, 1fr); }
  .appview__visual { padding: 34px 0 10px; }
  .notif--ogrenci { top: 4%; left: 0; }
  .notif--veli { bottom: 0; right: 0; }
}
@media (max-width: 560px) {
  .appview__visual { flex-direction: column; align-items: center; gap: 0; }
  .appview__visual .phone { width: min(230px, 62%); }
  .appview__visual .phone--arka { display: none; }
  .notif { position: static; width: 100%; margin-top: 14px; }
  .notif--ogrenci { order: -1; margin: 0 0 16px; }
}

/* --- Rol panelleri: sol fayda listesi, sağda dönen ekran --- */
.kurum { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.kurum__side { display: flex; flex-direction: column; }
.kurum__eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--orange);
}
.kurum__title {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15; color: var(--navy); margin: 7px 0 clamp(18px, 2vw, 24px);
}
.kurum__stage { display: flex; flex-direction: column; min-width: 0; }

/* Fayda listesi — aynı zamanda sekme */
.tabs { display: flex; flex-direction: column; gap: 4px; }
.tab {
  position: relative; display: grid; grid-template-columns: auto 1fr;
  align-items: baseline; gap: 12px;
  padding: 13px 14px; text-align: left;
  background: none; border: 0; border-radius: var(--radius-md);
  cursor: pointer; transition: background-color .18s ease;
}
.tab:hover { background: var(--bg-blue); }
.tab.is-active { background: var(--bg-blue); }
.tab__no {
  font-family: var(--font-stat); font-weight: 800; font-size: 12px;
  color: var(--bg-blue-200); transition: color .18s ease;
}
.tab.is-active .tab__no { color: var(--orange); }
.tab__text {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 1.2vw, 15.5px);
  line-height: 1.35; color: var(--ink-faint); transition: color .18s ease;
}
.tab:hover .tab__text { color: var(--navy); }
.tab.is-active .tab__text { color: var(--navy); }
.tab__bar {
  grid-column: 1 / -1; display: block; height: 0; margin-top: 0;
  border-radius: 2px; background: var(--bg-blue-200); overflow: hidden;
  opacity: 0; transition: opacity .18s ease;
}
.tab.is-active .tab__bar { height: 2px; margin-top: 10px; opacity: 1; }
.tab__bar i { display: block; height: 100%; width: 100%; border-radius: 2px; background: var(--orange); }
.tab.is-active.is-timing .tab__bar i { animation: tab-fill var(--sure, 5s) linear forwards; }
@keyframes tab-fill { from { width: 0; } to { width: 100%; } }

.panels { position: relative; flex: 1; }
.panel { display: flex; flex-direction: column; height: 100%; }
.panel[hidden] { display: none; }
.panel.is-active { animation: panel-in .35s ease both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kurum .viz { flex: 1; min-height: 196px; }
.kurum .feat__text { margin-top: 12px; }
.feat__text { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

/* Ekran parçalarının ortak çerçevesi */
.viz {
  display: flex; flex-direction: column;
  background: var(--bg-blue); border: 1px solid var(--bg-blue-200);
  border-radius: var(--radius-md); padding: 14px;
}
.viz__label {
  font-family: var(--font-display); font-weight: 700; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 11px;
}
.viz__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--bg-blue-200);
  font-size: 11.5px; color: var(--ink-faint);
}
.viz__foot strong { font-family: var(--font-stat); font-weight: 800; font-size: 15px; color: var(--orange); }

/* Çizgi grafik */
.chart { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: 1fr auto; gap: 4px 6px; flex: 1; min-height: 116px; }
.chart__axis { display: flex; flex-direction: column; justify-content: space-between; font-family: var(--font-stat); font-size: 9.5px; color: var(--ink-faint); text-align: right; padding: 2px 0 12px; }
.chart__area { position: relative; }
.chart__area svg { display: block; width: 100%; height: 100%; }
.chart__area line { stroke: var(--bg-blue-200); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 4; }
.chart__fill { fill: var(--orange); opacity: .1; }
.chart__line { fill: none; stroke: var(--orange); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart__dot { fill: var(--white); stroke: var(--orange); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart__dot--last { fill: var(--orange); stroke: var(--white); stroke-width: 2.5; }
.chart__tip {
  position: absolute; right: 0; top: 0; transform: translateY(-4px);
  font-family: var(--font-stat); font-weight: 800; font-size: 12px; color: var(--white);
  background: var(--orange); border-radius: var(--radius-pill); padding: 3px 9px;
}
.chart__x { grid-column: 2; display: flex; justify-content: space-between; font-size: 9.5px; color: var(--ink-faint); }

/* Öğrenci planı kartçıkları */
.pmini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 7px; flex: 1; }
.pmini { background: var(--white); border: 1px solid var(--bg-blue-200); border-radius: var(--radius-sm); padding: 9px 11px; }
.pmini__top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.pmini__ad { font-family: var(--font-display); font-weight: 800; font-size: 12.5px; color: var(--navy); }
.pmini__sinif { font-size: 10px; font-weight: 700; color: var(--ink-faint); background: var(--bg-blue); border-radius: var(--radius-pill); padding: 2px 7px; }
.pmini__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--ink-soft); }
.pmini__row + .pmini__row { margin-top: 4px; }
.pmini__row em { flex: none; font-family: var(--font-stat); font-weight: 700; font-style: normal; font-size: 11px; color: var(--navy); }
.pmini--more {
  display: flex; align-items: center; justify-content: center;
  background: none; border-style: dashed;
  font-size: 11.5px; font-weight: 600; color: var(--ink-faint); padding: 8px;
}

/* Isı haritası */
.heat { display: grid; grid-template-columns: 40px repeat(5, minmax(0, 1fr)); gap: 4px; align-items: center; flex: 1; }
.heat__corner { display: block; }
.heat__col { font-size: 9.5px; font-weight: 600; color: var(--ink-faint); text-align: center; overflow: hidden; text-overflow: ellipsis; }
.heat__row { font-size: 11px; font-weight: 700; color: var(--navy); }
.heat b {
  display: block; height: 100%; min-height: 24px; border-radius: 4px;
  background: color-mix(in srgb, var(--orange) calc(var(--y) * 100%), #E8EEF7);
}
.heat__legend { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 9.5px; color: var(--ink-faint); }
.heat__legend i { flex: 1; height: 5px; border-radius: 3px; background: linear-gradient(90deg, #E8EEF7, var(--orange)); }

/* Veli özeti */
.veli { background: var(--white); border: 1px solid var(--bg-blue-200); border-radius: var(--radius-md); padding: 12px 13px; flex: 1; }
.veli__top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-bottom: 11px; border-bottom: 1px solid var(--bg-blue-200); }
.veli__ad { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--navy); }
.veli__sinif { font-size: 11px; font-weight: 700; color: var(--ink-faint); background: var(--bg-blue); border-radius: var(--radius-pill); padding: 3px 9px; }
.veli__hafta { margin-left: auto; font-size: 11px; color: var(--ink-faint); }
.veli__ring { display: flex; align-items: center; gap: 14px; padding: 12px 0 10px; }
.veli__ring svg { flex: none; width: 66px; height: 66px; transform: rotate(-90deg); }
.ring__bg { fill: none; stroke: var(--bg-blue); stroke-width: 4.5; }
.ring__val { fill: none; stroke: var(--orange); stroke-width: 4.5; stroke-linecap: round; }
.veli__ring-text strong { display: block; font-family: var(--font-stat); font-weight: 800; font-size: 22px; line-height: 1; color: var(--navy); }
.veli__ring-text span { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.35; color: var(--ink-faint); }
.veli__list { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--bg-blue-200); display: flex; flex-direction: column; gap: 8px; }
.veli__list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.veli__list span { font-size: 11.5px; color: var(--ink-faint); }
.veli__list b { font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--navy); text-align: right; }
.veli__list .is-up { color: var(--status-yolunda); }

/* Üç adımlı seçim */
.wizard { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; flex: 1; }
.wizard li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.wizard__no {
  flex: none; width: 19px; height: 19px; border-radius: 50%;
  background: var(--navy); color: var(--white);
  font-family: var(--font-stat); font-weight: 800; font-size: 10.5px;
  display: flex; align-items: center; justify-content: center;
}
.wizard__ad { display: block; font-size: 11px; color: var(--ink-faint); margin-bottom: 4px; }
.wizard__deger { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.wizard__deger b {
  font-family: var(--font-display); font-weight: 700; font-size: 11.5px; color: var(--white);
  background: var(--navy); border-radius: var(--radius-pill); padding: 3px 9px;
}
.wizard__deger em { font-style: normal; font-size: 10.5px; color: var(--ink-faint); }
.wizard__sonuc {
  display: flex; align-items: baseline; gap: 8px; margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--bg-blue-200);
}
.wizard__sonuc svg { align-self: center; color: var(--orange); }
.wizard__sonuc strong { font-family: var(--font-stat); font-weight: 800; font-size: 22px; line-height: 1; color: var(--navy); }
.wizard__sonuc span { font-size: 11.5px; color: var(--ink-faint); }

/* Öğrenci listesi */
.roster { flex: 1; }
.roster__head, .roster ul li { display: grid; grid-template-columns: 1fr 60px 40px; align-items: center; gap: 10px; }
.roster__head { font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); padding-bottom: 7px; border-bottom: 1px solid var(--bg-blue-200); }
.roster__head span:nth-child(2), .roster__head span:nth-child(3) { text-align: right; }
.roster ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.roster__ad { font-size: 12px; font-weight: 600; color: var(--navy); }
.roster__spark { width: 60px; height: 18px; color: var(--orange); }
.roster__oran { font-family: var(--font-stat); font-weight: 700; font-size: 11.5px; text-align: right; }
.roster__oran.is-ok { color: var(--status-yolunda); }
.roster__oran.is-warn { color: var(--status-dikkat); }
.roster__oran.is-bad { color: var(--status-acil); }

/* Görüşme önerileri */
.alerts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; flex: 1; }
.alerts li {
  background: var(--white); border: 1px solid var(--bg-blue-200); border-left: 3px solid var(--c);
  border-radius: var(--radius-sm); padding: 9px 11px;
}
.alerts .is-low { --c: var(--status-acil); }
.alerts .is-mid { --c: var(--status-dikkat); }
.alerts__ad { display: block; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--navy); }
.alerts__ad em { font-style: normal; font-weight: 600; font-size: 10.5px; color: var(--ink-faint); }
.alerts__not { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-soft); }

/* Onay kuyruğu */
.queue { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 7px; flex: 1; }
.queue li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--white); border: 1px solid var(--bg-blue-200); border-radius: var(--radius-sm); padding: 9px 11px;
}
.queue__ad { font-size: 12px; font-weight: 600; color: var(--navy); }
.queue__durum { flex: none; font-size: 10.5px; font-weight: 700; border-radius: var(--radius-pill); padding: 3px 9px; }
.queue__durum.is-ok { color: var(--status-yolunda); background: var(--status-yolunda-bg); }
.queue__durum.is-wait { color: var(--status-dikkat); background: var(--status-dikkat-bg); }
.queue__btns { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.queue__btn {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  color: var(--navy); background: var(--white); border: 1px solid var(--bg-blue-200);
  border-radius: var(--radius-sm); padding: 6px 11px;
}
.queue__btn.is-primary { color: var(--white); background: var(--orange); border-color: var(--orange); }

/* Günlük plan */
.dayplan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; flex: 1; }
.dayplan li {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px;
  background: var(--white); border: 1px solid var(--bg-blue-200); border-radius: var(--radius-sm); padding: 8px 11px;
}
.dayplan__gun { font-family: var(--font-display); font-weight: 800; font-size: 11px; color: var(--ink-faint); }
.dayplan__is { font-size: 11.5px; color: var(--ink-soft); }
.dayplan em { font-family: var(--font-stat); font-weight: 700; font-style: normal; font-size: 11px; color: var(--navy); }
.dayplan .is-done { opacity: .62; }
.dayplan .is-done .dayplan__is { text-decoration: line-through; }
.dayplan .is-done .dayplan__gun::after { content: " ✓"; color: var(--status-yolunda); }
.dayplan .is-now { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(255,102,0,.12); }
.dayplan .is-now .dayplan__gun { color: var(--orange); }
.dayplan__tip {
  grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 8px; padding: 9px 11px;
  background: var(--bg-orange); border-left: 2px solid var(--orange); border-radius: 0 7px 7px 0;
  font-size: 11.5px; line-height: 1.5; color: var(--ink-soft);
}
.dayplan__tip svg { flex: none; margin-top: 3px; color: var(--orange); }
.dayplan__tip b { font-family: var(--font-display); font-weight: 700; color: var(--navy); }

/* Kazanım durumu */
.kmap { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; flex: 1; align-content: center; }
.kmap li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-radius: var(--radius-sm); padding: 7px 10px;
  border: 1px solid var(--bg-blue-200); background: var(--white);
}
.kmap span { font-size: 11px; font-weight: 600; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kmap em { flex: none; font-family: var(--font-stat); font-weight: 700; font-style: normal; font-size: 11px; }
.kmap .is-ok { background: var(--status-yolunda-bg); border-color: transparent; }
.kmap .is-ok em { color: var(--status-yolunda); }
.kmap .is-warn { background: var(--status-dikkat-bg); border-color: transparent; }
.kmap .is-warn em { color: var(--status-dikkat); }
.kmap .is-bad { background: var(--status-acil-bg); border-color: transparent; }
.kmap .is-bad em { color: var(--status-acil); }
.kmap__legend { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 10px; font-size: 10px; color: var(--ink-faint); }
.kmap__legend span { display: inline-flex; align-items: center; gap: 5px; }
.kmap__legend i { width: 9px; height: 9px; border-radius: 3px; }
.kmap__legend .is-ok { background: var(--status-yolunda); }
.kmap__legend .is-warn { background: var(--status-dikkat); }
.kmap__legend .is-bad { background: var(--status-acil); }

/* Öğrenci ve veli ekranları */
.screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; flex: 1; align-content: center; }
.screen { background: var(--white); border: 1px solid var(--bg-blue-200); border-radius: var(--radius-sm); padding: 11px 12px; }
.screen--veli { background: var(--bg-orange); border-color: var(--bg-orange-200); }
.screen__ad {
  font-family: var(--font-display); font-weight: 800; font-size: 12px; color: var(--navy);
  padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--bg-blue-200);
}
.screen--veli .screen__ad { border-bottom-color: var(--bg-orange-200); }
.screen ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.screen li { position: relative; padding-left: 14px; font-size: 11px; line-height: 1.4; color: var(--ink-soft); }
.screen li::before { content: ""; position: absolute; left: 0; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }

@media (prefers-reduced-motion: reduce) {
  .panel.is-active { animation: none; }
  .tab.is-active.is-timing .tab__bar i { animation: none; width: 100%; }
}
@media (max-width: 900px) {
  .kurum { grid-template-columns: minmax(0, 1fr); }
  .kurum__stage { margin-top: 16px; }
}

/* Adım penceresi */
.stepmodal { max-width: 560px; }
.stepmodal__head { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; margin-bottom: 16px; padding-right: 44px; }
.stepmodal__no {
  flex: none; font-family: var(--font-stat); font-weight: 800; font-size: 13px;
  color: var(--orange); background: var(--bg-orange);
  border-radius: var(--radius-pill); padding: 6px 11px; margin-top: 4px;
}
.stepmodal .rolemodal__baslik { margin-bottom: 9px; padding-right: 0; }
.stepmodal__text { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }
.stepmodal__text + .stepmodal__text { margin-top: 12px; }
.stepmodal .section-more { margin-top: 20px; }

/* Rol kartları */
.rolecards { margin-top: clamp(30px, 4vw, 42px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 18px); }
.rolecard {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.6vw, 30px);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
/* sol kenarda ince turuncu hat — üzerine gelince kalınlaşır */
.rolecard::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--orange); opacity: .28;
  transition: width .2s ease, opacity .2s ease;
}
/* sağ üstte soluk baklava motifi (site kimliği) */
.rolecard::after {
  content: ""; position: absolute; right: -46px; top: -56px;
  width: 132px; height: 132px; border-radius: 22px;
  background: var(--orange); opacity: .05; transform: rotate(45deg);
  pointer-events: none; transition: opacity .2s ease;
}
.rolecard:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--bg-orange-200); }
.rolecard:hover::before { width: 5px; opacity: 1; }
.rolecard:hover::after { opacity: .09; }
.rolecard__eyebrow {
  position: relative; display: block;
  font-family: var(--font-display); font-weight: 700; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--orange);
}
.rolecard__title {
  position: relative;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2vw, 25px);
  line-height: 1.15; color: var(--navy); margin-top: 9px;
}
.rolecard__desc { position: relative; margin-top: 14px; font-size: 14.5px; line-height: 1.62; color: var(--ink-soft); }
.rolecard__cta {
  position: relative; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto; padding: 20px 0 0; cursor: pointer;
  background: none; border: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--orange);
  transition: gap .18s ease;
}
.rolecard__cta::after {
  content: ""; position: absolute; left: 0; right: 24px; bottom: -2px; height: 1px;
  background: var(--orange); opacity: 0; transition: opacity .18s ease;
}
.rolecard:hover .rolecard__cta, .rolecard__cta:hover { gap: 12px; }
.rolecard:hover .rolecard__cta::after, .rolecard__cta:hover::after { opacity: .45; }

/* Rol penceresi */
.rolemodal {
  /* position vermeyin: dialog'un kendi konumlanması bozulur ve
     showModal() sayfayı pencerenin akıştaki yerine kaydırır. */
  width: calc(100% - 40px); max-width: 1000px;
  padding: clamp(24px, 3vw, 36px); border: none;
  border-radius: var(--radius-lg); background: var(--white); color: var(--ink-soft);
  box-shadow: 0 24px 60px rgba(13,48,99,.34);
}
.rolemodal::backdrop { background: rgba(13,48,99,.62); }
.rolemodal[open] { animation: modal-in .24s ease both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rolemodal__close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-blue); border: none; border-radius: 999px; cursor: pointer; color: var(--navy);
}
.rolemodal__close:hover { background: var(--line); }
.rolemodal__baslik {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2; color: var(--navy); margin-bottom: clamp(18px, 2vw, 24px); padding-right: 44px;
}
.rolemodal .kurum { gap: clamp(20px, 3vw, 36px); }
.rolemodal .kurum__title { display: none; }
.rolemodal .kurum__eyebrow { margin-bottom: 14px; display: block; }
.rolemodal .viz { min-height: 302px; }
/* panel açıklamaları bir/iki satır olabiliyor; geçişte pencere zıplamasın */
.rolemodal .feat__text { min-height: 40px; }

@media (max-width: 900px) {
  .rolecards { grid-template-columns: minmax(0, 1fr); }
  .rolemodal { width: calc(100% - 24px); max-height: 86vh; overflow-y: auto; }
  .rolemodal .viz { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rolemodal[open] { animation: none; }
  .rolecard:hover { transform: none; }
}

.fan__lines--two { height: 40px; }

@media (max-width: 900px) {
  .feats { grid-template-columns: minmax(0, 1fr); }
  .feat .viz { min-height: 0; }
  .out--wide .out__head { margin-bottom: 14px; }
}

@media (max-width: 900px) {
  .fan__lines { display: none; }
  .fan__source { max-width: none; margin-bottom: 14px; }
  .out--wide { margin-bottom: 14px; }
}
@media (max-width: 460px) {
  .fan__source { flex-wrap: wrap; }
  .fan__source-chip { order: 3; }
}

/* Nasıl çalışır — akış şeması */
.flow {
  --rail: var(--orange-300);
  position: relative; margin: 0;
  padding: clamp(18px, 2.4vw, 26px);
  background:
    radial-gradient(circle at 1px 1px, var(--bg-blue-200) 1px, transparent 0) 0 0 / 18px 18px,
    var(--bg-blue);
  border: 1px solid var(--bg-blue-200); border-radius: var(--radius-xl);
}
.flow__node {
  position: relative; display: flex; align-items: center; gap: 12px;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; box-shadow: var(--shadow-sm);
}
.flow__node--stack { flex-direction: column; align-items: stretch; gap: 10px; }
.flow__row { display: flex; align-items: center; gap: 12px; }
.flow__icon {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  background: var(--bg-orange); color: var(--orange);
  display: flex; align-items: center; justify-content: center;
}
.flow__main { flex: 1; min-width: 0; }
.flow__title { font-family: var(--font-display); font-weight: 800; font-size: 14px; line-height: 1.25; color: var(--navy); }
.flow__sub { margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--ink-faint); }

.flow__link { position: relative; height: 20px; margin-left: 31px; }
.flow__link::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 5px; width: 2px;
  background: repeating-linear-gradient(to bottom, var(--rail) 0 4px, transparent 4px 8px);
  background-size: 2px 8px; animation: flow-dash 1s linear infinite;
}
.flow__link::after {
  content: ""; position: absolute; left: -4px; bottom: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--orange);
}
@keyframes flow-dash { to { background-position: 0 8px; } }

/* mini görseller */
.flow__bars { flex: none; display: flex; align-items: flex-end; gap: 3px; height: 28px; }
.flow__bars i { display: block; width: 6px; height: var(--h); border-radius: 2px; background: var(--navy-200); }
.flow__bars i:nth-child(4) { background: var(--orange); }
.flow__chips { flex: none; display: flex; gap: 5px; }
.flow__chips span {
  font-family: var(--font-display); font-weight: 700; font-size: 11px; color: var(--navy);
  background: var(--bg-blue); border: 1px solid var(--bg-blue-200); border-radius: var(--radius-pill); padding: 4px 9px;
}
.flow__meters { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.flow__meters li { display: grid; grid-template-columns: 14px 86px minmax(0, 1fr) 34px 44px; align-items: center; gap: 9px; font-size: 12px; color: var(--ink-soft); }
.flow__meters li:not(.is-picked):not(.flow__meters-head) { opacity: .45; }
.flow__meters small { font-size: 11px; color: var(--ink-soft); text-align: right; white-space: nowrap; }
.flow__meters .is-picked small { color: var(--navy); font-weight: 600; }
.flow__meters-head { padding-bottom: 5px; border-bottom: 1px solid var(--line); }
.flow__meters-head span {
  font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint);
}
.flow__meters-head span:nth-child(1) { grid-column: 1 / 3; color: var(--navy); text-transform: none; letter-spacing: 0; font-size: 11px; }
.flow__meters-head span:nth-child(2) { grid-column: 3 / 5; text-align: right; }
.flow__meters-head span:nth-child(3) { grid-column: 5; text-align: right; }
.flow__meters i { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--navy-200); }
.flow__meters .is-picked i {
  border-color: var(--orange);
  background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.flow__meters .is-picked span { color: var(--navy); font-weight: 600; }
.flow__hours {
  display: flex; align-items: center; gap: 8px;
  padding-top: 10px; border-top: 1px dashed var(--line);
  font-size: 12px; color: var(--ink-soft);
}
.flow__hours svg { flex: none; color: var(--orange); }
.flow__hours strong {
  margin-left: auto; font-family: var(--font-display); font-weight: 800; font-size: 12.5px; color: var(--navy);
  background: var(--bg-blue); border: 1px solid var(--bg-blue-200); border-radius: var(--radius-pill); padding: 3px 10px;
}
.flow__count {
  flex: none; font-family: var(--font-display); font-weight: 700; font-size: 11px; color: var(--orange-700);
  background: var(--bg-orange); border: 1px solid var(--bg-orange-200); border-radius: var(--radius-pill); padding: 4px 9px;
}
.flow__meters b { position: relative; height: 6px; border-radius: 6px; background: var(--bg-blue-200); overflow: hidden; }
.flow__meters b::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: 6px; background: var(--c); }
.flow__meters em { font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 11.5px; color: var(--c); text-align: right; }
.flow__meters .is-low { --c: var(--status-acil); }
.flow__meters .is-mid { --c: var(--status-dikkat); }
.flow__meters .is-high { --c: var(--status-yolunda); }

/* plan düğümü + geri besleme döngüsü */
.flow__cycle { position: relative; padding-right: 34px; }
.flow__cycle::before {
  content: ""; position: absolute; right: 6px; top: 26px; bottom: 30px; width: 22px;
  border: 2px dashed var(--rail); border-left: none; border-radius: 0 14px 14px 0;
}
.flow__cycle::after {
  content: ""; position: absolute; right: 26px; top: 21px;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 7px solid var(--orange);
}
.flow__node--plan { background: var(--navy); border-color: var(--navy); box-shadow: 0 14px 30px rgba(13,48,99,.22); }
.flow__node--plan .flow__icon { background: rgba(255,255,255,.1); color: var(--orange-300); }
.flow__node--plan .flow__title { color: var(--white); }
.flow__node--plan .flow__sub { color: var(--text-muted-on-navy); }
.flow__ai {
  flex: none; font-family: var(--font-display); font-weight: 800; font-size: 9.5px; letter-spacing: .12em;
  color: var(--navy); background: var(--orange-300); border-radius: var(--radius-pill); padding: 4px 8px;
}
.flow__plan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.flow__plan li {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 9px;
  padding: 7px 10px; font-size: 12.5px; color: var(--white);
}
.flow__plan i { flex: none; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--orange-300); }
.flow__plan li:first-child i {
  background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 10px no-repeat;
  border-color: var(--orange);
}
.flow__plan span { flex: none; width: 26px; font-family: var(--font-display); font-weight: 700; font-size: 11px; color: var(--orange-300); }
.flow__plan em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--text-muted-on-navy); white-space: nowrap; }
.flow__plan li { flex-wrap: wrap; }
.flow__tip {
  flex: 1 0 100%; display: flex; gap: 7px; margin-top: 3px; padding: 8px 10px;
  background: rgba(255,176,122,.1); border-left: 2px solid var(--orange-300); border-radius: 0 7px 7px 0;
  font-size: 11.5px; line-height: 1.45; color: #E3EAF6;
}
.flow__tip svg { flex: none; margin-top: 2px; color: var(--orange-300); }

.flow__branch { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.flow__pill {
  font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--navy);
  background: var(--white); border: 1.5px solid var(--orange-300); border-radius: var(--radius-pill); padding: 7px 12px;
}
.flow__or { font-size: 11.5px; color: var(--ink-faint); }
.flow__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.flow__pair .flow__node { padding: 10px 12px; gap: 10px; }

.flow__loop {
  display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-top: 12px;
  font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--orange-700);
}
@media (max-width: 480px) {
  .flow__node:not(.flow__node--stack), .flow__row { flex-wrap: wrap; row-gap: 8px; }
  .flow__main { flex-basis: calc(100% - 48px); }
  .flow__bars, .flow__chips, .flow__ai, .flow__count { margin-left: 48px; }
  .flow__cycle { padding-right: 28px; }
  .flow__cycle::before { right: 4px; width: 18px; }
  .flow__cycle::after { right: 20px; }
  .flow__meters li { grid-template-columns: 14px 74px minmax(0, 1fr) 30px 40px; gap: 7px; }
  .flow__pair { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .flow__link::before { animation: none; }
}

/* Hero — klasik sınav raporu ile Bitasis karşılaştırması */
.versus { width: 100%; max-width: 440px; justify-self: center; margin: 0; }
.versus__card { border-radius: 18px; padding: 16px 18px; }
.versus__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.versus__tag {
  font-family: var(--font-display); font-weight: 800; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted-on-navy); background: rgba(255,255,255,.08); border-radius: var(--radius-pill); padding: 4px 10px;
}
.versus__tag--new { color: var(--white); background: var(--orange); }
.versus__meta { font-size: 11.5px; color: var(--text-muted-on-navy); white-space: nowrap; }

/* klasik rapor: yalnızca netler, soluk */
.versus__card--old { background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.2); }
.versus__nets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.versus__nets li { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text-muted-on-navy); }
.versus__nets b { font-family: var(--font-display); font-weight: 700; color: #DCE4F2; }
.versus__total {
  display: flex; justify-content: space-between; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12.5px; color: var(--text-muted-on-navy);
}
.versus__total b { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--white); }
.versus__q {
  display: flex; align-items: center; gap: 7px; margin-top: 11px;
  font-size: 12.5px; font-style: italic; color: var(--orange-300);
}
.versus__q svg { flex: none; }

.versus__arrow {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 0;
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .04em; color: var(--orange-300);
}

/* Bitasis: kazanım bazlı eksik + nasıl çalışılacağı */
.versus__card--new { background: var(--white); border: 1.5px solid var(--orange-300); box-shadow: 0 24px 54px rgba(8,32,63,.45); }
.versus__card--new .versus__meta { color: var(--ink-faint); }
.versus__label {
  margin: 2px 0 8px; font-family: var(--font-display); font-weight: 700; font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint);
}
.versus__gaps { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.versus__gaps li { display: grid; grid-template-columns: minmax(0, 1fr) 70px 34px; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--navy); }
.versus__gaps b { position: relative; height: 6px; border-radius: 6px; background: var(--bg-blue-200); overflow: hidden; }
.versus__gaps b::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: 6px; background: var(--c); }
.versus__gaps em { font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 11.5px; color: var(--c); text-align: right; }
.versus__gaps .is-low { --c: var(--status-acil); }
.versus__gaps .is-mid { --c: var(--status-dikkat); }
.versus__plan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.versus__plan li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px;
  background: var(--bg-blue); border: 1px solid var(--bg-blue-200); border-radius: 9px;
  padding: 7px 10px; font-size: 12.5px; color: var(--navy);
}
.versus__day { flex: none; width: 26px; font-family: var(--font-display); font-weight: 700; font-size: 11px; color: var(--orange-700); }
.versus__plan em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--ink-faint); white-space: nowrap; }
.versus__tip {
  flex: 1 0 100%; display: flex; gap: 7px; margin-top: 3px; padding: 8px 10px;
  background: var(--bg-orange); border-left: 2px solid var(--orange); border-radius: 0 7px 7px 0;
  font-size: 11.5px; line-height: 1.45; color: var(--ink-soft);
}
.versus__tip svg { flex: none; margin-top: 2px; color: var(--orange); }
@media (max-width: 480px) {
  .versus__card { padding: 14px; }
  .versus__gaps li { grid-template-columns: minmax(0, 1fr) 52px 32px; }
}

/* --- Veri güvenliği --- */
.security .diamond { left: -140px; bottom: -180px; width: 420px; height: 420px; opacity: .14; }
.security__grid { --min: 300px; gap: clamp(28px, 4vw, 52px); align-items: start; }
.security__title { font-size: calc(clamp(32px, 4.6vw, 56px) - 19px); line-height: 1.06; letter-spacing: -.015em; }
.security .lead { max-width: 52ch; }
.kvkk-chip {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 24px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,176,122,.45);
  color: var(--white); font-family: var(--font-display); font-weight: 700;
  font-size: 12.5px; letter-spacing: .04em; padding: 11px 18px; border-radius: var(--radius-md);
}
.kvkk-chip svg { flex: none; }
.security__cards { display: flex; flex-direction: column; gap: 12px; }

/* --- Sohbet botu karşılaştırması --- */
.compare__intro { margin-bottom: 28px; }
.compare__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; padding: 16px 0; border-top: 1px solid var(--line); }
.compare__row--head { padding: 0 0 4px; border-top: none; }
.compare__head { font-family: var(--font-display); font-weight: 800; font-size: 13.5px; color: var(--ink-faint); }
.compare__head--us { color: var(--navy); }
.compare__q { grid-column: 1 / -1; font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: .1em; color: var(--orange); }
.compare__cell { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.compare__cell--us { color: var(--navy); font-weight: 600; }
.compare__cell .mark { flex: none; color: var(--status-acil); }
.compare__cell--us .mark { color: var(--orange); }

/* --- İki sütunlu bölüm başlığı (başlık solda, açıklama sağda) --- */
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(28px, 5vw, 72px); align-items: end; }
.section-head .h2 { max-width: 20ch; }
.section-head .lead { margin-top: 0; }
@media (max-width: 900px) {
  .section-head { grid-template-columns: minmax(0, 1fr); }
}

/* --- Kimler kullanır --- */
.roles-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: clamp(30px, 4vw, 44px); }
.role {
  grid-column: span 2;
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(20px, 2.2vw, 26px);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.role:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--bg-orange-200); }
.role--wide { grid-column: span 3; }
.role__top { display: flex; align-items: center; gap: 14px; }
.role__icon {
  flex: none; width: 46px; height: 46px; border-radius: 12px;
  background: var(--navy); color: var(--orange-300);
  display: flex; align-items: center; justify-content: center;
}
.role__group { display: block; font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin-bottom: 3px; }
.role__title { font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 1.2; color: var(--navy); }
.role--wide .role__title { font-size: 20px; }
.role__desc { margin-top: 16px; font-size: 14.5px; line-height: 1.58; color: var(--ink-soft); }
.role__list { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.role__list li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.5; color: var(--navy); font-weight: 600; }
.role__list li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--bg-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6600' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.role__scope {
  margin-top: auto; padding-top: 18px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
}
.role__scope span { font-size: 12px; color: var(--ink-faint); }
.role__scope strong {
  font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--navy);
  background: var(--bg-blue); border: 1px solid var(--bg-blue-200); border-radius: var(--radius-pill); padding: 5px 11px;
}
@media (max-width: 900px) {
  .roles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role, .role--wide { grid-column: span 1; }
  .role:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .roles-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .role, .role:hover { transition: none; transform: none; }
}

/* --- Öğrenci-veli, neden --- */
.split { --min: 290px; gap: clamp(28px, 4vw, 52px); align-items: center; }
.split .h2 { font-size: clamp(26px, 3.2vw, 38px); }
.split__cards { --min: 220px; gap: 14px; margin-top: 26px; }
.split__cards .card { padding: 20px; }
.app-badges { margin-top: 28px; }
.app-badges__note {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 14px;
}
.live-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--status-yolunda-bg); color: var(--status-yolunda);
  font-family: var(--font-display); font-weight: 800; font-size: 10.5px; letter-spacing: .12em; line-height: 1;
  padding: 6px 11px 6px 9px; border-radius: var(--radius-pill);
}
.live-pill__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--status-yolunda); }
.live-pill__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--status-yolunda); animation: live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse { from { transform: scale(1); opacity: .6; } to { transform: scale(2.6); opacity: 0; } }
.app-badges__list { display: flex; flex-wrap: wrap; gap: 12px; }
.store-badge {
  display: inline-flex; align-items: center; gap: 12px;
  min-width: 184px; padding: 11px 22px 11px 16px;
  background: #000; color: var(--white);
  border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  box-shadow: 0 10px 24px rgba(13,48,99,.22);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.store-badge:hover {
  color: var(--white); background: #111;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(13,48,99,.3), 0 0 0 3px rgba(255,102,0,.35);
}
.store-badge:active { transform: translateY(-1px); }
.store-badge__logo { flex: none; display: block; }
.store-badge__text { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.store-badge__small { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.78); }
.store-badge__big { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.01em; }
@media (max-width: 420px) {
  .store-badge { flex: 1 1 100%; justify-content: center; }
}
.split__phones { display: flex; justify-content: center; gap: 16px; }
.split__phones .phone { width: min(240px, 42vw); aspect-ratio: 9 / 19; border-radius: 28px; box-shadow: 0 22px 50px rgba(13,48,99,.18); }
.split__phones .phone:last-child { margin-top: 34px; }

/* --- Neden Bitasis --- */
.why-story {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px clamp(32px, 6vw, 88px); align-items: start;
}
.why-story__head .h2 { max-width: 14ch; }
.why-story__body { border-left: 3px solid var(--orange); padding-left: clamp(20px, 3vw, 36px); }
.why-story__lead {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(20px, 2.2vw, 27px); line-height: 1.3; color: var(--navy); text-wrap: pretty;
}
.why-story__body p + p { margin-top: 16px; }
.why-story__body p:not(.why-story__lead) { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.75; color: var(--ink-soft); max-width: 60ch; }
.why-story__body strong {
  font-weight: 700; color: var(--navy);
  background: linear-gradient(transparent 62%, var(--bg-orange-200) 62%);
}
@media (max-width: 860px) {
  .why-story { grid-template-columns: minmax(0, 1fr); }
}

.why-banner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px;
  margin-top: clamp(36px, 5vw, 56px); padding: clamp(26px, 3.4vw, 40px);
  background: var(--navy); border-radius: var(--radius-lg);
}
.why-banner .diamond { right: -90px; top: -120px; width: 240px; height: 240px; opacity: .14; }
.why-banner__text {
  position: relative; flex: 1 1 360px; max-width: 34ch;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(19px, 2vw, 25px); line-height: 1.3;
  color: var(--white); text-wrap: pretty;
}
.why-banner__text span { color: var(--orange-300); }
.why-banner__actions { position: relative; flex: none; display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 760px) {
  .why-banner__actions { flex: 1 1 100%; }
  .why-banner__actions .btn { flex: 1 1 auto; }
}

/* --- Paketler --- */
.plans { --min: 280px; gap: 18px; margin-top: 34px; }
.plan {
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg); padding: clamp(22px, 2.6vw, 30px);
  font-size: 14.5px; line-height: 1.6;
}
.plan--featured { background: var(--white); border: 2px solid var(--orange); box-shadow: 0 8px 24px rgba(255,102,0,.14); }
.plan--alt { background: var(--bg-blue); border: 1px solid var(--bg-blue-200); }
.plan__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.plan__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.2vw, 26px); color: var(--navy); }
.plan__badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; line-height: 1;
  padding: 5px 11px; border-radius: var(--radius-pill);
}
.plan__badge--accent { background: var(--orange); color: var(--white); }
.plan__badge--muted { background: var(--white); border: 1px solid var(--line); color: var(--navy-400); }
.plan__desc { margin-bottom: 16px; }
.checklist { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.checklist li::before { content: "✓"; color: var(--orange); font-weight: 700; flex: none; }
.plan .btn { margin-top: auto; padding: 14px 24px; }

/* --- SSS --- */
.faq .h2 { margin-bottom: 30px; }
.faq__list { display: flex; flex-direction: column; gap: 10px; }
.faq__item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px 20px; }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--navy);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__plus { color: var(--orange); font-size: 22px; line-height: 1; transition: transform .2s ease; flex: none; }
.faq__item[open] .faq__plus { transform: rotate(45deg); }
.faq__item p { margin-top: 12px; font-size: 14.5px; line-height: 1.62; }

/* --- İletişim --- */
.contact .diamond { right: -150px; top: -170px; width: 440px; height: 440px; opacity: .14; }
.contact__grid { --min: 300px; gap: clamp(28px, 4vw, 52px); align-items: start; }
.contact .lead { max-width: 48ch; }
.contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 26px; }
.contact__actions .btn--whatsapp { padding: 14px 24px; }
.contact__note { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-muted-on-navy); }
.contact__note .live-pill__dot { background: #25D366; }
.contact__note .live-pill__dot::after { background: #25D366; }
.contact__cards {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.contact__card {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; align-items: center;
  padding: 14px 16px; border-radius: var(--radius-md);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  transition: background-color .15s ease, border-color .15s ease;
}
.contact__card:hover { background: rgba(255,255,255,.08); border-color: rgba(255,176,122,.35); }
.contact__card--wide { grid-column: 1 / -1; }
.contact__icon {
  grid-row: span 2; width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,176,122,.12); color: var(--orange-300);
  display: flex; align-items: center; justify-content: center;
}
.contact__label { font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted-on-navy); }
.contact__value { margin-top: 2px; font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--white); overflow-wrap: anywhere; }
a.contact__value:hover { color: var(--orange-300); }
@media (max-width: 480px) {
  .contact__cards { grid-template-columns: minmax(0, 1fr); }
  .contact__actions .btn--whatsapp { flex: 1 1 100%; }
}

.form-card { background: var(--white); border-radius: var(--radius-lg); padding: clamp(22px, 2.8vw, 32px); box-shadow: 0 24px 60px rgba(8,32,63,.35); }
.form-card__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(19px, 2vw, 23px); color: var(--navy); margin-bottom: 4px; }
.form-card__sub { margin-bottom: 20px; font-size: 14px; line-height: 1.55; color: var(--ink-faint); }
.form-grid { --min: 180px; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--navy); }
.field + .field, .form-grid + .field { margin-top: 14px; }
.form-grid .field + .field { margin-top: 0; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 11px 13px; font-size: 14px; font-weight: 400; color: var(--ink); background: var(--white);
  outline: none; transition: border-color .15s ease;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--orange); }
.field input[aria-invalid="true"] { border-color: var(--status-acil); }
.form-card .btn[type="submit"] { width: 100%; margin-top: 18px; padding: 15px 24px; }
.form-card .btn[disabled] { opacity: .7; cursor: progress; }
.form-note { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--ink-faint); }
.form-error { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--status-acil); }
.form-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-success { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.form-success__icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--bg-orange); color: var(--orange);
  display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700;
}
.form-success__title { font-family: var(--font-display); font-weight: 800; font-size: 21px; color: var(--navy); }
.form-success p { font-size: 14.5px; line-height: 1.6; }

/* --- Alt bilgi --- */
.footer { background: var(--navy-900); padding: clamp(32px, 4vw, 48px) clamp(20px, 4vw, 40px); }
.footer__grid { --min: 220px; gap: 28px; align-items: start; }
.footer__logo { height: 26px; width: auto; display: block; }
.footer__about { margin-top: 14px; font-size: 13.5px; line-height: 1.6; color: var(--text-muted-on-navy); max-width: 34ch; }
.footer__maker { display: flex; align-items: center; gap: 11px; margin-top: 20px; }
.footer__maker-label { font-size: 10.5px; letter-spacing: .1em; font-family: var(--font-display); font-weight: 700; color: var(--text-muted-on-navy); }
.footer__maker-logo { display: inline-flex; align-items: center; background: var(--white); border-radius: 6px; padding: 7px 11px; }
.footer__maker-logo img { height: 15px; width: auto; display: block; }
a.footer__maker-logo { transition: box-shadow .15s ease, transform .15s ease; }
a.footer__maker-logo:hover { transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(255,176,122,.45); }
.footer__bottom a { color: inherit; border-bottom: 1px solid rgba(185,198,224,.35); }
.footer__bottom a:hover { color: var(--white); border-bottom-color: var(--orange-300); }
.footer__heading { font-family: var(--font-display); font-weight: 800; font-size: 10.5px; letter-spacing: .14em; color: var(--orange-300); margin-bottom: 12px; }
.footer__links { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--text-muted-on-navy); }
.footer__bottom {
  max-width: 1180px; margin: 28px auto 0; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  font-size: 12.5px; color: var(--text-muted-on-navy);
}

/* --- Sisteme giriş penceresi --- */
.login-dialog {
  width: calc(100% - 48px); max-width: 520px;
  padding: clamp(26px, 3.5vw, 40px); border: none;
  border-radius: var(--radius-lg); background: var(--white); color: var(--ink-soft);
  box-shadow: 0 24px 60px rgba(13,48,99,.34);
}
.login-dialog::backdrop { background: rgba(13,48,99,.62); }
.login-dialog__close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-blue); border: none; border-radius: 999px; cursor: pointer; color: var(--navy);
}
.login-dialog__close:hover { background: var(--line); }
.login-dialog__eyebrow { font-family: var(--font-display); font-weight: 800; font-size: 10.5px; letter-spacing: .14em; color: var(--orange); margin-bottom: 10px; }
.login-dialog h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(21px, 2vw, 26px); line-height: 1.2; letter-spacing: -.01em; color: var(--navy); }
.login-dialog__text { margin: 10px 0 24px; font-size: 14px; line-height: 1.6; }
.schools { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.school {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--navy);
}
.school:hover { border-color: var(--orange); background: var(--bg-orange); color: var(--navy); }
.school__initial {
  flex: none; width: 38px; height: 38px; border-radius: 999px;
  background: var(--navy); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
}
.school__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.school__name { font-family: var(--font-display); font-weight: 800; font-size: 15.5px; color: var(--navy); }
.school__host { font-size: 12.5px; color: var(--ink-faint); }
.school svg { flex: none; margin-left: auto; }
.login-app {
  margin-top: 18px; padding: 16px 18px;
  background: var(--bg-blue); border: 1px solid var(--bg-blue-200); border-radius: var(--radius-md);
}
.login-app__head { display: flex; align-items: flex-start; gap: 12px; }
.login-app__icon {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: var(--bg-orange); color: var(--orange);
  display: flex; align-items: center; justify-content: center;
}
.login-app__title { font-family: var(--font-display); font-weight: 800; font-size: 14.5px; line-height: 1.3; color: var(--navy); }
.login-app__text { margin-top: 3px; font-size: 13px; line-height: 1.5; }
.login-app__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.store-badge--sm { min-width: 0; flex: 1 1 150px; justify-content: center; gap: 10px; padding: 8px 14px; border-radius: 10px; box-shadow: none; }
.store-badge--sm:hover { transform: translateY(-2px); box-shadow: 0 0 0 3px rgba(255,102,0,.35); }
.store-badge--sm .store-badge__small { font-size: 9.5px; }
.store-badge--sm .store-badge__big { font-size: 16px; }
.login-dialog__foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; }
.login-dialog__foot a { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Paketler — kurulum takvimi notu */
.plan__time {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 18px 0 20px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.55; color: var(--ink-faint);
}
.plan__time svg { flex: none; margin-top: 2px; color: var(--orange); }

/* İletişim — ikincil açıklama satırı */
.lead--sm { font-size: 15px; margin-top: 14px; }