/* ════════════════════════════════════════════
   ulu_galeri_modern.css  — v=49
   Ana site (custom.css) ile birebir uyumlu
   gece/gündüz + mobil first
   ════════════════════════════════════════════ */

/* ── CSS Değişkenleri: light (main site :root ile aynı) ── */
:root {
    --body-text: #333;
    --body-background: #fff;
    --theme-color: #533bb3;
    --border-color: rgb(233, 233, 233);
    --bg-hover: #f1f1f1;
    --input-background: #fff;
    --left-text-color: #333;
    /* galeri özgü */
    --galeri-teal: #194650;
    --galeri-accent: #1c9db8;  /* light: darker cyan, WCAG AA on white */
    --galeri-body-bg: #fff;
    --galeri-nav-bg: #eef6f8;
    --galeri-nav-border: rgba(0, 0, 0, 0.08);
    --galeri-pill-text: #555;
    --galeri-pill-border: rgba(0, 0, 0, 0.18);
    --galeri-pill-hover: rgba(0, 0, 0, 0.06);
    --galeri-img-bg: #0d2e3a;
    --galeri-title-color: #555;
    --galeri-sagkisim-bg: rgba(155, 220, 230, 0.27);
    --galeri-sagkisim-border: #ccc;
}

/* ── CSS Değişkenleri: dark (main site .dark-theme ile aynı) ── */
.dark-theme {
    --body-text: #bebebe;
    --body-background: #282828;
    --theme-color: #987eff;
    --border-color: #505050;
    --bg-hover: #1f1f1f;
    --input-background: #454545;
    --left-text-color: #a1a1a1;
    /* galeri özgü — dark overrides */
    --galeri-accent: #39B8EF;  /* dark: bright cyan, good on dark bg */
    --galeri-body-bg: #282828;
    --galeri-nav-bg: #1a2a2f;
    --galeri-nav-border: rgba(255, 255, 255, 0.08);
    --galeri-pill-text: #999;
    --galeri-pill-border: rgba(255, 255, 255, 0.18);
    --galeri-pill-hover: rgba(255, 255, 255, 0.07);
    --galeri-img-bg: #1f1f1f;
    --galeri-title-color: #aaa;
    --galeri-sagkisim-bg: rgba(30, 30, 30, 0.5);
    --galeri-sagkisim-border: #444;
}

/* ════════════════════════════════════════════
   BODY & GENEL ARKAPLAN
   ════════════════════════════════════════════ */

body#galeribody {
    background-color: var(--galeri-body-bg);
    color: var(--body-text);
}

#bg {
    background-color: var(--galeri-body-bg);
    transition: background-color 0.2s;
}

/* ════════════════════════════════════════════
   ÜST BAR: küçük link satırı (#ust-0) + logo/arama (#ust-a)
   ════════════════════════════════════════════ */

#ust-0 {
    width: auto !important;
    max-width: 920px !important;
    margin: 0 auto !important;
    box-sizing: border-box;
    color: rgba(255, 255, 255, 0.7);
    padding-right: 16px !important;
}

.dark-theme #ust-0 {
    color: var(--left-text-color);
}

#ust-0 a, #ust-0 a:link, #ust-0 a:visited {
    color: rgba(255, 255, 255, 0.7) !important;
}

.dark-theme #ust-0 a, .dark-theme #ust-0 a:link, .dark-theme #ust-0 a:visited {
    color: var(--left-text-color) !important;
}

#ust-0 a:hover { color: #fff !important; }
.dark-theme #ust-0 a:hover { color: var(--body-text) !important; }

#ust-a {
    max-width: 920px !important;
    width: 96% !important;
    margin: 0 auto !important;
    box-sizing: border-box;
}

#ust-a-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

#search-area {
    flex: 1;
    text-align: right;
    position: relative;
}

/* Logo metni */
#barlogotext {
    font-size: 20px;
    font-weight: 700;
    color: var(--theme-color);
    letter-spacing: -0.3px;
    display: inline-block;
}

/* Infinity scroll sentinel + loading */
#gi-sentinel { height: 1px; }
#gi-loading { color: var(--left-text-color); font-size: 13px; }

/* Nav grup ayırıcı */
.gn-spacer {
    flex: 1;
    min-width: 8px;
}

/* Reklam alanı: eski CSS min-height:257px override — login'de PHP div render etmez
   ama PHP upload edilmemişse boş div 257px yer kaplar; bu onu sıfırlar */
.adulu_col-main-ulu {
    min-height: 0 !important;
}

/* ── #ic-container iki kolon layout ── */
#ic-layout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

#solkisim {
    flex: 1;
    min-width: 0;
    max-width: 100%;
}

#sagkisim {
    flex-shrink: 0;
    width: 150px;
    float: none !important;
}

