/* ============================================================
   SAMA Isfahan Boys High School
   Design System v1.1
   Methyl Blue + White + Turquoise
   RTL | Persian | Responsive
   ============================================================ */


/* ============================================================
   ROOT VARIABLES
   ============================================================ */

:root{
  --blue-950:#04122e;
  --blue-900:#071f4d;
  --blue-800:#0a2f6e;
  --blue-700:#0b3d91;
  --blue-600:#1550b8;
  --blue-500:#2563d8;

  --blue-100:#dbe7fb;
  --blue-50:#eef4fd;

  --turq:#14b8a6;
  --turq-soft:#ccf7f0;

  --ink:#101c30;
  --body:#33415c;
  --muted:#64748f;
  --line:#e2e9f4;

  --bg:#f5f8fd;
  --card:#ffffff;

  --red:#dc2626;
  --red-soft:#fee2e2;

  --green:#16a34a;
  --green-soft:#dcfce7;

  --amber:#d97706;
  --amber-soft:#fef3c7;

  --radius:16px;
  --radius-sm:10px;
  --radius-lg:24px;

  --shadow-sm:
    0 2px 10px rgba(7,31,77,.07);

  --shadow:
    0 10px 32px rgba(7,31,77,.10);

  --shadow-lg:
    0 24px 64px rgba(7,31,77,.16);

  --header-h:76px;
  --topbar-h:40px;

  --font:
    "Vazirmatn",
    "IRANSans",
    "B Nazanin",
    Tahoma,
    Arial,
    sans-serif;
}


/* ============================================================
   RESET
   ============================================================ */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--body);
  line-height:2;
  font-size:15.5px;
  overflow-x:hidden;
}

h1,
h2,
h3,
h4,
h5{
  color:var(--ink);
  line-height:1.7;
  font-weight:800;
}

a{
  color:var(--blue-700);
  text-decoration:none;
  transition:.2s;
}

a:hover{
  color:var(--blue-500);
}

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

button,
input,
select,
textarea{
  font-family:inherit;
}

::selection{
  background:var(--blue-700);
  color:#fff;
}

:focus-visible{
  outline:3px solid var(--turq);
  outline-offset:2px;
  border-radius:6px;
}


/* ============================================================
   GLOBAL LAYOUT
   ============================================================ */

.container{
  width:min(1200px,92%);
  margin-inline:auto;
}

.section{
  padding:64px 0;
}

.section-alt{
  background:#fff;
}

.center{
  text-align:center;
}

.mt{
  margin-top:26px;
}


/* ============================================================
   EYEBROW
   ============================================================ */

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;

  font-size:13px;
  font-weight:700;

  color:var(--blue-700);

  background:var(--blue-50);

  border:1px solid var(--blue-100);

  padding:6px 16px;

  border-radius:100px;

  margin-bottom:14px;
}

.eyebrow::before{
  content:"";

  width:8px;
  height:8px;

  border-radius:50%;

  background:var(--turq);
}


/* ============================================================
   SECTION HEAD
   ============================================================ */

.sec-head{
  margin-bottom:36px;
}

.sec-head h2{
  font-size:clamp(22px,3.4vw,32px);
  margin-bottom:6px;
}

.sec-head p{
  color:var(--muted);
  max-width:640px;
}

.sec-head.center{
  text-align:center;
}

.sec-head.center p{
  margin-inline:auto;
}

.sec-head.split{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  font-family:inherit;
  font-weight:700;
  font-size:15px;

  cursor:pointer;

  border:1.5px solid transparent;

  padding:12px 28px;

  border-radius:14px;

  transition:.25s;

  line-height:1.8;

  white-space:nowrap;
}

.btn svg{
  width:19px;
  height:19px;
  flex:none;
}

.btn-primary{
  background:
    linear-gradient(
      135deg,
      var(--blue-800),
      var(--blue-600)
    );

  color:#fff;

  box-shadow:
    0 8px 22px rgba(11,61,145,.32);
}

.btn-primary:hover{
  transform:translateY(-2px);

  box-shadow:
    0 14px 30px rgba(11,61,145,.4);

  color:#fff;
}

.btn-white{
  background:#fff;
  color:var(--blue-800);
  box-shadow:var(--shadow-sm);
}

.btn-white:hover{
  transform:translateY(-2px);
  color:var(--blue-600);
}

.btn-outline{
  border-color:rgba(255,255,255,.55);
  color:#fff;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
}

.btn-outline:hover{
  background:rgba(255,255,255,.18);
  color:#fff;
}

.btn-ghost{
  border-color:var(--line);
  color:var(--blue-800);
  background:#fff;
}

.btn-ghost:hover{
  border-color:var(--blue-600);
  color:var(--blue-600);
}

.btn-turq{
  background:var(--turq);
  color:#fff;

  box-shadow:
    0 8px 22px rgba(20,184,166,.32);
}

.btn-turq:hover{
  background:#0ea795;
  color:#fff;
  transform:translateY(-2px);
}

.btn-sm{
  padding:8px 18px;
  font-size:13.5px;
  border-radius:10px;
}

.btn-block{
  width:100%;
}

.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}


/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */

.announce{
  background:
    linear-gradient(
      90deg,
      #7f1d1d,
      #b91c1c,
      #7f1d1d
    );

  color:#fff;

  font-size:13.5px;
  font-weight:600;

  padding:9px 0;

  position:relative;
  z-index:60;
}

.announce .container{
  display:flex;
  align-items:center;
  gap:12px;
}

.announce .badge-urgent{
  background:#fff;
  color:#b91c1c;

  font-weight:800;
  font-size:12px;

  padding:3px 12px;

  border-radius:100px;

  flex:none;

  animation:pulse 1.8s infinite;
}

.announce a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:4px;
}

.announce .marquee{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

@keyframes pulse{
  0%,
  100%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.07);
  }
}


/* ============================================================
   TOPBAR
   ============================================================ */

.topbar{
  background:var(--blue-950);
  color:#c9d6ee;

  font-size:13px;

  min-height:var(--topbar-h);

  display:flex;
  align-items:center;

  position:relative;
  z-index:55;
}

.topbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:14px;

  flex-wrap:wrap;

  padding-top:6px;
  padding-bottom:6px;
}

.topbar .tb-group{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.topbar a{
  color:#e6edf9;
}

.topbar a:hover{
  color:#fff;
}

.tb-item{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.tb-item svg{
  width:15px;
  height:15px;
  opacity:.85;
}

.status-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;

  font-weight:700;
  font-size:12.5px;

  padding:4px 14px;

  border-radius:100px;

  background:rgba(255,255,255,.08);

  border:1px solid rgba(255,255,255,.16);
}

.status-dot{
  width:9px;
  height:9px;

  border-radius:50%;

  flex:none;
}

.status-open .status-dot{
  background:#22e07a;

  box-shadow:
    0 0 0 4px rgba(34,224,122,.22);

  animation:pulse 2s infinite;
}

.status-closed .status-dot{
  background:#ff5d5d;

  box-shadow:
    0 0 0 4px rgba(255,93,93,.2);
}

.status-open{
  color:#7dffa9;
}

.status-closed{
  color:#ffb4b4;
}


/* ============================================================
   HEADER / NAV
   ============================================================ */

.site-header{
  position:sticky;
  top:0;
  z-index:50;

  background:rgba(255,255,255,.92);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  border-bottom:1px solid var(--line);

  box-shadow:
    0 4px 24px rgba(7,31,77,.06);
}

.header-in{
  display:flex;
  align-items:center;

  gap:18px;

  min-height:var(--header-h);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;

  flex:none;
}

.brand-logo{
  width:52px;
  height:52px;

  border-radius:15px;

  display:grid;
  place-items:center;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      var(--blue-900),
      var(--blue-600)
    );

  box-shadow:
    0 8px 20px rgba(11,61,145,.35);

  font-weight:900;
  font-size:22px;

  position:relative;

  overflow:hidden;
}

