/* ===================================
   ШЕЖІРЕ-И ТЕРАКИМЕ
   Academic Premium Design
=================================== */


:root {

  --primary-gold: #D4AF37;
  --primary-dark: #1a1a2e;
  --secondary-blue: #2c3e50;
  --accent-gold-dark: #b8860b;

  --text-dark:#2d3436;
  --text-light:#f8f9fa;

  --bg-cream:#fdf5e6;

  --shadow:
  0 10px 30px rgba(26,26,46,0.1);

  --font-primary:'EB Garamond', serif;
  --font-secondary:'Inter', sans-serif;

}


/* RESET */

* {

box-sizing:border-box;

}


html {

scroll-behavior:smooth;

}



body {

font-family:var(--font-secondary);

color:var(--text-dark);

background:
linear-gradient(
135deg,
var(--bg-cream),
#f5f5dc
);

margin:0;

padding-left:280px;

overflow-x:hidden;

transition:.4s;

}



body.sidebar-collapsed {

padding-left:90px;

}




/* ==========================
SIDEBAR
========================== */


.sidebar {


position:fixed;

left:0;

top:0;

width:280px;

height:100vh;


background:
linear-gradient(
145deg,
#1a1a2e,
#2c3e50
);


color:white;

padding:2rem 1.5rem;

z-index:1000;

box-shadow:var(--shadow);

}



.sidebar__header {


display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:3rem;

padding-bottom:1rem;

border-bottom:
1px solid rgba(212,175,55,.2);


}



.sidebar__header h2 {


font-family:var(--font-primary);

font-size:1.8rem;

color:var(--primary-gold);

}



#sidebar-toggle {


font-size:2rem;

cursor:pointer;

color:var(--primary-gold);

transition:.3s;


}



#sidebar-toggle:hover {

transform:rotate(90deg);

}



.sidebar__list {


list-style:none;

padding:0;

}



.sidebar__list li {


margin-bottom:.5rem;


}



.sidebar__list a {


display:flex;

align-items:center;

padding:1rem 1.5rem;

color:white;

text-decoration:none;

border-radius:12px;

transition:.3s;

font-weight:500;


}



.sidebar__list a:hover,
.sidebar__list .active {


background:
linear-gradient(
135deg,
var(--primary-gold),
var(--accent-gold-dark)
);


transform:translateX(5px);

box-shadow:
0 5px 15px rgba(212,175,55,.4);


}



.sidebar__theme {


position:absolute;

bottom:2rem;

left:2rem;


}


#theme-button {


font-size:1.5rem;

cursor:pointer;

color:var(--primary-gold);


}




/* ==========================
MAIN CONTENT
========================== */


.main-content {


padding:2rem;


}



.content-section {


margin:4rem 0;

padding:3rem;


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


border-radius:20px;

box-shadow:var(--shadow);


}



.content-section h2 {


font-family:var(--font-primary);

font-size:2.5rem;

text-align:center;

margin-bottom:2rem;


background:
linear-gradient(
45deg,
var(--primary-gold),
var(--accent-gold-dark)
);


-webkit-background-clip:text;

-webkit-text-fill-color:transparent;


}





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


.hero-section {


min-height:90vh;

display:flex;

align-items:center;

background:
linear-gradient(
135deg,
var(--primary-dark),
#2c3e50
);


border-radius:20px;

margin:2rem;

padding:4rem;

position:relative;

overflow:hidden;

box-shadow:var(--shadow);


}



.hero__content {


max-width:55%;


}



.hero__content h1 {


font-family:var(--font-primary);

font-size:clamp(2.5rem,5vw,3rem);


background:
linear-gradient(
45deg,
var(--primary-gold),
#ffd700
);


-webkit-background-clip:text;

-webkit-text-fill-color:transparent;


}



.hero__image {


flex:1;

display:flex;

justify-content:center;


}



.hero__image img {


width:100%;

max-width:450px;

height:auto;

border-radius:20px;

box-shadow:
0 20px 40px rgba(0,0,0,.3);


}



.btn-primary {


background:
linear-gradient(
135deg,
var(--primary-gold),
var(--accent-gold-dark)
);


color:var(--primary-dark);


padding:1rem 2.5rem;

border-radius:50px;

font-weight:600;

text-decoration:none;

display:inline-block;

transition:.3s;


}


.btn-primary:hover {


transform:translateY(-3px);


box-shadow:
0 10px 25px rgba(212,175,55,.4);


}

/* ==========================
ABOUT SECTION
========================== */


.content-grid {

display:grid;

grid-template-columns:1fr 1fr;

gap:3rem;

align-items:center;

}



.content-text p {

line-height:1.8;

font-size:1.1rem;

text-align:justify;

}




/* СУРЕТТЕРДІ КЕСПЕЙ КӨРСЕТУ */