/* ── Arama çubuğu — sade, gece/gündüz uyumlu ── */
.search-bar-wrap {
    display: inline-flex;
    align-items: center;
    background: var(--input-background);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    padding: 3px 3px 3px 10px;
    gap: 6px;
    max-width: 340px;
    width: 100%;
    transition: border-color 0.15s;
}

.search-bar-wrap:focus-within {
    border-color: #9a9a9a;
}

.dark-theme .search-bar-wrap:focus-within {
    border-color: #6a6a6a;
}

.search-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.35;
    color: var(--body-text);
    pointer-events: none;
}

/* Arama inputu */
#yukk {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 5px 0 !important;
    flex: 1;
    min-width: 90px;
    font-size: 13px;
    color: var(--body-text) !important;
}

/* input#yara: eski CSS'te input#yara{background:#fff!important} var (specificity 0,1,1) */
input#yara {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--body-text) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 5px !important;
    padding: 4px 10px !important;
    cursor: pointer;
    font-size: 12px;
    width: auto !important;
    flex-shrink: 0;
    transition: background 0.12s;
}

input#yara:hover {
    background: var(--bg-hover) !important;
}

.dark-theme input#yara {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--body-text) !important;
    border-color: var(--border-color) !important;
}

/* Arama önerileri dropdown */
#span_basliktavsiye0 {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    right: 0;
    width: 100%;
    max-width: 340px;
    z-index: 200;
    display: block !important;
    text-align: left;
}

#span_basliktavsiye:not(.s-visible) {
    display: none !important;
    border: none !important;
    box-shadow: none !important;
}

#span_basliktavsiye {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    background: var(--body-background);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}

.dark-theme #span_basliktavsiye {
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}

#span_basliktavsiye a, #span_basliktavsiye a:visited {
    background-color: var(--body-background) !important;
    color: var(--body-text) !important;
    border-top-color: var(--border-color) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    display: block !important;
}

#span_basliktavsiye a:first-child {
    border-top: none !important;
}

#span_basliktavsiye a:hover,
#span_basliktavsiye a.s-nav-active {
    background-color: var(--bg-hover) !important;
    color: var(--body-text) !important;
}

/* ════════════════════════════════════════════
   NAV BAR — modern, temiz, gece/gündüz uyumlu
   ════════════════════════════════════════════ */

#ust {
    width: 96% !important;
    max-width: 920px !important;
    margin: 0 auto !important;
    box-sizing: border-box;
}

/* #ustbarci: dropdown paneller için position: relative */
#ustbarci {
    background: transparent !important;
    background-image: none !important;
    height: auto !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin-bottom: 8px;
    position: relative;
}

/* Pill bar */
#galeri-nav {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 10px 14px;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border: 1px solid var(--galeri-nav-border);
    border-radius: 16px;
}

#galeri-nav::-webkit-scrollbar { display: none; }

/* Tüm pill öğeleri
   !important zorunlu: ulu_galeri_yeni.css'de #ustbarci a:visited{color:#fff}
   var (ID özgüllüğü) bizim class kurallarımızı eziyor */
.gn-item {
    display: inline-flex;
    align-items: center;
    padding: 5px 13px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--galeri-pill-text) !important;
    text-decoration: none !important;
    border: 1px solid var(--galeri-pill-border);
    background: transparent;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.gn-item:link, .gn-item:visited {
    color: var(--galeri-pill-text) !important;
    text-decoration: none !important;
}

.gn-item:hover {
    background: var(--galeri-pill-hover) !important;
    text-decoration: none !important;
}

/* Aktif kategori — mor yerine sade koyu kenarlık + bold */
.gn-active,
.gn-active:link,
.gn-active:visited {
    background: var(--bg-hover) !important;
    color: var(--body-text) !important;
    border-color: rgba(0, 0, 0, 0.32) !important;
    font-weight: 600;
}

.gn-active:hover {
    background: var(--bg-hover) !important;
    opacity: 1;
}

.dark-theme .gn-active,
.dark-theme .gn-active:link,
.dark-theme .gn-active:visited {
    background: var(--bg-hover) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: var(--body-text) !important;
    font-weight: 600;
}

/* İkincil linkler (son başlıklar, kendi eklediklerim) */
.gn-sec,
.gn-sec:link,
.gn-sec:visited {
    color: var(--left-text-color) !important;
    border-color: var(--border-color) !important;
    font-weight: 400;
    opacity: 0.75;
}

.gn-sec:hover { opacity: 1; }

/* Hızlı ekle — sıradan pill gibi */
.gn-add,
.gn-add:link,
.gn-add:visited {
    background: transparent !important;
    color: var(--galeri-pill-text) !important;
    border-color: var(--galeri-pill-border) !important;
    font-weight: 400;
    opacity: 1;
}

.gn-add:hover {
    background: var(--galeri-pill-hover) !important;
    border-color: var(--galeri-pill-border) !important;
}

/* "tümü ▾" butonu */
.gn-all-btn {
    font-family: inherit;
    cursor: pointer;
    margin-left: auto;
    flex-shrink: 0;
    color: var(--galeri-pill-text);
    border-color: var(--galeri-pill-border);
}