.brand-logo::after{
  content:"";

  position:absolute;

  inset:auto -30% -45% auto;

  width:70%;
  height:120%;

  background:
    linear-gradient(
      180deg,
      rgba(20,184,166,.5),
      transparent
    );

  transform:rotate(18deg);
}

.brand-txt{
  line-height:1.5;
}

.brand-txt b{
  display:block;

  color:var(--ink);

  font-size:16.5px;

  font-weight:800;
}

.brand-txt span{
  font-size:12px;
  color:var(--muted);
}

.main-nav{
  display:flex;
  align-items:center;
  gap:2px;

  margin-inline-start:auto;
}

.nav-link{
  display:inline-flex;
  align-items:center;
  gap:5px;

  padding:11px 13px;

  border-radius:10px;

  color:var(--ink);

  font-weight:700;
  font-size:14.5px;

  position:relative;
}

.nav-link:hover,
.nav-link.active{
  color:var(--blue-700);
  background:var(--blue-50);
}

.nav-link .caret{
  width:14px;
  height:14px;
  transition:.25s;
}

.has-drop{
  position:relative;
}

.has-drop:hover .caret,
.has-drop:focus-within .caret{
  transform:rotate(180deg);
}

.dropdown{
  position:absolute;

  top:calc(100% + 10px);
  right:0;

  min-width:250px;

  background:#fff;

  border:1px solid var(--line);

  border-radius:16px;

  box-shadow:var(--shadow-lg);

  padding:10px;

  opacity:0;
  visibility:hidden;

  transform:translateY(10px);

  transition:.25s;
}

.has-drop:hover .dropdown,
.has-drop:focus-within .dropdown{
  opacity:1;
  visibility:visible;
  transform:none;
}

.dropdown a{
  display:flex;
  align-items:center;
  gap:10px;

  padding:11px 14px;

  border-radius:10px;

  color:var(--body);

  font-weight:600;
  font-size:14px;
}

.dropdown a svg{
  width:17px;
  height:17px;

  color:var(--blue-600);

  flex:none;
}

.dropdown a:hover{
  background:var(--blue-50);
  color:var(--blue-800);
}

.header-actions{
  display:flex;
  align-items:center;
  gap:10px;

  margin-inline-start:6px;
}

.icon-btn{
  width:44px;
  height:44px;

  border-radius:12px;

  border:1.5px solid var(--line);

  background:#fff;

  display:grid;
  place-items:center;

  cursor:pointer;

  color:var(--blue-800);

  transition:.2s;
}

.icon-btn:hover{
  border-color:var(--blue-600);
  color:var(--blue-600);
  box-shadow:var(--shadow-sm);
}

.icon-btn svg{
  width:20px;
  height:20px;
}

.burger{
  display:none;
}

.cta-register{
  background:
    linear-gradient(
      135deg,
      var(--blue-800),
      var(--blue-600)
    );

  color:#fff!important;

  padding:11px 24px;

  border-radius:12px;

  font-weight:800;
  font-size:14.5px;

  box-shadow:
    0 8px 20px rgba(11,61,145,.3);
}

.cta-register:hover{
  transform:translateY(-2px);
  color:#fff!important;
}


/* ============================================================
   MOBILE DRAWER
   ============================================================ */

.drawer{
  position:fixed;
  inset:0;

  z-index:100;

  visibility:hidden;
}

.drawer.open{
  visibility:visible;
}

.drawer-bg{
  position:absolute;
  inset:0;

  background:rgba(4,18,46,.55);

  backdrop-filter:blur(3px);

  opacity:0;

  transition:.3s;
}

.drawer.open .drawer-bg{
  opacity:1;
}

.drawer-panel{
  position:absolute;

  top:0;
  bottom:0;
  right:0;

  width:min(340px,88vw);

  background:#fff;

  transform:translateX(105%);

  transition:
    .35s cubic-bezier(.2,.8,.25,1);

  display:flex;
  flex-direction:column;

  box-shadow:var(--shadow-lg);
}

.drawer.open .drawer-panel{
  transform:none;
}

.drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:18px;

  border-bottom:1px solid var(--line);
}

.drawer-body{
  overflow-y:auto;

  padding:14px 18px 30px;

  flex:1;
}

.d-link{
  display:flex;
  align-items:center;
  justify-content:space-between;

  width:100%;

  padding:13px 6px;

  font-weight:700;
  color:var(--ink);
  font-size:15px;

  border-bottom:1px dashed var(--line);

  background:none;

  border-top:none;
  border-left:none;
  border-right:none;

  font-family:inherit;

  cursor:pointer;

  text-align:right;
}

.d-link:hover{
  color:var(--blue-700);
}

.d-sub{
  max-height:0;

  overflow:hidden;

  transition:max-height .3s ease;

  background:var(--blue-50);

  border-radius:12px;

  margin:0;
}

.d-sub.open{
  max-height:400px;
  margin:6px 0 10px;
}

.d-sub a{
  display:block;

  padding:10px 18px;

  font-size:14px;

  color:var(--body);

  font-weight:600;
}

.d-sub a:hover{
  color:var(--blue-700);
}


/* ============================================================
   SEARCH OVERLAY
   ============================================================ */

.search-ov{
  position:fixed;
  inset:0;

  z-index:120;

  background:rgba(4,18,46,.72);

  backdrop-filter:blur(8px);

  display:flex;

  justify-content:center;

  padding:8vh 16px 16px;

  opacity:0;
  visibility:hidden;

  transition:.3s;
}

.search-ov.open{
  opacity:1;
  visibility:visible;
}

.search-box{
  width:min(680px,100%);

  height:fit-content;

  background:#fff;

  border-radius:20px;

  box-shadow:var(--shadow-lg);

  overflow:hidden;

  transform:translateY(-16px);

  transition:.3s;
}

.search-ov.open .search-box{
  transform:none;
}

.search-in{
  display:flex;
  align-items:center;
  gap:10px;

  padding:16px 20px;

  border-bottom:1px solid var(--line);
}

.search-in svg{
  width:22px;
  height:22px;

  color:var(--blue-600);

  flex:none;
}

.search-in input{
  flex:1;

  border:none;
  outline:none;

  font-family:inherit;

  font-size:16px;

  color:var(--ink);

  background:none;
}

.search-results{
  max-height:46vh;

  overflow-y:auto;

  padding:10px;
}

.sr-item{
  display:flex;
  gap:12px;
  align-items:center;

  padding:12px;

  border-radius:12px;

  color:var(--body);
}

.sr-item:hover{
  background:var(--blue-50);
}

.sr-item .sr-ic{
  width:42px;
  height:42px;

  flex:none;

  border-radius:12px;

  display:grid;
  place-items:center;

  background:var(--blue-50);

  color:var(--blue-700);
}

.sr-item .sr-ic svg{
  width:20px;
  height:20px;
}

.sr-item b{
  display:block;
  color:var(--ink);
  font-size:14.5px;
}

.sr-item small{
  color:var(--muted);
  font-size:12.5px;
}

