/* ===========================
   PMRE E-ÖĞRENME PLATFORM STİLLERİ
   =========================== */

/* ===========================
   MOBİL-İLK TEMEL KURALLAR
   =========================== */

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 123, 255, 0.1);
}

html, body {
    overflow-x: hidden;
    max-width: 100%;
}

body.pmre-page {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Mobilde iOS Safari yakınlaştırmayı önlemek için input yazı boyutu 16px+ */
@media (max-width: 768px) {
    .pmre-page input.form-control,
    .pmre-page select.form-control,
    .pmre-page textarea.form-control,
    .pmre-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
    .pmre-page select,
    .pmre-page textarea {
        font-size: 16px !important;
    }
}

/* Resimler, videolar ve iframe'ler her zaman duyarlı */
img,
video,
iframe,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

/* Mobilde uzun kelimelerin taşmasını engelle */
.pmre-page p,
.pmre-page h1,
.pmre-page h2,
.pmre-page h3,
.pmre-page h4,
.pmre-page h5,
.pmre-page h6,
.pmre-page td,
.pmre-page th {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ===========================
   SAYFA SARMALAYICILARI
   =========================== */

.pmre-page {
    min-height: 100vh;
    background: #f5f7fa;
}

/* Form / kart tabanlı sayfalar (Index, Sertifika, SertifikaDogrula) */
body.pmre-form-layout {
    padding: 20px;
}

/* Dashboard / akış sayfaları kendi container'larını kullanır - kenar boşluğu yok */
body.pmre-dashboard-layout {
    padding: 0 !important;
}

.pmre-background {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 0;
}

.pmre-container {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

.pmre-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 40px;
    margin: 20px 0;
    max-width: 100%;
}

.pmre-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 2px solid #e9ecef;
}

.header-top {
    color: #dc3545;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.ministry-text {
    display: inline-block;
    color: #dc3545;
    font-weight: 600;
}

.system-title {
    margin: 20px 0 15px;
}

.system-name {
    display: block;
    font-size: 32px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 10px;
}

.welcome-text {
    display: block;
    font-size: 18px;
    color: #6c757d;
    font-weight: 500;
}

.system-description {
    color: #6c757d;
    font-size: 14px;
    line-height: 1.6;
    margin: 15px 0 0;
}

.pmre-form {
    margin-top: 30px;
}

.form-section-title {
    background: #007bff;
    color: white;
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 18px;
}

.form-section-title i {
    font-size: 20px;
}

.form-group {
    margin-bottom: 25px;
}

.form-label {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
    font-size: 14px;
    display: block;
    letter-spacing: 0.3px;
}

.required {
    color: #dc3545;
    margin-left: 3px;
}

/* Input wrapper stilleri */
.input-wrapper {
    position: relative;
    cursor: text;
    margin-bottom: 20px;
    overflow: visible;
}

.input-wrapper .input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 16px;
    z-index: 4;
}

/* Input alanları için padding */
.input-wrapper input,
.input-wrapper select {
    padding-left: 50px !important;
}

/* Select için özel dropdown arrow pozisyonu */
.input-wrapper select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 40px;
}

.input-wrapper select:focus {
    outline: none;
    border-color: #007bff;
}

/* Input-group içindeki input-wrapper için özel düzenleme */
.input-wrapper .input-group {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
}

.input-wrapper .input-group .input-icon {
    left: auto;
    right: 16px;
    z-index: 10;
}

.input-wrapper .input-group input {
    padding-left: 15px !important;
    padding-right: 50px !important;
    flex: 1;
    min-width: 0;
}

/* Güvenlik sorusu satırının label ve input hizalaması */
.input-wrapper .input-group .input-group-prepend + input,
.input-wrapper .input-group .input-group-prepend + .form-control {
    height: auto;
}

.form-control {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 15px;
}

.form-control:focus {
    border-color: #007bff;
    outline: none;
}

/* Input-group prepend (Güvenlik Sorusu) */
.input-group-prepend {
    display: flex;
    align-items: stretch;
    overflow: visible;
}