.gn-all-btn.gn-all-active,
.gn-all-btn.gn-all-active:link,
.gn-all-btn.gn-all-active:visited {
    background: var(--bg-hover) !important;
    color: var(--body-text) !important;
    border-color: rgba(0, 0, 0, 0.32) !important;
    font-weight: 600;
}

.dark-theme .gn-all-btn.gn-all-active {
    background: var(--bg-hover) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: var(--body-text) !important;
    font-weight: 600;
}

/* Kategoriler paneli */
#gn-all-panel {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 2px);
    background: var(--body-background);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    z-index: 300;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
    overflow: hidden;
    padding: 12px 14px;
    gap: 6px;
    max-width: 520px;
    min-width: 260px;
}

#gn-all-panel.gn-all-open {
    display: flex;
    flex-wrap: wrap;
}

/* View toggle — grid/liste/sıra butonları: kenarlıksız, renksiz */
.gn-view-toggle,
.gn-view-toggle:link,
.gn-view-toggle:visited {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    border: none !important;
    border-radius: 0;
    background: transparent !important;
    color: var(--left-text-color) !important;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.gn-view-toggle:hover {
    background: transparent !important;
    color: var(--body-text) !important;
    text-decoration: none !important;
    opacity: 1;
}

.gn-view-toggle.gn-active,
.gn-view-toggle.gn-active:link,
.gn-view-toggle.gn-active:visited {
    background: transparent !important;
    border: none !important;
    color: var(--body-text) !important;
    font-weight: 700;
    opacity: 1;
}

.gn-view-toggle.gn-active:hover {
    background: transparent !important;
}

/* ════════════════════════════════════════════
   İÇERİK CONTAINER
   ════════════════════════════════════════════ */

#ic-container {
    background-color: var(--body-background);
    color: var(--body-text);
    transition: background-color 0.2s, color 0.2s;
}

/* link rengi: dark modda ana site --theme-color ile aynı */
.dark-theme #ic-container a,
.dark-theme #ic-container a:link,
.dark-theme #ic-container a:visited {
    color: var(--theme-color);
}

.dark-theme #ic-container a:hover {
    color: var(--galeri-accent);
}

/* ════════════════════════════════════════════
   ANA GALERİ GRİD
   ════════════════════════════════════════════ */

div#galeri-main {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 8px;
    row-gap: 20px;
    margin-top: 16px;
    width: 100%;
    box-sizing: border-box;
}

div#galeri-main:not(.gv-liste) > *:not(.g-card):not(.galeri-cat) {
    display: none !important;
}

div#galeri-main > .g-card {
    min-width: 0;
    overflow: hidden;
    display: block;
    text-decoration: none;
    background: transparent;
}

.g-img-wrap {
    display: block;
    text-decoration: none;
}

.g-img {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--galeri-img-bg);
    width: 100%;
}

.g-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.g-title {
    padding-top: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 11px;
    color: var(--galeri-title-color);
    text-decoration: none;
    overflow: hidden;
    line-height: 1.4;
}

/* !important: .dark-theme #ic-container a:visited (ID specificity) override'ını ezer */
.g-title,
.g-title:link,
.g-title:visited { color: var(--galeri-title-color) !important; text-decoration: none !important; }
.g-title:hover { color: var(--galeri-teal) !important; text-decoration: underline !important; }
.dark-theme .g-title:hover { color: var(--galeri-accent) !important; }

/* ════════════════════════════════════════════
   GÖRÜNÜM TOGGLE (grid / liste) — link tabanlı
   ════════════════════════════════════════════ */

#gv-toggle {
    display: flex;
    gap: 6px;
    padding: 8px 0 4px;
    align-items: center;
}

.gv-btn,
.gv-btn:link,
.gv-btn:visited {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    font-size: 12px;
    font-family: inherit;
    background: transparent;
    color: var(--body-text) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.gv-btn:hover {
    background: var(--bg-hover);
    text-decoration: none !important;
}

.gv-btn.gv-btn-active,
.gv-btn.gv-btn-active:link,
.gv-btn.gv-btn-active:visited {
    background: var(--bg-hover) !important;
    color: var(--body-text) !important;
    border-color: var(--border-color) !important;
    font-weight: 600;
}

/* ════════════════════════════════════════════
   LİSTE MODU — Instagram feed
   ════════════════════════════════════════════ */

#galeri-main.gv-liste {
    display: block !important;
    grid-template-columns: none !important;
    margin: 8px auto 0;
    max-width: 640px;
    width: 100%;
}

.gi-card {
    border-bottom: none;
    margin-bottom: 48px;
    padding-bottom: 0;
}

.gi-card:last-child {
    margin-bottom: 24px;
}

.gi-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0 8px;
}

.gi-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}