.sr-empty{
  padding:28px;

  text-align:center;

  color:var(--muted);
}


/* ============================================================
   HERO
   ============================================================ */

.hero{
  position:relative;

  color:#fff;

  overflow:hidden;

  background:var(--blue-950);

  min-height:560px;

  display:flex;
  align-items:center;
}

.hero-bg{
  position:absolute;
  inset:0;
}

.hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero-bg::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      -90deg,
      rgba(4,18,46,.93) 20%,
      rgba(7,31,77,.72) 55%,
      rgba(11,61,145,.35)
    );
}

.hero-glow{
  position:absolute;

  width:520px;
  height:520px;

  border-radius:50%;

  left:-160px;
  top:-160px;

  background:
    radial-gradient(
      circle,
      rgba(20,184,166,.22),
      transparent 65%
    );

  pointer-events:none;
}

.hero-in{
  position:relative;
  z-index:2;

  padding:84px 0;

  width:min(1200px,92%);

  margin-inline:auto;
}

.hero-badges{
  display:flex;

  gap:10px;

  flex-wrap:wrap;

  margin-bottom:20px;
}

.glass-chip{
  display:inline-flex;
  align-items:center;

  gap:8px;

  font-size:13px;
  font-weight:700;

  padding:7px 16px;

  border-radius:100px;

  color:#fff;

  background:rgba(255,255,255,.12);

  border:1px solid rgba(255,255,255,.22);

  backdrop-filter:blur(8px);
}

.glass-chip.turq{
  background:rgba(20,184,166,.2);
  border-color:rgba(20,184,166,.45);
}

.hero h1{
  color:#fff;

  font-size:clamp(28px,5vw,50px);

  font-weight:900;

  margin:6px 0 4px;
}

.hero .hero-sub{
  font-size:clamp(16px,2.4vw,21px);

  font-weight:600;

  color:#cfe0f8;

  margin-bottom:10px;
}

.hero .hero-slogan{
  font-size:clamp(15px,2vw,18px);

  color:#e8f0fc;

  max-width:620px;

  margin-bottom:28px;
}

.hero-btns{
  display:flex;

  gap:12px;

  flex-wrap:wrap;

  margin-bottom:34px;
}

.hero-meta{
  display:flex;

  gap:26px;

  flex-wrap:wrap;

  font-size:13.5px;

  color:#c9d6ee;
}

.hero-meta span{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.hero-meta svg{
  width:16px;
  height:16px;
}

.hero-wave{
  position:absolute;

  bottom:-2px;
  right:0;
  left:0;

  z-index:2;

  line-height:0;
}

.hero-wave svg{
  width:100%;
  height:70px;
}

.hero-side{
  position:relative;
  z-index:2;
}

.hero-card{
  background:rgba(255,255,255,.1);

  border:1px solid rgba(255,255,255,.2);

  backdrop-filter:blur(14px);

  border-radius:var(--radius-lg);

  padding:26px;

  max-width:360px;

  box-shadow:var(--shadow-lg);
}

.hero-card h3{
  color:#fff;
  font-size:17px;
  margin-bottom:14px;
}

.hero-grid{
  display:grid;

  grid-template-columns:1.5fr 1fr;

  gap:30px;

  align-items:center;
}


/* ============================================================
   PAGE HERO
   ============================================================ */

.page-hero{
  position:relative;

  background:
    linear-gradient(
      135deg,
      var(--blue-950),
      var(--blue-800) 70%,
      var(--blue-700)
    );

  color:#fff;

  overflow:hidden;

  padding:56px 0 68px;
}

.page-hero::before{
  content:"";

  position:absolute;

  width:480px;
  height:480px;

  border-radius:50%;

  left:-140px;
  top:-220px;

  background:
    radial-gradient(
      circle,
      rgba(20,184,166,.25),
      transparent 65%
    );
}

.page-hero::after{
  content:"";

  position:absolute;

  width:340px;
  height:340px;

  border-radius:50%;

  right:-100px;
  bottom:-200px;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.09),
      transparent 65%
    );
}

.page-hero h1{
  color:#fff;

  font-size:clamp(24px,4vw,36px);

  margin-bottom:8px;

  position:relative;

  z-index:2;
}

.page-hero p{
  color:#c9d6ee;

  max-width:640px;

  position:relative;

  z-index:2;
}

.breadcrumb{
  display:flex;

  align-items:center;

  gap:8px;

  font-size:13px;

  color:#a9bce0;

  margin-bottom:14px;

  position:relative;

  z-index:2;

  flex-wrap:wrap;
}

.breadcrumb a{
  color:#e6edf9;
}

.breadcrumb a:hover{
  color:#fff;
}

.breadcrumb svg{
  width:13px;
  height:13px;
}


/* ============================================================
   CARDS & GRIDS
   ============================================================ */

.grid{
  display:grid;
  gap:20px;
}

.g2{
  grid-template-columns:repeat(2,1fr);
}

.g3{
  grid-template-columns:repeat(3,1fr);
}

.g4{
  grid-template-columns:repeat(4,1fr);
}

.card{
  background:var(--card);

  border:1px solid var(--line);

  border-radius:var(--radius);

  padding:26px;

  box-shadow:var(--shadow-sm);

  transition:.3s;

  position:relative;
}

.card:hover{
  transform:translateY(-5px);

  box-shadow:var(--shadow);

  border-color:var(--blue-100);
}

.card h3{
  font-size:17px;
  margin-bottom:8px;
}

.card p{
  font-size:14.5px;
  color:var(--body);
}


/* ============================================================
   ICON WRAPPERS
   ============================================================ */

.ic-wrap{
  width:56px;
  height:56px;

  border-radius:16px;

  display:grid;
  place-items:center;

  margin-bottom:16px;

  background:
    linear-gradient(
      135deg,
      var(--blue-50),
      var(--blue-100)
    );

  color:var(--blue-700);
}

.ic-wrap svg{
  width:27px;
  height:27px;
}

.ic-wrap.turq{
  background:var(--turq-soft);
  color:#0d9488;
}

.ic-wrap.red{
  background:var(--red-soft);
  color:var(--red);
}

.ic-wrap.green{
  background:var(--green-soft);
  color:var(--green);
}

.ic-wrap.amber{
  background:var(--amber-soft);
  color:var(--amber);
}


/* ============================================================
   STAT CARDS
   ============================================================ */

.stat-card{
  background:#fff;

  border:1px solid var(--line);

  border-radius:var(--radius);

  padding:28px 22px;

  text-align:center;

  box-shadow:var(--shadow-sm);

  transition:.3s;

  position:relative;

  overflow:hidden;
}

.stat-card::before{
  content:"";

  position:absolute;

  top:0;
  right:0;
  left:0;

  height:4px;

  background:
    linear-gradient(
      90deg,
      var(--blue-700),
      var(--turq)
    );
}

.stat-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow);
}

.stat-card .ic-wrap{
  margin:0 auto 12px;
}

.stat-num{
  font-size:clamp(26px,3.4vw,36px);

  font-weight:900;

  color:var(--blue-800);

  line-height:1.4;
}

.stat-label{
  font-size:14px;

  color:var(--muted);

  font-weight:600;
}


/* ============================================================
   QUICK ACCESS
   ============================================================ */

.qa-grid{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:16px;
}

.qa-item{
  display:flex;

  align-items:center;

  gap:14px;

  background:#fff;

  border:1px solid var(--line);

  border-radius:var(--radius);

  padding:18px;

  transition:.25s;

  color:var(--ink);
}

