*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#f5f7fb;
    color:#1e293b;
}

/* ================= NAVBAR ================= */

nav{
    width:100%;
    height:75px;
    background:#2563eb;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 8%;
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 10px 25px rgba(37,99,235,.25);
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:24px;
    font-weight:700;
    color:white;
}

.logo i{
    font-size:30px;
    color:#0e20c7;
}

nav ul{
    display:flex;
    list-style:none;
    gap:35px;
}

nav ul li a{
    text-decoration:none;
    color:#ffffff;
    font-size:17px;
    font-weight:600;
    letter-spacing:.3px;
    padding:8px 0;
    transition:.3s;
    position:relative;
}
nav ul li a:hover{
    color:#ffffff;
}

nav ul li a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:3px;
    background:#ffd54f;
    border-radius:20px;
    transition:.3s;
}


nav ul li a:hover::after{
    width:100%;
}
/* ================= HEADER ================= */

header{
    padding:70px 20px;
    text-align:center;
}

header h1{
    font-size:48px;
    margin-bottom:20px;
    color:#0f172a;
}

header p{
    font-size:19px;
    color:#64748b;
    margin-bottom:40px;
}

/* ================= ARAMA ================= */

.arama{
    width:700px;
    max-width:95%;
    margin:auto;
    background:#fff;
    display:flex;
    align-items:center;
    padding:18px 25px;
    border-radius:15px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.arama i{
    color:#94a3b8;
    font-size:20px;
}

.arama input{
    width:100%;
    border:none;
    outline:none;
    margin-left:15px;
    font-size:17px;
}

/* ================= POPÜLER ================= */

.populer{
    margin-top:35px;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
}

.populer a{
    text-decoration:none;
    background:#2563eb;
    color:#fff;
    padding:12px 20px;
    border-radius:30px;
    transition:.3s;
    font-size:15px;
}

.populer a:hover{
    background:#1d4ed8;
    transform:translateY(-3px);
}

/* ================= KATEGORİLER ================= */

section{
    width:90%;
    max-width:1300px;
    margin:auto;
    margin-bottom:70px;
}

section h2{
    text-align:center;
    margin-bottom:40px;
    font-size:35px;
    color:#0f172a;
}

.kategoriler{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

/* ================= KART ================= */

.kart{
    background:#fff;
    text-decoration:none;
    color:#1e293b;
    border-radius:18px;
    padding:35px;
    transition:.35s;
    box-shadow:0 8px 20px rgba(0,0,0,.07);
    border:1px solid #eef2f7;
}

.kart:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 35px rgba(37,99,235,.15);
}

.kart i{
    font-size:42px;
    color:#2563eb;
    margin-bottom:20px;
}

.kart h3{
    margin-bottom:12px;
    font-size:23px;
}

.kart span{
    display:inline-block;
    background:#dbeafe;
    color:#2563eb;
    padding:6px 14px;
    border-radius:30px;
    font-size:14px;
    margin-bottom:18px;
}

.kart p{
    color:#64748b;
    line-height:28px;
}

/* ================= FOOTER ================= */

footer{
    background:#ffffff;
    text-align:center;
    padding:50px 20px;
    border-top:1px solid #e2e8f0;
}

footer h3{
    color:#2563eb;
    margin-bottom:15px;
}

footer p{
    color:#64748b;
    margin-bottom:10px;
}

footer small{
    color:#94a3b8;
}

/* ================= RESPONSIVE ================= */

@media(max-width:1000px){

.kategoriler{
    grid-template-columns:repeat(2,1fr);
}

nav{
    padding:0 30px;
}

}

@media(max-width:700px){

nav{
    flex-direction:column;
    height:auto;
    padding:20px;
}

nav ul{
    margin-top:20px;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;
}

header h1{
    font-size:35px;
}

header p{
    font-size:17px;
}

.kategoriler{
    grid-template-columns:1fr;
}

.arama{
    padding:15px 20px;
}

}

.tool{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:30px;
    padding:60px 20px;
}

.tool-card{
    width:100%;
    max-width:650px;
    background:#fff;
    padding:35px;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.tool-card h1{
    margin-bottom:15px;
    color:#2563eb;
}

.tool-card p{
    color:#666;
    margin-bottom:25px;
}

.tool-card label{
    display:block;
    margin:20px 0 8px;
    font-weight:600;
}

.tool-card input,
.tool-card select{
    width:100%;
    padding:14px;
    border:1px solid #ddd;
    border-radius:10px;
    font-size:16px;
}

.tool-card button{
    width:100%;
    margin-top:25px;
    padding:15px;
    background:#2563eb;
    color:#fff;
    border:none;
    border-radius:10px;
    cursor:pointer;
    font-size:17px;
    transition:.3s;
}

.tool-card button:hover{
    background:#1d4ed8;
}

.sonuc{
    margin-top:30px;
    padding:20px;
    background:#f8fafc;
    border-radius:12px;
    border-left:5px solid #2563eb;
}

.sonuc h3{
    margin-bottom:20px;
}

.sonuc-kutu{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 0;
    border-bottom:1px solid #e5e7eb;
}

.sonuc-kutu:last-child{
    border-bottom:none;
}

.sonuc-kutu span{
    color:#64748b;
    font-size:16px;
}

.sonuc-kutu strong{
    color:#2563eb;
    font-size:18px;
}

.breadcrumb{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:15px;
}

.breadcrumb a{
    color:white;
    text-decoration:none;
    transition:.3s;
    position:relative;
    font-weight:500;
}

.breadcrumb a:hover{
    color:#ffffff;
}

.breadcrumb a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-4px;
    width:0;
    height:2px;
    background:#ffd54f;
    border-radius:20px;
    transition:.3s;
}

.breadcrumb a:hover::after{
    width:100%;
}
.breadcrumb .aktif{
    color:#ffd54f;
    font-weight:600;
}

/* ================= KATEGORİ SAYFASI ================= */

.kategori{
    width:90%;
    max-width:900px;
    margin:60px auto;
}

.kategori-header{
    text-align:center;
    margin-bottom:40px;
}

.kategori-header h1{
    color:#2563eb;
    font-size:42px;
    margin-bottom:15px;
}

.kategori-header p{
    color:#64748b;
    font-size:18px;
}

.arac-listesi{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.arac{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px 30px;
    text-decoration:none;
    color:#1e293b;
    border-bottom:1px solid #e2e8f0;
    transition:.3s;
}

.arac:last-child{
    border-bottom:none;
}

.arac:hover{
    background:#f8fbff;
    padding-left:40px;
}

.arac span{
    flex:1;
    margin-left:18px;
    font-size:18px;
    font-weight:500;
}

.arac i:first-child{
    color:#2563eb;
    font-size:22px;
}

.arac i:last-child{
    color:#94a3b8;
}


.tool-box{

    margin-top:35px;
    padding:30px;
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    box-shadow:0 8px 25px rgba(0,0,0,.06);
    transition:.3s;

}

.tool-box:hover{

    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(37,99,235,.12);

}

.tool-box h2{

    color:#2563eb;
    margin-bottom:25px;
    font-size:25px;

}

.tool-box .sonuc{

    margin-bottom:0;

}

hr{

    display:none;

}

.moon-card{

    width:100%;
    max-width:650px;
    padding:30px;
    background:#fff;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    margin-top: -180px;
}

.moon-card img{

    width:280px;
    margin:25px auto;
    display:block;

}

.moon-card h2{

    margin:15px 0;
    color:#2563eb;

}

.moon-card p{

    margin:8px 0;
    font-size:18px;

}

.tarih-kutu{

    position:relative;
    display:flex;
    align-items:center;

}
#takvimIkon{
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    color:#666;
    font-size:20px;
}

#takvimIkon:hover{
    color:#2563eb;
}

.tarih-kutu input{

    width:100%;
    padding:14px 45px 14px 14px;

}

.tarih-kutu i{

    position:absolute;

    right:15px;

    top:50%;

    transform:translateY(-50%);

    color:#2563eb;

    cursor:pointer;

    font-size:18px;

    transition:.3s;

}

.tarih-kutu i:hover{

    color:#1d4ed8;

}

#takvimButon{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    cursor:pointer;

    color:#666;

    font-size:22px;

    transition:.2s;

}

#takvimButon:hover{

    color:#2563eb;

}

.sonuc-kutu.kar{

    background:#e8f8ee;
    border-left:5px solid #22c55e;
    transition:.3s;

}

.sonuc-kutu.zarar{

    background:#fdecec;
    border-left:5px solid #ef4444;
    transition:.3s;

} 

select{

    width:100%;
    padding:14px;
    border:1px solid #ddd;
    border-radius:12px;
    font-size:16px;
    margin-bottom:20px;
    background:#fff;
    cursor:pointer;
    transition:.3s;
    appearance: none;

}

select:focus{

    outline:none;
    border-color:#2563eb;
    box-shadow:0 0 0 4px rgba(37,99,235,.15);

}

.kur-karti{

    margin-top:30px;
    margin-bottom:30px;
    padding:20px;
    background:#f8fbff;
    border:1px solid #dbeafe;
    border-radius:15px;

}

.kur-karti h3{

    margin-bottom:18px;
    color:#2563eb;

}

.kur-bilgi{

    display:flex;
    justify-content:space-between;
    padding:12px 0;
    border-bottom:1px solid #eee;

}

.kur-bilgi strong{

    color:#2563eb;

}

.bildirim-btn{

    margin-top:20px;
    padding:12px 18px;
    border:none;
    border-radius:12px;
    background:#2563eb;
    color:#fff;
    font-size:15px;
    font-weight:600;
    cursor:not-allowed;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    width:auto;
    min-width:230px;

    transition:.3s;

}

.bildirim-btn i{

    font-size:15px;

    animation:zilSalla 2.5s infinite;

    transform-origin:top center;

}

@keyframes zilSalla{

    0%{

        transform:rotate(0deg);

    }

    5%{

        transform:rotate(18deg);

    }

    10%{

        transform:rotate(-18deg);

    }

    15%{

        transform:rotate(12deg);

    }

    20%{

        transform:rotate(-12deg);

    }

    25%{

        transform:rotate(6deg);

    }

    30%{

        transform:rotate(0deg);

    }

    100%{

        transform:rotate(0deg);

    }

}

.yakinda{

    display:flex;
    align-items:center;
    gap:5px;

    background:linear-gradient(135deg,#f59e0b,#f97316);

    color:#fff;

    padding:4px 10px;

    border-radius:20px;

    font-size:11px;

    font-weight:700;

}
.yakinda i{

    font-size:10px;

    display:inline-block;

    transform-origin:center;

    animation:roketSalla 2s infinite;

}
.bildirim-alani{

    display:flex;
    justify-content:center;
    margin-top:20px;

}

.bildirim-btn{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    width:220px;
    height:42px;

    border:none;
    border-radius:10px;

    background:#2563eb;
    color:#fff;

    font-size:14px;
    font-weight:600;

    cursor:not-allowed;

    transition:.35s;

}

.bildirim-btn:hover{

    transform:translateY(-2px);

    border:1px solid #60a5fa;

    box-shadow:
        
        0 0 10px #facc15,
        0 0 15px rgba(250,204,21,.6),
        0 0 20px rgba(250,204,21,.4);

}

@keyframes bildirimParla{

    0%{

        box-shadow:0 0 0 rgba(37,99,235,0);

    }

    50%{

        box-shadow:0 0 18px rgba(37,99,235,.45);

    }

    100%{

        box-shadow:0 0 0 rgba(37,99,235,0);

    }

}

.yakinda{

    background:#f59e0b;
    color:#fff;

    padding:3px 8px;

    border-radius:20px;

    font-size:10px;
    font-weight:bold;

    animation:yakinda 1.5s infinite;

}

@keyframes yakinda{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes roketSalla{

    0%,100%{

        transform:rotate(0deg);

    }

    25%{

        transform:rotate(-12deg);

    }

    50%{

        transform:rotate(12deg);

    }

    75%{

        transform:rotate(-8deg);

    }

}

.saat-kartlari{

    display:flex;

    justify-content:center;

    align-items:flex-end;

    gap:15px;

    margin-top:10px;

}

.saat-kart{

    width:120px;

    background:#fff;

    border:1px solid #dbe4ee;

    border-radius:14px;

    padding:12px;

    text-align:center;

    transition:.3s;

}

.saat-kart:hover{

    border-color:#2563eb;

    box-shadow:0 10px 25px rgba(37,99,235,.12);

}

.saat-kart span{

    display:block;

    font-size:13px;

    color:#6b7280;

    margin-bottom:8px;

    font-weight:600;

}

.saat-kart input{

    width:100%;

    border:none;

    outline:none;

    text-align:center;

    font-size:28px;

    font-weight:700;

    background:transparent;

}

.ikiNokta{

    font-size:34px;

    font-weight:bold;

    color:#2563eb;

    padding-bottom:18px;

}

.kronometre-ekran{

    width:100%;

    margin:25px 0;

    padding:25px 10px;

    text-align:center;

    background:#f8fafc;

    border:1px solid #e2e8f0;

    border-radius:16px;

    font-size:48px;

    font-weight:700;

    letter-spacing:2px;

}

.salise-nokta{

    color:#2563eb;

}


.kronometre-butonlar{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:25px;

}


.kronometre-butonlar button{

    width:auto;

    min-width:120px;

}


#turListesi{

    display:flex;

    flex-direction:column;

    gap:8px;

}


.tur-yok{

    text-align:center;

    padding:15px;

    color:#64748b;

}


.tur-satiri{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 15px;

    background:#f8fafc;

    border:1px solid #e2e8f0;

    border-radius:10px;

}


.tur-satiri strong{

    color:#2563eb;

}

/* ============================= */
/* SAAT FARKI HESAPLAMA */
/* ============================= */

.saat-fark-alani {

    display: flex;

    align-items: flex-end;

    justify-content: center;

    gap: 20px;

    margin: 30px 0;

}


.saat-kutu {

    flex: 1;

    max-width: 250px;

}


.saat-kutu label {

    display: block;

    margin-bottom: 8px;

    font-weight: 600;

}


.saat-kutu input {

    width: 100%;

    box-sizing: border-box;

    padding: 14px;

    border: 1px solid #d9dee7;

    border-radius: 12px;

    background: #fff;

    font-size: 20px;

    text-align: center;

    outline: none;

}


.saat-kutu input:focus {

    border-color: #2563eb;

}


.saat-ok {

    display: flex;

    align-items: center;

    justify-content: center;

    padding-bottom: 13px;

    font-size: 24px;

}


.ertesi-gun {

    display: flex;

    justify-content: center;

    margin-bottom: 20px;

}


.ertesi-gun label {

    display: flex;

    align-items: center;

    gap: 8px;

    cursor: pointer;

}


.ertesi-gun input {

    width: 18px;

    height: 18px;

}


@media (max-width: 600px) {

    .saat-fark-alani {

        gap: 10px;

    }


    .saat-kutu {

        max-width: none;

    }


    .saat-kutu input {

        font-size: 17px;

        padding: 12px 5px;

    }


    .saat-ok {

        font-size: 18px;

    }

}

/* ============================= */
/* SAAT HESAPLAMA ÜST ALANI */
/* ============================= */

.tool-navbar{

    width:100%;

    min-height:78px;

    background:#2563eb;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:8px 20px;

    box-shadow:0 10px 25px rgba(37,99,235,.25);

    position:relative;

    z-index:1000;

}


.tool-navbar .logo{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-size:24px;

    font-weight:700;

    color:white;

}


.tool-navbar .logo i{

    font-size:30px;

    color:#0e20c7;

}


.tool-navbar .breadcrumb{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:3px;

    font-size:15px;

}


.tool-navbar .breadcrumb a{

    color:white;

    text-decoration:none;

    font-weight:500;

}


.tool-navbar .breadcrumb .aktif{

    color:#ffd54f;

    font-weight:600;

}


@media(max-width:600px){

    .tool-navbar{

        min-height:90px;

        padding:10px;

    }


    .tool-navbar .logo{

        font-size:21px;

    }


    .tool-navbar .logo i{

        font-size:25px;

    }


    .tool-navbar .breadcrumb{

        gap:6px;

        font-size:15px;

        flex-wrap:wrap;

    }

}

/* ============================= */
/* RENK SEÇİCİ */
/* ============================= */

.renk-secici-alani {
    margin-top: 30px;
}

.renk-onizleme {
    width: 100%;
    height: 180px;
    border-radius: 15px;
    background: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 25px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.renk-secici-alani label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}

#renkSec {
    width: 100%;
    height: 60px;
    padding: 4px;
    border: 1px solid #d9dee7;
    border-radius: 12px;
    background: white;
    cursor: pointer;
}

.renk-bilgileri {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 25px;
}

.renk-kodu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.renk-kodu span {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

.renk-kodu strong {
    font-size: 16px;
    word-break: break-word;
}

.renk-kodu button {
    border: none;
    background: #2563eb;
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
}

.renk-kodu button:hover {
    opacity: 0.9;
}


/* TELEFON */

@media (max-width: 600px) {

    .renk-bilgileri {
        grid-template-columns: 1fr;
    }

    .renk-onizleme {
        height: 140px;
    }

}

/* ============================= */
/* RENK ARAÇLARI ANA SAYFASI */
/* ============================= */

.renk-araclari-sayfa {

    width: 100%;
    max-width: 900px;

    margin: 0 auto;

    padding: 0 20px 50px;

}


/* ============================= */
/* BAŞLIK */
/* ============================= */

.renk-baslik {

    text-align: center;

    margin-bottom: 35px;

}


.renk-baslik h1 {

    margin: 0;

    color: #2563eb;

    font-size: 42px;

    font-weight: 700;

    line-height: 1.2;

}


.renk-baslik h1 i {

    margin-right: 8px;

}


.renk-baslik p {

    margin: 12px 0 0;

    color: #64748b;

    font-size: 17px;

    font-weight: 500;

}


/* ============================= */
/* ARAÇ LİSTESİ */
/* ============================= */

.renk-arac-listesi {

    width: 100%;

    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

}


/* ============================= */
/* ARAÇ SATIRI */
/* ============================= */

.renk-arac-satir {

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 66px;

    padding: 0 28px;

    box-sizing: border-box;

    text-decoration: none;

    color: #1e293b;

    border-bottom: 1px solid #e2e8f0;

    transition: background 0.2s ease;

}


.renk-arac-satir:last-child {

    border-bottom: none;

}


.renk-arac-satir:hover {

    background: #f8fafc;

}


/* ============================= */
/* SOL TARAF */
/* ============================= */

.renk-arac-sol {

    display: flex;

    align-items: center;

    gap: 18px;

}


.renk-arac-sol i {

    width: 28px;

    min-width: 28px;

    text-align: center;

    color: #2563eb;

    font-size: 20px;

}


.renk-arac-sol span {

    color: #1e293b;

    font-size: 17px;

    font-weight: 600;

}


/* ============================= */
/* SAĞ OK */
/* ============================= */

.renk-ok {

    color: #94a3b8;

    font-size: 15px;

}


/* ============================= */
/* MOBİL */
/* ============================= */

@media (max-width: 700px) {

    .renk-araclari-sayfa {

        padding: 0 12px 40px;

    }


    .renk-baslik h1 {

        font-size: 32px;

    }


    .renk-baslik p {

        font-size: 15px;

    }


    .renk-arac-satir {

        height: 62px;

        padding: 0 18px;

    }


    .renk-arac-sol {

        gap: 13px;

    }


    .renk-arac-sol span {

        font-size: 15px;

        font-weight: 600;

    }

}

/* ================================= */
/* RENK SEÇİCİ */
/* ================================= */

.renk-secici-card {
    max-width: 650px;
}


/* RENK SEÇİM ALANI */

.renk-secim-alani {
    margin-top: 25px;
}

.renk-secim-alani label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: #1e293b;
}


