/* ============================================================
   FIMAK — haber-detay.css
   Yalnizca haber-detay.php'de yuklenir; style.css'i tamamlar.
   "Diger haberler" bolumundeki kartlar css/haberler.css'teki
   .nw-card kurallarini yeniden kullanir; buradaki kurallar yalnizca
   olcuyu bu sayfaya gore ayarlar.

   Bolumler
   1. Ortak kapsayici, okuma ilerlemesi
   2. Baslik alani (sayfa yolu, ust bilgi, kapak)
   3. Paylas cubugu
   4. Makale tipografisi
   5. Galeri, bilgi kutulari, etiketler, onceki/sonraki
   6. Diger haberler
   7. Onizleme penceresi ve bildirim
   8. Responsive (tum media query'ler burada)

   Olculer akiskan: clamp ile 375px -> 1920px arasi dogrusal buyur.
   Renkler style.css'teki :root degiskenlerinden okunur.
   ============================================================ */


/* ------------------------------------------------------------
   1. Ortak kapsayici, okuma ilerlemesi
   ------------------------------------------------------------ */
.hd {
    --hd-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* Makale zemini: kart ve kutular beyaz kalsin diye govde acik gri */
    background-color: var(--surface-alt);

    /* style.css'teki govde degerlerini notrle */
    letter-spacing: normal;
    line-height: normal;
}

/* Yapiskan basligin hemen altinda duran ince okuma cubugu */
.hd-progress {
    position: fixed;
    top: var(--nav-height, 44px);
    right: 0;
    left: 0;
    z-index: 50;
    height: 3px;
    background: transparent;
    pointer-events: none;
}

.hd-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--brand);
    transform: scaleX(0);
    transform-origin: left;
}

.hd-wrap {
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 80px);
}

.hd-related .hd-wrap { max-width: 1440px; }


/* ------------------------------------------------------------
   2. Baslik alani
   Sol sutun paylas cubugu icin ayrilir; makale sagdaki genis
   sutunda durur ve ikisi ayni izgarayi paylasir.
   ------------------------------------------------------------ */
/* Tek izgara: solda paylas rayi, sagda once baslik sonra makale.
   Ikisi ayri izgara olsaydi ray ancak kapak gorselinin altindan
   baslar, basligin yanindaki sutun bos kalirdi. */
.hd-grid {
    display: grid;
    grid-template-columns: clamp(60px, 9vw, 160px) minmax(0, 1110px);
    grid-template-rows: auto auto;
    justify-content: end;
    column-gap: clamp(20px, 5.5vw, 110px);
    padding-top: clamp(40px, 5vw, 90px);
    padding-bottom: clamp(60px, 6vw, 110px);
}

.hd-head__inner {
    grid-area: 1 / 2;
    min-width: 0;
}

.hd-crumb {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    list-style: none;
}

.hd-crumb a {
    /* style.css'te a { color: var(--brand-dark); } var */
    color: inherit;
    transition: color 0.3s ease;
}

.hd-crumb a:hover { color: var(--brand); }

.hd-crumb li + li::before {
    content: "/";
    margin-right: 10px;
    color: var(--border);
}

.hd-crumb [aria-current] { color: var(--text); }

.hd-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-top: clamp(22px, 2vw, 34px);
    font-size: 14px;
    color: var(--text-secondary);
}

.hd-chip {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border-radius: 30px;
    background-color: var(--brand);
    font-size: 13px;
    font-weight: 500;
    color: #fff;
}

.hd-chip:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
}

.hd-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.hd-meta svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hd-title {
    margin-top: 18px;
    font-size: clamp(30px, 3.1vw, 56px);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--text);
    text-wrap: balance;
}

.hd-cover {
    margin-top: clamp(30px, 3vw, 50px);
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 21 / 9;
}

/* Gorsel gelmeden once: notr yer tutucu, kirik gorsel yerine */
.hd-img {
    position: relative;
    overflow: hidden;
    background-color: var(--border);
}

.hd-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hd-img__ph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 13px;
    text-align: center;
    color: var(--text-secondary);
}

.hd-img__ph svg {
    display: block;
    width: 36px;
    height: 36px;
    margin: 0 auto 6px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
}


/* ------------------------------------------------------------
   3. Paylas cubugu
   ------------------------------------------------------------ */
.hd-share {
    /* Iki satiri da kapsar: ray sayfa yolunun hizasindan baslar */
    grid-area: 1 / 1 / 3 / 2;
    position: sticky;
    /* Yapiskan baslik ustune binmesin */
    top: calc(var(--nav-height, 44px) + clamp(16px, 4vh, 40px));
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 17px;
    padding-top: 6px;
}