.qa-item:hover{
  transform:translateY(-4px);

  box-shadow:var(--shadow);

  border-color:var(--blue-600);

  color:var(--blue-800);
}

.qa-item .ic-wrap{
  margin:0;

  width:50px;
  height:50px;

  flex:none;
}

.qa-item b{
  font-size:14.5px;
  display:block;
}

.qa-item small{
  color:var(--muted);
  font-size:12.5px;
}


/* ============================================================
   NEWS CARDS
   ============================================================ */

.news-card{
  background:#fff;

  border:1px solid var(--line);

  border-radius:var(--radius);

  overflow:hidden;

  box-shadow:var(--shadow-sm);

  transition:.3s;

  display:flex;

  flex-direction:column;
}

.news-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow);
}

.news-thumb{
  position:relative;

  aspect-ratio:16/9;

  overflow:hidden;

  background:var(--blue-50);
}

.news-thumb img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:.5s;
}

.news-card:hover .news-thumb img{
  transform:scale(1.06);
}

.news-cat{
  position:absolute;

  top:12px;
  right:12px;

  font-size:12px;
  font-weight:800;

  color:#fff;

  background:rgba(7,31,77,.82);

  backdrop-filter:blur(6px);

  padding:4px 14px;

  border-radius:100px;
}

.news-cat.urgent{
  background:var(--red);
}

.news-cat.turq{
  background:#0d9488;
}

.news-body{
  padding:20px;

  display:flex;
  flex-direction:column;

  gap:8px;

  flex:1;
}

.news-body h3{
  font-size:16px;
  line-height:1.9;
}

.news-body h3 a{
  color:var(--ink);
}

.news-body h3 a:hover{
  color:var(--blue-700);
}

.news-ex{
  font-size:13.5px;

  color:var(--muted);

  display:-webkit-box;

  -webkit-line-clamp:2;

  -webkit-box-orient:vertical;

  overflow:hidden;
}

.news-meta{
  display:flex;

  align-items:center;

  gap:14px;

  font-size:12.5px;

  color:var(--muted);

  margin-top:auto;

  padding-top:10px;

  border-top:1px dashed var(--line);
}

.news-meta span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.news-meta svg{
  width:14px;
  height:14px;
}

.pin-flag{
  position:absolute;

  top:12px;
  left:12px;

  background:#fff;

  color:var(--amber);

  border-radius:100px;

  width:32px;
  height:32px;

  display:grid;
  place-items:center;

  box-shadow:var(--shadow-sm);
}

.pin-flag svg{
  width:16px;
  height:16px;
}


/* ============================================================
   BADGES
   ============================================================ */

.badge{
  display:inline-flex;

  align-items:center;

  gap:6px;

  font-size:12.5px;
  font-weight:700;

  padding:4px 14px;

  border-radius:100px;
}

.badge-blue{
  background:var(--blue-50);

  color:var(--blue-700);

  border:1px solid var(--blue-100);
}

.badge-turq{
  background:var(--turq-soft);
  color:#0d9488;
}

.badge-red{
  background:var(--red-soft);
  color:var(--red);
}

.badge-green{
  background:var(--green-soft);
  color:var(--green);
}

.badge-amber{
  background:var(--amber-soft);
  color:var(--amber);
}


/* ============================================================
   FILTERS
   ============================================================ */

.filters{
  display:flex;

  gap:10px;

  flex-wrap:wrap;

  margin-bottom:28px;
}

.filter-btn{
  font-family:inherit;

  font-size:13.5px;
  font-weight:700;

  padding:9px 20px;

  border-radius:100px;

  border:1.5px solid var(--line);

  background:#fff;

  color:var(--body);

  cursor:pointer;

  transition:.2s;
}

.filter-btn:hover{
  border-color:var(--blue-600);
  color:var(--blue-700);
}

.filter-btn.active{
  background:var(--blue-800);

  border-color:var(--blue-800);

  color:#fff;

  box-shadow:
    0 6px 16px rgba(11,61,145,.3);
}


/* ============================================================
   ARTICLE
   ============================================================ */

.article-layout{
  display:grid;

  grid-template-columns:1fr 320px;

  gap:28px;

  align-items:start;
}

.article{
  background:#fff;

  border:1px solid var(--line);

  border-radius:var(--radius-lg);

  overflow:hidden;

  box-shadow:var(--shadow-sm);
}

.article-cover{
  aspect-ratio:21/9;

  overflow:hidden;

  background:var(--blue-50);
}

.article-cover img{
  width:100%;
  height:100%;

  object-fit:cover;
}

.article-in{
  padding:34px;
}

.article-in h1{
  font-size:clamp(20px,3vw,28px);

  margin:10px 0 14px;
}

.article-meta{
  display:flex;

  gap:18px;

  flex-wrap:wrap;

  font-size:13px;

  color:var(--muted);

  padding-bottom:18px;

  border-bottom:1px solid var(--line);

  margin-bottom:20px;
}

.article-meta span{
  display:inline-flex;

  align-items:center;

  gap:6px;
}

.article-meta svg{
  width:15px;
  height:15px;
}

.article-body{
  font-size:15.5px;
  color:var(--body);
}

.article-body p{
  margin-bottom:16px;
}

.article-attach{
  margin-top:24px;

  display:grid;

  gap:10px;
}

.attach-row{
  display:flex;

  align-items:center;

  gap:12px;

  background:var(--bg);

  border:1px solid var(--line);

  border-radius:12px;

  padding:12px 16px;

  font-size:14px;
}

.attach-row svg{
  width:20px;
  height:20px;

  color:var(--blue-700);

  flex:none;
}

.attach-row .btn{
  margin-inline-start:auto;
}

.sidebar-card{
  background:#fff;

  border:1px solid var(--line);

  border-radius:var(--radius);

  padding:22px;

  box-shadow:var(--shadow-sm);

  margin-bottom:20px;
}

.sidebar-card h3{
  font-size:16px;

  margin-bottom:14px;

  padding-bottom:10px;

  border-bottom:2px solid var(--blue-50);
}

.side-news{
  display:flex;

  gap:12px;

  padding:10px 0;

  border-bottom:1px dashed var(--line);

  align-items:center;
}

.side-news:last-child{
  border:none;
}

.side-news img{
  width:72px;
  height:56px;

  object-fit:cover;

  border-radius:10px;

  flex:none;
}

.side-news b{
  font-size:13.5px;

  color:var(--ink);

  display:block;

  line-height:1.8;
}

.side-news small{
  font-size:12px;
  color:var(--muted);
}


/* ============================================================
   STAFF
   ============================================================ */

.staff-card{
  background:#fff;

  border:1px solid var(--line);

  border-radius:var(--radius);

  overflow:hidden;

  text-align:center;

  transition:.3s;

  box-shadow:var(--shadow-sm);
}

.staff-card:hover{
  transform:translateY(-6px);

  box-shadow:var(--shadow);
}

.staff-photo{
  height:190px;

  background:
    linear-gradient(
      135deg,
      var(--blue-900),
      var(--blue-600)
    );

  display:grid;

  place-items:center;

  position:relative;

  overflow:hidden;
}

.staff-photo::after{
  content:"";

  position:absolute;

  width:200px;
  height:200px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(20,184,166,.3),
      transparent 70%
    );

  left:-60px;
  top:-60px;
}

