/* ===== MODERN DARK THEME - SifreBul.com ===== */

/* Temel sayfa */
html {
    background: linear-gradient(160deg, #0a0a1a 0%, #0f172a 50%, #0c0c20 100%);
    min-height: 100vh;
}

body {
    background: transparent;
    color: #c8d6e5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Jumbotron: Glass card */
.jumbotron {
    background: rgba(15,23,42,0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    color: #e2e8f0;
    padding: 2.5rem 2rem;
}

/* Başlık */
.display-3 {
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 2px 12px rgba(59,130,246,0.15);
    letter-spacing: -0.5px;
}

p {
    margin-bottom: 0.3rem;
}

/* Toggle switch'ler: Teal/Cyan tonları */
.btn-success.toggle,
.btn-success.toggle.btn,
.toggle.btn.btn-success,
div.toggle.btn-success,
.toggle.btn-success.off,
.toggle.btn-success.btn-lg,
.toggle.btn-success.btn-xs {
    background: linear-gradient(135deg, rgba(20,184,166,0.7), rgba(59,130,246,0.5)) !important;
    border-color: rgba(20,184,166,0.3) !important;
}

.btn-success.toggle .toggle-on,
.toggle.btn-success .toggle-on,
.toggle .btn-success.toggle-on,
.toggle-on.btn-success {
    background: linear-gradient(135deg, rgba(20,184,166,0.7), rgba(59,130,246,0.5)) !important;
    color: #ffffff !important;
}

.toggle .toggle-off,
.toggle.off .toggle-off {
    background-color: rgba(51,65,85,0.7) !important;
    color: rgba(255,255,255,0.5) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

.toggle,
.toggle.btn,
div.toggle {
    border-radius: 6px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

.toggle .toggle-handle {
    background: rgba(255,255,255,0.9) !important;
    border-color: rgba(255,255,255,0.3) !important;
    border-radius: 4px !important;
}

/* Bootstrap btn-success override (toggle dışında da) */
.btn-success,
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active {
    background-color: rgba(20,184,166,0.8) !important;
    border-color: rgba(20,184,166,0.5) !important;
}

/* Uzunluk input spinner */
.input-group .form-control,
.input-group .btn {
    background: rgba(30,41,59,0.6);
    border-color: rgba(255,255,255,0.1);
    color: #e2e8f0;
}

.input-group .btn:hover {
    background: rgba(51,65,85,0.8);
    color: #ffffff;
}

/* Strength meter */
#meter_wrapper {
    text-align: center;
}

#meter {
    width: 100%;
    height: calc(1.5em + 1rem + 6px);
    border-radius: 8px;
    transition: background-color 0.4s ease;
}

#pass_type {
    font-size: 12px;
    margin-top: 1.1em;
    text-align: center;
    position: absolute;
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    font-weight: 600;
}

/* ===== Butonlar: Glassmorphism ===== */

/* Focus/active genel */
#autogen-btn:focus, #autogen-btn:active,
#manualgen-btn:focus, #manualgen-btn:active,
#copybutton:focus, #copybutton:active,
#sharebutton:focus, #sharebutton:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Otomatik Üret */
a#autogen-btn,
a#autogen-btn:link,
a#autogen-btn:visited {
    background: linear-gradient(135deg, #00e676, #00c853, #76ff03) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.3) !important;
    color: #003d00 !important;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(255,255,255,0.2);
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0,230,118,0.45), 0 0 40px rgba(118,255,3,0.15);
}

a#autogen-btn:hover,
a#autogen-btn:focus {
    background: linear-gradient(135deg, #69f0ae, #00e676, #b2ff59) !important;
    border-color: rgba(255,255,255,0.5) !important;
    box-shadow: 0 6px 32px rgba(0,230,118,0.6), 0 0 60px rgba(118,255,3,0.25), inset 0 1px 0 rgba(255,255,255,0.3) !important;
    color: #003d00 !important;
    transform: translateY(-2px);
}

a#autogen-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 12px rgba(0,230,118,0.4) !important;
}

/* Elle Üret: Glassmorphism Mor */
a#manualgen-btn,
a#manualgen-btn:link,
a#manualgen-btn:visited {
    background: linear-gradient(135deg, #a855f7, #7c3aed, #c084fc) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.25) !important;
    color: #ffffff !important;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(168,85,247,0.4), 0 0 40px rgba(192,132,252,0.15);
}

a#manualgen-btn:hover,
a#manualgen-btn:focus {
    background: linear-gradient(135deg, #c084fc, #a855f7, #d8b4fe) !important;
    border-color: rgba(255,255,255,0.4) !important;
    box-shadow: 0 6px 32px rgba(168,85,247,0.55), 0 0 60px rgba(192,132,252,0.25), inset 0 1px 0 rgba(255,255,255,0.2) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

a#manualgen-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 12px rgba(168,85,247,0.4) !important;
}

