/* ============================================================
   RIVERMOUTH — Fish Hunter tema katmani
   main.css'ten SONRA yuklenir; degiskenleri yeniden tanimlar +
   main.css'teki sabit-kodlu turuncu (#E8420A / rgba(232,66,10,*))
   kullanimlarini ayni secicilerle ezer. Bkz. proje hafizasi:
   theme-layer-css-strategy.
   ============================================================ */

:root {
    /* Ana marka rengi: derin gol/nehir mavisi (teal) */
    --clr-primary:    #0F7A8C;
    --clr-primary-dk: #0B5966;

    /* Notr tonlar — soguk lacivert-antrasit, mavi ile uyumlu */
    --clr-dark:       #101B24;
    --clr-dark-2:     #1C2B33;
    --clr-dark-3:     #33454E;
    --clr-gray:       #5C6B72;
    --clr-light:      #F5F7F6;
    --clr-white:      #ffffff;
    --clr-border:     #DDE3E2;

    /* Ikincil vurgu — pirinç/olta tonu; sadece hero ve rozetlerde */
    --clr-accent-brass:    #C9862F;
    --clr-accent-brass-dk: #A76B22;

    --ff-display: 'Big Shoulders Display', sans-serif;
    --ff-body:    'Karla', sans-serif;
}

/* Big Shoulders Display kucuk harflerde zayif duruyor — baslik
   siniflarinda gorunumu daha "gear/tackle" hissettiren buyuk harf +
   hafif izleme mesafesi ile guclendiriliyor. */
h1, h2, h3, .card__title, .cat-card__title {
    letter-spacing: .01em;
}

/* ── Buton vurgu golgesi — main.css'te turuncu sabit kodluydu ── */
.btn--primary:hover {
    box-shadow: 0 4px 15px rgba(15,122,140,.35);
}

/* ── Nav / dropdown / mega menu — sabit turuncu overlay'ler ──── */
.nav__link:hover,
.nav__link.active {
    background: rgba(15,122,140,.07);
}
.dropdown__item:hover { background: rgba(15,122,140,.07); }

.nav-toggle {
    box-shadow: 0 2px 8px rgba(15,122,140,.35);
}
.nav-toggle:hover {
    box-shadow: 0 4px 14px rgba(15,122,140,.5);
}

/* Kategori/CTA "pill" rozetler */
.cat-card:hover { box-shadow: 0 0 0 3px rgba(15,122,140,.1); }
.cat-card__icon { background: rgba(15,122,140,.1); }

.form-control:focus { box-shadow: 0 0 0 3px rgba(15,122,140,.1); }

.mega-menu__cat-item:hover { background: rgba(15,122,140,.07); }
.mega-menu__cat-item em    { background: rgba(15,122,140,.1); }
.mega-menu__link:hover     { background: rgba(15,122,140,.07); }
.mega-menu__count          { background: rgba(15,122,140,.1); }
.mega-menu__post:hover     { background: rgba(15,122,140,.07); }

/* main.css'in ic ice mobil kirilma noktalarini (768/900/991/1024) tek tek
   eslemek yerine en genis olani (1024px) kullaniliyor — hicbir ara genislik
   bosta kalmiyor, cascade sirasi (bu dosya sonra yuklenir) geri kalanini
   halleder. */
@media (max-width: 1024px) {
    .nav__link:hover,
    .nav__link.active {
        background: linear-gradient(90deg, rgba(15,122,140,.25) 0%, rgba(15,122,140,.05) 100%) !important;
    }
    .dropdown__item:hover { background: rgba(15,122,140,.12) !important; }
    .dropdown { border-left: 3px solid rgba(15,122,140,.3); }
    .mega-menu { border-left: 3px solid rgba(15,122,140,.3) !important; }
    .mega-menu__cat-item:hover  { background: rgba(15,122,140,.12) !important; }
    .mega-menu__link:hover      { background: rgba(15,122,140,.12) !important; }
    .mega-menu__all-link        { border-color: rgba(15,122,140,.5) !important; }
    .mega-menu__post:hover      { background: rgba(15,122,140,.12) !important; }
}

/* ── CTA kutusu — gradyanin ikinci ucu sabit kodluydu ────────── */
.post-cta {
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dk));
}

/* ============================================================
   HERO — [hero] shortcode'unun ciktisi (site-hero / hero-*)
   main.css'te hic stili yok; tema bunu saglar.
   ============================================================ */
.site-hero {
    position: relative;
    overflow: hidden;
    padding: 88px 0 76px;
    background: linear-gradient(160deg, var(--clr-dark) 0%, var(--clr-primary-dk) 130%);
    color: #fff;
}
.site-hero .hero-bg {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 85% 20%, rgba(201,134,47,.16), transparent 55%),
        radial-gradient(circle at 10% 90%, rgba(15,122,140,.35), transparent 50%);
    pointer-events: none;
}
.site-hero .hero-ornament {
    position: absolute;
    right: -60px;
    bottom: -40px;
    width: 320px;
    height: 320px;
    border: 2px solid rgba(255,255,255,.08);
    border-radius: 50%;
    pointer-events: none;
}
.site-hero .hero-ornament::before {
    content: "";
    position: absolute;
    inset: 34px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
}
.site-hero .container {
    position: relative;
    z-index: 1;
}
.site-hero .hero-content {
    max-width: 640px;
}
.site-hero .hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(201,134,47,.16);
    border: 1px solid rgba(201,134,47,.4);
    color: #F0C27E;
    font-family: var(--ff-body);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.site-hero .hero-tag i { color: var(--clr-accent-brass); }
.site-hero .hero-title {
    font-family: var(--ff-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .01em;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    line-height: 1.05;
    margin: 0 0 18px;
    color: #fff;
}
.site-hero .hero-subtitle {
    font-family: var(--ff-body);
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255,255,255,.82);
    margin: 0 0 30px;
    max-width: 52ch;
}
.site-hero .hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.site-hero .btn--secondary {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,.35);
}
.site-hero .btn--secondary:hover {
    background: rgba(255,255,255,.1);
    border-color: #fff;
}

@media (max-width: 600px) {
    .site-hero { padding: 64px 0 52px; }
    .site-hero .hero-ornament { display: none; }
}