.hd-share__label {
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.hd-share a,
.hd-share button {
    position: relative;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background-color: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.35s var(--hd-ease), color 0.35s ease,
        border-color 0.35s ease, transform 0.35s var(--hd-ease);
}

.hd-share svg {
    width: 22px;
    height: 22px;
}

.hd-share a:hover,
.hd-share button:hover {
    border-color: var(--brand);
    background-color: var(--brand);
    color: #fff;
    transform: translateY(-2px);
}

.hd-share a:focus-visible,
.hd-share button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

/* Dugmenin yanindaki kucuk ipucu; data-tip niteliginden okunur */
.hd-share [data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: 50%;
    left: calc(100% + 12px);
    padding: 5px 10px;
    border-radius: 6px;
    background-color: var(--text);
    font-size: 12px;
    white-space: nowrap;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transform: translate(-4px, -50%);
    transition: opacity 0.25s ease, transform 0.3s var(--hd-ease);
}

.hd-share [data-tip]:hover::after,
.hd-share [data-tip]:focus-visible::after {
    opacity: 1;
    transform: translate(0, -50%);
}


/* ------------------------------------------------------------
   4. Makale tipografisi
   ------------------------------------------------------------ */
.hd-article {
    grid-area: 2 / 2;
    min-width: 0;
    /* Kapak gorseli ile makale arasindaki bosluk */
    margin-top: clamp(30px, 3vw, 50px);
}

.hd-article > * + * { margin-top: clamp(18px, 1.6vw, 28px); }

.hd-article p,
.hd-article li {
    font-size: clamp(16px, 1.05vw, 19px);
    line-height: 1.9;
    color: var(--text-secondary);
}

.hd-article .hd-lead {
    font-size: clamp(17px, 1.15vw, 21px);
    color: var(--text);
}

.hd-article h2 {
    margin-top: clamp(36px, 3vw, 56px);
    font-size: clamp(26px, 2.6vw, 50px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--text);
    scroll-margin-top: calc(var(--nav-height, 44px) + 24px);
}

.hd-article h3 {
    margin-top: clamp(30px, 2.6vw, 48px);
    font-size: clamp(22px, 2vw, 40px);
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
}

.hd-article strong {
    font-weight: 600;
    color: var(--text);
}

.hd-article a { color: var(--brand); }

.hd-article ul,
.hd-article ol { padding-left: 1.15em; }

.hd-article ul li::marker { color: var(--text); }
.hd-article li + li { margin-top: 8px; }

/* Govdesi henuz yazilmamis haberlerde gorunen not */
.hd-empty {
    padding: clamp(24px, 2.4vw, 36px);
    border: 1px dashed var(--border);
    border-radius: 12px;
    text-align: center;
}


/* ------------------------------------------------------------
   5. Galeri, bilgi kutulari, etiketler, onceki/sonraki
   ------------------------------------------------------------ */
.hd-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, 1.3vw, 25px);
    /* Kardes secici margin'ini ezer: galeri daha genis nefes alsin */
    margin-top: clamp(30px, 2.6vw, 46px) !important;
}

.hd-gallery .hd-img {
    aspect-ratio: 543 / 356;
    border-radius: 8px;
    cursor: zoom-in;
}

.hd-gallery .hd-img img { transition: transform 0.8s var(--hd-ease); }
.hd-gallery .hd-img:hover img { transform: scale(1.04); }

.hd-gallery .hd-img:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

.hd-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 0 !important;
    list-style: none;
}

.hd-info li {
    margin: 0 !important;
    padding: 20px 22px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--surface);
    line-height: 1.5 !important;
}

.hd-info small {
    display: block;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.hd-info b {
    display: block;
    margin-top: 6px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.hd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: clamp(36px, 3vw, 56px) !important;
    padding-top: clamp(28px, 2.4vw, 40px);
    border-top: 1px solid var(--border);
}

.hd-tags a {
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 30px;
    background-color: var(--surface);
    font-size: 13px;
    color: var(--text-secondary);
    transition: border-color 0.3s ease, color 0.3s ease;
}

.hd-tags a:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.hd-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: clamp(30px, 2.6vw, 44px) !important;
}

.hd-pager a {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 24px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--surface);
    transition: border-color 0.35s var(--hd-ease), transform 0.35s var(--hd-ease);
}