/* HEX YAZMA + RENK SEÇME */

.renk-yazma-alani {
    display: flex;
    align-items: center;
    gap: 12px;
}


.hex-input-wrap {
    flex: 1;
    height: 58px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: #fff;
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    box-sizing: border-box;
}

.hex-input-wrap span {
    font-size: 18px;
    font-weight: 700;
    color: #64748b;
}

.hex-input-wrap input {
    width: 100% !important;
    padding: 0 0 0 5px !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 18px !important;
    font-weight: 700;
    color: #1e293b;
    text-transform: uppercase;
}


#renkSecici {
    width: 58px !important;
    min-width: 58px !important;
    height: 58px !important;
    padding: 3px !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 12px !important;
    background: #fff !important;
    cursor: pointer;
}


/* HAZIR RENKLER */

.hazir-renkler {
    margin-top: 22px;
}

.hazir-renk-baslik {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
}

.hazir-renk-kutulari {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hazir-renk {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
    border: 2px solid #e2e8f0 !important;
    cursor: pointer;
    transition: .2s;
}

.hazir-renk:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0,0,0,.15);
}

.hazir-renk:active {
    transform: scale(.94);
}


/* RENK ÖNİZLEME */

.renk-secim-kutu {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 20px;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}

.renk-onizleme {
    width: 75px;
    height: 75px;
    flex-shrink: 0;
    border-radius: 12px;
    background: #2563eb;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

#renkHexBuyuk {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: 1px;
}


/* HEX - RGB - HSL */

.renk-degerleri {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 25px;
}

.renk-deger-kutu {
    width: 100%;
    min-width: 0;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-sizing: border-box;
}

.renk-deger-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.renk-deger-ust span {
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
}

.renk-deger-ust button {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #eff6ff !important;
    color: #2563eb !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    cursor: pointer;
}

.renk-deger-ust button:hover {
    background: #dbeafe !important;
}

.renk-deger-kutu strong {
    display: block !important;
    width: 100%;
    color: #1e293b !important;
    font-size: 15px !important;
    word-break: break-word;
}


/* SONUÇ */

.renk-secici-card .sonuc {
    margin-top: 28px;
}

.renk-secici-card .sonuc-kutu strong {
    color: #2563eb;
    font-size: 20px;
}


/* MOBİL */

@media (max-width: 600px) {

    .renk-yazma-alani {
        gap: 8px;
    }

    .hex-input-wrap input {
        font-size: 15px !important;
    }

    .hazir-renk {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
    }

    .renk-secim-kutu {
        flex-wrap: wrap;
    }

    #renkHexBuyuk {
        width: 100%;
        font-size: 21px;
    }

    .renk-degerleri {
        grid-template-columns: 1fr;
    }

}

/* ================================= */
/* HEX ↔ RGB DÖNÜŞTÜRÜCÜ */
/* ================================= */

.hex-rgb-card {

    max-width: 650px;

}


/* RENK ÖNİZLEME */

.hex-rgb-onizleme {

    width: 100%;

    height: 140px;

    margin: 25px 0;

    border-radius: 14px;

    background: #2563eb;

    border: 1px solid #e2e8f0;

    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.06);

}


/* DÖNÜŞTÜRÜCÜ KUTUSU */

.donusturucu-kutu {

    margin-top: 20px;

    padding: 22px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

}


.donusturucu-baslik {

    margin-bottom: 18px;

}


.donusturucu-baslik h3 {

    margin: 0;

    color: #2563eb;

    font-size: 20px;

}


/* LABEL */

.donusturucu-kutu label {

    display: block;

    margin: 0 0 8px;

    font-size: 14px;

    font-weight: 600;

    color: #64748b;

}


/* HEX INPUT */

.hex-input-satir {

    display: flex;

    align-items: center;

    width: 100%;

    height: 52px;

    padding: 0 14px;

    background: #ffffff;

    border: 1px solid #dbe3ef;

    border-radius: 10px;

    box-sizing: border-box;

}


.hex-input-satir span {

    font-size: 18px;

    font-weight: 700;

    color: #64748b;

}


.hex-input-satir input {

    width: 100% !important;

    padding: 0 0 0 5px !important;

    border: none !important;

    outline: none !important;

    background: transparent !important;

    font-size: 17px !important;

    font-weight: 600;

    color: #1e293b;

    text-transform: uppercase;

}


/* RGB GİRİŞLERİ */

.rgb-girisleri {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;

}


.rgb-girisleri input {

    width: 100% !important;

    box-sizing: border-box;

    padding: 13px;

    border: 1px solid #dbe3ef;

    border-radius: 10px;

    background: #ffffff;

    font-size: 16px;

    text-align: center;

    outline: none;

}


.rgb-girisleri input:focus,
.hex-input-satir:focus-within {

    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.08);

}


/* BUTON */

.donusturucu-kutu > button {

    width: 100% !important;

    margin-top: 18px !important;

}


/* SONUÇ */

.donusum-sonuc {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 18px;

    padding: 15px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 10px;

}


.donusum-sonuc span {

    color: #64748b;

    font-size: 14px;

    font-weight: 600;

}


.donusum-sonuc strong {

    flex: 1;

    color: #2563eb;

    font-size: 17px;

    word-break: break-word;

}


.donusum-sonuc button {

    width: 34px !important;

    min-width: 34px !important;

    height: 34px !important;

    margin: 0 !important;

    padding: 0 !important;

    background: #eff6ff !important;

    color: #2563eb !important;

    border: none !important;

    border-radius: 8px !important;

    cursor: pointer;

}


.donusum-sonuc button:hover {

    background: #dbeafe !important;

}


/* MOBİL */

@media (max-width: 600px) {

    .donusturucu-kutu {

        padding: 16px;

    }


    .rgb-girisleri {

        gap: 8px;

    }


    .rgb-girisleri input {

        padding: 12px 5px;

    }


    .donusum-sonuc {

        flex-wrap: wrap;

    }


    .donusum-sonuc strong {

        width: 100%;

        flex: none;

    }

}

/* ================================= */
/* RENK PALETİ OLUŞTURUCU */
/* ================================= */

.renk-paleti-card {
    max-width: 650px;
}


/* ANA RENK */

.palet-ana-renk {
    margin-top: 25px;
}


.palet-ana-renk > label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: #1e293b;
}


.palet-renk-giris {
    display: flex;
    align-items: center;
    gap: 12px;
}


#paletRenk {
    width: 58px !important;
    min-width: 58px !important;
    height: 58px !important;
    padding: 3px !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 12px !important;
    background: #fff !important;
    cursor: pointer;
}


.palet-hex {
    flex: 1;
    height: 58px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: #fff;
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    box-sizing: border-box;
}


.palet-hex span {
    font-size: 18px;
    font-weight: 700;
    color: #64748b;
}


#paletHex {
    width: 100% !important;
    padding: 0 0 0 5px !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 18px !important;
    font-weight: 700;
    color: #1e293b;
    text-transform: uppercase;
}


/* PALET SONUCU */

.palet-sonuc {
    margin-top: 30px;
    padding: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}


.palet-sonuc h3 {
    margin: 0 0 18px;
    color: #1e293b;
}


/* RENK KARTLARI */

.palet-kartlari {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}


.palet-renk-karti {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}


.palet-renk-kutu {
    width: 100%;
    height: 120px;
    background: #2563eb;
}


.palet-renk-alt {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 13px 12px;

}


.palet-renk-alt > div {

    display: flex;

    flex-direction: column;

    gap: 5px;

    min-width: 0;

}

.palet-yuzde {

    display: inline-block;

    width: fit-content;

    padding: 3px 7px;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 6px;

    font-size: 11px;

    font-weight: 700;

    line-height: 1;

}


.palet-renk-alt strong {

    display: block;

    font-size: 12px;

    font-weight: 700;

    color: #1e293b;

    letter-spacing: .2px;

    word-break: break-all;

}


.palet-renk-alt button {

    width: 32px !important;

    min-width: 32px !important;

    height: 32px !important;

    margin: 0 !important;

    padding: 0 !important;

    border: none !important;

    border-radius: 8px !important;

    background: #eff6ff !important;

    color: #2563eb !important;

    cursor: pointer;

    flex-shrink: 0;

}

.palet-renk-alt button:hover {

    background: #dbeafe !important;

}

/* MOBİL */

@media (max-width: 700px) {

    .palet-kartlari {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 450px) {

    .palet-kartlari {
        grid-template-columns: 1fr;
    }


    .palet-renk-kutu {
        height: 90px;
    }

}

/* ================================= */
/* RENK KARIŞTIRICI */
/* ================================= */

.renk-karistirici-card {

    max-width: 650px;

}


/* RENK GİRİŞLERİ */

.karistirici-renkler {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    margin-top: 30px;

}


.karistirici-renk-kutu {

    flex: 1;

    min-width: 0;

}


.karistirici-renk-kutu label {

    display: block;

    margin-bottom: 9px;

    font-size: 15px;

    font-weight: 600;

    color: #1e293b;

}


/* RENK + HEX */

.karistirici-giris {

    display: flex;

    align-items: center;

    gap: 10px;

}


.karistirici-giris > input[type="color"] {

    width: 58px !important;

    min-width: 58px !important;

    height: 58px !important;

    padding: 3px !important;

    border: 1px solid #dbe3ef !important;

    border-radius: 12px !important;

    background: #fff !important;

    cursor: pointer;

}


.karistirici-hex {

    flex: 1;

    height: 58px;

    display: flex;

    align-items: center;

    padding: 0 14px;

    box-sizing: border-box;

    background: #fff;

    border: 1px solid #dbe3ef;

    border-radius: 12px;

}


.karistirici-hex span {

    font-size: 17px;

    font-weight: 700;

    color: #64748b;

}


.karistirici-hex input {

    width: 100% !important;

    padding: 0 0 0 4px !important;

    border: none !important;

    outline: none !important;

    background: transparent !important;

    font-size: 16px !important;

    font-weight: 700;

    color: #1e293b;

    text-transform: uppercase;

}


/* + İKONU */

.karistirici-arti {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    flex-shrink: 0;

    margin-top: 23px;

    border-radius: 50%;

    background: #eff6ff;

    color: #2563eb;

    font-size: 16px;

}


/* SONUÇ */

.karistirici-sonuc {

    margin-top: 30px;

    padding: 20px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

}


.karistirici-sonuc h3 {

    margin: 0 0 18px;

    color: #1e293b;

}


/* RENK ÖNİZLEME */

.karistirici-onizleme {

    width: 100%;

    height: 170px;

    border-radius: 14px;

    background: #800080;

    border: 1px solid #e2e8f0;

    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.06);

}


/* SONUÇ ALT */

.karistirici-sonuc-alt {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-top: 15px;

}


.karistirici-sonuc-alt strong {

    font-size: 22px;

    color: #2563eb;

    letter-spacing: .5px;

}


.karistirici-sonuc-alt button {

    width: auto !important;

    min-width: 110px !important;

    margin: 0 !important;

    padding: 10px 14px !important;

    background: #eff6ff !important;

    color: #2563eb !important;

    border: none !important;

    border-radius: 9px !important;

    font-size: 14px !important;

    cursor: pointer;

}


.karistirici-sonuc-alt button:hover {

    background: #dbeafe !important;

}


/* RGB - HSL */

.karistirici-bilgileri {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

    margin-top: 15px;

}


.karistirici-bilgileri > div {

    padding: 14px;

    background: #fff;

    border: 1px solid #e2e8f0;

    border-radius: 10px;

}


.karistirici-bilgileri span {

    display: block;

    margin-bottom: 7px;

    font-size: 13px;

    font-weight: 700;

    color: #64748b;

}


.karistirici-bilgileri strong {

    display: block;

    font-size: 14px;

    color: #1e293b;

    word-break: break-word;

}


/* MOBİL */

@media (max-width: 600px) {

    .karistirici-renkler {

        gap: 10px;

    }


    .karistirici-giris {

        flex-direction: column;

        align-items: stretch;

    }


    .karistirici-giris > input[type="color"] {

        width: 100% !important;

        height: 60px !important;

    }


    .karistirici-hex {

        width: 100%;

    }


    .karistirici-arti {

        width: 32px;

        height: 32px;

        font-size: 14px;

    }


    .karistirici-sonuc-alt {

        flex-direction: column;

        align-items: stretch;

    }


    .karistirici-sonuc-alt button {

        width: 100% !important;

    }


    .karistirici-bilgileri {

        grid-template-columns: 1fr;

    }

}

/* ================================= */
/* KARIŞIM ORANI */
/* ================================= */

.karisim-orani {

    margin-bottom: 20px;

}


.karisim-orani-baslik {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 10px;

}


.karisim-orani-baslik span {

    font-size: 14px;

    font-weight: 600;

    color: #64748b;

}


.karisim-orani-baslik strong {

    color: #2563eb;

    font-size: 16px;

}


/* SLIDER */

#karisimOrani {

    width: 100%;

    height: 6px;

    padding: 0 !important;

    margin: 8px 0;

    border: none !important;

    border-radius: 10px;

    background: #dbeafe;

    outline: none;

    cursor: pointer;

    appearance: auto;

}


.oran-etiketleri {

    display: flex;

    justify-content: space-between;

    margin-top: 4px;

    font-size: 12px;

    color: #94a3b8;

}


/* ================================= */
/* SONUÇ SATIRLARI */
/* ================================= */

.karistirici-sonuc-satir {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 14px 0;

    border-bottom: 1px solid #e2e8f0;

}


.karistirici-sonuc-satir:last-child {

    border-bottom: none;

}


.karistirici-sonuc-satir div {

    min-width: 0;

}


.karistirici-sonuc-satir span {

    display: block;

    margin-bottom: 5px;

    font-size: 13px;

    font-weight: 700;

    color: #64748b;

}


.karistirici-sonuc-satir strong {

    display: block;

    color: #1e293b;

    font-size: 15px;

    word-break: break-word;

}


.karistirici-sonuc-satir button {

    width: auto !important;

    min-width: 100px !important;

    height: 38px !important;

    margin: 0 !important;

    padding: 0 12px !important;

    background: #eff6ff !important;

    color: #2563eb !important;

    border: none !important;

    border-radius: 9px !important;

    font-size: 13px !important;

    cursor: pointer;

}


.karistirici-sonuc-satir button:hover {

    background: #dbeafe !important;

}


/* MOBİL */

@media (max-width: 500px) {

    .karistirici-sonuc-satir {

        align-items: flex-start;

    }


    .karistirici-sonuc-satir button {

        min-width: 90px !important;

        font-size: 12px !important;

    }

}

/* ================================= */
/* RENK KONTRAST KONTROLÜ */
/* ================================= */

.kontrast-card {
    max-width: 650px;
}


/* ================================= */
/* RENK SEÇİMLERİ */
/* ================================= */

.kontrast-renkler {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 25px;
}


.kontrast-renk-kutu {
    min-width: 0;
}


.kontrast-renk-kutu label {
    display: block;
    margin: 0 0 9px;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}


/* RENK KUTUSU + HEX */

.kontrast-giris {
    display: flex;
    align-items: center;
    gap: 10px;
}


.kontrast-giris > input[type="color"] {
    width: 58px !important;
    min-width: 58px !important;
    height: 58px !important;
    padding: 3px !important;
    border: 1px solid #dbe3ef !important;
    border-radius: 12px !important;
    background: #fff !important;
    cursor: pointer;
}


.kontrast-hex {
    flex: 1;
    height: 58px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #dbe3ef;
    border-radius: 12px;
}


.kontrast-hex span {
    font-size: 17px;
    font-weight: 700;
    color: #64748b;
}


.kontrast-hex input {
    width: 100% !important;
    padding: 0 0 0 4px !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 16px !important;
    font-weight: 700;
    color: #1e293b;
    text-transform: uppercase;
}


/* INPUT ODAK */

.kontrast-hex:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}


/* ================================= */
/* CANLI ÖNİZLEME */
/* ================================= */

.kontrast-onizleme {
    min-height: 190px;
    margin-top: 25px;
    padding: 30px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border-radius: 14px;

    background: #2563eb;
    color: #ffffff;

    text-align: center;

    transition:
        background-color .2s ease,
        color .2s ease;
}


.kontrast-onizleme strong {
    font-size: 28px;
    font-weight: 700;
}


.kontrast-onizleme p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: inherit;
}


/* ================================= */
/* SONUÇ KUTUSU */
/* ================================= */

.kontrast-sonuc {
    margin-top: 25px;
    padding: 20px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;
}


/* KONTRAST ORANI */

.kontrast-oran {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    padding-bottom: 18px;
    border-bottom: 1px solid #e2e8f0;
}


.kontrast-oran span {
    font-size: 15px;
    font-weight: 600;
    color: #64748b;
}


.kontrast-oran strong {
    color: #2563eb;
    font-size: 28px;
}


/* ================================= */
/* OKUNABİLİRLİK */
/* ================================= */

.kontrast-okunabilirlik {
    margin: 18px 0;

    padding: 14px;

    border-radius: 10px;

    background: #eff6ff;

    color: #2563eb;

    text-align: center;

    font-size: 17px;

    font-weight: 700;
}


/* ================================= */
/* SONUÇ SATIRLARI */
/* ================================= */

.kontrast-sonuc-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 15px 0;

    border-bottom: 1px solid #e2e8f0;
}


.kontrast-sonuc-satir:last-of-type {
    border-bottom: none;
}


.kontrast-sonuc-satir span {
    display: block;

    margin-bottom: 5px;

    font-size: 14px;
    font-weight: 600;

    color: #64748b;
}


.kontrast-sonuc-satir strong {
    display: block;

    font-size: 16px;

    color: #15803d;
}


/* ================================= */
/* GENEL ÖNERİ */
/* ================================= */

.kontrast-oneri {
    margin-top: 15px;

    padding: 16px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 10px;
}


.kontrast-oneri span {
    display: block;

    margin-bottom: 7px;

    font-size: 13px;

    font-weight: 700;

    color: #64748b;
}


.kontrast-oneri strong {
    display: block;

    font-size: 15px;

    line-height: 1.5;

    color: #1e293b;
}


/* ================================= */
/* MOBİL */
/* ================================= */

@media (max-width: 600px) {

    .kontrast-renkler {
        grid-template-columns: 1fr;
    }


    .kontrast-onizleme {
        min-height: 160px;
        padding: 20px;
    }


    .kontrast-onizleme strong {
        font-size: 23px;
    }


    .kontrast-onizleme p {
        font-size: 14px;
    }


    .kontrast-oran strong {
        font-size: 24px;
    }

}

/* ================================= */
/* PDF BİRLEŞTİR */
/* ================================= */

.pdf-birlestir-card {
    max-width: 650px;
}


/* ================================= */
/* DOSYA YÜKLEME ALANI */
/* ================================= */

.pdf-dosya-alani {
    margin-top: 25px;
}


.pdf-yukleme-kutu {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 190px;

    padding: 30px 20px;

    background: #f8fafc;

    border: 2px dashed #cbd5e1;

    border-radius: 16px;

    cursor: pointer;

    text-align: center;

    transition: .2s;
}


.pdf-yukleme-kutu:hover {
    background: #f0f7ff;
    border-color: #2563eb;
}


