/*
 * Edebiyar: header, logo and typography.
 * Loaded after style.css and mobile.css, so it wins without !important.
 * Measurements come from brand/edebiyar/LOGO-ve-MARKA-REHBERI.md.
 *
 * The header has two forms:
 *   .eb-header--hero  home page only: cliff picture, big logo, slogan, logo motion
 *   .eb-header--bar   every other page: a slim navy bar so the article starts on the first screen
 */

:root {
    --eb-navy: #1a2a42;
    --eb-navy-deep: #0f1c2d;
    --eb-red: #e74c3c;
    --eb-glow: rgba(255, 60, 40, .9);
    --eb-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --eb-text: 'Literata', Georgia, serif;
}

/* ---------- typography ---------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--eb-display);
    font-weight: 600;
    letter-spacing: 0;
}
/* base.html forces Poppins onto every span; text wrapped in a span inside a heading keeps the heading's face */
:is(h1, h2, h3, h4, h5, h6) span { font-family: inherit; }

/* Long reading text is set in a serif; menus, labels and dates stay in Poppins.
   base.html forces Poppins onto every p/a/span, so the elements inside are named here too. */
.post-content,
.post-content :is(p, li, blockquote, span, a, em, strong, i, b, u) {
    font-family: var(--eb-text);
}
.post-content {
    font-size: 1.2rem;
    line-height: 1.75;
}
@media (max-width: 576px) {
    .post-content { font-size: 1.1rem; }
}

/* ---------- header ---------- */

.eb-header {
    position: relative;
    background: linear-gradient(to bottom, var(--eb-navy), var(--eb-navy-deep));
    color: #fff;
    text-align: center;
    margin-bottom: 2rem;
    overflow: hidden;
}

.eb-header__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.eb-home,
.eb-home:hover,
.eb-home:focus {
    color: #fff;
    text-decoration: none;
}

.eb-header--hero {
    min-height: 380px;
    padding: 2.6rem 1rem 4.6rem;
    background: var(--eb-navy-deep) url('../img/edebiyar-baslik.jpg') 70% 66% / cover no-repeat;
}

/* the guide's dark veil: lighter in the middle, darker at the foot */
.eb-header--hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(15, 28, 45, .25), rgba(15, 28, 45, .08) 50%, rgba(15, 28, 45, .6));
    pointer-events: none;
}

.eb-header--bar {
    padding: .7rem 1rem 1.1rem;
}

@media (max-width: 576px) {
    .eb-header--hero {
        min-height: 250px;
        padding: 1.5rem 1rem 2.4rem;
        background-position: 72% 50%;
    }
    .eb-header { margin-bottom: 1rem; }
}

/* ---------- logo ---------- */

.eb-logo {
    display: inline-flex;
    align-items: center;
    margin: 0;
    color: #fff;
    font-family: var(--eb-display);
    font-weight: 600;
    font-variation-settings: 'opsz' 144;
    font-size: 3.1rem;
    line-height: 1.2;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(255, 255, 255, .3);
    white-space: nowrap;
}

.eb-header--bar .eb-logo { font-size: 1.55rem; }

@media (max-width: 992px) { .eb-header--hero .eb-logo { font-size: 2.5rem; } }
@media (max-width: 576px) {
    .eb-header--hero .eb-logo { font-size: 1.65rem; }
    .eb-header--bar .eb-logo { font-size: 1.3rem; }
}

.eb-part { letter-spacing: .06em; }
.eb-logo span { font-family: var(--eb-display); } /* beats base.html's span { Poppins } */

.eb-crack {
    display: inline-block;
    width: .16em;
    height: 2.2em;
    margin: 0 .45em 0 .62em; /* a little more room on the İ side: Fraunces is tighter than Poppins */
    background: linear-gradient(to bottom, transparent 0, var(--eb-red) 22%, var(--eb-red) 78%, transparent 100%);
    box-shadow: 0 0 14px var(--eb-glow);
    transform: skewX(-14deg);
    transform-origin: 50% 0;
    border-radius: 2px;
    transition: box-shadow .4s ease;
}

/*
 * YAR sits in three nested spans so no two movements fight over `transform`:
 *   .eb-sink  the resting drop below the line, plus the hover drop
 *   .eb-drop  the one-time fall when the home page opens
 *   .eb-idle  the sway every 6 seconds
 */
.eb-sink {
    display: inline-block;
    transform: translateY(.42em);
    transition: transform .65s cubic-bezier(.34, 1.7, .5, 1); /* springs back up when the pointer leaves */
}
.eb-drop,
.eb-idle { display: inline-block; }
.eb-idle {
    color: var(--eb-red);
    text-shadow: 0 0 14px rgba(255, 60, 40, .7);
    transform-origin: 0 0; /* hangs from the crack's edge */
}

