/**
 * =====================================================================
 * 📁 Dosya: /assets/css/don-image-to-image.css
 * ---------------------------------------------------------------------
 * 📌 Ne İşe Yarar?  
 *   - image-to-image.php sayfasındaki tüm UI düzenini oluşturur.
 *   - Drag & Drop yükleme alanı
 *   - Sağdaki convert options kutusu
 *   - Alt kısımdaki galeri görünümü
 *   - Responsive düzenleme
 *
 * 🔗 Direkt Bağlantılı Olduğu Dosyalar:
 *   - /image-to-image.php
 *   - /assets/js/image-to-image.js
 * =====================================================================
 */

/* ============================================
   GLOBAL UI DEĞİŞKENLERİ (Dark / Light için zorunlu)
============================================ */

:root {
    --btn-bg: #ffffff;
    --btn-text: #111;
    --border: #d1d5db;
    --border-strong: #c4c4c4;
    --card-bg-solid: #ffffff;
    --hover: #f3f4f6;
}

body.dark {
    --btn-bg: #1e293b;
    --btn-text: #e2e8f0;
    --border: #334155;
    --border-strong: #475569;
    --card-bg-solid: #0f172a; /* 🔥 dropdown arka planı TAM OPak */
    --hover: #243147;
}


/*   UPLOAD BÖLÜMÜ  */
.upload-box {
    padding: 45px 30px;
    background: #f7f9ff;
    border-radius: 16px;
    position: relative;
    text-align: center;
    border: 2px dashed #8ea2ff; /* Dış kesik çizgi */
}

/* İç frame çizgisi */
.upload-box::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 2px solid #cfd8ff;
    border-radius: 12px;
    pointer-events: none;
}

.upload-box.drag-over {
    background: #e6eeff;
    border-color: #4b6fff;
}

.select-btn {
    display: inline-block;
    padding: 14px 26px;
    background: #4b6fff;
    color: #fff;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 15px;
    transition: 0.25s;
}

.select-btn:hover {
    background: #3a55d6;
}

.drag-info {
    color: #777;
    font-size: 16px;
    margin-top: 10px;
}

.drag-info-en {
    margin-top: 14px;
    font-size: 15px;
    color: #4b6fff;
    background: #eef1ff;
    display: inline-block;
    padding: 6px 12px;
    border-radius: 8px;
}

.privacy-info {
    margin-top: 8px;
    font-size: 14px;
    color: #888;
}

.sub-info {
    color: #888;
    font-size: 14px;
}

/* 🌙 DARK MODE — Upload Box */
body.dark .upload-box {
    background: #1E293B; /* lacivert grid uyumlu */
    border-color: #4b6fff55;
}

body.dark .upload-box::before {
    border-color: #334155; /* iç çerçeve koyulaştırıldı */
}

body.dark .drag-info {
    color: #b7c4ff;
}

body.dark .drag-info-en {
    background: #334155;
    color: #8db2ff;
}

body.dark .privacy-info {
    color: #94a3b8;
}



/*  SAĞ PANEL — Convert Options  */
.options-box {
    background: #ffffff;
    padding: 20px;
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

.options-box h3 {
    margin-bottom: 10px;
}

.ad-box {
    height: 250px;
    background: #f8d7b9;
    border-radius: 12px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a6652e;
    font-size: 20px;
}

.download-all-btn {
    width: 100%;
    padding: 12px;
    background: #0cbb6e;
    border-radius: 10px;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    transition: 0.25s;
}

.download-all-btn:hover {
    background: #099d5c;
}


/* 🌙 DARK MODE — Sağ panel options box */
body.dark .options-box {
    background: #0F172A;
    box-shadow: 0 3px 18px rgba(0,0,0,0.55);
    border: 1px solid #1E293B;
}

body.dark .options-box h3,
body.dark .options-box p {
    color: #dce7ff;
}



/*  GALERİ  */
.gallery-title {
    margin-bottom: 15px;
    font-size: 22px;
    font-weight: 600;
}

.gallery-grid {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.img-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
}

.download-btn:hover {
    background: #364dcc;
}




/*   Process Card  */
.process-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 25px 30px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.08);
}

.process-card h2 {
    font-size: 22px;
    margin-bottom: 10px;
}

.process-card p {
    font-size: 15px;
    color: #666;
    margin-bottom: 15px;
}

.process-card ul {
    margin-bottom: 18px;
}

.process-card ul li {
    margin-bottom: 6px;
    font-size: 15px;
    color: #444;
}

.process-btn {
    width: 220px;
    font-size: 16px;
}



