/*
 * Greenhub Medya - Kurumsal Site Temasi
 * Marka renk paleti (renklerimiz.jpg): koyu yeşil + neon lime vurgu + kırık beyaz + neredeyse siyah.
 * Apple tarzı sade/premium: bol boşluk, büyük tipografi (Poppins), yuvarlatılmış kartlar.
 */

:root {
    --gm-navy: #013f32;
    --gm-navy-light: #02594a;
    --gm-green: #e7fe25;
    --gm-green-dark: #cfe61f;
    --gm-green-light: #f3ffcf;
    --gm-bg: #fdfdfd;
    --gm-text: #161616;
    --gm-text-muted: #6b7280;
    --gm-border: #e6e6e4;
    --gm-radius: 20px;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--gm-text);
    background: var(--gm-bg);
}

/* ---------- Navbar ---------- */
/* Menu her zaman "fixed" (sayfanin en ustunde sabit) durur. Sayfa basinda saydam/koyu
   banner uzerinde beyaz metinle gorunur; asagi kaydirildiginda (.scrolled) beyaz
   zemine ve koyu metne geçer - bkz. layouts/site.php'deki scroll script'i. */
.gm-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    padding: 22px 0;
    background: rgba(1, 63, 50, 0.32);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.25s ease, padding 0.25s ease, box-shadow 0.25s ease;
}

.gm-navbar.scrolled {
    background: #fff;
    padding: 14px 0;
    box-shadow: 0 2px 16px rgba(1, 63, 50, 0.08);
}

.gm-navbar .navbar-brand {
    font-weight: 700;
    font-size: 1.35rem;
    color: #fff !important;
}

.gm-navbar.scrolled .navbar-brand {
    color: var(--gm-navy) !important;
}

/* Logo, menu koyu/saydam durumdayken de her zaman okunur kalsin diye hafif beyaz bir
   "chip" zemin uzerinde gosterilir (logo renginden bagimsiz calisir). */
.gm-navbar-logo-chip {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 10px;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
}

.gm-navbar-logo {
    height: 40px;
    max-width: 200px;
    width: auto;
    object-fit: contain;
}

/* Lime, beyaz/acik zemin uzerinde okunurlugu dusuk oldugu icin vurgu burada koyu yesil kullanilir. */
.gm-navbar .navbar-brand .accent {
    color: var(--gm-navy);
}

.gm-navbar .nav-link {
    font-weight: 500;
    color: #fff !important;
    padding: 8px 16px !important;
}

.gm-navbar.scrolled .nav-link {
    color: var(--gm-text) !important;
}

.gm-navbar .nav-link.active {
    color: var(--gm-green) !important;
    font-weight: 700;
}

.gm-navbar.scrolled .nav-link.active {
    color: var(--gm-navy) !important;
}

.gm-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.6);
}

.gm-navbar .navbar-toggler-icon {
    filter: invert(1) brightness(2);
}

.gm-navbar.scrolled .navbar-toggler {
    border-color: rgba(1, 63, 50, 0.2);
}

.gm-navbar.scrolled .navbar-toggler-icon {
    filter: none;
}

@media (max-width: 991px) {
    /* Mobilde acilan menu her zaman beyaz zeminde, okunur olmali. */
    .gm-navbar .navbar-collapse {
        background: #fff;
        border-radius: 16px;
        padding: 16px;
        margin-top: 12px;
        box-shadow: 0 12px 30px rgba(1, 63, 50, 0.15);
    }

    .gm-navbar .navbar-collapse .nav-link {
        color: var(--gm-text) !important;
    }

    .gm-navbar .navbar-collapse .nav-link.active {
        color: var(--gm-navy) !important;
    }
}

.btn-gm-primary {
    background: var(--gm-green);
    border-color: var(--gm-green);
    color: var(--gm-navy);
    border-radius: 12px;
    font-weight: 600;
    padding: 10px 24px;
}

.btn-gm-primary:hover {
    background: var(--gm-green-dark);
    border-color: var(--gm-green-dark);
    color: var(--gm-navy);
}

.btn-gm-outline {
    border: 1.5px solid var(--gm-navy);
    color: var(--gm-navy);
    border-radius: 12px;
    font-weight: 600;
    padding: 10px 24px;
}

.btn-gm-outline:hover {
    background: var(--gm-navy);
    color: #fff;
}

/* ---------- Sections ---------- */
.gm-section {
    padding: 96px 0;
}

.gm-section-title {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--gm-navy);
    letter-spacing: -0.02em;
}

.gm-section-subtitle {
    color: var(--gm-text-muted);
    font-size: 1.1rem;
    max-width: 640px;
}

/* ---------- Cards ---------- */
.gm-card {
    border-radius: var(--gm-radius);
    padding: 32px;
}

.gm-brand-card {
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-radius);
    padding: 32px;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: #fff;
}

.gm-brand-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(1, 63, 50, 0.1);
}

