/* ==========================================================================
   ICOAIS — İÇ SAYFA TASARIM SİSTEMİ
   Banner + içerik kartı. Daha önce her detay sayfasında ~250 satır olarak
   tekrar eden CSS'in tek kaynağı.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Sayfa banner'ı
   -------------------------------------------------------------------------- */

#page-banner-area.page-banner-area {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 260px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

#page-banner-area.page-banner-area::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(6, 9, 26, .95) 0%,
        rgba(6, 9, 26, .78) 45%,
        rgba(6, 9, 26, .38) 100%);
}

#page-banner-area.page-banner-area::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--ic-red-500);
}

#page-banner-area .page-banner-title {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: var(--ic-sp-8) 0 var(--ic-sp-6);
}

#page-banner-area .page-banner-title > div {
    max-width: var(--ic-container);
    margin: 0 auto;
    padding: 0 var(--ic-sp-5);
    text-align: left;
}

#page-banner-area .page-banner-title h2 {
    margin: 0;
    color: #fff;
    font-size: var(--ic-fs-3xl);
    font-weight: 700;
    letter-spacing: var(--ic-track-title);
    text-transform: none;
    max-width: 22ch;
}

/* Küçük kırmızı rozet */
.icp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--ic-sp-2);
    margin-bottom: var(--ic-sp-3);
    padding: 5px 14px;
    background: rgba(192, 57, 43, .18);
    border: 1px solid rgba(192, 57, 43, .5);
    border-radius: var(--ic-radius-pill);
    color: var(--ic-red-200);
    font-size: var(--ic-fs-xs);
    font-weight: 700;
    letter-spacing: var(--ic-track-wide);
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   2. Banner altı geniş görsel
   -------------------------------------------------------------------------- */

.icp-hero-image {
    max-width: var(--ic-container);
    margin: 0 auto;
    padding: var(--ic-sp-7) var(--ic-sp-5) 0;
}

.icp-hero-image img {
    display: block;
    width: 100%;
    max-height: 340px;
    object-fit: cover;
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius);
    box-shadow: var(--ic-shadow-sm);
}

/* --------------------------------------------------------------------------
   2b. Konferans bilgi şeridi
   Banner ile içerik arasında; daha önce burada duran ve büyütüldüğü için
   pikselleşen küçük görselin yerini alır. (templates/facts-bar.php)
   -------------------------------------------------------------------------- */

.icp-facts {
    display: block;
    background: var(--ic-surface-alt);
    padding: var(--ic-sp-7) 0 0;
}

.icp-facts-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ic-sp-5);
    max-width: var(--ic-container);
    margin: 0 auto;
    padding: var(--ic-sp-5) var(--ic-sp-6);
    background: var(--ic-surface);
    border: 1px solid var(--ic-border);
    border-left: 4px solid var(--ic-red-500);
    border-radius: var(--ic-radius);
    box-shadow: var(--ic-shadow-sm);
}

.icp-facts-list {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: var(--ic-sp-4) var(--ic-sp-5);
    margin: 0;
}

.icp-fact {
    display: flex;
    align-items: flex-start;
    gap: var(--ic-sp-3);
    min-width: 0;
}

.icp-fact-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(192, 57, 43, .09);
    border: 1px solid rgba(192, 57, 43, .22);
    color: var(--ic-red-500);
    font-size: var(--ic-fs-base);
}

.icp-fact dt {
    margin: 0 0 2px;
    color: var(--ic-text-faint);
    font-size: var(--ic-fs-xs);
    font-weight: 700;
    letter-spacing: var(--ic-track-wide);
    text-transform: uppercase;
}

.icp-fact dd {
    margin: 0;
    color: var(--ic-text-strong);
    font-size: var(--ic-fs-base);
    font-weight: 600;
    line-height: var(--ic-lh-snug);
}

.icp-facts-cta {
    flex: 0 0 auto;
    padding-left: var(--ic-sp-5);
    border-left: 1px solid var(--ic-border);
}

.icp-facts-cta .btn { white-space: nowrap; }

/* Dar alanda buton alta iner */
@media (max-width: 991.98px) {
    .icp-facts-cta { border-left: 0; padding-left: 0; width: 100%; }
    .icp-facts-cta .btn { width: 100%; }
}