.gi-uname {
    font-size: 13px;
    font-weight: 600;
    color: var(--body-text);
}

.gi-uname-link,
.gi-uname-link:link,
.gi-uname-link:visited {
    color: var(--body-text) !important;
    text-decoration: none;
}

.gi-uname-link:hover {
    color: var(--body-text) !important;
    text-decoration: underline;
}

.gi-time {
    margin-left: auto;
    font-size: 11px;
    color: var(--left-text-color);
    white-space: nowrap;
}

.gi-img-link {
    display: block;
    width: 100%;
    text-decoration: none;
}

.gi-img-link img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 560px;
    object-fit: cover;
    border-radius: 4px;
}

.gi-footer {
    padding: 10px 0 0;
}

.gi-title-list,
.gi-title-list:link,
.gi-title-list:visited {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--body-text) !important;
    text-decoration: none !important;
}

.gi-title-list:hover {
    text-decoration: underline !important;
    color: var(--galeri-teal) !important;
}

.dark-theme .gi-title-list:hover {
    color: var(--galeri-accent) !important;
}

.gi-cat-link,
.gi-cat-link:link,
.gi-cat-link:visited,
.gi-cat-link:hover,
.dark-theme .gi-cat-link:hover {
    display: block;
    font-size: 12px;
    font-weight: 300;
    color: #aaa !important;
    text-decoration: none !important;
    margin-top: 3px;
}

/* ════════════════════════════════════════════
   SAĞ KISIM (sidebar)
   ════════════════════════════════════════════ */

#sagkisim {
    background: transparent !important;
    border: none !important;
    color: var(--body-text) !important;
    padding: 0 !important;
}

#sagkisim li a, #sagkisim li a:link, #sagkisim li a:visited {
    color: var(--left-text-color) !important;
    font-size: 0.9em;
    text-decoration: none;
}

#sagkisim li a:hover { color: var(--galeri-accent) !important; }

/* ────── SON EKLENENLER ────── */

#son-eklenenler {
    width: 100% !important;
    text-align: left !important;
    overflow: hidden;
}

#son-eklenenler::before {
    content: "son eklenenler";
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--left-text-color);
    opacity: 0.45;
    padding-bottom: 8px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--border-color);
}

#son-eklenenler div {
    padding: 10px 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--border-color);
}

#son-eklenenler div:last-child {
    border-bottom: none;
    padding-bottom: 0 !important;
}

/* Resim linki — overflow hidden + rounded clip */
#son-eklenenler div > a:first-child {
    display: block;
    overflow: hidden;
    border-radius: 6px;
    line-height: 0;
}

#son-eklenenler div img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0.88;
    transition: opacity 0.18s, transform 0.18s;
}

#son-eklenenler div:hover img {
    opacity: 1;
    transform: scale(1.03);
}

/* Başlık */
#son-eklenenler strong {
    display: block;
    margin-top: 7px;
}

#son-eklenenler strong a,
#son-eklenenler strong a:link,
#son-eklenenler strong a:visited {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--body-text) !important;
    text-decoration: none !important;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#son-eklenenler strong a:hover {
    color: var(--galeri-accent) !important;
}

#son-eklenenler div a,
#son-eklenenler div a:link,
#son-eklenenler div a:visited {
    color: var(--body-text) !important;
    text-decoration: none !important;
}

#son-eklenenler div a:hover {
    color: var(--galeri-accent) !important;
}

/* Kullanıcı adı */
#son-eklenenler div small {
    display: block;
    font-size: 10px !important;
    font-weight: 500 !important;
    color: var(--left-text-color) !important;
    opacity: 0.55;
    margin-top: 3px;
}

/* ════════════════════════════════════════════
   FOOTER (#alt)
   ════════════════════════════════════════════ */

#alt {
    color: var(--left-text-color) !important;
    opacity: 1;
    margin-top: 28px;
    padding: 20px 0 32px !important;
    border-top: 1px solid var(--border-color);
    text-align: center;
    width: 96% !important;
    max-width: 920px !important;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    clear: both;
}

/* © yıl */
#alt div {
    color: var(--left-text-color) !important;
    font-size: 12px !important;
    font-weight: 600;
    opacity: 0.45;
    margin-bottom: 8px !important;
}

/* Açıklama metni */
#alt span {
    display: block;
    font-size: 11px !important;
    color: var(--left-text-color) !important;
    opacity: 0.38;
    line-height: 1.65;
    max-width: 500px;
    margin: 0 auto;
    padding-top: 0 !important;
}

#alt a, #alt a:link, #alt a:visited {
    color: var(--galeri-accent) !important;
    text-decoration: none;
    opacity: 1;
}

#alt a:hover {
    text-decoration: underline;
}

/* ════════════════════════════════════════════
   RESİM DETAY SAYFASI
   ════════════════════════════════════════════ */

#resimler {
    text-align: center;
    background-color: var(--body-background);
    color: var(--body-text);
}