.staff-avatar{
  width:96px;
  height:96px;

  border-radius:50%;

  background:rgba(255,255,255,.14);

  border:2.5px solid rgba(255,255,255,.5);

  display:grid;
  place-items:center;

  color:#fff;

  font-size:32px;
  font-weight:900;

  position:relative;
  z-index:2;

  backdrop-filter:blur(4px);
}

.staff-photo img{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  z-index:3;
}

.staff-in{
  padding:22px;
}

.staff-in h3{
  font-size:16.5px;
}

.staff-role{
  display:inline-block;

  font-size:12.5px;

  font-weight:800;

  color:var(--blue-700);

  background:var(--blue-50);

  padding:4px 16px;

  border-radius:100px;

  margin:8px 0 10px;
}

.staff-in p{
  font-size:13.5px;
  color:var(--muted);
}

.staff-contact{
  margin-top:12px;

  display:flex;

  gap:8px;

  justify-content:center;
}

.principal-hero{
  background:#fff;

  border:1px solid var(--line);

  border-radius:var(--radius-lg);

  overflow:hidden;

  display:grid;

  grid-template-columns:300px 1fr;

  box-shadow:var(--shadow);
}

.principal-photo{
  background:
    linear-gradient(
      160deg,
      var(--blue-950),
      var(--blue-700)
    );

  display:grid;

  place-items:center;

  padding:40px;

  position:relative;

  overflow:hidden;
}

.principal-photo::after{
  content:"";

  position:absolute;

  width:260px;
  height:260px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(20,184,166,.28),
      transparent 70%
    );
}

.principal-photo .staff-avatar{
  width:150px;
  height:150px;
  font-size:52px;
}

.principal-in{
  padding:36px;
}

.timeline{
  margin-top:18px;

  display:grid;

  gap:0;
}

.tl-item{
  display:flex;

  gap:14px;

  position:relative;

  padding-bottom:20px;
}

.tl-item:last-child{
  padding-bottom:0;
}

.tl-item::before{
  content:"";

  position:absolute;

  right:7px;

  top:22px;

  bottom:0;

  width:2px;

  background:var(--blue-100);
}

.tl-item:last-child::before{
  display:none;
}

.tl-dot{
  width:16px;
  height:16px;

  border-radius:50%;

  background:var(--turq);

  flex:none;

  margin-top:8px;

  box-shadow:
    0 0 0 4px var(--turq-soft);
}

.tl-item div b{
  color:var(--ink);
  font-size:15px;
}

.tl-item div p{
  font-size:13.5px;
  color:var(--muted);
}


/* ============================================================
   TABLES
   ============================================================ */

.table-wrap{
  overflow-x:auto;

  border:1px solid var(--line);

  border-radius:var(--radius);

  background:#fff;

  box-shadow:var(--shadow-sm);
}

table.data{
  width:100%;

  border-collapse:collapse;

  font-size:14px;

  min-width:640px;
}

table.data th{
  background:var(--blue-900);

  color:#fff;

  font-weight:700;

  padding:14px 12px;

  white-space:nowrap;
}

table.data td{
  padding:13px 12px;

  border-bottom:1px solid var(--line);

  text-align:center;

  color:var(--body);
}

table.data tr:last-child td{
  border-bottom:none;
}

table.data tr:nth-child(even) td{
  background:#f8fbff;
}

table.data td:first-child,
table.data th:first-child{
  font-weight:800;

  color:var(--blue-800);
}


/* ============================================================
   CALENDAR
   ============================================================ */

.cal-head{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

  margin-bottom:20px;

  flex-wrap:wrap;
}

.cal-nav{
  display:flex;
  gap:8px;
}

.cal-grid{
  background:#fff;

  border:1px solid var(--line);

  border-radius:var(--radius-lg);

  overflow:hidden;

  box-shadow:var(--shadow-sm);
}

.cal-week{
  display:grid;

  grid-template-columns:repeat(7,1fr);

  background:var(--blue-900);

  color:#fff;

  font-size:13px;

  font-weight:700;

  text-align:center;
}

.cal-week div{
  padding:12px 4px;
}

.cal-days{
  display:grid;

  grid-template-columns:repeat(7,1fr);
}

.cal-day{
  min-height:96px;

  border-left:1px solid var(--line);

  border-bottom:1px solid var(--line);

  padding:8px;

  font-size:13px;

  position:relative;

  background:#fff;
}

.cal-day:nth-child(7n){
  border-left:none;
}

.cal-day .dnum{
  font-weight:800;

  color:var(--ink);

  font-size:14px;
}

.cal-day.other{
  background:#f7fafd;
}

.cal-day.other .dnum{
  color:#b6c2d6;
}

.cal-day.today{
  background:var(--blue-50);
}

.cal-day.today .dnum{
  background:var(--blue-800);

  color:#fff;

  width:28px;
  height:28px;

  display:grid;
  place-items:center;

  border-radius:50%;
}

.cal-day.friday .dnum{
  color:var(--red);
}

.cal-ev{
  font-size:11px;

  font-weight:700;

  padding:2px 8px;

  border-radius:6px;

  margin-top:4px;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;

  cursor:default;
}

.ev-exam{
  background:var(--red-soft);
  color:var(--red);
}

.ev-meet{
  background:var(--amber-soft);
  color:var(--amber);
}

.ev-work{
  background:#e0e7ff;
  color:#4338ca;
}

.ev-sport{
  background:var(--green-soft);
  color:var(--green);
}

.ev-cult{
  background:#fae8ff;
  color:#a21caf;
}

.ev-trip{
  background:var(--turq-soft);
  color:#0d9488;
}

.ev-holi{
  background:#e2e8f0;
  color:#475569;
}

.ev-ann{
  background:var(--blue-50);
  color:var(--blue-700);
}

.cal-legend{
  display:flex;

  gap:14px;

  flex-wrap:wrap;

  margin-top:16px;

  font-size:13px;

  color:var(--muted);
}

.cal-legend span{
  display:inline-flex;

  align-items:center;

  gap:6px;
}

.cal-legend i{
  width:12px;
  height:12px;

  border-radius:4px;

  display:inline-block;
}

.event-list{
  display:grid;

  gap:12px;

  margin-top:26px;
}

.event-row{
  display:flex;

  gap:16px;

  align-items:center;

  background:#fff;

  border:1px solid var(--line);

  border-radius:var(--radius);

  padding:16px 20px;

  box-shadow:var(--shadow-sm);
}

.event-date{
  flex:none;

  width:74px;

  text-align:center;

  background:var(--blue-900);

  color:#fff;

  border-radius:14px;

  padding:10px 6px;
}

.event-date b{
  display:block;

  font-size:22px;

  line-height:1.2;
}

.event-date small{
  font-size:12px;
  opacity:.85;
}

.event-row h4{
  font-size:15px;
}

.event-row p{
  font-size:13px;
  color:var(--muted);
}


/* ============================================================
   GALLERY
   ============================================================ */

.gal-grid{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:18px;
}

.gal-item{
  position:relative;

  border-radius:var(--radius);

  overflow:hidden;

  cursor:zoom-in;

  aspect-ratio:4/3;

  background:var(--blue-50);

  box-shadow:var(--shadow-sm);
}

.gal-item img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:.5s;
}

.gal-item:hover img{
  transform:scale(1.08);
}

.gal-cap{
  position:absolute;

  inset:auto 0 0 0;

  padding:34px 16px 14px;

  color:#fff;

  font-size:14px;

  font-weight:700;

  background:
    linear-gradient(
      transparent,
      rgba(4,18,46,.85)
    );

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:8px;
}

