/*
Theme Name: Eksenim VIP Eğitim
Theme URI: https://ai.studio/build/wordpress-designer
Author: WordPress Template Designer
Author URI: https://ai.studio/build
Description: Ankara'da 15 yıldır hizmet veren, 10 kişilik VIP sınıflarda, her gün ödev kontrolü, sınırsız etüt ve uzman kadrolu eğitmenleri ile Kızılay YKS kursu, Kızılay LGS kursu, Kızılay dershane ve öğrenci koçluk sistemi sunan en iyi butik dershane şablonu. (Ultra-fast, modern, responsive, optimized via AI Architect)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eksenim-vip-egitim
*/

/* ==========================================================================
   1. CSS Variables & Reset
   ========================================================================== */
:root {
  --font-header: "Outfit", sans-serif;
  --font-body: "Inter", sans-serif;
  --base-size: 16px;
  
  --color-primary: #1E3A8A;
  --color-secondary: #475569;
  --color-accent: #EF4444;
  --color-bg: #F8FAFC;
  --color-text: #1F2937;
  --color-card-bg: #FFFFFF;
  --color-border: rgba(0, 0, 0, 0.08);
  --color-shadow: rgba(0, 0, 0, 0.04);
  
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  
  --container-width: 1200px;
}

/* Base resets & Core layout rules for extreme speed and lightness */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-size: var(--base-size);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  opacity: 0.85;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-header);
  color: var(--color-primary);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.5em;
  letter-spacing: -0.02em;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

/* ==========================================================================
   2. Header & Navigation Settings
   ========================================================================== */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-card-bg);
  z-index: 100;
  transition: all var(--transition-normal);
}

.site-header {
  position: sticky;
  top: 0;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
@media (prefers-color-scheme: dark) {
  .site-header {
    background-color: rgba(15, 23, 42, 0.82);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
}



.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.site-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 0;
}

.site-title a {
  color: var(--color-primary);
}

.custom-logo-link {
  display: inline-block;
  max-width: 220px;
}

.custom-logo {
  height: auto;
  max-height: 60px;
  width: auto;
  display: block;
}

.header-nav ul {
  display: flex;
  list-style: none;
  gap: 32px;
}

.header-nav a {
  color: var(--color-text);
  font-weight: 500;
  font-size: 15px;
}

.header-nav a:hover, .header-nav .current-menu-item a {
  color: var(--color-accent);
}

/* Sidebar & Content Columns */
.site-content-layout {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media (min-width: 1024px) {
  .site-content-layout.has-sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 45px;
  }
}

.main-content-area {
  flex: 1;
}

.sidebar-area {
  width: 100%;
}

.widget {
  margin-bottom: 35px;
}

.widget-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 18px;
}

.widget ul {
  list-style: none;
  padding: 0;
}

.widget li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.widget li:last-child {
  border-bottom: none;
}

/* ==========================================================================
   3. Theme Grid & Layouts (High Performance CSS Grid)
   ========================================================================== */

/* Layout presets */
.content-wrapper {
  padding: 60px 0;
}

/* Bento Layout */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.post-card {
  grid-column: span 4;
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  box-shadow: 0 4px 6px -1px var(--color-shadow);
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 20px -3px rgba(0, 0, 0, 0.08);
}
.post-card:nth-child(1) {
  grid-column: span 8;
  grid-row: span 2;
}
.post-card:nth-child(4) {
  grid-column: span 8;
}
@media (max-width: 900px) {
  .post-card {
    grid-column: span 6 !important;
    grid-row: span 1 !important;
  }
}
@media (max-width: 600px) {
  .post-card {
    grid-column: span 12 !important;
  }
}

/* Post inner elements */
.post-meta {
  font-family: var(--font-header);
  font-size: 13px;
  color: var(--color-secondary);
  font-weight: 500;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.post-category {
  color: var(--color-accent);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.post-title {
  font-size: 20px;
  margin-bottom: 12px;
}

.post-title a {
  color: var(--color-primary);
}

.post-excerpt {
  color: var(--color-text);
  font-size: 15px;
  margin-bottom: 20px;
  opacity: 0.9;
}

.read-more {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   4. Single Post & Core Elements
   ========================================================================== */
.post-header {
  margin-bottom: 40px;
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.post-header h1 {
  font-size: 42px;
  letter-spacing: -0.04em;
}

.post-full-content {
  max-width: 720px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.8;
}

.post-full-content p {
  margin-bottom: 24px;
}

/* ==========================================================================
   5. Footer Settings
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 48px 0;
  background-color: var(--color-card-bg);
  margin-top: 80px;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--color-secondary);
}

@media (max-width: 640px) {
  .footer-container {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
}

/* Responsive Header & Menu for Mobile Devices */
@media (max-width: 768px) {
  .header-container {
    flex-direction: column !important;
    height: auto !important;
    padding: 16px 20px !important;
    gap: 12px !important;
    align-items: center !important;
    text-align: center !important;
  }
  
  .header-nav {
    width: 100% !important;
  }

  .header-nav ul {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 16px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .header-nav a {
    font-size: 14px !important;
    padding: 6px 14px !important;
    background: rgba(0, 0, 0, 0.03) !important;
    border-radius: var(--radius-sm) !important;
    display: inline-block !important;
    transition: all var(--transition-fast) !important;
  }

  @media (prefers-color-scheme: dark) {
    .header-nav a {
      background: rgba(255, 255, 255, 0.06) !important;
    }
  }
}

/* Custom User and AI Injected CSS */
/* Eksenim VIP Eğitim marka renkleri ve bento kutu stilleri */
.post-card {
  border-radius: 16px !important;
  border: 1px solid rgba(30, 58, 138, 0.08) !important;
  box-shadow: 0 4px 20px -2px rgba(30, 58, 138, 0.04) !important;
  transition: all 0.3s ease !important;
}
.post-card:hover {
  transform: translateY(-5px) !important;
  border-color: #EF4444 !important;
  box-shadow: 0 10px 30px -5px rgba(239, 68, 68, 0.1) !important;
}
.phone-badge {
  background-color: #1E3A8A;
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.phone-badge-alt {
  background-color: #EF4444;
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}