/* =========================================================
   TIMECAPSULE – CLEAN & STABLE THEME
   (Teal ana renk + minik turuncu vurgu)
   ========================================================= */

/* ---------------- BASE ---------------- */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

:root {
    --tc-main: #0f6f8c;
    --tc-main-dark: #0b5f78;
    --tc-main-soft: #e6f2f6;
    --tc-header: #095a72;
    --tc-accent: #ff751f;
    --tc-text: #0f172a;
    --tc-muted: #64748b;
    /* senin dosyada rgba(...,18) gibi hatalı yazılmış, düzelttim */
    --tc-border: rgba(15,111,140,.18);
    --tc-danger: #e24b4b;
    --tc-danger-dark: #c73c3c;
    --tc-danger-soft: rgba(226,75,75,.10);
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(180deg, #f7fafc 0%, #f3f8fb 100%);
    color: var(--tc-text);
    font-weight: 400;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans";
}

.page-wrapper {
    flex: 1;
    padding-top: 24px;
}

/* Focus ring */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus, .nav-link:focus {
    box-shadow: 0 0 0 .12rem #fff, 0 0 0 .32rem rgba(15,111,140,.24) !important;
}

/* Headings */
h1, h2, h3, h4, h5 {
    font-weight: 600;
    letter-spacing: .15px;
}

/* =========================================================
   TOP BAR (SENİN LAYOUT İLE %100 UYUMLU)
   Header: <header class="topbar-wrap">
   Nav:    <nav class="topbar navbar ...">
   Links:  <ul class="navbar-nav ... nav-modern"> <a class="nav-link ...">Sorgula</a>
   CTA:    <a class="btn btn-soft">Yeni Mektup</a>
   ========================================================= */

.topbar-wrap {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--tc-border);
}

/* Navbar padding / hizalama */
.topbar.navbar {
    padding-top: .85rem;
    padding-bottom: .85rem;
}

/* Logo */
.topbar-wrap .brand img {
    height: 80px;
    width: auto;
    display: block;
}

/* Nav list */
.nav-modern {
    gap: 10px;
}

/* --- SORGULA (nav-link’i buton gibi yap) --- */
.topbar-wrap .nav-actions .btn-tc-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: .58rem 1.05rem !important;
    border-radius: 16px !important;
    border: 1px solid rgba(15,111,140,.35) !important;
    background: #fff !important;
    color: var(--tc-main) !important;
    font-weight: 500 !important;
    letter-spacing: .15px !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: all .15s ease !important;
}

    /* hover/focus/active: yazı ASLA siyaha dönmesin */
    .topbar-wrap .nav-actions .btn-tc-link:hover,
    .topbar-wrap .nav-actions .btn-tc-link:focus,
    .topbar-wrap .nav-actions .btn-tc-link:active {
        background: var(--tc-main-soft) !important;
        border-color: rgba(15,111,140,.55) !important;
        color: var(--tc-main) !important;
    }

    /* aktif sayfa */
    .topbar-wrap .nav-actions .btn-tc-link.active {
        background: var(--tc-main) !important;
        border-color: var(--tc-main) !important;
        color: #fff !important;
        box-shadow: 0 10px 24px rgba(15,111,140,.18) !important;
        position: relative;
    }

        /* active için turuncu minik nokta */
        .topbar-wrap .nav-actions .btn-tc-link.active::after {
            content: "";
            position: absolute;
            right: 10px;
            top: 8px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--tc-accent);
        }

/* --- YENİ MEKTUP (btn btn-soft) --- */
.topbar-wrap a.btn.btn-soft {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: .60rem 1.15rem !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, var(--tc-main) 0%, var(--tc-main-dark) 100%) !important;
    border: 1px solid rgba(15,111,140,.20) !important;
    color: #fff !important;
    font-weight: 500 !important;
    letter-spacing: .2px !important;
    text-decoration: none !important;
    box-shadow: 0 12px 26px rgba(15,111,140,.22) !important;
    transition: all .15s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

/* turuncu mikro detay: sol kenarda mini çizgi (BOZMAZ, modern durur) */
.topbar-wrap a.btn.btn-soft {
    border-bottom: 3px solid var(--tc-accent) !important;
}

    /* hover */
    .topbar-wrap a.btn.btn-soft:hover,
    .topbar-wrap a.btn.btn-soft:focus,
    .topbar-wrap a.btn.btn-soft:active {
        transform: translateY(-1px) !important;
        background: linear-gradient(135deg, var(--tc-main-dark) 0%, #094e62 100%) !important;
        color: #fff !important;
        box-shadow: 0 16px 34px rgba(15,111,140,.30) !important;
    }

    /* Bootstrap bazen hover-color basar -> kilit */
    .topbar-wrap a.btn.btn-soft,
    .topbar-wrap a.btn.btn-soft:hover,
    .topbar-wrap a.btn.btn-soft:focus,
    .topbar-wrap a.btn.btn-soft:active {
        --bs-btn-color: #fff;
        --bs-btn-hover-color: #fff;
        --bs-btn-active-color: #fff;
    }

/* =========================================================
   CARD / FORM (SENİN GÜZEL DEDİĞİN KISIMLAR)
   ========================================================= */

.tc-card {
    border: 1px solid var(--tc-border);
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15,111,140,.10), 0 2px 6px rgba(15,111,140,.06);
}