.lightbox{
  position:fixed;

  inset:0;

  z-index:130;

  background:rgba(2,8,20,.92);

  display:grid;

  place-items:center;

  padding:20px;

  opacity:0;

  visibility:hidden;

  transition:.3s;
}

.lightbox.open{
  opacity:1;
  visibility:visible;
}

.lightbox img{
  max-width:min(1000px,94vw);

  max-height:82vh;

  border-radius:14px;

  box-shadow:var(--shadow-lg);
}

.lb-cap{
  color:#fff;

  text-align:center;

  margin-top:12px;

  font-weight:700;
}

.lb-btn{
  position:absolute;

  top:50%;

  transform:translateY(-50%);

  width:48px;
  height:48px;

  border-radius:50%;

  border:1px solid rgba(255,255,255,.3);

  background:rgba(255,255,255,.1);

  color:#fff;

  cursor:pointer;

  display:grid;

  place-items:center;

  backdrop-filter:blur(6px);
}

.lb-btn:hover{
  background:rgba(255,255,255,.25);
}

.lb-prev{
  right:18px;
}

.lb-next{
  left:18px;
}

.lb-close{
  position:absolute;

  top:20px;
  left:20px;

  transform:none;
}

.lb-btn svg{
  width:22px;
  height:22px;
}


/* ============================================================
   FORMS
   ============================================================ */

.form-card{
  background:#fff;

  border:1px solid var(--line);

  border-radius:var(--radius-lg);

  padding:34px;

  box-shadow:var(--shadow-sm);
}

.form-grid{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:16px;
}

.field{
  display:grid;

  gap:7px;
}

.field.full{
  grid-column:1/-1;
}

.field label{
  font-size:14px;

  font-weight:700;

  color:var(--ink);
}

.field label .req{
  color:var(--red);
}

.field input,
.field select,
.field textarea{
  font-family:inherit;

  font-size:14.5px;

  color:var(--ink);

  border:1.5px solid var(--line);

  border-radius:12px;

  padding:12px 16px;

  background:#fbfdff;

  transition:.2s;

  width:100%;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;

  border-color:var(--blue-600);

  box-shadow:
    0 0 0 4px rgba(37,99,216,.12);

  background:#fff;
}

.field textarea{
  min-height:130px;
  resize:vertical;
}

.field .hint{
  font-size:12.5px;
  color:var(--muted);
}

.form-msg{
  padding:14px 18px;

  border-radius:12px;

  font-size:14px;

  font-weight:600;

  margin-bottom:16px;

  display:none;
}

.form-msg.ok{
  display:block;

  background:var(--green-soft);

  color:#15803d;

  border:1px solid #bbf7d0;
}

.form-msg.err{
  display:block;

  background:var(--red-soft);

  color:var(--red);

  border:1px solid #fecaca;
}

.steps{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:14px;

  margin:26px 0;
}

.step{
  background:#fff;

  border:1px solid var(--line);

  border-radius:var(--radius);

  padding:22px 18px;

  text-align:center;

  position:relative;

  box-shadow:var(--shadow-sm);
}

.step-num{
  width:44px;
  height:44px;

  border-radius:50%;

  margin:0 auto 12px;

  display:grid;
  place-items:center;

  background:
    linear-gradient(
      135deg,
      var(--blue-800),
      var(--blue-600)
    );

  color:#fff;

  font-weight:900;

  font-size:19px;

  box-shadow:
    0 6px 16px rgba(11,61,145,.3);
}

.step h4{
  font-size:14.5px;
  margin-bottom:4px;
}

.step p{
  font-size:12.5px;
  color:var(--muted);
}


/* ============================================================
   FAQ
   ============================================================ */

.faq-item{
  background:#fff;

  border:1px solid var(--line);

  border-radius:var(--radius);

  margin-bottom:12px;

  overflow:hidden;

  box-shadow:var(--shadow-sm);
}

.faq-q{
  width:100%;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

  padding:18px 22px;

  background:none;

  border:none;

  font-family:inherit;

  font-size:15px;

  font-weight:800;

  color:var(--ink);

  cursor:pointer;

  text-align:right;
}

.faq-q svg{
  width:20px;
  height:20px;

  color:var(--blue-700);

  flex:none;

  transition:.3s;
}

.faq-item.open .faq-q svg{
  transform:rotate(180deg);
}

.faq-a{
  max-height:0;

  overflow:hidden;

  transition:max-height .35s ease;
}

.faq-a div{
  padding:0 22px 20px;

  font-size:14.5px;

  color:var(--body);

  border-top:1px dashed var(--line);

  padding-top:16px;

  margin:0 22px 20px;

  padding-left:0;
  padding-right:0;
}


/* ============================================================
   FILES
   ============================================================ */

.file-row{
  display:flex;

  align-items:center;

  gap:16px;

  background:#fff;

  border:1px solid var(--line);

  border-radius:var(--radius);

  padding:18px 20px;

  margin-bottom:12px;

  box-shadow:var(--shadow-sm);

  transition:.2s;
}

.file-row:hover{
  border-color:var(--blue-600);

  box-shadow:var(--shadow);
}

.file-ic{
  width:52px;
  height:52px;

  flex:none;

  border-radius:14px;

  display:grid;
  place-items:center;

  background:var(--red-soft);

  color:var(--red);

  font-weight:900;

  font-size:13px;
}

.file-ic.doc{
  background:var(--blue-50);
  color:var(--blue-700);
}

.file-ic.img{
  background:var(--green-soft);
  color:var(--green);
}

.file-ic.zip{
  background:var(--amber-soft);
  color:var(--amber);
}

.file-info{
  flex:1;
  min-width:0;
}

.file-info b{
  display:block;

  color:var(--ink);

  font-size:15px;
}

.file-info small{
  color:var(--muted);
  font-size:12.5px;
}


/* ============================================================
   CONTACT / MAP
   ============================================================ */

.contact-grid{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:24px;

  align-items:start;
}

.info-list{
  display:grid;

  gap:14px;

  margin-top:18px;
}

.info-row{
  display:flex;

  gap:14px;

  align-items:flex-start;

  background:#fff;

  border:1px solid var(--line);

  border-radius:var(--radius);

  padding:16px 18px;

  box-shadow:var(--shadow-sm);
}

.info-row .ic-wrap{
  margin:0;

  width:48px;
  height:48px;

  flex:none;
}

.info-row b{
  display:block;

  color:var(--ink);

  font-size:14.5px;
}

.info-row p,
.info-row a.val{
  font-size:14px;
  color:var(--body);
}

.map-frame{
  border-radius:var(--radius-lg);

  overflow:hidden;

  border:1px solid var(--line);

  box-shadow:var(--shadow);

  position:relative;

  background:var(--blue-50);
}

.map-frame iframe{
  width:100%;

  height:420px;

  border:0;

  display:block;
}

.hours-table{
  width:100%;

  font-size:14px;
}

.hours-table div{
  display:flex;

  justify-content:space-between;

  padding:10px 4px;

  border-bottom:1px dashed var(--line);
}

.hours-table div:last-child{
  border:none;
}

.hours-table .today-row{
  color:var(--blue-800);

  font-weight:800;
}

.closed-txt{
  color:var(--red);

  font-weight:700;
}


/* ============================================================
   SYSTEMS
   ============================================================ */