.pdf-yukleme-kutu > i {
    margin-bottom: 15px;

    font-size: 42px;

    color: #2563eb;
}


.pdf-yukleme-kutu strong {
    margin-bottom: 6px;

    font-size: 18px;

    color: #1e293b;
}


.pdf-yukleme-kutu span {
    font-size: 14px;

    color: #64748b;
}


.pdf-yukleme-kutu input[type="file"] {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    cursor: pointer;
}


/* ================================= */
/* DOSYA LİSTESİ */
/* ================================= */

.pdf-liste-kutu {
    margin-top: 25px;

    padding: 20px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;
}


.pdf-liste-baslik {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 15px;
}


.pdf-liste-baslik h3 {
    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0;

    color: #1e293b;

    font-size: 18px;
}


.pdf-liste-baslik h3 i {
    color: #ef4444;
}


.pdf-liste-baslik > span {
    padding: 5px 9px;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 7px;

    font-size: 12px;

    font-weight: 700;

    white-space: nowrap;
}


/* ================================= */
/* BOŞ MESAJ */
/* ================================= */

.pdf-bos-mesaj {
    min-height: 110px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 8px;

    color: #94a3b8;

    text-align: center;
}


.pdf-bos-mesaj i {
    font-size: 30px;
}


/* ================================= */
/* PDF SATIRI */
/* ================================= */

.pdf-dosya-satiri {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 13px 0;

    border-bottom: 1px solid #e2e8f0;
}


.pdf-dosya-satiri:last-child {
    border-bottom: none;
}


.pdf-dosya-sol {
    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;
}


.pdf-dosya-sol > i {
    flex-shrink: 0;

    font-size: 25px;

    color: #ef4444;
}