a#manualgen-btn.active,
a#manualgen-btn.active:link,
a#manualgen-btn.active:visited {
    background: linear-gradient(135deg, #c084fc, #9333ea, #d8b4fe) !important;
    border-color: rgba(168,85,247,0.6) !important;
    box-shadow: 0 6px 36px rgba(168,85,247,0.6), 0 0 50px rgba(192,132,252,0.2), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

/* Kopyala */
a#copybutton,
a#copybutton:link,
a#copybutton:visited {
    background: linear-gradient(135deg, rgba(100,116,139,0.55), rgba(71,85,105,0.45)) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

a#copybutton:hover,
a#copybutton:focus {
    background: linear-gradient(135deg, rgba(100,116,139,0.75), rgba(71,85,105,0.65)) !important;
    border-color: rgba(255,255,255,0.25) !important;
    box-shadow: 0 4px 16px rgba(100,116,139,0.35), inset 0 1px 0 rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

a#copybutton:active {
    transform: translateY(0) !important;
}

a#copybutton[disabled] {
    opacity: 0.4 !important;
}

a#copybutton.copied-state,
a#copybutton.copied-state:link,
a#copybutton.copied-state:visited {
    background: linear-gradient(135deg, rgba(34,197,94,0.8), rgba(16,185,129,0.7)) !important;
    border-color: rgba(34,197,94,0.5) !important;
    box-shadow: 0 4px 16px rgba(34,197,94,0.35) !important;
}

/* Paylaş */
a#sharebutton,
a#sharebutton:link,
a#sharebutton:visited {
    background: linear-gradient(135deg, rgba(15,23,42,0.8), rgba(30,58,138,0.6)) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

a#sharebutton:hover,
a#sharebutton:focus {
    background: linear-gradient(135deg, rgba(15,23,42,0.9), rgba(30,58,138,0.75)) !important;
    border-color: rgba(255,255,255,0.2) !important;
    box-shadow: 0 4px 16px rgba(30,58,138,0.4), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

a#sharebutton:active {
    transform: translateY(0) !important;
}

a#sharebutton[disabled] {
    opacity: 0.45 !important;
}

a#sharebutton.shared-state,
a#sharebutton.shared-state:link,
a#sharebutton.shared-state:visited {
    background: linear-gradient(135deg, rgba(245,158,11,0.85), rgba(234,88,12,0.7)) !important;
    border-color: rgba(245,158,11,0.5) !important;
    box-shadow: 0 4px 16px rgba(245,158,11,0.35) !important;
}

/* Password input */
#password {
    background: rgba(15,23,42,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    color: #f1f5f9;
    border-radius: 6px;
    transition: all 0.2s ease;
}

#password::placeholder {
    color: rgba(255,255,255,0.3);
}

#password:focus {
    background: rgba(15,23,42,0.8);
    border-color: rgba(59,130,246,0.5);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
    color: #f1f5f9;
    outline: none;
}

/* Entropy toplama sırasında diğer butonlar pasif + blur */
.entropy-disabled {
    opacity: 0.35 !important;
    filter: blur(1px) !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, filter 0.3s ease !important;
}

/* ===== Entropy Canvas ===== */

#entropy-container {
    animation: slideDown 0.3s ease-in-out;
}

#entropy-canvas-wrapper {
    position: relative;
}

#entropy-canvas {
    width: 100%;
    height: 150px;
    background-color: #0a0a1a;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    cursor: crosshair;
    display: block;
    touch-action: none;
    transition: border-color 0.2s ease;
}

#entropy-canvas:hover {
    border-color: rgba(59,130,246,0.4);
}

/* Canvas butonları */
#entropy-info-btn,
#entropy-reset-btn {
    position: absolute;
    width: 28px;
    height: 28px;
    padding: 0;
    line-height: 28px;
    text-align: center;
    font-size: 14px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.45);
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 2;
    transition: all 0.2s ease;
}

#entropy-info-btn:hover,
#entropy-reset-btn:hover {
    background-color: rgba(255,255,255,0.2);
    color: #ffffff;
}

#entropy-info-btn {
    top: 6px;
    left: 6px;
}

#entropy-reset-btn {
    bottom: 6px;
    right: 6px;
    background-color: rgba(59,130,246,0.25);
    color: rgba(255,255,255,0.7);
    border-color: rgba(59,130,246,0.3);
}

#entropy-reset-btn:hover {
    background-color: rgba(59,130,246,0.5) !important;
    color: #ffffff !important;
    border-color: rgba(59,130,246,0.6) !important;
}