.hd-pager a:last-child { text-align: right; }

/* Tek bag kaldiysa (ilk ya da son haber) sol sutunda ve sola yasli dursun */
.hd-pager a:only-child {
    grid-column: 1;
    text-align: left;
}

.hd-pager small {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.hd-pager span {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--text);
}

.hd-pager a:hover {
    border-color: var(--brand);
    transform: translateY(-2px);
}

.hd-pager a:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}


/* ------------------------------------------------------------
   6. Diger haberler
   Kart kurallari css/haberler.css'ten gelir; burada yalnizca
   bu sayfadaki olcu ayarlanir.
   ------------------------------------------------------------ */
.hd-related {
    padding-block: clamp(56px, 5.5vw, 100px);
    background-color: var(--surface);
}

.hd-related__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: clamp(28px, 2.6vw, 48px);
}

.hd-related h2 {
    font-size: clamp(26px, 2.2vw, 42px);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text);
}

.hd-related__all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 24px;
    border: 1px solid var(--border);
    border-radius: 40px;
    font-size: 14px;
    color: var(--text);
    transition: border-color 0.35s ease, color 0.35s ease;
}

.hd-related__all:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.hd-related__all:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

.hd-related__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.4vw, 23px);
}

.hd-related .nw-card { min-height: clamp(260px, 20vw, 340px); }


/* ------------------------------------------------------------
   7. Onizleme penceresi ve bildirim
   visibility ile kapatilir (display:none degil): gecisler calisir
   ve kapaliyken ic ogeler sekme sirasindan cikar.
   ------------------------------------------------------------ */
.hd-lb {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 24px;
    background-color: rgb(8 8 10 / 0.9);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.hd-lb.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease;
}

.hd-lb__box {
    width: 100%;
    max-width: min(1200px, 94vw);
    max-height: 86vh;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 543 / 356;
}

.hd-lb__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background-color: var(--surface);
    font-size: 24px;
    line-height: 1;
    color: var(--text);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.hd-lb__close:hover {
    background-color: var(--brand);
    color: #fff;
}

.hd-lb__close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.hd-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    z-index: 120;
    padding: 12px 20px;
    border-radius: 40px;
    background-color: var(--text);
    font-size: 14px;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 20px);
    transition: opacity 0.3s ease, transform 0.4s var(--hd-ease);
}

.hd-toast.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}


/* ------------------------------------------------------------
   8. Responsive
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
    .hd-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hd-related__grid > :nth-child(3) { display: none; }
}

@media (max-width: 860px) {
    /* Paylas sutunu kalkar, cubuk makalenin ustune yatay gecer */
    .hd-grid { grid-template-columns: 1fr; }

    .hd-head__inner { grid-area: 1 / 1; }
    .hd-article { grid-area: 3 / 1; }

    .hd-share {
        grid-area: 2 / 1;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px;
        margin-bottom: 6px;
        padding: 0 0 26px;
        border-bottom: 1px solid var(--border);
    }

    .hd-share__label {
        margin: 0 6px 0 0;
        writing-mode: horizontal-tb;
        transform: none;
    }

    .hd-share a,
    .hd-share button {
        width: 42px;
        height: 42px;
    }

    .hd-share svg {
        width: 19px;
        height: 19px;
    }

    .hd-share [data-tip]::after { display: none; }

    .hd-info { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .hd-gallery { grid-template-columns: 1fr; }
    .hd-cover { aspect-ratio: 4 / 3; }

    .hd-pager { grid-template-columns: 1fr; }
    .hd-pager a:last-child { text-align: left; }

    .hd-related__grid { grid-template-columns: 1fr; }
    .hd-related__grid > :nth-child(3) { display: flex; }

    .hd-related__head {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media print {

    .hd-progress,
    .hd-share,
    .hd-related,
    .hd-pager,
    .hd-tags { display: none !important; }

    .hd { background-color: #fff; }
    .hd-grid { display: block; }
}

@media (prefers-reduced-motion: reduce) {

    .hd-crumb a,
    .hd-share a,
    .hd-share button,
    .hd-share [data-tip]::after,
    .hd-gallery .hd-img img,
    .hd-tags a,
    .hd-pager a,
    .hd-related__all,
    .hd-lb,
    .hd-lb__close,
    .hd-toast { transition: none; }

    .hd-gallery .hd-img:hover img { transform: none; }
    .hd-pager a:hover { transform: none; }
    .hd-share a:hover,
    .hd-share button:hover { transform: none; }
}