.pdf-dosya-sol > div {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.pdf-dosya-sol strong {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 14px;

    color: #1e293b;
}


.pdf-dosya-sol span {
    font-size: 12px;

    color: #94a3b8;
}


/* SİL BUTONU */

.pdf-dosya-satiri > button {
    width: 34px !important;
    min-width: 34px !important;

    height: 34px !important;

    margin: 0 !important;

    padding: 0 !important;

    background: #fee2e2 !important;

    color: #dc2626 !important;

    border: none !important;

    border-radius: 8px !important;

    cursor: pointer;

    flex-shrink: 0;
}


.pdf-dosya-satiri > button:hover {
    background: #fecaca !important;
}


/* ================================= */
/* BUTONLAR */
/* ================================= */

.pdf-butonlar {
    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 12px;

    margin-top: 20px;
}


.pdf-butonlar button {
    width: 100% !important;

    margin: 0 !important;
}


.pdf-temizle-btn {
    background: #f1f5f9 !important;

    color: #475569 !important;
}


.pdf-temizle-btn:hover {
    background: #e2e8f0 !important;
}


/* ================================= */
/* DURUM */
/* ================================= */

.pdf-durum {
    margin-top: 15px;

    padding: 13px 15px;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 10px;

    font-size: 14px;

    text-align: center;

    line-height: 1.5;
}


/* ================================= */
/* MOBİL */
/* ================================= */

@media (max-width: 600px) {

    .pdf-yukleme-kutu {
        min-height: 170px;

        padding: 25px 15px;
    }


    .pdf-yukleme-kutu > i {
        font-size: 36px;
    }


    .pdf-liste-kutu {
        padding: 15px;
    }


    .pdf-liste-baslik {
        align-items: flex-start;

        flex-direction: column;
    }


    .pdf-butonlar {
        grid-template-columns: 1fr;
    }


    .pdf-dosya-sol strong {
        max-width: 220px;
    }

}

/* ================================= */
/* PDF BÖL */
/* ================================= */

.pdf-bol-card {
    max-width: 650px;
}


/* ================================= */
/* PDF YÜKLEME */
/* ================================= */

.pdf-bol-yukleme {
    margin-top: 25px;
}


.pdf-bol-yukleme-kutu {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 180px;

    padding: 30px 20px;

    background: #f8fafc;

    border: 2px dashed #cbd5e1;

    border-radius: 16px;

    text-align: center;

    cursor: pointer;

    transition: .2s;
}


.pdf-bol-yukleme-kutu:hover {
    background: #f0f7ff;
    border-color: #2563eb;
}


.pdf-bol-yukleme-kutu > i {
    margin-bottom: 14px;

    font-size: 42px;

    color: #ef4444;
}


.pdf-bol-yukleme-kutu strong {
    margin-bottom: 6px;

    font-size: 18px;

    color: #1e293b;
}


.pdf-bol-yukleme-kutu span {
    font-size: 14px;

    color: #64748b;
}


.pdf-bol-yukleme-kutu input[type="file"] {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    cursor: pointer;
}


/* ================================= */
/* DOSYA BİLGİSİ */
/* ================================= */

.pdf-bol-dosya-bilgisi {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 20px;

    padding: 16px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 12px;
}


.pdf-bol-dosya-bilgisi > i {
    flex-shrink: 0;

    font-size: 30px;

    color: #ef4444;
}


.pdf-bol-dosya-bilgisi > div {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.pdf-bol-dosya-bilgisi strong {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 15px;

    color: #1e293b;
}


.pdf-bol-dosya-bilgisi span {
    font-size: 13px;

    color: #64748b;
}


/* ================================= */
/* SAYFA SEÇİMİ */
/* ================================= */

.pdf-bol-sayfa-alani {
    display: grid;

    grid-template-columns: 1fr 40px 1fr;

    align-items: end;

    gap: 12px;

    margin-top: 25px;
}


.pdf-bol-giris label {
    display: block;

    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 600;

    color: #1e293b;
}


.pdf-bol-giris input {
    width: 100% !important;

    box-sizing: border-box;

    padding: 14px !important;

    border: 1px solid #dbe3ef !important;

    border-radius: 10px !important;

    background: #fff !important;

    font-size: 16px !important;

    text-align: center;

    outline: none;
}


.pdf-bol-giris input:focus {
    border-color: #2563eb !important;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.08);
}


.pdf-bol-cizgi {
    display: flex;

    align-items: center;

    justify-content: center;

    height: 46px;

    color: #94a3b8;

    font-size: 22px;

    font-weight: 600;
}


/* ================================= */
/* BİLGİ KUTUSU */
/* ================================= */

.pdf-bol-bilgi {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-top: 18px;

    padding: 13px 15px;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 10px;

    font-size: 13px;

    line-height: 1.5;
}


.pdf-bol-bilgi i {
    margin-top: 2px;

    flex-shrink: 0;
}


/* ================================= */
/* BÖL BUTONU */
/* ================================= */

.pdf-bol-card > button {
    width: 100% !important;

    margin-top: 20px !important;
}


/* ================================= */
/* DURUM */
/* ================================= */

.pdf-bol-durum {
    margin-top: 15px;

    padding: 13px 15px;

    background: #f8fafc;

    color: #64748b;

    border: 1px solid #e2e8f0;

    border-radius: 10px;

    font-size: 14px;

    text-align: center;

    line-height: 1.5;
}


/* ================================= */
/* MOBİL */
/* ================================= */

@media (max-width: 600px) {

    .pdf-bol-yukleme-kutu {
        min-height: 160px;

        padding: 25px 15px;
    }


    .pdf-bol-sayfa-alani {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .pdf-bol-cizgi {
        height: auto;

        transform: rotate(90deg);

        margin: -5px 0;
    }


    .pdf-bol-dosya-bilgisi {
        padding: 13px;
    }


    .pdf-bol-dosya-bilgisi strong {
        max-width: 250px;
    }

}

/* ================================= */
/* JPG → PDF */
/* ================================= */

.jpg-pdf-card {
    max-width: 650px;
}


/* ================================= */
/* GÖRSEL YÜKLEME */
/* ================================= */

.jpg-pdf-yukleme {
    margin-top: 25px;
}


.jpg-pdf-yukleme-kutu {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 190px;

    padding: 30px 20px;

    background: #f8fafc;

    border: 2px dashed #cbd5e1;

    border-radius: 16px;

    text-align: center;

    cursor: pointer;

    transition: .2s;
}


.jpg-pdf-yukleme-kutu:hover {
    background: #f0f7ff;
    border-color: #2563eb;
}


.jpg-pdf-yukleme-kutu > i {
    margin-bottom: 15px;

    font-size: 42px;

    color: #2563eb;
}


.jpg-pdf-yukleme-kutu strong {
    margin-bottom: 6px;

    font-size: 18px;

    color: #1e293b;
}


.jpg-pdf-yukleme-kutu span {
    font-size: 14px;

    color: #64748b;
}


.jpg-pdf-yukleme-kutu input[type="file"] {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    cursor: pointer;
}


/* ================================= */
/* GÖRSEL LİSTESİ */
/* ================================= */

.jpg-pdf-liste-kutu {
    margin-top: 25px;

    padding: 20px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;
}


.jpg-pdf-liste-baslik {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 15px;
}


.jpg-pdf-liste-baslik h3 {
    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0;

    color: #1e293b;

    font-size: 18px;
}


.jpg-pdf-liste-baslik h3 i {
    color: #2563eb;
}


.jpg-pdf-liste-baslik > span {
    padding: 5px 9px;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 7px;

    font-size: 12px;

    font-weight: 700;

    white-space: nowrap;
}


/* ================================= */
/* BOŞ MESAJ */
/* ================================= */

.jpg-pdf-bos-mesaj {
    min-height: 110px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 8px;

    color: #94a3b8;

    text-align: center;
}


.jpg-pdf-bos-mesaj i {
    font-size: 30px;
}


/* ================================= */
/* GÖRSEL SATIRI */
/* ================================= */

.jpg-pdf-gorsel-satiri {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 13px 0;

    border-bottom: 1px solid #e2e8f0;
}


.jpg-pdf-gorsel-satiri:last-child {
    border-bottom: none;
}


/* SOL TARAF */

.jpg-pdf-gorsel-sol {
    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;
}


.jpg-pdf-gorsel-sol img {
    width: 52px;

    height: 52px;

    object-fit: cover;

    border-radius: 9px;

    border: 1px solid #e2e8f0;

    background: #fff;

    flex-shrink: 0;
}


.jpg-pdf-gorsel-sol > div {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.jpg-pdf-gorsel-sol strong {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 14px;

    color: #1e293b;
}


.jpg-pdf-gorsel-sol span {
    font-size: 12px;

    color: #94a3b8;
}


/* SİL BUTONU */

.jpg-pdf-gorsel-satiri > button {
    width: 34px !important;

    min-width: 34px !important;

    height: 34px !important;

    margin: 0 !important;

    padding: 0 !important;

    background: #fee2e2 !important;

    color: #dc2626 !important;

    border: none !important;

    border-radius: 8px !important;

    cursor: pointer;

    flex-shrink: 0;
}


.jpg-pdf-gorsel-satiri > button:hover {
    background: #fecaca !important;
}


/* ================================= */
/* BUTONLAR */
/* ================================= */

.jpg-pdf-butonlar {
    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 12px;

    margin-top: 20px;
}


.jpg-pdf-butonlar button {
    width: 100% !important;

    margin: 0 !important;
}


.jpg-pdf-temizle-btn {
    background: #f1f5f9 !important;

    color: #475569 !important;
}


.jpg-pdf-temizle-btn:hover {
    background: #e2e8f0 !important;
}


/* ================================= */
/* DURUM */
/* ================================= */

.jpg-pdf-durum {
    margin-top: 15px;

    padding: 13px 15px;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 10px;

    font-size: 14px;

    text-align: center;

    line-height: 1.5;
}


/* ================================= */
/* MOBİL */
/* ================================= */

@media (max-width: 600px) {

    .jpg-pdf-yukleme-kutu {
        min-height: 170px;

        padding: 25px 15px;
    }


    .jpg-pdf-yukleme-kutu > i {
        font-size: 36px;
    }


    .jpg-pdf-liste-kutu {
        padding: 15px;
    }


    .jpg-pdf-liste-baslik {
        align-items: flex-start;

        flex-direction: column;
    }


    .jpg-pdf-butonlar {
        grid-template-columns: 1fr;
    }


    .jpg-pdf-gorsel-sol img {
        width: 46px;

        height: 46px;
    }


    .jpg-pdf-gorsel-sol strong {
        max-width: 220px;
    }

}

/* ================================= */
/* PDF → JPG */
/* ================================= */

.pdf-jpg-card {
    max-width: 650px;
}


/* ================================= */
/* PDF YÜKLEME */
/* ================================= */

.pdf-jpg-yukleme {
    margin-top: 25px;
}


.pdf-jpg-yukleme-kutu {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 190px;

    padding: 30px 20px;

    background: #f8fafc;

    border: 2px dashed #cbd5e1;

    border-radius: 16px;

    text-align: center;

    cursor: pointer;

    transition: .2s;
}


.pdf-jpg-yukleme-kutu:hover {
    background: #f0f7ff;
    border-color: #2563eb;
}


.pdf-jpg-yukleme-kutu > i {
    margin-bottom: 15px;

    font-size: 42px;

    color: #ef4444;
}


.pdf-jpg-yukleme-kutu strong {
    margin-bottom: 6px;

    font-size: 18px;

    color: #1e293b;
}


.pdf-jpg-yukleme-kutu span {
    font-size: 14px;

    color: #64748b;
}


.pdf-jpg-yukleme-kutu input[type="file"] {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    cursor: pointer;
}


/* ================================= */
/* DOSYA BİLGİSİ */
/* ================================= */

.pdf-jpg-dosya-bilgisi {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 20px;

    padding: 16px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 12px;
}


.pdf-jpg-dosya-bilgisi > i {
    flex-shrink: 0;

    font-size: 30px;

    color: #ef4444;
}


.pdf-jpg-dosya-bilgisi > div {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.pdf-jpg-dosya-bilgisi strong {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 15px;

    color: #1e293b;
}


.pdf-jpg-dosya-bilgisi span {
    font-size: 13px;

    color: #64748b;
}


/* ================================= */
/* KALİTE AYARI */
/* ================================= */

.pdf-jpg-ayarlar {
    margin-top: 20px;
}


.pdf-jpg-ayarlar label {
    display: block;

    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 600;

    color: #1e293b;
}


#jpgKalite {
    width: 100% !important;

    padding: 14px !important;

    border: 1px solid #dbe3ef !important;

    border-radius: 10px !important;

    background: #ffffff !important;

    color: #1e293b;

    font-size: 15px !important;

    outline: none;
}


#jpgKalite:focus {
    border-color: #2563eb !important;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.08);
}


/* ================================= */
/* DÖNÜŞTÜR BUTONU */
/* ================================= */

.pdf-jpg-card > button {
    width: 100% !important;

    margin-top: 20px !important;
}


/* ================================= */
/* DURUM */
/* ================================= */

.pdf-jpg-durum {
    margin-top: 15px;

    padding: 13px 15px;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 10px;

    font-size: 14px;

    line-height: 1.5;

    text-align: center;
}


/* ================================= */
/* SONUÇLAR */
/* ================================= */

.pdf-jpg-sonuclar {
    margin-top: 25px;

    padding: 20px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;
}


.pdf-jpg-sonuclar h3 {
    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0 0 18px;

    color: #1e293b;

    font-size: 18px;
}


.pdf-jpg-sonuclar h3 i {
    color: #2563eb;
}


/* ================================= */
/* GÖRSEL LİSTESİ */
/* ================================= */

.pdf-jpg-gorseller {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;
}


.pdf-jpg-bos-mesaj {
    grid-column: 1 / -1;

    min-height: 110px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: #94a3b8;

    text-align: center;
}


.pdf-jpg-bos-mesaj i {
    font-size: 30px;
}


/* ================================= */
/* GÖRSEL KARTI */
/* ================================= */

.pdf-jpg-gorsel-karti {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 12px;
}


.pdf-jpg-onizleme {
    width: 100%;

    aspect-ratio: 1 / 1.15;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 10px;

    box-sizing: border-box;

    background: #f1f5f9;
}


.pdf-jpg-onizleme img {
    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;

    border-radius: 6px;
}


/* ALT KISIM */

.pdf-jpg-gorsel-alt {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding: 11px 12px;
}


.pdf-jpg-gorsel-alt strong {
    color: #1e293b;

    font-size: 14px;
}


.pdf-jpg-gorsel-alt a {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 8px 10px;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 8px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    transition: .2s;
}


.pdf-jpg-gorsel-alt a:hover {
    background: #dbeafe;
}


/* ================================= */
/* MOBİL */
/* ================================= */

@media (max-width: 600px) {

    .pdf-jpg-yukleme-kutu {
        min-height: 170px;

        padding: 25px 15px;
    }


    .pdf-jpg-yukleme-kutu > i {
        font-size: 36px;
    }


    .pdf-jpg-sonuclar {
        padding: 15px;
    }


    .pdf-jpg-gorseller {
        grid-template-columns: 1fr;
    }


    .pdf-jpg-gorsel-alt {
        padding: 10px;
    }

}

/* ================================= */
/* PDF ŞİFRELEME */
/* ================================= */

.pdf-sifrele-card {
    max-width: 650px;
}


/* ================================= */
/* PDF YÜKLEME */
/* ================================= */

.pdf-sifrele-yukleme {
    margin-top: 25px;
}


.pdf-sifrele-yukleme-kutu {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 190px;

    padding: 30px 20px;

    background: #f8fafc;

    border: 2px dashed #cbd5e1;

    border-radius: 16px;

    text-align: center;

    cursor: pointer;

    transition: .2s;
}


.pdf-sifrele-yukleme-kutu:hover {
    background: #f0f7ff;
    border-color: #2563eb;
}


.pdf-sifrele-yukleme-kutu > i {
    margin-bottom: 15px;

    font-size: 42px;

    color: #ef4444;
}


.pdf-sifrele-yukleme-kutu strong {
    margin-bottom: 6px;

    font-size: 18px;

    color: #1e293b;
}


.pdf-sifrele-yukleme-kutu span {
    font-size: 14px;

    color: #64748b;
}


.pdf-sifrele-yukleme-kutu input[type="file"] {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    cursor: pointer;
}


/* ================================= */
/* DOSYA BİLGİSİ */
/* ================================= */

.pdf-sifrele-dosya-bilgisi {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 20px;

    padding: 16px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 12px;
}


.pdf-sifrele-dosya-bilgisi > i {
    flex-shrink: 0;

    font-size: 30px;

    color: #ef4444;
}


.pdf-sifrele-dosya-bilgisi > div {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.pdf-sifrele-dosya-bilgisi strong {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 15px;

    color: #1e293b;
}


.pdf-sifrele-dosya-bilgisi span {
    font-size: 13px;

    color: #64748b;
}


/* ================================= */
/* ŞİFRE FORMU */
/* ================================= */

.pdf-sifrele-form {
    margin-top: 25px;
}


.pdf-sifrele-form > label {
    display: block;

    margin: 0 0 8px;

    font-size: 14px;

    font-weight: 600;

    color: #1e293b;
}


.pdf-sifrele-input {
    display: flex;

    align-items: center;

    margin-bottom: 18px;

    background: #ffffff;

    border: 1px solid #dbe3ef;

    border-radius: 10px;

    overflow: hidden;
}


.pdf-sifrele-input:focus-within {
    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.08);
}


.pdf-sifrele-input input {
    flex: 1;

    width: 100% !important;

    padding: 14px !important;

    border: none !important;

    outline: none !important;

    background: transparent !important;

    font-size: 16px !important;

    color: #1e293b;
}


.pdf-sifrele-input button {
    width: 48px !important;

    min-width: 48px !important;

    height: 48px !important;

    margin: 0 !important;

    padding: 0 !important;

    background: transparent !important;

    color: #64748b !important;

    border: none !important;

    cursor: pointer;
}


.pdf-sifrele-input button:hover {
    color: #2563eb !important;

    background: #f8fafc !important;
}


/* ================================= */
/* ŞİFRE GÜCÜ */
/* ================================= */

.pdf-sifre-gucu {
    margin-top: 5px;

    padding: 15px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 12px;
}


.pdf-sifre-gucu-baslik {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 10px;
}


.pdf-sifre-gucu-baslik span {
    font-size: 14px;

    font-weight: 600;

    color: #64748b;
}


.pdf-sifre-gucu-baslik strong {
    font-size: 14px;

    color: #2563eb;
}


/* ŞİFRE GÜÇ ÇUBUĞU */

.pdf-sifre-cubuk {
    width: 100%;

    height: 8px;

    overflow: hidden;

    background: #484e57;

    border-radius: 20px;
}


#pdfSifreGucuCubuk {
    width: 0%;

    height: 100%;

    background: #00c42b;

    border-radius: 20px;

    transition: .25s ease;
}


/* ================================= */
/* BİLGİ KUTUSU */
/* ================================= */

.pdf-sifrele-bilgi {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-top: 18px;

    padding: 13px 15px;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 10px;

    font-size: 13px;

    line-height: 1.5;
}


.pdf-sifrele-bilgi i {
    margin-top: 2px;

    flex-shrink: 0;
}


/* ================================= */
/* BUTON */
/* ================================= */

.pdf-sifrele-card > button {
    width: 100% !important;

    margin-top: 20px !important;
}


/* ================================= */
/* DURUM */
/* ================================= */

.pdf-sifrele-durum {
    margin-top: 15px;

    padding: 13px 15px;

    background: #f8fafc;

    color: #64748b;

    border: 1px solid #e2e8f0;

    border-radius: 10px;

    font-size: 14px;

    text-align: center;

    line-height: 1.5;
}


/* ================================= */
/* MOBİL */
/* ================================= */

@media (max-width: 600px) {

    .pdf-sifrele-yukleme-kutu {
        min-height: 170px;

        padding: 25px 15px;
    }


    .pdf-sifrele-yukleme-kutu > i {
        font-size: 36px;
    }


    .pdf-sifrele-dosya-bilgisi {
        padding: 13px;
    }


    .pdf-sifrele-dosya-bilgisi strong {
        max-width: 250px;
    }

}

/* ================================= */
/* RESİM BOYUTLANDIRMA */
/* ================================= */

.resim-boyut-card {
    max-width: 650px;
}


/* ================================= */
/* RESİM YÜKLEME */
/* ================================= */

.resim-boyut-yukleme {
    margin-top: 25px;
}


.resim-boyut-yukleme-kutu {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 190px;

    padding: 30px 20px;

    background: #f8fafc;

    border: 2px dashed #cbd5e1;

    border-radius: 16px;

    text-align: center;

    cursor: pointer;

    transition: .2s;
}


.resim-boyut-yukleme-kutu:hover {
    background: #f0f7ff;
    border-color: #2563eb;
}


.resim-boyut-yukleme-kutu > i {
    margin-bottom: 15px;

    font-size: 42px;

    color: #2563eb;
}


.resim-boyut-yukleme-kutu strong {
    margin-bottom: 6px;

    font-size: 18px;

    color: #1e293b;
}


.resim-boyut-yukleme-kutu span {
    font-size: 14px;

    color: #64748b;
}


.resim-boyut-yukleme-kutu input[type="file"] {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    cursor: pointer;
}


/* ================================= */
/* DOSYA BİLGİSİ */
/* ================================= */

.resim-boyut-dosya-bilgisi {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 20px;

    padding: 16px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 12px;
}


.resim-boyut-dosya-bilgisi > i {
    flex-shrink: 0;

    font-size: 30px;

    color: #2563eb;
}


.resim-boyut-dosya-bilgisi > div {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.resim-boyut-dosya-bilgisi strong {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 15px;

    color: #1e293b;
}


.resim-boyut-dosya-bilgisi span {
    font-size: 13px;

    color: #64748b;
}


/* ================================= */
/* BOYUT AYARLARI */
/* ================================= */

.resim-boyut-ayarlari {
    display: grid;

    grid-template-columns: 1fr 35px 1fr;

    align-items: end;

    gap: 12px;

    margin-top: 25px;
}


.resim-boyut-input label {
    display: block;

    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 600;

    color: #1e293b;
}


.resim-boyut-input input {
    width: 100% !important;

    box-sizing: border-box;

    padding: 14px !important;

    border: 1px solid #dbe3ef !important;

    border-radius: 10px !important;

    background: #fff !important;

    font-size: 16px !important;

    outline: none;
}


.resim-boyut-input input:focus {
    border-color: #2563eb !important;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.08);
}


.resim-boyut-x {
    display: flex;

    align-items: center;

    justify-content: center;

    height: 46px;

    font-size: 22px;

    font-weight: 600;

    color: #94a3b8;
}


/* ================================= */
/* ORANI KORU */
/* ================================= */

.oran-koru {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 18px;

    font-size: 14px;

    color: #64748b;

    cursor: pointer;
}


.oran-koru input {
    width: 17px !important;

    height: 17px;

    margin: 0;

    cursor: pointer;
}


/* ================================= */
/* ÖNİZLEME */
/* ================================= */

.resim-boyut-onizleme {
    min-height: 180px;

    margin-top: 22px;

    padding: 15px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 12px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

    overflow: hidden;
}


.resim-boyut-onizleme > span {
    font-size: 13px;

    font-weight: 600;

    color: #94a3b8;
}


.resim-boyut-onizleme img {
    display: block;

    max-width: 100%;

    max-height: 350px;

    object-fit: contain;

    border-radius: 8px;
}


/* ================================= */
/* BUTON */
/* ================================= */

.resim-boyut-card > button {
    width: 100% !important;

    margin-top: 20px !important;
}


/* ================================= */
/* DURUM */
/* ================================= */

.resim-boyut-durum {
    margin-top: 15px;

    padding: 13px 15px;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 10px;

    font-size: 14px;

    line-height: 1.5;

    text-align: center;
}


/* ================================= */
/* MOBİL */
/* ================================= */

@media (max-width: 600px) {

    .resim-boyut-yukleme-kutu {
        min-height: 170px;

        padding: 25px 15px;
    }


    .resim-boyut-yukleme-kutu > i {
        font-size: 36px;
    }


    .resim-boyut-ayarlari {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .resim-boyut-x {
        height: auto;

        transform: rotate(90deg);

        margin: -3px 0;
    }


    .resim-boyut-onizleme {
        min-height: 150px;
    }

}

/* ================================= */
/* RESİM SIKIŞTIRMA */
/* ================================= */

.resim-sikistir-card {
    max-width: 650px;
}


/* ================================= */
/* RESİM YÜKLEME */
/* ================================= */

.resim-sikistir-yukleme {
    margin-top: 25px;
}


.resim-sikistir-yukleme-kutu {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 190px;

    padding: 30px 20px;

    background: #f8fafc;

    border: 2px dashed #cbd5e1;

    border-radius: 16px;

    text-align: center;

    cursor: pointer;

    transition: .2s;
}


.resim-sikistir-yukleme-kutu:hover {
    background: #f0f7ff;
    border-color: #2563eb;
}


.resim-sikistir-yukleme-kutu > i {
    margin-bottom: 15px;

    font-size: 42px;

    color: #2563eb;
}


.resim-sikistir-yukleme-kutu strong {
    margin-bottom: 6px;

    font-size: 18px;

    color: #1e293b;
}


.resim-sikistir-yukleme-kutu span {
    font-size: 14px;

    color: #64748b;
}


.resim-sikistir-yukleme-kutu input[type="file"] {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    cursor: pointer;
}


/* ================================= */
/* DOSYA BİLGİSİ */
/* ================================= */

.resim-sikistir-dosya-bilgisi {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 20px;

    padding: 16px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 12px;
}


.resim-sikistir-dosya-bilgisi > i {
    flex-shrink: 0;

    font-size: 30px;

    color: #2563eb;
}


.resim-sikistir-dosya-bilgisi > div {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.resim-sikistir-dosya-bilgisi strong {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 15px;

    color: #1e293b;
}


.resim-sikistir-dosya-bilgisi span {
    font-size: 13px;

    color: #64748b;
}


/* ================================= */
/* KALİTE AYARI */
/* ================================= */

.sikistir-kalite {
    margin-top: 25px;

    padding: 18px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;
}


.sikistir-kalite-baslik {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 12px;
}


.sikistir-kalite-baslik label {
    font-size: 14px;

    font-weight: 600;

    color: #1e293b;
}


.sikistir-kalite-baslik strong {
    color: #2563eb;

    font-size: 16px;
}


#sikistirKalite {
    width: 100%;

    height: 6px;

    margin: 5px 0;

    padding: 0 !important;

    background: #dbe3ef;

    border: none !important;

    border-radius: 10px;

    cursor: pointer;
}


.sikistir-kalite-etiketleri {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-top: 5px;

    font-size: 12px;

    color: #94a3b8;
}


/* ================================= */
/* BOYUT BİLGİLERİ */
/* ================================= */

.sikistir-bilgileri {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    margin-top: 20px;
}


.sikistir-bilgi-kutu {
    padding: 15px;

    background: #fff;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    text-align: center;
}


.sikistir-bilgi-kutu span {
    display: block;

    margin-bottom: 7px;

    font-size: 12px;

    font-weight: 600;

    color: #64748b;
}


.sikistir-bilgi-kutu strong {
    display: block;

    color: #2563eb;

    font-size: 16px;

    word-break: break-word;
}


/* ================================= */
/* ÖNİZLEME */
/* ================================= */

.resim-sikistir-onizleme {
    min-height: 180px;

    margin-top: 22px;

    padding: 15px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 12px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

    overflow: hidden;
}


.resim-sikistir-onizleme > span {
    font-size: 13px;

    font-weight: 600;

    color: #94a3b8;
}


.resim-sikistir-onizleme img {
    display: block;

    max-width: 100%;

    max-height: 350px;

    object-fit: contain;

    border-radius: 8px;
}


/* ================================= */
/* BUTON */
/* ================================= */

.resim-sikistir-card > button {
    width: 100% !important;

    margin-top: 20px !important;
}


/* ================================= */
/* DURUM */
/* ================================= */

.resim-sikistir-durum {
    margin-top: 15px;

    padding: 13px 15px;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 10px;

    font-size: 14px;

    line-height: 1.5;

    text-align: center;
}


/* ================================= */
/* MOBİL */
/* ================================= */

@media (max-width: 600px) {

    .resim-sikistir-yukleme-kutu {
        min-height: 170px;

        padding: 25px 15px;
    }


    .resim-sikistir-yukleme-kutu > i {
        font-size: 36px;
    }


    .sikistir-bilgileri {
        grid-template-columns: 1fr;
    }


    .resim-sikistir-onizleme {
        min-height: 150px;
    }


    .sikistir-kalite {
        padding: 15px;
    }

}

/* ================================= */
/* SIKIŞTIRMA KARŞILAŞTIRMA */
/* ================================= */

.sikistir-karsilastirma {

    display: grid;

    grid-template-columns: 1fr 40px 1fr;

    align-items: center;

    gap: 10px;

    margin-top: 20px;

    padding: 18px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

}


.sikistir-boyut {

    padding: 12px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 10px;

    text-align: center;

}


.sikistir-boyut span {

    display: block;

    margin-bottom: 7px;

    font-size: 12px;

    font-weight: 600;

    color: #64748b;

}


.sikistir-boyut strong {

    display: block;

    font-size: 18px;

    color: #2563eb;

    word-break: break-word;

}


.sikistir-ok {

    display: flex;

    align-items: center;

    justify-content: center;

    color: #94a3b8;

    font-size: 18px;

}


/* ================================= */
/* TASARRUF */
/* ================================= */

.sikistir-tasarruf {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    margin-top: 15px;

    padding: 16px;

    background: #eff6ff;

    border-radius: 12px;

    text-align: center;

}


.sikistir-tasarruf > span {

    font-size: 13px;

    font-weight: 600;

    color: #64748b;

}


.sikistir-tasarruf > strong {

    font-size: 24px;

    color: #2563eb;

}


.sikistir-tasarruf small {

    font-size: 12px;

    color: #64748b;

}


@media (max-width: 600px) {

    .sikistir-karsilastirma {

        grid-template-columns: 1fr;

    }


    .sikistir-ok {

        transform: rotate(90deg);

    }

}

/* ================================= */
/* JPG ↔ PNG DÖNÜŞTÜRÜCÜ */
/* ================================= */

.jpg-png-card {
    max-width: 650px;
}


/* ================================= */
/* RESİM YÜKLEME */
/* ================================= */

.jpg-png-yukleme {
    margin-top: 25px;
}


.jpg-png-yukleme-kutu {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 190px;

    padding: 30px 20px;

    background: #f8fafc;

    border: 2px dashed #cbd5e1;

    border-radius: 16px;

    text-align: center;

    cursor: pointer;

    transition: .2s;
}


.jpg-png-yukleme-kutu:hover {
    background: #f0f7ff;

    border-color: #2563eb;
}


.jpg-png-yukleme-kutu > i {
    margin-bottom: 15px;

    font-size: 42px;

    color: #2563eb;
}


.jpg-png-yukleme-kutu strong {
    margin-bottom: 6px;

    font-size: 18px;

    color: #1e293b;
}


.jpg-png-yukleme-kutu span {
    font-size: 14px;

    color: #64748b;
}


.jpg-png-yukleme-kutu input[type="file"] {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    cursor: pointer;
}


/* ================================= */
/* DOSYA BİLGİSİ */
/* ================================= */

.jpg-png-dosya-bilgisi {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 20px;

    padding: 16px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 12px;
}


.jpg-png-dosya-bilgisi > i {
    flex-shrink: 0;

    font-size: 30px;

    color: #2563eb;
}


.jpg-png-dosya-bilgisi > div {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.jpg-png-dosya-bilgisi strong {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 15px;

    color: #1e293b;
}


.jpg-png-dosya-bilgisi span {
    font-size: 13px;

    color: #64748b;
}


/* ================================= */
/* FORMAT DÖNÜŞÜMÜ */
/* ================================= */

.jpg-png-donusum {
    display: grid;

    grid-template-columns: 1fr 40px 1fr;

    align-items: end;

    gap: 12px;

    margin-top: 25px;
}


.jpg-png-format {
    min-width: 0;
}


.jpg-png-format label {
    display: block;

    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 600;

    color: #1e293b;
}


.jpg-png-format select {
    width: 100% !important;

    box-sizing: border-box;

    padding: 14px !important;

    border: 1px solid #dbe3ef !important;

    border-radius: 10px !important;

    background: #ffffff !important;

    color: #1e293b;

    font-size: 15px !important;

    outline: none;

    cursor: pointer;
}


.jpg-png-format select:focus {
    border-color: #2563eb !important;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.08);
}


.jpg-png-ok {
    display: flex;

    align-items: center;

    justify-content: center;

    height: 46px;

    color: #94a3b8;

    font-size: 20px;
}


/* ================================= */
/* ÖNİZLEME */
/* ================================= */

.jpg-png-onizleme {
    min-height: 200px;

    margin-top: 25px;

    padding: 15px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 12px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

    overflow: hidden;
}


.jpg-png-onizleme > span {
    font-size: 13px;

    font-weight: 600;

    color: #94a3b8;
}


.jpg-png-onizleme img {
    display: block;

    max-width: 100%;

    max-height: 350px;

    object-fit: contain;

    border-radius: 8px;
}


/* ================================= */
/* DÖNÜŞTÜR BUTONU */
/* ================================= */

.jpg-png-card > button {
    width: 100% !important;

    margin-top: 20px !important;
}


/* ================================= */
/* DURUM */
/* ================================= */

.jpg-png-durum {
    margin-top: 15px;

    padding: 13px 15px;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 10px;

    font-size: 14px;

    line-height: 1.5;

    text-align: center;
}


/* ================================= */
/* MOBİL */
/* ================================= */

@media (max-width: 600px) {

    .jpg-png-yukleme-kutu {
        min-height: 170px;

        padding: 25px 15px;
    }


    .jpg-png-yukleme-kutu > i {
        font-size: 36px;
    }


    .jpg-png-donusum {
        grid-template-columns: 1fr;
        gap: 10px;
    }


    .jpg-png-ok {
        height: auto;

        transform: rotate(90deg);

        margin: -3px 0;
    }


    .jpg-png-dosya-bilgisi {
        padding: 13px;
    }


    .jpg-png-dosya-bilgisi strong {
        max-width: 250px;
    }


    .jpg-png-onizleme {
        min-height: 160px;
    }

}

/* ================================= */
/* RESİM KIRPMA */
/* ================================= */

.resim-kirp-card {
    max-width: 650px;
}


/* ================================= */
/* RESİM YÜKLEME */
/* ================================= */

.resim-kirp-yukleme {
    margin-top: 25px;
}


.resim-kirp-yukleme-kutu {
    position: relative;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-height: 190px;

    padding: 30px 20px;

    background: #f8fafc;

    border: 2px dashed #cbd5e1;

    border-radius: 16px;

    text-align: center;

    cursor: pointer;

    transition: .2s;
}


.resim-kirp-yukleme-kutu:hover {
    background: #f0f7ff;

    border-color: #2563eb;
}


.resim-kirp-yukleme-kutu > i {
    margin-bottom: 15px;

    font-size: 42px;

    color: #2563eb;
}


.resim-kirp-yukleme-kutu strong {
    margin-bottom: 6px;

    font-size: 18px;

    color: #1e293b;
}


.resim-kirp-yukleme-kutu span {
    font-size: 14px;

    color: #64748b;
}


.resim-kirp-yukleme-kutu input[type="file"] {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    cursor: pointer;
}


/* ================================= */
/* DOSYA BİLGİSİ */
/* ================================= */

.resim-kirp-dosya-bilgisi {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 20px;

    padding: 16px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 12px;
}


.resim-kirp-dosya-bilgisi > i {
    flex-shrink: 0;

    font-size: 30px;

    color: #2563eb;
}


.resim-kirp-dosya-bilgisi > div {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.resim-kirp-dosya-bilgisi strong {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 15px;

    color: #1e293b;
}


.resim-kirp-dosya-bilgisi span {
    font-size: 13px;

    color: #64748b;
}


/* ================================= */
/* ORAN SEÇİMİ */
/* ================================= */

.kirp-oranlar {
    margin-top: 25px;
}


.kirp-oranlar > span {
    display: block;

    margin-bottom: 10px;

    font-size: 14px;

    font-weight: 600;

    color: #1e293b;
}


.kirp-oran-butonlari {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.kirp-oran-butonlari .kirp-oran {
    width: auto !important;

    min-width: 72px !important;

    margin: 0 !important;

    padding: 10px 14px !important;

    background: #f1f5f9 !important;

    color: #475569 !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 9px !important;

    font-size: 13px !important;

    font-weight: 600;

    cursor: pointer;

    transition: .2s;
}


.kirp-oran-butonlari .kirp-oran:hover {
    background: #eff6ff !important;

    color: #2563eb !important;

    border-color: #bfdbfe !important;
}


.kirp-oran-butonlari .kirp-oran.aktif {
    background: #2563eb !important;

    color: #fff !important;

    border-color: #2563eb !important;
}


/* ================================= */
/* KIRPMA ALANI */
/* ================================= */

.kirp-alan {
    position: relative;

    display: none;

    width: 100%;

    margin-top: 25px;

    padding: 15px;

    box-sizing: border-box;

    background: #0f172a;

    border-radius: 14px;

    overflow: hidden;

    text-align: center;
}


.kirp-alan > img {
    display: block;

    max-width: 100%;

    max-height: 500px;

    width: auto;

    height: auto;

    margin: auto;

    user-select: none;

    -webkit-user-drag: none;
}


/* ================================= */
/* KIRPMA SEÇİM ALANI */
/* ================================= */

.kirp-secim {
    position: absolute;

    z-index: 5;

    box-sizing: border-box;

    border: 2px solid #ffffff;

    background: rgba(255,255,255,.04);

    box-shadow:
        0 0 0 9999px rgba(0,0,0,.52);

    cursor: move;

    touch-action: none;
}


/* KÖŞE İŞARETLERİ */

.kirp-sapka {
    position: absolute;

    inset: -2px;

    pointer-events: none;
}


.kirp-sapka span {
    position: absolute;

    width: 14px;

    height: 14px;

    border: 3px solid #ffffff;

    box-sizing: border-box;
}


.kirp-sapka span:nth-child(1) {
    top: -2px;

    left: -2px;

    border-right: none;

    border-bottom: none;
}


.kirp-sapka span:nth-child(2) {
    top: -2px;

    right: -2px;

    border-left: none;

    border-bottom: none;
}


.kirp-sapka span:nth-child(3) {
    bottom: -2px;

    left: -2px;

    border-right: none;

    border-top: none;
}


.kirp-sapka span:nth-child(4) {
    bottom: -2px;

    right: -2px;

    border-left: none;

    border-top: none;
}


/* ================================= */
/* KIRPMA BİLGİSİ */
/* ================================= */

.kirp-bilgi {
    position: absolute;

    left: 50%;

    bottom: 12px;

    transform: translateX(-50%);

    z-index: 10;

    padding: 7px 11px;

    background: rgba(15,23,42,.82);

    color: #ffffff;

    border-radius: 7px;

    font-size: 12px;

    pointer-events: none;

    white-space: nowrap;
}


/* ================================= */
/* KIRPILAN ÖNİZLEME */
/* ================================= */

.kirp-onizleme {
    margin-top: 22px;

    padding: 18px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

    text-align: center;
}


.kirp-onizleme > span {
    display: block;

    margin-bottom: 12px;

    font-size: 13px;

    font-weight: 600;

    color: #94a3b8;
}


#kirpCanvas {
    display: block;

    max-width: 100%;

    max-height: 300px;

    width: auto;

    height: auto;

    margin: auto;

    border-radius: 8px;

    background: #ffffff;
}


/* ================================= */
/* BUTON */
/* ================================= */

.resim-kirp-card > button {
    width: 100% !important;

    margin-top: 20px !important;
}


/* ================================= */
/* DURUM */
/* ================================= */

.resim-kirp-durum {
    margin-top: 15px;

    padding: 13px 15px;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 10px;

    font-size: 14px;

    line-height: 1.5;

    text-align: center;
}


/* ================================= */
/* MOBİL */
/* ================================= */

@media (max-width: 600px) {

    .resim-kirp-yukleme-kutu {
        min-height: 170px;

        padding: 25px 15px;
    }


    .resim-kirp-yukleme-kutu > i {
        font-size: 36px;
    }


    .kirp-oran-butonlari {
        display: grid;

        grid-template-columns: repeat(2, 1fr);
    }


    .kirp-oran-butonlari .kirp-oran {
        width: 100% !important;
    }


    .kirp-alan {
        padding: 10px;
    }


    .kirp-bilgi {
        font-size: 11px;
    }


    #kirpCanvas {
        max-height: 250px;
    }

}

/* ================================= */
/* RESİM DÖNDÜRME */
/* ================================= */

.resim-dondur-card {
    max-width: 650px;
}


/* ================================= */
/* RESİM YÜKLEME */
/* ================================= */

.resim-dondur-yukleme {
    margin-top: 25px;
}


.resim-dondur-yukleme-kutu {
    position: relative;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-height: 190px;

    padding: 30px 20px;

    background: #f8fafc;

    border: 2px dashed #cbd5e1;

    border-radius: 16px;

    text-align: center;

    cursor: pointer;

    transition: .2s;
}


.resim-dondur-yukleme-kutu:hover {
    background: #f0f7ff;
    border-color: #2563eb;
}


.resim-dondur-yukleme-kutu > i {
    margin-bottom: 15px;

    font-size: 42px;

    color: #2563eb;
}


.resim-dondur-yukleme-kutu strong {
    margin-bottom: 6px;

    font-size: 18px;

    color: #1e293b;
}


.resim-dondur-yukleme-kutu span {
    font-size: 14px;

    color: #64748b;
}


.resim-dondur-yukleme-kutu input[type="file"] {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    cursor: pointer;
}


/* ================================= */
/* DOSYA BİLGİSİ */
/* ================================= */

.resim-dondur-dosya-bilgisi {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 20px;

    padding: 16px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 12px;
}


.resim-dondur-dosya-bilgisi > i {
    flex-shrink: 0;

    font-size: 30px;

    color: #2563eb;
}


.resim-dondur-dosya-bilgisi > div {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.resim-dondur-dosya-bilgisi strong {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 15px;

    color: #1e293b;
}


.resim-dondur-dosya-bilgisi span {
    font-size: 13px;

    color: #64748b;
}


/* ================================= */
/* DÖNDÜRME KONTROLLERİ */
/* ================================= */

.dondur-kontroller {
    margin-top: 25px;
}


.dondur-kontroller > span {
    display: block;

    margin-bottom: 10px;

    font-size: 14px;

    font-weight: 600;

    color: #1e293b;
}


.dondur-butonlari {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;
}


.dondur-butonlari button {
    width: 100% !important;

    min-height: 46px !important;

    margin: 0 !important;

    padding: 10px 8px !important;

    background: #f1f5f9 !important;

    color: #475569 !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 10px !important;

    font-size: 13px !important;

    font-weight: 600;

    cursor: pointer;

    transition: .2s;
}


.dondur-butonlari button:hover {
    background: #eff6ff !important;

    color: #2563eb !important;

    border-color: #bfdbfe !important;
}


.dondur-butonlari button:active {
    transform: scale(.97);
}


/* SEÇİLEN AÇI */

.dondur-acı {
    margin-top: 12px;

    padding: 11px 13px;

    background: #eff6ff;

    color: #64748b;

    border-radius: 9px;

    font-size: 13px;

    text-align: center;
}


.dondur-acı strong {
    color: #2563eb;

    font-size: 15px;
}


/* ================================= */
/* ÖNİZLEME */
/* ================================= */

.resim-dondur-onizleme {
    margin-top: 22px;

    padding: 18px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

    text-align: center;
}


.resim-dondur-onizleme > span {
    display: block;

    margin-bottom: 14px;

    font-size: 13px;

    font-weight: 600;

    color: #94a3b8;
}


.dondur-onizleme-alan {
    min-height: 250px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    padding: 20px;

    box-sizing: border-box;

    background: #ffffff;

    border-radius: 10px;
}


.dondur-onizleme-alan img {
    display: block;

    max-width: 100%;

    max-height: 350px;

    object-fit: contain;

    border-radius: 8px;

    transition: transform .3s ease;
}


/* ================================= */
/* BUTON */
/* ================================= */

.resim-dondur-card > button {
    width: 100% !important;

    margin-top: 20px !important;
}


/* ================================= */
/* DURUM */
/* ================================= */

.resim-dondur-durum {
    margin-top: 15px;

    padding: 13px 15px;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 10px;

    font-size: 14px;

    line-height: 1.5;

    text-align: center;
}


/* ================================= */
/* MOBİL */
/* ================================= */

@media (max-width: 600px) {

    .resim-dondur-yukleme-kutu {
        min-height: 170px;

        padding: 25px 15px;
    }


    .resim-dondur-yukleme-kutu > i {
        font-size: 36px;
    }


    .dondur-butonlari {
        grid-template-columns: 1fr;
    }


    .dondur-onizleme-alan {
        min-height: 200px;

        padding: 15px;
    }


    .dondur-onizleme-alan img {
        max-height: 280px;
    }

}

/* =================================
   QR KOD OLUŞTURUCU - ÖZEL STİLLER
   Bu dosya sadece qr-olustur.html sayfasına özeldir.
   ================================= */

/* ================================= */
/* QR KOD OLUŞTURUCU */
/* ================================= */

.qr-olustur-card {
    max-width: 650px;
}


/* ================================= */
/* QR TÜRÜ */
/* ================================= */

.qr-tur {
    margin-top: 25px;
}


.qr-tur label,
.qr-input-alani label,
.qr-wifi-alani label {
    display: block;

    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 600;

    color: #1e293b;
}


.qr-tur select {
    width: 100% !important;

    padding: 14px !important;

    box-sizing: border-box;

    border: 1px solid #dbe3ef !important;

    border-radius: 10px !important;

    background: #ffffff !important;

    color: #1e293b;

    font-size: 15px !important;

    outline: none;

    cursor: pointer;
}


.qr-tur select:focus {
    border-color: #2563eb !important;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.08);
}


/* ================================= */
/* INPUT ALANLARI */
/* ================================= */

.qr-input-alani {
    margin-top: 20px;
}


.qr-input-alani input,
.qr-input-alani textarea,
.qr-wifi-alani input,
.qr-wifi-alani select {
    width: 100% !important;

    box-sizing: border-box;

    padding: 14px !important;

    border: 1px solid #dbe3ef !important;

    border-radius: 10px !important;

    background: #ffffff !important;

    color: #1e293b;

    font-size: 15px !important;

    outline: none;

    resize: vertical;
}


.qr-input-alani input:focus,
.qr-input-alani textarea:focus,
.qr-wifi-alani input:focus,
.qr-wifi-alani select:focus {
    border-color: #2563eb !important;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.08);
}


.qr-input-alani textarea {
    min-height: 110px;

    line-height: 1.5;
}


/* ================================= */
/* WIFI */
/* ================================= */

.qr-wifi-alani {
    margin-top: 20px;
}


.qr-wifi-alani label:not(:first-child) {
    margin-top: 16px;
}


/* ================================= */
/* OLUŞTUR BUTONU */
/* ================================= */

.qr-olustur-card > button {
    width: 100% !important;

    margin-top: 22px !important;
}


/* ================================= */
/* QR SONUÇ */
/* ================================= */

.qr-sonuc {
    margin-top: 28px;

    padding: 20px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;
}


.qr-sonuc h3 {
    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0 0 18px;

    color: #1e293b;

    font-size: 18px;
}


.qr-sonuc h3 i {
    color: #2563eb;
}


/* ================================= */
/* QR KOD ALANI */
/* ================================= */

.qr-kod-alani {
    min-height: 280px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 12px;
}


.qr-kod-alani canvas,
.qr-kod-alani img {
    display: block;

    width: 240px;

    height: 240px;

    max-width: 100%;

    max-height: 240px;
}


/* ================================= */
/* BOŞ MESAJ */
/* ================================= */

.qr-bos-mesaj {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 9px;

    color: #94a3b8;

    text-align: center;
}


.qr-bos-mesaj i {
    font-size: 42px;

    color: #cbd5e1;
}


.qr-bos-mesaj span {
    font-size: 14px;
}


/* ================================= */
/* İNDİR BUTONU */
/* ================================= */

.qr-indir-btn {
    width: 100% !important;

    margin-top: 15px !important;

    background: #eff6ff !important;

    color: #2563eb !important;

    border: 1px solid #dbeafe !important;
}


.qr-indir-btn:hover {
    background: #dbeafe !important;
}


.qr-indir-btn:disabled {
    opacity: .55;

    cursor: not-allowed;
}


/* ================================= */
/* MOBİL */
/* ================================= */

@media (max-width: 600px) {

    .qr-sonuc {
        padding: 15px;
    }


    .qr-kod-alani {
        min-height: 250px;

        padding: 15px;
    }


    .qr-kod-alani canvas,
    .qr-kod-alani img {
        width: 210px;

        height: 210px;
    }

}

/* ================================= *//* ================================= */
/* TELEFON GİRİŞİ */
/* ================================= */

.qr-telefon {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 52px;

    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #fff;
    overflow: visible;
    position: relative;
}


.qr-telefon:focus-within {
    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, .08);
}


.qr-telefon input[type="tel"] {
    flex: 1;
    min-width: 0;

    width: 100% !important;
    height: 100%;

    box-sizing: border-box;
    display: block;

    margin: 0 !important;
    padding: 0 14px !important;

    border: none !important;
    border-radius: 0 10px 10px 0 !important;
    outline: none !important;

    background: transparent !important;

    font-size: 15px !important;
    line-height: 52px !important;
    color: #1e293b;
}


.qr-telefon-bilgi {
    display: block;

    margin-top: 7px;

    color: #94a3b8;

    font-size: 12px;
}


/* ================================= */
/* ÜLKE SEÇİCİ (BAYRAKLI) */
/* ================================= */
/* Emoji bayraklar yerine gerçek görsel kullanılır; böylece
   Windows gibi bazı sistemlerde "TR", "US" gibi harf kodu
   göstermek yerine her zaman gerçek bayrak görünür. */

.qr-ulke-secici {
    position: relative;
    flex: 0 0 auto;
}


.qr-ulke-buton {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;

    width: auto !important;
    height: 100%;

    margin: 0 !important;
    padding: 0 10px !important;

    border: none !important;
    border-right: 1px solid #dbe3ef !important;
    border-radius: 10px 0 0 10px !important;

    background: #fff !important;
    color: #1e293b !important;

    font-size: 14px !important;
    font-weight: 600;
    font-family: inherit;

    cursor: pointer;
    outline: none;

    transition: background .2s;
}


.qr-ulke-buton:hover {
    background: #f8fafc !important;
}


.qr-ulke-secici.acik .qr-ulke-buton {
    background: #eff6ff !important;
}


.qr-ulke-bayrak {
    width: 22px;
    height: 16px;

    object-fit: cover;

    border-radius: 3px;

    box-shadow: 0 0 0 1px rgba(0,0,0,.08);

    flex-shrink: 0;
    display: block;
    background: #e2e8f0;
}


.qr-ulke-buton i {
    font-size: 10px;
    color: #94a3b8;

    transition: transform .2s;
}


.qr-ulke-secici.acik .qr-ulke-buton i {
    transform: rotate(180deg);
}


.qr-ulke-liste {
    display: none;

    position: absolute;
    top: calc(100% + 8px);
    left: 0;

    width: 290px;
    max-width: 85vw;

    background: #fff;

    border: 1px solid #e2e8f0;
    border-radius: 12px;

    box-shadow: 0 15px 35px rgba(15, 23, 42, .15);

    z-index: 50;

    overflow: hidden;
}


.qr-ulke-secici.acik .qr-ulke-liste {
    display: block;
}


.qr-ulke-arama {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 12px;

    border-bottom: 1px solid #eef2f7;
}


.qr-ulke-arama i {
    color: #94a3b8;
    font-size: 13px;
}


.qr-ulke-arama input {
    flex: 1 !important;
    min-width: 0;

    width: 100% !important;
    padding: 0 !important;

    border: none !important;
    border-radius: 0 !important;
    outline: none !important;

    font-size: 14px !important;
    color: #1e293b;

    background: transparent !important;
}


.qr-ulke-secenekler {
    max-height: 260px;
    overflow-y: auto;
}


.qr-ulke-secenek {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100% !important;

    margin: 0 !important;
    padding: 10px 12px !important;

    border: none !important;
    border-radius: 0 !important;
    background: none !important;

    text-align: left;
    cursor: pointer;

    font-family: inherit;
    font-size: 14px !important;
    color: #1e293b !important;

    transition: background .15s;
}


.qr-ulke-secenek:hover,
.qr-ulke-secenek:focus {
    background: #eff6ff !important;
}


.qr-ulke-bayrak-kucuk {
    width: 20px;
    height: 15px;

    object-fit: cover;
    border-radius: 3px;

    box-shadow: 0 0 0 1px rgba(0,0,0,.08);

    flex-shrink: 0;
    background: #e2e8f0;
}


.qr-ulke-ad {
    flex: 1;
    min-width: 0;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.qr-ulke-dial {
    flex-shrink: 0;
    color: #64748b;
    font-size: 13px;
}


.qr-ulke-bos {
    padding: 18px 12px;

    text-align: center;
    color: #94a3b8;
    font-size: 13px;
}


@media (max-width: 500px) {

    .qr-ulke-buton {
        padding: 0 8px;
        gap: 5px;
        font-size: 13px;
    }

    .qr-ulke-liste {
        width: 260px;
    }

    .qr-telefon input[type="tel"] {
        font-size: 14px !important;
        padding: 0 10px !important;
        line-height: 52px !important;
    }

}

/* ================================= */
/* QR KOD OKUYUCU */
/* ================================= */

.qr-okuyucu-card {
    max-width: 650px;
}


/* ================================= */
/* QR YÜKLEME */
/* ================================= */

.qr-okuyucu-yukleme {
    margin-top: 25px;
}


.qr-okuyucu-yukleme-kutu {
    position: relative;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-height: 190px;

    padding: 30px 20px;

    background: #f8fafc;

    border: 2px dashed #cbd5e1;

    border-radius: 16px;

    text-align: center;

    cursor: pointer;

    transition: .2s;
}


.qr-okuyucu-yukleme-kutu:hover {
    background: #f0f7ff;

    border-color: #2563eb;
}


.qr-okuyucu-yukleme-kutu > i {
    margin-bottom: 15px;

    font-size: 42px;

    color: #2563eb;
}


.qr-okuyucu-yukleme-kutu strong {
    margin-bottom: 6px;

    font-size: 18px;

    color: #1e293b;
}


.qr-okuyucu-yukleme-kutu span {
    font-size: 14px;

    color: #64748b;
}


.qr-okuyucu-yukleme-kutu input[type="file"] {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    cursor: pointer;
}


/* ================================= */
/* ÖNİZLEME */
/* ================================= */

.qr-okuyucu-onizleme {
    min-height: 250px;

    margin-top: 22px;

    padding: 18px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 12px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

    overflow: hidden;
}


.qr-okuyucu-onizleme > span {
    font-size: 13px;

    font-weight: 600;

    color: #94a3b8;
}


.qr-okuyucu-onizleme img {
    display: block;

    max-width: 100%;

    max-height: 330px;

    width: auto;

    height: auto;

    object-fit: contain;

    border-radius: 8px;
}


/* ================================= */
/* DURUM */
/* ================================= */

.qr-okuyucu-durum {
    margin-top: 15px;

    padding: 13px 15px;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 10px;

    font-size: 14px;

    line-height: 1.5;

    text-align: center;
}


/* ================================= */
/* SONUÇ */
/* ================================= */

.qr-okuyucu-sonuc {
    margin-top: 25px;

    padding: 20px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;
}


.qr-okuyucu-sonuc h3 {
    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0 0 15px;

    color: #1e293b;

    font-size: 18px;
}


.qr-okuyucu-sonuc h3 i {
    color: #2563eb;
}


/* ================================= */
/* SONUÇ KUTUSU */
/* ================================= */

.qr-okuyucu-soutuc-kutu {
    display: flex;

    align-items: stretch;

    gap: 10px;

    width: 100%;
}


.qr-okuyucu-soutuc-kutu textarea {
    flex: 1;

    min-width: 0;

    min-height: 120px;

    box-sizing: border-box;

    padding: 14px;

    border: 1px solid #dbe3ef;

    border-radius: 10px;

    background: #ffffff;

    color: #1e293b;

    font-size: 14px;

    line-height: 1.5;

    outline: none;

    resize: vertical;
}


.qr-okuyucu-soutuc-kutu textarea:focus {
    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.08);
}


/* ================================= */
/* KOPYALA */
/* ================================= */

.qr-okuyucu-soutuc-kutu > button {
    width: 110px !important;

    min-width: 110px !important;

    margin: 0 !important;

    padding: 10px !important;

    align-self: flex-end;

    background: #eff6ff !important;

    color: #2563eb !important;

    border: 1px solid #dbeafe !important;

    border-radius: 10px !important;

    cursor: pointer;

    font-size: 13px !important;

    font-weight: 600;
}


.qr-okuyucu-soutuc-kutu > button:hover {
    background: #dbeafe !important;
}


.qr-okuyucu-soutuc-kutu > button:disabled {
    opacity: .55;

    cursor: not-allowed;
}


/* ================================= */
/* MOBİL */
/* ================================= */

@media (max-width: 600px) {

    .qr-okuyucu-yukleme-kutu {
        min-height: 170px;

        padding: 25px 15px;
    }


    .qr-okuyucu-yukleme-kutu > i {
        font-size: 36px;
    }


    .qr-okuyucu-onizleme {
        min-height: 200px;

        padding: 15px;
    }


    .qr-okuyucu-onizleme img {
        max-height: 260px;
    }


    .qr-okuyucu-sonuc {
        padding: 15px;
    }


    .qr-okuyucu-soutuc-kutu {
        flex-direction: column;
    }


    .qr-okuyucu-soutuc-kutu > button {
        width: 100% !important;

        min-width: 100% !important;

        align-self: stretch;
    }

}

/* ================================= */
/* QR SONUÇ BUTONLARI */
/* ================================= */

.qr-sonuc-butonlari {
    display: flex;

    flex-direction: column;

    gap: 8px;

    width: 110px;

    flex-shrink: 0;
}


.qr-sonuc-butonlari a,
.qr-sonuc-butonlari button {

    width: 100% !important;

    min-height: 42px !important;

    box-sizing: border-box;

    margin: 0 !important;

    padding: 10px 8px !important;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    border-radius: 9px !important;

    font-size: 12px !important;

    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

}


/* Siteyi Aç */

.qr-sonuc-butonlari a {

    background: #2563eb;

    color: #fff;

}


.qr-sonuc-butonlari a:hover {

    background: #1d4ed8;

}


/* Kopyala */

.qr-sonuc-butonlari button {

    background: #eff6ff !important;

    color: #2563eb !important;

    border: 1px solid #dbeafe !important;

}


.qr-sonuc-butonlari button:hover {

    background: #dbeafe !important;

}


/* MOBİL */

@media (max-width: 600px) {

    .qr-sonuc-butonlari {

        width: 100%;

    }

}

/* ================================= */
/* BİRİM DÖNÜŞTÜRÜCÜ */
/* ================================= */

.birim-donusturucu-card {
    max-width: 650px;
}


/* ================================= */
/* DÖNÜŞÜM TÜRÜ */
/* ================================= */

.birim-tur {
    margin-top: 25px;
}


.birim-tur label,
.birim-giris label {
    display: block;

    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 600;

    color: #1e293b;
}


.birim-tur select,
.birim-giris select,
.birim-giris input {
    width: 100% !important;

    box-sizing: border-box;

    padding: 14px !important;

    border: 1px solid #dbe3ef !important;

    border-radius: 10px !important;

    background: #ffffff !important;

    color: #1e293b;

    font-size: 15px !important;

    outline: none;

    cursor: pointer;
}


.birim-giris input {
    cursor: text;
}


.birim-tur select:focus,
.birim-giris select:focus,
.birim-giris input:focus {
    border-color: #2563eb !important;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.08);
}


/* ================================= */
/* DÖNÜŞÜM ALANI */
/* ================================= */

.birim-donusum {
    display: grid;

    grid-template-columns: 1fr 45px 1fr;

    align-items: end;

    gap: 12px;

    margin-top: 25px;
}


.birim-giris {
    min-width: 0;
}


.birim-giris input {
    margin-bottom: 15px;
}


.birim-giris label + input {
    margin-bottom: 15px;
}


/* ================================= */
/* OK */
/* ================================= */

.birim-ok {
    display: flex;

    align-items: center;

    justify-content: center;

    height: 46px;

    color: #94a3b8;

    font-size: 20px;
}


/* ================================= */
/* DÖNÜŞTÜR BUTONU */
/* ================================= */

.birim-donusturucu-card > button {
    width: 100% !important;

    margin-top: 22px !important;
}


/* ================================= */
/* SONUÇ */
/* ================================= */

.birim-sonuc {
    margin-top: 25px;

    padding: 20px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;
}


.birim-sonuc h3 {
    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0 0 15px;

    color: #1e293b;

    font-size: 18px;
}


.birim-sonuc h3 i {
    color: #2563eb;
}


/* ================================= */
/* SONUÇ KUTUSU */
/* ================================= */

.birim-sonuc-kutu {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 15px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 10px;
}


#birimSonucMetin {
    min-width: 0;

    color: #1e293b;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.5;

    word-break: break-word;
}


/* ================================= */
/* KOPYALA */
/* ================================= */

.birim-sonuc-kutu button {
    width: 95px !important;

    min-width: 95px !important;

    height: 40px !important;

    margin: 0 !important;

    padding: 0 10px !important;

    background: #eff6ff !important;

    color: #2563eb !important;

    border: 1px solid #dbeafe !important;

    border-radius: 8px !important;

    font-size: 12px !important;

    font-weight: 600;

    cursor: pointer;

    flex-shrink: 0;
}


.birim-sonuc-kutu button:hover {
    background: #dbeafe !important;
}


.birim-sonuc-kutu button:disabled {
    opacity: .55;

    cursor: not-allowed;
}


/* ================================= */
/* DURUM */
/* ================================= */

.birim-durum {
    margin-top: 15px;

    padding: 13px 15px;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 10px;

    font-size: 14px;

    line-height: 1.5;

    text-align: center;
}


/* ================================= */
/* MOBİL */
/* ================================= */

@media (max-width: 600px) {

    .birim-donusum {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .birim-ok {
        height: auto;

        transform: rotate(90deg);

        margin: -2px 0;
    }


    .birim-sonuc {
        padding: 15px;
    }


    .birim-sonuc-kutu {
        flex-direction: column;

        align-items: stretch;
    }


    #birimSonucMetin {
        text-align: center;
    }


    .birim-sonuc-kutu button {
        width: 100% !important;

        min-width: 100% !important;
    }

}

/* =================================
   PARA BİRİMİ DÖNÜŞTÜRÜCÜ - ÖZEL STİLLER
   Bu dosya sadece para-birimi-donusturucu.html sayfasına özeldir.
   ================================= */

/* ================================= */
/* PARA BİRİMİ DÖNÜŞTÜRÜCÜ */
/* ================================= */

.para-donusturucu-card {
    max-width: 650px;
}


/* ================================= */
/* MİKTAR */
/* ================================= */

.para-deger {
    margin-top: 25px;
}


.para-deger label,
.para-kutu label {
    display: block;

    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 600;

    color: #1e293b;
}


.para-deger input {
    width: 100% !important;

    box-sizing: border-box;

    padding: 14px !important;

    border: 1px solid #dbe3ef !important;

    border-radius: 10px !important;

    background: #ffffff !important;

    color: #1e293b;

    font-size: 16px !important;

    outline: none;
}


.para-deger input:focus {
    border-color: #2563eb !important;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.08);
}


/* ================================= */
/* PARA DÖNÜŞÜM ALANI */
/* ================================= */

.para-donusum {
    display: grid;

    grid-template-columns: 1fr 45px 1fr;

    align-items: end;

    gap: 12px;

    margin-top: 25px;
}


.para-kutu {
    min-width: 0;
}


/* ================================= */
/* PARA BİRİMİ SEÇİCİ (ARANABİLİR) */
/* ================================= */

.para-secici {
    position: relative;
    width: 100%;
}


.para-secici-buton {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    width: 100% !important;
    height: 50px;

    margin: 0 !important;
    padding: 0 14px !important;
    box-sizing: border-box;

    border: 1px solid #dbe3ef !important;
    border-radius: 10px !important;

    background: #ffffff !important;
    color: #1e293b !important;

    font-size: 14px !important;
    font-weight: 500;
    font-family: inherit;
    text-align: left;

    cursor: pointer;
    outline: none;

    transition: border-color .2s, box-shadow .2s;
}


.para-secici-buton span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.para-secici-buton i {
    flex-shrink: 0;
    font-size: 11px;
    color: #94a3b8;

    transition: transform .2s;
}


.para-secici-buton:hover {
    border-color: #c7d2e3 !important;
}


.para-secici.acik .para-secici-buton {
    border-color: #2563eb !important;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.08);
}


.para-secici.acik .para-secici-buton i {
    transform: rotate(180deg);
}


.para-secici-liste {
    display: none;

    position: absolute;
    top: calc(100% + 8px);
    left: 0;

    width: 100%;
    min-width: 260px;

    background: #fff;

    border: 1px solid #e2e8f0;
    border-radius: 12px;

    box-shadow: 0 15px 35px rgba(15, 23, 42, .15);

    z-index: 50;

    overflow: hidden;
}


.para-secici.acik .para-secici-liste {
    display: block;
}


.para-secici-arama {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 12px;

    border-bottom: 1px solid #eef2f7;
}


.para-secici-arama i {
    color: #94a3b8;
    font-size: 13px;
}


.para-secici-arama input {
    flex: 1 !important;
    min-width: 0;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    border-radius: 0 !important;
    outline: none !important;

    font-size: 14px !important;
    color: #1e293b !important;

    background: transparent !important;
}


.para-secici-secenekler {
    max-height: 260px;
    overflow-y: auto;
}


.para-secici-secenek {
    display: block !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 10px 14px !important;
    box-sizing: border-box;

    border: none !important;
    border-radius: 0 !important;
    background: none !important;

    text-align: left;
    cursor: pointer;

    font-family: inherit;
    font-size: 14px !important;
    color: #1e293b !important;

    transition: background .15s;
}


.para-secici-secenek:hover,
.para-secici-secenek:focus {
    background: #eff6ff !important;
}


.para-secici-bos {
    padding: 18px 14px;

    text-align: center;
    color: #94a3b8;
    font-size: 13px;
}


/* ================================= */
/* OK */
/* ================================= */

.para-ok {
    display: flex;

    align-items: center;

    justify-content: center;

    height: 46px;

    color: #94a3b8;

    font-size: 20px;
}


/* ================================= */
/* DÖNÜŞTÜR BUTONU */
/* ================================= */

.para-donusturucu-card > button {
    width: 100% !important;

    margin-top: 22px !important;
}


/* ================================= */
/* SONUÇ */
/* ================================= */

.para-sonuc {
    margin-top: 25px;

    padding: 20px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;
}


.para-sonuc h3 {
    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0 0 15px;

    color: #1e293b;

    font-size: 18px;
}


.para-sonuc h3 i {
    color: #2563eb;
}


/* ================================= */
/* SONUÇ KUTUSU */
/* ================================= */

.para-sonuc-kutu {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 15px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 10px;
}


.para-sonuc-kutu > span {
    font-size: 13px;

    font-weight: 600;

    color: #64748b;
}


.para-sonuc-kutu > strong {
    flex: 1;

    min-width: 0;

    color: #2563eb;

    font-size: 20px;

    font-weight: 700;

    word-break: break-word;
}


/* ================================= */
/* KOPYALA */
/* ================================= */

.para-sonuc-kutu button {
    width: 95px !important;

    min-width: 95px !important;

    height: 40px !important;

    margin: 0 !important;

    padding: 0 10px !important;

    background: #eff6ff !important;

    color: #2563eb !important;

    border: 1px solid #dbeafe !important;

    border-radius: 8px !important;

    font-size: 12px !important;

    font-weight: 600;

    cursor: pointer;

    flex-shrink: 0;
}


.para-sonuc-kutu button:hover {
    background: #dbeafe !important;
}


.para-sonuc-kutu button:disabled {
    opacity: .55;

    cursor: not-allowed;
}


/* ================================= */
/* KUR BİLGİSİ */
/* ================================= */

.para-kur-bilgisi {
    margin-top: 12px;

    padding: 11px 13px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 9px;

    color: #64748b;

    font-size: 13px;

    text-align: center;
}


/* ================================= */
/* DURUM */
/* ================================= */

.para-durum {
    margin-top: 15px;

    padding: 13px 15px;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 10px;

    font-size: 14px;

    line-height: 1.5;

    text-align: center;
}


/* ================================= */
/* MOBİL */
/* ================================= */

@media (max-width: 600px) {

    .para-donusum {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .para-ok {
        height: auto;

        transform: rotate(90deg);

        margin: -2px 0;
    }


    .para-sonuc {
        padding: 15px;
    }


    .para-sonuc-kutu {
        flex-wrap: wrap;
    }


    .para-sonuc-kutu > span {
        width: 100%;
    }


    .para-sonuc-kutu > strong {
        width: 100%;

        text-align: center;
    }


    .para-sonuc-kutu button {
        width: 100% !important;

        min-width: 100% !important;
    }

}

/* ================================= */
/* SAYI SİSTEMLERİ DÖNÜŞTÜRÜCÜ */
/* ================================= */

.sayi-sistemleri-card {
    max-width: 650px;
}


/* ================================= */
/* SAYI GİRİŞİ */
/* ================================= */

.sayi-giris {
    margin-top: 25px;
}


.sayi-giris label,
.sayi-kaynak label {
    display: block;

    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 600;

    color: #1e293b;
}


.sayi-giris input,
.sayi-kaynak select {
    width: 100% !important;

    box-sizing: border-box;

    padding: 14px !important;

    border: 1px solid #dbe3ef !important;

    border-radius: 10px !important;

    background: #ffffff !important;

    color: #1e293b;

    font-size: 16px !important;

    outline: none;
}


.sayi-giris input:focus,
.sayi-kaynak select:focus {
    border-color: #2563eb !important;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.08);
}


/* ================================= */
/* KAYNAK SİSTEM */
/* ================================= */

.sayi-kaynak {
    margin-top: 20px;
}


.sayi-kaynak select {
    cursor: pointer;
}


/* ================================= */
/* DÖNÜŞTÜR BUTONU */
/* ================================= */

.sayi-sistemleri-card > button {
    width: 100% !important;

    margin-top: 22px !important;
}


/* ================================= */
/* SONUÇLAR */
/* ================================= */

.sayi-sonuclar {
    margin-top: 25px;

    padding: 20px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;
}


.sayi-sonuclar h3 {
    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0 0 15px;

    color: #1e293b;

    font-size: 18px;
}


.sayi-sonuclar h3 i {
    color: #2563eb;
}


/* ================================= */
/* SONUÇ KUTULARI */
/* ================================= */

.sayi-sonuc-kutu {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 14px 15px;

    margin-top: 10px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 10px;
}


.sayi-sonuc-kutu:first-of-type {
    margin-top: 0;
}


.sayi-sonuc-kutu > div {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 5px;
}


.sayi-sonuc-kutu span {
    font-size: 12px;

    font-weight: 600;

    color: #64748b;
}


.sayi-sonuc-kutu strong {
    font-size: 17px;

    font-weight: 700;

    color: #1e293b;

    word-break: break-all;

    letter-spacing: .3px;
}


/* ================================= */
/* KOPYALA BUTONU */
/* ================================= */

.sayi-sonuc-kutu button {
    width: 95px !important;

    min-width: 95px !important;

    height: 38px !important;

    margin: 0 !important;

    padding: 0 8px !important;

    background: #eff6ff !important;

    color: #2563eb !important;

    border: 1px solid #dbeafe !important;

    border-radius: 8px !important;

    font-size: 12px !important;

    font-weight: 600;

    cursor: pointer;

    flex-shrink: 0;
}


.sayi-sonuc-kutu button:hover {
    background: #dbeafe !important;
}


.sayi-sonuc-kutu button:disabled {
    opacity: .55;

    cursor: not-allowed;
}


/* ================================= */
/* DURUM */
/* ================================= */

.sayi-durum {
    margin-top: 15px;

    padding: 13px 15px;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 10px;

    font-size: 14px;

    line-height: 1.5;

    text-align: center;
}


/* ================================= */
/* MOBİL */
/* ================================= */

@media (max-width: 600px) {

    .sayi-sonuclar {
        padding: 15px;
    }


    .sayi-sonuc-kutu {
        align-items: flex-start;

        flex-direction: column;
    }


    .sayi-sonuc-kutu > div {
        width: 100%;
    }


    .sayi-sonuc-kutu button {
        width: 100% !important;

        min-width: 100% !important;
    }

}

/* ================================= */
/* METİN DÖNÜŞTÜRÜCÜ */
/* ================================= */

.metin-donusturucu-card {
    max-width: 650px;
}


/* ================================= */
/* METİN GİRİŞİ */
/* ================================= */

.metin-giris {
    margin-top: 25px;
}


.metin-giris label {
    display: block;

    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 600;

    color: #1e293b;
}


.metin-giris textarea,
.metin-sonuc textarea {
    width: 100% !important;

    box-sizing: border-box;

    min-height: 180px;

    padding: 14px !important;

    border: 1px solid #dbe3ef !important;

    border-radius: 12px !important;

    background: #ffffff !important;

    color: #1e293b;

    font-size: 15px !important;

    line-height: 1.6;

    outline: none;

    resize: vertical;
}


.metin-giris textarea:focus,
.metin-sonuc textarea:focus {
    border-color: #2563eb !important;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.08);
}


/* ================================= */
/* BUTONLAR */
/* ================================= */

.metin-butonlari {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 10px;

    margin-top: 18px;
}


.metin-butonlari button {
    width: 100% !important;

    min-height: 44px !important;

    margin: 0 !important;

    padding: 10px 12px !important;

    background: #f1f5f9 !important;

    color: #475569 !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 10px !important;

    font-size: 13px !important;

    font-weight: 600;

    cursor: pointer;

    transition: .2s;
}


.metin-butonlari button:hover {
    background: #eff6ff !important;

    color: #2563eb !important;

    border-color: #bfdbfe !important;
}


.metin-butonlari button:active {
    transform: scale(.98);
}


/* ================================= */
/* İSTATİSTİKLER */
/* ================================= */

.metin-istatistik {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    margin-top: 20px;
}


.metin-istatistik-kutu {
    padding: 14px 10px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 10px;

    text-align: center;
}


.metin-istatistik-kutu span {
    display: block;

    margin-bottom: 5px;

    font-size: 12px;

    font-weight: 600;

    color: #64748b;
}


.metin-istatistik-kutu strong {
    display: block;

    font-size: 18px;

    color: #2563eb;
}


/* ================================= */
/* AYIRICI */
/* ================================= */

.metin-sonuc {
    margin-top: 25px;

    padding: 20px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;
}


/* ================================= */
/* SONUÇ BAŞLIK */
/* ================================= */

.metin-sonuc-baslik {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 15px;
}


.metin-sonuc-baslik h3 {
    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0;

    color: #1e293b;

    font-size: 18px;
}


.metin-sonuc-baslik h3 i {
    color: #2563eb;
}


/* ================================= */
/* KOPYALA */
/* ================================= */

.metin-sonuc-baslik button {
    width: 95px !important;

    min-width: 95px !important;

    height: 38px !important;

    margin: 0 !important;

    padding: 0 8px !important;

    background: #eff6ff !important;

    color: #2563eb !important;

    border: 1px solid #dbeafe !important;

    border-radius: 8px !important;

    font-size: 12px !important;

    font-weight: 600;

    cursor: pointer;
}


.metin-sonuc-baslik button:hover {
    background: #dbeafe !important;
}


.metin-sonuc-baslik button:disabled {
    opacity: .55;

    cursor: not-allowed;
}


/* ================================= */
/* SONUÇ METNİ */
/* ================================= */

.metin-sonuc textarea {
    min-height: 180px;

    background: #ffffff;
}


/* ================================= */
/* DURUM */
/* ================================= */

.metin-durum {
    margin-top: 15px;

    padding: 13px 15px;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 10px;

    font-size: 14px;

    line-height: 1.5;

    text-align: center;
}


/* ================================= */
/* MOBİL */
/* ================================= */

@media (max-width: 600px) {

    .metin-butonlari {
        grid-template-columns: 1fr;
    }


    .metin-istatistik {
        grid-template-columns: repeat(3, 1fr);

        gap: 7px;
    }


    .metin-istatistik-kutu {
        padding: 12px 5px;
    }


    .metin-istatistik-kutu strong {
        font-size: 16px;
    }


    .metin-sonuc {
        padding: 15px;
    }


    .metin-sonuc-baslik {
        align-items: flex-start;

        flex-direction: column;
    }


    .metin-sonuc-baslik button {
        width: 100% !important;

        min-width: 100% !important;
    }

}

/* ================================= */
/* YAZI STİLLERİ */
/* ================================= */

.yazi-stilleri {
    margin-top: 20px;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    background: #f8fafc;

    overflow: hidden;
}


/* ================================= */
/* YAZI STİLLERİ BAŞLIK */
/* ================================= */

.yazi-stilleri-baslik {
    width: 100% !important;

    min-height: 50px !important;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin: 0 !important;

    padding: 14px 16px !important;

    background: #f8fafc !important;

    color: #1e293b !important;

    border: none !important;

    border-radius: 0 !important;

    font-size: 15px !important;

    font-weight: 600;

    cursor: pointer;

    text-align: left;

    transition: .2s;
}


.yazi-stilleri-baslik:hover {
    background: #f1f5f9 !important;
}


.yazi-stilleri-baslik span {
    display: flex;

    align-items: center;

    gap: 9px;
}


.yazi-stilleri-baslik span i {
    color: #2563eb;
}


#yaziStilleriOk {
    color: #64748b;

    transition: transform .25s ease;
}


/* ================================= */
/* PANEL */
/* ================================= */

.yazi-stilleri-panel {
    display: none;

    padding: 18px;

    border-top: 1px solid #e2e8f0;

    background: #ffffff;
}


.yazi-stilleri-panel.acik {
    display: block;
}


/* ================================= */
/* STİL KONTROLÜ */
/* ================================= */

.stil-kontrol {
    margin-bottom: 18px;
}


.stil-kontrol:last-of-type {
    margin-bottom: 0;
}


.stil-kontrol > label {
    display: block;

    margin-bottom: 8px;

    font-size: 13px;

    font-weight: 600;

    color: #1e293b;
}


/* ================================= */
/* SELECTLER */
/* ================================= */

.stil-kontrol select {
    width: 100% !important;

    box-sizing: border-box;

    min-height: 45px;

    padding: 11px 13px !important;

    border: 1px solid #dbe3ef !important;

    border-radius: 9px !important;

    background: #ffffff !important;

    color: #1e293b;

    font-size: 14px !important;

    outline: none;

    cursor: pointer;

    transition: .2s;
}


.stil-kontrol select:focus {
    border-color: #2563eb !important;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.08);
}


/* FONT SELECT */

.font-secimi {
    font-family: Arial;
}


/* ================================= */
/* BİÇİMLENDİRME BUTONLARI */
/* ================================= */

.stil-butonlari {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 8px;
}


.stil-butonlari button {
    width: 100% !important;

    min-height: 42px !important;

    margin: 0 !important;

    padding: 9px 10px !important;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    background: #f8fafc !important;

    color: #475569 !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 9px !important;

    font-size: 12px !important;

    font-weight: 600;

    cursor: pointer;

    transition: .2s;
}


.stil-butonlari button:hover {
    background: #eff6ff !important;

    border-color: #bfdbfe !important;

    color: #2563eb !important;
}


.stil-butonlari button.aktif {
    background: #2563eb !important;

    color: #ffffff !important;

    border-color: #2563eb !important;
}


.stil-butonlari button.aktif:hover {
    background: #1d4ed8 !important;

    color: #ffffff !important;
}


/* ================================= */
/* RENK */
/* ================================= */

.stil-renk-alani {
    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 45px;

    padding: 5px 10px;

    background: #ffffff;

    border: 1px solid #dbe3ef;

    border-radius: 9px;

    box-sizing: border-box;
}


.stil-renk-alani input[type="color"] {
    width: 38px;

    height: 35px;

    padding: 2px;

    border: 1px solid #dbe3ef;

    border-radius: 7px;

    background: #ffffff;

    cursor: pointer;
}


.stil-renk-alani span {
    font-size: 13px;

    font-weight: 600;

    color: #475569;

    letter-spacing: .4px;
}


/* ================================= */
/* STİLİ UYGULA */
/* ================================= */

.stil-uygula-btn {
    width: 100% !important;

    min-height: 44px !important;

    margin-top: 5px !important;

    padding: 10px 14px !important;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    background: #2563eb !important;

    color: #ffffff !important;

    border: none !important;

    border-radius: 9px !important;

    font-size: 13px !important;

    font-weight: 600;

    cursor: pointer;

    transition: .2s;
}


.stil-uygula-btn:hover {
    background: #1d4ed8 !important;
}


/* ================================= */
/* SONUÇ ALANI */
/* ================================= */

.metin-sonuc-alani {
    width: 100%;

    min-height: 180px;

    box-sizing: border-box;

    padding: 14px;

    background: #ffffff;

    border: 1px solid #dbe3ef;

    border-radius: 12px;

    color: #1e293b;

    font-size: 16px;

    line-height: 1.5;

    outline: none;

    overflow-wrap: anywhere;

    white-space: pre-wrap;

    cursor: text;
}


.metin-sonuc-alani:focus {
    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.08);
}


.metin-sonuc-alani:empty::before {
    content: attr(data-placeholder);

    color: #94a3b8;

    pointer-events: none;
}


/* ================================= */
/* MOBİL */
/* ================================= */

@media (max-width: 600px) {

    .yazi-stilleri-panel {
        padding: 15px;
    }


    .stil-butonlari {
        grid-template-columns: 1fr 1fr;
    }


    .stil-butonlari button {
        min-height: 44px !important;
    }


    .stil-renk-alani {
        min-height: 48px;
    }


    .metin-sonuc-alani {
        min-height: 160px;
    }

}

/* ================================= */
/* VERİ BİRİMİ DÖNÜŞTÜRÜCÜ */
/* ================================= */

.veri-birimi-card {
    max-width: 650px;
}


/* ================================= */
/* DEĞER */
/* ================================= */

.veri-deger {
    margin-top: 25px;
}


.veri-deger label,
.veri-kutu label {
    display: block;

    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 600;

    color: #1e293b;
}


.veri-deger input {
    width: 100% !important;

    box-sizing: border-box;

    padding: 14px !important;

    border: 1px solid #dbe3ef !important;

    border-radius: 10px !important;

    background: #ffffff !important;

    color: #1e293b;

    font-size: 16px !important;

    outline: none;
}


.veri-deger input:focus {
    border-color: #2563eb !important;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.08);
}


/* ================================= */
/* DÖNÜŞÜM ALANI */
/* ================================= */

.veri-donusum {
    display: grid;

    grid-template-columns: 1fr 45px 1fr;

    align-items: end;

    gap: 12px;

    margin-top: 25px;
}


.veri-kutu {
    min-width: 0;
}


.veri-kutu select {
    width: 100% !important;

    box-sizing: border-box;

    padding: 14px 12px !important;

    border: 1px solid #dbe3ef !important;

    border-radius: 10px !important;

    background: #ffffff !important;

    color: #1e293b;

    font-size: 14px !important;

    outline: none;

    cursor: pointer;
}


.veri-kutu select:focus {
    border-color: #2563eb !important;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.08);
}


/* ================================= */
/* OK */
/* ================================= */

.veri-ok {
    display: flex;

    align-items: center;

    justify-content: center;

    height: 46px;

    color: #94a3b8;

    font-size: 20px;
}


/* ================================= */
/* DÖNÜŞTÜR BUTONU */
/* ================================= */

.veri-birimi-card > button {
    width: 100% !important;

    margin-top: 22px !important;
}


/* ================================= */
/* ANA SONUÇ */
/* ================================= */

.veri-sonuc {
    margin-top: 25px;

    padding: 20px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;
}


.veri-sonuc h3,
.veri-tum-sonuclar h3 {
    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0 0 15px;

    color: #1e293b;

    font-size: 18px;
}


.veri-sonuc h3 i,
.veri-tum-sonuclar h3 i {
    color: #2563eb;
}


/* ================================= */
/* SONUÇ KUTUSU */
/* ================================= */

.veri-sonuc-kutu {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 15px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 10px;
}


#veriSonuc {
    min-width: 0;

    color: #1e293b;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.5;

    word-break: break-word;
}


/* ================================= */
/* KOPYALA */
/* ================================= */

.veri-sonuc-kutu button {
    width: 95px !important;

    min-width: 95px !important;

    height: 40px !important;

    margin: 0 !important;

    padding: 0 10px !important;

    background: #eff6ff !important;

    color: #2563eb !important;

    border: 1px solid #dbeafe !important;

    border-radius: 8px !important;

    font-size: 12px !important;

    font-weight: 600;

    cursor: pointer;

    flex-shrink: 0;
}


.veri-sonuc-kutu button:hover {
    background: #dbeafe !important;
}


.veri-sonuc-kutu button:disabled {
    opacity: .55;

    cursor: not-allowed;
}


/* ================================= */
/* TÜM BİRİMLER */
/* ================================= */

.veri-tum-sonuclar {
    margin-top: 20px;

    padding: 20px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;
}


#veriTumSonuclar {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 10px;
}


.veri-tum-kart {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding: 12px 13px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 9px;
}


.veri-tum-kart span {
    color: #64748b;

    font-size: 13px;

    font-weight: 600;
}


.veri-tum-kart strong {
    color: #1e293b;

    font-size: 14px;

    text-align: right;

    word-break: break-all;
}


/* ================================= */
/* DURUM */
/* ================================= */

.veri-durum {
    margin-top: 15px;

    padding: 13px 15px;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 10px;

    font-size: 14px;

    line-height: 1.5;

    text-align: center;
}


/* ================================= */
/* MOBİL */
/* ================================= */

@media (max-width: 600px) {

    .veri-donusum {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .veri-ok {
        height: auto;

        transform: rotate(90deg);

        margin: -2px 0;
    }


    .veri-sonuc,
    .veri-tum-sonuclar {
        padding: 15px;
    }


    .veri-sonuc-kutu {
        flex-direction: column;

        align-items: stretch;
    }


    #veriSonuc {
        text-align: center;
    }


    .veri-sonuc-kutu button {
        width: 100% !important;

        min-width: 100% !important;
    }


    #veriTumSonuclar {
        grid-template-columns: 1fr;
    }


    .veri-tum-kart {
        padding: 12px;
    }

}