@media (max-width: 575.98px) {
    .icp-facts { padding-top: var(--ic-sp-5); }
    .icp-facts-inner { padding: var(--ic-sp-4); gap: var(--ic-sp-4); }
    .icp-facts-list { grid-template-columns: 1fr; gap: var(--ic-sp-4); }
}

/* Bilgi şeridi hemen ardından gelen içerik alanı üstten fazladan boşluk almasın */
.icp-facts + #main-container.main-container { padding-top: var(--ic-sp-6); }

/* --------------------------------------------------------------------------
   3. İçerik alanı
   -------------------------------------------------------------------------- */

#main-container.main-container {
    background: var(--ic-surface-alt);
    padding: var(--ic-sp-8) 0 var(--ic-sp-10);
}

/* Beyaz içerik kartı
   Genişlik okunabilirlik için sınırlı: ~70-80 karakterlik satır uzunluğu.
   Geniş tablolar .table-scroll ile kendi içinde yatay kayar. */
.cardd {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--ic-sp-8) var(--ic-sp-8);
    background: var(--ic-surface);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius);
    box-shadow: var(--ic-shadow-sm);
    color: var(--ic-text);
    font-size: var(--ic-fs-base);
    line-height: var(--ic-lh-loose);
}

/* --- Başlıklar: numaralı rozet + ince alt çizgi --- */

.cardd { counter-reset: icp-heading; }

.cardd h1,
.cardd h2,
.cardd h3 {
    display: flex;
    align-items: center;
    gap: var(--ic-sp-3);
    margin: var(--ic-sp-7) 0 var(--ic-sp-4);
    padding-bottom: var(--ic-sp-3);
    border-bottom: 1px solid var(--ic-border-soft);
    color: var(--ic-text-strong);
    font-size: var(--ic-fs-xl);
    font-weight: 700;
    line-height: var(--ic-lh-snug);
}

.cardd > *:first-child,
.cardd h1:first-child,
.cardd h2:first-child,
.cardd h3:first-child { margin-top: 0; }

.cardd h1::before,
.cardd h2::before,
.cardd h3::before {
    counter-increment: icp-heading;
    content: counter(icp-heading, decimal-leading-zero);
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    background: var(--ic-ink-900);
    border-radius: 50%;
    color: #fff;
    font-size: var(--ic-fs-xs);
    font-weight: 700;
    letter-spacing: 0;
}

/* İçerikte ortalanmış sayfa başlığı (CKEditor'dan gelen h1) rozet almasın */
.cardd h1[style*="center"],
.cardd h2[style*="center"],
.cardd h3[style*="center"] {
    display: block;
    text-align: center;
    border-bottom: 0;
    counter-increment: none;
}
.cardd h1[style*="center"]::before,
.cardd h2[style*="center"]::before,
.cardd h3[style*="center"]::before { content: none; }