.gm-brand-card .logo-wrap {
    height: 64px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.gm-brand-card .logo-wrap img {
    max-height: 64px;
    max-width: 160px;
    object-fit: contain;
}

.gm-blog-card {
    border-radius: var(--gm-radius);
    overflow: hidden;
    border: 1px solid var(--gm-border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
}

.gm-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(1, 63, 50, 0.1);
}

.gm-blog-card .cover {
    height: 200px;
    background-size: cover;
    background-position: center;
    background-color: var(--gm-green-light);
}

.gm-blog-card .body {
    padding: 24px;
}

/* ---------- Hero / Sayfa ust banner'i ---------- */
/* Menu artik "fixed" oldugu icin (bkz. .gm-navbar) hero'nun ustten bosluğu, menu
   yuksekligini karsilayacak kadar buyuk tutulur; arka plan menu'nun ARKASINA kadar
   uzanir, boylece menu hero uzerinde "yuzuyor" gibi gorunur. */
.gm-hero {
    position: relative;
    background: linear-gradient(135deg, var(--gm-navy) 0%, var(--gm-navy-light) 100%);
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 190px 0 130px;
    overflow: hidden;
}

.gm-hero h1 {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* Hero icin admin panelinden arka plan gorseli yuklendiginde, gorselin uzerine
   metnin her zaman okunur kalmasi icin yari saydam koyu bir katman eklenir. */
.gm-hero.has-bg-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(1, 63, 50, 0.88) 0%, rgba(2, 89, 74, 0.78) 100%);
    z-index: 0;
}

/* Kosede dekoratif vurgu sekli (referans tasarimdaki kirmizi ceyrek daire motifinin
   marka rengimize uyarlanmis hali) - sadece CSS, harici gorsel gerektirmez. */
.gm-hero::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: var(--gm-green);
    opacity: 0.9;
    z-index: 0;
}

.gm-hero .container {
    position: relative;
    z-index: 1;
}

/* Ana sayfa disindaki tum sayfalarin ust banner'i icin daha kisa/sade varyant. */
.gm-hero-compact {
    padding: 170px 0 64px;
}

.gm-hero-compact h1 {
    font-size: 2.25rem;
}

.gm-hero-compact::after {
    width: 220px;
    height: 220px;
    right: -60px;
    bottom: -90px;
}

/* ---------- Marka vitrini (logo tile) ---------- */
.gm-brand-tile {
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-radius);
    padding: 40px 32px;
    height: 100%;
    text-align: center;
    background: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.gm-brand-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(1, 63, 50, 0.1);
    border-color: transparent;
}

.gm-brand-tile .logo-wrap {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.gm-brand-tile .logo-wrap img {
    max-height: 56px;
    max-width: 170px;
    object-fit: contain;
}

/* ---------- Iki sutunlu banner (koyu CTA / acik blog tanitimi) ---------- */
.gm-banner {
    border-radius: var(--gm-radius);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: stretch;
}

@media (max-width: 767px) {
    .gm-banner {
        grid-template-columns: 1fr;
    }
}

.gm-banner-dark {
    background: linear-gradient(135deg, var(--gm-navy) 0%, var(--gm-navy-light) 100%);
    color: #fff;
}

.gm-banner-content {
    padding: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gm-banner-dark .gm-section-title,
.gm-banner-dark .gm-section-subtitle {
    color: #fff;
}

.gm-banner-dark .gm-section-subtitle {
    opacity: 0.85;
}

.gm-banner-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    position: relative;
}

.gm-banner-dark .gm-banner-visual {
    background: rgba(255, 255, 255, 0.06);
}

.gm-banner-dark .gm-banner-visual i {
    font-size: 7rem;
    color: var(--gm-green);
    opacity: 0.9;
}

.gm-banner-light {
    background: var(--gm-green-light);
}

.gm-banner-light .gm-banner-visual {
    background: rgba(1, 63, 50, 0.04);
}

.gm-banner-light .gm-banner-visual i {
    font-size: 7rem;
    color: var(--gm-navy);
    opacity: 0.85;
}

.gm-banner-post-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px;
    width: 100%;
}

.gm-banner-post-list .post-chip {
    background: #fff;
    border-radius: 14px;
    padding: 14px 18px;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--gm-navy);
    box-shadow: 0 8px 20px rgba(1, 63, 50, 0.08);
    text-decoration: none;
    display: block;
    transition: transform 0.15s ease;
}

.gm-banner-post-list .post-chip:hover {
    transform: translateX(4px);
}

/* ---------- Footer ---------- */
.gm-footer {
    background: var(--gm-navy);
    color: rgba(255, 255, 255, 0.75);
    padding: 56px 0 24px;
}

.gm-footer a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
}

.gm-footer a:hover {
    color: var(--gm-green);
}

/* ---------- Zengin metin icerigi (Quill ile uretilen Sayfa/Blog icerigi) ---------- */
.gm-rich-content p {
    margin-bottom: 1rem;
}

.gm-rich-content ul,
.gm-rich-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.gm-rich-content a {
    color: var(--gm-navy);
    text-decoration: underline;
}

.gm-rich-content h2,
.gm-rich-content h3 {
    font-weight: 700;
    color: var(--gm-navy);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.gm-rich-content img {
    max-width: 100%;
    border-radius: 12px;
}