.content-image {


display:flex;

justify-content:center;

align-items:center;


}



.content-image img {


width:100%;

max-width:500px;


height:auto;


object-fit:contain;


border-radius:15px;


box-shadow:
0 15px 30px rgba(0,0,0,.2);


}



/* ==========================
GOALS
========================== */


.goals-list {


list-style:none;

padding:0;

margin:2rem 0;

counter-reset:goal;


}



.goals-list li {


counter-increment:goal;


display:flex;

align-items:flex-start;


gap:20px;


margin-bottom:25px;


font-size:1.1rem;


line-height:1.6;


}



/* ЦИФРЛЕР */

.goals-list li::before {


content:counter(goal);


min-width:42px;


height:42px;


background:var(--primary-gold);


border-radius:50%;


display:flex;


align-items:center;


justify-content:center;


font-weight:bold;


color:var(--primary-dark);


}




/* ЕСКІ ГАЛОЧКАЛАРДЫ ЖАСЫРУ */

.goals-list li i {


display:none;


}





.section-image {


width:100%;


height:auto;


max-height:500px;


object-fit:contain;


border-radius:15px;


box-shadow:
0 15px 30px rgba(0,0,0,.2);


margin-top:2rem;


}





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


.cards-grid {


display:grid;


grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));


gap:2rem;


margin-top:2rem;


}




.card {


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


border-radius:20px;


overflow:hidden;


transition:.4s;


box-shadow:var(--shadow);


height:100%;


display:flex;


flex-direction:column;


}




.card:hover {


transform:translateY(-10px);


box-shadow:
0 25px 50px rgba(0,0,0,.2);


}



/* КІТАП СУРЕТТЕРІ */

.card-image {


width:100%;


height:250px;


display:flex;


align-items:center;


justify-content:center;


background:#fafafa;


}



.card img {


width:100%;


height:100%;


object-fit:contain;


}




.card h3 {


padding:1.5rem;


font-size:1.1rem;


line-height:1.5;


flex-grow:1;


}





/* КНОПКА ӘРҚАШАН ТӨМЕНДЕ */


.card .btn-primary {


margin:

0 1.5rem 1.5rem;


text-align:center;


}




/* ==========================
TEAM
========================== */


.team-grid {


display:grid;


grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));


gap:2rem;


margin-top:2rem;


}




.team-member {


text-align:center;


padding:2rem;


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


border-radius:20px;


position:relative;


overflow:hidden;


transition:.3s;


box-shadow:var(--shadow);


}




.team-member::before {


content:"";


position:absolute;


inset:0;


background:

linear-gradient(
45deg,
rgba(212,175,55,.35),
transparent
);


transform:scaleX(0);


transition:.3s;


z-index:0;


}




.team-member:hover::before {


transform:scaleX(1);


}



.team-member:hover {


transform:translateY(-5px);


border:1px solid var(--primary-gold);


}



.team-member h3,
.team-member p {


position:relative;

z-index:1;


}



.team-member h3 {


font-family:var(--font-primary);


color:var(--primary-dark);


}





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


.contact-form {


max-width:600px;


margin:auto;


background:white;


padding:3rem;


border-radius:20px;


box-shadow:var(--shadow);


}



.contact-form input,
.contact-form textarea {


width:100%;


padding:1rem;


margin-bottom:1.5rem;


border:

2px solid #e9ecef;


border-radius:12px;


font-size:1rem;


}



.contact-form textarea {


height:150px;


}



.contact-form input:focus,
.contact-form textarea:focus {


outline:none;


border-color:var(--primary-gold);


}





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


.footer {


background:

linear-gradient(
135deg,
var(--primary-dark),
#2c3e50
);


color:white;


text-align:center;


padding:2rem;


margin:4rem 2rem 0;


border-radius:20px 20px 0 0;


}





/* ==========================
DARK MODE
========================== */


.dark-theme {


--text-dark:#f8f9fa;

--bg-cream:#0f1419;

--primary-gold:#ffd700;


}



.dark-theme .content-section,
.dark-theme .card,
.dark-theme .team-member,
.dark-theme .contact-form {


background:
rgba(26,26,46,.8);


}





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


@media(max-width:768px){


body {


padding-left:0;


}



.sidebar {


transform:translateX(-100%);


}



.sidebar.active {


transform:translateX(0);


}



.hero-section {


flex-direction:column;


text-align:center;


margin:1rem;


padding:2rem;


}



.hero__content {


max-width:100%;


}



.content-grid {


grid-template-columns:1fr;


}



.content-section {


margin:2rem 1rem;


padding:2rem 1.5rem;


}



.card img {


height:220px;


}



}



@media(max-width:480px){


.hero-section {


padding:1.5rem;


}



.content-section {


padding:1.5rem;


}


}