/* SG YAPI — ortak stiller */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}

.thin-scrollbar::-webkit-scrollbar {
    height: 4px;
}

.thin-scrollbar::-webkit-scrollbar-track {
    background: #E8EAE6;
}

.thin-scrollbar::-webkit-scrollbar-thumb {
    background: #004ca3;
    border-radius: 4px;
}

.clip-cross-section {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

/* --- Sistem katman satiri / kesit etkilesimi --- */
.layer-band {
    transition: opacity .25s ease, stroke-width .25s ease;
}

.layer-band.is-dim {
    opacity: .28;
}

.layer-marker {
    transition: transform .25s ease;
    transform-box: fill-box;
    transform-origin: center;
}

.layer-marker.is-hot {
    transform: scale(1.25);
}

.layer-row.is-active {
    background: #ffffff;
}

/* --- Akordiyon (mobil filtre) --- */
.acc-panel {
    display: none;
}

.acc-item.is-open .acc-panel {
    display: block;
}

.acc-item.is-open .acc-chevron {
    transform: rotate(180deg);
}

.acc-chevron {
    transition: transform .2s ease;
}

/* --- Secim araci kart durumu --- */
.wizard-card.is-selected {
    border-color: #004ca3;
    border-width: 2px;
}

.wizard-card.is-selected .wizard-check {
    opacity: 1;
}

.wizard-check {
    opacity: 0;
    transition: opacity .2s ease;
}

/* --- Mobil cerceve (S10) --- */
.device-frame {
    width: 390px;
    flex: 0 0 390px;
    height: 844px;
    overflow: hidden;
    position: relative;
    background: #f8faf6;
    border: 1px solid #C9CDC8;
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(0, 28, 55, .16);
}

.device-scroll {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.device-scroll::-webkit-scrollbar {
    width: 4px;
}

.device-scroll::-webkit-scrollbar-thumb {
    background: #C9CDC8;
    border-radius: 4px;
}

/* --- Tam ekran arama katmani --- */
.sg-search {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    /* panel icerigi kadar yuksek olsun, viewport boyunca uzamasin */
    align-items: flex-start;
    padding: 0 16px;
}

.sg-search[hidden] {
    display: none;
}

.sg-search__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 28, 55, .82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: sg-fade .18s ease;
}

.sg-search__panel {
    position: relative;
    width: 100%;
    max-width: 860px;
    margin-top: min(96px, 9vh);
    max-height: calc(100vh - min(96px, 9vh) - 24px);
    display: flex;
    flex-direction: column;
    background: #f8faf6;
    border: 1px solid #001c37;
    border-radius: 4px;
    box-shadow: 0 32px 80px rgba(0, 28, 55, .45);
    animation: sg-rise .2s ease;
    overflow: hidden;
}

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

@keyframes sg-rise {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
}

.sg-search__bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 20px;
    height: 76px;
    background: #ffffff;
    border-bottom: 1px solid #C9CDC8;
    flex: 0 0 auto;
}

.sg-search__bar .material-symbols-outlined {
    color: #424753;
    flex: 0 0 auto;
}

/* Tailwind forms eklentisi input[type=search] icin cerceve/golge basiyor;
   asagidaki secici ondan daha ozel oldugu icin sade gorunum korunur. */
.sg-search__bar .sg-search__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 20px;
    color: #191c1a;
    padding: 0;
}

.sg-search__bar .sg-search__input:focus {
    border: 0;
    outline: 0;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

.sg-search__input::placeholder {
    color: #7b8090;
}

.sg-search__input::-webkit-search-cancel-button {
    display: none;
}

.sg-search__esc {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: .12em;
    color: #424753;
    border: 1px solid #C9CDC8;
    border-radius: 3px;
    padding: 4px 7px;
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .sg-search__esc {
        display: none;
    }

    .sg-search__panel {
        margin-top: 12px;
        max-height: calc(100vh - 24px);
    }

    .sg-search__input {
        font-size: 17px;
    }
}

.sg-search__close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #C9CDC8;
    border-radius: 3px;
    background: #ffffff;
    color: #424753;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.sg-search__close:hover {
    background: #004ca3;
    border-color: #004ca3;
    color: #ffffff;
}

.sg-search__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 0 16px;
    scrollbar-width: thin;
}

.sg-search__body::-webkit-scrollbar {
    width: 6px;
}

