/* ═══════════════════════════════════════════════════════════════════════════
   NEWS — the blog and the homepage slider
   The same card in both places, so a post looks the same wherever it is read.
═══════════════════════════════════════════════════════════════════════════ */

.po-wrap {
    padding: 64px 0 96px;
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(900px 460px at 12% -6%, rgba(34, 211, 238, .10), transparent 62%),
        radial-gradient(760px 420px at 92% 8%, rgba(37, 99, 235, .12), transparent 64%);
    min-height: 60vh;
}
/* A consistent black 36% overlay behind both the blog index and article reader. */
.po-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(0, 0, 0, .36);
    pointer-events: none;
}
.po-wrap > .po-container { position: relative; z-index: 1; }
.po-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Tablet: use the available viewport width, with comfortable side gutters. */
@media (min-width: 641px) and (max-width: 1024px) {
    .po-container {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Mobile: never force the desktop 1240px layout onto a phone. */
@media (max-width: 640px) {
    .po-container {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 380px) {
    .po-container {
        padding-left: 12px;
        padding-right: 12px;
    }
}
.po-single { max-width: 820px; }

/* ── the page head ─────────────────────────────────────────────────────── */

.po-head { text-align: center; margin-bottom: 48px; }
.po-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 15px; border-radius: 999px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
    color: #22d3ee; background: rgba(34, 211, 238, .10);
    border: 1px solid rgba(34, 211, 238, .25);
}
.po-head h1 {
    margin: 18px 0 10px;
    font-size: clamp(30px, 5vw, 46px); font-weight: 800; color: #fff; letter-spacing: -.02em;
}
.po-head p { color: #7c8db0; font-size: 15px; max-width: 620px; margin: 0 auto; }

.po-search {
    display: flex; align-items: center; gap: 10px;
    max-width: 520px; margin: 26px auto 0;
    padding: 6px 6px 6px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(148, 163, 184, .16);
}
.po-search i { color: #5b6b8c; font-size: 13px; }
.po-search input {
    flex: 1; min-width: 0; background: none; border: 0; outline: none;
    color: #fff; font-size: 14px; padding: 8px 0;
}
.po-search input::placeholder { color: #5b6b8c; }
.po-search button {
    padding: 9px 20px; border-radius: 999px; border: 0; cursor: pointer;
    font-size: 12.5px; font-weight: 700; color: #04121f;
    background: linear-gradient(135deg, #22d3ee, #6366f1);
}

/* ── the cards ─────────────────────────────────────────────────────────── */

.po-grid {
    display: grid; gap: 22px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* Keep autocomplete above every article card (including transformed hover cards). */
.po-blog-head + .po-grid { position:relative; z-index:1; }

.po-card {
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(155deg, rgba(18, 23, 33, .92), rgba(8, 11, 17, .92));
    border: 1px solid rgba(148, 163, 184, .12);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.po-card:hover {
    transform: translateY(-4px);
    border-color: rgba(34, 211, 238, .3);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .42);
}

.po-thumb {
    position: relative; display: block;
    aspect-ratio: 16 / 9; overflow: hidden;
    background: #0b1223;
}
.po-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.po-thumb.is-empty {
    display: grid; place-items: center;
    background:
        radial-gradient(220px 140px at 50% 40%, rgba(34, 211, 238, .16), transparent 70%),
        #0b1223;
}
.po-thumb.is-empty i { font-size: 34px; color: rgba(34, 211, 238, .55); }
.po-lang {
    position: absolute; top: 10px; left: 10px;
    padding: 4px 9px; border-radius: 999px;
    font-size: 10px; font-weight: 800; letter-spacing: .08em;
    color: #fbbf24; background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(251, 191, 36, .35);
}

.po-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.po-body time {
    font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: #5b6b8c;
}
.po-body h2, .po-body h3 {
    margin: 9px 0 8px;
    font-size: 17px; font-weight: 700; line-height: 1.35; color: #fff; letter-spacing: -.01em;
}
.po-body h2 a, .po-body h3 a { color: inherit; }
.po-body h2 a:hover, .po-body h3 a:hover { color: #67e8f9; }
.po-body p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; color: #93a4c8; }

.po-more {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 700; color: #22d3ee;
}
.po-more i { font-size: 11px; transition: transform .2s ease; }
.po-more:hover i { transform: translateX(3px); }

.po-empty {
    text-align: center; padding: 60px 0; color: #7c8db0;
}
.po-empty i { font-size: 30px; opacity: .4; display: block; margin-bottom: 14px; }

.po-pager { margin-top: 34px; }
.po-pager nav { display: flex; justify-content: center; }
.po-pager .page-item .page-link {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(148, 163, 184, .14);
    color: #93a4c8; border-radius: 10px; margin: 0 3px;
}
.po-pager .active .page-link {
    background: rgba(34, 211, 238, .14);
    border-color: rgba(34, 211, 238, .35);
    color: #67e8f9;
}

/* ── one post ──────────────────────────────────────────────────────────── */

.po-crumbs {
    display: flex; align-items: center; gap: 9px;
    font-size: 12.5px; color: #5b6b8c; margin-bottom: 22px;
}
.po-crumbs a { color: #93a4c8; }
.po-crumbs a:hover { color: #67e8f9; }
.po-crumbs i { font-size: 9px; }

.po-article-head h1 {
    margin: 0 0 16px;
    font-size: clamp(26px, 4.4vw, 40px); font-weight: 800; line-height: 1.2;
    color: #fff; letter-spacing: -.02em;
}
.po-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
    font-size: 12.5px; color: #7c8db0; margin-bottom: 26px;
}
.po-meta i { margin-right: 5px; color: #5b6b8c; }
.po-badge {
    padding: 4px 10px; border-radius: 999px;
    font-size: 11px; color: #fbbf24;
    background: rgba(251, 191, 36, .08);
    border: 1px solid rgba(251, 191, 36, .25);
}

.po-hero {
    margin: 0 0 30px; border-radius: 20px; overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .14);
}
.po-hero img { width: 100%; height: auto; display: block; }

.po-content {
    font-size: 16px; line-height: 1.8; color: #c3cfe4;
}
.po-content h2, .po-content h3 { color: #fff; margin: 30px 0 12px; font-weight: 700; }
.po-content p { margin: 0 0 18px; }
.po-content a { color: #22d3ee; text-decoration: underline; }
.po-content img { max-width: 100%; border-radius: 14px; margin: 8px 0; }
.po-content ul, .po-content ol { margin: 0 0 18px 20px; }
.po-content li { margin-bottom: 8px; }
.po-content blockquote {
    margin: 0 0 18px; padding: 14px 18px;
    border-left: 3px solid rgba(34, 211, 238, .5);
    background: rgba(34, 211, 238, .05);
    border-radius: 0 12px 12px 0;
    color: #93a4c8;
}
.po-content code {
    padding: 2px 6px; border-radius: 6px; font-size: 13.5px;
    background: rgba(255, 255, 255, .07); color: #67e8f9;
}
.po-content table { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: 14px; }
.po-content th, .po-content td { padding: 10px 12px; border: 1px solid rgba(148, 163, 184, .16); text-align: left; }
.po-content th { background: rgba(255, 255, 255, .04); color: #fff; }

.po-article-foot {
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
    margin: 40px 0 0; padding-top: 24px;
    border-top: 1px solid rgba(148, 163, 184, .12);
}
.po-back, .po-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px; border-radius: 12px;
    font-size: 13px; font-weight: 700;
}
.po-back { color: #93a4c8; background: rgba(255, 255, 255, .04); border: 1px solid rgba(148, 163, 184, .14); }
.po-back:hover { color: #fff; }
.po-cta {
    color: #f8fbff;
    background: linear-gradient(135deg, #198fa3, #4a4da8);
    border: 1px solid rgba(148, 163, 184, .18);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .24);
}
.po-cta i { font-size: 16px; line-height: 1; }
.po-cta:hover {
    color: #fff;
    background: linear-gradient(135deg, #1da0b5, #5558b8);
}

.po-related { margin-top: 56px; }
.po-related h2 {
    font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 20px;
}

/* ── the homepage slider ───────────────────────────────────────────────── */

.po-slider { position: relative; }
.po-slider-track {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: minmax(300px, 1fr);
    gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    scrollbar-width: none;                 /* 2026-10-28: istifadəçi tələbi — scrollbar gizlədildi */
    -ms-overflow-style: none;
}
.po-slider-track > * { scroll-snap-align: start; }
.po-slider-track::-webkit-scrollbar { display: none; }   /* 2026-10-28: scrollbar gizlədildi */

.po-slider-arrows {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(8, 13, 24, .85);
    border: 1px solid rgba(148, 163, 184, .2);
    color: #cbd5e1; cursor: pointer; z-index: 3;
    backdrop-filter: blur(8px);
}
/* Category badges on news cards. */
.po-categories { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.po-category {
    display:inline-block;
    font-size:10.5px;
    font-weight:800;
    padding:3px 8px;
    border-radius:999px;
    color:#fff;
}
.po-slider-arrows:hover { color: #fff; border-color: rgba(34, 211, 238, .5); }
.po-slider-arrows[disabled] { opacity: .25; cursor: default; }
.po-slider-arrows.is-prev { left: -22px; }
.po-slider-arrows.is-next { right: -22px; }

@media (max-width: 640px) {
    .po-slider-arrows {
        /* 2026-10-28: mobil-də də oxlar görünür (toxunma + klik) */
        display: flex;
        width: 30px; height: 30px; font-size: 11px;
        top: 50%; transform: translateY(-50%);
    }
    .po-slider-arrows.is-prev { left: 4px; }
    .po-slider-arrows.is-next { right: 4px; }
    .po-slider-track {
        touch-action: pan-x;
        scrollbar-width: none;
    }
    .po-slider-track::-webkit-scrollbar { display: none; }
    .po-slider-track {
        grid-auto-columns: 85%;   /* hər kart ~85% en — swipe aydın hiss olunsun */
    }
    .po-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .po-card { padding: 12px; }
    .po-body { padding: 12px 12px 14px; }
    .po-body time { font-size: 10.5px; }
    .po-body h2 { font-size: 14px; line-height: 1.35; }
    .po-body h2 a { font-size: 14px; }
    .po-body p { font-size: 12px; line-height: 1.45; }
    .po-lang { font-size: 9px; padding: 2px 6px; }
    .po-wrap { padding: 40px 0 70px; }
}


/* Blog infinite scroll — same visual language as the existing News cards. */
.po-load-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; margin:34px auto 0; min-height:52px; }
.po-load-more {
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    min-height:46px; padding:0 24px; border-radius:999px;
    color:#04121f; font-size:13px; font-weight:800; text-decoration:none;
    background:linear-gradient(135deg,#22d3ee,#6366f1);
    box-shadow:0 10px 28px rgba(34,211,238,.16);
    transition:transform .18s ease,filter .18s ease,opacity .18s ease;
}
.po-load-more:hover { color:#04121f; filter:brightness(1.08); transform:translateY(-2px); }
.po-load-more.is-loading { opacity:.7; pointer-events:none; }
.po-load-more.is-loading i { animation:poLoadSpin .8s linear infinite; }
.po-load-status { min-height:16px; margin:0; color:#7c8db0; font-size:12px; }
@keyframes poLoadSpin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .po-load-more { transition:none; } .po-load-more.is-loading i { animation:none; } }


/* ── Blogs directory: category filters and live search ─────────────────── */
.po-blog-head {
    position: relative;
    z-index: 100;
    margin-bottom: 38px;
}
.po-blog-head h1 { margin-top: 17px; }
.po-category-nav {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin:25px auto 0;
}
.po-category-filter {
    display:inline-flex;
    align-items:center;
    gap:9px;
    min-height:38px;
    padding:7px 13px;
    border:1px solid rgba(148,163,184,.18);
    border-radius:999px;
    color:#aab8d0;
    background:rgba(255,255,255,.035);
    text-decoration:none;
    font-size:12.5px;
    font-weight:700;
    transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.po-category-filter:hover {
    color:#fff;
    border-color:rgba(34,211,238,.45);
    background:rgba(34,211,238,.08);
    transform:translateY(-1px);
}
.po-category-filter small {
    display:inline-grid;
    place-items:center;
    min-width:21px;
    height:21px;
    padding:0 5px;
    border-radius:999px;
    color:#9db3ce;
    background:rgba(148,163,184,.12);
    font-size:10px;
    font-weight:800;
}
.po-category-filter.is-active {
    color:#04121f;
    border-color:transparent;
    background:linear-gradient(120deg,#22d3ee,#8b8cf7);
}
.po-category-filter.is-active small {
    color:#fff;
    background:rgba(4,18,31,.25);
}
.po-category-filter:not(:first-child) { --filter-color:#22d3ee; }
.po-category-filter:not(:first-child):not(.is-active) {
    border-color:color-mix(in srgb,var(--filter-color) 38%,transparent);
}
.po-category-filter:not(:first-child):not(.is-active) small {
    color:var(--filter-color);
}
.po-search-wrap {
    position:relative;
    z-index:110;
    isolation:isolate;
    max-width:520px;
    margin:25px auto 0;
}
.po-search-wrap .po-search {
    max-width:none;
    margin:0;
}
.po-search-suggestions {
    position:absolute;
    z-index:120;
    top:calc(100% + 9px);
    left:0;
    right:0;
    max-height:360px;
    overflow-y:auto;
    padding:6px;
    border:1px solid rgba(103,232,249,.2);
    border-radius:16px;
    background:rgba(8,16,31,.98);
    box-shadow:0 22px 55px rgba(0,0,0,.48);
    backdrop-filter:blur(18px);
    text-align:left;
}
.po-search-suggestions[hidden] { display:none; }
.po-suggestion {
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:12px 13px;
    border-radius:11px;
    color:#e7f1ff;
    text-decoration:none;
    transition:background .15s ease;
}
.po-suggestion + .po-suggestion { border-top:1px solid rgba(148,163,184,.08); }
.po-suggestion:hover,
.po-suggestion[aria-selected="true"] {
    color:#fff;
    background:rgba(34,211,238,.10);
}
.po-suggestion strong {
    font-size:13px;
    line-height:1.4;
    font-weight:750;
}
.po-suggestion span {
    color:#8498b6;
    font-size:11.5px;
    line-height:1.45;
}
.po-suggestion-empty {
    padding:14px;
    color:#8ea2c1;
    font-size:12px;
    text-align:center;
}
@media(max-width:640px) {
    .po-category-nav {
        display:flex;
        flex-wrap:nowrap;
        justify-content:flex-start;
        overflow-x:auto;
        margin-left:-4px;
        margin-right:-4px;
        padding:2px 4px 8px;
        scrollbar-width:none;
        -ms-overflow-style:none;
    }
    .po-category-nav::-webkit-scrollbar { display:none; }
    .po-category-filter { flex:0 0 auto; min-height:36px; padding:6px 11px; font-size:11.5px; }
    .po-search-wrap { margin-top:17px; }
    .po-search { gap:8px; }
    .po-search button { padding:9px 14px; }
}
@media(prefers-reduced-motion:reduce) {
    .po-category-filter { transition:none; }
}

/* Homepage-only compact "What is new" carousel: category + title, no media. */
#news .po-slider-track { cursor: grab; touch-action: pan-x; }
#news .po-slider-track.is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
#news .po-home-news-card { min-height: 158px; }
#news .po-home-news-link {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 13px;
    min-height: 100%;
    padding: 22px 20px;
    color: inherit;
    text-decoration: none;
}
#news .po-home-news-link .po-categories { margin: 0; }
#news .po-home-news-link .po-category { font-size: 10px; line-height: 1.3; padding: 4px 9px; }
#news .po-home-news-link h3 {
    margin: 0;
    color: #f1f7ff;
    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 700;
    line-height: 1.38;
    letter-spacing: -.015em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
#news .po-home-news-link:hover h3 { color: #67e8f9; }
#news .news-all-posts { font-size: 14px; }
@media (min-width: 641px) {
    #news .news-all-posts { font-size: 16px; }
}
@media (max-width: 640px) {
    #news .po-slider-track {
        grid-auto-columns: calc((100% - 10px) / 2);
        gap: 10px;
        padding-bottom: 8px;
    }
    #news .po-home-news-card { min-height: 132px; border-radius: 13px; }
    #news .po-home-news-link { padding: 12px 10px; gap: 9px; }
    #news .po-home-news-link .po-category { font-size: 9px; padding: 3px 6px; }
    #news .po-home-news-link h3 { font-size: 12px; line-height: 1.35; -webkit-line-clamp: 3; }
    #news .news-all-posts { font-size: 14px; }
}
@media (max-width: 360px) {
    #news .po-home-news-link { padding: 10px 8px; }
    #news .po-home-news-link h3 { font-size: 11.5px; }
}

/* Homepage news cards: restore image and date; keep category/title, omit excerpt. */
#news .po-home-news-card { min-height: 0; }
#news .po-home-news-link { display:flex; flex:1; flex-direction:column; min-width:0; color:inherit; text-decoration:none; }
#news .po-home-news-image {
    display:block;
    width:100%;
    aspect-ratio:16 / 9;
    overflow:hidden;
    flex:0 0 auto;
    background:#0b1729;
}
#news .po-home-news-image img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
#news .po-home-news-card:hover .po-home-news-image img { transform:scale(1.035); }
#news .po-home-news-image.is-empty { display:grid; place-items:center; background:radial-gradient(220px 140px at 50% 40%,rgba(34,211,238,.16),transparent 70%),#0b1223; }
#news .po-home-news-image.is-empty i { color:rgba(103,232,249,.6); font-size:32px; }
#news .po-home-news-content { display:flex; flex:1; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; padding:15px 16px 17px; }
#news .po-home-news-content .po-categories { display:flex; flex-wrap:wrap; gap:6px; margin:0; }
#news .po-home-news-content .po-category { padding:3px 8px; border-radius:999px; font-size:10px; line-height:1.3; font-weight:800; }
#news .po-home-news-content h3 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; margin:0; color:#f1f7ff; font-size:16px; font-weight:700; line-height:1.38; letter-spacing:-.015em; }
#news .po-home-news-content time { margin-top:auto; padding-top:3px; color:#8498b6; font-size:11px; font-weight:600; letter-spacing:.025em; }
#news .po-home-news-link:hover h3 { color:#67e8f9; }
@media (max-width:640px) {
    #news .po-home-news-content { gap:6px; padding:9px 9px 11px; }
    #news .po-home-news-content .po-category { padding:2px 6px; font-size:9px; }
    #news .po-home-news-content h3 { font-size:11.5px; line-height:1.34; -webkit-line-clamp:3; }
    #news .po-home-news-content time { font-size:9px; }
    #news .po-home-news-image.is-empty i { font-size:24px; }
}
@media (max-width:360px) {
    #news .po-home-news-content { padding:8px 7px 9px; }
    #news .po-home-news-content h3 { font-size:11px; }
}
@media (prefers-reduced-motion:reduce) {
    #news .po-home-news-image img { transition:none; }
}
#news .po-home-news-link { align-items:stretch; justify-content:flex-start; gap:0; min-height:0; padding:0; }


/* Homepage carousel: lighter page framing, fuller cards and centered round arrows. */
#news { background:transparent !important; padding-top:54px !important; padding-bottom:58px !important; }
#news .po-slider-arrows {
    display:grid !important; place-items:center !important;
    align-content:center !important; justify-content:center !important;
    padding:0 !important; line-height:1 !important; text-align:center !important;
    top:50% !important; transform:translateY(-50%) !important;
}
#news .po-slider-arrows i { display:block; line-height:1; margin:0; }
#news .po-home-news-content { padding:12px 13px 14px; }
@media (max-width:640px) {
    #news { padding:40px 10px 46px !important; }
    #news .po-slider-arrows { width:32px !important; height:32px !important; }
    #news .po-slider-arrows.is-prev { left:3px !important; }
    #news .po-slider-arrows.is-next { right:3px !important; }
    #news .po-home-news-content { padding:8px 8px 10px; }
}