/* ================================= */
/* ŞİFRE GÜÇ KONTROLÜ */
/* ================================= */

.sifre-kontrol-card {
    max-width: 650px;
}


/* ================================= */
/* ŞİFRE GİRİŞİ */
/* ================================= */

.sifre-kontrol-giris {
    margin-top: 25px;
}


.sifre-kontrol-giris label {
    display: block;

    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 600;

    color: #1e293b;
}


.sifre-kontrol-input {
    display: flex;

    align-items: center;

    width: 100%;

    height: 50px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #dbe3ef;

    border-radius: 10px;

    overflow: hidden;

    transition: .2s;
}


.sifre-kontrol-input:focus-within {
    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.08);
}


.sifre-kontrol-input input {
    flex: 1;

    min-width: 0;

    width: 100% !important;

    height: 100%;

    box-sizing: border-box;

    padding: 0 14px !important;

    background: transparent !important;

    border: none !important;

    outline: none !important;

    color: #1e293b;

    font-size: 16px !important;
}


.sifre-kontrol-input button {
    width: 50px !important;

    min-width: 50px !important;

    height: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    background: transparent !important;

    color: #64748b !important;

    border: none !important;

    cursor: pointer;
}


.sifre-kontrol-input button:hover {
    background: #f8fafc !important;

    color: #2563eb !important;
}


