/* v28.328: 10 Kasım'da yalnız ÜST BANT (siyah üst çubuk, anma logosu, şerit + portre) tüm temalarda görünür; gövde / kartlar artık gri yapılmaz (anma teması yalnız isteyen seçerse).
   v28.324: 10 Kasım anma teması (style.css'teki temel "anma" teması üstüne) + saygı duruşu perdesi.
   style.css değişmedi (min imzası bozulmasın diye); bu dosya yalnız anma gerekliyken yüklenir (header.php). */

/* ---------- şerit: üst çubuğun hemen altında; v28.328: 10 Kasım'da (html.anma-gunu) TÜM temalarda, ayrıca anma teması seçiliyken görünür ---------- */
.anma-serit {
    display: none;   /* görünürlüğü yalnız aşağıdaki iki seçici açar; böylece diğer kuralların özgüllüğü eşit kalır */
    background: #000;
    color: #d9d9d9;
    text-align: center;
    font-size: 12.5px;
    line-height: 1;
    letter-spacing: .02em;
    padding: 7px 12px;
    border-bottom: 1px solid #4a4a4a;
    position: relative;
}
html[data-theme="anma"] .anma-serit,
html.anma-gunu .anma-serit { display: block; }
.anma-serit-ic {
    display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 0;
}
.anma-serit b { color: #fff; font-weight: 600; letter-spacing: .04em; }
.anma-ayrac {
    display: inline-block; width: 1px; height: 11px; background: #7a7a7a; margin: 0 10px;
}
/* şeritte küçük yuvarlak portre (img/ataturk.jpg varsa sunucu ekler) */
.anma-serit-foto {
    display: inline-block; width: 26px; height: 26px; margin-right: 10px; border-radius: 50%;
    background: #222 center 8% / 150% auto no-repeat; filter: grayscale(1);
    box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a8a8a; vertical-align: middle; flex: none;
}
.anma-serit.foto-var { padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 700px) { .anma-serit-foto { width: 22px; height: 22px; margin-right: 7px; } }

/* siyah kurdele (şeridin iki ucunda) */
.anma-serit::before,
.anma-serit::after {
    content: ""; position: absolute; top: 50%; width: 18px; height: 22px; margin-top: -11px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'><path d='M9 9 C3 1 0.5 5 3.5 8 C5 9.6 7.5 9.4 9 9 C10.5 9.4 13 9.6 14.5 8 C17.5 5 15 1 9 9 Z' fill='%23ffffff' stroke='%23000000' stroke-width='0.6'/><path d='M8 9.5 L3.5 21 L6.5 19.4 L8.4 21.5 L9.4 10.5 Z' fill='%23ffffff' stroke='%23000000' stroke-width='0.6'/><path d='M10 9.5 L14.5 21 L11.5 19.4 L9.6 21.5 L8.6 10.5 Z' fill='%23d9d9d9' stroke='%23000000' stroke-width='0.6'/></svg>") no-repeat center / contain;
    opacity: .92;
}
.anma-serit::before { left: 12px; }
.anma-serit::after { right: 12px; }
@media (max-width: 700px) {
    .anma-serit { font-size: 11.5px; padding: 6px 34px; }
    .anma-ayrac { margin: 0 7px; }
    .anma-serit::before, .anma-serit::after { width: 14px; height: 18px; margin-top: -9px; }
    .anma-serit::before { left: 8px; }
    .anma-serit::after { right: 8px; }
}

/* ---------- anma teması (yalnız tema olarak seçilince): zemin, sekmeler; üst çubuk ise 10 Kasım'da her temada ---------- */
html[data-theme="anma"] body {
    background:
        radial-gradient(ellipse 80% 40% at 50% 0, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%) no-repeat,
        linear-gradient(#e6e6e6, #d6d6d6) fixed;
    background-color: #dcdcdc;
}
html[data-theme="anma"] .header-bar,
html.anma-gunu .header-bar {
    background: linear-gradient(#1b1b1b, #000) !important;   /* v28.328: 10 Kasım'da hangi tema olursa olsun üst çubuk siyah */
    border-bottom: 1px solid #5a5a5a !important;
    box-shadow: 0 1px 0 #000 !important;
}
html[data-theme="anma"] .sekme-bar a.aktif { color: #000; border-bottom-color: #000; }
html[data-theme="anma"] ::selection { background: #1a1a1a; color: #fff; }
html[data-theme="anma"] a:focus-visible, html[data-theme="anma"] button:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

/* ---------- saygı duruşu perdesi ---------- */
#saygiPerde {
    position: fixed; inset: 0; z-index: 2147483000;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at 50% 35%, #262626 0%, #0b0b0b 62%, #000 100%);
    color: #f0f0f0;
    padding: 24px;
    text-align: center;
    animation: saygiGir 1.2s ease both;
    touch-action: none;
    overscroll-behavior: contain;
    -webkit-user-select: none; user-select: none;
}
#saygiPerde[hidden] { display: none; }
#saygiPerde .saygi-ic { max-width: 560px; width: 100%; font-family: Georgia, "Times New Roman", serif; }
#saygiPerde .saygi-foto {
    position: relative;
    width: 190px; height: 247px; margin: 8px auto 36px; border-radius: 95px 95px 6px 6px;
    background: #111 center top / cover no-repeat; filter: grayscale(1) contrast(1.04);
    box-shadow: 0 0 0 5px #000, 0 0 0 6px #8a8a8a, 0 0 0 11px #000, 0 0 0 12px #3d3d3d, 0 0 70px rgba(255, 255, 255, .10);
    animation: saygiFoto 2.4s ease both;
}
#saygiPerde .saygi-foto::after {   /* alt kenarda siyaha yumuşak geçiş */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; border-radius: 0 0 6px 6px;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .55));
}
@keyframes saygiFoto { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
#saygiPerde .saygi-kurdele { width: 44px; height: 54px; margin: 0 auto 18px; display: block; }
#saygiPerde .saygi-tarih { font-size: 14px; letter-spacing: .28em; text-transform: uppercase; color: #a8a8a8; margin-bottom: 18px; }
#saygiPerde .saygi-baslik { font-size: 15px; letter-spacing: .5em; text-transform: uppercase; color: #cfcfcf; margin-bottom: 14px; }
#saygiPerde .saygi-ad { font-size: clamp(28px, 7vw, 46px); line-height: 1.15; color: #fff; font-weight: 400; letter-spacing: .02em; }
#saygiPerde .saygi-yil { font-size: 17px; color: #bdbdbd; margin: 10px 0 22px; letter-spacing: .12em; }
#saygiPerde .saygi-cizgi { width: 64px; height: 1px; background: #777; margin: 0 auto 22px; }
#saygiPerde .saygi-metin { font-size: 17px; line-height: 1.6; color: #e2e2e2; font-style: italic; margin-bottom: 26px; }
#saygiPerde .saygi-sayac { font-size: 34px; font-variant-numeric: tabular-nums; color: #fff; letter-spacing: .08em; }
#saygiPerde .saygi-cubuk { height: 2px; background: #333; margin: 14px auto 14px; max-width: 280px; overflow: hidden; }
#saygiPerde .saygi-cubuk i { display: block; height: 100%; width: 100%; background: #bdbdbd; transform-origin: left center; transform: scaleX(1); }
#saygiPerde .saygi-not { font-size: 13px; color: #8f8f8f; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
#saygiPerde.saygi-test .saygi-not::after { content: " (deneme: gönderim kapanmaz)"; color: #b8b8b8; }
html.saygi-acik, html.saygi-acik body { overflow: hidden; }
@keyframes saygiGir { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #saygiPerde, #saygiPerde .saygi-foto { animation: none; } }
@media (max-height: 700px) {
    #saygiPerde .saygi-foto { width: 150px; height: 195px; border-radius: 75px 75px 6px 6px; margin: 6px auto 28px; }
    #saygiPerde .saygi-tarih { margin-bottom: 12px; }
    #saygiPerde .saygi-metin { margin-bottom: 18px; }
}
@media (max-height: 600px) {
    #saygiPerde .saygi-foto { width: 110px; height: 143px; border-radius: 55px 55px 5px 5px; margin: 4px auto 22px; }
    #saygiPerde .saygi-baslik { margin-bottom: 8px; }
    #saygiPerde .saygi-cizgi, #saygiPerde .saygi-yil { margin-bottom: 12px; }
}
@media (max-height: 520px) {
    #saygiPerde .saygi-foto { width: 84px; height: 109px; border-radius: 42px 42px 4px 4px; margin: 2px auto 18px; }
    #saygiPerde .saygi-kurdele { width: 30px; height: 38px; margin-bottom: 10px; }
    #saygiPerde .saygi-metin { margin-bottom: 14px; font-size: 15px; }
    #saygiPerde .saygi-yil { margin: 6px 0 12px; }
    #saygiPerde .saygi-sayac { font-size: 26px; }
}