.eb-home:hover .eb-sink {
    transform: translateY(.85em);
    transition: transform .38s cubic-bezier(.55, 0, .9, .4);
}
.eb-home:hover .eb-crack {
    box-shadow: 0 0 26px rgba(255, 60, 40, 1), 0 0 50px rgba(255, 60, 40, .45);
}

/* every page: the crack breathes slowly, like the lantern in the fog */
.eb-crack { animation: eb-breathe 4.5s ease-in-out infinite; }

/* home page only: YAR sways from the edge every 6 seconds */
.eb-header--hero .eb-idle { animation: eb-sway 6s ease-in-out 3s infinite; }

/* home page, once per visit (html.eb-intro is set by a small script in base.html):
   the crack splits open, YAR falls in, bounces twice, the crack flashes on impact */
.eb-intro .eb-header--hero .eb-crack {
    animation: eb-open .45s cubic-bezier(.2, .8, .2, 1) both,
               eb-impact .6s ease-out 1.05s,
               eb-breathe 4.5s ease-in-out 2.2s infinite;
}
.eb-intro .eb-header--hero .eb-drop { animation: eb-fall 1.25s linear .4s both; }

@keyframes eb-breathe {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 60, 40, .55); opacity: .82; }
    50% { box-shadow: 0 0 22px rgba(255, 60, 40, 1), 0 0 40px rgba(255, 60, 40, .35); opacity: 1; }
}
@keyframes eb-open {
    from { transform: skewX(-14deg) scaleY(0); opacity: 0; }
    to { transform: skewX(-14deg) scaleY(1); opacity: 1; }
}
@keyframes eb-fall {
    0% { transform: translateY(-1.1em); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    12% { opacity: 1; }
    52% { transform: translateY(.32em); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
    70% { transform: translateY(-.16em); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
    84% { transform: translateY(.08em); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
    93% { transform: translateY(-.03em); }
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes eb-impact {
    0% { box-shadow: 0 0 34px rgba(255, 80, 60, 1), 0 0 70px rgba(255, 60, 40, .6); }
    100% { box-shadow: 0 0 14px var(--eb-glow); }
}
@keyframes eb-sway {
    0% { transform: rotate(0); }
    5% { transform: rotate(6deg); }
    10% { transform: rotate(-3.5deg); }
    15% { transform: rotate(2deg); }
    20% { transform: rotate(-.8deg); }
    25%, 100% { transform: rotate(0); }
}

/* ---------- slogan ---------- */

.eb-slogan {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 1.6rem 0 0;
    color: rgba(255, 255, 255, .92);
    font-family: var(--eb-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.12rem;
    letter-spacing: .01em;
}
.eb-slogan::before,
.eb-slogan::after {
    content: '';
    width: 3rem;
    height: 1px;
    background: rgba(255, 255, 255, .55);
}
@media (max-width: 576px) {
    .eb-slogan { font-size: .86rem; gap: 8px; margin-top: 1.1rem; }
    .eb-slogan::before,
    .eb-slogan::after { width: 1.4rem; }
}

/* ---------- people who asked for less motion get none ---------- */

@media (prefers-reduced-motion: reduce) {
    .eb-header *,
    .eb-header *::before,
    .eb-header *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- post page: byline and related posts ---------- */

.post-detail .post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: .9rem;
    color: #5a6778;
}
.post-detail .post-meta span { margin: 0; }
.post-detail .post-meta i { margin-right: .3rem; opacity: .75; }
.post-detail .post-author { color: var(--eb-navy); font-weight: 600; }

.related-posts {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e3e7ed;
}
.related-title {
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
}
.related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}
@media (max-width: 768px) {
    .related-grid { grid-template-columns: 1fr; }
}
.related-card {
    display: grid;
    gap: .3rem;
    align-content: start;
    color: inherit;
    text-decoration: none;
}
.related-card:hover .related-name { color: var(--eb-red); }
.related-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: .4rem;
    background: #eef1f5;
}
.related-cat {
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    color: #5a6778;
}
.related-name {
    font-family: var(--eb-display);
    font-weight: 600;
    font-size: 1.08rem;
    line-height: 1.3;
    color: var(--eb-navy);
    transition: color .2s ease;
}
.related-meta {
    font-size: .8rem;
    color: #5a6778;
}

/* Section titles were inline-block, so two in a row (search: results + "Hikayeler")
   ran onto one line. Block + fit-content keeps the short underline under the text. */
.section-title {
    display: block;
    width: fit-content;
}

/* ---------- about page ---------- */

.about-page .post-content h2 {
    font-size: 1.45rem;
    margin: 2.2rem 0 .8rem;
}
.about-imprint {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .4rem 1.5rem;
    margin: 0;
}
.about-imprint dt { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: .95rem; color: #5a6778; }
.about-imprint dd { margin: 0; }
@media (max-width: 576px) {
    .about-imprint { grid-template-columns: 1fr; gap: 0; }
    .about-imprint dd { margin-bottom: .6rem; }
}