/* ================================= */
/* ŞİFRE GÜCÜ */
/* ================================= */

.sifre-kontrol-guc {
    margin-top: 20px;

    padding: 17px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 12px;
}


.sifre-kontrol-guc-baslik {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 11px;
}


.sifre-kontrol-guc-baslik span {
    font-size: 14px;

    font-weight: 600;

    color: #64748b;
}


.sifre-kontrol-guc-baslik strong {
    color: #2563eb;

    font-size: 15px;
}


.sifre-kontrol-cubuk {
    width: 100%;

    height: 9px;

    overflow: hidden;

    background: #e2e8f0;

    border-radius: 20px;
}


#sifreGucCubuk {
    width: 0%;

    height: 100%;

    background: #2563eb;

    border-radius: 20px;

    transition: width .3s ease;
}


/* ================================= */
/* KRİTERLER */
/* ================================= */

.sifre-kriterler {
    margin-top: 22px;

    padding: 20px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;
}


.sifre-kriterler h3 {
    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0 0 15px;

    color: #1e293b;

    font-size: 18px;
}


.sifre-kriterler h3 i {
    color: #2563eb;
}


.sifre-kriter {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px 12px;

    margin-top: 8px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 9px;

    color: #64748b;

    font-size: 14px;

    transition: .2s;
}


