.page-doc-v2 {
    background: #050505;
    overflow: hidden;
}

/* HERO */
.page-doc-hero {
    position: relative;
    padding: 110px 0 170px;

    background:
        radial-gradient(circle at 15% 20%, rgba(193, 18, 31, .34), transparent 30%),
        radial-gradient(circle at 85% 10%, rgba(150, 150, 150, .16), transparent 28%),
        linear-gradient(135deg, #030303 0%, #111418 45%, #2b2f34 100%);
}

.page-doc-hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px);

    background-size: 48px 48px;
    opacity: .45;
}

.page-doc-hero .container {
    position: relative;
    z-index: 2;
}

.doc-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 9px 18px;
    border-radius: 999px;

    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .10);

    color: #fff;
    font-weight: 900;

    margin-bottom: 22px;
}

.page-doc-hero h1 {
    color: #fff;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1.05;
    letter-spacing: -2px;
    margin-bottom: 20px;
}

.page-doc-hero p {
    color: rgba(255, 255, 255, .72);
    font-size: 18px;
    max-width: 760px;
    margin: auto;
}

.page-doc-hero .breadcrumb a {
    color: #fff;
}

.page-doc-hero .breadcrumb .active {
    color: rgba(255, 255, 255, .55);
}

/* MAIN */
.page-doc-wrapper {
    padding-bottom: 100px;
}

.page-doc-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 28px;

    margin-top: -90px;
    position: relative;
    z-index: 5;
}

.page-doc-main {
    border-radius: 34px;
    overflow: hidden;

    background: rgba(17, 20, 25, .96);

    border: 1px solid rgba(255, 255, 255, .08);

    box-shadow: 0 34px 95px rgba(0, 0, 0, .48);
}

.page-doc-cover {
    position: relative;
    height: 420px;
    overflow: hidden;
    background: #111;
}

.page-doc-cover::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(180deg,
            transparent 45%,
            rgba(0, 0, 0, .72));
}

.page-doc-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-doc-content {
    padding: 42px;
}

.page-doc-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 14px;
    border-radius: 999px;

    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);

    color: #d1d5db;
    font-size: 13px;
    font-weight: 800;

    margin-bottom: 22px;
}

.page-doc-content h2 {
    color: #fff;
    font-size: 38px;
    line-height: 1.15;
    margin-bottom: 30px;
}

.page-doc-text {
    color: #d1d5db;
    font-size: 17px;
    line-height: 1.9;
}

.page-doc-text h1,
.page-doc-text h2,
.page-doc-text h3,
.page-doc-text h4,
.page-doc-text h5,
.page-doc-text h6 {
    color: #fff;
    margin-top: 34px;
    margin-bottom: 18px;
}

.page-doc-text p {
    color: #d1d5db;
    margin-bottom: 20px;
}

.page-doc-text ul,
.page-doc-text ol {
    margin-bottom: 20px;
    padding-left: 20px;
}

.page-doc-text li {
    margin-bottom: 10px;
    color: #d1d5db;
}

.page-doc-text a {
    color: #ef233c;
    font-weight: 800;
}

.page-doc-text img {
    max-width: 100%;
    border-radius: 24px;
    margin: 22px 0;
}

.page-doc-text table {
    width: 100%;
    margin: 25px 0;
    border-collapse: collapse;
}

.page-doc-text table td,
.page-doc-text table th {
    border: 1px solid rgba(255, 255, 255, .08);
    padding: 12px;
    color: #d1d5db;
}

/* Beyaz arka planlı editör blokları */
.page-doc-text div[style*="background"],
.page-doc-text section[style*="background"],
.page-doc-text article[style*="background"] {
    color: #111827 !important;
}

.page-doc-text div[style*="background"] h1,
.page-doc-text div[style*="background"] h2,
.page-doc-text div[style*="background"] h3,
.page-doc-text div[style*="background"] h4,
.page-doc-text div[style*="background"] h5,
.page-doc-text div[style*="background"] h6 {
    color: #111827 !important;
}

.page-doc-text div[style*="background"] p,
.page-doc-text div[style*="background"] span,
.page-doc-text div[style*="background"] li {
    color: #374151 !important;
}

/* SIDEBAR */
.page-doc-sidebar {
    position: sticky;
    top: 110px;
    height: max-content;
}

.doc-widget {
    border-radius: 30px;
    overflow: hidden;

    background: rgba(17, 20, 25, .96);

    border: 1px solid rgba(255, 255, 255, .08);

    box-shadow: 0 24px 70px rgba(0, 0, 0, .38);

    margin-bottom: 24px;
}

.doc-widget-head {
    padding: 22px 24px;

    background:
        linear-gradient(135deg,
            rgba(193, 18, 31, .18),
            rgba(255, 255, 255, .035));

    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.doc-widget-head h3 {
    color: #fff;
    margin: 0;
    font-size: 21px;
}

.doc-links {
    padding: 14px;
}

.doc-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 15px 16px;
    border-radius: 18px;

    color: #d1d5db;

    background: rgba(255, 255, 255, .035);

    border: 1px solid transparent;

    margin-bottom: 10px;

    transition: .25s;
}

.doc-links a:hover,
.doc-links a.active {
    color: #fff;

    border-color: rgba(193, 18, 31, .35);

    background:
        linear-gradient(135deg,
            rgba(193, 18, 31, .18),
            rgba(255, 255, 255, .03));
}

.doc-cta {
    padding: 30px;
    border-radius: 30px;

    background:
        radial-gradient(circle at right top,
            rgba(193, 18, 31, .28),
            transparent 35%),

        linear-gradient(135deg, #111418, #2b2f34);

    border: 1px solid rgba(255, 255, 255, .08);

    box-shadow: 0 24px 70px rgba(0, 0, 0, .38);
}

.doc-cta span {
    display: inline-flex;

    padding: 7px 14px;
    border-radius: 999px;

    background: rgba(0, 0, 0, .25);

    color: #fff;
    font-weight: 900;

    margin-bottom: 16px;
}

.doc-cta h3 {
    color: #fff;
    font-size: 25px;
    line-height: 1.3;
    margin-bottom: 24px;
}

.doc-cta a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 14px 20px;
    border-radius: 18px;

    background: linear-gradient(135deg, #8b111b, #c1121f);

    color: #fff;
    font-weight: 900;
}

.doc-cta a:hover {
    color: #fff;

    background: linear-gradient(135deg, #c1121f, #ef233c);
}

/* RESPONSIVE */
@media(max-width:992px) {

    .page-doc-layout {
        grid-template-columns: 1fr;
    }

    .page-doc-sidebar {
        position: relative;
        top: auto;
    }

    .page-doc-layout {
        margin-top: -55px;
    }
}

@media(max-width:768px) {

    .page-doc-cover {
        height: 280px;
    }

    .page-doc-content {
        padding: 28px;
    }

    .page-doc-content h2 {
        font-size: 28px;
    }
}