/* ============================================================ */
/* 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;
    }
}