/* 🌙 DARK MODE — CTA Process Card */
body.dark .process-card {
    background: #0F172A;
    box-shadow: 0 3px 18px rgba(0,0,0,0.55);
    border: 1px solid #1E293B;
}

body.dark .process-card h2 {
    color: #e2e8f0;
}

body.dark .process-card p,
body.dark .process-card ul li {
    color: #b6c4d9;
}


body.dark .ad-box {
    background: #1E293B;
    color: #d1d9e6;
    border: 1px solid #334155;
}




/* ============================================================
   YENİ LAYOUT — 1 SATIR, 2 SÜTUN
   (Bu bölüm tamamen YENİDİR)
============================================================ */

/* 🔥 Yeni ana grid yapısı — sol ve sağ sütun */
.merged-layout {
    display: grid;                		/* İki büyük kolon oluşturur */
    grid-template-columns: 1fr 350px; 	/* Sol geniş, sağ sabit genişlik */
    gap: 30px;
    max-width: 1300px;
    margin: 10px auto;
    padding: 0 10px;
}

/* 🔥 Sol kolon içindeki blokları alt alta hizalar */
.left-column-main > * {
    margin-bottom: 30px;
}

/* 🔥 Sağ kolon içindeki blokları alt alta hizalar */
.right-column-main > * {
    margin-bottom: 30px;
}



/*   RESPONSIVE (Mobil İçin Tek Sütuna Düşürme)  */
@media (max-width: 900px) {

    /* 🔥 Mobilde 1 sütun görünüm */
    .merged-layout {
        grid-template-columns: 1fr;
    }

    /* İçerikler sırası korunur */
    .right-column-main {
        order: 2;
    }

    .left-column-main {
        order: 1;
    }
}



/*  GİZLEME YARDIMCI SINIFI */
.hidden {
    display: none;
}


/*  İLERLEME ÇUBUĞU (Sıkıştırma oranını görsel yapmak için)  */

.compress-inner {
    height: 6px;
    width: 0%;
    background: linear-gradient(90deg, #1dd1a1, #3577ff);
    transition: width .4s ease;
}

/* Download içindeki yüzde */
.download-btn .percent {
    color: #fff;
    margin-left: 6px;
    font-weight: 600;
}


/*   DOWNLOAD BUTONU ALT ÇİZGİ KALDIRMA — FINAL FIX  */
.download-btn,
.download-btn:hover,
.download-btn:focus,
.download-btn:active {
    text-decoration: none !important;   /* Alt çizgiyi tamamen kaldırır */
    border: none !important;             /* Gizli border varsa siler */
    outline: none !important;
}


/*   FORMAT BİLGİSİ (WEBP → JPG satırı)  */
.format-info {
    font-size: 14px;
    font-weight: 600;
    color: #3577FF;
    margin: 6px 0 4px 0;
    text-align: center;
}

.compress-inner {
    height: 100%;
    background: linear-gradient(90deg, #1DD1A1, #3577FF);
    border-radius: 4px;
}


/* ============================================================
   PREMIUM CARD UI — Nurullah Hocam için FINAL TASARIM
   Ultra modern görünüm: Figma / Apple tarzı
============================================================ */

.img-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.08);
    text-align: center;
    transition: transform .18s ease, box-shadow .18s ease;
    border: 1px solid #eef1f6;
	position: relative; /* Badge’in doğru köşeye yapışması için */

}

/* Hover efekti – premium hissiyat */
.img-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}

/* Resim */
.img-card .preview {
    width: 100%;
    border-radius: 12px;
    height: 160px;
    object-fit: cover;
    margin-bottom: 14px;
}

/* Format bilgisi (WEBP → JPG) */
.format-info {
    font-size: 15px;
    font-weight: 600;
    color: #3577FF;
    background: #eef3ff;
    padding: 6px 12px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 10px;
}

/* Boyut bilgisi */
.size-info {
    font-size: 14px;
    color: #4b4b4b;
    margin: 8px 0 14px;
}

.size-info .arrow {
    margin: 0 6px;
    font-weight: 600;
}

/* Yüzdelik bar */
.compress-bar {
    width: 100%;
    height: 7px;
    background: #e9edf5;
    border-radius: 40px;
    margin-bottom: 14px;
    overflow: hidden;
}

.compress-inner {
    height: 100%;
    background: linear-gradient(90deg, #1DD1A1, #3577FF);
    border-radius: 40px;
}

/* Download butonu */
.download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    
    text-decoration: none !important;
    border: none !important;
    outline: none !important;

    width: 100%;
    padding: 12px 0;
    background: #3577FF;
    color: #fff;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;

    transition: background .25s ease, transform .15s ease;
}

