/* ==========================================================================
   Ezberro — Faz 3-H UI cilasi. head.php'de style.css'ten SONRA yuklenir.
   NiceAdmin temasiyla (primary #4154f1) uyumlu; yalniz ek/override dokunuslar.
   style.css'e DOKUNULMAZ.
   ========================================================================== */

:root {
  --ez-primary: #4154f1;
  --ez-tint: #f6f9ff;
  --ez-muted: #899bbd;
}

/* Kart kose yuvarlakligi tutarliligi */
.card {
  border-radius: 12px;
}

/* flex icinde text-truncate calissin diye (min-width:0) */
.min-w-0 {
  min-width: 0;
}

/* ---------------- study.php: tanitim (intro) resim alani ---------------- */
/* Resmi olmayan kelimede de alan AYNEN gorunur (kullanici karari): soluk ikon. */
#intro_img_wrap {
  max-width: 320px;
  width: 100%;
  margin: 0 auto 1rem;
  aspect-ratio: 4 / 3;
  background: #f1f3f7;
  border-radius: 0.5rem;                 /* rounded-3 esdegeri */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

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

.intro-img-icon {
  font-size: 72px;
  color: #cdd5e1;                         /* soluk gri ikon */
  line-height: 1;
}

/* ---------------- unit.php / stats.php: modul satir kartlari ---------------- */
.module-list .module-row {
  padding: 14px 4px;
  border: 0;
  border-bottom: 1px solid #f1f3f7;
  transition: background 0.15s;
}

.module-list .module-row:last-child {
  border-bottom: 0;
}

a.module-row {
  color: inherit;
  text-decoration: none;
}

a.module-row:hover {
  background: var(--ez-tint);
}

.module-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: var(--ez-tint);
  border-radius: 10px;
}

.module-desc {
  margin-bottom: 6px;
}

.module-progress {
  height: 6px;
  border-radius: 4px;
}

.module-status {
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

.unit-overall-progress {
  height: 12px;
  border-radius: 6px;
}

/* ---------------- index.php: kontrol paneli kartlari ---------------- */
.dash-card .card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ez-muted);
}

.dash-card .display-4 {
  color: #012970;
  line-height: 1.1;
}

.dash-card-muted {
  opacity: 0.75;
}

.onboard-pair {
  transition: transform 0.12s;
}

.onboard-pair:hover {
  transform: translateY(-2px);
}

.onboard-flags {
  font-size: 30px;
  line-height: 1;
}

.onboard-arrow {
  color: var(--ez-muted);
  font-size: 22px;
  vertical-align: middle;
}

/* ---------------- Public (auth) kart sayfalari ---------------- */
.auth-card {
  max-width: 440px;
  margin-top: 4vh;
  margin-bottom: 4vh;
  border: 0;
}

.auth-brand {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--ez-primary);
  margin-bottom: 4px;
}

/* ---------------- Tehlikeli bolge (stats sifirlama / profil silme) ---------------- */
.danger-zone {
  border-width: 1px;
}

/* ---------------- header.php: logo + bagimsiz dil dropdown'i ---------------- */
/* Yeni Ezberro isareti biraz daha buyuk dursun (tema .logo img'yi 26px'e kirpar) */
.logo img {
  max-height: 28px;
}

.header-nav .nav-lang {
  color: #012970;
  font-weight: 600;
  font-size: 15px;
  padding: 8px 10px;
  margin-right: 6px;
  white-space: nowrap;
}

.header-nav .nav-lang:hover {
  color: var(--ez-primary);
}

.header-nav .nav-lang-flag {
  font-size: 18px;
  line-height: 1;
}

.header-nav .nav-lang-caret {
  font-size: 10px;
  color: var(--ez-muted);
}

/* ---------------- Public (auth) kart sayfalari: logo ---------------- */
.auth-logo {
  height: 40px;
  width: auto;
}

/* ---------------- Landing (girissiz karsilama) ---------------- */
.landing-body {
  background: linear-gradient(180deg, var(--ez-tint) 0%, #ffffff 60%);
  min-height: 100vh;
}

.landing-hero {
  max-width: 960px;
  margin: 0 auto;
  padding: 2.5rem 1rem 4rem;
}

.landing-logo {
  height: 84px;
  width: auto;
}

.landing-title {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--ez-primary);
  margin-bottom: 0.5rem;
}

.landing-tagline {
  max-width: 560px;
}

.landing-feature {
  padding: 1.75rem 1.25rem;
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(1, 41, 112, 0.05);
}

.landing-feature-icon {
  font-size: 2.4rem;
  line-height: 1;
  color: var(--ez-primary);
  margin-bottom: 0.75rem;
}

/* ==========================================================================
   Faz 3-O: Sosyal login butonlari + "veya" ayraci (login.php / register.php)
   Marka renkleri: Google beyaz/kenarlikli, Facebook #1877F2, X siyah.
   ========================================================================== */
.oauth-sep {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--ez-muted);
  font-size: 0.85rem;
  margin: 1.25rem 0 0.9rem;
}
.oauth-sep::before,
.oauth-sep::after {
  content: "";
  flex: 1;
  border-top: 1px solid #e4e9f2;
}
.oauth-sep span {
  padding: 0 0.75rem;
}

.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-weight: 600;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  border: 1px solid transparent;
}
.oauth-btn i,
.oauth-btn .oauth-x-logo {
  font-size: 1.05rem;
  line-height: 1;
}

/* Google — beyaz, ince kenarlikli (marka kilavuzu) */
.oauth-google {
  background: #ffffff;
  color: #3c4043;
  border-color: #dadce0;
}
.oauth-google:hover {
  background: #f7f8f8;
  color: #3c4043;
  border-color: #d2d5da;
}
.oauth-google i {
  color: #4285f4;
}

/* Facebook — #1877F2 */
.oauth-facebook {
  background: #1877f2;
  color: #ffffff;
}
.oauth-facebook:hover {
  background: #1465d8;
  color: #ffffff;
}

/* X — siyah */
.oauth-x {
  background: #000000;
  color: #ffffff;
}
.oauth-x:hover {
  background: #1a1a1a;
  color: #ffffff;
}

/* ==========================================================================
   Faz 3-S: Gorunmez bot korumasi — honeypot alani.
   display:none KULLANILMAZ (basit botlar onu atlar). Ekran disina it, klavye
   erisimini kes; tarayici doldurmaz, botlar doldurur -> FAIL.
   ========================================================================== */
.hp-wrap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}