.sifre-kriter:first-of-type {
    margin-top: 0;
}


.sifre-kriter i {
    flex-shrink: 0;

    color: #94a3b8;

    font-size: 16px;
}


.sifre-kriter.aktif {
    background: #eff6ff;

    border-color: #bfdbfe;

    color: #2563eb;
}


.sifre-kriter.aktif i {
    color: #2563eb;
}


/* ================================= */
/* BİLGİ */
/* ================================= */

.sifre-kontrol-bilgi {
    margin-top: 15px;

    padding: 13px 15px;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 10px;

    font-size: 14px;

    line-height: 1.5;

    text-align: center;
}


/* ================================= */
/* ÖNERİ */
/* ================================= */

.sifre-oneri {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-top: 18px;

    padding: 15px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 12px;
}


.sifre-oneri > i {
    flex-shrink: 0;

    margin-top: 2px;

    color: #f59e0b;

    font-size: 18px;
}


.sifre-oneri > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.sifre-oneri strong {
    font-size: 14px;

    color: #1e293b;
}


.sifre-oneri span {
    font-size: 13px;

    line-height: 1.5;

    color: #64748b;
}


/* ================================= */
/* MOBİL */
/* ================================= */

@media (max-width: 600px) {

    .sifre-kontrol-guc,
    .sifre-kriterler {
        padding: 15px;
    }


    .sifre-kriter {
        padding: 10px;
    }


    .sifre-oneri {
        padding: 13px;
    }

}

/* ================================= */
/* GÜÇLÜ ŞİFRE OLUŞTURUCU */
/* ================================= */

.guclu-sifre-card {
    max-width: 650px;
}


/* ================================= */
/* ŞİFRE UZUNLUĞU */
/* ================================= */

.sifre-uzunluk {
    margin-top: 25px;

    padding: 18px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;
}


.sifre-uzunluk-baslik {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 12px;
}


.sifre-uzunluk-baslik label {
    font-size: 14px;

    font-weight: 600;

    color: #1e293b;
}


.sifre-uzunluk-baslik strong {
    min-width: 44px;

    padding: 6px 9px;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 8px;

    font-size: 15px;

    text-align: center;
}


/* SLIDER */

#sifreUzunluk {
    width: 100%;

    height: 6px;

    margin: 5px 0;

    padding: 0 !important;

    border: none !important;

    border-radius: 10px;

    background: #dbe3ef;

    outline: none;

    cursor: pointer;
}


.sifre-slider-etiket {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 5px;

    color: #94a3b8;

    font-size: 12px;
}


/* ================================= */
/* KARAKTER SEÇİMLERİ */
/* ================================= */

.sifre-karakter-secimleri {
    margin-top: 20px;

    padding: 20px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;
}


.sifre-karakter-secimleri h3 {
    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0 0 15px;

    color: #1e293b;

    font-size: 18px;
}


.sifre-karakter-secimleri h3 i {
    color: #2563eb;
}


/* ================================= */
/* CHECKBOX SEÇİMLERİ */
/* ================================= */

.sifre-secim {
    position: relative;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 12px 13px;

    margin-top: 8px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 10px;

    cursor: pointer;

    transition: .2s;
}


.sifre-secim:first-of-type {
    margin-top: 0;
}


.sifre-secim:hover {
    border-color: #bfdbfe;

    background: #eff6ff;
}


.sifre-secim input {
    position: absolute;

    opacity: 0;

    width: 0;

    height: 0;
}


.sifre-check {
    flex-shrink: 0;

    width: 19px;

    height: 19px;

    box-sizing: border-box;

    border: 2px solid #cbd5e1;

    border-radius: 5px;

    background: #ffffff;

    transition: .2s;
}


.sifre-secim input:checked + .sifre-check {
    background: #2563eb;

    border-color: #2563eb;
}


.sifre-secim input:checked + .sifre-check::after {
    content: "✓";

    display: flex;

    align-items: center;

    justify-content: center;

    height: 100%;

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;
}


.sifre-secim > div {
    display: flex;

    flex-direction: column;

    gap: 2px;
}


.sifre-secim strong {
    font-size: 14px;

    color: #1e293b;
}


.sifre-secim small {
    font-size: 12px;

    color: #94a3b8;
}


/* ================================= */
/* OLUŞTUR BUTONU */
/* ================================= */

.guclu-sifre-olustur-btn {
    width: 100% !important;

    margin-top: 20px !important;

    padding: 14px !important;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    background: #2563eb !important;

    color: #ffffff !important;

    border: none !important;

    border-radius: 10px !important;

    font-size: 15px !important;

    font-weight: 600;

    cursor: pointer;

    transition: .2s;
}


.guclu-sifre-olustur-btn:hover {
    background: #1d4ed8 !important;
}


/* ================================= */
/* OLUŞAN ŞİFRE */
/* ================================= */

.olusan-sifre {
    margin-top: 25px;

    padding: 20px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;
}


.olusan-sifre-baslik {
    margin-bottom: 12px;
}


.olusan-sifre-baslik h3 {
    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0;

    color: #1e293b;

    font-size: 18px;
}


.olusan-sifre-baslik h3 i {
    color: #2563eb;
}


/* ================================= */
/* ŞİFRE INPUT */
/* ================================= */

.olusan-sifre-alani {
    display: flex;

    align-items: stretch;

    width: 100%;

    min-height: 50px;

    overflow: hidden;

    border: 1px solid #dbe3ef;

    border-radius: 10px;

    background: #ffffff;
}