.cardd h4 {
    margin: var(--ic-sp-6) 0 var(--ic-sp-3);
    color: var(--ic-red-500);
    font-size: var(--ic-fs-base);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.cardd h5,
.cardd h6 {
    margin: var(--ic-sp-5) 0 var(--ic-sp-2);
    font-size: var(--ic-fs-md);
}

/* --- Metin --- */

.cardd p { margin-bottom: var(--ic-sp-4); }

/* İçerikte "justify" kullanılan yerlerde kelime araları açılmasın */
.cardd { hyphens: auto; }
.cardd p:last-child { margin-bottom: 0; }

/* Boş paragrafların (CKEditor'ın   satırları) fazladan boşluk açmasını engelle */
.cardd p:empty { display: none; margin: 0; }

.cardd strong,
.cardd b { color: var(--ic-text-strong); }

/* --- Listeler --- */

.cardd ul,
.cardd ol {
    list-style: none;
    padding-left: 0;
    margin: 0 0 var(--ic-sp-5);
}

.cardd li { position: relative; padding-left: 30px; margin-bottom: 10px; }

.cardd ul > li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 5px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    background: var(--ic-red-500);
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.cardd ol { counter-reset: icp-list; }

.cardd ol > li::before {
    counter-increment: icp-list;
    content: counter(icp-list);
    position: absolute;
    left: 0;
    top: 5px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    background: var(--ic-border-soft);
    border-radius: var(--ic-radius-sm);
    color: var(--ic-text-strong);
    font-size: var(--ic-fs-xs);
    font-weight: 700;
    line-height: 1;
}

/* İç içe listelerde madde işareti sadeleşsin */
.cardd li ul > li::before {
    content: '';
    width: 6px;
    height: 6px;
    top: 10px;
    left: 5px;
}

/* --- Alıntı --- */

.cardd blockquote {
    margin: var(--ic-sp-5) 0;
    padding: var(--ic-sp-4) var(--ic-sp-5);
    background: var(--ic-surface-warm);
    border-left: 3px solid var(--ic-red-500);
    border-radius: 0 var(--ic-radius) var(--ic-radius) 0;
    color: var(--ic-text-muted);
    font-style: italic;
}

/* --- Bağlantılar --- */

.cardd a {
    color: var(--ic-ink-900);
    font-weight: 600;
    text-decoration: none;
    box-shadow: inset 0 -1px 0 var(--ic-red-500);
    transition: color var(--ic-dur) var(--ic-ease),
                box-shadow var(--ic-dur) var(--ic-ease);
}

.cardd a:hover {
    color: var(--ic-red-500);
    box-shadow: inset 0 -2px 0 var(--ic-red-500);
}

.cardd a.btn { box-shadow: var(--ic-shadow-sm); color: #fff; }
.cardd a.btn:hover { box-shadow: var(--ic-shadow-md); }

/* --- Tablolar --- */

.cardd .table-scroll,
.cardd table { margin: var(--ic-sp-5) 0; }

.cardd table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ic-fs-sm);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius);
    overflow: hidden;
}

.cardd table th,
.cardd table td {
    border: 1px solid var(--ic-border);
    padding: 11px 14px;
    vertical-align: middle;
}

.cardd table th {
    background: var(--ic-ink-900);
    color: #fff;
    font-weight: 600;
    text-align: left;
    letter-spacing: .02em;
}

.cardd table tr:nth-child(even) { background: var(--ic-surface-muted); }

/* Geniş tablolar sayfayı yatay kaydırmasın */
.cardd .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Görseller ve gömülü içerik --- */

.cardd img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ic-radius);
}

.cardd iframe,
.cardd embed,
.cardd object {
    max-width: 100%;
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius);
}

.pdf-embed-container {
    width: 100%;
    height: min(78vh, 780px);
    margin-top: var(--ic-sp-5);
    background: var(--ic-surface-muted);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius);
    overflow: hidden;
}

.pdf-embed-container embed,
.pdf-embed-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
}

/* Word'den yapıştırılmış içerik için hizalama düzeltmeleri */
.cardd .MsoNormal { margin-bottom: var(--ic-sp-2); }
.cardd .WordSection1 > p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   4. Duyarlılık
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    #page-banner-area.page-banner-area { min-height: 220px; }
    #page-banner-area .page-banner-title h2 { font-size: var(--ic-fs-2xl); }
    .cardd { padding: var(--ic-sp-7) var(--ic-sp-6); }
}

@media (max-width: 575.98px) {
    #page-banner-area.page-banner-area { min-height: 180px; }
    #page-banner-area .page-banner-title { padding: var(--ic-sp-6) 0 var(--ic-sp-5); }
    #page-banner-area .page-banner-title h2 { font-size: var(--ic-fs-xl); }

    .icp-hero-image { padding-top: var(--ic-sp-5); }
    .icp-hero-image img { max-height: 200px; }

    #main-container.main-container { padding: var(--ic-sp-6) 0 var(--ic-sp-8); }

    .cardd {
        padding: var(--ic-sp-6) var(--ic-sp-4);
        font-size: 15px;
    }

    .cardd h1, .cardd h2, .cardd h3 { font-size: var(--ic-fs-lg); gap: var(--ic-sp-2); }
    .cardd h1::before, .cardd h2::before, .cardd h3::before { width: 26px; height: 26px; }
}