@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

:root,
[data-bs-theme="light"] {
    --nav-bg: rgba(255, 255, 255, .85);
    --nav-border: #e8e8ec;
    --nav-text: #6b6b76;
    --nav-text-active: #111114;
    --accent: #3b5bdb;
    --panel-bg: #fff;
    --hover-bg: #f8f9fa;
    --page-bg: #fafafb;
}

[data-bs-theme="dark"] {
    --nav-bg: rgba(17, 17, 20, .8);
    --nav-border: #26262c;
    --nav-text: #a0a0ab;
    --nav-text-active: #f4f4f6;
    --accent: #7c93ff;
    --panel-bg: #111114;
    --hover-bg: #1c1c21;
    --page-bg: #0c0c0e;
}

body {
    font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--page-bg);
    color: var(--nav-text-active);
    transition: background-color .2s, color .2s;
    letter-spacing: .03em;
}

a {
    text-decoration: none;
}

.btn-primary {
    border: 0 !important;
    --bs-btn-color: var(--nav-text-active);
    --bs-btn-bg: var(--hover-bg);

    /* Hover durumları */
    --bs-btn-hover-color: var(--nav-text-active);
    --bs-btn-hover-bg: var(--nav-border);

    /* Tıklanma (Active) durumları */
    --bs-btn-active-color: var(--nav-text-active);
    --bs-btn-active-bg: var(--nav-border);

    /* Odaklanma halkası */
    --bs-btn-focus-shadow-rgb: 59, 91, 219;
    transition: all 0.2s ease;
}

.navbar-minimal {
    position: sticky;
    top: 0;
    z-index: 1020;
    padding-block: .85rem;
    border-bottom: 1px solid var(--nav-border);
}

.navbar-minimal::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--nav-bg);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
}

.navbar-brand {
    font-weight: 650;
    letter-spacing: -.02em;
    color: var(--nav-text-active);
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
}

.brand-mark {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--accent);
}

.nav-link {
    color: var(--nav-text);
    font-size: .94rem;
    padding: .4rem .85rem;
    border-radius: 8px;
    transition: color .15s, background-color .15s;
    margin-inline: .15rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.nav-link:hover {
    color: var(--nav-text-active);
    background: var(--hover-bg);
}

.nav-link.active {
    color: var(--nav-text-active);
    background: var(--hover-bg);
    font-weight: 550;
}

.icon-btn {
    border: 0;
    background: none;
    padding: .45rem;
    color: var(--nav-text-active);
    line-height: 0;
    border-radius: 10px;
    transition: background-color .15s;
}

.icon-btn:hover {
    background: var(--hover-bg);
}

.nav-link:focus-visible,
.icon-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Tema ikonu: açıkta ay, koyuda güneş */
.icon-sun {
    display: none;
}

[data-bs-theme="dark"] .icon-sun {
    display: block;
}

[data-bs-theme="dark"] .icon-moon {
    display: none;
}

.sidebar {
    width: 280px;
    background: var(--panel-bg);
    border-right: 1px solid var(--nav-border);
}

.sidebar .offcanvas-header {
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--nav-border);
}

.sidebar .offcanvas-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.sidebar .nav-link {
    padding: .65rem .85rem;
    font-size: 1rem;
}

.offcanvas-backdrop.show {
    opacity: .35;
}

@media (prefers-reduced-motion: reduce) {

    .offcanvas,
    body {
        transition: none;
    }
}

.text-tld {
    position: relative;
    display: inline-block;
    isolation: isolate;
    font-weight: 600;
    color: transparent;
    background: linear-gradient(135deg, #ff4d4d, #dc3545);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Yazının arkasındaki yuvarlak vurgu */
.text-tld::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -15px;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    z-index: -1;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.15), rgba(255, 77, 77, 0.15));
}

[data-bs-theme="dark"] .text-tld::before {
    background: linear-gradient(135deg, rgba(255, 77, 77, 0.2), rgba(220, 53, 69, 0.2));
}

.marker {
    display: inline-block;
    background: #dc3545;
    padding: .05em .5em;
    transform: skewX(-12deg)
}

.marker span {
    display: inline-block;
    color: #fff;
    transform: skewX(12deg);
}


.bd-callout {
    --bs-link-color-rgb: var(--bd-callout-link);
    --bs-code-color: var(--bd-callout-code-color);
    padding: 0.25rem 1rem;
    color: var(--bd-callout-color, inherit);
    background-color: var(--bd-callout-bg, var(--bs-gray-100));
    border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
    border-right: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
}

.bd-callout-success {
    --bd-callout-color: var(--bs-success-text-emphasis);
    --bd-callout-bg: var(--bs-success-bg-subtle);
    --bd-callout-border: var(--bs-success-border-subtle)
}

.bd-callout-danger {
    --bd-callout-color: var(--bs-danger-text-emphasis);
    --bd-callout-bg: var(--bs-danger-bg-subtle);
    --bd-callout-border: var(--bs-danger-border-subtle)
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
}

@keyframes fade-out {
    to {
        opacity: 0;
    }
}

@keyframes slide-from-right {
    from {
        transform: translateX(90px);
    }
}

@keyframes slide-to-left {
    to {
        transform: translateX(-90px);
    }
}

/* define animations for the old and new content */
::view-transition-old(slide-it) {
    animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
        600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(slide-it) {
    animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
        600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* tie the view transition to a given CSS class */
.sample-transition {
    view-transition-name: slide-it;
}

.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-flex;
}

@media (max-width: 575.98px) {
    .whois-input-group {
        flex-wrap: wrap;
    }

    .whois-input-group .form-control {
        min-width: 0;
        flex: 1 1 0;
    }

    .whois-input-group > .btn {
        flex: 0 0 100%;
        width: 100%;
        justify-content: center;
        margin-top: .5rem;
        border-radius: var(--bs-border-radius) !important;
    }
}