.dark-theme #resimler {
    border-color: var(--border-color);
}

#ilerigeri {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 12px auto 8px;
    float: none !important;
}

#ilerigeri-orta {
    display: flex;
    gap: 6px;
}

#ilerigeri .button,
#ilerigeri a.button {
    display: inline-block !important;
    float: none !important;
    padding: 5px 16px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    color: var(--body-text) !important;
    background: var(--body-background) !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    line-height: 1.5 !important;
    cursor: pointer;
    transition: all 0.15s;
}

#ilerigeri .button:hover,
#ilerigeri a.button:hover {
    background: var(--galeri-teal) !important;
    color: #fff !important;
    border-color: var(--galeri-teal) !important;
}

.dark-theme #ilerigeri .button:hover,
.dark-theme #ilerigeri a.button:hover {
    background: var(--galeri-nav-bg) !important;
    border-color: var(--galeri-accent) !important;
}

/* Üye/tarih bilgisi */
#uye-tarih {
    text-align: center;
    font-size: 11px;
    color: var(--left-text-color);
    margin: 8px 0 6px;
    padding: 0;
    background: none !important;
}

#uye-tarih a, #uye-tarih a:link, #uye-tarih a:visited {
    color: var(--galeri-accent);
    text-decoration: none;
    margin: 0 2px;
}

#uye-tarih a:hover { text-decoration: underline; }

/* Boyutları linkleri */
a.boyutlari, a.boyutlari:link, a.boyutlari:visited {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 11px;
    color: var(--body-text) !important;
    text-decoration: none;
    margin: 0 2px;
    transition: all 0.15s;
}

a.boyutlari:hover {
    background: var(--bg-hover);
    border-color: var(--galeri-accent);
    color: var(--galeri-teal) !important;
}

.dark-theme a.boyutlari:hover {
    color: var(--galeri-accent) !important;
}

/* ════════════════════════════════════════════
   BAŞLIK DETAY — aynı başlığa ait görsel listesi
   ════════════════════════════════════════════ */

#galeri-baslik-list {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    clear: both;
    overflow: visible;
}

#galeri-baslik-list span.gimg {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    float: none !important;
    width: 90px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 6px 6px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    background: var(--body-background) !important;
    background-image: none !important;
    box-sizing: border-box !important;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
}

#galeri-baslik-list span.gimg:hover {
    border-color: var(--theme-color) !important;
    background: var(--bg-hover) !important;
}

#galeri-baslik-list span.gimg-active {
    border-color: var(--theme-color) !important;
    background: rgba(83, 59, 179, 0.07) !important;
}

.dark-theme #galeri-baslik-list span.gimg-active {
    border-color: var(--theme-color) !important;
    background: rgba(152, 126, 255, 0.1) !important;
}

#galeri-baslik-list span.gimg a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 68px;
}

#galeri-baslik-list span.gimg img {
    max-height: 68px !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain;
}

#galeri-baslik-list span.gimg strong {
    display: block !important;
    font-size: 10px !important;
    font-weight: normal !important;
    margin-top: 5px !important;
    overflow: hidden !important;
    height: auto !important;
    white-space: nowrap;
    color: var(--left-text-color) !important;
}

#galeri-baslik-list span.gimg strong a,
#galeri-baslik-list span.gimg strong a:link,
#galeri-baslik-list span.gimg strong a:visited {
    color: var(--left-text-color) !important;
    text-decoration: none;
}

#galeri-baslik-list span.gimg strong a:hover {
    text-decoration: underline;
}

/* ════════════════════════════════════════════
   GÖRSEL YOK DURUMU (#hata1)
   ════════════════════════════════════════════ */

#hata1 {
    padding: 16px;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--body-text);
    font-size: 13px;
    margin: 8px 0 16px;
    line-height: 1.6;
}

#hata1 a,
#hata1 a:link,
#hata1 a:visited {
    color: var(--theme-color) !important;
    text-decoration: none;
    font-weight: 600;
}

#hata1 a:hover { text-decoration: underline !important; }

/* ════════════════════════════════════════════
   YENİ GÖRSEL EKLE
   ════════════════════════════════════════════ */

#yeni-ekle {
    background-color: var(--bg-hover) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    color: var(--body-text) !important;
    padding: 16px !important;
    margin-top: 16px;
}

#yeni-ekle strong {
    color: var(--body-text) !important;
    display: block;
    margin-bottom: 10px;
}

#yeni-ekle a,
#yeni-ekle a:link,
#yeni-ekle a:visited {
    color: var(--theme-color) !important;
    text-decoration: none;
}

#yeni-ekle a:hover { text-decoration: underline !important; }

#yeni-ekle form {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px !important;
    padding: 0 !important;
}

#yeni-ekle input[type="text"] {
    background: var(--input-background) !important;
    color: var(--body-text) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px;
    padding: 4px 8px;
    flex: 1;
    min-width: 160px;
    max-width: 400px;
    width: auto !important;
    box-sizing: border-box;
}