.input-group {
    overflow: visible;
}

.input-group-text {
    background-color: #007bff;
    color: white;
    border: 2px solid #007bff;
    border-right: none;
    font-weight: 600;
    min-width: 120px;
    white-space: nowrap;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px 0 0 8px;
    font-size: 15px;
    overflow: visible;
    text-overflow: clip;
}

.input-group .form-control {
    border-radius: 0 8px 8px 0;
    border-left: none;
}

.input-group .form-control:focus {
    border-color: #007bff;
    box-shadow: none;
}

.validation-message {
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

.custom-control-label {
    font-size: 14px;
    color: #2c3e50;
}

/* Bootstrap 4 custom-control sınıfları için Bootstrap 5 uyumlu fallback */
.custom-control.custom-checkbox,
.custom-control.custom-radio {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-left: 0;
    position: relative;
    min-height: auto;
}

.custom-control-input {
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    margin-top: 3px;
    cursor: pointer;
    position: relative;
    opacity: 1;
    pointer-events: auto;
}

.custom-control-label {
    margin-bottom: 0;
    cursor: pointer;
    line-height: 1.5;
    flex: 1;
}

.custom-control-label::before,
.custom-control-label::after {
    display: none !important;
}

/* KVKK label - link ve metin akışı */
.kvkk-label {
    word-break: break-word;
}

.kvkk-label a {
    color: #007bff;
    text-decoration: underline;
}

.info-box {
    background: #007bff;
    color: white;
    border-radius: 12px;
    padding: 25px;
    margin-top: 30px;
}

.info-header {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}

.info-header i {
    margin-right: 10px;
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-list li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.info-list li:last-child {
    border-bottom: none;
}

.info-list i {
    color: #4ade80;
    margin-right: 10px;
}

.btn-primary {
    background: #007bff;
    border: none;
    border-radius: 10px;
    padding: 16px 35px;
    font-size: 16px;
    font-weight: 600;
}

.btn-primary:hover {
    background: #0056b3;
}

.pmre-footer {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #e9ecef;
}

.footer-links a {
    color: #007bff;
    text-decoration: none;
    font-weight: 600;
}

.footer-links a:hover {
    color: #0056b3;
    text-decoration: underline;
}

.footer-links i {
    margin-right: 5px;
}

.copyright {
    color: #6c757d;
    font-size: 12px;
    margin-top: 10px;
}

.error-message-container {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.error-header {
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #721c24;
    margin-bottom: 10px;
}

.error-header i {
    margin-right: 8px;
    font-size: 18px;
}

.error-content {
    padding-left: 10px;
}

.error-item {
    display: flex;
    align-items: center;
    color: #721c24;
    margin: 5px 0;
}

.error-item i {
    margin-right: 8px;
    font-size: 14px;
}

/* Form text (açıklama metinleri) */
.form-text {
    margin-top: 8px;
    font-size: 13px;
    color: #6c757d;
    line-height: 1.5;
}

.form-text i {
    margin-right: 5px;
    color: #007bff;
}

/* ===========================
   DOKUNMATİK HEDEFLER & ERİŞİLEBİLİRLİK
   =========================== */

/* Tüm tıklanabilir hedeflerin minimum 44px olmasını sağla (Apple HIG / WCAG) */
.pmre-page .btn,
.pmre-page button:not(.btn-close):not(.close):not(.btn-close-modal):not(.btn-paylas),
.pmre-page a.btn-module,
.pmre-page a.btn-quick,
.pmre-page a.btn-back,
.pmre-page .btn-modal-cancel,
.pmre-page .btn-modal-confirm {
    min-height: 44px;
}

.pmre-page input.form-control,
.pmre-page select.form-control,
.pmre-page textarea.form-control {
    min-height: 44px;
}

/* Sadece yatay flex container'lar için dikey hizalama */
.pmre-page button.btn:not(.btn-block),
.pmre-page a.btn:not(.btn-block) {
    line-height: 1.4;
}

/* Tıklanabilir tüm linklerin yeterli boşluğa sahip olmasını sağla */
.pmre-page .breadcrumb-item a,
.pmre-page .footer-links a {
    display: inline-block;
    padding: 4px 0;
}

/* ===========================
   KAPSAMLI RESPONSİVE KURALLAR
   =========================== */

/* Geniş tablet / küçük masaüstü (max 1199px) */
@media (max-width: 1199px) {
    .container,
    .container-fluid {
        max-width: 100%;
    }
}

/* Tablet orta (768px - 992px) - Bootstrap lg breakpoint */
@media (min-width: 768px) and (max-width: 992px) {
    .pmre-container {
        max-width: 100%;
    }

    .pmre-card {
        padding: 32px 28px;
    }

    /* 3 sütunlu modül kartları 2 sütuna düşsün */
    .col-md-4.mb-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Final/Sertifika gibi geniş bannerlar daha sıkı düzen */
    .final-status,
    .sertifika-banner-content {
        padding: 22px;
    }
}

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .pmre-container {
        max-width: 100%;
        padding: 0 15px;
    }

    .pmre-card {
        padding: 30px;
        margin: 15px 0;
        border-radius: 16px;
    }

    .container-fluid {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Modül kartları tablet için 2 sütun */
    .module-card-body {
        padding: 20px;
    }

    /* Final sınav ve quiz için düzenleme */
    .final-status {
        padding: 20px;
        gap: 15px;
    }

    .sertifika-banner-content {
        padding: 25px;
        gap: 20px;
    }
}

/* Mobil (768px ve altı) */
@media (max-width: 768px) {
    /* Genel sayfa düzenlemeleri - sadece form layout için */
    body.pmre-form-layout {
        padding: 10px;
    }

    .pmre-background {
        padding: 10px 0;
        align-items: flex-start;
    }

    .pmre-container {
        padding: 0 10px;
    }

    .pmre-card {
        padding: 20px 15px;
        margin: 10px 0;
        border-radius: 12px;
    }

    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Header bölümü */
    .pmre-header {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .header-top {
        font-size: 12px;
        letter-spacing: 0.5px;
    }

    .system-name {
        font-size: 20px;
        line-height: 1.3;
    }

    .welcome-text {
        font-size: 14px;
    }

    .system-description {
        font-size: 13px;
        line-height: 1.5;
    }

    .page-title {
        font-size: 1.4rem !important;
    }

    /* Form düzenlemeleri */
    .pmre-form {
        margin-top: 20px;
    }

    .form-section-title {
        font-size: 14px;
        padding: 12px 14px;
        margin-bottom: 20px;
        gap: 10px;
    }

    .form-section-title i {
        font-size: 16px;
    }

    .form-group {
        margin-bottom: 18px;
    }

    .form-label {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .form-control {
        padding: 10px 12px;
        font-size: 14px;
    }

    /* Input wrapper mobil */
    .input-wrapper {
        margin-bottom: 15px;
    }

    .input-wrapper .input-icon {
        font-size: 14px;
        left: 12px;
    }

    .input-wrapper input,
    .input-wrapper select {
        padding-left: 42px !important;
    }

    /* Güvenlik sorusu mobil düzenleme - yatay düzen korunur */
    .input-wrapper .input-group {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        width: 100%;
    }

    .input-group-prepend {
        display: flex;
        flex-shrink: 0;
        width: auto;
    }

    .input-group-text {
        border-radius: 8px 0 0 8px;
        border-right: none;
        border: 2px solid #007bff;
        min-width: auto;
        width: auto;
        font-size: 15px;
        font-weight: 600;
        padding: 10px 14px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .input-group .form-control {
        border-radius: 0 8px 8px 0;
        border-left: none;
        border-top: 2px solid #e9ecef;
        border-right: 2px solid #e9ecef;
        border-bottom: 2px solid #e9ecef;
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }

    .input-wrapper .input-group input {
        padding-left: 14px !important;
        padding-right: 14px !important;
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }

    /* Butonlar */
    .btn-primary {
        padding: 12px 20px;
        font-size: 14px;
        width: 100%;
    }

    .btn-lg {
        padding: 14px 24px !important;
        font-size: 15px !important;
    }

    .btn-block {
        width: 100%;
    }

    /* Bilgi kutuları */
    .info-box {
        padding: 18px;
        margin-top: 20px;
        border-radius: 10px;
    }

    .info-header {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .info-list li {
        padding: 6px 0;
        font-size: 13px;
    }

    /* Footer */
    .pmre-footer {
        margin-top: 20px;
        padding-top: 15px;
    }

    .footer-links {
        font-size: 14px;
    }

    .copyright {
        font-size: 11px;
    }

    /* Row/Column düzenlemeleri */
    .row > [class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }

    .row {
        margin-left: -8px;
        margin-right: -8px;
    }

    /* Navigation bar mobil */
    .pmre-nav-bar {
        padding: 10px 0;
    }

    .pmre-nav-bar .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .nav-bar-content {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    /* Breadcrumb mobil - "Ana Sayfa" geri butonu görünümünde, modül adı tam genişlik */
    .pmre-nav-bar nav[aria-label="breadcrumb"] {
        width: 100%;
        text-align: left;
    }

    .pmre-nav-bar .breadcrumb {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 6px;
        margin: 0;
        padding: 0;
        list-style: none;
        width: 100%;
        text-align: left;
    }

    .pmre-nav-bar .breadcrumb-item {
        font-size: 0.85rem;
        line-height: 1.3;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        max-width: 100%;
        width: auto;
        text-align: left;
        padding: 0;
    }

    .pmre-nav-bar .breadcrumb-item a {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 6px;
        white-space: nowrap;
        text-decoration: none;
    }

    .pmre-nav-bar .breadcrumb-item a:hover,
    .pmre-nav-bar .breadcrumb-item a:focus {
        background: rgba(255, 255, 255, 0.25);
        color: white;
    }

    .pmre-nav-bar .breadcrumb-item.active {
        width: 100%;
        font-weight: 600;
        font-size: 0.95rem;
        word-break: break-word;
        line-height: 1.35;
        padding: 2px 2px 0 2px;
        text-align: left;
        justify-content: flex-start;
    }

    /* Bootstrap'in "/" ayracını mobil için gizle - kendi düzenimizi kullanıyoruz */
    .pmre-nav-bar .breadcrumb-item + .breadcrumb-item::before {
        display: none;
    }

    /* Progress bar tam genişlik */
    .nav-progress {
        width: 100%;
        justify-content: flex-start;
        gap: 10px;
    }

    .nav-progress .progress {
        flex: 1;
        width: auto;
        height: 8px;
    }

    .nav-progress .progress-text {
        flex-shrink: 0;
        min-width: 36px;
        text-align: right;
    }

    /* Info Card mobil */
    .info-card {
        border-radius: 10px;
    }

    .info-card-header {
        padding: 12px 15px;
        font-size: 1rem;
        flex-wrap: wrap;
    }

    .info-card-body {
        padding: 15px;
    }

    .info-item {
        font-size: 13px;
        margin-bottom: 8px;
    }

    /* Section header mobil */
    .section-header h2,
    .section-header h5 {
        font-size: 1.1rem;
    }

    /* Modül kartları mobil - Tek sütun */
    .col-md-4.mb-4 {
        margin-bottom: 12px !important;
    }

    .module-card {
        border-radius: 12px;
    }

    .module-card-body {
        padding: 18px;
    }

    .module-icon {
        font-size: 1.6rem;
        margin-bottom: 12px;
    }

    .module-title {
        font-size: 1rem;
        margin-bottom: 12px;
    }

    .module-progress .progress {
        height: 6px;
    }

    .progress-text {
        font-size: 0.8rem;
    }

    .module-card-footer {
        padding: 12px 15px;
    }

    .btn-module {
        padding: 10px 16px;
        font-size: 13px;
    }

    /* Final sınav mobil */
    .final-status {
        flex-direction: column;
        text-align: center;
        padding: 18px;
        gap: 15px;
    }

    .final-status-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .final-status-info h5 {
        font-size: 1rem;
    }

    .final-status-info p {
        font-size: 0.85rem;
    }

    .final-btn {
        margin-left: 0;
        width: 100%;
    }

    .final-inceleme-btn {
        margin-left: 0;
        width: 100%;
    }

    /* Sertifika banner mobil */
    .sertifika-banner {
        border-radius: 12px;
    }

    .sertifika-banner-content {
        flex-direction: column;
        text-align: center;
        padding: 20px;
        gap: 15px;
    }

    .sertifika-banner-icon {
        width: 60px;
        height: 60px;
        min-width: 60px;
        font-size: 1.5rem;
    }

    .sertifika-banner-info h4 {
        font-size: 1.1rem;
    }

    .sertifika-banner-info p {
        font-size: 0.85rem;
    }

    .sertifika-banner-btn {
        width: 100%;
        padding: 10px 20px;
    }

    /* Rozet bölümü mobil */
    .rozet-section {
        padding: 15px;
        border-radius: 10px;
    }

    .rozet-card {
        padding: 12px 8px;
        border-radius: 8px;
    }

    .rozet-img {
        width: 50px;
        height: 50px;
    }

    .rozet-name {
        font-size: 0.7rem;
    }

    /* Hızlı erişim mobil */
    .btn-quick {
        padding: 10px 15px;
        font-size: 13px;
    }

    .quick-access .col-md-4.mb-2 {
        margin-bottom: 8px !important;
    }

    /* İçerik kartları mobil */
    .content-card {
        border-radius: 12px;
    }

    .content-card-body {
        padding: 18px;
    }

    .content-header {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    /* İçerik kartında ikon ve "Metin" rozeti yatay hizalanır */
    .content-icon {
        flex-shrink: 0;
    }

    .content-meta {
        flex: 1;
        flex-wrap: wrap;
    }

    .content-icon {
        font-size: 1.2rem;
    }

    .content-meta {
        flex-wrap: wrap;
        gap: 8px;
    }

    .content-type {
        padding: 3px 10px;
        font-size: 0.75rem;
    }

    .content-duration {
        font-size: 0.8rem;
    }

    .content-title {
        font-size: 1rem;
        margin-bottom: 8px;
    }

    .content-desc {
        font-size: 0.9rem;
        margin-bottom: 12px;
    }

    .content-footer {
        padding-top: 12px;
    }

    .status-badge {
        padding: 5px 12px;
        font-size: 0.8rem;
    }

    .arrow-icon {
        width: 30px;
        height: 30px;
    }

    /* Geri butonu mobil */
    .btn-back {
        padding: 10px 18px;
        font-size: 14px;
    }

    /* Alert mobil */
    .alert {
        padding: 12px 15px;
        font-size: 14px;
    }

    /* Modal mobil düzenleme */
    .modal-dialog {
        margin: 10px;
    }

    .modal-content {
        border-radius: 12px;
    }

    .modal-header {
        padding: 15px;
    }

    .modal-body {
        padding: 15px;
    }

    .modal-footer {
        padding: 12px 15px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .modal-footer .btn {
        flex: 1;
        min-width: 120px;
    }

    /* Confirm Modal mobil */
    .modal-confirm {
        border-radius: 12px;
    }

    .modal-header-warning {
        padding: 15px;
    }

    .modal-icon-warning {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .modal-title-wrapper .modal-title {
        font-size: 1.1rem;
    }

    .modal-subtitle {
        font-size: 0.8rem;
    }

    .modal-body-confirm {
        padding: 20px 15px;
    }

    .confirm-content {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .confirm-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        font-size: 1.5rem;
    }

    .confirm-message {
        font-size: 1rem;
    }

    .confirm-submessage {
        font-size: 0.85rem;
    }

    .modal-footer-confirm {
        flex-direction: column;
        padding: 12px 15px;
    }

    .btn-modal-cancel,
    .btn-modal-confirm {
        width: 100%;
        justify-content: center;
    }

    /* Quiz sayfası mobil */
    .quiz-hero,
    .final-hero,
    .icerik-hero {
        padding: 10px 0;
    }

    .quiz-info-card,
    .final-info-card {
        border-radius: 12px;
    }

    .quiz-info-header,
    .final-info-header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 18px;
    }

    .quiz-icon,
    .final-icon {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }

    .quiz-details h2,
    .final-details h2 {
        font-size: 1.2rem;
    }

    .quiz-desc,
    .final-desc {
        font-size: 0.9rem;
    }

    .quiz-info-body,
    .final-info-body {
        padding: 15px;
    }

    .info-badges {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .info-badge {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .info-alert {
        padding: 12px;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .info-alert-content {
        font-size: 0.9rem;
    }

    /* Soru kartları mobil */
    .question-card {
        border-radius: 12px;
        margin-bottom: 15px;
    }

    .question-header {
        padding: 12px 15px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .question-number {
        font-size: 0.9rem;
    }

    .question-points {
        font-size: 0.8rem;
    }

    .question-body {
        padding: 15px;
    }

    .question-text {
        font-size: 1rem;
        line-height: 1.5;
    }

    .question-image img {
        max-height: 200px;
        border-radius: 8px;
    }

    .options-list {
        gap: 8px;
    }

    .option-item {
        padding: 12px;
        border-radius: 10px;
    }

    .option-indicator {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .option-text {
        font-size: 0.9rem;
    }

    .question-footer {
        padding: 12px 15px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .question-footer .btn {
        flex: 1;
        min-width: 100px;
    }

    /* Soru navigasyonu mobil */
    .soru-nav {
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
        padding: 10px;
    }

    .soru-nav-btn {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }

    /* Timer bar mobil */
    .timer-bar {
        padding: 10px 15px;
        font-size: 0.9rem;
    }

    /* İçerik detay sayfası mobil */
    .icerik-detay-page {
        padding: 0;
    }

    .icerik-header-section {
        padding: 15px;
    }

    .icerik-title {
        font-size: 1.3rem;
        line-height: 1.4;
    }

    .icerik-description {
        font-size: 0.9rem;
    }

    .icerik-content-card {
        border-radius: 12px;
        padding: 15px;
    }

    /* Video mobil */
    .video-wrapper {
        border-radius: 10px;
    }

    .video-player {
        border-radius: 10px;
    }

    /* Metin içerik mobil */
    .metin-wrapper {
        padding: 15px;
    }

    .metin-content {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .metin-content img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Galeri mobil */
    .galeri-wrapper {
        padding: 15px;
    }

    .galeri-title {
        font-size: 1rem;
    }

    .galeri-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .galeri-item {
        border-radius: 8px;
    }

    /* Ses player mobil */
    .ses-player-section {
        padding: 12px;
    }

    .ses-player-section audio {
        width: 100%;
        height: 40px;
    }

    /* Eşleştirme mobil */
    .eslestirme-wrapper {
        padding: 15px;
    }

    .eslestirme-title {
        font-size: 1.1rem;
    }

    .eslestirme-aciklama {
        font-size: 0.85rem;
    }

    .eslestirme-kolonlar {
        flex-direction: column;
        gap: 20px;
    }

    .eslestirme-sol-kolon,
    .eslestirme-sag-kolon {
        width: 100%;
    }

    .eslestirme-butonlar .btn {
        width: 100%;
        margin-bottom: 8px;
    }

    /* Yapboz mobil */
    .yapboz-wrapper {
        padding: 15px;
    }

    .yapboz-title {
        font-size: 1.1rem;
    }

    .yapboz-aciklama {
        font-size: 0.85rem;
    }

    /* Bottom actions mobil */
    .bottom-actions {
        flex-direction: column;
        gap: 10px;
    }

    .btn-action {
        width: 100%;
        text-align: center;
    }

    /* İçerik navigasyon mobil */
    .icerik-nav {
        flex-direction: column;
        gap: 10px;
    }

    .icerik-nav .btn {
        width: 100%;
    }

    /* Sertifika sayfası mobil */
    .sertifika-card {
        border-radius: 12px;
        padding: 20px;
    }

    /* İlerleme sayfası mobil */
    .ilerleme-card {
        border-radius: 12px;
        padding: 15px;
    }

    /* Sertifika doğrulama mobil */
    .sertifika-dogrula-card {
        padding: 20px;
        border-radius: 12px;
    }
}

/* Küçük mobil (576px ve altı) */
@media (max-width: 576px) {
    body.pmre-form-layout {
        padding: 5px;
    }

    .pmre-card {
        padding: 15px 12px;
        margin: 5px 0;
        border-radius: 10px;
    }

    .system-name {
        font-size: 18px;
    }

    .welcome-text {
        font-size: 13px;
    }

    .form-section-title {
        font-size: 13px;
        padding: 10px 12px;
    }

    .form-label {
        font-size: 12px;
    }

    .form-control {
        font-size: 13px;
        padding: 10px;
    }

    .page-title {
        font-size: 1.2rem !important;
    }

    .module-title {
        font-size: 0.9rem;
    }

    .module-icon {
        font-size: 1.4rem;
    }

    .section-header h2,
    .section-header h5 {
        font-size: 1rem;
    }

    .final-status-info h5 {
        font-size: 0.95rem;
    }

    .final-status-info p {
        font-size: 0.8rem;
    }

    .sertifika-banner-info h4 {
        font-size: 1rem;
    }

    .rozet-img {
        width: 40px;
        height: 40px;
    }

    .rozet-name {
        font-size: 0.65rem;
    }

    .btn-quick {
        padding: 8px 12px;
        font-size: 12px;
    }

    .content-title {
        font-size: 0.95rem;
    }

    .content-desc {
        font-size: 0.85rem;
    }

    .question-text {
        font-size: 0.95rem;
    }

    .option-text {
        font-size: 0.85rem;
    }

    .icerik-title {
        font-size: 1.15rem;
    }

    .metin-content {
        font-size: 0.9rem;
    }

    .galeri-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* Input group küçük mobil */
    .input-group-text {
        font-size: 13px;
        padding: 8px 12px;
    }

    /* Breadcrumb küçük mobil */
    .breadcrumb-item {
        font-size: 0.75rem;
    }

    /* Info badges küçük mobil */
    .info-badge {
        padding: 5px 10px;
        font-size: 0.75rem;
    }

    /* Soru navigasyonu küçük mobil */
    .soru-nav-btn {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
}

/* Landscape mobil (yatay mod) */
@media (max-width: 896px) and (orientation: landscape) {
    .pmre-background {
        align-items: flex-start;
        padding-top: 20px;
    }

    .pmre-card {
        margin: 10px auto;
    }

    .video-wrapper {
        max-height: 60vh;
    }

    .video-player {
        max-height: 60vh;
    }

    .modal-body {
        max-height: 50vh;
        overflow-y: auto;
    }
}

/* Büyük ekranlar için düzeltmeler */
@media (min-width: 1200px) {
    .pmre-container {
        max-width: 1000px;
    }

    .container-fluid {
        max-width: 1400px;
        margin: 0 auto;
    }
}

/* Touch cihazlar için hover kaldırma */
@media (hover: none) {
    .module-card:hover,
    .content-card:hover,
    .rozet-card:hover {
        transform: none;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    }

    .btn-module:hover,
    .btn-quick:hover,
    .btn-action:hover {
        transform: none;
    }
}

/* Print düzenlemeleri */
@media print {
    .pmre-nav-bar,
    .pmre-footer,
    .btn-back,
    .btn-module,
    .btn-quick,
    .bottom-actions {
        display: none !important;
    }

    .pmre-card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}