/* ============================================================ */
/* TEMEL AYARLAR (RESET + TYPOGRAPHY)                           */
/* ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background: #f9f9f9;
    color: #222;
    padding: 20px 30px;
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: 'Times New Roman', Times, serif;
    color: #003366;
    margin-bottom: 10px;
}

p {
    margin-bottom: 12px;
}

/* ============================================================ */
/* KONTEYNIRLAR                                                 */
/* ============================================================ */
.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 10px;
}

.card-box {
    background: white;
    border-radius: 12px;
    padding: 20px 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e0e0e0;
    margin: 20px 0;
}

/* ============================================================ */
/* GRID SİSTEMİ – TEMEL SINIFLAR                                */
/* ============================================================ */
.grid {
    display: grid;
    gap: 20px;
    margin: 20px 0;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }

/* ============================================================ */
/* KARTLAR                                                      */
/* ============================================================ */
.card {
    background: white;
    border-radius: 12px;
    padding: 18px 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border-top: 5px solid #003366;
    transition: transform 0.15s, box-shadow 0.15s;
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}

.card-red    { border-top-color: #d32f2f; background: #fff8f8; }
.card-blue   { border-top-color: #003366; background: #f4f8fc; }
.card-orange { border-top-color: #e65100; background: #fff6ed; }
.card-green  { border-top-color: #2e7d32; background: #f2faf2; }
.card-yellow { border-top-color: #f9a825; background: #fffde7; }
.card-purple { border-top-color: #7b1fa2; background: #f8f0fc; }

.card-icon {
    font-size: 32px;
    display: inline-block;
    margin-bottom: 8px;
    background: #f0f0f0;
    padding: 8px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
}

/* ============================================================ */
/* TABLOLAR                                                     */
/* ============================================================ */
.table-wrap {
    overflow-x: auto;
    margin: 20px 0;
    border-radius: 10px;
    border: 1px solid #ddd;
}
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: white;
}
th {
    background: #003366;
    color: white;
    padding: 12px 15px;
    text-align: left;
    font-weight: bold;
}
td {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
}
tr:nth-child(even) {
    background: #f8fafc;
}

/* ============================================================ */
/* VURGULU METİN, ETİKETLER, KUTULAR                           */
/* ============================================================ */
.highlight {
    background: #ffcc80;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    color: #003366;
}
.badge {
    display: inline-block;
    background: #003366;
    color: white;
    font-size: 12px;
    padding: 3px 12px;
    border-radius: 30px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.box-warning {
    background: #fff3cd;
    border-left: 6px solid #ffc107;
    padding: 15px 20px;
    border-radius: 6px;
    margin: 15px 0;
}
.box-info {
    background: #e3edf7;
    border-left: 6px solid #003366;
    padding: 15px 20px;
    border-radius: 6px;
    margin: 15px 0;
}
.box-danger {
    background: #fce4e4;
    border-left: 6px solid #d32f2f;
    padding: 15px 20px;
    border-radius: 6px;
    margin: 15px 0;
}
.box-success {
    background: #e8f5e9;
    border-left: 6px solid #2e7d32;
    padding: 15px 20px;
    border-radius: 6px;
    margin: 15px 0;
}

/* ============================================================ */
/* BAŞLIK BİLEŞENİ                                              */
/* ============================================================ */
.page-header {
    display: flex;
    align-items: center;
    gap: 20px;
    background: white;
    padding: 20px 30px;
    border-radius: 14px;
    border-bottom: 4px solid #003366;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    margin: 20px 0 30px 0;
    width: 100%;
}
.icon-box {
    background: #ffcc80;
    color: #003366;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 32px;
    flex-shrink: 0;
}
.header-content h1 {
    font-size: 26px;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.header-content .subtitle {
    font-size: 15px;
    color: #555;
    margin: 4px 0 0 0;
    font-family: Arial, sans-serif;
}

/* ============================================================ */
/* MENÜ                                                         */
/* ============================================================ */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    padding: 10px 20px;
    border-bottom: 2px solid #003366;
    width: 100%;
    flex-wrap: wrap;
}
.logo img {
    height: 43px;
    width: auto;
}
.menu {
    list-style: none;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.menu a {
    color: #003366;
    text-decoration: none;
    font-weight: bold;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
}
.menu a:hover {
    background: #003366;
    color: white;
}
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}
.hamburger div {
    width: 30px;
    height: 4px;
    background: #003366;
    border-radius: 3px;
}
.menu-mobile {
    display: none;
    flex-direction: column;
    background: #003366;
    padding: 10px 0;
    width: 100%;
}
.menu-mobile a {
    color: white;
    text-decoration: none;
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.menu-mobile a:hover {
    background: #f39c12;
    color: #003366;
}
.menu-mobile.open {
    display: flex;
}

/* ============================================================ */
/* YARDIMCI SINIFLAR                                            */
/* ============================================================ */
.text-center { text-align: center; }
.text-justify { text-align: justify; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.p-10 { padding: 10px; }
.p-20 { padding: 20px; }

/* ============================================================ */
/* ADIMLAR (Çapraz Yerleşim)                                    */
/* ============================================================ */
.steps-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
    margin: 25px 0;
    padding: 10px 0;
}
.step-item {
    flex: 0 0 auto;
    width: 180px;
    background: white;
    border-radius: 12px;
    padding: 16px 14px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border-top: 5px solid #003366;
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.step-item:nth-child(1) { transform: translateY(0px); border-top-color: #d32f2f; }
.step-item:nth-child(2) { transform: translateY(15px); border-top-color: #003366; }
.step-item:nth-child(3) { transform: translateY(30px); border-top-color: #2e7d32; }
.step-item:nth-child(4) { transform: translateY(45px); border-top-color: #e65100; }
.step-item:nth-child(5) { transform: translateY(60px); border-top-color: #f9a825; }
.step-item:nth-child(6) { transform: translateY(75px); border-top-color: #7b1fa2; }
.step-item:nth-child(7) { transform: translateY(90px); border-top-color: #d32f2f; }

.step-number {
    font-size: 28px;
    font-weight: bold;
    color: #003366;
    background: #f0f4f8;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}
.step-emoji {
    font-size: 32px;
    margin-bottom: 6px;
}
.step-title {
    font-weight: bold;
    color: #222;
    font-size: 15px;
    line-height: 1.3;
}

/* ============================================================ */
/* TANIM KARTLARI (grid-six)                                    */
/* ============================================================ */
.grid-six {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin: 20px 0;
}
.grid-six .card {
    background: white;
    border-radius: 14px;
    padding: 16px 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-top: 6px solid #ccc;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
}
.grid-six .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.grid-six .card h3 {
    font-size: 0.95rem;
    margin: 6px 0 4px 0;
    color: #003366;
    font-weight: 700;
    line-height: 1.3;
}
.grid-six .card p {
    font-size: 0.8rem;
    line-height: 1.5;
    color: #1e293b;
    margin: 4px 0 0 0;
    text-align: justify;
}
.grid-six .card.red    { border-top-color: #d32f2f; background: #fff8f8; }
.grid-six .card.blue   { border-top-color: #003366; background: #f4f8fc; }
.grid-six .card.yellow { border-top-color: #f9a825; background: #fffde7; }
.grid-six .card.green  { border-top-color: #2e7d32; background: #f2faf2; }
.grid-six .card.orange { border-top-color: #e65100; background: #fff6ed; }
.grid-six .card.gray   { border-top-color: #6b7280; background: #f8fafc; }

/* ============================================================ */
/* TABLO YÜKSEKLİK EŞİTLEME                                     */
/* ============================================================ */
.grid-2 .table-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.grid-2 .table-wrap table {
    flex: 1;
    width: 100%;
}
.grid-2 .table-wrap table td,
.grid-2 .table-wrap table th {
    word-break: break-word;
}
.grid-2 {
    align-items: stretch !important;
}
.grid-2 .table-wrap {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}
.grid-2 .table-wrap table {
    width: 100% !important;
    flex: 1 1 auto !important;
    display: table !important;
    height: 100% !important;
}
.grid-2 .table-wrap table tbody {
    height: 100% !important;
}
.card .table-wrap {
    overflow: auto;
    max-height: 100%;
    flex: 1 1 auto;
    width: 100%;
}
.card .table-wrap table {
    width: 100%;
    height: auto;
}

/* ============================================================ */
/* BİLGİ KUTULARI (info-box)                                    */
/* ============================================================ */
.info-box {
    background: white;
    border-radius: 14px;
    padding: 20px 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-left: 6px solid #003366;
    margin: 16px 0;
    transition: transform 0.2s, box-shadow 0.2s;
}
.info-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.info-box.warning { background: #fffde7; border-left-color: #f59e0b; }
.info-box.danger  { background: #fef2f2; border-left-color: #dc2626; }
.info-box.success { background: #f0fdf4; border-left-color: #22c55e; }
.info-box.blue    { background: #eff6ff; border-left-color: #2563eb; }
.info-box.purple  { background: #faf5ff; border-left-color: #7c3aed; }
.info-box.gray    { background: #f8fafc; border-left-color: #64748b; }

.info-box .box-title {
    font-weight: 700;
    font-size: 15px;
    color: #003366;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.info-box .box-title .icon { font-size: 20px; }
.info-box p {
    margin: 0;
    font-size: 14.5px;
    color: #1e293b;
    line-height: 1.7;
}
.info-box ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
}
.info-box ul li {
    padding: 4px 0;
    font-size: 14px;
    color: #1e293b;
    line-height: 1.6;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.info-box ul li:last-child {
    border-bottom: none;
}

/* ============================================================ */
/* RESİM KUTUSU                                                 */
/* ============================================================ */
.image-box {
    width: 100%;
    background: linear-gradient(135deg, #fef3c7, #fffbeb);
    border-radius: 14px;
    padding: 20px;
    border: 2px dashed #f59e0b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 16px 0;
}
.image-box img {
    width: 100%;
    max-width: 800px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.12);
    display: block;
}
.image-box .image-caption {
    margin: 8px 0 0 0;
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
    text-align: center;
}

/* ============================================================ */
/* EZBERT KUTULARI                                              */
/* ============================================================ */
.memory-box {
    background: linear-gradient(135deg, #fef9c3, #fef3c7);
    border-radius: 14px;
    padding: 18px 22px;
    border: 2px solid #f59e0b;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.1);
    margin: 16px 0;
    position: relative;
}
.memory-box::before {
    content: "📌 EZBERT";
    display: inline-block;
    background: #f59e0b;
    color: #78350f;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 14px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.memory-box p {
    margin: 4px 0 0 0;
    font-size: 14.5px;
    color: #1e293b;
    line-height: 1.7;
}
.memory-box strong { color: #d97706; }
.memory-box .highlight {
    background: #fde68a;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    color: #78350f;
}

/* ============================================================ */
/* SORU KUTULARI                                                */
/* ============================================================ */
.question-box {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 14px;
    padding: 18px 22px;
    border: 2px solid #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
    margin: 16px 0;
}
.question-box::before {
    content: "❓ SORU";
    display: inline-block;
    background: #2563eb;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 14px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.question-box p {
    margin: 4px 0 0 0;
    font-size: 14.5px;
    color: #1e293b;
    line-height: 1.7;
}
.question-box .options {
    margin: 8px 0 0 0;
    padding-left: 20px;
    list-style: none;
}
.question-box .options li {
    padding: 4px 0;
    font-size: 14px;
    color: #1e293b;
    line-height: 1.6;
    display: flex;
    align-items: center;
    gap: 8px;
}
.question-box .options li::before {
    content: "○";
    color: #2563eb;
    font-weight: 700;
    font-size: 16px;
}
.question-box .options li.correct::before {
    content: "✓";
    color: #22c55e;
}
.question-box .options li.wrong::before {
    content: "✗";
    color: #dc2626;
}

/* ============================================================ */
/* MEVZUAT KUTULARI                                             */
/* ============================================================ */
.regulation-box {
    background: linear-gradient(135deg, #faf5ff, #f3e8ff);
    border-radius: 14px;
    padding: 18px 22px;
    border: 2px solid #7c3aed;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.08);
    margin: 16px 0;
}
.regulation-box::before {
    content: "📜 MEVZUAT";
    display: inline-block;
    background: #7c3aed;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 14px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.regulation-box p {
    margin: 4px 0 0 0;
    font-size: 14.5px;
    color: #1e293b;
    line-height: 1.7;
}
.regulation-box .article {
    display: inline-block;
    background: #7c3aed;
    color: white;
    padding: 1px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    margin-right: 6px;
}

/* ============================================================ */
/* İSG SINAV KUTULARI                                           */
/* ============================================================ */
.isg-box {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-radius: 14px;
    padding: 18px 22px;
    border: 2px solid #22c55e;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.08);
    margin: 16px 0;
}
.isg-box::before {
    content: "🎯 İSG SINAV";
    display: inline-block;
    background: #22c55e;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 14px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.isg-box p {
    margin: 4px 0 0 0;
    font-size: 14.5px;
    color: #1e293b;
    line-height: 1.7;
}
.isg-box .keyword {
    background: #bbf7d0;
    padding: 1px 8px;
    border-radius: 4px;
    font-weight: 700;
    color: #166534;
}

/* ============================================================ */
/* DERS NOTU KUTULARI                                           */
/* ============================================================ */
.note-box {
    background: linear-gradient(135deg, #fefce8, #fef9c3);
    border-radius: 14px;
    padding: 18px 22px;
    border: 2px solid #eab308;
    box-shadow: 0 4px 12px rgba(234, 179, 8, 0.08);
    margin: 16px 0;
    position: relative;
}
.note-box::before {
    content: "📝 DERS NOTU";
    display: inline-block;
    background: #eab308;
    color: #78350f;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 14px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.note-box p {
    margin: 4px 0 0 0;
    font-size: 14.5px;
    color: #1e293b;
    line-height: 1.7;
}
.note-box strong { color: #a16207; }

/* ============================================================ */
/* TABLOLAR (CLASS TABANLI)                                     */
/* ============================================================ */
.table-custom {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.table-custom thead th {
    background: #003366;
    color: white;
    padding: 10px 14px;
    text-align: left;
    font-weight: 700;
    font-size: 13px;
}
.table-custom tbody td {
    padding: 8px 14px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px;
    color: #1e293b;
}
.table-custom tbody tr:nth-child(even) {
    background: #f8fafc;
}
.table-custom tbody tr:hover {
    background: #f1f5f9;
}
.table-wrap-custom {
    overflow-x: auto;
    margin: 16px 0;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}
.table-wrap-custom table {
    min-width: 600px;
}

/* ============================================================ */
/* GRID SİSTEMİ (GENİŞLETİLMİŞ)                                 */
/* ============================================================ */
.grid-2-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.grid-4-cols { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px; }
.grid-5-cols { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 20px; }
.grid-6-cols { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; gap: 20px; }
.grid-7-cols { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; gap: 20px; }

.grid-card {
    background: white;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-top: 5px solid #003366;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.grid-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}
.grid-card .card-number {
    background: #003366;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    margin-bottom: 8px;
}
.grid-card h4 {
    font-family: 'Times New Roman', Times, serif;
    font-size: 16px;
    color: #003366;
    margin: 0 0 6px 0;
}
.grid-card p {
    font-size: 13.5px;
    color: #1e293b;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}
.grid-card ul {
    margin: 6px 0 0 0;
    padding-left: 18px;
}
.grid-card ul li {
    font-size: 13px;
    color: #1e293b;
    line-height: 1.6;
    padding: 2px 0;
}
.grid-card.red    { border-top-color: #dc2626; background: #fef2f2; }
.grid-card.blue   { border-top-color: #2563eb; background: #eff6ff; }
.grid-card.green  { border-top-color: #22c55e; background: #f0fdf4; }
.grid-card.yellow { border-top-color: #f59e0b; background: #fffde7; }
.grid-card.orange { border-top-color: #e65100; background: #fff6ed; }
.grid-card.purple { border-top-color: #7c3aed; background: #faf5ff; }
.grid-card.gray   { border-top-color: #64748b; background: #f8fafc; }

/* ============================================================ */
/* RADYASYON SAYFASI ÖZEL SINIFLAR                              */
/* ============================================================ */
.rad-baslik {
    border-top: 4px solid #f59e0b;
    padding-top: 16px;
    margin: 10px 0 20px 0;
}
.rad-baslik .baslik-icerik {
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 4px solid #f59e0b;
    padding-bottom: 12px;
    flex-wrap: wrap;
}
.rad-baslik .baslik-ikon {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: white;
    padding: 8px 14px;
    border-radius: 14px;
    font-size: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}
.rad-baslik h1 {
    color: #d97706;
    margin: 0;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-weight: 700;
}
.rad-baslik .baslik-sembol {
    font-size: 1.8rem;
    background: #fef3c7;
    padding: 4px 10px;
    border-radius: 12px;
    border: 2px solid #f59e0b;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.rad-baslik .baslik-alt {
    margin: 2px 0 0 0;
    font-size: 1rem;
    color: #4a617c;
}

.rad-baslik.kirmizi { border-top-color: #dc2626; }
.rad-baslik.kirmizi .baslik-icerik { border-bottom-color: #dc2626; }
.rad-baslik.kirmizi .baslik-ikon {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}
.rad-baslik.kirmizi h1 { color: #dc2626; }
.rad-baslik.kirmizi .baslik-sembol {
    background: #fef2f2;
    border-color: #dc2626;
}

.rad-baslik.mavi { border-top-color: #2563eb; }
.rad-baslik.mavi .baslik-icerik { border-bottom-color: #2563eb; }
.rad-baslik.mavi h1 { color: #1e40af; }
.rad-baslik.mavi .baslik-sembol {
    background: #eff6ff;
    border-color: #2563eb;
}

.rad-baslik.mor { border-top-color: #7c3aed; }
.rad-baslik.mor .baslik-icerik { border-bottom-color: #7c3aed; }
.rad-baslik.mor .baslik-ikon {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}
.rad-baslik.mor h1 { color: #5b21b6; }
.rad-baslik.mor .baslik-sembol {
    border-color: #7c3aed;
    background: #faf5ff;
}

.rad-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0; }
.rad-grid-2-stretch { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0; align-items: stretch; }
.rad-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px 0; }
.rad-grid-3-stretch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 20px 0; align-items: stretch; }
.rad-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 16px 0; }
.rad-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 20px 0; }

.rad-card-danger {
    background: linear-gradient(180deg, #fce4ec, #ffffff);
    border-radius: 14px;
    padding: 16px 14px;
    border-top: 6px solid #dc2626;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}
.rad-card-danger .card-icon { font-size: 44px; }
.rad-card-danger h5 {
    margin: 8px 0 4px 0;
    color: #991b1b;
    font-size: 1rem;
}
.rad-card-danger p {
    margin: 0;
    font-size: 1rem;
    color: #1e293b;
    line-height: 1.4;
    flex: 1;
}

.rad-card-blue {
    background: linear-gradient(180deg, #dbeafe, #ffffff);
    border-radius: 14px;
    padding: 16px 14px;
    border-top: 6px solid #2563eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}
.rad-card-blue .card-icon { font-size: 44px; }
.rad-card-blue h5 {
    margin: 8px 0 4px 0;
    color: #1e40af;
    font-size: 1rem;
}
.rad-card-blue p {
    margin: 0;
    font-size: 1rem;
    color: #1e293b;
    line-height: 1.4;
    flex: 1;
}

.rad-card-green {
    background: linear-gradient(180deg, #dcfce7, #ffffff);
    border-radius: 14px;
    padding: 16px 14px;
    border-top: 6px solid #16a34a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}
.rad-card-green .card-icon { font-size: 44px; }
.rad-card-green h5 {
    margin: 8px 0 4px 0;
    color: #166534;
    font-size: 1rem;
}
.rad-card-green p {
    margin: 0;
    font-size: 1rem;
    color: #1e293b;
    line-height: 1.4;
    flex: 1;
}

.rad-box-red {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-radius: 16px;
    padding: 20px 24px;
    margin: 16px 0 24px 0;
    border-left: 8px solid #dc2626;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.10);
}
.rad-box-red .box-inner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.rad-box-red .box-img { flex-shrink: 0; }
.rad-box-red .box-img img {
    width: 70px;
    height: auto;
    border-radius: 8px;
}
.rad-box-red .box-text {
    flex: 1;
    min-width: 200px;
}
.rad-box-red .box-text h4 {
    margin: 0 0 8px 0;
    color: #991b1b;
    font-size: 1rem;
}
.rad-box-red .box-text p {
    margin: 0;
    font-size: 1rem;
    color: #1e293b;
    line-height: 1.7;
}

.rad-box-yellow {
    background: linear-gradient(135deg, #fef3c7, #fffbeb);
    border-radius: 16px;
    padding: 20px 24px;
    margin: 16px 0 24px 0;
    border-left: 8px solid #f59e0b;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.10);
}
.rad-box-yellow .box-inner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.rad-box-yellow .box-img { flex-shrink: 0; }
.rad-box-yellow .box-img img {
    width: 70px;
    height: auto;
    border-radius: 8px;
}
.rad-box-yellow .box-text {
    flex: 1;
    min-width: 200px;
}
.rad-box-yellow .box-text h4 {
    margin: 0 0 8px 0;
    color: #78350f;
    font-size: 1rem;
}
.rad-box-yellow .box-text p {
    margin: 0;
    font-size: 1rem;
    color: #1e293b;
    line-height: 1.7;
}

.rad-box-blue {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 16px;
    padding: 18px 20px;
    margin: 16px 0 20px 0;
    border-left: 8px solid #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
}
.rad-box-blue .box-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.rad-box-blue .box-icon {
    font-size: 28px;
    flex-shrink: 0;
}
.rad-box-blue .box-text h4 {
    margin: 0 0 6px 0;
    color: #1e40af;
    font-size: 1rem;
}
.rad-box-blue .box-text p {
    margin: 0;
    font-size: 1rem;
    color: #1e293b;
    line-height: 1.6;
}

.rad-box-teal {
    background: linear-gradient(135deg, #f0fdfa, #ccfbf1);
    border-radius: 14px;
    padding: 14px 20px;
    margin: 20px 0;
    border-left: 6px solid #0d9488;
}
.rad-box-teal .box-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.rad-box-teal .box-icon { font-size: 24px; }
.rad-box-teal .box-text {
    font-size: 1rem;
    color: #1e293b;
    line-height: 1.6;
    margin: 0;
}

.rad-summary-yellow {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: 14px;
    padding: 14px 20px;
    margin: 20px 0 10px 0;
    color: white;
}
.rad-summary-yellow .summary-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.rad-summary-yellow .summary-icon { font-size: 28px; }
.rad-summary-yellow .summary-text {
    flex: 1;
    font-size: 1rem;
    line-height: 1.5;
}
.rad-summary-yellow .summary-text strong { color: #fef3c7; }
.rad-summary-yellow .summary-tag {
    background: rgba(255, 255, 255, 0.12);
    padding: 2px 10px;
    border-radius: 30px;
    margin: 0 4px;
    display: inline-block;
}
.rad-summary-yellow .summary-footer {
    margin-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 6px;
    font-size: 1rem;
    opacity: 0.85;
    text-align: center;
}

.rad-summary-red {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border-radius: 14px;
    padding: 14px 20px;
    margin: 20px 0 10px 0;
    color: white;
}
.rad-summary-red .summary-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.rad-summary-red .summary-icon { font-size: 28px; }
.rad-summary-red .summary-text {
    flex: 1;
    font-size: 1rem;
    line-height: 1.5;
}
.rad-summary-red .summary-text strong { color: #fecaca; }
.rad-summary-red .summary-tag {
    background: rgba(255, 255, 255, 0.12);
    padding: 2px 10px;
    border-radius: 30px;
    margin: 0 4px;
    display: inline-block;
}
.rad-summary-red .summary-footer {
    margin-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 6px;
    font-size: 1rem;
    opacity: 0.85;
    text-align: center;
}

.rad-summary-blue {
    background: linear-gradient(135deg, #2563eb, #1a56db);
    border-radius: 14px;
    padding: 14px 20px;
    margin: 20px 0 10px 0;
    color: white;
}
.rad-summary-blue .summary-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.rad-summary-blue .summary-icon { font-size: 28px; }
.rad-summary-blue .summary-text {
    flex: 1;
    font-size: 1rem;
    line-height: 1.5;
}
.rad-summary-blue .summary-text strong { color: #bfdbfe; }
.rad-summary-blue .summary-tag {
    background: rgba(255, 255, 255, 0.12);
    padding: 2px 10px;
    border-radius: 30px;
    margin: 0 4px;
    display: inline-block;
}
.rad-summary-blue .summary-footer {
    margin-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 6px;
    font-size: 1rem;
    opacity: 0.85;
    text-align: center;
}

.rad-ozel-kutu {
    background: #f4f8fc;
    border-radius: 12px;
    padding: 18px 24px;
    border-left: 6px solid #003366;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    margin: 16px 0;
}
.rad-ozel-kutu p {
    margin: 0;
    font-size: 14.5px;
    color: #1e293b;
    line-height: 1.8;
}
.rad-ozel-kutu .badge-ozel {
    display: inline-block;
    background: #003366;
    color: white;
    padding: 1px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    margin-right: 6px;
}

.rad-radon {
    background: linear-gradient(135deg, #fef3c7, #fffbeb);
    border-radius: 12px;
    padding: 18px 24px;
    border: 2px solid #f59e0b;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.08);
    margin: 16px 0;
}
.rad-radon p {
    margin: 0;
    font-size: 15px;
    color: #1e293b;
    line-height: 1.8;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.rad-radon .badge-radon {
    display: inline-block;
    background: #f59e0b;
    color: #78350f;
    padding: 2px 14px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
}
.rad-radon .radon-deger {
    background: #fef3c7;
    padding: 4px 16px;
    border-radius: 20px;
    border: 1px solid #f59e0b;
    font-weight: 700;
    color: #92400e;
}

.rad-kapali-kutu {
    background: linear-gradient(180deg, #fef2f2, #ffffff);
    border-radius: 14px;
    padding: 20px 22px;
    border: 2px solid #dc2626;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.06);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.rad-kapali-kutu .kutu-baslik {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    border-bottom: 3px solid #dc2626;
    padding-bottom: 10px;
}
.rad-kapali-kutu .kutu-baslik .ikon { font-size: 28px; }
.rad-kapali-kutu .kutu-baslik h4 {
    margin: 0;
    color: #991b1b;
    font-size: 1.1rem;
}

.rad-dogal-kutu {
    background: linear-gradient(180deg, #f0fdf4, #ffffff);
    border-radius: 14px;
    padding: 20px 22px;
    border: 2px solid #16a34a;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.06);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rad-tehlike-kutu {
    background: linear-gradient(180deg, #fef2f2, #ffffff);
    border-radius: 14px;
    padding: 18px 20px;
    border: 2px solid #dc2626;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.06);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rad-label {
    display: inline-block;
    padding: 2px 14px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.75rem;
}
.rad-label-red   { background: #dc2626; color: white; }
.rad-label-green { background: #16a34a; color: white; }
.rad-label-blue  { background: #2563eb; color: white; }
.rad-label-yellow{ background: #f59e0b; color: #78350f; }
.rad-label-mor   { background: #7c3aed; color: white; }

/* ============================================================ */
/* RESİM TAM SATIR - TABLOLAR 2'Lİ                              */
/* ============================================================ */
.radyasyon-sayfa {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 10px;
}

.resim-tam-satir {
    width: 100%;
    margin: 20px 0;
    background: linear-gradient(135deg, #fef3c7, #fffbeb);
    border-radius: 14px;
    padding: 20px;
    border: 2px dashed #f59e0b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.resim-tam-satir img {
    width: 100%;
    max-width: 800px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.12);
    display: block;
}
.resim-tam-satir p {
    margin: 8px 0 0 0;
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
    text-align: center;
}

.tablo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 16px 0;
}
.tablo-grid .tablo-kutu {
    background: white;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
}
.tablo-grid .tablo-baslik {
    padding: 6px 10px;
    text-align: center;
    border-bottom: 2px solid;
    flex-shrink: 0;
}
.tablo-grid .tablo-baslik span {
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
}
.tablo-grid .tablo-icerik {
    overflow-x: auto;
    padding: 8px 10px;
    flex: 1;
}
.tablo-grid table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
}
.tablo-grid th {
    padding: 4px 6px;
    border: 1px solid;
    font-weight: 700;
    text-align: center;
}
.tablo-grid td {
    padding: 4px 6px;
    border: 1px solid #e5e7eb;
    text-align: center;
}
.tablo-grid tr:nth-child(even) {
    background: #f8fafc;
}

.tablo-sari .tablo-baslik {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-bottom-color: #f59e0b;
}
.tablo-sari th {
    background: #fde68a;
    border-color: #fcd34d;
    color: #78350f;
}
.tablo-mavi .tablo-baslik {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-bottom-color: #2563eb;
}
.tablo-mavi th {
    background: #bfdbfe;
    border-color: #93c5fd;
    color: #1e3a5f;
}
.tablo-yesil .tablo-baslik {
    background: linear-gradient(135deg, #16a34a, #15803d);
    border-bottom-color: #16a34a;
}
.tablo-yesil th {
    background: #bbf7d0;
    border-color: #86efac;
    color: #166534;
}
.tablo-mor .tablo-baslik {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    border-bottom-color: #7c3aed;
}
.tablo-mor th {
    background: #ddd6fe;
    border-color: #c4b5fd;
    color: #4c1d95;
}

.cihaz-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 16px 0;
}
.cihaz-kutu {
    background: white;
    border-radius: 14px;
    border: 2px solid;
    overflow: hidden;
}
.cihaz-kutu .cihaz-baslik {
    padding: 8px 12px;
    text-align: center;
    border-bottom: 2px solid;
}
.cihaz-kutu .cihaz-baslik span {
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9rem;
}
.cihaz-kutu .cihaz-icerik {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cihaz-alt {
    border-radius: 10px;
    padding: 10px 12px;
    border-left: 4px solid;
}
.cihaz-alt h5 {
    margin: 0;
    font-size: 0.9rem;
}
.cihaz-alt ul {
    margin: 4px 0 0 0;
    padding-left: 18px;
    font-size: 0.8rem;
    color: #1e293b;
    line-height: 1.5;
}
.cihaz-alt p {
    margin: 2px 0 0 0;
    font-size: 0.75rem;
    color: #1e293b;
}

.cihaz-turuncu {
    border-color: #f59e0b;
}
.cihaz-turuncu .cihaz-baslik {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-bottom-color: #f59e0b;
}
.cihaz-turuncu .cihaz-alt {
    background: linear-gradient(180deg, #fef3c7, #fffbeb);
    border-left-color: #f59e0b;
}
.cihaz-turuncu .cihaz-alt h5 { color: #78350f; }

.cihaz-mavi {
    border-color: #2563eb;
}
.cihaz-mavi .cihaz-baslik {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-bottom-color: #2563eb;
}
.cihaz-mavi .cihaz-alt {
    background: linear-gradient(180deg, #dbeafe, #eff6ff);
    border-left-color: #2563eb;
}
.cihaz-mavi .cihaz-alt h5 { color: #1e40af; }

/* ============================================================ */
/* TEMEL KAVRAMLAR SAYFASI ÖZEL SINIFLAR                        */
/* ============================================================ */
.kavram-baslik {
    border-top: 4px solid #003366;
    padding-top: 16px;
    margin: 10px 0 20px 0;
}
.kavram-baslik .baslik-icerik {
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 4px solid #003366;
    padding-bottom: 12px;
    flex-wrap: wrap;
}
.kavram-baslik .baslik-ikon {
    background: linear-gradient(135deg, #003366, #1a4d7a);
    color: white;
    padding: 8px 14px;
    border-radius: 14px;
    font-size: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.25);
}
.kavram-baslik h1 {
    color: #003366;
    margin: 0;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-weight: 700;
}
.kavram-baslik .baslik-sembol {
    font-size: 1.8rem;
    background: #f4f8fc;
    padding: 4px 10px;
    border-radius: 12px;
    border: 2px solid #003366;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.kavram-baslik .baslik-alt {
    margin: 2px 0 0 0;
    font-size: 1rem;
    color: #4a617c;
}

.kavram-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0; }
.kavram-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px 0; }
.kavram-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 16px 0; }

.kavram-card {
    background: white;
    border-radius: 14px;
    padding: 18px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-top: 6px solid #003366;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.kavram-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.kavram-card .card-ikon {
    font-size: 38px;
    display: inline-block;
    margin-bottom: 6px;
    background: #f0f4f8;
    padding: 8px;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    text-align: center;
    line-height: 40px;
    flex-shrink: 0;
}
.kavram-card h4 {
    font-family: 'Times New Roman', Times, serif;
    font-size: 1rem;
    color: #003366;
    margin: 6px 0 4px 0;
    font-weight: 700;
}
.kavram-card p {
    font-size: 0.85rem;
    color: #1e293b;
    line-height: 1.6;
    margin: 4px 0 0 0;
    flex: 1;
}
.kavram-card ul {
    margin: 6px 0 0 0;
    padding-left: 18px;
}
.kavram-card ul li {
    font-size: 0.8rem;
    color: #1e293b;
    line-height: 1.6;
    padding: 2px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.kavram-card ul li:last-child {
    border-bottom: none;
}

.kavram-card.kirmizi   { border-top-color: #dc2626; background: #fef2f2; }
.kavram-card.mavi      { border-top-color: #2563eb; background: #eff6ff; }
.kavram-card.yesil     { border-top-color: #22c55e; background: #f0fdf4; }
.kavram-card.sari      { border-top-color: #f59e0b; background: #fffbeb; }
.kavram-card.turuncu   { border-top-color: #e65100; background: #fff6ed; }
.kavram-card.mor       { border-top-color: #7c3aed; background: #faf5ff; }
.kavram-card.gri       { border-top-color: #64748b; background: #f8fafc; }
.kavram-card.pembe     { border-top-color: #db2777; background: #fdf2f8; }

.kavram-tanim {
    background: linear-gradient(135deg, #f4f8fc, #e8f0f8);
    border-radius: 14px;
    padding: 20px 24px;
    border-left: 6px solid #003366;
    margin: 16px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.kavram-tanim .tanim-baslik {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.kavram-tanim .tanim-baslik .ikon { font-size: 28px; }
.kavram-tanim .tanim-baslik h4 {
    margin: 0;
    color: #003366;
    font-size: 1.1rem;
}
.kavram-tanim p {
    margin: 0;
    font-size: 0.95rem;
    color: #1e293b;
    line-height: 1.8;
}
.kavram-tanim .vurgu {
    background: #ffcc80;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    color: #003366;
}
.kavram-tanim .etiket {
    display: inline-block;
    background: #003366;
    color: white;
    font-size: 0.7rem;
    padding: 2px 12px;
    border-radius: 30px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-right: 4px;
}

.karsilastirma {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}
.karsilastirma .karsilastirma-kutu {
    background: white;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
}
.karsilastirma .karsilastirma-kutu .kutu-baslik {
    padding: 10px 16px;
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: white;
}
.karsilastirma .karsilastirma-kutu .kutu-baslik.mavi-baslik {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}
.karsilastirma .karsilastirma-kutu .kutu-baslik.kirmizi-baslik {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}
.karsilastirma .karsilastirma-kutu ul {
    padding: 12px 18px;
    margin: 0;
    list-style: none;
}
.karsilastirma .karsilastirma-kutu ul li {
    padding: 6px 0;
    font-size: 0.85rem;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.karsilastirma .karsilastirma-kutu ul li:last-child {
    border-bottom: none;
}
.karsilastirma .karsilastirma-kutu ul li .li-ikon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.kavram-ozet {
    border-radius: 14px;
    padding: 16px 20px;
    margin: 20px 0 10px 0;
    color: white;
}
.kavram-ozet .ozet-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.kavram-ozet .ozet-icon { font-size: 28px; }
.kavram-ozet .ozet-text {
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.5;
}
.kavram-ozet .ozet-text strong { opacity: 0.9; }
.kavram-ozet .ozet-tag {
    background: rgba(255, 255, 255, 0.15);
    padding: 2px 10px;
    border-radius: 30px;
    margin: 0 4px;
    display: inline-block;
    font-size: 0.8rem;
}
.kavram-ozet .ozet-footer {
    margin-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 6px;
    font-size: 0.85rem;
    opacity: 0.85;
    text-align: center;
}

.kavram-ozet.mavi-ozet   { background: linear-gradient(135deg, #2563eb, #1a56db); }
.kavram-ozet.yesil-ozet  { background: linear-gradient(135deg, #16a34a, #15803d); }
.kavram-ozet.sari-ozet   { background: linear-gradient(135deg, #f59e0b, #d97706); }
.kavram-ozet.kirmizi-ozet{ background: linear-gradient(135deg, #dc2626, #b91c1c); }
.kavram-ozet.mor-ozet    { background: linear-gradient(135deg, #7c3aed, #6d28d9); }

/* ============================================================ */
/* TOPRAKLAMA KUTULARI - 5'Lİ                                   */
/* ============================================================ */
.grid-5-topraklama {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin: 20px 0;
    align-items: stretch;
}

/* ============================================================ */
/* 5'li ve 7'li KAVRAM KARTLARI                                 */
/* ============================================================ */
.grid-5-kavram { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin: 20px 0; }
.grid-7-terim  { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; margin: 20px 0; }

.grid-3-referans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 20px 0; }
.grid-2-alt      { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 20px 0; }

.grid-2-tablo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0; }
.grid-2-kontrol { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0; }

/* ============================================================ */
/* FLOW-PROCESS (AKIŞ KUTULARI)                                 */
/* ============================================================ */
.flow-process {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 30px;
}
.flow-box {
    width: 240px;
    padding: 20px;
    border-radius: 16px;
    text-align: center;
    background: #fff;
    position: relative;
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.flow-icon {
    font-size: 42px;
    margin-bottom: 15px;
}
.flow-arrow {
    font-size: 34px;
    color: #12c7b0;
}
.flow-badge {
    display: inline-block;
    margin-top: 15px;
    padding: 6px 14px;
    border-radius: 20px;
    background: #12c7b0;
    color: #fff;
    font-weight: 700;
}
.flow-box.blue   { border-top: 6px solid #1976d2; }
.flow-box.orange { border-top: 6px solid #ff9800; }
.flow-box.red    { border-top: 6px solid #e53935; }
.flow-box.green  { border-top: 6px solid #43a047; }
.flow-box.purple { border-top: 6px solid #7e57c2; }

/* ============================================================ */
/* MOBİL MENÜ TOGGLE                                           */
/* ============================================================ */
@media (max-width: 768px) {
    .menu { display: none; }
    .hamburger { display: flex; }
}

/* ============================================================ */
/* TEK VE NİHAİ MOBİL UYUM (TÜM ÇAKIŞMALARI GİDERİR)          */
/* ============================================================ */

/* Tablet: 992px ve altı - 5'li grid'ler 3 sütun, 4'lüler 2 sütun */
@media (max-width: 992px) {
    .grid-5, .grid-6, .grid-5-cols, .grid-6-cols, .grid-7-cols,
    .grid-5-kavram, .grid-7-terim, .grid-5-topraklama,
    .rad-grid-5 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .grid-4, .grid-4-cols, .kavram-grid-4, .rad-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .grid-3, .grid-3-cols, .kavram-grid-3, .rad-grid-3, .grid-3-referans {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .grid-six {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .tablo-grid, .cihaz-grid, .karsilastirma {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* Mobil: 768px ve altı - TÜM GRID'LER TEK SÜTUN */
@media (max-width: 768px) {
    .grid, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6,
    .grid-2-cols, .grid-3-cols, .grid-4-cols, .grid-5-cols, .grid-6-cols, .grid-7-cols,
    .kavram-grid-2, .kavram-grid-3, .kavram-grid-4,
    .rad-grid-2, .rad-grid-2-stretch, .rad-grid-3, .rad-grid-3-stretch, .rad-grid-4, .rad-grid-5,
    .grid-six,
    .grid-5-topraklama, .grid-5-kavram, .grid-7-terim,
    .grid-3-referans, .grid-2-alt,
    .tablo-grid, .cihaz-grid, .karsilastirma,
    .grid-2-tablo, .grid-2-kontrol {
        grid-template-columns: 1fr !important;
    }

    /* Steps-row çapraz efekti kaldır */
    .steps-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .step-item {
        width: 100% !important;
        transform: none !important;
        flex-direction: row !important;
        text-align: left !important;
        gap: 15px !important;
        padding: 14px 18px !important;
        align-items: center !important;
    }
    .step-number {
        width: 36px !important;
        height: 36px !important;
        font-size: 20px !important;
        flex-shrink: 0 !important;
    }
    .step-emoji {
        font-size: 24px !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }
    .step-title {
        font-size: 14px !important;
    }

    /* Flex wrap kutuları alt alta */
    [style*="display:flex; flex-wrap:wrap;"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    [style*="display:flex; flex-wrap:wrap;"] > * {
        flex: 1 1 100% !important;
        min-width: 100% !important;
    }

    /* Kart içi yazı boyutları */
    .card, .info-box, .memory-box, .question-box, .note-box,
    .regulation-box, .isg-box, .rad-card-danger, .rad-card-blue,
    .rad-card-green, .kavram-card, .grid-card {
        font-size: 0.85rem !important;
        padding: 12px !important;
    }

    /* Özel hukuk listelerinde çift sütunu kaldır */
    ul[style*="column-count:2;"] {
        column-count: 1 !important;
    }

    /* Tablo taşma önleme */
    .table-wrap, .table-wrap-custom, .tablo-icerik {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        display: block;
        width: 100%;
    }
    table {
        min-width: unset !important;
        width: 100% !important;
        font-size: 0.6rem !important;
    }
    .table-custom {
        font-size: 12px !important;
    }
    .table-custom thead th,
    .table-custom tbody td {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }

    /* Flow-process (akış kutuları) */
    .flow-process {
        flex-direction: column !important;
    }
    .flow-arrow {
        transform: rotate(90deg) !important;
    }
}

/* Çok küçük mobil: 480px altı */
@media (max-width: 480px) {
    .card, .info-box, .memory-box, .question-box,
    .note-box, .regulation-box, .isg-box {
        font-size: 0.75rem !important;
        padding: 10px !important;
    }
    table {
        font-size: 0.5rem !important;
    }
    .table-custom thead th,
    .table-custom tbody td {
        padding: 4px 6px !important;
        font-size: 9px !important;
    }
    .grid-card {
        padding: 12px 14px !important;
    }
    .grid-card h4 { font-size: 14px !important; }
    .grid-card p  { font-size: 12.5px !important; }
    .rad-baslik h1 { font-size: 1.1rem !important; }
    .rad-baslik .baslik-ikon { font-size: 1.4rem !important; padding: 4px 8px !important; }
    .rad-baslik .baslik-sembol { font-size: 1.2rem !important; padding: 2px 6px !important; }
    .kavram-baslik h1 { font-size: 1.1rem !important; }
    .kavram-baslik .baslik-ikon { font-size: 1.4rem !important; padding: 4px 8px !important; }
    .kavram-baslik .baslik-sembol { font-size: 1.2rem !important; padding: 2px 6px !important; }
}

    /* Tüm ekranlarda taşmayı önle */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body {
        overflow-x: hidden !important;
        padding: 10px 12px !important;
        width: 100% !important;
    }

    /* Mobilde tüm inline grid'leri tek sütun yap */
    @media (max-width: 768px) {
        /* Tüm grid yapılarını tek sütun */
        div[style*="display: grid; grid-template-columns: 1fr 1fr"],
        div[style*="display: grid; grid-template-columns: 1fr 1fr 1fr"],
        div[style*="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr"],
        div[style*="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr"],
        div[style*="display: grid; grid-template-columns: repeat(2, 1fr)"],
        div[style*="display: grid; grid-template-columns: repeat(3, 1fr)"],
        div[style*="display: grid; grid-template-columns: repeat(4, 1fr)"],
        div[style*="display: grid; grid-template-columns: repeat(5, 1fr)"] {
            grid-template-columns: 1fr !important;
            display: grid !important;
            gap: 12px !important;
        }

        /* Tabloları kaydırılabilir yap (yatay kaydırma ile) */
        table {
            display: block !important;
            overflow-x: auto !important;
            white-space: nowrap !important;
            max-width: 100% !important;
            -webkit-overflow-scrolling: touch;
            font-size: 0.55rem !important;
        }

        th, td {
            padding: 4px 6px !important;
            font-size: 0.5rem !important;
        }

        /* Tablo wrapper'ları (varsa) */
        .table-wrap, .table-wrap-custom, .tablo-icerik {
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch;
            display: block;
            width: 100% !important;
        }

        /* SVG diyagramını küçült */
        svg {
            max-width: 100% !important;
            height: auto !important;
            transform: scale(0.8) !important;
            transform-origin: top center !important;
        }

        /* Sabit genişlikleri esnek yap */
        div[style*="min-width: 200px"],
        div[style*="min-width: 180px"],
        div[style*="min-width: 220px"] {
            min-width: unset !important;
            width: 100% !important;
        }

        /* Flex wrap'leri alt alta al */
        [style*="display: flex; flex-wrap: wrap;"] {
            flex-direction: column !important;
            align-items: stretch !important;
        }

        [style*="display: flex; flex-wrap: wrap;"] > * {
            flex: 1 1 100% !important;
            min-width: 100% !important;
            max-width: 100% !important;
        }

        /* Kart ve kutu içerikleri */
        .card, .info-box, .kavram-card, .grid-card {
            padding: 12px 14px !important;
            margin: 6px 0 !important;
            word-wrap: break-word !important;
            overflow-wrap: break-word !important;
        }

        /* Başlıklar */
        h1, h2, h3, h4, .kavram-baslik h1, .rad-baslik h1 {
            font-size: 1.1rem !important;
        }

        .kavram-baslik .baslik-ikon,
        .rad-baslik .baslik-ikon {
            font-size: 1.6rem !important;
            padding: 4px 10px !important;
        }

        .kavram-baslik .baslik-sembol,
        .rad-baslik .baslik-sembol {
            font-size: 0.7rem !important;
            padding: 2px 6px !important;
        }

        /* Kesik çizgili kutular */
        [style*="border: 4px dashed"] {
            padding: 12px 14px !important;
        }

        /* Tüm içerik kutuları */
        .container, [style*="max-width: 1400px;"] {
            padding: 0 4px !important;
        }
    }

    /* Çok küçük ekranlar */
    @media (max-width: 480px) {
        table {
            font-size: 0.45rem !important;
        }
        th, td {
            padding: 3px 4px !important;
            font-size: 0.4rem !important;
        }
        .card, .info-box {
            padding: 8px 10px !important;
        }
        svg {
            transform: scale(0.6) !important;
        }
    }
    /* ============================================================ */
/* YILLIK İZİN HESABI (MADDE 55) - ÖZEL MOBİL UYUM             */
/* ============================================================ */

@media (max-width: 768px) {
    /* 1.3fr 0.7fr oranlı grid'i tek sütun yap */
    div[style*="grid-template-columns: 1.3fr 0.7fr;"] {
        grid-template-columns: 1fr !important;
        display: grid !important;
        gap: 16px !important;
    }

    /* Sağdaki kutuyu ekrana sığdır */
    div[style*="border: 4px solid #dc2626;"] {
        padding: 12px 14px !important;
        font-size: 0.75rem !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    div[style*="border: 4px solid #dc2626;"] span,
    div[style*="border: 4px solid #dc2626;"] div,
    div[style*="border: 4px solid #dc2626;"] ul,
    div[style*="border: 4px solid #dc2626;"] li {
        font-size: 0.7rem !important;
        word-break: break-word !important;
        white-space: normal !important;
    }

    /* Sol kutudaki listeler */
    div[style*="border: 4px solid #16a34a;"] {
        padding: 12px 14px !important;
    }

    div[style*="border: 4px solid #16a34a;"] span,
    div[style*="border: 4px solid #16a34a;"] div,
    div[style*="border: 4px solid #16a34a;"] ul,
    div[style*="border: 4px solid #16a34a;"] li {
        font-size: 0.75rem !important;
        word-break: break-word !important;
    }

    /* Başlık boyutları */
    div[style*="border: 4px solid #dc2626;"] h3 {
        font-size: 0.8rem !important;
    }
    div[style*="border: 4px solid #16a34a;"] h3 {
        font-size: 0.85rem !important;
    }

    /* "⚠" simgesi ve yanındaki metin */
    .fa-umbrella-beach, .fa-calendar-week {
        font-size: 0.9rem !important;
    }
}

@media (max-width: 480px) {
    div[style*="border: 4px solid #dc2626;"] span,
    div[style*="border: 4px solid #dc2626;"] div {
        font-size: 0.6rem !important;
    }
    div[style*="border: 4px solid #16a34a;"] span,
    div[style*="border: 4px solid #16a34a;"] div {
        font-size: 0.65rem !important;
    }
}

/* ============================================================ */
/* ÖZEL EKLEME: SEÇİMLER (MADDE 78-79) MOBİL UYUM              */
/* ============================================================ */

/* Tablet ve Telefon: 2'li grid'i tek sütun yap */
@media (max-width: 768px) {
    .grid-2-cols {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* Çok küçük ekranlarda (cep telefonu) iç metinlerin taşmasını engelle */
@media (max-width: 480px) {
    .card-yellow ul, 
    .card-purple ul {
        padding-left: 14px !important;
        font-size: 0.65rem !important;
    }
    .card-yellow div[style*="border-left:4px solid"],
    .card-purple div[style*="border-left:4px solid"] {
        padding: 8px 10px !important;
    }
    .card-yellow span[style*="background:#dc2626"],
    .card-yellow span[style*="background:#2563eb"] {
        font-size: 0.6rem !important;
        padding: 0 4px !important;
    }
}
/* ============================================================ */
/* 2 TABLO YAN YANA – MOBİL UYUM                                */
/* ============================================================ */

/* Mobilde 2'li tabloyu tek sütun yap */
@media (max-width: 768px) {
    .grid-2-tablo {
        grid-template-columns: 1fr !important;
    }
    
    /* Tablo içindeki yazıları biraz küçült (okunabilirlik için) */
    .grid-2-tablo table {
        font-size: 0.6rem !important;
    }
    .grid-2-tablo th,
    .grid-2-tablo td {
        padding: 4px 6px !important;
    }
}

/* ============================================================ */
/* 2 TABLO YAN YANA – MOBİL UYUM (EK SIĞDIRMA)                 */
/* ============================================================ */

@media (max-width: 768px) {
    /* 2'li grid'i tek sütun yap */
    .grid-2-tablo {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Tablo yazılarını daha da küçült */
    .grid-2-tablo table {
        font-size: 0.5rem !important;
        min-width: unset !important;
        width: 100% !important;
    }

    /* Hücre içi boşlukları azalt */
    .grid-2-tablo th,
    .grid-2-tablo td {
        padding: 3px 4px !important;
        white-space: normal !important;  /* uzun metinler satır atlar */
        word-break: break-word !important;
    }

    /* Başlık font'unu biraz büyük tut (okunabilirlik) */
    .grid-2-tablo th {
        font-size: 0.55rem !important;
    }

    /* Tablo başlığındaki h3 font'unu da küçült */
    .grid-2-tablo h3 {
        font-size: 0.8rem !important;
    }

    /* Sağdaki etiketleri küçült */
    .grid-2-tablo span[style*="border-radius:30px"] {
        font-size: 0.45rem !important;
        padding: 1px 6px !important;
    }
}
.flex-center-gap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* ============================================================ */
/* SORU KARTLARI (Çıkmış Sorular İçin)                          */
/* ============================================================ */

.soru-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    align-items: stretch;
    padding: 20px;
}

.soru-karti {
    flex: 1 1 calc(33.333% - 24px);
    min-width: 280px;
    max-width: 100%;
    box-sizing: border-box;
    background: white;
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: 8px solid #ccc;
    transition: transform 0.2s, box-shadow 0.2s;
}
.soru-karti:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.soru-karti.mor { border-top-color: #7c3aed; }
.soru-karti.mavi { border-top-color: #2563eb; }
.soru-karti.yesil { border-top-color: #16a34a; }
.soru-karti.turuncu { border-top-color: #e65100; }
.soru-karti.kirmizi { border-top-color: #dc2626; }
.soru-karti.sari { border-top-color: #f59e0b; }
.soru-karti.iki-kolon { flex: 1 1 calc(50% - 12px); min-width: 320px; }

.kart-baslik {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.etiket-tarih {
    color: white;
    padding: 2px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
}
.etiket-zorluk {
    padding: 2px 12px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
}
.etiket-tur {
    background: #2563eb;
    color: white;
    padding: 2px 12px;
    border-radius: 30px;
    font-size: 10px;
    font-weight: 700;
}

.soru-metni {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
    line-height: 1.6;
}
.soru-ic-siklar {
    font-size: 14px;
    font-weight: 400;
    color: #1e293b;
    margin-top: 6px;
}
.sik-secenekleri {
    font-size: 14px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 16px;
    padding-left: 4px;
}

.btn-cevap {
    background: #7c3aed;
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s;
    align-self: flex-start;
}
.btn-cevap:hover {
    transform: scale(1.02);
    opacity: 0.9;
}
.soru-karti.mavi .btn-cevap { background: #2563eb; }
.soru-karti.yesil .btn-cevap { background: #16a34a; }
.soru-karti.turuncu .btn-cevap { background: #e65100; }
.soru-karti.kirmizi .btn-cevap { background: #dc2626; }
.soru-karti.sari .btn-cevap { background: #f59e0b; }

.cevap-alani {
    display: none;
    margin-top: 14px;
    background: #faf5ff;
    border-left: 6px solid #7c3aed;
    border-radius: 0 12px 12px 0;
    padding: 16px 20px;
}
.soru-karti.mavi .cevap-alani { background: #eff6ff; border-left-color: #2563eb; }
.soru-karti.yesil .cevap-alani { background: #f0fdf4; border-left-color: #16a34a; }
.soru-karti.turuncu .cevap-alani { background: #fff6ed; border-left-color: #e65100; }
.soru-karti.kirmizi .cevap-alani { background: #fee2e2; border-left-color: #dc2626; }
.soru-karti.sari .cevap-alani { background: #fffbeb; border-left-color: #f59e0b; }

.cevap-dogruluk {
    margin: 0;
    font-size: 15px;
    color: #1e293b;
    line-height: 1.7;
    font-weight: 700;
}
.aciklama {
    margin: 8px 0 0 0;
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}
.kaynak {
    margin: 6px 0 0 0;
    font-size: 13px;
    color: #64748b;
    border-top: 1px dashed #d8b4fe;
    padding-top: 6px;
}

/* ============================================================ */
/* ÖZEL KUTULAR VE YARDIMCI SINIFLAR                            */
/* ============================================================ */

.ozet-kutu {
    background: linear-gradient(135deg, #f0fdfa, #ccfbf1);
    border-radius: 14px;
    padding: 12px 24px;
    border: 2px solid #0d9488;
    margin: 20px 0 10px 0;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.ozet-kutu .ozet-icon {
    font-size: 2rem;
    background: #0d9488;
    color: white;
    padding: 4px 14px;
    border-radius: 30px;
    font-weight: 700;
    line-height: 1.4;
}
.ozet-kutu .ozet-yazi {
    flex: 1;
    font-size: 0.85rem;
    color: #1e293b;
    line-height: 1.6;
}
.ozet-kutu .ozet-yazi strong { color: #0d9488; }
.ozet-kutu .ozet-etiket {
    background: #0d9488;
    color: white;
    padding: 2px 10px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.7rem;
    display: inline-block;
    margin: 0 2px;
}

/* Grid içi esneklik */
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.flex-wrap { flex-wrap: wrap; }
.align-stretch { align-items: stretch; }
.justify-center { justify-content: center; }

/* Mobil iyileştirmeler */
@media (max-width: 768px) {
    .soru-karti {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        padding: 16px 18px !important;
    }
    .soru-karti.iki-kolon {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
    .soru-metni {
        font-size: 14px !important;
    }
    .sik-secenekleri {
        font-size: 13px !important;
    }
    .btn-cevap {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .soru-karti {
        padding: 12px 14px !important;
    }
    .soru-metni {
        font-size: 13px !important;
    }
    .sik-secenekleri {
        font-size: 12px !important;
        line-height: 1.6 !important;
    }
    .cevap-alani {
        padding: 12px 14px !important;
    }
    .cevap-dogruluk {
        font-size: 13px !important;
    }
    .aciklama {
        font-size: 12px !important;
    }
    .kaynak {
        font-size: 11px !important;
    }
}


/* ============================================================ */
/* ELEKTRİK-1.CSS'DEN AKTARILAN BENZERSİZ SINIFLAR             */
/*                                                              */
/* Not: dersler.css içinde zaten bulunan seçiciler eklenmedi.   */
/* elektrik-1.css içindeki @media blokları ayrıca eklenmedi;    */
/* dersler.css'in mevcut responsive yapısı korunmuştur.         */
/* ============================================================ */

.s1 {
    background: #ffffff; padding: 5px 12px; border-radius: 20px; border: 1px solid #1a6ea8; font-size: 14px;
}

.s2 {
    background:#003366; color:white; padding:2px 14px; border-radius:6px; font-size:0.8rem;
}

.s3 {
    background:#00838f; color:white; padding:1px 10px; border-radius:20px; font-size:0.7rem; font-weight:700;
}

.s4 {
    background:#00838f; color:white; padding:1px 8px; border-radius:20px; font-size:0.6rem; font-weight:700;
}

.s5 {
    background:#0d9488;
}

.s6 {
    background:#0d9488; color:white; padding:2px 10px; border-radius:30px; font-weight:600; font-size:0.7rem;
}

.s7 {
    background:#0d9488; color:white; padding:2px 10px; border-radius:30px; font-weight:600; font-size:1rem;
}

.s8 {
    background:#1e293b; color:white; padding:1px 10px; border-radius:20px; font-weight:600; font-size:0.8rem;
}

.s9 {
    background:#2563eb; color:white; border:none; padding:10px 22px; border-radius:40px; font-weight:600; font-size:14px; cursor:pointer; transition:0.2s; align-self:flex-start;
}

.s10 {
    background:#2563eb; color:white; padding:1px 12px; border-radius:30px; font-weight:700; font-size:0.85rem;
}

.s11 {
    background:#2563eb; color:white; padding:2px 10px; border-radius:30px; font-weight:600; font-size:0.7rem;
}

.s12 {
    background:#2563eb; color:white; padding:2px 12px; border-radius:30px; font-size:10px; font-weight:700;
}

.s13 {
    background:#2563eb; color:white; padding:2px 14px; border-radius:30px; font-size:12px; font-weight:700;
}

.s14 {
    background:#2e7d32; color:white; padding:2px 14px; border-radius:6px; font-size:0.8rem;
}

.s15 {
    background:#616161; color:white; padding:1px 12px; border-radius:20px; font-size:0.7rem;
}

.s16 {
    background:#7b1fa2; color:white; padding:2px 14px; border-radius:6px; font-size:0.8rem;
}

.s17 {
    background:#7c3aed; color:white; border:none; padding:10px 22px; border-radius:40px; font-weight:600; font-size:14px; cursor:pointer; transition:0.2s; align-self:flex-start;
}

.s18 {
    background:#7c3aed; color:white; padding:0 8px; border-radius:30px; font-size:0.65rem; font-weight:700;
}

.s19 {
    background:#7c3aed; color:white; padding:2px 14px; border-radius:30px; font-size:12px; font-weight:700;
}

.s20 {
    background:#c62828; color:white; padding:1px 10px; border-radius:20px; font-size:0.7rem; font-weight:700;
}

.s21 {
    background:#c62828; color:white; padding:1px 8px; border-radius:20px; font-size:0.55rem; font-weight:700;
}

.s22 {
    background:#c62828; color:white; padding:1px 8px; border-radius:20px; font-size:0.6rem; font-weight:700;
}

.s23 {
    background:#c8e6c9; border-radius:4px; padding:3px 4px; text-align:center;
}

.s24 {
    background:#c8e6c9; border-radius:8px; padding:8px 12px; text-align:center; font-size:0.8rem; color:#1b5e20;
}

.s25 {
    background:#ce93d8; padding:1px 6px; border-radius:20px; font-size:0.55rem; font-weight:600; color:#4a148c;
}

.s26 {
    background:#d32f2f; color:white; padding:2px 14px; border-radius:6px; font-size:0.8rem;
}

.s27 {
    background:#dbeafe; color:#1e40af; padding:2px 12px; border-radius:30px; font-size:11px; font-weight:700;
}

.s28 {
    background:#dc2626; color:white; padding:1px 14px; border-radius:30px; font-weight:700; font-size:0.85rem;
}

.s29 {
    background:#dc2626; color:white; padding:2px 10px; border-radius:30px; font-weight:600; font-size:0.7rem;
}

.s30 {
    background:#e0f7fa; border-radius:12px; padding:14px 18px; border:2px solid #80deea;
}

.s31 {
    background:#e0f7fa; border-radius:8px; padding:8px 10px; border:2px solid #80deea; text-align:center;
}

.s32 {
    background:#e1bee7; border-radius:8px; padding:10px 12px; text-align:center;
}

.s33 {
    background:#e65100; color:white; border:none; padding:10px 22px; border-radius:40px; font-weight:600; font-size:14px; cursor:pointer; transition:0.2s; align-self:flex-start;
}

.s34 {
    background:#e65100; color:white; padding:1px 10px; border-radius:20px; font-size:0.7rem; font-weight:700;
}

.s35 {
    background:#e65100; color:white; padding:2px 14px; border-radius:30px; font-size:12px; font-weight:700;
}

.s36 {
    background:#e65100; color:white; padding:2px 14px; border-radius:6px; font-size:0.8rem;
}

.s37 {
    background:#e8eaf6; border-radius:8px; padding:8px 12px; text-align:center;
}

.s38 {
    background:#e8f5e9; border-radius:10px; padding:12px 14px; border-left:4px solid #2e7d32;
}

.s39 {
    background:#ea580c; color:white;
}

.s40 {
    background:#eff6ff; border-radius:4px; padding:4px 8px; border-left:3px solid #2563eb;
}

.s41 {
    background:#eff6ff; border-radius:6px; padding:6px 10px; border-left:3px solid #2563eb; margin-bottom:4px;
}

.s42 {
    background:#eff6ff; border-radius:6px; padding:8px 10px; border-left:3px solid #2563eb;
}

.s43 {
    background:#eff6ff; border-radius:8px; padding:10px 12px; border-left:4px solid #2563eb;
}

.s44 {
    background:#eff6ff; border-radius:8px; padding:8px 10px; border-left:4px solid #2563eb;
}

.s45 {
    background:#f0fdf4; border-radius:6px; padding:5px 6px; border-left:3px solid #16a34a; display:flex; align-items:center; gap:4px;
}

.s46 {
    background:#f0fdf4; border-radius:6px; padding:6px 10px; border-left:3px solid #16a34a;
}

.s47 {
    background:#f0fdf4; border-radius:6px; padding:6px 10px; border-left:3px solid #16a34a; margin-bottom:4px;
}

.s48 {
    background:#f0fdf4; border-radius:6px; padding:6px 10px; margin-top:4px; border-left:3px solid #16a34a;
}

.s49 {
    background:#f0fdf4; border-radius:6px; padding:6px 8px; border-left:3px solid #16a34a;
}

.s50 {
    background:#f0fdf4; border-radius:6px; padding:6px 8px; border-left:3px solid #16a34a; text-align:center; margin-bottom:4px;
}

.s51 {
    background:#f0fdfa; border-radius:12px; padding:10px 16px; border-left:5px solid #0d9488; margin-bottom:20px;
}

.s52 {
    background:#f0fdfa; border-radius:6px; padding:6px 10px; border-left:3px solid #0d9488;
}

.s53 {
    background:#f3e5f5; border-radius:8px; padding:10px 12px; text-align:center;
}

.s54 {
    background:#f3e5f5; border-radius:8px; padding:8px 10px; text-align:center; border:1px solid #ce93d8;
}

.s55 {
    background:#f3e8ff; color:#5b21b6; padding:2px 12px; border-radius:30px; font-size:11px; font-weight:700;
}

.s56 {
    background:#f5f3ff; border-radius:4px; padding:3px 6px; border-left:2px solid #7c3aed;
}

.s57 {
    background:#f5f3ff; border-radius:4px; padding:4px 6px; margin-top:4px;
}

.s58 {
    background:#f5f3ff; border-radius:6px; padding:6px 10px; border-left:3px solid #7c3aed; margin-bottom:4px;
}

.s59 {
    background:#f5f5f5; border-radius:12px; padding:14px 18px; border:2px solid #bdbdbd;
}

.s60 {
    background:#f8fafc;
}

.s61 {
    background:#f9a825; color:#333; padding:2px 10px; border-radius:20px; font-size:0.65rem; font-weight:600;
}

.s62 {
    background:#f9a825; color:#78350f; padding:2px 14px; border-radius:6px; font-size:0.8rem;
}

.s63 {
    background:#fecaca; color:#991b1b; padding:2px 12px; border-radius:30px; font-size:0.65rem; font-weight:700;
}

.s64 {
    background:#fef2f2; border-radius:4px; padding:2px 6px; border-left:2px solid #dc2626;
}

.s65 {
    background:#ffcdd2; border-radius:6px; padding:4px 6px; text-align:center;
}

.s66 {
    background:#ffcdd2; border-radius:6px; padding:6px 10px; text-align:center; flex:1;
}

.s67 {
    background:#ffe0b2; border-radius:4px; padding:4px 6px; text-align:center;
}

.s68 {
    background:#ffebee; border-radius:10px; padding:12px 14px; border-left:4px solid #c62828;
}

.s69 {
    background:#ffebee; border-radius:12px; padding:14px 18px; border:2px solid #ef9a9a;
}

.s70 {
    background:#ffedd5; color:#9a3412; padding:2px 12px; border-radius:30px; font-size:11px; font-weight:700;
}

.s71 {
    background:#fff7ed; border-radius:4px; padding:4px 8px; border-left:3px solid #ea580c;
}

.s72 {
    background:#fff7ed; border-radius:6px; padding:4px 8px; border-left:3px solid #ea580c;
}

.s73 {
    background:#fff7ed; border-radius:6px; padding:4px 8px; border-left:3px solid #ea580c; margin-bottom:2px;
}

.s74 {
    background:#fff7ed; border-radius:6px; padding:4px 8px; border-left:3px solid #ea580c; margin-bottom:4px;
}

.s75 {
    background:#fff7ed; border-radius:6px; padding:6px 8px; border-left:3px solid #ea580c; text-align:center;
}

.s76 {
    background:#fff7ed; border-radius:6px; padding:6px 8px; border-left:3px solid #ea580c; text-align:center; margin-bottom:4px;
}

.s77 {
    background:linear-gradient(135deg, #f0fdfa, #ccfbf1); border-radius:14px; padding:12px 24px; border:2px solid #0d9488; margin:20px 0 10px 0; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}

.s78 {
    background:linear-gradient(135deg,#003366,#1a4a7a); color:white; padding:8px 14px; border-radius:14px; font-size:2rem; display:flex; align-items:center; justify-content:center; line-height:1;
}

.s79 {
    background:linear-gradient(135deg,#003366,#1a4a7a); color:white; width:48px; height:48px; font-size:24px;
}

.s80 {
    background:linear-gradient(135deg,#0d47a1,#1565c0); color:white;
}

.s81 {
    background:linear-gradient(135deg,#1a7a3a,#2e7d32); color:white; padding:8px 14px; border-radius:14px; font-size:2rem; display:flex; align-items:center; justify-content:center; line-height:1;
}

.s82 {
    background:linear-gradient(135deg,#b71c1c,#d32f2f); color:white;
}

.s83 {
    background:linear-gradient(135deg,#e0f7fa,#ffffff); border-radius:12px; padding:14px 16px; border:2px solid #00838f;
}

.s84 {
    background:linear-gradient(135deg,#e3f2fd,#ffffff); border-radius:12px; padding:14px 16px; border:2px solid #1565c0;
}

.s85 {
    background:linear-gradient(135deg,#e8f5e9,#ffffff); border-radius:12px; padding:14px 16px; border:2px solid #2e7d32;
}

.s86 {
    background:linear-gradient(135deg,#e8f5e9,#ffffff); border-radius:14px; padding:14px 12px; border:2px solid #2e7d32; border-top:6px solid #2e7d32; display:flex; flex-direction:column; height:100%;
}

.s87 {
    background:linear-gradient(135deg,#f3e5f5,#ffffff); border-radius:12px; padding:14px 16px; border:2px solid #7b1fa2;
}

.s88 {
    background:linear-gradient(135deg,#f3e5f5,#ffffff); border-radius:16px; padding:20px 24px; margin:20px 0; border-left:8px solid #7b1fa2; box-shadow:0 4px 16px rgba(123,31,162,0.08);
}

.s89 {
    background:linear-gradient(135deg,#fce4ec,#ffffff); border-radius:12px; padding:14px 16px; border:2px solid #c62828;
}

.s90 {
    background:linear-gradient(135deg,#fce4ec,#ffffff); border-radius:14px; padding:12px 14px; border:2px solid #c62828; border-top:6px solid #c62828; display:flex; flex-direction:column; height:100%;
}

.s91 {
    background:linear-gradient(135deg,#fce4ec,#ffffff); border-radius:14px; padding:14px 12px; border:2px solid #c62828; border-top:6px solid #c62828; display:flex; flex-direction:column; height:100%;
}

.s92 {
    background:linear-gradient(135deg,#fff3e0,#ffffff); border-radius:12px; padding:14px 16px; border:2px solid #e65100;
}

.s93 {
    background:linear-gradient(135deg,#fff3e0,#ffffff); border-radius:14px; padding:16px 20px; border:2px solid #ef6c00;
}

.s94 {
    background:linear-gradient(135deg,#fff8e1,#ffffff); border-radius:12px; padding:14px 16px; border:2px solid #f9a825;
}

.s95 {
    background:linear-gradient(180deg,#e3f2fd,#ffffff); border-bottom:1px solid #e0e0e0;
}

.s96 {
    background:linear-gradient(180deg,#e8f5e9,#ffffff); border-bottom:1px solid #e0e0e0;
}

.s97 {
    background:linear-gradient(180deg,#f3e5f5,#ffffff); border-bottom:1px solid #e0e0e0;
}

.s98 {
    background:linear-gradient(180deg,#fce4ec,#ffffff); border-bottom:1px solid #e0e0e0;
}

.s99 {
    background:linear-gradient(180deg,#fff3e0,#ffffff); border-bottom:1px solid #e0e0e0;
}

.s100 {
    background:rgba(255,255,255,0.12); padding:1px 8px; border-radius:30px; margin:0 3px; display:inline-block; font-size:0.7rem;
}

.s101 {
    background:rgba(255,255,255,0.12); padding:2px 10px; border-radius:30px; margin:0 4px; display:inline-block;
}

.s102 {
    background:rgba(255,255,255,0.15); padding:2px 12px; border-radius:30px; margin:0 4px; display:inline-block;
}

.s103 {
    border-bottom-color:#b71c1c;
}

.s104 {
    border-top-color:#0d9488; background:linear-gradient(180deg,#dbeafe,#ffffff);
}

.s105 {
    border-top-color:#0d9488; background:linear-gradient(180deg,#dbeafe,#ffffff); display:flex; flex-direction:column; height:100%;
}

.s106 {
    border-top-color:#0d9488; background:linear-gradient(180deg,#dbeafe,#ffffff); display:flex; flex-direction:column; height:100%; padding:16px 16px;
}

.s107 {
    border-top-color:#0d9488; background:linear-gradient(180deg,#dcfce7,#ffffff);
}

.s108 {
    border-top-color:#0d9488; background:linear-gradient(180deg,#dcfce7,#ffffff); display:flex; flex-direction:column; height:100%;
}

.s109 {
    border-top-color:#0d9488; background:linear-gradient(180deg,#dcfce7,#ffffff); display:flex; flex-direction:column; height:100%; padding:16px 16px;
}

.s110 {
    border-top-color:#0d9488; background:linear-gradient(180deg,#f3e8ff,#ffffff);
}

.s111 {
    border-top-color:#0d9488; background:linear-gradient(180deg,#f3e8ff,#ffffff); display:flex; flex-direction:column; height:100%;
}

.s112 {
    border-top-color:#0d9488; background:linear-gradient(180deg,#fee2e2,#ffffff);
}

.s113 {
    border-top-color:#0d9488; background:linear-gradient(180deg,#fee2e2,#ffffff); display:flex; flex-direction:column; height:100%;
}

.s114 {
    border-top-color:#0d9488; background:linear-gradient(180deg,#fef9c7,#ffffff);
}

.s115 {
    border-top-color:#0d9488; background:linear-gradient(180deg,#fef9c7,#ffffff); display:flex; flex-direction:column; height:100%;
}

.s116 {
    border-top-color:#0d9488; background:linear-gradient(180deg,#ffedd5,#ffffff);
}

.s117 {
    border-top-color:#0d9488; background:linear-gradient(180deg,#ffedd5,#ffffff); display:flex; flex-direction:column; height:100%;
}

.s118 {
    border-top-color:#1a7a3a; background:linear-gradient(180deg,#e8f5e9,#ffffff); display:flex; flex-direction:column; height:100%; padding:14px 12px;
}

.s119 {
    border-top-color:#2e7d32; background:linear-gradient(180deg,#e8f5e9,#ffffff); display:flex; flex-direction:column; height:100%; padding:14px 12px;
}

.s120 {
    border-top-color:#e65100; background:linear-gradient(180deg,#fff3e0,#ffffff); display:flex; flex-direction:column; height:100%;
}

.s121 {
    border-top:3px solid #003366; padding-top:16px; margin:30px 0 16px 0;
}

.s122 {
    border-top:3px solid #2e7d32; padding-top:16px; margin:30px 0 16px 0;
}

.s123 {
    border-top:3px solid #7b1fa2; padding-top:16px; margin:30px 0 16px 0;
}

.s124 {
    border-top:3px solid #d32f2f; padding-top:16px; margin:30px 0 16px 0;
}

.s125 {
    border-top:3px solid #e65100; padding-top:16px; margin:30px 0 16px 0;
}

.s126 {
    border-top:3px solid #f9a825; padding-top:16px; margin:30px 0 16px 0;
}

.s127 {
    border-top:4px solid #003366; padding-top:16px; margin:30px 0 20px 0;
}

.s128 {
    border-top:4px solid #1a7a3a; padding-top:16px; margin:30px 0 20px 0;
}

.s129 {
    color:#003366;
}

.s130 {
    color:#003366; font-size:1.3rem; margin:0;
}

.s131 {
    color:#003366; margin:0 0 4px 0; font-size:0.85rem;
}

.s132 {
    color:#003366; margin:0 0 4px 0; font-size:0.8rem;
}

.s133 {
    color:#003366; margin:0; font-size:1.2rem; display:flex; align-items:center; gap:10px;
}

.s134 {
    color:#003366; margin:0; font-size:1.2rem; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}

.s135 {
    color:#003366; margin:0; font-size:1.6rem; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}

.s136 {
    color:#004d40; margin:0; font-size:0.85rem;
}

.s137 {
    color:#00695c;
}

.s138 {
    color:#00695c; margin:0; font-size:0.9rem;
}

.s139 {
    color:#00838f;
}

.s140 {
    color:#0d47a1;
}

.s141 {
    color:#0d47a1; margin:0; font-size:0.85rem;
}

.s142 {
    color:#0d47a1; margin:0; font-size:1.1rem;
}

.s143 {
    color:#0d47a1; margin:30px 0 15px 0; border-bottom:3px solid #0d47a1; padding-bottom:8px; display:flex; align-items:center; gap:10px;
}

.s144 {
    color:#0d9488;
}

.s145 {
    color:#0d9488; margin:15px 0 8px 0; font-size:1rem;
}

.s146 {
    color:#0d9488; margin:25px 0 15px 0; display:flex; align-items:center; gap:8px;
}

.s147 {
    color:#0f172a;
}

.s148 {
    color:#166534;
}

.s149 {
    color:#1a7a3a;
}

.s150 {
    color:#1a7a3a; margin:0 0 4px 0; font-size:0.85rem;
}

.s151 {
    color:#1a7a3a; margin:0; font-size:1.6rem; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}

.s152 {
    color:#1b5e20;
}

.s153 {
    color:#1b5e20; margin:0; font-size:0.75rem;
}

.s154 {
    color:#1b5e20; margin:0; font-size:0.85rem;
}

.s155 {
    color:#1e40af;
}

.s156 {
    color:#1e40af; font-weight:700;
}

.s157 {
    color:#1e88e5;
}

.s158 {
    color:#2563eb;
}

.s159 {
    color:#2e7d32;
}

.s160 {
    color:#2e7d32; margin:0 0 4px 0; font-size:0.85rem;
}

.s161 {
    color:#2e7d32; margin:0 0 4px 0; font-size:0.8rem;
}

.s162 {
    color:#2e7d32; margin:0; font-size:0.95rem;
}

.s163 {
    color:#2e7d32; margin:0; font-size:1rem;
}

.s164 {
    color:#424242;
}

.s165 {
    color:#424242; margin:0; font-size:0.9rem;
}

.s166 {
    color:#4a148c;
}

.s167 {
    color:#4a148c; margin:0; font-size:0.85rem;
}

.s168 {
    color:#4a148c; margin:0; font-size:0.9rem;
}

.s169 {
    color:#4c1d95;
}

.s170 {
    color:#5b21b6; font-weight:700;
}

.s171 {
    color:#78350f;
}

.s172 {
    color:#78350f; margin:0 0 4px 0; font-size:0.85rem;
}

.s173 {
    color:#7b1fa2;
}

.s174 {
    color:#7b1fa2; margin:0 0 4px 0; font-size:0.85rem;
}

.s175 {
    color:#7b1fa2; margin:0 0 4px 0; font-size:0.8rem;
}

.s176 {
    color:#7c3aed;
}

.s177 {
    color:#856404; margin:0 0 6px 0; font-size:0.95rem;
}

.s178 {
    color:#90caf9;
}

.s179 {
    color:#991b1b;
}

.s180 {
    color:#999;
}

.s181 {
    color:#9a3412;
}

.s182 {
    color:#9a3412; font-weight:700;
}

.s183 {
    color:#b2dfdb;
}

.s184 {
    color:#b71c1c;
}

.s185 {
    color:#b71c1c; margin:0; font-size:0.75rem;
}

.s186 {
    color:#b71c1c; margin:0; font-size:0.85rem;
}

.s187 {
    color:#b71c1c; margin:0; font-size:0.8rem;
}

.s188 {
    color:#b71c1c; margin:0; font-size:0.95rem;
}

.s189 {
    color:#b71c1c; margin:30px 0 15px 0; border-bottom:3px solid #b71c1c; padding-bottom:8px; display:flex; align-items:center; gap:10px;
}

.s190 {
    color:#bbb;
}

.s191 {
    color:#bf360c;
}

.s192 {
    color:#bf360c; margin:0; font-size:0.85rem;
}

.s193 {
    color:#bf360c; margin:0; font-size:0.95rem;
}

.s194 {
    color:#c62828;
}

.s195 {
    color:#c62828; margin:0; font-size:0.9rem;
}

.s196 {
    color:#d32f2f;
}

.s197 {
    color:#d32f2f; margin:0 0 4px 0; font-size:0.85rem;
}

.s198 {
    color:#d32f2f; margin:0 0 4px 0; font-size:0.8rem;
}

.s199 {
    color:#dc2626;
}

.s200 {
    color:#e65100;
}

.s201 {
    color:#e65100; margin:0 0 4px 0; font-size:0.85rem;
}

.s202 {
    color:#e65100; margin:0 0 4px 0; font-size:0.8rem;
}

.s203 {
    color:#e65100; margin:0; font-size:0.85rem;
}

.s204 {
    color:#e65100; margin:0; font-size:0.95rem;
}

.s205 {
    color:#e65100; margin:0; font-size:0.9rem;
}

.s206 {
    color:#ef6c00;
}

.s207 {
    color:#f9a825;
}

.s208 {
    color:#f9a825; margin:0 0 4px 0; font-size:0.8rem;
}

.s209 {
    display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; align-items: stretch; padding: 20px;
}

.s210 {
    display:block; font-size:0.65rem; color:#475569;
}

.s211 {
    display:block; font-size:0.9rem; font-weight:800; color:#16a34a;
}

.s212 {
    display:block; height:24px;
}

.s213 {
    display:flex; align-items:center; gap:10px; margin-bottom:10px;
}

.s214 {
    display:flex; align-items:center; gap:10px; margin-bottom:6px;
}

.s215 {
    display:flex; align-items:center; gap:10px; margin-bottom:8px;
}

.s216 {
    display:flex; align-items:center; gap:12px;
}

.s217 {
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}

.s218 {
    display:flex; align-items:center; gap:12px; margin-bottom:12px;
}

.s219 {
    display:flex; align-items:center; gap:12px; margin-bottom:16px;
}

.s220 {
    display:flex; align-items:center; gap:12px; margin-bottom:6px;
}

.s221 {
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}

.s222 {
    display:flex; align-items:center; gap:14px; margin-bottom:16px;
}

.s223 {
    display:flex; align-items:center; gap:16px; border-bottom:3px solid #003366; padding-bottom:8px; flex-wrap:wrap;
}

.s224 {
    display:flex; align-items:center; gap:16px; border-bottom:3px solid #1a7a3a; padding-bottom:8px; flex-wrap:wrap;
}

.s225 {
    display:flex; align-items:center; gap:4px;
}

.s226 {
    display:flex; align-items:center; gap:6px;
}

.s227 {
    display:flex; align-items:center; gap:6px; font-size:0.7rem; color:#475569;
}

.s228 {
    display:flex; align-items:center; gap:6px; margin-bottom:2px;
}

.s229 {
    display:flex; align-items:center; gap:6px; margin-bottom:4px;
}

.s230 {
    display:flex; align-items:center; gap:6px; margin-bottom:6px;
}

.s231 {
    display:flex; align-items:center; gap:8px;
}

.s232 {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px;
}

.s233 {
    display:flex; align-items:center; gap:8px; margin-bottom:10px;
}

.s234 {
    display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap;
}

.s235 {
    display:flex; align-items:center; gap:8px; margin-bottom:4px;
}

.s236 {
    display:flex; align-items:center; gap:8px; margin-bottom:6px;
}

.s237 {
    display:flex; align-items:center; gap:8px; margin-bottom:8px;
}

.s238 {
    display:flex; align-items:flex-start; gap:12px;
}

.s239 {
    display:flex; align-items:flex-start; gap:16px;
}

.s240 {
    display:flex; flex-direction:column; height:100%; padding:14px 12px;
}

.s241 {
    display:flex; flex-direction:column; height:100%; padding:14px 14px;
}

.s242 {
    display:flex; gap:8px; margin-top:2px;
}

.s243 {
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;
}

.s244 {
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-bottom:16px;
}

.s245 {
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px; margin-top:4px;
}

.s246 {
    display:grid; grid-template-columns:1fr 1fr; gap:16px;
}

.s247 {
    display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;
}

.s248 {
    display:grid; grid-template-columns:1fr 1fr; gap:4px;
}

.s249 {
    display:grid; grid-template-columns:1fr 1fr; gap:6px; flex:1;
}

.s250 {
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
}

.s251 {
    display:inline-flex; align-items:center; gap:6px;
}

.s252 {
    display:none; margin-top:14px; background:#eff6ff; border-left:6px solid #2563eb; border-radius:0 12px 12px 0; padding:16px 20px;
}

.s253 {
    display:none; margin-top:14px; background:#faf5ff; border-left:6px solid #7c3aed; border-radius:0 12px 12px 0; padding:16px 20px;
}

.s254 {
    display:none; margin-top:14px; background:#fff6ed; border-left:6px solid #e65100; border-radius:0 12px 12px 0; padding:16px 20px;
}

.s255 {
    flex: 1 1 calc(33.333% - 16px); min-width: 280px; max-width: 100%; box-sizing: border-box; background:white; border-radius:16px; border-top:8px solid #2563eb; padding:22px 24px; box-shadow:0 4px 16px rgba(0,0,0,0.06); display:flex; flex-direction:column; justify-content:space-between;
}

.s256 {
    flex: 1 1 calc(33.333% - 16px); min-width: 280px; max-width: 100%; box-sizing: border-box; background:white; border-radius:16px; border-top:8px solid #7c3aed; padding:22px 24px; box-shadow:0 4px 16px rgba(0,0,0,0.06); display:flex; flex-direction:column; justify-content:space-between;
}

.s257 {
    flex: 1 1 calc(33.333% - 16px); min-width: 280px; max-width: 100%; box-sizing: border-box; background:white; border-radius:16px; border-top:8px solid #e65100; padding:22px 24px; box-shadow:0 4px 16px rgba(0,0,0,0.06); display:flex; flex-direction:column; justify-content:space-between;
}

.s258 {
    flex: 1 1 calc(33.333% - 24px); min-width: 280px; max-width: 100%; box-sizing: border-box; background:white; border-radius:16px; border-top:8px solid #7c3aed; padding:22px 24px; box-shadow:0 4px 16px rgba(0,0,0,0.06); display:flex; flex-direction:column; justify-content:space-between; height:100%;
}

.s259 {
    flex: 1 1 calc(50% - 12px); min-width: 320px; max-width: 100%; box-sizing: border-box; background:white; border-radius:16px; border-top:8px solid #2563eb; padding:22px 24px; box-shadow:0 4px 16px rgba(0,0,0,0.06); display:flex; flex-direction:column; justify-content:space-between;
}

.s260 {
    flex: 1 1 calc(50% - 12px); min-width: 320px; max-width: 100%; box-sizing: border-box; background:white; border-radius:16px; border-top:8px solid #7c3aed; padding:22px 24px; box-shadow:0 4px 16px rgba(0,0,0,0.06); display:flex; flex-direction:column; justify-content:space-between;
}

.s261 {
    flex:1;
}

.s262 {
    flex:1; font-size:0.85rem; color:#1e293b; line-height:1.6;
}

.s263 {
    font-size:0.55rem; color:#2a1a3a;
}

.s264 {
    font-size:0.55rem; color:#6b7280;
}

.s265 {
    font-size:0.58rem; color:#4a1a1a; line-height:1.2; margin:0; padding-left:14px; flex:1;
}

.s266 {
    font-size:0.5rem; color:#666;
}

.s267 {
    font-size:0.62rem; color:#1a3a1a; line-height:1.3; margin:0; padding-left:14px; flex:1;
}

.s268 {
    font-size:0.62rem; color:#1e293b; line-height:1.3; margin:0; padding-left:14px; flex:1;
}

.s269 {
    font-size:0.62rem; color:#2a1a3a; line-height:1.3; margin:0; padding-left:14px; flex:1;
}

.s270 {
    font-size:0.62rem; color:#4a1a1a; line-height:1.3; margin:0; padding-left:14px; flex:1;
}

.s271 {
    font-size:0.62rem; color:#4a3520; line-height:1.3; margin:0; padding-left:14px; flex:1;
}

.s272 {
    font-size:0.65rem; color:#1a3a1a; font-weight:600;
}

.s273 {
    font-size:0.65rem; color:#1a3a1a; line-height:1.3; margin:0; padding-left:14px; flex:1;
}

.s274 {
    font-size:0.65rem; color:#1e293b;
}

.s275 {
    font-size:0.65rem; color:#1e293b; line-height:1.4; margin:0; padding-left:14px; flex:1;
}

.s276 {
    font-size:0.65rem; color:#2a1a3a;
}

.s277 {
    font-size:0.65rem; color:#2a1a3a; line-height:1.3; margin:0; padding-left:14px; flex:1;
}

.s278 {
    font-size:0.65rem; color:#2a1a3a; line-height:1.4; margin:0; padding-left:14px; flex:1;
}

.s279 {
    font-size:0.65rem; color:#4a3520; font-weight:600;
}

.s280 {
    font-size:0.65rem; color:#6b7280; margin-top:4px;
}

.s281 {
    font-size:0.65rem; font-weight:700; color:#e65100;
}

.s282 {
    font-size:0.68rem; color:#1a3a1a; line-height:1.3; margin:0; flex:1;
}

.s283 {
    font-size:0.68rem; color:#4a3520; line-height:1.4; margin:0; flex:1;
}

.s284 {
    font-size:0.6rem; color:#1e293b;
}

.s285 {
    font-size:0.6rem; color:#2a1a3a; line-height:1.2; margin:0; padding-left:14px; flex:1;
}

.s286 {
    font-size:0.6rem; color:#4a1a1a; line-height:1.2; margin:0; padding-left:14px; flex:1;
}

.s287 {
    font-size:0.6rem; color:#4a3520; line-height:1.2; margin:0; padding-left:14px; flex:1;
}

.s288 {
    font-size:0.6rem; color:#666; font-weight:400;
}

.s289 {
    font-size:0.72rem; color:#1e293b; line-height:1.4; margin:0; flex:1;
}

.s290 {
    font-size:0.72rem; color:#333; line-height:1.4; margin:0; flex:1;
}

.s291 {
    font-size:0.75rem; color:#1a3a1a; line-height:1.4; margin:0; flex:1;
}

.s292 {
    font-size:0.75rem; color:#1e293b; line-height:1.4; margin:0; flex:1;
}

.s293 {
    font-size:0.75rem; color:#2a1a3a; line-height:1.4; margin:0; flex:1;
}

.s294 {
    font-size:0.75rem; color:#333; line-height:1.4; margin:0; flex:1;
}

.s295 {
    font-size:0.75rem; color:#4a1a1a; line-height:1.4; margin:0; flex:1;
}

.s296 {
    font-size:0.75rem; color:#4a3520; line-height:1.4; margin:0; flex:1;
}

.s297 {
    font-size:0.75rem; color:#b71c1c;
}

.s298 {
    font-size:0.78rem; color:#1a3a1a; line-height:1.4; margin:0;
}

.s299 {
    font-size:0.78rem; color:#1a3a1a; line-height:1.4; margin:0; flex:1;
}

.s300 {
    font-size:0.78rem; color:#1e293b; line-height:1.4; margin:0;
}

.s301 {
    font-size:0.78rem; color:#1e293b; line-height:1.4; margin:0; flex:1;
}

.s302 {
    font-size:0.78rem; color:#2a1a3a; line-height:1.4; margin:0;
}

.s303 {
    font-size:0.78rem; color:#2a1a3a; line-height:1.4; margin:0; flex:1;
}

.s304 {
    font-size:0.78rem; color:#333; line-height:1.4; margin:0; flex:1;
}

.s305 {
    font-size:0.78rem; color:#4a1a1a; line-height:1.4; margin:0;
}

.s306 {
    font-size:0.78rem; color:#4a1a1a; line-height:1.4; margin:0; flex:1;
}

.s307 {
    font-size:0.78rem; color:#4a3520; line-height:1.4; margin:0;
}

.s308 {
    font-size:0.78rem; color:#4a3520; line-height:1.4; margin:0; flex:1;
}

.s309 {
    font-size:0.7rem;
}

.s310 {
    font-size:0.7rem; color:#1e293b;
}

.s311 {
    font-size:0.7rem; color:#1e293b; line-height:1.4; margin:0; padding-left:16px; flex:1;
}

.s312 {
    font-size:0.7rem; color:#2a1a3a;
}

.s313 {
    font-size:0.7rem; color:#333; line-height:1.4; margin:0; flex:1;
}

.s314 {
    font-size:0.7rem; color:#4a148c; font-weight:600;
}

.s315 {
    font-size:0.7rem; color:#4a1a1a; line-height:1.4; margin:0; padding-left:16px; flex:1;
}

.s316 {
    font-size:0.7rem; color:#4a3520;
}

.s317 {
    font-size:0.7rem; color:#4a3520; line-height:1.3; margin:0; flex:1;
}

.s318 {
    font-size:0.7rem; color:#4a3520; line-height:1.4; margin:0; flex:1;
}

.s319 {
    font-size:0.7rem; color:#555;
}

.s320 {
    font-size:0.7rem; color:#64748b;
}

.s321 {
    font-size:0.7rem; color:#666;
}

.s322 {
    font-size:0.7rem; font-weight:700; color:#2e7d32;
}

.s323 {
    font-size:0.82rem; color:#1e293b; line-height:1.5; margin:0; flex:1;
}

.s324 {
    font-size:0.82rem; color:#4a3520; line-height:1.5; margin:0; flex:1;
}

.s325 {
    font-size:0.85rem; color:#1a3a1a; line-height:1.5; margin:0; flex:1;
}

.s326 {
    font-size:0.85rem; color:#1e293b; line-height:1.5; margin:0;
}

.s327 {
    font-size:0.85rem; color:#1e293b; line-height:1.5; margin:0; flex:1;
}

.s328 {
    font-size:0.85rem; color:#1e293b; line-height:1.6; margin:0; flex:1;
}

.s329 {
    font-size:0.85rem; color:#4a1a1a; line-height:1.5; margin:0; flex:1;
}

.s330 {
    font-size:0.8rem; color:#1e293b;
}

.s331 {
    font-size:0.8rem; margin:2px 0 0 0;
}

.s332 {
    font-size:1.05rem; line-height:1.6; margin:4px 0 0 0; font-weight:500;
}

.s333 {
    font-size:1.1rem; font-weight:700; color:#7b1fa2;
}

.s334 {
    font-size:1.1rem; font-weight:700; color:#c62828;
}

.s335 {
    font-size:1.2rem; font-weight:800;
}

.s336 {
    font-size:1.2rem; font-weight:900; color:#ea580c;
}

.s337 {
    font-size:1.3rem; font-weight:700; color:#4a148c;
}

.s338 {
    font-size:1.4rem;
}

.s339 {
    font-size:1.4rem; font-weight:900; color:#2563eb;
}

.s340 {
    font-size:1.6rem;
}

.s341 {
    font-size:1.6rem; background:#16a34a; color:white; padding:2px 10px; border-radius:30px; line-height:1;
}

.s342 {
    font-size:1.6rem; background:#2563eb; color:white; padding:2px 10px; border-radius:30px; line-height:1;
}

.s343 {
    font-size:1.6rem; background:#7c3aed; color:white; padding:2px 10px; border-radius:30px; line-height:1;
}

.s344 {
    font-size:1.6rem; background:#dc2626; color:white; padding:2px 10px; border-radius:30px; line-height:1;
}

.s345 {
    font-size:1.6rem; background:#ea580c; color:white; padding:2px 10px; border-radius:30px; line-height:1;
}

.s346 {
    font-size:1.6rem; font-weight:900; color:#ea580c;
}

.s347 {
    font-size:1.8rem; background:#16a34a; color:white; padding:2px 10px; border-radius:30px; line-height:1;
}

.s348 {
    font-size:1.8rem; background:#16a34a; color:white; padding:2px 10px; border-radius:50px; line-height:1.4;
}

.s349 {
    font-size:1.8rem; background:#2563eb; color:white; padding:2px 10px; border-radius:30px; line-height:1;
}

.s350 {
    font-size:1.8rem; background:#2563eb; color:white; padding:2px 10px; border-radius:50px; line-height:1.4;
}

.s351 {
    font-size:1.8rem; background:#7c3aed; color:white; padding:2px 10px; border-radius:30px; line-height:1;
}

.s352 {
    font-size:1.8rem; background:#dc2626; color:white; padding:2px 10px; border-radius:30px; line-height:1;
}

.s353 {
    font-size:1.8rem; background:#e8f5e9; padding:4px 10px; border-radius:12px; border:2px solid #1a7a3a; line-height:1; display:inline-flex; align-items:center; justify-content:center;
}

.s354 {
    font-size:1.8rem; background:#ea580c; color:white; padding:2px 10px; border-radius:30px; line-height:1;
}

.s355 {
    font-size:1.8rem; background:#f4f8fc; padding:4px 10px; border-radius:12px; border:2px solid #003366; line-height:1; display:inline-flex; align-items:center; justify-content:center;
}

.s356 {
    font-size:1.8rem; font-weight:700; color:#c62828;
}

.s357 {
    font-size:14px; color:#555; line-height:1.8; margin-bottom:16px; padding-left:4px;
}

.s358 {
    font-size:14px; font-weight:400; color:#1e293b; margin-top:6px;
}

.s359 {
    font-size:15px; font-weight:600; color:#1e293b; margin-bottom:12px; line-height:1.6;
}

.s360 {
    font-size:16px;
}

.s361 {
    font-size:16px; background:#2e7d32; color:white; padding:0 10px; border-radius:30px; font-weight:700; line-height:1.6;
}

.s362 {
    font-size:16px; background:#c62828; color:white; padding:0 10px; border-radius:30px; font-weight:700; line-height:1.6;
}

.s363 {
    font-size:16px; background:#e65100; color:white; padding:0 10px; border-radius:30px; font-weight:700; line-height:1.6;
}

.s364 {
    font-size:18px;
}

.s365 {
    font-size:1rem;
}

.s366 {
    font-size:1rem; font-weight:700; color:#c62828;
}

.s367 {
    font-size:2.2rem; background:#16a34a; color:white; padding:4px 10px; border-radius:50px; line-height:1;
}

.s368 {
    font-size:2.2rem; background:#2563eb; color:white; padding:4px 10px; border-radius:50px; line-height:1;
}

.s369 {
    font-size:2.2rem; background:#7c3aed; color:white; padding:4px 10px; border-radius:50px; line-height:1;
}

.s370 {
    font-size:2.2rem; background:#dc2626; color:white; padding:4px 10px; border-radius:50px; line-height:1;
}

.s371 {
    font-size:2.2rem; background:#ea580c; color:white; padding:4px 10px; border-radius:50px; line-height:1;
}

.s372 {
    font-size:2.2rem; background:#f59e0b; color:white; padding:4px 10px; border-radius:50px; line-height:1;
}

.s373 {
    font-size:20px;
}

.s374 {
    font-size:20px; font-weight:700; color:#1a237e;
}

.s375 {
    font-size:22px;
}

.s376 {
    font-size:24px;
}

.s377 {
    font-size:28px;
}

.s378 {
    font-size:28px; margin-bottom:4px;
}

.s379 {
    font-size:2rem; background:#0d9488; color:white; padding:4px 14px; border-radius:30px; font-weight:700; line-height:1.4;
}

.s380 {
    font-size:2rem; background:#16a34a; color:white; padding:4px 10px; border-radius:50px; line-height:1;
}

.s381 {
    font-size:2rem; background:#16a34a; color:white; padding:4px 8px; border-radius:50px; line-height:1;
}

.s382 {
    font-size:2rem; background:#2563eb; color:white; padding:4px 10px; border-radius:50px; line-height:1;
}

.s383 {
    font-size:2rem; background:#2563eb; color:white; padding:4px 8px; border-radius:50px; line-height:1;
}

.s384 {
    font-size:2rem; background:#7c3aed; color:white; padding:4px 10px; border-radius:50px; line-height:1;
}

.s385 {
    font-size:2rem; background:#7c3aed; color:white; padding:4px 8px; border-radius:50px; line-height:1;
}

.s386 {
    font-size:2rem; background:#dc2626; color:white; padding:4px 10px; border-radius:50px; line-height:1;
}

.s387 {
    font-size:2rem; background:#dc2626; color:white; padding:4px 8px; border-radius:50px; line-height:1;
}

.s388 {
    font-size:2rem; background:#ea580c; color:white; padding:4px 10px; border-radius:50px; line-height:1;
}

.s389 {
    font-size:2rem; background:#ea580c; color:white; padding:4px 8px; border-radius:50px; line-height:1;
}

.s390 {
    font-size:2rem; background:#f59e0b; color:white; padding:4px 8px; border-radius:50px; line-height:1;
}

.s391 {
    font-size:2rem; font-weight:900; color:#ea580c;
}

.s392 {
    font-size:32px; margin-bottom:4px;
}

.s393 {
    font-size:36px; background:#e65100; color:white; padding:4px 12px; border-radius:50px; line-height:1;
}

.s394 {
    font-size:48px; background:rgba(255,255,255,0.15); padding:8px 14px; border-radius:16px; line-height:1;
}

.s395 {
    font-weight:700;
}

.s396 {
    font-weight:700; color:#00695c; font-size:0.75rem;
}

.s397 {
    font-weight:700; color:#0d9488; font-size:0.75rem;
}

.s398 {
    font-weight:700; color:#166534;
}

.s399 {
    font-weight:700; color:#166534; font-size:0.7rem;
}

.s400 {
    font-weight:700; color:#1b5e20; font-size:0.6rem;
}

.s401 {
    font-weight:700; color:#1b5e20; font-size:0.75rem;
}

.s402 {
    font-weight:700; color:#1e40af;
}

.s403 {
    font-weight:700; color:#1e40af; font-size:0.78rem;
}

.s404 {
    font-weight:700; color:#1e40af; font-size:0.7rem;
}

.s405 {
    font-weight:700; color:#1e40af; font-size:0.82rem;
}

.s406 {
    font-weight:700; color:#2e7d32; font-size:0.85rem;
}

.s407 {
    font-weight:700; color:#4a148c; font-size:0.75rem;
}

.s408 {
    font-weight:700; color:#4a148c; font-size:0.8rem;
}

.s409 {
    font-weight:700; color:#4c1d95;
}

.s410 {
    font-weight:700; color:#4c1d95; font-size:0.75rem;
}

.s411 {
    font-weight:700; color:#9a3412;
}

.s412 {
    font-weight:700; color:#b71c1c; font-size:0.65rem;
}

.s413 {
    font-weight:700; color:#b71c1c; font-size:0.7rem;
}

.s414 {
    font-weight:700; color:#b71c1c; font-size:0.85rem;
}

.s415 {
    font-weight:700; color:#bf360c; font-size:0.6rem;
}

.s416 {
    font-weight:700; color:#bf360c; font-size:0.75rem;
}

.s417 {
    font-weight:700; color:#ea580c;
}

.s418 {
    font-weight:700; font-size:0.85rem; color:#1e293b;
}

.s419 {
    gap:10px; margin:0;
}

.s420 {
    gap:14px; align-items:stretch; display:grid; grid-template-columns:repeat(6,1fr);
}

.s421 {
    gap:16px; align-items:stretch;
}

.s422 {
    gap:16px; align-items:stretch; display:grid; grid-template-columns:repeat(4,1fr);
}

.s423 {
    gap:16px; align-items:stretch; display:grid; grid-template-columns:repeat(4,1fr); margin:20px 0;
}

.s424 {
    gap:16px; align-items:stretch; display:grid; grid-template-columns:repeat(5,1fr);
}

.s425 {
    gap:20px; align-items:stretch; display:grid; grid-template-columns:repeat(2,1fr);
}

.s426 {
    margin-bottom:8px;
}

.s427 {
    margin-top:10px; margin-bottom:8px;
}

.s428 {
    margin-top:30px; padding:14px 18px;
}

.s429 {
    margin-top:4px; background:#bbf7d0; border-radius:4px; padding:2px 8px; font-size:0.55rem; text-align:center; color:#166534; font-weight:600;
}

.s430 {
    margin-top:4px; background:#bfdbfe; border-radius:4px; padding:2px 8px; font-size:0.55rem; text-align:center; color:#1e40af; font-weight:600;
}

.s431 {
    margin-top:4px; background:#c8e6c9; border-radius:4px; padding:2px 6px; font-size:0.55rem; color:#1b5e20; text-align:center;
}

.s432 {
    margin-top:4px; background:#d1fae5; border-radius:4px; padding:2px 8px; font-size:0.55rem; color:#166534; font-weight:600; text-align:center;
}

.s433 {
    margin-top:4px; background:#d1fae5; border-radius:4px; padding:2px 8px; font-size:0.6rem; color:#166534; font-weight:600; text-align:center;
}

.s434 {
    margin-top:4px; background:#dbeafe; border-radius:4px; padding:2px 8px; font-size:0.55rem; text-align:center; color:#1e40af; font-weight:600;
}

.s435 {
    margin-top:4px; background:#dbeafe; border-radius:4px; padding:2px 8px; font-size:0.6rem; color:#1e40af; font-weight:600; text-align:center;
}

.s436 {
    margin-top:4px; background:#dbeafe; border-radius:4px; padding:2px 8px; font-size:0.6rem; text-align:center; color:#1e40af; font-weight:600;
}

.s437 {
    margin-top:4px; background:#dcfce7; border-radius:4px; padding:2px 8px; font-size:0.55rem; text-align:center; color:#166534; font-weight:600;
}

.s438 {
    margin-top:4px; background:#dcfce7; border-radius:4px; padding:2px 8px; font-size:0.6rem; text-align:center; color:#166534; font-weight:600;
}

.s439 {
    margin-top:4px; background:#ddd6fe; border-radius:4px; padding:2px 8px; font-size:0.55rem; text-align:center; color:#4c1d95; font-weight:600;
}

.s440 {
    margin-top:4px; background:#f3e8ff; border-radius:4px; padding:2px 8px; font-size:0.55rem; text-align:center; color:#4c1d95; font-weight:600;
}

.s441 {
    margin-top:4px; background:#f3e8ff; border-radius:4px; padding:2px 8px; font-size:0.6rem; color:#4c1d95; font-weight:600; text-align:center;
}

.s442 {
    margin-top:4px; background:#f3e8ff; border-radius:4px; padding:2px 8px; font-size:0.6rem; text-align:center; color:#4c1d95; font-weight:600;
}

.s443 {
    margin-top:4px; background:#fecaca; border-radius:4px; padding:2px 8px; font-size:0.55rem; text-align:center; color:#991b1b; font-weight:600;
}

.s444 {
    margin-top:4px; background:#fee2e2; border-radius:4px; padding:2px 8px; font-size:0.55rem; color:#991b1b; font-weight:600; text-align:center;
}

.s445 {
    margin-top:4px; background:#fee2e2; border-radius:4px; padding:2px 8px; font-size:0.55rem; text-align:center; color:#991b1b; font-weight:600;
}

.s446 {
    margin-top:4px; background:#fee2e2; border-radius:4px; padding:2px 8px; font-size:0.6rem; color:#991b1b; font-weight:600; text-align:center;
}

.s447 {
    margin-top:4px; background:#fee2e2; border-radius:4px; padding:2px 8px; font-size:0.6rem; text-align:center; color:#991b1b; font-weight:600;
}

.s448 {
    margin-top:4px; background:#fef3c7; border-radius:4px; padding:2px 8px; font-size:0.6rem; color:#78350f; font-weight:600; text-align:center;
}

.s449 {
    margin-top:4px; background:#fef9c7; border-radius:4px; padding:2px 8px; font-size:0.55rem; text-align:center; color:#78350f; font-weight:600;
}

.s450 {
    margin-top:4px; background:#fef9c7; border-radius:4px; padding:2px 8px; font-size:0.6rem; text-align:center; color:#78350f; font-weight:600;
}

.s451 {
    margin-top:4px; background:#ffedd5; border-radius:4px; padding:2px 8px; font-size:0.55rem; text-align:center; color:#9a3412; font-weight:600;
}

.s452 {
    margin-top:4px; background:#ffedd5; border-radius:4px; padding:2px 8px; font-size:0.6rem; color:#9a3412; font-weight:600; text-align:center;
}

.s453 {
    margin-top:4px; background:#ffedd5; border-radius:4px; padding:2px 8px; font-size:0.6rem; text-align:center; color:#9a3412; font-weight:600;
}

.s454 {
    margin-top:6px; background:#b2dfdb; border-radius:6px; padding:4px 12px; font-size:0.7rem; color:#004d40; font-weight:600; text-align:center;
}

.s455 {
    margin-top:6px; background:#bbf7d0; border-radius:4px; padding:2px 8px; font-size:0.6rem; text-align:center; color:#166534; font-weight:600;
}

.s456 {
    margin-top:6px; background:#bfdbfe; border-radius:4px; padding:2px 8px; font-size:0.6rem; text-align:center; color:#1e40af; font-weight:600;
}

.s457 {
    margin-top:6px; background:#ddd6fe; border-radius:4px; padding:2px 8px; font-size:0.6rem; text-align:center; color:#4c1d95; font-weight:600;
}

.s458 {
    margin-top:6px; background:#e0e0e0; border-radius:6px; padding:4px 12px; font-size:0.7rem; color:#424242; font-weight:600; text-align:center;
}

.s459 {
    margin-top:6px; background:#fecaca; border-radius:4px; padding:2px 8px; font-size:0.6rem; text-align:center; color:#991b1b; font-weight:600;
}

.s460 {
    margin-top:6px; background:#ffedd5; border-radius:4px; padding:2px 8px; font-size:0.6rem; text-align:center; color:#9a3412; font-weight:600;
}

.s461 {
    margin-top:8px; background:#bbf7d0; border-radius:6px; padding:3px 10px; font-size:0.65rem; text-align:center; color:#166534; font-weight:600;
}

.s462 {
    margin-top:8px; background:#bfdbfe; border-radius:6px; padding:3px 10px; font-size:0.65rem; text-align:center; color:#1e40af; font-weight:600;
}

.s463 {
    margin-top:8px; background:#ddd6fe; border-radius:6px; padding:3px 10px; font-size:0.65rem; text-align:center; color:#4c1d95; font-weight:600;
}

.s464 {
    margin-top:8px; background:#fecaca; border-radius:6px; padding:3px 10px; font-size:0.65rem; text-align:center; color:#991b1b; font-weight:600;
}

.s465 {
    margin: 10px 0 20px 0; border-bottom:4px solid #0d9488;
}

.s466 {
    margin:0 0 0 12px;
}

.s467 {
    margin:0;
}

.s468 {
    margin:0; color:#0d9488; font-size:0.95rem;
}

.s469 {
    margin:0; color:#0d9488; font-size:1rem;
}

.s470 {
    margin:0; color:#166534; font-size:0.85rem;
}

.s471 {
    margin:0; color:#166534; font-size:0.8rem;
}

.s472 {
    margin:0; color:#166534; font-size:0.95rem;
}

.s473 {
    margin:0; color:#166534; font-size:0.9rem;
}

.s474 {
    margin:0; color:#166534; font-size:1rem;
}

.s475 {
    margin:0; color:#1e40af; font-size:0.85rem;
}

.s476 {
    margin:0; color:#1e40af; font-size:0.8rem;
}

.s477 {
    margin:0; color:#1e40af; font-size:0.95rem;
}

.s478 {
    margin:0; color:#1e40af; font-size:0.9rem;
}

.s479 {
    margin:0; color:#1e40af; font-size:1rem;
}

.s480 {
    margin:0; color:#4c1d95; font-size:0.85rem;
}

.s481 {
    margin:0; color:#4c1d95; font-size:0.8rem;
}

.s482 {
    margin:0; color:#4c1d95; font-size:0.95rem;
}

.s483 {
    margin:0; color:#4c1d95; font-size:0.9rem;
}

.s484 {
    margin:0; color:#4c1d95; font-size:1rem;
}

.s485 {
    margin:0; color:#78350f; font-size:0.85rem;
}

.s486 {
    margin:0; color:#78350f; font-size:0.95rem;
}

.s487 {
    margin:0; color:#78350f; font-size:1rem;
}

.s488 {
    margin:0; color:#991b1b; font-size:0.85rem;
}

.s489 {
    margin:0; color:#991b1b; font-size:0.8rem;
}

.s490 {
    margin:0; color:#991b1b; font-size:0.95rem;
}

.s491 {
    margin:0; color:#991b1b; font-size:0.9rem;
}

.s492 {
    margin:0; color:#991b1b; font-size:1.2rem;
}

.s493 {
    margin:0; color:#991b1b; font-size:1rem;
}

.s494 {
    margin:0; color:#9a3412; font-size:0.85rem;
}

.s495 {
    margin:0; color:#9a3412; font-size:0.8rem;
}

.s496 {
    margin:0; color:#9a3412; font-size:0.95rem;
}

.s497 {
    margin:0; color:#9a3412; font-size:0.9rem;
}

.s498 {
    margin:0; color:#9a3412; font-size:1rem;
}

.s499 {
    margin:0; font-size:0.65rem; color:#1e293b; line-height:1.3;
}

.s500 {
    margin:0; font-size:0.68rem; color:#1e293b; line-height:1.4; flex:1;
}

.s501 {
    margin:0; font-size:0.6rem; color:#1a3a1a; line-height:1.3;
}

.s502 {
    margin:0; font-size:0.72rem; color:#1e293b; line-height:1.4; flex:1;
}

.s503 {
    margin:0; font-size:0.78rem; color:#1e293b; line-height:1.4;
}

.s504 {
    margin:0; font-size:0.78rem; color:#1e293b; line-height:1.5; flex:1;
}

.s505 {
    margin:0; font-size:0.7rem; color:#1a3a1a;
}

.s506 {
    margin:0; font-size:0.7rem; color:#1e293b;
}

.s507 {
    margin:0; font-size:0.82rem; color:#1e293b; line-height:1.5;
}

.s508 {
    margin:0; font-size:0.85rem; color:#1e293b; line-height:1.6; flex:1;
}

.s509 {
    margin:0; font-size:0.92rem; color:#1e293b; line-height:1.5;
}

.s510 {
    margin:0; font-size:0.9rem; color:#1e293b; line-height:1.5;
}

.s511 {
    margin:0; font-size:0.9rem; line-height:1.5; color:#1e293b;
}

.s512 {
    margin:0; font-size:15px; color:#1e293b; line-height:1.7;
}

.s513 {
    margin:0; font-weight:600;
}

.s514 {
    margin:0; font-weight:600; font-size:0.9rem;
}

.s515 {
    margin:0; padding-left:18px; color:#333; font-size:0.8rem; line-height:1.6;
}

.s516 {
    margin:20px 0;
}

.s517 {
    margin:2px 0 0 0; font-size:0.7rem; color:#1e293b;
}

.s518 {
    margin:2px 0 0 0; font-size:0.7rem; color:#2a1a3a;
}

.s519 {
    margin:2px 0 0 0; font-size:0.8rem; color:#1565c0;
}

.s520 {
    margin:2px 0 0 0; font-size:0.95rem; color:#4a617c;
}

.s521 {
    margin:4px 0 0 0; font-size:0.7rem; color:#1e293b;
}

.s522 {
    margin:4px 0 0 0; font-size:0.88rem; color:#1e293b; line-height:1.5;
}

.s523 {
    margin:4px 0 0 0; padding-left:20px; list-style:none;
}

.s524 {
    margin:6px 0 0 0; font-size:13px; color:#64748b; border-top:1px dashed #93c5fd; padding-top:6px;
}

.s525 {
    margin:6px 0 0 0; font-size:13px; color:#64748b; border-top:1px dashed #d8b4fe; padding-top:6px;
}

.s526 {
    margin:6px 0 0 0; font-size:13px; color:#64748b; border-top:1px dashed #fdba74; padding-top:6px;
}

.s527 {
    margin:8px 0 0 0; font-size:14px; color:#555; line-height:1.6;
}

.s528 {
    padding:10px 12px; text-align:center; font-weight:700; color:#00838f; border-right:1px solid #e0e0e0;
}

.s529 {
    padding:10px 12px; text-align:center; font-weight:700; color:#1b5e20;
}

.s530 {
    padding:10px 12px; text-align:center; font-weight:700; color:#1b5e20; border-right:1px solid #e0e0e0;
}

.s531 {
    padding:10px 12px; text-align:center; font-weight:700; color:#2e7d32; border-right:1px solid #e0e0e0;
}

.s532 {
    padding:10px 12px; text-align:center; font-weight:700; color:#6a1b9a;
}

.s533 {
    padding:10px 12px; text-align:center; font-weight:700; color:#6a1b9a; border-right:1px solid #e0e0e0;
}

.s534 {
    padding:10px 12px; text-align:center; font-weight:700; color:#7b1fa2; border-right:1px solid #e0e0e0;
}

.s535 {
    padding:10px 12px; text-align:center; font-weight:700; color:#b71c1c;
}

.s536 {
    padding:10px 12px; text-align:center; font-weight:700; color:#b71c1c; border-right:1px solid #e0e0e0;
}

.s537 {
    padding:10px 12px; text-align:center; font-weight:700; color:#c62828; border-right:1px solid #e0e0e0;
}

.s538 {
    padding:10px 12px; text-align:center; font-weight:700; color:#e65100;
}

.s539 {
    padding:10px 12px; text-align:center; font-weight:700; color:#e65100; border-right:1px solid #e0e0e0;
}

.s540 {
    padding:10px 16px; font-weight:600; color:#6a1b9a; border-right:1px solid #e0e0e0;
}

.s541 {
    padding:10px 16px; font-weight:600; color:#b71c1c; border-right:1px solid #e0e0e0;
}

.s542 {
    padding:10px 16px; font-weight:600; color:#e65100; border-right:1px solid #e0e0e0;
}

.s543 {
    padding:12px 16px; margin-bottom:16px;
}

.s544 {
    padding:14px 12px; text-align:center; font-weight:600; border-right:1px solid rgba(255,255,255,0.1); min-width:60px;
}

.s545 {
    padding:3px 0; border-bottom:1px solid #fff3e0; display:flex; align-items:center; gap:8px; font-size:0.82rem; color:#1e293b;
}

.s546 {
    padding:4px 0; border-bottom:1px solid #e0f7fa; display:flex; align-items:center; gap:8px; font-size:0.82rem; color:#1e293b;
}

.s547 {
    padding:4px 0; border-bottom:1px solid #e3f2fd; display:flex; align-items:center; gap:8px; font-size:0.82rem; color:#1e293b;
}

.s548 {
    padding:4px 0; display:flex; align-items:center; gap:8px; font-size:0.82rem; color:#1e293b;
}

.s549 {
    text-align:center;
}

.s550 {
    width:100%;
}

.s551 {
    width:20%;
}

.kart {
  background: white;
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  margin-bottom: 20px;
  /* display:flex ve flex-direction:column varsa ayrıca ekle */
}
.kart-kirmizi {
  border-top: 8px solid #dc2626;
}
/* diğer renkler için */
.kart-mavi    { border-top: 8px solid #2563eb; }
.kart-yesil   { border-top: 8px solid #16a34a; }
.kart-mor     { border-top: 8px solid #7c3aed; }
.kart-turuncu { border-top: 8px solid #ea580c; }
.kart-sari    { border-top: 8px solid #f59e0b; }

/* ============================================= */
/* YENİ KART SİSTEMİ (Inline style'ları topla)   */
/* ============================================= */

/* ----- Temel Kart ----- */
.kart {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.kart-mb { margin-bottom: 20px; }

/* ----- Renkli Üst Kenarlıklar ----- */
.kart-ust-mavi   { border-top: 8px solid #2563eb; }
.kart-ust-kirmizi{ border-top: 8px solid #dc2626; }
.kart-ust-yesil  { border-top: 8px solid #16a34a; }
.kart-ust-mor    { border-top: 8px solid #7c3aed; }
.kart-ust-turuncu{ border-top: 8px solid #ea580c; }
.kart-ust-sari   { border-top: 8px solid #f59e0b; }
.kart-ust-lacivert{ border-top: 6px solid #003366; }  /* Tablo için */

/* ----- İç Bölümler ----- */
.kart-baslik {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.kart-baslik-icon { font-size: 24px; }
.kart-baslik-yazi { font-weight: 700; font-size: 18px; color: #003366; }

/* ----- Etiketler (Badge) ----- */
.badge {
  display: inline-block;
  padding: 2px 14px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 13px;
}
.badge-kirmizi { background: #dc2626; color: white; }
.badge-mavi    { background: #2563eb; color: white; }
.badge-yesil   { background: #16a34a; color: white; }
.badge-lacivert{ background: #003366; color: white; }
.badge-turuncu { background: #f59e0b; color: #78350f; }

/* ----- Butonlar ----- */
.btn-cevap {
  border: none;
  padding: 10px 22px;
  border-radius: 40px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s;
  align-self: flex-start;
  color: white;
}
.btn-cevap:hover {
  transform: scale(1.02);
  opacity: 0.9;
}
.btn-cevap.kirmizi { background: #dc2626; }
.btn-cevap.mavi    { background: #2563eb; }
.btn-cevap.yesil   { background: #16a34a; }
.btn-cevap.mor     { background: #7c3aed; }

/* ----- Cevap Alanı (Açılır) ----- */
.cevap-alani {
  display: none;
  margin-top: 14px;
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
}
.cevap-alani.kirmizi { background: #fef2f2; border-left: 6px solid #dc2626; }
.cevap-alani.mavi    { background: #eff6ff; border-left: 6px solid #2563eb; }
.cevap-alani.yesil   { background: #f0fdf4; border-left: 6px solid #16a34a; }
.cevap-alani.mor     { background: #faf5ff; border-left: 6px solid #7c3aed; }

/* ----- Soru Metni ve Şıklar ----- */
.soru-metni {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 12px;
}
.siklar {
  font-size: 14px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 16px;
  padding-left: 4px;
}
.cevap-dogruluk {
  margin: 0;
  font-size: 15px;
  color: #1e293b;
  line-height: 1.7;
}
.cevap-dogruluk .dogru { color: #991b1b; font-weight: 700; }
.aciklama {
  margin: 8px 0 0 0;
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}

/* ----- Tablo içi badge'ler (zaten badge sınıfları var, ama renkler için) ----- */
.badge-sari { background: #f59e0b; color: #78350f; padding: 2px 12px; border-radius: 30px; font-weight: 700; font-size: 13px; }
.badge-lacivert-koyu { background: #003366; color: white; padding: 2px 12px; border-radius: 30px; font-weight: 700; font-size: 13px; }
.badge-kirmizi-koyu { background: #dc2626; color: white; padding: 2px 12px; border-radius: 30px; font-weight: 700; font-size: 13px; }
.badge-yesil-koyu { background: #16a34a; color: white; padding: 2px 12px; border-radius: 30px; font-weight: 700; font-size: 13px; }
.badge-mavi-koyu { background: #2563eb; color: white; padding: 2px 12px; border-radius: 30px; font-weight: 700; font-size: 13px; }

/* ---------- Yardımcı Sınıflar ---------- */
.mb-20 { margin-bottom: 20px; }
.mt-20 { margin-top: 20px; }
.p-22-24 { padding: 22px 24px; }
.shadow { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.rounded-16 { border-radius: 16px; }
.flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; gap: 8px; }
.flex-center-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- Renkli Arka Planlar (Badge, Etiket) ---------- */
.bg-lacivert { background: #003366; color: white; }
.bg-kirmizi { background: #dc2626; color: white; }
.bg-yesil { background: #16a34a; color: white; }
.bg-mor { background: #7c3aed; color: white; }
.bg-turuncu { background: #f59e0b; color: #78350f; }
.bg-mavi { background: #2563eb; color: white; }
.bg-sari { background: #fef3c7; color: #78350f; }

/* ---------- Metin Renkleri ---------- */
.text-lacivert { color: #003366; }
.text-kirmizi { color: #dc2626; }
.text-yesil { color: #16a34a; }
.text-mor { color: #7c3aed; }
.text-mavi { color: #2563eb; }
.text-turuncu { color: #f59e0b; }
.text-gri { color: #64748b; }

/* ---------- Font Yardımcıları ---------- */
.fw-bold { font-weight: 700; }
.fs-14 { font-size: 14px; }
.fs-15 { font-size: 15px; }
.fs-18 { font-size: 18px; }
.lh-18 { line-height: 1.8; }

/* ---------- Border ve Kenarlıklar ---------- */
.border-top-kirmizi-8 { border-top: 8px solid #dc2626; }
.border-top-mavi-8 { border-top: 8px solid #2563eb; }
.border-top-yesil-8 { border-top: 8px solid #16a34a; }
.border-top-mor-8 { border-top: 8px solid #7c3aed; }
.border-top-turuncu-8 { border-top: 8px solid #ea580c; }
.border-top-lacivert-6 { border-top: 6px solid #003366; }

/* ---------- Font Boyutları ---------- */
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-24 { font-size: 24px; }

/* ---------- Metin Renkleri ---------- */
.text-dark { color: #1e293b; }
.text-mavi { color: #2563eb; }
.text-kirmizi { color: #dc2626; }
.text-yesil { color: #16a34a; }
.text-mor { color: #7c3aed; }
.text-gri { color: #64748b; }

/* ---------- Satır Yüksekliği ---------- */
.lh-16 { line-height: 1.6; }
.lh-18 { line-height: 1.8; }

/* ---------- Margin ---------- */
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mb-20 { margin-bottom: 20px; }

/* ---------- Kart varyasyonları (tanim-kart için) ---------- */
.tanim-kart {
  height: 100%;
  padding: 16px 16px;
}
.kart-ust-mavi { border-top-color: #2563eb; background: #eff6ff; }
.kart-ust-kirmizi { border-top-color: #dc2626; background: #fef2f2; }
.kart-ust-yesil { border-top-color: #16a34a; background: #f0fdf4; }
.kart-ust-mor { border-top-color: #7c3aed; background: #f5f3ff; }

/* ---------- Banner için ---------- */
.banner {
  text-align: center;
  padding: 24px 0;
  margin: 20px 0;
  border-top: 5px solid #1a3a5c;
  border-bottom: 5px solid #1a3a5c;
  background: linear-gradient(135deg, #f8fafc, #eef2f7);
  border-radius: 12px;
}
.banner-icerik {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.banner-icon {
  font-size: 2.5rem;
  color: #1a3a5c;
}
.banner-baslik {
  color: #1a3a5c;
  font-size: 2.2rem;
  margin: 0;
  font-weight: 700;
  font-family: 'Times New Roman', Times, serif;
  letter-spacing: 2px;
}
.banner-etiket {
  display: inline-block;
  padding: 2px 20px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
}
.banner-etiket-lacivert { background: #1a3a5c; color: white; }
.banner-etiket-sari { background: #fbbf24; color: #1a3a5c; }
.banner-etiket-alt {
  margin-top: 10px;
}
.banner-etiket-alt span {
  background: #eab308;
  color: #1a3a5c;
  padding: 3px 24px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
}
/* Yardımcı Sınıflar (Mevcut değilse ekleyin) */
.text-center { text-align: center; }
.text-gray { color: #64748b; }
.text-gray-dark { color: #555; }
.text-dark { color: #1e293b; }
.text-mavi { color: #2563eb; }
.text-kirmizi { color: #dc2626; }
.text-yesil { color: #16a34a; }
.text-mor { color: #7c3aed; }
.text-sari { color: #78350f; }
.text-teal { color: #0e7490; }

.bg-mavi-acik { background: #eff6ff; }
.bg-kirmizi-acik { background: #fef2f2; }
.bg-yesil-acik { background: #f0fdf4; }
.bg-mor-acik { background: #f5f3ff; }
.bg-sari-acik { background: #fffbeb; }
.bg-teal-acik { background: #ecfdf5; }
.bg-sari-acik-koyu { background: #fef3c7; }
.bg-kirmizi-acik-grad { background: linear-gradient(135deg, #fef2f2, #ffffff); }
.bg-lacivert-acik-grad { background: linear-gradient(135deg, #f8fafc, #ffffff); }

.bg-kirmizi-grad { background: linear-gradient(135deg, #dc2626, #b91c1c); box-shadow: 0 4px 12px rgba(220,38,38,0.25); }
.bg-lacivert-grad { background: linear-gradient(135deg, #1a3a5c, #2a5f7a); box-shadow: 0 4px 12px rgba(26,58,92,0.25); }

.fw-700 { font-weight: 700; }
.fw-600 { font-weight: 600; }
.fs-0-5 { font-size: 0.5rem; }
.fs-0-55 { font-size: 0.55rem; }
.fs-0-6 { font-size: 0.6rem; }
.fs-0-65 { font-size: 0.65rem; }
.fs-0-7 { font-size: 0.7rem; }
.fs-0-75 { font-size: 0.75rem; }
.fs-0-8 { font-size: 0.8rem; }
.fs-0-85 { font-size: 0.85rem; }
.fs-0-9 { font-size: 0.9rem; }
.fs-1 { font-size: 1rem; }
.fs-1-2 { font-size: 1.2rem; }
.fs-1-3 { font-size: 1.3rem; }
.fs-1-4 { font-size: 1.4rem; }
.fs-1-5 { font-size: 1.5rem; }
.fs-2-5 { font-size: 2.5rem; }

.p-2-8 { padding: 2px 8px; }
.p-2-10 { padding: 2px 10px; }
.p-2-12 { padding: 2px 12px; }
.p-2-14 { padding: 2px 14px; }
.p-4-8 { padding: 4px 8px; }
.p-4-10 { padding: 4px 10px; }
.p-6-12 { padding: 6px 12px; }
.p-8-14 { padding: 8px 14px; }
.p-10-12 { padding: 10px 12px; }
.p-14-12 { padding: 14px 12px; }
.p-16-18 { padding: 16px 18px; }
.p-18-22 { padding: 18px 22px; }

.mb-6 { margin-bottom: 6px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mt-4 { margin-top: 4px; }
.mt-6 { margin-top: 6px; }
.mt-10 { margin-top: 10px; }
.mt-14 { margin-top: 14px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.ms-auto { margin-left: auto; }

.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-14 { gap: 14px; }
.gap-16 { gap: 16px; }

.border-2 { border-width: 2px; border-style: solid; }
.border-3 { border-width: 3px; border-style: solid; }
.border-4 { border-width: 4px; border-style: solid; }
.border-mavi { border-color: #2563eb; }
.border-kirmizi { border-color: #dc2626; }
.border-yesil { border-color: #16a34a; }
.border-mor { border-color: #7c3aed; }
.border-sari { border-color: #f59e0b; }
.border-teal { border-color: #0891b2; }
.border-lacivert { border-color: #1a3a5c; }

.border-left-4 { border-left-width: 4px; border-left-style: solid; }
.border-left-6 { border-left-width: 6px; border-left-style: solid; }
.border-left-mavi { border-left-color: #2563eb; }
.border-left-kirmizi { border-left-color: #dc2626; }
.border-left-yesil { border-left-color: #16a34a; }
.border-left-mor { border-left-color: #7c3aed; }
.border-left-sari { border-left-color: #f59e0b; }

.border-top-8 { border-top-width: 8px; border-top-style: solid; }

.rounded-4 { border-radius: 4px; }
.rounded-6 { border-radius: 6px; }
.rounded-8 { border-radius: 8px; }
.rounded-10 { border-radius: 10px; }
.rounded-14 { border-radius: 14px; }
.rounded-20 { border-radius: 20px; }
.rounded-30 { border-radius: 30px; }
.rounded-50 { border-radius: 50%; }

.h-100 { height: 100%; }
.w-30 { width: 30px; }
.w-34 { width: 34px; }
.h-30 { height: 30px; }
.h-34 { height: 34px; }

.d-inline-block { display: inline-block; }
.d-block { display: block; }
.flex-center { display: flex; align-items: center; gap: 8px; }
.flex-col { display: flex; flex-direction: column; }
.justify-center { justify-content: center; }

.shadow-sm { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.shadow-lacivert { box-shadow: 0 4px 12px rgba(26,58,92,0.25); }

.border-bottom-2 { border-bottom-width: 2px; border-bottom-style: solid; }
.border-bottom-3 { border-bottom-width: 3px; border-bottom-style: solid; }
.border-bottom-mavi-acik { border-bottom-color: #bfdbfe; }
.border-bottom-kirmizi-acik { border-bottom-color: #fecaca; }
.border-bottom-yesil-acik { border-bottom-color: #bbf7d0; }
.border-bottom-mor-acik { border-bottom-color: #ddd6fe; }
.border-bottom-sari-acik { border-bottom-color: #fde68a; }
.border-bottom-lacivert-acik { border-bottom-color: #e2e8f0; }

/* Mevcut .badge sınıfı varsa, renkli badge'leri aşağıdaki gibi ekleyin */
.badge.bg-kirmizi { background: #dc2626; color: white; }
.badge.bg-mavi { background: #2563eb; color: white; }
.badge.bg-yesil { background: #16a34a; color: white; }
.badge.bg-mor { background: #7c3aed; color: white; }
.badge.bg-sari { background: #f59e0b; color: #78350f; }