#yeni-ekle input[type="file"] {
    max-width: 100%;
    flex: 1;
}

#yeni-ekle input[type="submit"] {
    background: var(--theme-color) !important;
    color: #fff !important;
    border: 1px solid var(--theme-color) !important;
    border-radius: 4px;
    padding: 4px 14px;
    cursor: pointer;
    font-size: inherit;
    white-space: nowrap;
}

#yeni-ekle input[type="submit"]:hover {
    opacity: 0.85;
}

.dark-theme #yeni-ekle input[type="submit"] {
    background: rgba(152, 126, 255, 0.14) !important;
    border-color: var(--theme-color) !important;
    color: var(--theme-color) !important;
}

.dark-theme #yeni-ekle input[type="submit"]:hover {
    background: rgba(152, 126, 255, 0.26) !important;
}

/* ════════════════════════════════════════════
   ADMİN TABLO
   ════════════════════════════════════════════ */

#galeri-admin { margin-top: 8px; }

#gadmin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: var(--body-text);
}

#gadmin-table th,
#gadmin-table td {
    float: none !important;
    display: table-cell !important;
    width: auto !important;
    height: auto !important;
    padding: 8px 10px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
}

#gadmin-table th {
    background: var(--bg-hover);
    color: var(--galeri-teal);
    font-weight: bold;
    border-bottom: 2px solid var(--border-color);
}

.dark-theme #gadmin-table th { color: var(--galeri-accent); }

#gadmin-table tr:hover td { background: var(--bg-hover); }
#gadmin-table a { color: var(--galeri-teal); text-decoration: none; }
#gadmin-table a:hover { text-decoration: underline; }
.dark-theme #gadmin-table a { color: var(--galeri-accent); }

.gadmin-ops { white-space: nowrap; }
.gadmin-ops a {
    display: inline-block;
    margin-right: 6px;
    color: var(--left-text-color) !important;
    font-size: 11px;
}
.gadmin-ops a:first-child { color: #c0392b !important; }

/* ════════════════════════════════════════════
   SAYFALAMA — CSS vars ile (inline style PHP'den kaldırıldı)
   ════════════════════════════════════════════ */

.sayfalamalink {
    display: block;
    margin: 20px 0;
}

.sayfalamalink a,
.sayfalamalink a:visited {
    display: inline-block;
    background: var(--body-background);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--body-text) !important;
    font-weight: normal;
    height: 29px;
    line-height: 30px;
    padding: 0;
    width: 30px;
    text-align: center;
    text-decoration: none !important;
    box-shadow: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.sayfalamalink a:hover {
    background: var(--bg-hover) !important;
    color: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
}

.sayfalamalink a.selectedlink,
.sayfalamalink a.selectedlink:visited {
    background: var(--theme-color) !important;
    color: #fff !important;
    border-color: var(--theme-color) !important;
    font-weight: bold;
}

.dark-theme .sayfalamalink a.selectedlink,
.dark-theme .sayfalamalink a.selectedlink:visited {
    background: rgba(152, 126, 255, 0.18) !important;
    border-color: var(--theme-color) !important;
    color: var(--theme-color) !important;
    font-weight: bold;
}

/* ════════════════════════════════════════════
   RESPONSİVE
   ════════════════════════════════════════════ */

@media (max-width: 960px) {
    #ust-0 { padding-right: 8px !important; }
}

@media (max-width: 900px) {
    div#galeri-main { grid-template-columns: repeat(4, 1fr) !important; }
}

@media (max-width: 600px) {
    div#galeri-main {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2px !important;
    }
    #galeri-nav {
        padding: 6px 8px 4px 8px;
        gap: 4px;
    }
    #ic-container {
        padding: 6px !important;
        border-radius: 0 !important;
    }
    #ust-0 {
        display: none !important;
    }
    #ust-a {
        padding-top: 12px;
    }
    #ic-layout {
        flex-direction: column;
    }
    #sagkisim {
        width: 100% !important;
        order: 1;
        margin-top: 12px;
    }
    #ust-a-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    #search-area {
        text-align: left;
        width: 100%;
    }
    .search-bar-wrap {
        display: flex;
        max-width: 100%;
    }
    #span_basliktavsiye0 {
        max-width: 100%;
    }
}

@media (max-width: 380px) {
    div#galeri-main {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2px !important;
    }
}

/* ════════════════════════════════════════════
   BAŞLIK (h1) — ulu_galeri_yeni.css + ulu_galeri.css reset
   Renkli arka plan kaldırıldı, sade metin stili
   ════════════════════════════════════════════ */

h1 {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--body-text) !important;
    height: auto !important;
    padding: 6px 0 !important;
    width: auto !important;
    font-size: 1em !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

h1 a,
h1 a:link,
h1 a:visited {
    color: var(--body-text) !important;
    text-decoration: none !important;
    font-size: inherit !important;
}