.sys-card{
  display:flex;

  gap:18px;

  align-items:center;

  background:#fff;

  border:1px solid var(--line);

  border-radius:var(--radius-lg);

  padding:26px;

  box-shadow:var(--shadow-sm);

  transition:.3s;

  color:var(--ink);
}

.sys-card:hover{
  transform:translateY(-5px);

  box-shadow:var(--shadow);

  border-color:var(--blue-600);
}

.sys-card .ic-wrap{
  margin:0;

  width:66px;
  height:66px;

  flex:none;

  border-radius:18px;
}

.sys-card .ic-wrap svg{
  width:32px;
  height:32px;
}

.sys-card h3{
  font-size:17px;
}

.sys-card p{
  font-size:13.5px;
  color:var(--muted);
}

.sys-card .go{
  margin-inline-start:auto;
  flex:none;
}


/* ============================================================
   RULES
   ============================================================ */

.rule-cat{
  background:#fff;

  border:1px solid var(--line);

  border-radius:var(--radius);

  padding:26px;

  margin-bottom:18px;

  box-shadow:var(--shadow-sm);
}

.rule-cat h3{
  display:flex;

  align-items:center;

  gap:12px;

  font-size:17px;

  margin-bottom:16px;
}

.rule-cat h3 .ic-wrap{
  margin:0;

  width:46px;
  height:46px;
}

.rule-list{
  list-style:none;

  counter-reset:rule;

  display:grid;

  gap:10px;
}

.rule-list li{
  counter-increment:rule;

  display:flex;

  gap:12px;

  align-items:flex-start;

  font-size:14.5px;

  background:var(--bg);

  border-radius:12px;

  padding:12px 16px;
}

.rule-list li::before{
  content:counter(rule,arabic-indic);

  flex:none;

  min-width:30px;
  height:30px;

  display:grid;

  place-items:center;

  background:var(--blue-800);

  color:#fff;

  border-radius:9px;

  font-size:13px;

  font-weight:800;
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer{
  background:var(--blue-950);

  color:#b9c7e4;

  margin-top:0;

  position:relative;

  overflow:hidden;
}

.site-footer::before{
  content:"";

  position:absolute;

  width:600px;
  height:600px;

  border-radius:50%;

  right:-200px;
  top:-300px;

  background:
    radial-gradient(
      circle,
      rgba(20,184,166,.12),
      transparent 65%
    );
}

.footer-grid{
  display:grid;

  grid-template-columns:
    1.4fr
    1fr
    1fr
    1.2fr;

  gap:34px;

  padding:60px 0 40px;

  position:relative;

  z-index:2;
}

.footer-brand .brand-txt b{
  color:#fff;
}

.footer-brand p{
  font-size:13.5px;

  margin:14px 0;
}

.site-footer h4{
  color:#fff;

  font-size:16px;

  margin-bottom:18px;

  padding-bottom:10px;

  border-bottom:2px solid rgba(255,255,255,.12);
}

.f-links{
  list-style:none;

  display:grid;

  gap:9px;

  font-size:14px;
}

.f-links a{
  color:#b9c7e4;

  display:inline-flex;

  align-items:center;

  gap:8px;
}

.f-links a::before{
  content:"";

  width:6px;
  height:6px;

  border-radius:50%;

  background:var(--turq);

  flex:none;
}

.f-links a:hover{
  color:#fff;

  padding-inline-start:4px;
}

.f-contact{
  list-style:none;

  display:grid;

  gap:12px;

  font-size:13.5px;
}

.f-contact li{
  display:flex;

  gap:10px;

  align-items:flex-start;
}

.f-contact svg{
  width:17px;
  height:17px;

  flex:none;

  color:var(--turq);

  margin-top:6px;
}

.socials{
  display:flex;

  gap:10px;

  margin-top:16px;
}

.socials a{
  width:42px;
  height:42px;

  border-radius:12px;

  display:grid;
  place-items:center;

  background:rgba(255,255,255,.08);

  border:1px solid rgba(255,255,255,.14);

  color:#fff;
}

.socials a:hover{
  background:var(--turq);

  border-color:var(--turq);

  transform:translateY(-3px);
}

.socials svg{
  width:20px;
  height:20px;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);

  padding:18px 0;

  position:relative;

  z-index:2;

  font-size:13px;

  color:#8fa0c2;
}

.footer-bottom .container{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  flex-wrap:wrap;
}

.footer-bottom a{
  color:#c9d6ee;
}


/* ============================================================
   BACK TO TOP
   ============================================================ */

.to-top{
  position:fixed;

  bottom:24px;
  left:24px;

  z-index:90;

  width:50px;
  height:50px;

  border-radius:14px;

  border:none;

  cursor:pointer;

  display:grid;
  place-items:center;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      var(--blue-800),
      var(--blue-600)
    );

  box-shadow:var(--shadow-lg);

  opacity:0;

  visibility:hidden;

  transform:translateY(12px);

  transition:.3s;
}

.to-top.show{
  opacity:1;

  visibility:visible;

  transform:none;
}

.to-top svg{
  width:22px;
  height:22px;
}


/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */

.reveal{
  opacity:0;

  transform:translateY(28px);

  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.2,.7,.3,1);
}

.reveal.in{
  opacity:1;
  transform:none;
}

.reveal-d1{
  transition-delay:.08s;
}

.reveal-d2{
  transition-delay:.16s;
}

.reveal-d3{
  transition-delay:.24s;
}

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

  .reveal{
    opacity:1;

    transform:none;

    transition:none;
  }

  *,
  *::before,
  *::after{
    animation:none!important;
  }
}


/* ============================================================
   SKELETON
   ============================================================ */

.skel{
  border-radius:12px;

  background:
    linear-gradient(
      90deg,
      #e8eef7 25%,
      #f4f8fd 50%,
      #e8eef7 75%
    );

  background-size:200% 100%;

  animation:skel 1.4s infinite;
}

@keyframes skel{
  to{
    background-position:-200% 0;
  }
}


/* ============================================================
   EMPTY BOX
   ============================================================ */

.empty-box{
  text-align:center;

  padding:60px 20px;

  background:#fff;

  border:1.5px dashed var(--line);

  border-radius:var(--radius-lg);

  color:var(--muted);
}

.empty-box svg{
  width:54px;
  height:54px;

  margin:0 auto 12px;

  color:#b6c2d6;
}


/* ============================================================
   LAZY IMAGES
   ============================================================ */

img.lazy{
  opacity:0;

  transition:opacity .5s;
}

img.lazy.loaded{
  opacity:1;
}


/* ============================================================
   SPLIT SECTIONS
   ============================================================ */

.split{
  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:40px;

  align-items:center;
}

.split img.rounded{
  border-radius:var(--radius-lg);

  box-shadow:var(--shadow-lg);
}


/* ============================================================
   IMAGE FRAME
   ============================================================ */

/*
   نکته مهم:
   overflow:visible است.
   چون قاب تزئینی و Badge ممکن است کمی
   از محدوده تصویر بیرون بیایند.
*/

.img-frame{
  position:relative;

  width:100%;

  min-width:0;

  overflow:visible;

  isolation:isolate;
}


/* قاب تزئینی پشت تصویر */

.img-frame::before{
  content:"";

  position:absolute;

  inset:
    18px
    -18px
    -18px
    18px;

  border-radius:var(--radius-lg);

  border:
    2.5px solid
    var(--turq);

  opacity:.4;

  z-index:0;

  pointer-events:none;
}


/* تصویر */