.olusan-sifre-alani:focus-within {
    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37,99,235,.08);
}


.olusan-sifre-alani input {
    flex: 1;

    min-width: 0;

    width: 100% !important;

    height: 50px;

    box-sizing: border-box;

    padding: 0 14px !important;

    border: none !important;

    outline: none !important;

    background: transparent !important;

    color: #1e293b;

    font-family: "Courier New", monospace;

    font-size: 15px !important;

    font-weight: 600;

    letter-spacing: .5px;
}


.olusan-sifre-alani button {
    width: 105px !important;

    min-width: 105px !important;

    height: 50px !important;

    margin: 0 !important;

    padding: 0 10px !important;

    background: #eff6ff !important;

    color: #2563eb !important;

    border: none !important;

    border-left: 1px solid #dbeafe !important;

    border-radius: 0 !important;

    font-size: 12px !important;

    font-weight: 600;

    cursor: pointer;

    flex-shrink: 0;
}


.olusan-sifre-alani button:hover {
    background: #dbeafe !important;
}


.olusan-sifre-alani button:disabled {
    opacity: .55;

    cursor: not-allowed;
}


/* ================================= */
/* OLUŞTURULAN ŞİFRE BİLGİLERİ */
/* ================================= */

.olusan-sifre-bilgi {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 10px;

    margin-top: 15px;
}


.olusan-sifre-bilgi > div {
    padding: 14px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 10px;

    text-align: center;
}


.olusan-sifre-bilgi span {
    display: block;

    margin-bottom: 5px;

    font-size: 12px;

    font-weight: 600;

    color: #64748b;
}


.olusan-sifre-bilgi strong {
    display: block;

    color: #2563eb;

    font-size: 16px;
}


/* ================================= */
/* GÜVENLİK NOTU */
/* ================================= */

.sifre-guvenlik-notu {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-top: 18px;

    padding: 13px 15px;

    background: #eff6ff;

    border-radius: 10px;

    color: #2563eb;

    font-size: 13px;

    line-height: 1.5;
}


.sifre-guvenlik-notu i {
    flex-shrink: 0;

    margin-top: 2px;
}


/* ================================= */
/* DURUM */
/* ================================= */

.sifre-olustur-durum {
    margin-top: 15px;

    padding: 13px 15px;

    background: #f8fafc;

    color: #64748b;

    border: 1px solid #e2e8f0;

    border-radius: 10px;

    font-size: 14px;

    line-height: 1.5;

    text-align: center;
}


/* ================================= */
/* MOBİL */
/* ================================= */

@media (max-width: 600px) {

    .sifre-uzunluk,
    .sifre-karakter-secimleri,
    .olusan-sifre {
        padding: 15px;
    }


    .sifre-secim {
        padding: 11px;
    }


    .olusan-sifre-alani {
        flex-direction: column;

        overflow: visible;

        border: none;

        background: transparent;

        gap: 8px;
    }


    .olusan-sifre-alani input {
        width: 100% !important;

        height: 50px;

        border: 1px solid #dbe3ef !important;

        border-radius: 10px !important;

        background: #ffffff !important;

        text-align: center;
    }


    .olusan-sifre-alani button {
        width: 100% !important;

        min-width: 100% !important;

        height: 45px !important;

        border: 1px solid #dbeafe !important;

        border-radius: 9px !important;
    }


    .olusan-sifre-bilgi {
        grid-template-columns: 1fr;
    }

}

/* ================================= */
/* ARAMA SONUÇLARI */
/* ================================= */

.arama {
    position: relative;
}


.arama-sonuclari {
    width: 700px;

    max-width: 95%;

    margin: 10px auto 0;

    display: flex;

    flex-direction: column;

    gap: 8px;

    text-align: left;

    position: relative;

    z-index: 20;
}


/* ================================= */
/* SONUÇ */
/* ================================= */

.arama-sonuc {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 13px 15px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 11px;

    text-decoration: none;

    color: #1e293b;

    box-shadow:
        0 5px 18px rgba(0,0,0,.06);

    transition: .2s;
}


.arama-sonuc:hover {
    border-color: #bfdbfe;

    background: #eff6ff;

    transform: translateY(-2px);
}


.arama-sonuc > i:first-child {
    flex-shrink: 0;

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 9px;

    font-size: 17px;
}


.arama-sonuc div {
    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.arama-sonuc strong {
    color: #1e293b;

    font-size: 14px;
}


.arama-sonuc span {
    color: #94a3b8;

    font-size: 12px;
}


.arama-sonuc > i:last-child {
    color: #94a3b8;

    font-size: 13px;
}


/* ================================= */
/* SONUÇ YOK */
/* ================================= */

.arama-sonuc-yok {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 14px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 11px;

    color: #64748b;

    font-size: 13px;

    box-shadow:
        0 5px 18px rgba(0,0,0,.05);
}


.arama-sonuc-yok i {
    color: #94a3b8;
}


/* ================================= */
/* MOBİL */
/* ================================= */

@media (max-width: 600px) {

    .arama-sonuclari {
        max-width: 95%;
    }


    .arama-sonuc {
        padding: 12px;
    }


    .arama-sonuc > i:first-child {
        width: 35px;

        height: 35px;
    }

}

/* ================================= */
/* TÜM ARAÇLAR */
/* ================================= */

.tum-araclar {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto 70px;
}


/* ================================= */
/* BAŞLIK */
/* ================================= */

.tum-araclar-header {
    padding: 55px 20px 35px;

    text-align: center;
}


.tum-araclar-header h1 {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-bottom: 12px;

    color: #0f172a;

    font-size: 38px;
}


.tum-araclar-header h1 i {
    color: #2563eb;
}


.tum-araclar-header p {
    margin: 0 auto;

    max-width: 650px;

    color: #64748b;

    font-size: 16px;

    line-height: 1.6;
}


/* ================================= */
/* ARAMA */
/* ================================= */

.tum-araclar-arama {
    display: flex;

    align-items: center;

    width: 100%;

    max-width: 650px;

    height: 55px;

    margin: 25px auto 0;

    padding: 0 18px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, .05);

    transition: .2s;
}


.tum-araclar-arama:focus-within {
    border-color: #2563eb;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, .08);
}


.tum-araclar-arama > i {
    flex-shrink: 0;

    color: #94a3b8;

    font-size: 18px;
}


.tum-araclar-arama input {
    flex: 1;

    min-width: 0;

    width: 100%;

    margin-left: 12px;

    padding: 0;

    border: none;

    outline: none;

    background: transparent;

    color: #1e293b;

    font-size: 15px;
}


.tum-araclar-arama input::placeholder {
    color: #94a3b8;
}


/* ================================= */
/* KATEGORİ */
/* ================================= */

.tum-kategori {
    margin-top: 25px;

    padding: 20px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, .04);
}


/* ================================= */
/* KATEGORİ BAŞLIĞI */
/* ================================= */

.tum-kategori-baslik {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

    padding-bottom: 14px;

    border-bottom: 1px solid #eef2f7;
}


.tum-kategori-baslik > i {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    flex-shrink: 0;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 10px;

    font-size: 18px;
}


.tum-kategori-baslik h2 {
    margin: 0;

    color: #1e293b;

    font-size: 20px;
}


/* ================================= */
/* ARAÇ LİSTESİ */
/* ================================= */

.tum-arac-listesi {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


/* ================================= */
/* ARAÇ */
/* ================================= */

.tum-arac {
    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 54px;

    padding: 10px 13px;

    box-sizing: border-box;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 10px;

    color: #1e293b;

    text-decoration: none;

    transition: .2s;
}


.tum-arac:hover {
    background: #eff6ff;

    border-color: #bfdbfe;

    transform: translateX(3px);
}


/* İKON */

.tum-arac > i:first-child {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    flex-shrink: 0;

    background: #ffffff;

    color: #2563eb;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    font-size: 15px;
}


/* ARAÇ ADI */

.tum-arac span {
    flex: 1;

    min-width: 0;

    color: #1e293b;

    font-size: 14px;

    font-weight: 600;
}


/* SAĞ OK */

.tum-arac > i:last-child {
    flex-shrink: 0;

    color: #94a3b8;

    font-size: 13px;

    transition: .2s;
}


.tum-arac:hover > i:last-child {
    color: #2563eb;

    transform: translateX(3px);
}


/* ================================= */
/* ARAÇ BULUNAMADI */
/* ================================= */

.tum-arac-yok {
    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 25px;

    padding: 35px 20px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

    text-align: center;
}


.tum-arac-yok > i {
    color: #94a3b8;

    font-size: 30px;

    margin-bottom: 3px;
}


.tum-arac-yok strong {
    color: #1e293b;

    font-size: 16px;
}


.tum-arac-yok span {
    color: #64748b;

    font-size: 13px;
}


/* ================================= */
/* MOBİL */
/* ================================= */

@media (max-width: 700px) {

    .tum-araclar {
        width: 94%;
    }


    .tum-araclar-header {
        padding: 35px 10px 25px;
    }


    .tum-araclar-header h1 {
        font-size: 30px;
    }


    .tum-araclar-header p {
        font-size: 14px;
    }


    .tum-kategori {
        padding: 15px;

        margin-top: 18px;
    }


    .tum-kategori-baslik {
        gap: 8px;

        padding-bottom: 12px;
    }


    .tum-kategori-baslik > i {
        width: 36px;

        height: 36px;

        font-size: 16px;
    }


    .tum-kategori-baslik h2 {
        font-size: 17px;
    }


    .tum-arac {
        min-height: 50px;

        padding: 9px 10px;
    }


    .tum-arac > i:first-child {
        width: 34px;

        height: 34px;

        font-size: 14px;
    }


    .tum-arac span {
        font-size: 13px;
    }

}

/* ================================= */
/* HAKKIMIZDA */
/* ================================= */

.hakkimizda {
    width: 90%;
    max-width: 1000px;

    margin: 0 auto 70px;
}


/* ================================= */
/* ÜST BAŞLIK */
/* ================================= */

.hakkimizda-header {
    padding: 55px 20px 35px;

    text-align: center;
}


.hakkimizda-ikon {
    width: 65px;
    height: 65px;

    margin: 0 auto 18px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 16px;

    font-size: 28px;
}


.hakkimizda-header h1 {
    margin: 0 0 12px;

    color: #0f172a;

    font-size: 38px;
}


.hakkimizda-header p {
    max-width: 650px;

    margin: 0 auto;

    color: #64748b;

    font-size: 16px;

    line-height: 1.7;
}


/* ================================= */
/* BİLGİ KARTI */
/* ================================= */

.hakkimizda-kart {
    padding: 28px;

    margin-top: 20px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, .04);
}


.hakkimizda-kart h2 {
    margin: 0 0 15px;

    color: #1e293b;

    font-size: 23px;
}


.hakkimizda-kart p {
    margin: 0 0 14px;

    color: #64748b;

    font-size: 15px;

    line-height: 1.8;
}


.hakkimizda-kart p:last-child {
    margin-bottom: 0;
}


/* ================================= */
/* NEDEN HIZLI ARAÇLAR */
/* ================================= */

.hakkimizda-baslik {
    margin-top: 35px;

    text-align: center;
}


.hakkimizda-baslik h2 {
    margin: 0;

    color: #0f172a;

    font-size: 28px;
}


/* ================================= */
/* ÖZELLİKLER */
/* ================================= */

.hakkimizda-ozellikler {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;

    margin-top: 20px;
}


.hakkimizda-ozellik {
    padding: 22px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

    transition: .2s;
}


.hakkimizda-ozellik:hover {
    transform: translateY(-3px);

    border-color: #bfdbfe;

    box-shadow:
        0 10px 25px rgba(37, 99, 235, .08);
}


/* ================================= */
/* ÖZELLİK İKONU */
/* ================================= */

.hakkimizda-ozellik-ikon {
    width: 42px;
    height: 42px;

    margin-bottom: 14px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 10px;

    font-size: 17px;
}


.hakkimizda-ozellik h3 {
    margin: 0 0 8px;

    color: #1e293b;

    font-size: 17px;
}


.hakkimizda-ozellik p {
    margin: 0;

    color: #64748b;

    font-size: 13px;

    line-height: 1.6;
}


/* ================================= */
/* KATEGORİLER */
/* ================================= */

.hakkimizda-kategoriler {
    margin-top: 30px;
}


.hakkimizda-kategori-listesi {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 10px;

    margin-top: 18px;
}


.hakkimizda-kategori-listesi span {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-height: 45px;

    padding: 8px;

    box-sizing: border-box;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 9px;

    color: #475569;

    font-size: 12px;

    font-weight: 600;

    text-align: center;
}


.hakkimizda-kategori-listesi span i {
    color: #2563eb;
}


/* ================================= */
/* ALT MESAJ */
/* ================================= */

.hakkimizda-alt {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-top: 25px;

    padding: 18px 20px;

    background: #eff6ff;

    border-radius: 12px;

    text-align: center;
}


.hakkimizda-alt i {
    flex-shrink: 0;

    color: #2563eb;

    font-size: 18px;
}


.hakkimizda-alt p {
    margin: 0;

    color: #2563eb;

    font-size: 14px;

    line-height: 1.5;
}


/* ================================= */
/* MOBİL */
/* ================================= */

@media (max-width: 700px) {

    .hakkimizda {
        width: 94%;
    }


    .hakkimizda-header {
        padding: 35px 10px 25px;
    }


    .hakkimizda-header h1 {
        font-size: 30px;
    }


    .hakkimizda-header p {
        font-size: 14px;
    }


    .hakkimizda-kart {
        padding: 20px;

        margin-top: 16px;
    }


    .hakkimizda-kart h2 {
        font-size: 20px;
    }


    .hakkimizda-ozellikler {
        grid-template-columns: 1fr;
    }


    .hakkimizda-baslik h2 {
        font-size: 24px;
    }


    .hakkimizda-kategori-listesi {
        grid-template-columns: repeat(2, 1fr);
    }


    .hakkimizda-alt {
        align-items: flex-start;

        padding: 15px;
    }

}

/* ================================= */
/* İLETİŞİM SAYFASI */
/* ================================= */

.iletisim {
    width: 90%;
    max-width: 1050px;

    margin: 0 auto 70px;
}


/* ================================= */
/* BAŞLIK */
/* ================================= */

.iletisim-header {
    padding: 55px 20px 35px;

    text-align: center;
}


.iletisim-ikon {
    width: 65px;
    height: 65px;

    margin: 0 auto 18px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 16px;

    font-size: 28px;
}


.iletisim-header h1 {
    margin: 0 0 12px;

    color: #0f172a;

    font-size: 38px;
}


.iletisim-header p {
    max-width: 650px;

    margin: 0 auto;

    color: #64748b;

    font-size: 16px;

    line-height: 1.7;
}


/* ================================= */
/* ANA GRID */
/* ================================= */

.iletisim-grid {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 20px;

    align-items: start;
}


/* ================================= */
/* SOL BİLGİ ALANI */
/* ================================= */

.iletisim-bilgi {
    padding: 25px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, .04);
}


.iletisim-bilgi h2 {
    margin: 0 0 10px;

    color: #1e293b;

    font-size: 23px;
}


.iletisim-bilgi > p {
    margin: 0 0 20px;

    color: #64748b;

    font-size: 14px;

    line-height: 1.7;
}


/* ================================= */
/* BİLGİ KUTULARI */
/* ================================= */

.iletisim-bilgi-kutu {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 14px;

    margin-top: 10px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 11px;
}


.iletisim-bilgi-kutu:first-of-type {
    margin-top: 0;
}


.iletisim-bilgi-ikon {
    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 9px;

    font-size: 16px;
}


.iletisim-bilgi-kutu > div:last-child {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.iletisim-bilgi-kutu span {
    color: #64748b;

    font-size: 12px;

    font-weight: 600;
}


.iletisim-bilgi-kutu strong {
    color: #1e293b;

    font-size: 13px;

    line-height: 1.5;

    word-break: break-word;
}


/* ================================= */
/* KONU BİLGİSİ */
/* ================================= */

.iletisim-konu-bilgisi {
    margin-top: 20px;

    padding-top: 20px;

    border-top: 1px solid #e2e8f0;
}


.iletisim-konu-bilgisi h3 {
    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0 0 13px;

    color: #1e293b;

    font-size: 16px;
}


.iletisim-konu-bilgisi h3 i {
    color: #2563eb;
}


.iletisim-konu-etiketleri {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.iletisim-konu-etiketleri span {
    padding: 7px 10px;

    background: #eff6ff;

    color: #2563eb;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 600;
}


/* ================================= */
/* FORM */
/* ================================= */

.iletisim-form {
    padding: 25px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, .04);
}


.iletisim-form h2 {
    margin: 0 0 5px;

    color: #1e293b;

    font-size: 23px;
}


.iletisim-form-aciklama {
    margin: 0 0 20px;

    color: #64748b;

    font-size: 13px;

    line-height: 1.5;
}


/* ================================= */
/* FORM ALANLARI */
/* ================================= */

.iletisim-form-alan {
    margin-top: 17px;
}


.iletisim-form-alan:first-of-type {
    margin-top: 0;
}


.iletisim-form-alan label {
    display: block;

    margin-bottom: 8px;

    color: #1e293b;

    font-size: 13px;

    font-weight: 600;
}


/* INPUT + TEXTAREA */

.iletisim-form-alan input,
.iletisim-form-alan select,
.iletisim-form-alan textarea {
    width: 100% !important;

    box-sizing: border-box;

    padding: 13px !important;

    background: #ffffff !important;

    color: #1e293b;

    border: 1px solid #dbe3ef !important;

    border-radius: 10px !important;

    outline: none;

    font-size: 14px !important;

    transition: .2s;
}


.iletisim-form-alan input,
.iletisim-form-alan select {
    height: 48px;
}


.iletisim-form-alan textarea {
    min-height: 150px;

    resize: vertical;

    line-height: 1.6;
}


.iletisim-form-alan input:focus,
.iletisim-form-alan select:focus,
.iletisim-form-alan textarea:focus {
    border-color: #2563eb !important;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, .08);
}


/* ================================= */
/* GÖNDER BUTONU */
/* ================================= */

.iletisim-form form > button {
    width: 100% !important;

    min-height: 48px !important;

    margin-top: 20px !important;

    padding: 12px 15px !important;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    background: #2563eb !important;

    color: #ffffff !important;

    border: none !important;

    border-radius: 10px !important;

    font-size: 14px !important;

    font-weight: 600;

    cursor: pointer;

    transition: .2s;
}


.iletisim-form form > button:hover {
    background: #1d4ed8 !important;

    transform: translateY(-1px);
}


/* ================================= */
/* DURUM MESAJI */
/* ================================= */

.iletisim-durum {
    min-height: 0;

    margin-top: 12px;

    padding: 0;

    border-radius: 9px;

    font-size: 13px;

    text-align: center;

    transition: .2s;
}


.iletisim-durum.aktif {
    padding: 12px;

    background: #eff6ff;

    color: #2563eb;

    border: 1px solid #dbeafe;
}


/* ================================= */
/* MOBİL */
/* ================================= */

@media (max-width: 800px) {

    .iletisim {
        width: 94%;
    }


    .iletisim-header {
        padding: 35px 10px 25px;
    }


    .iletisim-header h1 {
        font-size: 30px;
    }


    .iletisim-header p {
        font-size: 14px;
    }


    .iletisim-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .iletisim-bilgi,
    .iletisim-form {
        padding: 20px;
    }


    .iletisim-konu-etiketleri span {
        font-size: 11px;

        padding: 6px 9px;
    }

}