h1 a:hover {
    color: var(--theme-color) !important;
    text-decoration: none !important;
}

/* ════════════════════════════════════════════
   GALERİ BAŞLIK HEADER (.gb-header)
   Mobil-uyumlu, gece/gündüz uyumlu best-practice
   ════════════════════════════════════════════ */

.gb-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 14px;
}

.gb-title {
    /* eski CSS reset */
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    height: auto !important;
    padding: 0 !important;
    width: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    /* layout */
    flex: 1;
    min-width: 0;
    /* tipografi */
    margin: 0 !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: var(--body-text) !important;
    line-height: 1.35 !important;
    word-break: break-word;
}

.gb-title a,
.gb-title a:link,
.gb-title a:visited {
    color: var(--body-text) !important;
    text-decoration: none !important;
    font-size: inherit !important;
}

.gb-title a:hover {
    color: var(--theme-color) !important;
    text-decoration: none !important;
}

/* "sözlükte gör ↗" pill */
.gb-ext-link,
.gb-ext-link:link,
.gb-ext-link:visited {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0;
    font-size: 11px !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--galeri-pill-text) !important;
    border: 1px solid var(--galeri-pill-border) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    line-height: 1.5 !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.gb-ext-link:hover {
    background: var(--bg-hover) !important;
    color: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
    text-decoration: none !important;
}

/* ════════════════════════════════════════════
   GÖRSEL META BAR (.gb-gorsel-meta)
   Mobil-uyumlu, gece/gündüz uyumlu
   ════════════════════════════════════════════ */

.gb-gorsel-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gb-meta-row,
.gb-combined-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* Meta item pill — !important zorunlu: ulu_galeri_yeni.css ID-specificity kuralları */
.gb-mi,
.gb-mi:link,
.gb-mi:visited {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px;
    padding: 3px 9px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    color: var(--body-text) !important;
    background: var(--bg-hover) !important;
    border: 1px solid var(--border-color) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    float: none !important;
}

.gb-mi:hover {
    border-color: var(--theme-color) !important;
    color: var(--theme-color) !important;
    text-decoration: none !important;
}

.gb-mi-id { font-weight: 600 !important; }
.gb-mi-size { opacity: 0.85; }
.gb-mi-sm { font-size: 11px !important; opacity: 0.7; }
.gb-mi-muted { opacity: 0.65; }

/* Link row */
.gb-link-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gb-link-ico { font-size: 14px; flex-shrink: 0; }

.gb-link-input {
    flex: 1;
    max-width: 320px;
    font-size: 12px !important;
    padding: 4px 8px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    background: var(--input-background) !important;
    color: var(--body-text) !important;
}

/* Actions row */
.gb-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.gb-action,
.gb-action:link,
.gb-action:visited {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px;
    font-size: 12px !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--galeri-pill-text) !important;
    border: 1px solid var(--galeri-pill-border) !important;
    text-decoration: none !important;
    cursor: pointer;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    float: none !important;
}

.gb-action:hover {
    background: var(--bg-hover) !important;
    color: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
    text-decoration: none !important;
}

.gb-action-danger,
.gb-action-danger:link,
.gb-action-danger:visited {
    color: #c0392b !important;
    border-color: rgba(192, 57, 43, 0.3) !important;
}

.gb-action-danger:hover {
    background: rgba(192, 57, 43, 0.08) !important;
    color: #c0392b !important;
    border-color: #c0392b !important;
}

.dark-theme .gb-action-danger,
.dark-theme .gb-action-danger:link,
.dark-theme .gb-action-danger:visited {
    color: #e74c3c !important;
    border-color: rgba(231, 76, 60, 0.3) !important;
}

/* Inline forms: taşı / hit artır */
.gb-inline-form {
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-hover);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gb-inline-form input[type="text"] {
    font-size: 12px !important;
    padding: 3px 8px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    background: var(--input-background) !important;
    color: var(--body-text) !important;
}

.gb-inline-form input[type="submit"] {
    font-size: 12px !important;
    padding: 3px 10px !important;
    border-radius: 4px !important;
    cursor: pointer;
}

/* Başlık / Kategori görseli seç */
.gb-gorsel-sec-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.gb-kat-form {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
}

/* "..." more button + dropdown */
.gb-more-wrap {
    position: relative;
    margin-left: auto;
}

.gb-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    color: var(--body-text);
    line-height: 1;
    padding: 0;
}

.gb-more-btn:hover {
    background: var(--bg-hover);
    color: var(--theme-color);
}

.gb-img-copy {
    font-size: 12px;
    color: var(--left-text-color);
    cursor: pointer;
    user-select: none;
    opacity: 0.75;
}

.gb-img-copy:hover {
    opacity: 1;
    color: var(--theme-color);
}

.gb-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 190px;
    background: var(--input-background);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    z-index: 200;
    padding: 4px 0;
}

.gb-dropdown.open {
    display: block;
}