.img-frame img{
  position:relative;

  z-index:1;

  display:block;

  width:100%;

  max-width:100%;

  height:auto;

  border-radius:var(--radius-lg);

  box-shadow:var(--shadow-lg);
}


/* ============================================================
   SCHOOL INFORMATION BADGE
   ============================================================ */

.exp-badge{
  position:absolute;

  z-index:10;

  right:18px;

  bottom:18px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  min-width:160px;

  max-width:calc(100% - 36px);

  padding:12px 20px;

  background:#fff;

  color:var(--ink);

  border:
    1px solid
    var(--line);

  border-radius:16px;

  box-shadow:
    0 24px 64px rgba(7,31,77,.16);

  text-align:center;

  direction:rtl;

  box-sizing:border-box;

  white-space:nowrap;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


/* Hover */

.exp-badge:hover{
  transform:translateY(-3px);

  box-shadow:
    0 18px 45px rgba(7,31,77,.20);
}


/* خط تزئینی بالای Badge */

.exp-badge::before{
  content:"";

  position:absolute;

  top:0;

  right:18px;
  left:18px;

  height:3px;

  background:
    linear-gradient(
      90deg,
      var(--blue-700),
      var(--turq)
    );

  border-radius:
    0
    0
    8px
    8px;
}


/* عنوان Badge */

.exp-badge b,
.exp-badge strong{
  display:block;

  margin:0;

  padding:0;

  color:var(--blue-800);

  font-size:26px;

  font-weight:900;

  line-height:1.4;
}


/* توضیح Badge */

.exp-badge small,
.exp-badge span{
  display:block;

  margin-top:2px;

  padding:0;

  color:var(--muted);

  font-size:12.5px;

  font-weight:600;

  line-height:1.7;
}


/* ============================================================
   CHECK LIST
   ============================================================ */

.check-list{
  list-style:none;

  display:grid;

  gap:12px;

  margin:18px 0;
}

.check-list li{
  display:flex;

  gap:10px;

  align-items:flex-start;

  font-size:14.5px;
}

.check-list svg{
  width:20px;
  height:20px;

  color:var(--turq);

  flex:none;

  margin-top:7px;
}


/* ============================================================
   HONORS
   ============================================================ */

.honor-tabs{
  display:flex;

  gap:10px;

  flex-wrap:wrap;

  margin-bottom:24px;
}


/* ============================================================
   PRINT
   ============================================================ */

@media print{

  .site-header,
  .topbar,
  .announce,
  .site-footer,
  .to-top,
  .no-print,
  .drawer,
  .search-ov{
    display:none!important;
  }

  body{
    background:#fff;
  }

  .section{
    padding:20px 0;
  }
}


/* ============================================================
   RESPONSIVE
   ============================================================ */


/* ------------------------------------------------------------
   1100px
   ------------------------------------------------------------ */

@media(max-width:1100px){

  .main-nav{
    display:none;
  }

  .burger{
    display:grid;
  }

  .qa-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .g4{
    grid-template-columns:repeat(2,1fr);
  }

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

  .article-layout{
    grid-template-columns:1fr;
  }

}


/* ------------------------------------------------------------
   960px
   ------------------------------------------------------------ */

@media(max-width:960px){

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

  .hero-card{
    max-width:none;
  }

}


/* ------------------------------------------------------------
   820px
   ------------------------------------------------------------ */

@media(max-width:820px){

  body{
    font-size:14.5px;
  }

  .section{
    padding:48px 0;
  }

  .g3,
  .g2{
    grid-template-columns:1fr;
  }

  /*
     Split در موبایل تک‌ستونه می‌شود.
  */

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

    gap:32px;
  }

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

  .principal-hero{
    grid-template-columns:1fr;
  }

  .gal-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .steps{
    grid-template-columns:repeat(2,1fr);
  }

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

  .cal-day{
    min-height:64px;

    padding:5px;
  }

  .cal-ev{
    display:none;
  }

  .cal-day.has-ev .dnum{
    border-bottom:
      3px solid
      var(--turq);
  }

  .hero{
    padding:10px 0 30px;
  }

  .topbar .tb-hide{
    display:none;
  }

  .header-actions .cta-register{
    display:none;
  }

  .article-in{
    padding:22px;
  }

  .footer-grid{
    grid-template-columns:1fr;

    gap:26px;
  }

  .sys-card{
    flex-wrap:wrap;
  }


  /* ----------------------------------------------------------
     Image Frame / Badge - Tablet
     ---------------------------------------------------------- */

  .img-frame{
    width:100%;
  }

  .img-frame::before{
    inset:
      14px
      -12px
      -12px
      12px;
  }

  .exp-badge{
    right:18px;
    bottom:18px;
  }

}


/* ------------------------------------------------------------
   600px
   ------------------------------------------------------------ */

@media(max-width:600px){

  .container{
    width:calc(100% - 28px);
  }

  .page-hero{
    padding:44px 0 54px;
  }

  .page-hero h1{
    font-size:26px;
  }

  .page-hero p{
    font-size:13.5px;
  }

  .hero{
    min-height:500px;
  }

  .hero-in{
    padding:64px 0;
  }

  .hero h1{
    font-size:32px;
  }

  .hero-btns{
    flex-direction:column;
  }

  .hero-btns .btn{
    width:100%;
  }


  /* ----------------------------------------------------------
     Image Badge - Mobile
     ---------------------------------------------------------- */

  .img-frame{
    width:100%;
  }

  .img-frame::before{
    inset:
      12px
      -10px
      -10px
      10px;
  }

  .exp-badge{
    right:12px;
    bottom:12px;

    min-width:0;

    max-width:
      calc(100% - 24px);

    padding:
      9px
      13px;

    border-radius:13px;
  }

  .exp-badge b,
  .exp-badge strong{
    font-size:20px;
  }

  .exp-badge small,
  .exp-badge span{
    font-size:10.5px;
  }

  .exp-badge::before{
    right:13px;
    left:13px;

    height:2px;
  }

}


/* ------------------------------------------------------------
   520px
   ------------------------------------------------------------ */

@media(max-width:520px){

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

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

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

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

  .hero-btns .btn{
    flex:1;
    justify-content:center;
  }

  .form-card{
    padding:22px;
  }

  .footer-bottom .container{
    flex-direction:column;

    align-items:flex-start;
  }


  /* Badge کوچک‌تر */

  .exp-badge{
    right:10px;
    bottom:10px;

    max-width:
      calc(100% - 20px);

    padding:
      8px
      11px;
  }

  .exp-badge b,
  .exp-badge strong{
    font-size:18px;
  }

  .exp-badge small,
  .exp-badge span{
    font-size:10px;
  }

}


/* ------------------------------------------------------------
   380px
   ------------------------------------------------------------ */

@media(max-width:380px){

  .container{
    width:calc(100% - 22px);
  }

  .section{
    padding:40px 0;
  }

  .page-hero{
    padding:38px 0 46px;
  }

  .page-hero h1{
    font-size:23px;
  }

  .hero h1{
    font-size:28px;
  }

  .hero-meta{
    gap:14px;
  }


  /* Badge بسیار کوچک */

  .exp-badge{
    right:8px;
    bottom:8px;

    max-width:
      calc(100% - 16px);

    padding:
      7px
      9px;

    border-radius:10px;
  }

  .exp-badge b,
  .exp-badge strong{
    font-size:16px;
  }

  .exp-badge small,
  .exp-badge span{
    font-size:9px;
  }

  .exp-badge::before{
    right:10px;
    left:10px;
  }

}