/* Hover – Apple tarzı animasyon */
.download-btn:hover {
    background: #255bd4;
    transform: scale(1.03);
}

/* Küçülme yüzdesi */
.download-btn .percent {
    background: rgba(255,255,255,0.25);
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}


/* ============================================================
   🌙 DARK MODE DESTEK — Premium Card UI (FINAL)
   Nurullah Hocam için özel optimize edilmiştir.
============================================================ */

/* Kart */
body.dark .img-card {
    background: #0F172A;                    /* koyu lacivert – çok şık */
    border-color: #1E293B;
    box-shadow: 0 6px 24px rgba(0,0,0,0.55);
}

/* Hover efekti (dark mode) */
body.dark .img-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(0,0,0,0.75);
}

/* Format Bilgisi (WEBP → JPG) */
body.dark .format-info {
    background: rgba(53, 119, 255, 0.16);  /* soft blue transparency */
    color: #80AFFF;                        /* pastel mavi */
}

/* Boyut Bilgisi */
body.dark .size-info {
    color: #d6e2ff;
}

body.dark .arrow {
    color: #a7c0ff;
}

/* Progress Bar */
body.dark .compress-bar {
    background: #1E293B;
}

body.dark .compress-inner {
    background: linear-gradient(90deg, #34d399, #60a5fa); /* mint → soft blue */
}

/* Download Button */
body.dark .download-btn {
    background: #1D4ED8;      /* deep blue */
    color: #ffffff;
}

body.dark .download-btn:hover {
    background: #2563EB;      /* daha parlak */
    transform: scale(1.03);
}

/* Yüzde etiketi */
body.dark .download-btn .percent {
    background: rgba(255,255,255,0.2);
    color: #fff;
}


/*   OPTIMIZATION BADGE — Kart sağ üst köşe etiketi (FINAL)  */
.opt-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    
    background: linear-gradient(135deg, #1DD1A1, #22C55E);
    color: #ffffff;
    
    padding: 6px 12px;
    border-radius: 8px;
    
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
    
    pointer-events: none; /* butona tıklamayı engellemez */
    z-index: 5;
}

/* Dark Mode */
body.dark .opt-badge {
    background: linear-gradient(135deg, #34d399, #10b981);
    color: #eafff6;
}

/* Format Bilgilendiricisi */
.format-note {
    margin-top: 8px;
    font-size: 12px;
    color: #888;
    text-align: center;
    line-height: 1.4;
}


/*  ❌ Hata Kartı Mesaj Alanı (convert edilemeyen formatlar için)  */
.format-error {
    margin-top: 10px;
    font-size: 13px;
    color: #d40000; /* kırmızı */
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
}

/* Hata durumunda görüntü yerine çıkan placeholder */
.error-preview {
    width: 100%;
    height: 150px;
    border-radius: 10px;
    background: #ffe5e5;
    border: 2px dashed #ff6b6b;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d40000;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
}



/* PRO CTA CARD */
/* LIGHT MODE – PRO Kart */
.pro-card {
    padding: 18px;
    background: #ffffff;               /* 🔥 Açık tema */
    border: 1px solid #d5d7de;         /* Light border */
    border-radius: 12px;
    text-align: center;
    color: #333;                       /* siyah metin */
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* DARK MODE – PRO Kart */
body.dark .pro-card {
    background: #0f1a2b;               /* eski koyu renk */
    border: 1px solid #375886;
    color: #fff;
}


.pro-thumb {
    width: 100%;
    height: 200px;               /* sabit yükseklik */
    display: flex;               /* ORTALAMA için zorunlu */
    align-items: center;         /* dikey ortalama */
    justify-content: center;     /* yatay ortalama */

    object-fit: contain;
    border-radius: 8px;
    border: 1px dashed #c7c7c7;
    background: #f2f4f8;
    
}
body.dark .pro-thumb {
    background: #1c2b45;
    border-color: #bf324e;
}


.pro-thumb--placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #111827;
}

.pro-thumb--placeholder .file-ext {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
}

.pro-thumb--placeholder .file-name {
    font-size: 12px;
    opacity: .8;
    text-align: center;
    padding: 0 6px;
    word-break: break-all;
}


.pro-error-msg {
    color: #ff6374;
    font-size: 14px;
    font-weight: 500;
}

.pro-upgrade-btn {
    background: linear-gradient(90deg, #ffb300, #ff8c00);
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    color: #000;
    margin-top: 5px;
}

.pro-upgrade-btn:hover {
    opacity: 0.85;
}

.pro-upgrade-info {
    margin-top: 10px;
    color: #ffb300;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}


/* ============================
   POPUP WARNING (CENTER MODAL)
===============================*/
.popup-warning {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999; /* HER ŞEYİN ÜSTÜNDE */
}

.popup-warning .popup-box {
    background: #ffffff;
    color: #111;
    padding: 25px 30px;
    border-radius: 12px;
    width: 320px;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    animation: popupScale .20s ease-out;
}

@keyframes popupScale {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.popup-warning h3 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 20px;
}

#popup-close {
    background: #0066ff;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 15px;
}

#popup-close:hover {
    background: #004FCC;
}


/* Eğer çıktı dosyası küçülmüşse “–%”, büyümüşse “+%” göstermeliyiz */
.opt-badge {
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 6px;
}

.opt-green {
    background: rgba(0, 200, 0, 0.15);
    color: #00c800;
}

.opt-red {
    background: rgba(255, 0, 0, 0.15);
    color: #ff3b3b;
}

.opt-neutral {
    background: rgba(255, 255, 255, 0.15);
    color: #dddddd;
}



/* ============================================
   FORMAT DROPDOWN MENU — FINAL & STABLE - IMAGGE-TO-IMAGE
   %100 OPAK — Light & Dark uygundur
   ============================================ */

/* Başlık + Menü aynı satır */
.title-and-format {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 20px;
}

/* Container */
.format-selector {
    position: relative;
    z-index: 99999;
}

/* Toggle Button */
.format-btn {
    background: var(--btn-bg);
    color: var(--btn-text);
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid var(--border);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    z-index: 99999;
}

/* DROPDOWN MENU */
.format-menu {
    position: absolute;
    top: 50px;
    right: 0;
    width: 350px;

    /* SADECE BU KOŞU OPAKLIK SORUNU ÇÖZÜYOR */
    background: #ffffff;         /* LIGHT MODE */
    color: #111;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);

    /* Blur / transparency tamamen kapalı */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    padding: 20px;
    display: none;
    z-index: 999999;
}

/* DARK MODE MENU (tam opak) */
.dark-mode .format-menu {
    background: #1e1e1e !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.55) !important;
}

/* Menü açık */
.format-menu.show {
    display: block;
}

/* Başlıklar */
.format-section-title {
    font-size: 14px;
    opacity: .6;
    margin: 10px 0 5px;
}

/* Grid */
.format-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

/* Format item */
.fmt-item {
    padding: 10px;
    text-align: center;
    background: var(--btn-bg);
    border-radius: 6px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: 0.2s;
}

.fmt-item:hover {
    background: var(--hover);
}

/* PRO Lock */
.fmt-item.pro-locked {
    opacity: 0.45;
    cursor: not-allowed;
}

/* MOBİL */
/* =====================================================================
   YENİ DİNAMİK MOBİL STİLLER
   ===================================================================== */

/* 1. ORTA VE GENİŞ MOBİL EKRANLAR İÇİN DÜZEN (Tablet Dikey / Büyük Telefonlar) */
/* (0px'ten 768px'e kadar tüm mobil cihazlar) */
@media (max-width: 768px) {
    .title-and-format {
        /* Başlık ve Butonu alt alta getirir */
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .format-selector {
        width: 100%; /* Menü butonunun tüm genişliği kaplaması için */
    }
    .format-menu {
        /* Dropdown menünün ekranı kaplaması için */
        width: 100%;
        right: 0;
        left: 0;
        margin: 0 auto;
        box-sizing: border-box; /* Padding dahil genişlik hesaplama */
    }
    
    /* Geniş Mobil: 3'LÜ SÜTUN */
    .format-grid {
        grid-template-columns: repeat(3, 1fr); /* ⬅️ GENİŞ EKRANLAR İÇİN 3 SÜTUN */
    }
}

/* 2. DAR MOBİL EKRANLAR İÇİN AYAR (Küçük Telefonlar) */
/* (0px'ten 480px'e kadar olan cihazlar için kuralı ezer) */
@media (max-width: 480px) {
    /* Dar Mobil: 2'Lİ SÜTUN */
    .format-grid {
        grid-template-columns: repeat(2, 1fr); /* ⬅️ DAR EKRANLAR İÇİN 2 SÜTUN */
    }
}

/* ========================================
   DARK MODE — Format Dropdown Text Fix
======================================== */

body.dark .format-menu {
    background: #1E1E1E !important;
    color: #e6e6e6 !important;
}

body.dark .format-menu .format-section-title {
    color: #bfc6d8 !important;
    opacity: 0.9 !important;
}

body.dark .fmt-item {
    color: #ffffff !important;
    background: #2a2f3a !important;
    border-color: #3a3f4a !important;
}

body.dark .fmt-item.pro-locked {
    background: #2a2f3a !important;
    opacity: .35 !important;
    color: #dddddd80 !important;
}



/* =========================================================================
   📌 JPG TOOL — FORMAT WARNING PANEL (SAĞ SÜTUN)
   %100 Light / Dark uyumlu
   ========================================================================= */

#format-warning-panel.format-warning-panel {
    background: var(--ail-card-bg, #ffffff);
    border: 1px solid var(--ail-border-color, rgba(0,0,0,0.12));
    border-radius: 14px;
    padding: 20px 22px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ail-text-primary, #1a1a1a);
    box-shadow: var(--ail-shadow, 0 4px 12px rgba(0,0,0,0.06));
    transition: background .25s, color .25s, border-color .25s;
    margin-top: 20px;
}

/* Başlık */
#format-warning-panel h3 {
    font-size: 16px;
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--ail-text-primary, #1a1a1a);
}

/* Dosya adı */
#format-warning-panel .warning-file {
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--ail-text-primary, #1a1a1a);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Format ok işareti */
#format-warning-panel .fmt-arrow {
    font-weight: 400;
    opacity: .75;
}

/* Liste */
#format-warning-panel .warning-list {
    padding-left: 20px;
    margin-bottom: 12px;
}