.gb-dd-item,
.gb-dd-item:link,
.gb-dd-item:visited {
    display: block !important;
    width: 100%;
    padding: 8px 16px !important;
    font-size: 13px !important;
    color: var(--body-text) !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    text-align: left;
    cursor: pointer;
    line-height: 1.4 !important;
    box-sizing: border-box;
}

.gb-dd-item:hover {
    background: var(--bg-hover) !important;
    color: var(--theme-color) !important;
    text-decoration: none !important;
}

.gb-dd-danger,
.gb-dd-danger:link,
.gb-dd-danger:visited { color: #c0392b !important; }
.gb-dd-danger:hover { background: rgba(192,57,43,0.08) !important; color: #c0392b !important; }
.dark-theme .gb-dd-danger,
.dark-theme .gb-dd-danger:link,
.dark-theme .gb-dd-danger:visited { color: #e74c3c !important; }

.gb-dd-info {
    padding: 6px 16px;
    font-size: 11px;
    color: var(--left-text-color);
    opacity: 0.7;
    line-height: 1.4;
    user-select: none;
}

.gb-dd-sep {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

.gb-sec-btn {
    font-size: 12px !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    border: 1px solid var(--border-color) !important;
    background: transparent !important;
    color: var(--body-text) !important;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.gb-sec-btn:hover {
    background: var(--bg-hover) !important;
    border-color: var(--theme-color) !important;
    color: var(--theme-color) !important;
}

.gb-sec-select {
    font-size: 12px !important;
    padding: 3px 6px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    background: var(--input-background) !important;
    color: var(--body-text) !important;
    height: auto !important;
}

/* ── Instagram card ─────────────────────────────────── */
.insta-card {
    max-width: 640px;
    margin: 16px auto;
    border-radius: 12px;
    background: var(--input-background);
}

.insta-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
}

.insta-user {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none !important;
    color: var(--body-text) !important;
}

.insta-user:visited {
    color: var(--body-text) !important;
}

.insta-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
    flex-shrink: 0;
}

.insta-uname {
    font-size: 13px;
    font-weight: 600;
    color: var(--body-text);
}

.insta-time {
    font-size: 12px;
    color: var(--muted-text, #888);
    white-space: nowrap;
    flex-shrink: 0;
}

.insta-img-wrap {
    width: 100%;
    background: #000;
    line-height: 0;
    overflow: hidden;
}

.insta-img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    object-fit: contain;
}

.insta-caption {
    padding: 10px 0 8px;
}

.insta-caption-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}

.insta-caption-header .insta-title {
    flex: 1;
    margin-bottom: 0;
}

.insta-caption-header .gb-more-wrap {
    flex-shrink: 0;
    margin-top: 1px;
}

.insta-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--body-text) !important;
    text-decoration: none !important;
    margin-bottom: 6px;
    line-height: 1.4;
}

.insta-title:hover {
    color: var(--theme-color) !important;
}

.insta-entry {
    font-size: 13px;
    color: var(--muted-text, #888);
    margin: 0 0 4px;
    line-height: 1.5;
}

.insta-devam {
    font-size: 12px;
    color: var(--theme-color);
    text-decoration: none !important;
    font-weight: 500;
}

.insta-devam:hover {
    text-decoration: underline !important;
}

@media (max-width: 680px) {
    .insta-card {
        margin: 8px 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}
.dark-theme .insta-card {
    background: transparent !important;
}

/* ── /Instagram card ─────────────────────────────────── */

/* ════════════════════════════════════════════
   BAŞLIK SAYFASI NAV — başlık adı pill
   ════════════════════════════════════════════ */

.gn-baslik-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--body-text);
    white-space: normal;
    word-break: break-word;
    flex-shrink: 1;
    min-width: 0;
}

.gn-baslik-title a,
.gn-baslik-title a:link,
.gn-baslik-title a:visited {
    color: var(--body-text) !important;
    text-decoration: none !important;
}

.gn-baslik-title a:hover {
    color: var(--theme-color) !important;
}

/* ════════════════════════════════════════════
   BAŞLIK LİSTE FEED (#gb-baslik-feed)
   Mevcut gi-card stillerini miras alır
   ════════════════════════════════════════════ */

#gb-baslik-feed {
    max-width: 640px;
    margin: 8px auto 0;
    width: 100%;
}

#gb-baslik-feed .gi-card {
    margin-bottom: 48px;
}

#gb-sentinel { height: 1px; }
#gb-loading { color: var(--left-text-color); font-size: 13px; }

/* gi-header için insta-user link desteği (avatar foto ile) */
.gi-header .insta-user {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none !important;
    color: var(--body-text) !important;
    flex: 1;
    min-width: 0;
}

.gi-header .insta-uname {
    font-size: 13px;
    font-weight: 600;
    color: var(--body-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gi-header .insta-time {
    font-size: 11px;
    color: var(--left-text-color);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}