/* Bilgi popup */
#entropy-info-popup {
    position: relative;
    background: rgba(15,23,42,0.85);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 14px 36px 14px 16px;
    margin-top: 6px;
    color: #b0bec5;
    font-size: 0.95em;
    line-height: 1.65;
    animation: slideDown 0.2s ease-in-out;
    backdrop-filter: blur(8px);
}

#entropy-info-popup p {
    margin-bottom: 0.4rem;
}

#entropy-info-popup p:last-child {
    margin-bottom: 0;
}

#entropy-info-popup .close {
    position: absolute;
    top: 6px;
    right: 10px;
    color: #64748b;
    font-size: 1.3em;
    opacity: 0.7;
    text-shadow: none;
}

#entropy-info-popup .close:hover {
    color: #fff;
    opacity: 1;
}

#entropy-info-popup code {
    background-color: rgba(59,130,246,0.15);
    color: #60a5fa;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.9em;
}

/* Entropy Progress Bar */
#entropy-container .progress {
    background-color: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
}

#entropy-progress {
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    transition: width 0.15s ease-out;
    border-radius: 4px;
}

#entropy-progress.complete {
    background: linear-gradient(90deg, #10b981, #14b8a6);
}

#entropy-hint {
    font-size: 0.8em;
    transition: opacity 0.3s ease;
    color: #64748b !important;
}

/* ===== Paylaşım URL ===== */

#share-url-container {
    animation: slideDown 0.3s ease-in-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#share-url-container .input-group {
    font-size: 0.9em;
}

#share-url {
    font-family: monospace;
    background: rgba(15,23,42,0.7);
    border-color: rgba(255,255,255,0.08);
    color: #e2e8f0;
    transition: all 0.2s ease;
}

#share-url::placeholder {
    color: rgba(255,255,255,0.35);
}

#share-url:hover {
    border-color: rgba(59,130,246,0.4);
    box-shadow: 0 2px 8px rgba(59,130,246,0.15);
}

#share-url-message {
    animation: slideDown 0.3s ease-in-out;
}

#share-url-message small {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    background: rgba(239,68,68,0.8);
    border: 1px solid rgba(239,68,68,0.5);
    color: #ffffff;
    backdrop-filter: blur(4px);
}

/* Kopyalama animasyonu */
@keyframes copyAnimation {
    0% { background-color: rgba(15,23,42,0.7); color: #e2e8f0; }
    50% { background-color: rgba(59,130,246,0.4); color: #ffffff; }
    100% { background-color: rgba(15,23,42,0.7); color: #e2e8f0; }
}

#share-url.copying {
    animation: copyAnimation 0.8s ease-in-out;
    color: #ffffff !important;
}

/* Paylaşım URL kopyala butonu */
#copy-share-url-btn {
    background: rgba(51,65,85,0.5);
    border-color: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    transition: all 0.2s ease;
}

#copy-share-url-btn:hover {
    background: rgba(59,130,246,0.5);
    border-color: rgba(59,130,246,0.4);
    color: #ffffff;
}

#copy-share-url-btn.copied {
    background: rgba(16,185,129,0.6);
    border-color: rgba(16,185,129,0.4);
    color: #ffffff;
}

/* ===== Açıklama bölümü ===== */

.aciklama {
    background: rgba(15,23,42,0.4);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    backdrop-filter: blur(8px);
    margin-top: 0.5rem;
}

.aciklama h4 {
    color: #e2e8f0;
    font-weight: 600;
}

.aciklama p {
    color: #94a3b8;
}

.aciklama strong {
    color: #cbd5e1;
}

.tip-num {
    display: inline-block;
    font-weight: 700;
    min-width: 26px;
    margin-right: 4px;
    background: linear-gradient(135deg, #3b82f6, #14b8a6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== Footer ===== */

.page-footer {
    background: rgba(15,23,42,0.5) !important;
    border-top: 1px solid rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
}

.footer-copyright span {
    color: #64748b !important;
    font-size: 12px;
}

/* ===== No-gutters / Layout ===== */

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

/* ===== Responsive ===== */

@media (max-width: 576px) {
    .display-3 {
        font-size: 28px;
    }
    
    .aciklama {
        padding: 1rem 1.2rem;
    }
    
    #share-url {
        font-size: 0.8em;
    }
    
    .btn-lg {
        font-size: 0.85rem;
        padding: 0.45rem 0.8rem;
    }
    
    #entropy-canvas {
        height: 120px;
    }
    
    #autogen-btn,
    #manualgen-btn {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.6rem !important;
    }
    
    .jumbotron {
        padding: 1.5rem 1rem;
        border-radius: 0;
    }
}

@media (min-width: 576px) {
    .jumbotron {
        padding: 2.5rem 2rem;
    }
}

@media (min-width: 768px) {
    .no-pad {
        padding-left: 0px;
    }
}