#format-warning-panel .warning-list li {
    margin-bottom: 6px;
    color: var(--ail-text-secondary, #555);
}

/* Placeholder (Henüz dosya yokken) */
#format-warning-panel .placeholder {
    color: var(--ail-text-secondary, #555);
    text-align: center;
    padding: 30px 10px;
    opacity: .7;
}

/* =========================================================================
   🌙 DARK MODE OVERRIDE — html.dark-mode aktif olduğunda çalışır
   ========================================================================= */
/* ... Orijinal Light Mode Stilleri ... */

/* =========================================================================
   🌙 DARK MODE OVERRIDE — body.dark sınıfı için birleştirilmiş ve temiz blok
   ========================================================================= */

/* Arka plan, kenarlık ve gölge için ana panel stilini birleştirin */
body.dark #format-warning-panel.format-warning-panel {
    /* Sizin eklediğiniz renkleri kullanıyorum */
    background: #0F172A;
    border-color: #1E293B; 
    box-shadow: 0 3px 18px rgba(0,0,0,0.55);
    
    /* Gerekirse !important kaldırılabilir, ancak tutarlılık için şimdilik kalsın */
    color: #dce7ff !important; 
}

/* Metin rengini tek bir seçicide ayarlayın */
body.dark #format-warning-panel h3,
body.dark #format-warning-panel .warning-file,
body.dark #format-warning-panel .warning-list li,
body.dark #format-warning-panel .fmt-arrow {
    color: #dce7ff !important;
    /* Opaklık (fmt-arrow için) */
}