.sg-search__body::-webkit-scrollbar-thumb {
    background: #C9CDC8;
    border-radius: 4px;
}

.sg-search__group {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #424753;
    padding: 18px 24px 8px;
}

.sg-search__hit {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    text-decoration: none;
    color: inherit;
    border-left: 3px solid transparent;
}

.sg-search__hit:hover,
.sg-search__hit.is-active {
    background: #ffffff;
    border-left-color: #ffba3f;
}

.sg-search__thumb {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    background: #ffffff;
    border: 1px solid #C9CDC8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sg-search__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
}

.sg-search__thumb .material-symbols-outlined {
    font-size: 20px;
    color: #004ca3;
}

.sg-search__text {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sg-search__title {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #191c1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sg-search__title mark {
    background: #ffdeae;
    color: inherit;
    padding: 0 1px;
}

.sg-search__desc {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12.5px;
    color: #424753;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sg-search__tag {
    flex: 0 0 auto;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #424753;
    border: 1px solid #C9CDC8;
    padding: 3px 7px;
}

.sg-search__empty {
    padding: 28px 24px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 15px;
    color: #424753;
}

.sg-search__empty strong {
    color: #191c1a;
}

.sg-search__quick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 24px 8px;
}

.sg-search__quick a {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    color: #001c37;
    background: #ffffff;
    border: 1px solid #C9CDC8;
    border-radius: 3px;
    padding: 8px 14px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.sg-search__quick a:hover {
    background: #001c37;
    border-color: #001c37;
    color: #ffffff;
}

.sg-search__foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 24px;
    background: #eceeea;
    border-top: 1px solid #C9CDC8;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #424753;
}

@media (max-width: 640px) {
    .sg-search__foot span:first-child {
        display: none;
    }
}

body.sg-no-scroll {
    overflow: hidden;
}

/* --- Dokuman filtresi (dokumanlar.html) --- */
.doc-chip:hover {
    border-color: #004ca3;
    color: #004ca3;
}

.doc-chip.is-active {
    background: #001c37;
    border-color: #001c37;
    color: #ffffff;
}

/* --- Admin panelinden gelen editor icerigi (icerik-detay.aspx) --- */
.icerik-yazisi>*+* {
    margin-top: 1.15rem;
}

.icerik-yazisi h2 {
    font-family: 'Archivo Narrow', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.25;
    color: #1a1c19;
    margin-top: 2.5rem;
}

.icerik-yazisi h3 {
    font-family: 'Archivo Narrow', sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: #1a1c19;
    margin-top: 1.75rem;
}

.icerik-yazisi>h2:first-child,
.icerik-yazisi>h3:first-child {
    margin-top: 0;
}

.icerik-yazisi p,
.icerik-yazisi li {
    line-height: 1.7;
}

.icerik-yazisi strong {
    color: #1a1c19;
}

.icerik-yazisi ul,
.icerik-yazisi ol {
    padding-left: 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.icerik-yazisi ul {
    list-style: disc;
}

.icerik-yazisi ol {
    list-style: decimal;
}

.icerik-yazisi a {
    color: #004ca3;
    border-bottom: 1px solid #004ca3;
}

.icerik-yazisi a:hover {
    color: #001c37;
    border-color: #001c37;
}

.icerik-yazisi table {
    width: 100%;
    display: block;
    overflow-x: auto;
    border: 1px solid #C9CDC8;
    background: #ffffff;
    border-collapse: collapse;
}

.icerik-yazisi thead tr {
    background: #001c37;
    color: #ffffff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.icerik-yazisi th,
.icerik-yazisi td {
    padding: 14px 20px;
    text-align: left;
    vertical-align: top;
}

.icerik-yazisi tbody tr+tr {
    border-top: 1px solid #C9CDC8;
}

.icerik-yazisi blockquote {
    border-left: 2px solid #004ca3;
    padding-left: 1.25rem;
}

/* --- Yardimcilar --- */
.hairline-y>*+* {
    border-top: 1px solid #C9CDC8;
}

.masonry-3 {
    column-count: 1;
    column-gap: 24px;
}

@media (min-width: 768px) {
    .masonry-3 {
        column-count: 2;
    }
}

@media (min-width: 1024px) {
    .masonry-3 {
        column-count: 3;
    }
}

.masonry-3>* {
    break-inside: avoid;
    margin-bottom: 24px;
}