.tc-card-header {
    background: linear-gradient(180deg, var(--tc-main-dark) 0%, var(--tc-header) 100%);
    color: #fff !important;
    padding: 18px 22px;
    position: relative;
}

    .tc-card-header::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: var(--tc-accent);
        opacity: .85;
    }

    .tc-card-header h3 {
        margin: 0;
        font-weight: 600;
        letter-spacing: .25px;
    }

    .tc-card-header small {
        display: block;
        margin-top: 4px;
        color: rgba(255,255,255,.85) !important;
        font-weight: 400;
    }

.form-control {
    border-radius: 14px;
    border-color: rgba(15,111,140,.22);
    padding: .7rem .9rem;
    background: #fff;
}

    .form-control:focus {
        border-color: var(--tc-main);
        box-shadow: 0 0 0 .2rem rgba(15,111,140,.15);
    }

/* Preset’ler: senin markup btn-outline-dark, bunu kapsayıcıyla hedefleyelim */
.tc-preset .btn {
    position: relative;
    border-radius: 10px !important;
    margin-right: 5px;
    font-weight: 500;
    background: #fff;
}

.tc-preset .btn-check:checked + .btn {
    background: var(--tc-main-soft);
    border-color: var(--tc-main);
    color: var(--tc-main);
}

    /* aktif preset turuncu nokta */
    .tc-preset .btn-check:checked + .btn::after {
        content: "";
        position: absolute;
        top: 6px;
        right: 8px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--tc-accent);
    }

/* Footer hint + submit aynı hizada */
.tc-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px dashed rgba(15,111,140,.18);
}

.tc-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--tc-muted);
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.25;
    flex: 1 1 auto;
    min-width: 0;
}

.secure-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--tc-main);
    box-shadow: 0 0 0 5px rgba(15,111,140,.15);
    flex: 0 0 auto;
}