/* Tek tek diğer metin elemanları (eğer varsa) */
body.dark #format-warning-panel strong,
body.dark #format-warning-panel span,
body.dark #format-warning-panel p {
    color: #dce7ff !important;
}

body.dark #format-warning-panel .fmt-arrow {
    opacity: .6;
}

/* Panel başlangıçta gizli */
.hidden {
    display: none !important;
}



/* Server işleme etiketi (opsiyonel) - don-imagetoimage-api.php */
.server-badge{
  display:inline-block;
  font-size:12px;
  padding:6px 10px;
  border-radius:10px;
  background:rgba(255, 200, 0, .15);
  border:1px solid rgba(255, 200, 0, .35);
}





/*  SAĞ PANEL — format-warning-panel  */
/* .format-warning-panel { */
    /* background: #ffffff; */
    /* padding: 20px; */
    /* border-radius: 14px; */
    /* box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08); */
/* } */
/* .format-warning-panel strong { */
	/* color: #888; */
    /* margin-bottom: 10px; */
/* } */
/* .format-warning-panel p { */
	/* color: #4b6fff !important; */
    /* margin-bottom: 10px; */
/* } */
/* .format-warning-panel h3 { */
	/* color: #000 !important; */
/* } */
/* .format-warning-panel li { */
	/* color: #00ff00 !important; */
/* } */

/* 🌙 DARK MODE — Sağ panel options box */
/* body.dark .format-warning-panel { */
    /* background: #0F172A !important; */
    /* box-shadow: 0 3px 18px rgba(0,0,0,0.55) !important; */
    /* border: 1px solid #1E293B !important; */
/* } */
/* body.dark .format-warning-panel strong, .format-warning-panel li, .format-warning-panel h3, .format-warning-panel span, */
/* body.dark .format-warning-panel p { */
    /* color: #dce7ff !important; */
/* } */