.capsule-submit-btn {
    background: linear-gradient(135deg, var(--tc-main) 0%, var(--tc-main-dark) 100%) !important;
    color: #fff !important;
    font-weight: 500 !important;
    letter-spacing: .2px;
    border-radius: 16px;
    border: none;
    padding: .7rem 1.2rem;
    white-space: nowrap;
    box-shadow: 0 12px 28px rgba(15,111,140,.35);
    transition: all .15s ease;
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
    /* minik turuncu vurgu */
    border-bottom: 3px solid var(--tc-accent);
}

    .capsule-submit-btn:hover,
    .capsule-submit-btn:focus,
    .capsule-submit-btn:active {
        background: linear-gradient(135deg, var(--tc-main-dark) 0%, #094e62 100%) !important;
        color: #fff !important;
        transform: translateY(-1px);
    }

/* Footer */
.footer-soft {
    padding: 24px 0;
    border-top: 1px solid rgba(15,23,42,.06);
    margin-top: 60px;
    background: #fff;
}

/* Mobile */
@media (max-width: 991.98px) {
    .topbar-wrap .brand img {
        height: 64px;
    }

    .tc-form-footer {
        flex-wrap: wrap;
        align-items: stretch;
    }

    .capsule-submit-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Ortak buton tabanı */
.tc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: .58rem 1.05rem;
    border-radius: 16px;
    font-weight: 500;
    letter-spacing: .15px;
    text-decoration: none;
    border: 1px solid transparent;
    background: #fff;
    transition: all .15s ease;
    user-select: none;
    /* Bootstrap ile birlikte kullanınca da stabil kalsın */
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
}

    /* Hover’da minik yükselme (topbar ile uyumlu) */
    .tc-btn:hover {
        transform: translateY(-1px);
    }

    /* Focus ring: senin global focus stilinle uyumlu */
    .tc-btn:focus,
    .tc-btn:active:focus {
        box-shadow: 0 0 0 .12rem #fff, 0 0 0 .32rem rgba(15,111,140,.24) !important;
    }

    /* Disabled */
    .tc-btn:disabled,
    .tc-btn.disabled {
        opacity: .6;
        pointer-events: none;
        transform: none;
    }

/* --- SORGULA (Primary) --- */
.tc-btn--query {
    background: linear-gradient(135deg, var(--tc-main) 0%, var(--tc-main-dark) 100%);
    color: #fff !important;
    border-color: rgba(15,111,140,.20);
    box-shadow: 0 12px 26px rgba(15,111,140,.22);
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid var(--tc-accent); /* turuncu mikro vurgu */
}

    .tc-btn--query:hover,
    .tc-btn--query:focus,
    .tc-btn--query:active {
        background: linear-gradient(135deg, var(--tc-main-dark) 0%, #094e62 100%);
        color: #fff !important;
        box-shadow: 0 16px 34px rgba(15,111,140,.30);
    }

/* --- DÜZENLE (Soft / Ghost) --- */
.tc-btn--edit {
    background: #fff;
    color: var(--tc-main) !important;
    border-color: rgba(15,111,140,.35);
    box-shadow: 0 10px 22px rgba(15,111,140,.08);
    position: relative;
}

    .tc-btn--edit:hover,
    .tc-btn--edit:focus,
    .tc-btn--edit:active {
        background: var(--tc-main-soft);
        border-color: rgba(15,111,140,.55);
        color: var(--tc-main) !important;
        box-shadow: 0 14px 26px rgba(15,111,140,.12);
    }

    /* Düzenle’ye mini turuncu nokta (senin “active dot” mantığıyla uyumlu) */
    .tc-btn--edit::after {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--tc-accent);
        opacity: .85;
    }

/* --- İPTAL ET (Danger outline ama tema ile yumuşak) --- */
.tc-btn--cancel {
    background: #fff;
    color: var(--tc-danger) !important;
    border-color: rgba(226,75,75,.45);
    box-shadow: 0 10px 22px rgba(226,75,75,.10);
}

    .tc-btn--cancel:hover,
    .tc-btn--cancel:focus,
    .tc-btn--cancel:active {
        background: var(--tc-danger-soft);
        border-color: rgba(226,75,75,.65);
        color: var(--tc-danger-dark) !important;
        box-shadow: 0 14px 26px rgba(226,75,75,.16);
    }

/* Aksiyon butonları yan yana ise daha derli toplu dursun */
.tc-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* Mobilde tam genişlik istersen */
@media (max-width: 576px) {
    .tc-actions .tc-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   INPUT + SORGULA BUTONU ARASI BOŞLUK FIX
   (Sadece TimeCapsule lookup alanı)
   ========================================================= */

/* input-group içindeki boşlukları sıfırla */
.tc-inputgroup {
    gap: 0 !important;
}

    /* Input ile butonun birleşik görünmesi */
    .tc-inputgroup .form-control {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* Sorgula butonu inputa yapışsın */
    .tc-inputgroup .tc-btn--query {
        margin-left: -1px; /* border çakışmasını yok eder */
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    /* Hover/focus'ta araya çizgi girmesin */
    .tc-inputgroup .form-control:focus {
        position: relative;
        z-index: 2;
    }

    .tc-inputgroup .tc-btn--query {
        position: relative;
        z-index: 1;
    }


.tc-success-box {
    border-radius: 16px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #e9f7fb 0%, #f6fcfe 100%);
    border: 1px solid rgba(15,111,140,.25);
}

.tc-success-title {
    font-weight: 600;
    font-size: 15px;
    color: #0f6f8c;
    /*display: flex;*/
    align-items: center;
    gap: 8px;
}

.tc-success-id {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tc-success-label {
    font-size: 13px;
    color: #6c757d;
}

.tc-success-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px dashed rgba(15,111,140,.4);
    color: #0f6f8c;
}

.tc-copy-btn {
    background: #0f6f8c;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    transition: all .15s ease;
}

    .tc-copy-btn:hover {
        background: #0b5c73;
    }

.tc-success-info {
    margin-top: 10px;
    font-size: 13px;
    color: #6c757d;
}

.tc-manage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    text-decoration: none;
    background: #ffffff;
    color: #0f6f8c;
    border: 1px solid rgba(15,111,140,.35);
    transition: all .15s ease;
}

    .tc-manage-btn:hover {
        background: rgba(15,111,140,.08);
        border-color: rgba(15,111,140,.55);
        color: #0b5c73;
    }


.tc-copy-btn,
.tc-manage-btn {
    white-space: nowrap; /* metin iki satıra bölünmesin */
}

/* =========================================================
   MANAGE PAGE – MINIMAL PATCH (BOZMAZ)
   ========================================================= */

.tc-section-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--tc-text);
    letter-spacing: .15px;
}

.tc-soft-note {
    font-size: 13px;
    color: var(--tc-muted);
    line-height: 1.35;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(15,111,140,.06);
    border: 1px dashed rgba(15,111,140,.18);
}

/* Görsel çerçevesi */
.tc-image-frame {
    display: inline-block;
    padding: 10px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(15,111,140,.18);
    box-shadow: 0 10px 22px rgba(15,111,140,.06);
}

.tc-image {
    display: block;
    width: 280px;
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}

/* Ikonlu aksiyon butonları */
.tc-iconbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .50rem .85rem;
    border-radius: 14px;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .15px;
    background: #fff;
    border: 1px solid rgba(15,111,140,.28);
    color: var(--tc-main);
    transition: all .15s ease;
}

    .tc-iconbtn:hover {
        transform: translateY(-1px);
        background: var(--tc-main-soft);
        border-color: rgba(15,111,140,.45);
        color: var(--tc-main);
    }

.tc-iconbtn--danger {
    border-color: rgba(226,75,75,.45);
    color: var(--tc-danger) !important;
    background: #fff;
}

    .tc-iconbtn--danger:hover {
        background: var(--tc-danger-soft);
        border-color: rgba(226,75,75,.65);
        color: var(--tc-danger-dark) !important;
    }

.tc-icon {
    font-size: 16px;
    line-height: 1;
}