/* ============================================================
   CizgiMax — Ortak CSS
   ============================================================ */

/* ----- RESET ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; max-width: 100%; }

/* ----- ANA FONT — site genelinde tek tip Fira Sans ----- */
* {
    font-family: 'Fira Sans', sans-serif;
}
/* FontAwesome ikonları korunsun — kendi font-family'leri specificity ile kazanır */
.fa, .fas, .far, .fal, .fab, .fad, .fass, .fasr, .fasl, [class*="fa-"]::before {
    font-family: var(--fa-style-family, "Font Awesome 6 Free"), "Font Awesome 6 Brands";
}

/* ----- BASE ----- */
html { overflow-x: clip; }
body {
    background: #E6E8F0;
    color: #333;
    font-size: 12px;
    line-height: 1.5;
    overflow-x: clip;
}

/* ----- CUSTOM SCROLLBAR (siteye özel mavi) ----- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #eef2f8; border-radius: 0; }
::-webkit-scrollbar-thumb {
    background: #3a86d4;
    border-radius: 0;
    border: none;
}
::-webkit-scrollbar-thumb:hover { background: #2a78c4; }
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:start,
::-webkit-scrollbar-button:end,
::-webkit-scrollbar-button:vertical:decrement,
::-webkit-scrollbar-button:vertical:increment,
::-webkit-scrollbar-button:horizontal:decrement,
::-webkit-scrollbar-button:horizontal:increment {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
}
::-webkit-scrollbar-corner { background: transparent; }
/* Firefox fallback (sadece Firefox kullanır) */
@supports (-moz-appearance: none) {
    * { scrollbar-width: thin; scrollbar-color: #3a86d4 #eef2f8; }
}

/* ----- CONTAINER ----- */
.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 18px;
}

/* ============================================================
   HEADER
   ============================================================ */
#header {
    background: #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,0.12);
}

/* ----- HEAD BAR ----- */
.head {
    display: flex;
    align-items: center;
    height: 67px;
    gap: 18px;
}

/* Logo */
#logo {
    flex-shrink: 0;
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
#logo-img {
    height: 35px;
    width: auto;
    display: block;
}
#logo .logo-tagline {
    font-family: 'Fira Sans', sans-serif;
    font-size: 10px;
    font-weight: 400;
    color: #165fa7;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Search */
#search {
    flex: 0 1 330px;
    max-width: 330px;
    position: relative;
}
.search-inner {
    display: flex;
    border: 1px solid #d0d4de;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    align-items: center;
}
#search-bar {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 8px 14px;
    font-size: 12px;
    color: #222;
}
#search-bar::placeholder { color: #555; }
#search .btn-search-submit {
    background: transparent;
    border: none;
    padding: 7px 11px 7px 6px;
    cursor: pointer;
    color: #444;
    font-size: 12px;
    transition: color .2s;
    flex-shrink: 0;
}
#search .btn-search-submit:hover { color: #165fa7; }
.btn-search-close {
    display: none;
    background: transparent;
    border: 0;
    padding: 7px 12px;
    cursor: pointer;
    color: #555;
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
}
.btn-search-close:hover { color: #d32f2f; }

/* Sign In */
#sign { margin-left: auto; flex-shrink: 0; }
#sign a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #165fa7;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
#sign a i { font-size: 18px; }
#sign a:hover { color: #0d47a1; }

/* Mobile controls */
.mobile-controls {
    display: none;
    align-items: center;
    gap: 18px;
    margin-left: auto;
}
.mobile-controls a,
.mobile-controls button {
    color: #165fa7;
    font-size: 23px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#mob-menu-btn { font-size: 25px; }

/* user-tools varsa o margin-left:auto ile saga itildi; mobile-controls
   onun yanindan devam etsin (kendi auto-margin'ini iptal). */
.user-tools + .mobile-controls { margin-left: 0; }

@media (max-width: 380px) {
    .mobile-controls { gap: 14px; }
    .mobile-controls a, .mobile-controls button { font-size: 21px; }
    #mob-menu-btn { font-size: 23px; }
}

/* Guest modunda "Giris Yap" yazisi cikar - ikonlar daha kompakt */
.mobile-controls-guest { gap: 13px; }
.mobile-controls-guest button,
.mobile-controls-guest > a { font-size: 20px; }
.mobile-controls-guest #mob-menu-btn { font-size: 22px; }

.mob-login-link {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-family: 'Fira Sans', sans-serif;
    text-decoration: none;
}
.mob-login-link > span {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #165fa7;
    text-transform: uppercase;
    line-height: 1;
}
.mob-login-link > i { font-size: 19px; }

@media (max-width: 380px) {
    .mobile-controls-guest { gap: 11px; }
    .mobile-controls-guest button,
    .mobile-controls-guest > a { font-size: 18px; }
    .mobile-controls-guest #mob-menu-btn { font-size: 20px; }
    .mob-login-link > i { font-size: 17px; }
    .mob-login-link > span { font-size: 11.5px; }
}

/* ----- NAV BAR ----- */
.nav { background: #165fa7; }
.nav .container { padding: 0 16px; }
#menu {
    display: flex;
    align-items: center;
}
#menu > li { position: relative; }
#menu > li > a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 9px 13px;
    color: #fff;
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    transition: background .2s;
}
#menu > li > a:hover,
#menu > li:hover > a { background: rgba(255,255,255,0.15); }

/* Dropdown */
#menu > li > ul.sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border-top: 2px solid #165fa7;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    min-width: 180px;
    z-index: 999;
    padding: 8px 0;
    columns: 2;
    min-width: 340px;
}
#menu > li#genres-menu > ul.sub { columns: 4; min-width: 640px; }
#menu > li#types-menu > ul.sub { columns: 1; min-width: 160px; }
#menu > li:hover > ul.sub { display: block; }
#menu > li > ul.sub li a {
    display: block;
    padding: 6px 18px;
    color: #444;
    font-size: 13px;
    transition: background .15s, color .15s;
}
#menu > li > ul.sub li a:hover { background: #e8f0fe; color: #165fa7; }

/* ============================================================
   MOBILE DRAWER
   ============================================================ */
#mob-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1998;
}
#mob-overlay.open { display: block; }

#mob-drawer {
    position: fixed;
    top: 0;
    left: -270px;
    width: 260px;
    height: 100%;
    background: #165fa7;
    color: #fff;
    z-index: 1999;
    transition: left .28s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    box-shadow: 4px 0 24px rgba(0,0,0,0.35);
}
#mob-drawer.open { left: 0; }

.mob-drawer-head {
    background: #165fa7;
    padding: 10px 12px 6px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.mob-drawer-close {
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0 6px 4px;
    flex: 0 0 auto;
    transition: opacity .15s;
}
.mob-drawer-close:hover { opacity: .75; }

/* Section label: "Menü -----" / "Sosyal -----" */
.mob-section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    color: rgba(255,255,255,.92);
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.mob-section-label > span { flex: 0 0 auto; }
.mob-section-label::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(255,255,255,.32);
}
.mob-section-label-mid {
    padding: 18px 18px 10px;
}

.mob-nav-list { list-style: none; padding: 0; margin: 0; }
.mob-nav-list > li > a,
.mob-nav-list > li > .mob-nav-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 18px;
    color: #fff;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,.13);
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    text-align: left;
    transition: background .15s;
}
.mob-nav-list > li > a:hover,
.mob-nav-list > li > .mob-nav-toggle:hover { background: rgba(255,255,255,.08); color: #fff; }
.mob-nav-list > li > a > i,
.mob-nav-list > li > .mob-nav-toggle > i:first-child {
    width: 18px;
    text-align: center;
    color: #fff;
    font-size: 14px;
}

.mob-chev {
    font-size: 11px;
    color: #fff;
    transition: transform .28s ease;
    margin-left: 2px;
}
.mob-nav-list > li.is-open > .mob-nav-toggle .mob-chev { transform: rotate(180deg); }

.mob-sub-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}
.mob-nav-list > li.is-open > .mob-sub-list { max-height: 2600px; }
.mob-sub-list li a {
    display: block;
    padding: 11px 22px 11px 54px;
    color: #1c1c1c;
    font-size: 13.5px;
    font-weight: 500;
    border-bottom: 1px solid #eef1f4;
    transition: background .15s, color .15s;
}
.mob-sub-list li a:hover { background: #e8f0fe; color: #165fa7; }
.mob-sub-list li:last-child a { border-bottom: none; }

.mob-nav-list .mob-nav-discord > a {
    background: #5865F2;
    border-bottom: none;
}
.mob-nav-list .mob-nav-discord > a:hover { background: #4752c4; }
.mob-nav-list .mob-nav-discord > a > i { color: #fff; }

/* Premium CTA — altin/amber gradient + shine animasyonu */
.mob-premium-wrap {
    padding: 0 14px 18px;
}
.mob-premium-cta {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f6c84a 0%, #f0a830 45%, #d97f1b 100%);
    color: #2a1a00;
    text-decoration: none;
    font-family: 'Fira Sans', sans-serif;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(217,127,27,.35), inset 0 1px 0 rgba(255,255,255,.45);
    border: 1px solid rgba(255,255,255,.35);
    transition: transform .15s ease, box-shadow .2s ease;
}
.mob-premium-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 22px rgba(217,127,27,.45), inset 0 1px 0 rgba(255,255,255,.55);
}
.mob-premium-cta:active { transform: translateY(0); }
.mob-premium-crown {
    font-size: 22px;
    color: #2a1a00;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.5));
    flex: 0 0 auto;
}
.mob-premium-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    line-height: 1.15;
}
.mob-premium-text strong {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #2a1a00;
}
.mob-premium-text small {
    font-size: 11px;
    font-weight: 500;
    color: rgba(42,26,0,.78);
    margin-top: 2px;
    letter-spacing: 0.2px;
}
.mob-premium-arrow {
    font-size: 14px;
    color: #2a1a00;
    flex: 0 0 auto;
}
.mob-premium-shine {
    position: absolute;
    top: 0;
    left: -60%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
    transform: skewX(-20deg);
    pointer-events: none;
    animation: mobPremiumShine 3.2s ease-in-out infinite;
}
@keyframes mobPremiumShine {
    0%   { left: -60%; }
    55%  { left: 130%; }
    100% { left: 130%; }
}

/* ============================================================
   ALERT BAR
   ============================================================ */
.alert-bar-wrap {
    background: transparent;
    padding: 8px 0;
}
.alert-bar {
    background: linear-gradient(90deg, #5aaa1a 0%, #7ec832 50%, #5aaa1a 100%);
    color: #fff;
    padding: 10px 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-shadow: 0 2px 5px rgba(90,170,26,0.2);
}
.alert-bar a { color: #fff; text-decoration: underline; }
.alert-bar b { font-weight: 700; }
.alert-text { font-size: 12px; font-weight: 500; }
.alert-text i { margin-right: 6px; }
.alert-close { cursor: pointer; font-size: 22px; font-weight: 300; line-height: 1; flex-shrink: 0; opacity: .85; }
.alert-close:hover { opacity: 1; }

/* ============================================================
   BODY LAYOUT
   ============================================================ */
#body { padding: 16px 0 32px; }

.body-container {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

#main { flex: 1; min-width: 0; }
#aside { width: 320px; flex-shrink: 0; }

/* ============================================================
   WIDGET
   ============================================================ */
.widget {
    margin-bottom: 16px;
}

.widget-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e0e3ec;
    padding-bottom: 0;
}

.widget-title .title,
.widget-title h2 {
    font-size: 11px;
    font-weight: 700;
    color: #222;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #165fa7;
    margin-bottom: -1px;
}

.widget-title .more {
    margin-left: auto;
    background: #165fa7;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    margin-bottom: 10px;
}
.widget-title .more:hover { background: #0d47a1; }

.widget-title .paging-btns { margin-left: auto; margin-bottom: 8px; }

/* Tabs */
.tabs {
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    padding: 3px 10px;
    padding-bottom: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .2s, border-color .2s;
}
.tab.active { color: #165fa7; border-bottom-color: #165fa7; }
.tab:hover { color: #165fa7; }

/* Pagination buttons */
.paging-btns {
    margin-left: auto;
    display: flex;
    gap: 3px;
}
.paging-btns button {
    width: 22px;
    height: 22px;
    border: 1px solid #ccd0d8;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    color: #555;
    font-size: 10px;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.paging-btns button:hover:not(.disabled) {
    background: #165fa7;
    border-color: #165fa7;
    color: #fff;
}
.paging-btns button.disabled { opacity: .4; cursor: default; }

/* ============================================================
   SLIDER
   ============================================================ */
.slider-wrap {
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
    background: #111;
}

.swiper-slide.slide-item {
    height: 256px;
    background-size: cover;
    background-position: center top;
    position: relative;
}
.swiper-slide.slide-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0.1) 100%);
}

.slide-info {
    position: absolute;
    bottom: 18px;
    left: 20px;
    right: 130px;
    z-index: 2;
    max-width: 62%;
}
.slide-info .slide-name {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 6px;
    line-height: 1.25;
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.slide-info .slide-name:hover { color: #90caf9; }
.slide-info p {
    color: #d6d8dc;
    font-size: 12.5px;
    font-weight: 300;
    line-height: 1.55;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.slide-item .watch-btn {
    position: absolute;
    bottom: 18px;
    right: 20px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f0f2f5;
    border: 1px solid #f0f2f5;
    color: #6b6f76;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.slide-item .watch-btn:hover { background: #fff; color: #333; }

.swiper-pagination { top: 12px !important; bottom: auto !important; left: 14px !important; width: auto !important; }
.swiper-pagination-bullet { background: #fff; opacity: 1; width: 8px; height: 8px; }
.swiper-pagination-bullet-active { background: #165fa7; }

/* ============================================================
   FILM LIST (poster kartları)
   ============================================================ */
.film-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 6px;
}

.film-item { position: relative; }
.film-item .inner { display: flex; flex-direction: column; }

.film-item .poster {
    display: block;
    position: relative;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
    aspect-ratio: 2/3;
    background: #ccc;
}
.film-item .poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.film-item .poster:hover img { transform: scale(1.05); }

.film-item .status {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    display: flex;
    align-items: flex-end;
    padding: 5px;
    gap: 3px;
    background: linear-gradient(transparent, rgba(0,0,0,0.65));
}

.film-item .ep {
    background: #165fa7;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
}

.film-item .badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
    color: #fff;
}
.badge-dub    { background: #2e7d32; }
.badge-movie  { background: #c62828; }
.badge-ova    { background: #6a1b9a; }
.badge-ona    { background: #e65100; }
.badge-special{ background: #ad1457; }

.film-item .film-name {
    display: block;
    margin-top: 5px;
    font-size: 10px;
    font-weight: 400;
    color: #333;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
    transition: color .2s;
}
.film-item .film-name:hover { color: #165fa7; }

/* Yeni poster rozetleri (referans tasarim — sol-alt etiket + sag-alt kose kurdele) */
.film-item .ep-tag {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #165fa7;
    color: #fff;
    font-family: 'Fira Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 18px 4px 8px;
    border-radius: 0;
    line-height: 1.1;
    z-index: 2;
    letter-spacing: .2px;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 100%, 0 100%);
}

.film-item .corner-tag {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 44px;
    height: 22px;
    background: #f5b342;
    color: #fff;
    font-family: 'Fira Sans', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .3px;
    text-align: right;
    padding: 6px 5px 6px 0;
    line-height: 1;
    z-index: 2;
    clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
    text-transform: uppercase;
}
.film-item .corner-tag.corner-cizgi-film { background: #f5b342; }
.film-item .corner-tag.corner-anime      { background: #2e7d32; }
.film-item .corner-tag.corner-film       { background: #c62828; }
.film-item .corner-tag.corner-dizi       { background: #165fa7; }

/* ============================================================
   POSTER HOVER PREVIEW — kartin yaninda acilan beyaz balon
   ============================================================ */
.poster-hover-card {
    position: absolute;
    top: 0;
    left: calc(100% + 10px);
    width: 290px;
    background: #fff;
    border: 1px solid #e0e3ec;
    border-radius: 6px;
    padding: 14px 14px 12px;
    box-shadow: 0 14px 36px rgba(20, 40, 80, .22);
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(.96);
    transform-origin: left center;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    font-family: 'Fira Sans', sans-serif;
    color: #2b2f38;
}
/* Imlec posterden balona giderken aradan kayip kapanmasin diye seffaf kopru */
.poster-hover-card::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -12px;
    width: 12px;
}
/* Sag uca yakin kartlarda sola dogru ac */
.poster-hover-card.flip-left {
    left: auto;
    right: calc(100% + 10px);
    transform-origin: right center;
}
.poster-hover-card.flip-left::before {
    left: auto;
    right: -12px;
}
.film-item:hover .poster-hover-card,
.carousel-item:hover .poster-hover-card {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
    transition: opacity .18s ease .25s, transform .18s ease .25s, visibility 0s linear .25s;
}
/* Mobil/dokunmatik cihazlarda poster yaninda acilan info kartini tamamen kapat */
@media (hover: none), (pointer: coarse), (max-width: 768px) {
    .poster-hover-card,
    .film-item:hover .poster-hover-card,
    .carousel-item:hover .poster-hover-card {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}
.carousel-item { position: relative; }
.phc-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}
.phc-title {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 700;
    color: #165fa7;
    text-decoration: none;
    line-height: 1.25;
    word-break: break-word;
}
.phc-title:hover { text-decoration: underline; }
.phc-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding-top: 1px;
}
.phc-fav, .phc-list {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: #8a8f99;
    transition: color .15s ease, transform .12s ease;
}
.phc-fav:hover  { color: #e25555; transform: scale(1.15); }
.phc-list:hover { color: #2c8c5b; transform: scale(1.15); }
.phc-fav.is-on  { color: #e25555; }
.phc-list.is-on { color: #2c8c5b; }
.phc-fav:focus, .phc-list:focus { outline: none; }
.phc-fav.is-pulse, .phc-list.is-pulse { animation: cz-fav-pulse .28s ease; }

.phc-desc {
    font-size: 11.5px;
    line-height: 1.5;
    color: #555a64;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.phc-meta {
    list-style: none;
    margin: 0 0 12px;
    padding: 9px 0 0;
    border-top: 1px solid #ebeef3;
    font-size: 11.5px;
    line-height: 1.6;
    color: #2b2f38;
}
.phc-meta li { margin: 2px 0; }
.phc-meta span {
    color: #8a8f99;
    margin-right: 4px;
}
.phc-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: #165fa7;
    color: #fff;
    padding: 9px 12px;
    border-radius: 4px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .15s ease;
    box-sizing: border-box;
}
.phc-cta:hover { background: #0f4f8c; color: #fff; }
.phc-cta i { font-size: 11px; }

/* ============================================================
   GLOBAL TOAST — yorum/oy bildirimleriyle ayni gorunum
   ============================================================ */
.cz-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    min-width: 240px;
    max-width: 360px;
    background: #fff;
    border: 1px solid #e8ebf2;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(20, 40, 80, .14);
    overflow: hidden;
    transform: translateY(140%);
    opacity: 0;
    z-index: 9999;
    transition: transform .35s ease-out, opacity .35s ease-out;
    font-family: 'Fira Sans', system-ui, sans-serif;
    pointer-events: none;
}
.cz-toast.is-show { transform: translateY(0); opacity: 1; }
.cz-toast.is-hide { transform: translateY(140%); opacity: 0; }
.cz-toast-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: #1f2937;
    font-size: 13.5px;
}
.cz-toast-row i { font-size: 18px; color: #c0392b; }
.cz-toast.is-unlike   .cz-toast-row i { color: #98a3b3; }
.cz-toast.is-success  .cz-toast-row i { color: #2c8c5b; }
.cz-toast.is-info     .cz-toast-row i { color: #165fa7; }
.cz-toast.is-list-add .cz-toast-row i { color: #2c8c5b; }
.cz-toast.is-list-rm  .cz-toast-row i { color: #98a3b3; }
.cz-toast.is-vote-on  .cz-toast-row i { color: #2c8c5b; }
.cz-toast.is-vote-off .cz-toast-row i { color: #c0392b; }
.cz-toast-bar {
    height: 3px;
    background: #c0392b;
    transform-origin: left center;
    animation: cz-toast-bar 3s linear forwards;
}
.cz-toast.is-unlike   .cz-toast-bar { background: #98a3b3; }
.cz-toast.is-success  .cz-toast-bar { background: #2c8c5b; }
.cz-toast.is-info     .cz-toast-bar { background: #165fa7; }
.cz-toast.is-list-add .cz-toast-bar { background: #2c8c5b; }
.cz-toast.is-list-rm  .cz-toast-bar { background: #98a3b3; }
.cz-toast.is-vote-on  .cz-toast-bar { background: #2c8c5b; }
.cz-toast.is-vote-off .cz-toast-bar { background: #c0392b; }
@keyframes cz-toast-bar {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* Dark mode */
body.dark-mode .poster-hover-card {
    background: #1d2027;
    border-color: #333;
    color: #d7dde6;
}
body.dark-mode .phc-title { color: #6ea6e8; }
body.dark-mode .phc-desc  { color: #b0b8c5; }
body.dark-mode .phc-meta  { color: #d7dde6; border-top-color: #2a2d36; }
body.dark-mode .phc-meta span { color: #8a93a3; }
body.dark-mode .phc-fav, body.dark-mode .phc-list { color: #6a7080; }
body.dark-mode .phc-cta   { background: #0d47a1; }
body.dark-mode .phc-cta:hover { background: #0a3a85; }
body.dark-mode .cz-toast {
    background: #1a232d;
    border-color: #2c3744;
    color: #d7dde6;
}
body.dark-mode .cz-toast-row { color: #d7dde6; }

/* ============================================================
   EPISODES BLOCK — Son Bolumler beyaz kart cercevesi (1:1 referans)
   ============================================================ */
.episodes-block {
    background: #fff;
    border: 1px solid #e0e3ec;
    border-radius: 4px;
    padding: 12px 16px 18px;
    box-shadow: 0 1px 2px rgba(20, 40, 80, .03);
}
.episodes-block-head {
    display: flex;
    align-items: stretch;
    gap: 14px;
    border-bottom: 1px solid #e8ebf2;
    margin-bottom: 16px;
    position: relative;
}
.episodes-block-head > .title { align-self: center; padding: 4px 0 10px; }
.episodes-block-head .title {
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #165fa7;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0;
    white-space: nowrap;
}
.episodes-block-head .tabs {
    display: flex;
    gap: 0;
    align-items: stretch;
    flex-wrap: nowrap;
}
.episodes-block-head .tab {
    font-family: 'Fira Sans', sans-serif;
    display: flex;
    align-items: center;
    padding: 4px 11px;
    font-size: 12px;
    font-weight: 400;
    color: #7a8290;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .2s, border-color .2s;
    background: transparent;
}
.episodes-block-head .tab.active {
    color: #165fa7;
    font-weight: 600;
    border-bottom-color: #165fa7;
}
.episodes-block-head .tab:hover { color: #165fa7; }

.paging-btns-blue {
    margin-left: auto;
    display: flex;
    gap: 4px;
    align-self: center;
    padding-bottom: 8px;
}
.paging-btns-blue button {
    width: 28px;
    height: 24px;
    border: none;
    border-radius: 3px;
    background: #165fa7;
    color: #fff;
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s, background .2s;
}
.paging-btns-blue button:hover:not(.disabled):not(:disabled):not(.swiper-button-disabled) { background: #0d4179; }
.paging-btns-blue button.disabled,
.paging-btns-blue button:disabled,
.paging-btns-blue button.swiper-button-disabled { opacity: .35; cursor: default; }

.card-block-head .paging-btns-blue { padding-bottom: 0; }

.episodes-block .film-list {
    gap: 18px 12px;
    margin-bottom: 0;
}
.episodes-block .film-item .poster {
    border-radius: 0;
    aspect-ratio: 2/3;
}
.episodes-block .film-item .film-name {
    font-family: 'Fira Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #555;
    text-align: center;
    margin-top: 9px;
    line-height: 1.35;
}
.episodes-block .film-item .film-name:hover { color: #165fa7; }

/* Devam Eden Animeler — Son Bolumler ile birebir poster/film-name stili */
.card-block .film-item .poster {
    border-radius: 0;
    aspect-ratio: 2/3;
}
.card-block .film-item .film-name {
    font-family: 'Fira Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #555;
    text-align: center;
    margin-top: 9px;
    line-height: 1.35;
}
.card-block .film-item .film-name:hover { color: #165fa7; }

body.dark-mode .episodes-block {
    background: #1f2128;
    border-color: #2a2d36;
}
body.dark-mode .episodes-block-head { border-bottom-color: #2a2d36; }
body.dark-mode .episodes-block-head .tab { color: #8a93a3; }
body.dark-mode .episodes-block-head .tab.active { color: #90caf9; border-bottom-color: #90caf9; }
body.dark-mode .episodes-block-head .title { color: #90caf9; }
body.dark-mode .episodes-block .film-item .film-name { color: #e0e3eb; }

.page-content.hidden { display: none; }

/* Son Bölümler — sekme panelleri & sayfalar */
.ep-pane[hidden],
.ep-page[hidden] { display: none !important; }
.ep-empty {
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    padding: 28px 12px;
}
body.dark-mode .ep-empty { color: #8a93a3; }

/* ============================================================
   CARD BLOCK (Devam Eden / Takvim — başlık çubuklu beyaz kart)
   ============================================================ */
.card-block {
    background: #fff;
    border: 1px solid #e0e3ec;
    border-radius: 5px;
    overflow: visible;
    margin-bottom: 16px;
}
/* Profil vitrin slider kartları: sağa taşmayı engelle (hover card mobilde zaten gizli) */
.profile-card-block { overflow: hidden; }
.card-block-head {
    border-radius: 5px 5px 0 0;
}
.card-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #e8ebf2;
    background: #fff;
}
.card-block-head h2 {
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #165fa7;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.card-block-more {
    background: #165fa7;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 3px;
    text-transform: none;
    transition: background .2s;
}
.card-block-more:hover { background: #0d47a1; color: #fff; }
.card-block-body { padding: 12px 14px; }
.card-block-body-flush { padding: 0; }

/* ============================================================
   CAROUSEL (devam eden / yaklaşan)
   ============================================================ */
.carousel-wrap {
    background: #fff;
    border: 1px solid #e0e3ec;
    border-radius: 5px;
    padding: 11px;
    margin-bottom: 16px;
}
/* Swiper CDN'den yüklenmeden önce slide'lar flow'da kalır; bunu engelle */
.carousel-swiper { overflow: hidden; position: relative; }
/* Anasayfa carousel'leri Swiper'in fractional slidesPerView'i ile inline width
   aliyor; bu sadece init oncesi visual fallback. */
.carousel-swiper .swiper-slide.carousel-item { width: 130px; }

/* Profil swiper'lari Swiper 'auto' modu kullaniyor (race-free); slide genisligini
   tamamen CSS belirler. Breakpoint basina genisleyerek desktop'ta da makul boyut. */
#profile-recent-swiper .carousel-item,
#profile-watchlist-swiper .carousel-item,
#profile-watched-swiper .carousel-item,
#profile-favorites-swiper .carousel-item { width: 130px; }
@media (min-width: 480px) {
    #profile-recent-swiper .carousel-item,
    #profile-watchlist-swiper .carousel-item,
    #profile-watched-swiper .carousel-item,
    #profile-favorites-swiper .carousel-item { width: 145px; }
}
@media (min-width: 720px) {
    #profile-recent-swiper .carousel-item,
    #profile-watchlist-swiper .carousel-item,
    #profile-watched-swiper .carousel-item,
    #profile-favorites-swiper .carousel-item { width: 160px; }
}
@media (min-width: 900px) {
    #profile-recent-swiper .carousel-item,
    #profile-watchlist-swiper .carousel-item,
    #profile-watched-swiper .carousel-item,
    #profile-favorites-swiper .carousel-item { width: 175px; }
}

/* Episode overlay on carousel items */
.carousel-item .status {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    display: flex;
    align-items: flex-end;
    padding: 5px;
    gap: 3px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
}
.carousel-item .poster {
    display: block;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 2/3;
    background: #ccc;
    position: relative;
}
.carousel-item .poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.carousel-item .poster:hover img { transform: scale(1.04); }
.carousel-item .film-name {
    display: block;
    margin-top: 5px;
    font-size: 10px;
    font-weight: 400;
    color: #333;
    text-align: center;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s;
}
.carousel-item .ep {
    background: #165fa7;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
}
.carousel-item .film-name:hover { color: #165fa7; }
.carousel-pagination { display: flex; justify-content: center; gap: 5px; margin-top: 10px; padding-bottom: 4px; }
.carousel-pagination .swiper-pagination-bullet { background: #ccd0d8; opacity: 1; width: 7px; height: 7px; }
.carousel-pagination .swiper-pagination-bullet-active { background: #165fa7; }

/* ============================================================
   TAKVİM
   ============================================================ */
.takvim-wrap {
    background: #fff;
    border: 1px solid #e0e3ec;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 20px;
}
/* Takvim nav wrap with arrows */
.takvim-nav-wrap {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #e0e3ec;
    background: #f7f8fc;
}
.takvim-arrow-btn {
    flex-shrink: 0;
    width: 26px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #666;
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    transition: background .2s, color .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.takvim-arrow-btn:hover { background: #e8f0fe; color: #165fa7; }

.takvim-days {
    flex: 1;
    display: flex;
    align-items: center;
    background: transparent;
    border-bottom: none;
    padding: 6px 4px;
    gap: 4px;
    overflow-x: auto;
}
.takvim-days::-webkit-scrollbar { display: none; }
.day-btn {
    flex: 1;
    min-width: 64px;
    border: 1px solid #dde0e8;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    padding: 5px 4px;
    text-align: center;
    transition: all .2s;
    font-family: inherit;
}
.day-btn .day-name { display: block; font-size: 9px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.3px; }
.day-btn .day-date { display: block; font-size: 11px; font-weight: 700; color: #333; margin-top: 1px; }
.day-btn.active { background: #165fa7; border-color: #165fa7; }
.day-btn.active .day-name,
.day-btn.active .day-date { color: #fff; }
.day-btn:hover:not(.active) { border-color: #165fa7; }

.takvim-schedule { padding: 0; }
.schedule-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px solid #f0f2f5;
    transition: background .15s;
}
.schedule-row:last-child { border-bottom: none; }
.schedule-row:hover { background: #f7f8fc; }
.schedule-row .saat { font-size: 11px; font-weight: 700; color: #999; width: 38px; flex-shrink: 0; }
.schedule-row .anime-title { flex: 1; font-size: 11px; color: #333; font-weight: 500; transition: color .2s; }
.schedule-row .anime-title:hover { color: #165fa7; }
.schedule-row .ep-badge {
    background: #f0f2f5;
    border: 1px solid #dde0e8;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #555;
    padding: 3px 8px;
    white-space: nowrap;
    transition: all .2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.schedule-empty { padding: 18px 14px; text-align: center; font-size: 11px; color: #888; }
.schedule-row .ep-badge:hover { background: #165fa7; border-color: #165fa7; color: #fff; }
.schedule-row .ep-badge.ep-badge-released {
    background: #16a34a;
    border-color: #15803d;
    color: #fff;
}
.schedule-row .ep-badge.ep-badge-released:hover {
    background: #15803d;
    border-color: #14532d;
    color: #fff;
}

/* ============================================================
   ASIDE / SIDEBAR
   ============================================================ */
.aside-box {
    background: #fff;
    border: 1px solid #e0e3ec;
    border-radius: 5px;
    margin-bottom: 13px;
    overflow: hidden;
}
.aside-box-title {
    background: #165fa7;
    color: #fff;
    padding: 8px 11px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.aside-box-body { padding: 10px; }

/* Gelişmiş Arama — AnimeWorld stili (beyaz kart + pill filtreler) */
.adv-box { background: #fff; padding: 11px; overflow: visible; }
.adv-box-title {
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #165fa7;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 10px;
    padding: 0 0 9px 0;
    border-bottom: 1px solid #e3e6ee;
}
.adv-box-body { padding: 0; }

.adv-search-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-bottom: 10px;
}
.adv-pill {
    width: 100%;
    padding: 6px 22px 6px 22px;
    border: 1px solid #d9dde6;
    border-radius: 5px;
    background: #f3f5f8;
    font-size: 11px;
    color: #555;
    cursor: pointer;
    appearance: none;
    text-align: center;
    text-align-last: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23666' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    transition: border-color .15s, background-color .15s;
}
.adv-pill option { text-align: left; }
.adv-pill:hover {
    background-color: #e4e8ef;
    border-color: #c4cad6;
    color: #333;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.12), inset 0 -1px 0 rgba(255,255,255,0.5);
}
.adv-pill:active {
    background-color: #dde2eb;
    box-shadow: inset 0 2px 3px rgba(0,0,0,0.15);
}
.adv-pill-input {
    background-image: none;
    padding: 6px 10px;
    outline: none;
    text-align: center;
}
.adv-pill-input::placeholder { color: #999; }

/* ----- Custom dropdown (checkbox + bouncy panel) ----- */
.adv-dd { position: relative; }
.adv-dd-btn {
    display: block;
    text-align: center;
    width: 100%;
    line-height: 1.3;
    font-family: inherit;
}
.adv-dd-btn .adv-dd-label { color: #333; font-weight: 600; }
.adv-dd-btn .adv-dd-value { color: #777; margin-left: 3px; }
.adv-dd.is-open .adv-dd-btn {
    background-color: #e4e8ef;
    border-color: #165fa7;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.12);
}

.adv-dd-panel {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: 280px;
    background: #fff;
    border: 1px solid #d9dde6;
    border-radius: 6px;
    box-shadow: 0 10px 28px rgba(13,71,161,0.18), 0 2px 6px rgba(0,0,0,0.08);
    z-index: 60;
    padding: 8px;
    transform-origin: top center;
    transform: scale(0.85) translateY(-6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s ease-out, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.adv-dd.is-open .adv-dd-panel {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
}
.adv-dd-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(90px, 1fr));
    gap: 2px 12px;
    max-height: 240px;
    overflow-y: auto;
    padding-right: 4px;
}
.adv-dd-opt {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    color: #444;
    transition: background .12s, color .12s;
    white-space: nowrap;
}
.adv-dd-opt:hover { background: #eef3fb; color: #165fa7; }
.adv-dd-opt input { position: absolute; opacity: 0; pointer-events: none; }
.adv-dd-check {
    width: 13px;
    height: 13px;
    border: 1.5px solid #b9c0cc;
    border-radius: 3px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: background .15s, border-color .15s;
}
.adv-dd-opt input[type=radio] + .adv-dd-check { border-radius: 50%; }
.adv-dd-opt input:checked + .adv-dd-check {
    background: #165fa7;
    border-color: #165fa7;
}
.adv-dd-opt input[type=checkbox]:checked + .adv-dd-check::after {
    content: '';
    width: 4px;
    height: 7px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}
.adv-dd-opt input[type=radio]:checked + .adv-dd-check::after {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
}
.adv-dd-opt-text { flex: 1; }
.adv-dd-empty { padding: 8px 6px; color: #999; font-size: 11px; grid-column: 1 / -1; text-align: center; }

/* Maskot */
.aside-maskot-box { overflow: visible; background: transparent; border: none; }
.aside-maskot-inner { position: relative; text-align: center; }
.aside-maskot-img { width: 100%; max-width: 175px; margin: 0 auto; display: block; }
.aside-maskot-bubble {
    background: #fff;
    border: 2px solid #165fa7;
    border-radius: 10px;
    padding: 8px 11px;
    font-size: 11px;
    color: #333;
    text-align: center;
    margin-top: -8px;
    position: relative;
    z-index: 1;
}
.aside-maskot-bubble strong { color: #165fa7; }
/* Discord davet kutusu — newest-box ile ayni baslik/cerceve paleti */
.discord-head {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #d8dde6;
}
.discord-title {
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #165fa7;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.discord-body {
    padding: 14px;
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.discord-link {
    display: block;
    height: 100%;
    transition: transform .18s ease, filter .18s ease;
}
.discord-link:hover { transform: scale(1.04); filter: drop-shadow(0 6px 12px rgba(88,101,242,.55)); }
.discord-img { display: block; height: 100%; width: auto; max-width: 100%; }
.btn-ara {
    width: 100%;
    background: #165fa7;
    color: #fff;
    border: none;
    padding: 7px;
    border-radius: 4px;
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: background .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn-ara:hover { background: #0d47a1; }

/* ----- Kategori liste sayfasi: tek beyaz kutu (head + adv-search + posterler) ----- */
.listing-shell {
    background: #fff;
    padding: 11px;
    border-radius: 4px;
    margin-bottom: 16px;
}
/* Head: yorumlar tarzinda — flush soldan saga gri alt cizgi + sadece yazinin altinda mavi 2px cizgi */
.listing-head {
    margin: -11px -11px 12px;
    padding: 0 14px;
    border-bottom: 1px solid #e3e6ee;
}
.listing-head-title {
    display: inline-block;
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #165fa7;
    padding: 11px 0 9px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 2px solid #165fa7;
    margin-bottom: -1px;
}
.alpha-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
    padding: 8px;
    background: #f6f8fb;
    border: 1px solid #e3e6ee;
    border-radius: 4px;
}
.alpha-nav-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    font-family: 'Fira Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #444;
    background: #fff;
    border: 1px solid #d9dde6;
    border-radius: 3px;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.alpha-nav-item:hover {
    background: #165fa7;
    border-color: #165fa7;
    color: #fff;
}
.alpha-nav-item.is-active {
    background: #165fa7;
    border-color: #165fa7;
    color: #fff;
    cursor: default;
}

.listing-shell .adv-box--horizontal {
    background: transparent;
    padding: 0;
    margin-bottom: 12px;
    border-radius: 0;
}

/* ----- Kategori liste sayfasi pagination ----- */
.listing-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 14px 11px 4px;
    flex-wrap: wrap;
    font-family: 'Fira Sans', sans-serif;
}
.listing-pager .lp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid #d9dde6;
    border-radius: 5px;
    background: #f3f5f8;
    color: #333;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.listing-pager .lp-btn:hover {
    background: #165fa7;
    border-color: #165fa7;
    color: #fff;
}
.listing-pager .lp-btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: #f3f5f8;
    color: #999;
}
.listing-pager .lp-btn.is-disabled:hover {
    background: #f3f5f8;
    border-color: #d9dde6;
    color: #999;
}
.listing-pager .lp-jump {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #555;
}
.listing-pager .lp-jump-label { font-weight: 500; color: #444; }
.listing-pager .lp-jump-total { color: #777; }
.listing-pager .lp-jump-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 6px 22px 6px 10px;
    border: 1px solid #d9dde6;
    border-radius: 5px;
    background: #fff;
    color: #165fa7;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23165fa7' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    transition: border-color .15s;
}
.listing-pager .lp-jump-select:hover { border-color: #165fa7; }

/* ----- Adv search: yatay (kategori liste sayfasi) varyanti ----- */
.adv-box--horizontal {
    background: #fff;
    padding: 11px;
    overflow: visible;
    margin-bottom: 16px;
    border-radius: 4px;
}
.adv-box--horizontal .adv-search-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
    margin-bottom: 0;
}
.adv-box--horizontal .adv-pill-input { text-align: left; padding-left: 14px; }
.btn-ara--inline {
    width: 100%;
    background: #165fa7;
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 5px;
    font-family: 'Fira Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: background .2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn-ara--inline:hover { background: #0d47a1; }
@media (max-width: 720px) {
    .adv-box--horizontal .adv-search-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Top Anime */
.top-tabs { display: flex; gap: 0; margin-bottom: 8px; }
.top-tab {
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    color: #888;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all .2s;
}
.top-tab.active { color: #165fa7; border-bottom-color: #165fa7; }
.top-tab:hover { color: #165fa7; }

.top-featured {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: block;
}
.top-featured img { width: 100%; height: 150px; object-fit: cover; display: block; }
.top-featured-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 40%, rgba(0,0,0,0.78) 100%);
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px;
}
.rank-badge-top {
    position: static;
    background: #fff;
    color: #165fa7;
    font-size: 13px;
    font-weight: 700;
    min-width: 24px;
    height: 24px;
    padding: 0 4px;
    border: 1px solid #165fa7;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}
.top-featured-text { flex: 1; min-width: 0; }
.top-featured-title { color: #fff; font-size: 14px; font-weight: 700; line-height: 1.2; }
.top-featured-meta {
    color: rgba(255,255,255,.85);
    font-size: 12px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.top-featured-meta i { margin-right: 3px; }

.top-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 10px;
    border-bottom: 1px solid #eef0f4;
}
.top-list-item:last-child { border-bottom: none; }
.top-list-item .rank-num {
    font-size: 13px;
    font-weight: 700;
    color: #165fa7;
    background: #fff;
    border: 1px solid #165fa7;
    border-radius: 3px;
    min-width: 24px;
    height: 24px;
    padding: 0 4px;
    margin-right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}
.top-list-item img { width: 50px; height: 70px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
.top-list-item .top-info { flex: 1; min-width: 0; }
.top-list-item .top-name {
    display: block;
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #222;
    line-height: 1.25;
    transition: color .2s;
}
.top-list-item .top-name:hover { color: #165fa7; }
.top-list-item .top-meta {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.top-list-item .top-meta i { margin-right: 3px; }

/* Aside box title with flex (title + button inline) */
.aside-box-title-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.aside-more-btn {
    background: #fff;
    color: #165fa7;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,.5);
    transition: background .2s, color .2s;
}
.aside-more-btn:hover { background: #e8f0fe; }

/* Top anime tabs inline in title */
.top-tabs-inline {
    display: flex;
    gap: 0;
}
.top-tabs-inline .top-tab {
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,.65);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color .2s, border-color .2s;
}
.top-tabs-inline .top-tab.active { color: #fff; border-bottom-color: #fff; }
.top-tabs-inline .top-tab:hover { color: #fff; }

/* Top anime body no top padding */
.aside-box-body-notop { padding-top: 0; }

/* Generi (Türler) kartı — başlık + butonlu satır */
.generi-box .adv-box-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 9px;
    margin-bottom: 10px;
    border-bottom: 1px solid #d8dde6;
}
.generi-box .adv-box-title-row .adv-box-title {
    margin: 0;
    padding: 0;
    border: none;
}
.generi-more {
    background: #165fa7;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 3px;
    text-transform: none;
    white-space: nowrap;
    transition: background .2s;
}
.generi-more:hover { background: #0d47a1; color: #fff; }

/* Genre links 2-column grid */
.genre-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 10px;
}
.genre-links a {
    font-size: 12px;
    color: #444;
    padding: 3px 3px;
    transition: color .15s;
    display: block;
}
.genre-links a:hover { color: #165fa7; }

/* Top Anime kart — beyaz kart, başlık + sekmeler aynı satırda */
.top-anime-box { background: #fff; padding: 0; }
.top-anime-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid #d8dde6;
    gap: 10px;
}
.top-anime-title {
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #165fa7;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.top-anime-head .top-tabs-inline { gap: 0; }
.top-anime-head .top-tabs-inline .top-tab {
    font-family: 'Fira Sans', sans-serif;
    padding: 0 6px;
    padding-bottom: 2px;
    font-size: 13px;
    font-weight: 400;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color .2s, border-color .2s;
    background: transparent;
}
.top-anime-head .top-tabs-inline .top-tab.active { color: #165fa7; border-bottom-color: #165fa7; }
.top-anime-head .top-tabs-inline .top-tab:hover { color: #165fa7; }

/* Top featured üzerine play butonu (One Piece kartı gibi) */
.top-featured { position: relative; }
.top-featured-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    z-index: 2;
    transition: background .2s, transform .2s;
}
.top-featured-play i { margin-left: 2px; }
.top-featured:hover .top-featured-play { background: #fff; transform: translate(-50%, -50%) scale(1.06); }

/* Top Anime — body & see-all */
.top-anime-box .aside-box-body-notop { padding: 12px; }
.top-anime-box .top-featured { margin: 0 0 4px; border-radius: 4px; }
.top-anime-box .top-see-all {
    display: block;
    width: 100%;
    margin: 10px 0 0;
    background: #165fa7;
    color: #fff;
    text-align: center;
    padding: 7px;
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-radius: 4px;
    transition: background .2s;
}
.top-anime-box .top-see-all:hover { background: #0d47a1; color: #fff; }

/* Yeni Eklenenler — Top Anime kart stili (beyaz kart + alt çizgili başlık) */
.newest-box { background: #fff; padding: 0; }
.newest-head {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #d8dde6;
}
.newest-title {
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #165fa7;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.newest-box .aside-box-body { padding: 4px 12px 6px; }
.newest-box .btn-see-all {
    margin: 12px 0 0;
    position: relative;
}
.newest-box .btn-see-all::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 2000px;
    height: 1px;
    background: #d8dde6;
    transform: translateX(-50%);
}
body.dark-mode .newest-box .btn-see-all::before { background: #2a2d36; }

/* Simple list (yeni eklenenler) */
.simple-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eef0f4;
}
.simple-list-item:last-child { border-bottom: none; }
.simple-list-item img { width: 44px; height: 62px; object-fit: cover; border-radius: 3px; flex-shrink: 0; margin-left: 8px; }
.simple-list-item .info { flex: 1; min-width: 0; }
.simple-list-item .info a {
    display: block;
    font-family: 'Fira Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
    color: #333;
    white-space: normal;
    transition: color .2s;
    margin-bottom: 4px;
}
.simple-list-item .info a:hover { color: #165fa7; }
.simple-list-item .info p {
    font-family: 'Fira Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #999;
}

/* ============================================================
   Aside: Dizi/Film Tartışmaları kutusu (sadece bölüm sayfası)
   ============================================================ */
.adisc-box { background: #fff; padding: 0; }
.adisc-head {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #d8dde6;
}
.adisc-title {
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #165fa7;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.adisc-title i { font-size: 12px; }

.adisc-list { list-style: none; padding: 4px 12px 0; margin: 0; }
.adisc-item { border-bottom: 1px solid #eef0f4; }
.adisc-item:last-child { border-bottom: none; }
.adisc-link {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 0;
    text-decoration: none;
    transition: color .15s;
}
.adisc-name {
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #2c3340;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.adisc-link:hover .adisc-name { color: #165fa7; }
.adisc-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: 'Fira Sans', sans-serif;
    font-size: 11.5px;
    color: #8a93a3;
}
.adisc-author { color: #6b7180; font-weight: 600; }
.adisc-replies {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #165fa7;
    font-weight: 600;
}
.adisc-replies i { font-size: 11px; }

.adisc-empty { padding: 14px 12px 14px; text-align: center; }
.adisc-empty p {
    font-family: 'Fira Sans', sans-serif;
    font-size: 12.5px;
    color: #6b7180;
    line-height: 1.5;
    margin: 0 0 12px;
}

.adisc-btn-open {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: calc(100% - 24px);
    margin: 10px 12px 12px;
    padding: 9px 12px;
    border: 1px solid #c9d6e8;
    background: linear-gradient(180deg,#f6faff 0%,#eaf2fb 100%);
    color: #165fa7;
    font-family: 'Fira Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 5px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.adisc-btn-open:hover {
    background: linear-gradient(180deg,#1d6dbb 0%,#165fa7 100%);
    color: #fff;
    border-color: #165fa7;
    transform: translateY(-1px);
}
.adisc-btn-open i { font-size: 10px; }

/* Dark mode */
body.dark-mode .adisc-box { background: #1f222a; }
body.dark-mode .adisc-head { border-bottom-color: #2a2d36; }
body.dark-mode .adisc-title { color: #6ea8e0; }
body.dark-mode .adisc-name { color: #e0e3ea; }
body.dark-mode .adisc-link:hover .adisc-name { color: #6ea8e0; }
body.dark-mode .adisc-author { color: #c0c5d0; }
body.dark-mode .adisc-item { border-bottom-color: #2a2d36; }
body.dark-mode .adisc-empty p { color: #a0a6b2; }
body.dark-mode .adisc-btn-open {
    background: linear-gradient(180deg,#262a34 0%,#20242c 100%);
    border-color: #2f3340;
    color: #6ea8e0;
}
body.dark-mode .adisc-btn-open:hover {
    background: linear-gradient(180deg,#1d6dbb 0%,#165fa7 100%);
    color: #fff;
    border-color: #165fa7;
}

/* ============================================================
   Aside: Diğer Serileri kutusu (sadece bölüm sayfası)
   ============================================================ */
.arelations-box { background: #fff; padding: 0; }
.arelations-head {
    display: flex; align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #d8dde6;
}
.arelations-title {
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px; font-weight: 400;
    color: #165fa7;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: inline-flex; align-items: center; gap: 6px;
}
.arelations-title i { font-size: 11px; }

.arelations-box .aside-box-body { padding: 4px 12px; }
.arelations-item { padding: 8px 0; }
.arelations-item .info p { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.arelations-thumb { display: block; flex-shrink: 0; }
.arelations-thumb img {
    width: 44px; height: 62px; object-fit: cover;
    border-radius: 3px; margin-left: 8px;
    transition: transform .15s;
}
.arelations-thumb:hover img { transform: scale(1.04); }

.arelations-tag {
    display: inline-block;
    padding: 2px 7px;
    font-size: 10.5px;
    font-weight: 600;
    border-radius: 3px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: #eaf2fb;
    color: #165fa7;
}
.arelations-tag-sequel      { background: #e6f7ec; color: #1e7e3c; }
.arelations-tag-prequel     { background: #fff1e6; color: #b85b16; }
.arelations-tag-spinoff     { background: #f3e9fb; color: #6f3aaa; }
.arelations-tag-side_story  { background: #fffbe6; color: #876200; }
.arelations-tag-alternative { background: #ffeef3; color: #b53364; }
.arelations-tag-collection  { background: #eaf2fb; color: #165fa7; }
.arelations-tag-franchise   { background: #eaf2fb; color: #165fa7; }
.arelations-tag-character   { background: #efeff7; color: #5b5d80; }
.arelations-tag-summary     { background: #efeff7; color: #5b5d80; }
.arelations-tag-related     { background: #f0f1f4; color: #555a66; }
.arelations-tag-other       { background: #f0f1f4; color: #555a66; }

/* Dark mode */
body.dark-mode .arelations-box { background: #1f222a; }
body.dark-mode .arelations-head { border-bottom-color: #2a2d36; }
body.dark-mode .arelations-title { color: #6ea8e0; }
body.dark-mode .arelations-tag { background: #2a3346; color: #9bc2e8; }
body.dark-mode .arelations-tag-sequel      { background: #1c3a26; color: #74c992; }
body.dark-mode .arelations-tag-prequel     { background: #3a2715; color: #e29c61; }
body.dark-mode .arelations-tag-spinoff     { background: #2e1f44; color: #c79df0; }
body.dark-mode .arelations-tag-side_story  { background: #3a3318; color: #ddc66a; }
body.dark-mode .arelations-tag-alternative { background: #3a1f2a; color: #ec88ad; }
body.dark-mode .arelations-tag-character   { background: #2a2c39; color: #aaaecb; }
body.dark-mode .arelations-tag-summary     { background: #2a2c39; color: #aaaecb; }
body.dark-mode .arelations-tag-related     { background: #2a2c33; color: #a8acb6; }
body.dark-mode .arelations-tag-other       { background: #2a2c33; color: #a8acb6; }

/* ---- Modal: Tartışma Aç ---- */
.adisc-modal-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(15,30,55,.55);
    display: none; align-items: center; justify-content: center;
    padding: 20px;
    backdrop-filter: blur(2px);
}
.adisc-modal-overlay.is-open { display: flex; animation: adiscFadeIn .14s ease; }
@keyframes adiscFadeIn { from { opacity: 0; } to { opacity: 1; } }

.adisc-modal {
    width: 100%; max-width: 540px;
    max-height: calc(100vh - 40px);
    background: #fff; border-radius: 10px;
    box-shadow: 0 24px 60px rgba(15,30,55,.35), 0 4px 12px rgba(15,30,55,.18);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: adiscSlideIn .18s ease;
}
@keyframes adiscSlideIn { from { transform: translateY(12px); opacity: .7; } to { transform: translateY(0); opacity: 1; } }

.adisc-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(180deg,#fbfcfe 0%,#f4f7fc 100%);
    border-bottom: 1px solid #e3e7ef;
}
.adisc-modal-head h3 {
    font-size: 14.5px; font-weight: 700; color: #1f2937;
    margin: 0; display: flex; align-items: center; gap: 8px;
}
.adisc-modal-head h3 i { color: #165fa7; font-size: 13px; }
.adisc-modal-close {
    background: transparent; border: none; cursor: pointer;
    font-size: 22px; line-height: 1; color: #6b7280;
    padding: 0 6px; transition: color .15s;
}
.adisc-modal-close:hover { color: #dc2626; }

.adisc-modal-body {
    padding: 16px 18px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 12px;
}

.adisc-pin {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px;
    background: #eef4fb;
    border: 1px solid #d3e1f1;
    border-radius: 6px;
    font-size: 12.5px;
    color: #1f2937;
}
.adisc-pin i { color: #165fa7; font-size: 11px; }
.adisc-pin-label { color: #6b7280; font-weight: 600; }
.adisc-pin strong { color: #165fa7; }

.adisc-field { display: flex; flex-direction: column; gap: 5px; }
.adisc-field label {
    font-size: 12px; font-weight: 700; color: #3c4250;
    letter-spacing: .2px;
}
.adisc-field input[type="text"],
.adisc-field textarea {
    width: 100%;
    padding: 9px 11px;
    background: #fff;
    border: 1px solid #d8dfeb;
    border-radius: 5px;
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    color: #1f2937;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    resize: vertical;
}
.adisc-field input[type="text"]:focus,
.adisc-field textarea:focus {
    border-color: #165fa7;
    box-shadow: 0 0 0 3px rgba(22,95,167,.12);
}
.adisc-error { font-size: 11.5px; color: #dc2626; min-height: 14px; }
.adisc-counter { font-size: 11px; color: #9098a8; text-align: right; }
.adisc-rules {
    font-size: 11.5px; color: #6b7280;
    margin: 0; line-height: 1.5;
}
.adisc-rules a { color: #165fa7; font-weight: 600; }

.adisc-modal-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 18px;
    background: #f7faff;
    border-top: 1px solid #e3e7ef;
}
.adisc-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px;
    border: none; border-radius: 5px;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer;
    transition: background .15s, transform .12s, box-shadow .15s;
}
.adisc-btn i { font-size: 10px; }
.adisc-btn-cancel {
    background: #fff; color: #3c4250;
    border: 1px solid #d8dfeb;
}
.adisc-btn-cancel:hover { background: #eef4fb; border-color: #bfd2ea; color: #165fa7; }
.adisc-btn-submit {
    background: linear-gradient(180deg,#1d6dbb 0%,#165fa7 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(22,95,167,.25);
}
.adisc-btn-submit:hover {
    background: linear-gradient(180deg,#1d6dbb 0%,#0d4d8c 100%);
    box-shadow: 0 4px 10px rgba(22,95,167,.35);
    transform: translateY(-1px);
}
.adisc-btn-submit:disabled { opacity: .6; cursor: wait; transform: none; }

body.dark-mode .adisc-modal { background: #1f222a; }
body.dark-mode .adisc-modal-head {
    background: linear-gradient(180deg,#23262f 0%,#1c1f27 100%);
    border-bottom-color: #2a2d36;
}
body.dark-mode .adisc-modal-head h3 { color: #e0e3ea; }
body.dark-mode .adisc-modal-head h3 i { color: #6ea8e0; }
body.dark-mode .adisc-pin {
    background: #232831; border-color: #2f3340; color: #e0e3ea;
}
body.dark-mode .adisc-pin strong { color: #6ea8e0; }
body.dark-mode .adisc-field label { color: #c0c5d0; }
body.dark-mode .adisc-field input[type="text"],
body.dark-mode .adisc-field textarea {
    background: #15171d; border-color: #2f3340; color: #e0e3ea;
}
body.dark-mode .adisc-rules { color: #a0a6b2; }
body.dark-mode .adisc-rules a { color: #6ea8e0; }
body.dark-mode .adisc-modal-foot {
    background: #1a1d24; border-top-color: #2a2d36;
}
body.dark-mode .adisc-btn-cancel {
    background: #262a34; color: #c0c5d0; border-color: #2f3340;
}
body.dark-mode .adisc-btn-cancel:hover {
    background: #1d242f; color: #6ea8e0; border-color: #3a4250;
}

/* ============================================================
   FLOATING MASKOT — sağ kenarda sabit duran dekoratif maskot
   ============================================================ */
.floating-maskot {
    position: fixed;
    right: -70px;
    bottom: -70px;
    height: 700px;
    max-height: 92vh;
    width: auto;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

/* Maskot her zaman içeriğin altında kalsın — header, footer, body içeriği üzerine binsin */
#header { position: relative; z-index: 1000; }
.alert-bar-wrap { position: relative; z-index: 20; }
#body { position: relative; z-index: 10; }
#footer { position: relative; z-index: 30; }

/* Dar ekranlarda boyutu küçült, çok dar olunca tamamen gizle */
@media (max-width: 1280px) {
    .floating-maskot { height: 560px; bottom: -75px; right: -80px; }
}
@media (max-width: 1080px) {
    .floating-maskot { height: 460px; bottom: -60px; right: -65px; }
}
@media (max-width: 900px) {
    .floating-maskot { display: none; }
}

/* ============================================================
   FOOTER — AnimeWorld stili (koyu mavi gradient + kenardaki maskot)
   ============================================================ */
#footer { margin-top: 8px; }

/* Üst toggle çubuğu (daha koyu strip) */
.footer-togglebar {
    background: #0a3375;
    padding: 7px 0;
}
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.toggle-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c5d6ee;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.toggle-switch { position: relative; width: 32px; height: 18px; display: inline-block; cursor: pointer; flex-shrink: 0; }
.toggle-switch input { display: none; }
.toggle-slider {
    position: absolute;
    inset: 0;
    background: #1e5aad;
    border-radius: 18px;
    transition: background .2s;
}
.toggle-slider::before {
    content: '';
    position: absolute;
    width: 12px; height: 12px;
    background: #fff;
    border-radius: 50%;
    top: 3px; left: 3px;
    transition: transform .2s;
}
.toggle-switch input:checked + .toggle-slider { background: #4caf50; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(14px); }

/* Ana koyu mavi alan — gradient + sağda maskot */
.footer-main {
    background: linear-gradient(135deg, #0d3b8e 0%, #165fa7 60%, #1f6cba 100%);
    padding: 26px 0 20px;
    position: relative;
    overflow: hidden;
}
.footer-main > .container { position: relative; z-index: 2; }

/* Footer dekoratif görsel — sağda, sola çekilmiş ve biraz büyük */
.footer-image {
    position: absolute;
    right: 20%;
    bottom: 0;
    height: auto;
    width: 280px;
    max-width: 28%;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    opacity: 0.9;
}
@media (max-width: 768px) {
    .footer-image { width: 160px; opacity: 0.6; right: 6%; }
}

/* A-Z bar — koyu mavi üzerinde, beyaz başlıklı */
.footer-azbar {
    padding: 0 0 18px;
    margin-bottom: 22px;
    border: none;
    background: transparent;
}
.azbar-title-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.azbar-title-row h3 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: 0.2px;
}
.azbar-title-row p { font-size: 11px; color: #c5d6ee; }
.azbar-letters { display: flex; flex-wrap: wrap; gap: 8px; }
.az-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px; height: 26px;
    padding: 0 6px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 4px;
    background: #E6E8F0;
    color: #333;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.az-btn:hover, .az-btn.active { background: #0d47a1; border-color: #0d47a1; color: #fff; }

/* Ana satır — AIUTO / LINK / center */
.footer-main-inner {
    display: grid;
    grid-template-columns: 110px 130px 1fr;
    gap: 32px;
    align-items: start;
}

.footer-col h4 {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.footer-col ul li { margin-bottom: 6px; }
.footer-col ul li a {
    font-size: 11px;
    color: #c5d6ee;
    transition: color .2s;
    line-height: 1.5;
    display: inline-block;
}
.footer-col ul li a:hover { color: #fff; }

/* Center: logo + socials + copy + made + sisters (ortalı, hafifçe sola çekilmiş) */
.footer-center {
    text-align: center;
    padding-top: 4px;
    padding-left: 0;
    margin-left: -230px;
    pointer-events: none;
}
.footer-center a,
.footer-center button { pointer-events: auto; }
.footer-logo {
    display: inline-block;
    margin-bottom: 12px;
}
.footer-logo-img {
    height: 44px;
    width: auto;
    display: block;
    margin: 0 auto;
}
.footer-socials {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 14px;
}
@media (max-width: 768px) {
    .footer-center { padding-left: 0; margin-left: 0; }
}
.footer-socials a {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
}
.footer-socials a:hover { background: rgba(255,255,255,.25); transform: translateY(-1px); }

.footer-copy-line {
    font-size: 12px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 6px;
}
.footer-copy-mini {
    font-size: 10px;
    color: #b6cbe8;
    line-height: 1.6;
    margin-bottom: 10px;
}
.footer-copy-mini a { color: #b6cbe8; }
.footer-copy-mini strong { color: #fff; }
.footer-copy-mini a:hover { color: #fff; text-decoration: underline; }

.footer-made {
    font-size: 10px;
    color: #c5d6ee;
    margin-bottom: 6px;
}
.footer-made i { color: #ff5b6e; margin: 0 2px; }
.footer-made strong { color: #fff; }

/* ============================================================
   ANİME DETAY SAYFASI
   ============================================================ */
.anime-banner {
    width: 100%;
    height: 256px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 20px;
}
.anime-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 30%, rgba(0,0,0,0.85) 100%);
}
.anime-banner-title {
    position: absolute;
    bottom: 20px; left: 20px;
    z-index: 2;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.anime-banner-edit {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 4px;
    text-decoration: none;
    backdrop-filter: blur(4px);
    transition: background .15s, border-color .15s;
}
.anime-banner-edit:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

.anime-banner-now {
    position: absolute;
    bottom: 18px; right: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    color: #fff;
    font-size: 12.5px;
    line-height: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.anime-banner-now.is-hidden { display: none; }
.anime-banner-now strong { font-weight: 700; }
.anime-banner-now .abnow-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34,197,94,0.7);
    animation: cz-now-pulse 1.6s ease-out infinite;
    flex-shrink: 0;
}
@keyframes cz-now-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.anime-info-box {
    background: #fff;
    border: 1px solid #e0e3ec;
    border-radius: 5px;
    padding: 22px;
    margin-bottom: 20px;
    display: flex;
    gap: 22px;
}
.anime-poster {
    width: 190px;
    height: 270px;
    flex-shrink: 0;
    align-self: flex-start;
    border-radius: 5px;
    overflow: hidden;
    background: #ccc;
    position: relative;
}
.anime-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anime-poster-link { display: block; width: 100%; height: 100%; line-height: 0; }

/* Poster hover overlay (anime detay sayfası) */
.anime-poster-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 22, 0.78);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
    padding: 18px 16px;
    opacity: 0;
    visibility: hidden;
    transform: scale(.98);
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
    pointer-events: none;
    z-index: 2;
}
.anime-poster.has-overlay:hover .anime-poster-overlay,
.anime-poster.has-overlay:focus-within .anime-poster-overlay {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    pointer-events: auto;
}
.apo-btn {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    font: 600 12.5px/1.2 inherit;
    padding: 9px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    transition: background .15s ease, border-color .15s ease, transform .12s ease, color .15s ease;
}
.apo-btn:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.32); transform: translateY(-1px); }
.apo-btn:focus { outline: 2px solid #4f8df8; outline-offset: 2px; }
.apo-btn i { font-size: 14px; flex-shrink: 0; width: 16px; text-align: center; }
.apo-btn .apo-label { flex: 0 0 auto; }
.apo-btn.is-pulse { animation: cz-fav-pulse .28s ease; }

.apo-watched.is-on { background: #2c8c5b; border-color: #2c8c5b; }
.apo-watched.is-on:hover { background: #25754d; border-color: #25754d; }
.apo-fav.is-on { background: #e25555; border-color: #e25555; }
.apo-fav.is-on:hover { background: #c64646; border-color: #c64646; }
.apo-later.is-on { background: #0d47a1; border-color: #0d47a1; }
.apo-later.is-on:hover { background: #0a3a87; border-color: #0a3a87; }

@media (hover: none) {
    /* Dokunmatik: overlay'i sürekli yarı görünür yap */
    .anime-poster.has-overlay .anime-poster-overlay {
        opacity: 1; visibility: visible; transform: none; pointer-events: auto;
        background: linear-gradient(180deg, rgba(10,14,22,0) 0%, rgba(10,14,22,0) 35%, rgba(10,14,22,0.85) 100%);
        justify-content: flex-end;
    }
}

.anime-details { flex: 1; min-width: 0; }
.anime-title-link { color: inherit; text-decoration: none; transition: color .15s; }
.anime-title-link:hover { color: #0d47a1; text-decoration: underline; }
body.dark-mode .anime-title-link:hover { color: #9ec3ff; }

.anime-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}
.anime-head-titles { min-width: 0; flex: 1; }
.anime-details h1 {
    font-family: 'Fira Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #165fa7;
    line-height: 1.2;
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}
.anime-details .alt-title { font-size: 13px; color: #888; }

/* Yıldız oylama */
.anime-rating-box { flex-shrink: 0; text-align: right; min-width: 140px; position: relative; }
.rating-stars-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.anime-fav-btn {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: #8a8f99;
    transition: color .15s ease, transform .12s ease;
}
.anime-fav-btn:hover { color: #e25555; transform: scale(1.1); }
.anime-fav-btn.is-fav { color: #e25555; }
.anime-fav-btn.is-fav:hover { color: #c93737; }
.anime-fav-btn:focus { outline: none; }
.anime-fav-btn.is-pulse { animation: cz-fav-pulse .28s ease; }
@keyframes cz-fav-pulse {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.28); }
    100% { transform: scale(1); }
}
.rating-stars-wrap { position: relative; display: inline-block; }
.rating-stars { display: inline-flex; gap: 2px; font-size: 18px; line-height: 1; }
.rate-star {
    position: relative;
    display: inline-block;
    line-height: 1;
}
.rate-star .bg,
.rate-star .fg {
    display: block;
}
.rate-star .bg { color: #d0d4dc; }
.rate-star .fg {
    position: absolute;
    top: 0;
    left: 0;
    color: #6b6b6b;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
    transition: width .12s ease-out, color .12s;
}
.rate-star.is-half .fg { width: 50%; }
.rate-star.is-full .fg { width: 100%; }
.anime-rating-box.user-rated .rate-star .fg { color: #f5a623; }

.rate-half {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}
.rate-half.left  { left: 0; }
.rate-half.right { right: 0; }
.rate-half:focus { outline: none; }

.rating-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #2b2f38;
    color: #fff;
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s;
    z-index: 5;
}
.rating-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #2b2f38;
}
.rating-tooltip.is-visible { opacity: 1; }

.rating-meta {
    margin-top: 4px;
    font-size: 12px;
    color: #888;
    min-height: 16px;
    position: relative;
}

/* Meta grid (iki sütunlu, kare madde işareti) */
.anime-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 28px;
    padding: 12px 0 14px;
    border-top: 1px solid #eef0f5;
    border-bottom: 1px solid #eef0f5;
    margin-bottom: 14px;
}
.anime-meta-col { list-style: none; padding: 0; margin: 0; }
.anime-meta-col li {
    font-size: 12.5px;
    line-height: 1.9;
    color: #555;
    position: relative;
    padding-left: 14px;
}
.anime-meta-col li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    background: #6b6b6b;
}
.anime-meta-col li span { color: #888; margin-right: 4px; }
.anime-meta-col li strong { color: #333; font-weight: 600; }
.anime-meta-col li strong a { color: #165fa7; }
.anime-meta-col li strong a:hover { text-decoration: underline; }
.anime-meta-col li.meta-genres { line-height: 1.6; }

.meta-stat-icon { font-size: 12px; margin-right: 4px; vertical-align: -1px; }
.meta-stat-watched  { color: #2c8c5b; }
.meta-stat-progress { color: #d97706; }
.meta-stat-later    { color: #0d47a1; }
.meta-stat-fav      { color: #e25555; }

/* Açıklama */
.anime-desc-wrap { position: relative; margin-bottom: 16px; }
.anime-desc { font-size: 13px; color: #555; line-height: 1.7; margin: 0; }
.anime-desc-wrap.is-collapsible .anime-desc {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.anime-desc-wrap.is-collapsible.is-open .anime-desc {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}
.anime-desc-toggle {
    margin-top: 6px;
    background: #f4f6fb;
    border: 1px solid #e0e3ec;
    color: #165fa7;
    font-family: 'Fira Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 3px;
    cursor: pointer;
    width: 100%;
    transition: background .15s;
}
.anime-desc-toggle:hover { background: #e8edf6; }

.anime-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-primary-cz {
    background: #165fa7;
    color: #fff;
    padding: 9px 18px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background .2s;
}
.btn-primary-cz:hover { background: #0d47a1; color: #fff; }
.btn-outline-cz {
    background: transparent;
    color: #165fa7;
    padding: 9px 18px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid #165fa7;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all .2s;
}
.btn-outline-cz:hover { background: #165fa7; color: #fff; }
.btn-outline-cz.btn-follow.is-following {
    background: transparent;
    color: #2c8c5b;
    border-color: #2c8c5b;
}
.btn-outline-cz.btn-follow.is-following:hover {
    background: transparent;
    color: #b91c1c;
    border-color: #b91c1c;
}

/* Episode list */
.episode-list {
    background: #fff;
    border: 1px solid #e0e3ec;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 20px;
}
.ep-list-item {
    display: flex;
    align-items: center;
    padding: 11px 16px;
    border-bottom: 1px solid #f0f2f5;
    gap: 14px;
    transition: background .15s;
}
.ep-list-item:last-child { border-bottom: none; }
.ep-list-item:hover { background: #f7f8fc; }
.ep-list-item .ep-num { font-size: 13px; font-weight: 700; color: #165fa7; width: 80px; flex-shrink: 0; }
.ep-list-item .ep-title { flex: 1; font-size: 13px; color: #333; transition: color .2s; }
.ep-list-item .ep-title:hover { color: #165fa7; }
.ep-list-item .ep-date { font-size: 11px; color: #aaa; white-space: nowrap; }
.ep-list-item .ep-watch {
    background: #165fa7;
    color: #fff;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    transition: background .2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ep-list-item .ep-watch:hover { background: #0d47a1; }

/* Episode grid (sezon + bolum numaralari) */
.ep-grid-box {
    background: #fff;
    border: 1px solid #e0e3ec;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 20px;
}
.ep-grid-tabs {
    display: flex;
    gap: 22px;
    padding: 0 14px;
    border-bottom: 1px solid #e3e6ee;
}
.ep-grid-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 11px 0 9px;
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #9aa3b2;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    margin-bottom: -1px;
    transition: color .2s, border-color .2s;
}
.ep-grid-tab.active {
    color: #165fa7;
    border-bottom-color: #165fa7;
}
.ep-grid-tab:hover:not(.active) { color: #165fa7; }

.ep-grid-seasons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 14px 14px 4px;
}
.ep-season-btn {
    background: #e9ecf2;
    border: 1px solid #dde0e8;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #555;
    cursor: pointer;
    transition: all .2s;
}
.ep-season-btn.active { background: #165fa7; border-color: #165fa7; color: #fff; }
.ep-season-btn:hover:not(.active) { border-color: #165fa7; color: #165fa7; }

.ep-grid-ranges {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 14px 0;
}
.ep-grid-ranges.active { display: flex; }
.ep-range-btn {
    background: #f1f4fa;
    border: 1px solid #e3e6ee;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 11.5px;
    font-weight: 700;
    color: #666;
    cursor: pointer;
    transition: all .2s;
}
.ep-range-btn.active { background: #165fa7; border-color: #165fa7; color: #fff; }
.ep-range-btn:hover:not(.active) { border-color: #165fa7; color: #165fa7; }

.ep-grid-numbers {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 6px;
    padding: 14px;
}
.ep-grid-numbers.active { display: grid; }
.ep-num-btn {
    position: relative;
    background: #e9ecf2;
    border: 1px solid #dde0e8;
    border-radius: 4px;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 700;
    color: #555;
    text-align: center;
    text-decoration: none;
    transition: all .15s;
    overflow: visible;
}
.ep-num-btn .ep-num-label { position: relative; z-index: 1; }
.ep-num-btn.active { background: #165fa7; border-color: #165fa7; color: #fff; }
.ep-num-btn:hover:not(.active) { border-color: #165fa7; color: #165fa7; background: #fff; }

/* İzlenmiş bölüm — koyu gri arka plan (active rengini override etmez) */
.ep-num-btn.is-watched:not(.active) {
    background: #b8bdc8;
    border-color: #a7adb9;
    color: #333;
}
.ep-num-btn.is-watched:not(.active):hover {
    background: #fff;
    color: #165fa7;
    border-color: #165fa7;
}

/* Sağ üst köşedeki ikon kümesi */
.ep-num-btn .ep-num-flags {
    position: absolute;
    top: -5px;
    right: -4px;
    display: flex;
    flex-direction: row-reverse;
    gap: 2px;
    pointer-events: none;
    z-index: 2;
}
.ep-num-btn .ep-flag {
    display: none;
    font-size: 9px;
    line-height: 1;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    color: #555;
    text-align: center;
    padding: 2px 0 0;
    box-shadow: 0 0 0 1.5px #fff, 0 1px 2px rgba(0,0,0,.25);
}
.ep-num-btn.is-watched .ep-flag-watched { display: inline-block; color: #27ae60; }
.ep-num-btn.is-fav     .ep-flag-fav     { display: inline-block; color: #e74c3c; }
.ep-num-btn.is-later   .ep-flag-later   { display: inline-block; color: #2980b9; }

/* Benzer animeler — bolumler kutusu ile ayni gorunum */
.similar-box {
    background: #fff;
    border: 1px solid #e0e3ec;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 20px;
}
.similar-box-tabs {
    display: flex;
    gap: 22px;
    padding: 0 14px;
    border-bottom: 1px solid #e3e6ee;
}
.similar-box-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 11px 0 9px;
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #9aa3b2;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: default;
    margin-bottom: -1px;
}
.similar-box-tab.active {
    color: #165fa7;
    border-bottom-color: #165fa7;
}
.similar-box-body { padding: 14px; }
.similar-box-body .film-list { margin: 0; }

/* Etiketler (SEO) — similar-box ile ayni kapsayici, body farkli */
.tags-box .similar-box-body.tags-list {
    font-family: 'Fira Sans', sans-serif;
    font-size: 11px;
    line-height: 1.8;
    color: #5b6473;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.tags-box .tags-list a {
    color: #5b6473;
    text-decoration: none;
    transition: color .15s ease;
}
.tags-box .tags-list a:hover {
    color: #165fa7;
    text-decoration: underline;
}

/* ============================================================
   BÖLÜM İZLEME SAYFASI
   ============================================================ */
.player-wrap {
    background: #000;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 16px;
    position: relative;
    aspect-ratio: 16/9;
}
.player-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.player-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}
.player-nav .ep-info { font-size: 15px; font-weight: 700; color: #111; }
.player-nav .ep-info span { color: #888; font-size: 13px; font-weight: 400; margin-left: 6px; }
.player-btns { display: flex; gap: 8px; }

.server-list {
    background: #fff;
    border: 1px solid #e0e3ec;
    border-radius: 5px;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.server-list .server-label { font-size: 12px; font-weight: 700; color: #888; text-transform: uppercase; }
.server-btn {
    background: #f0f2f5;
    border: 1px solid #dde0e8;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #555;
    cursor: pointer;
    transition: all .2s;
}
.server-btn.active { background: #165fa7; border-color: #165fa7; color: #fff; }
.server-btn:hover:not(.active) { border-color: #165fa7; color: #165fa7; }

/* ============================================================
   TÜR / KATEGORİ SAYFASI
   ============================================================ */
.page-title-bar {
    background: #fff;
    border: 1px solid #e0e3ec;
    border-radius: 5px;
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.page-title-bar h1 { font-size: 18px; font-weight: 700; color: #111; }
.page-title-bar .total { font-size: 13px; color: #888; }

/* Filter bar */
.filter-bar {
    background: #fff;
    border: 1px solid #e0e3ec;
    border-radius: 5px;
    padding: 14px 16px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.filter-bar label { font-size: 12px; font-weight: 700; color: #888; text-transform: uppercase; margin-right: 2px; }
.filter-select {
    padding: 6px 10px;
    border: 1px solid #dde0e8;
    border-radius: 4px;
    background: #f9f9fb;
    font-size: 12px;
    color: #444;
    cursor: pointer;
}
.filter-bar .btn-filter {
    margin-left: auto;
    background: #165fa7;
    color: #fff;
    border: none;
    padding: 7px 14px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.filter-bar .btn-filter:hover { background: #0d47a1; }

/* Pagination */
.pager-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.pager-row .pager-btn {
    min-width: 34px; height: 34px;
    border: 1px solid #dde0e8;
    border-radius: 4px;
    background: #fff;
    color: #444;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
}
.pager-row .pager-btn:hover,
.pager-row .pager-btn.active { background: #165fa7; border-color: #165fa7; color: #fff; }
.pager-row .pager-btn.disabled { opacity: .4; cursor: default; }

/* ============================================================
   ARŞİV (A-Z) SAYFASI
   ============================================================ */
.az-filter-row {
    background: #fff;
    border: 1px solid #e0e3ec;
    border-radius: 5px;
    padding: 14px 16px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
.az-filter-row .az-filter-btn {
    min-width: 30px; height: 30px;
    border: 1px solid #dde0e8;
    border-radius: 4px;
    background: #E6E8F0;
    color: #444;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}
.az-filter-row .az-filter-btn:hover,
.az-filter-row .az-filter-btn.active { background: #165fa7; border-color: #165fa7; color: #fff; }

/* ============================================================
   YARDIMCI
   ============================================================ */
.hidden { display: none !important; }
.btn-see-all {
    display: block;
    width: 100%;
    text-align: center;
    background: #165fa7;
    color: #fff;
    padding: 7px;
    border-radius: 4px;
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    transition: background .2s;
    margin-bottom: 0;
}
.btn-see-all:hover { background: #0d47a1; color: #fff; }

/* ============================================================
   DARK MODE
   ============================================================ */
body.dark-mode {
    background: #1a1c23;
    color: #ccc;
}
body.dark-mode #header,
body.dark-mode .aside-box:not(.aside-maskot-box),
body.dark-mode .widget-body-box,
body.dark-mode .takvim-wrap,
body.dark-mode .carousel-wrap,
body.dark-mode .episode-list,
body.dark-mode .anime-info-box,
body.dark-mode .server-list,
body.dark-mode .page-title-bar,
body.dark-mode .filter-bar,
body.dark-mode .az-filter-row,
body.dark-mode .player-nav-box { background: #23262f; border-color: #333; color: #ccc; }
body.dark-mode .film-item .film-name { color: #ccc; }
body.dark-mode .az-btn { background: #1f242c; border-color: #2c333d; color: #c8d0db; }
body.dark-mode .az-btn:hover, body.dark-mode .az-btn.active { background: #0d47a1; border-color: #0d47a1; color: #fff; }
body.dark-mode .nav { background: #0e3d8e; }
body.dark-mode .widget-title { border-bottom-color: #333; }
body.dark-mode .widget-title .title,
body.dark-mode .widget-title h2 { color: #eee; border-bottom-color: #165fa7; }
body.dark-mode .search-inner { background: #2a2d36; border-color: #444; }
body.dark-mode #search-bar { color: #ccc; }
body.dark-mode #search .btn-search-submit { color: #aaa; }
body.dark-mode .btn-search-close { color: #aaa; }
body.dark-mode .btn-search-close:hover { color: #ff6b6b; }
body.dark-mode .genre-links a { color: #bbb; }
body.dark-mode .genre-links a:hover { color: #90caf9; }
body.dark-mode .carousel-item .film-name { color: #ccc; }
body.dark-mode .takvim-nav-wrap { background: #2a2d36; border-color: #333; }
body.dark-mode .takvim-arrow-btn { color: #aaa; }
body.dark-mode .takvim-arrow-btn:hover { background: #333; color: #90caf9; }
body.dark-mode .schedule-row { border-color: #2a2d36; }
body.dark-mode .schedule-row:hover { background: #2a2d36; }
body.dark-mode .schedule-row .anime-title { color: #ccc; }
body.dark-mode .ep-list-item { border-color: #2a2d36; }
body.dark-mode .ep-list-item:hover { background: #2a2d36; }
body.dark-mode .ep-grid-box { background: #23262f; border-color: #333; }
body.dark-mode .ep-grid-tabs { border-color: #2a2d36; }
body.dark-mode .ep-grid-tab { color: #6f7886; }
body.dark-mode .ep-grid-tab.active { color: #6ea6e8; border-bottom-color: #6ea6e8; }
body.dark-mode .ep-grid-tab:hover:not(.active) { color: #6ea6e8; }
body.dark-mode .similar-box { background: #23262f; border-color: #333; }
body.dark-mode .similar-box-tabs { border-color: #2a2d36; }
body.dark-mode .similar-box-tab { color: #6f7886; }
body.dark-mode .similar-box-tab.active { color: #6ea6e8; border-bottom-color: #6ea6e8; }
body.dark-mode .tags-box .similar-box-body.tags-list { color: #b0b8c5; }
body.dark-mode .tags-box .tags-list a { color: #b0b8c5; }
body.dark-mode .tags-box .tags-list a:hover { color: #6ea6e8; }
body.dark-mode .ep-season-btn { background: #1f242c; border-color: #2c333d; color: #c8d0db; }
body.dark-mode .ep-season-btn.active { background: #0d47a1; border-color: #0d47a1; color: #fff; }
body.dark-mode .ep-range-btn { background: #1f242c; border-color: #2c333d; color: #c8d0db; }
body.dark-mode .ep-range-btn.active { background: #0d47a1; border-color: #0d47a1; color: #fff; }
body.dark-mode .ep-range-btn:hover:not(.active) { background: #2a2d36; color: #6ea6e8; border-color: #0d47a1; }
body.dark-mode .ep-num-btn { background: #1f242c; border-color: #2c333d; color: #c8d0db; }
body.dark-mode .ep-num-btn.active { background: #0d47a1; border-color: #0d47a1; color: #fff; }
body.dark-mode .ep-num-btn:hover:not(.active) { background: #2a2d36; color: #6ea6e8; border-color: #0d47a1; }
body.dark-mode .ep-num-btn.is-watched:not(.active) {
    background: #34394a;
    border-color: #424859;
    color: #8d96a8;
}
body.dark-mode .ep-num-btn.is-watched:not(.active):hover {
    background: #2a2d36;
    color: #6ea6e8;
    border-color: #0d47a1;
}
body.dark-mode .ep-num-btn .ep-flag {
    background: #161a21;
    box-shadow: 0 0 0 1.5px #161a21, 0 1px 2px rgba(0,0,0,.6);
}
body.dark-mode .top-list-item { border-color: #2a2d36; }
body.dark-mode .simple-list-item { border-color: #2a2d36; }
body.dark-mode .newest-box { background: #1f222a; }
body.dark-mode .newest-head,
body.dark-mode .discord-head { border-color: #2a2d36; }
body.dark-mode .simple-list-item .info a { color: #ddd; }
body.dark-mode .anime-details h1 { color: #6ea6e8; }
body.dark-mode .anime-details .alt-title { color: #9aa3b2; }
body.dark-mode .anime-meta-grid { border-color: #2a2d36; }
body.dark-mode .anime-meta-col--info { border-top-color: #2a2d36; }
body.dark-mode .anime-meta-col li { color: #c5cad4; }
body.dark-mode .anime-meta-col li span { color: #8a93a3; }
body.dark-mode .anime-meta-col li strong { color: #eaecef; }
body.dark-mode .anime-meta-col li strong a { color: #6ea6e8; }
body.dark-mode .anime-meta-col li::before { background: #8a93a3; }
body.dark-mode .anime-desc { color: #c5cad4; }
body.dark-mode .anime-desc-toggle { background: #2a2d36; border-color: #333; color: #6ea6e8; }
body.dark-mode .anime-desc-toggle:hover { background: #333a44; }
body.dark-mode .rate-star .bg { color: #3d4250; }
body.dark-mode .rate-star .fg { color: #9aa3b2; }
body.dark-mode .anime-rating-box.user-rated .rate-star .fg { color: #f5a623; }
body.dark-mode .anime-fav-btn { color: #6a7080; }
body.dark-mode .anime-fav-btn:hover { color: #ff6b6b; }
body.dark-mode .anime-fav-btn.is-fav { color: #ff5252; }
body.dark-mode .anime-fav-btn.is-fav:hover { color: #ff3d3d; }
body.dark-mode .rating-meta { color: #8a93a3; }
body.dark-mode .rating-tooltip { background: #1d2027; }
body.dark-mode .rating-tooltip::after { border-top-color: #1d2027; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 880px) {
    .film-list { grid-template-columns: repeat(4, 1fr); }
    #aside { width: 240px; }
    .footer-main-inner { grid-template-columns: 110px 1fr; gap: 24px; }
}

@media (max-width: 900px) {
    .body-container { flex-direction: column; align-items: stretch; }
    #main { width: 100%; min-width: 0; }
    #aside { width: 100%; }
    .film-list { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 640px) {
    /* Header */
    .head { height: 52px; padding: 0; }
    #search { display: none; }
    #sign { display: none; }
    #logo small { display: none; }
    .mobile-controls { display: flex; padding-right: 18px; }
    /* Mobile search take-over mode */
    body.cz-msearch-open .head { padding: 0 12px; gap: 0; }
    body.cz-msearch-open #logo,
    body.cz-msearch-open .user-tools,
    body.cz-msearch-open .mobile-controls,
    body.cz-msearch-open #sign { display: none !important; }
    body.cz-msearch-open #search { display: block; flex: 1 1 auto; max-width: none; }
    body.cz-msearch-open #search .btn-search-submit { display: none; }
    body.cz-msearch-open .btn-search-close { display: inline-flex; align-items: center; justify-content: center; }
    body.cz-msearch-open #search-bar { font-size: 14px; padding: 10px 12px; }
    /* Nav */
    .nav { display: none; }
    /* Content */
    #body { padding: 10px 0 24px; }
    .film-list { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .episodes-block { padding: 10px 12px 14px; }
    .episodes-block .film-list { gap: 14px 8px; }
    .episodes-block-head { gap: 8px; flex-wrap: wrap; }
    .episodes-block-head .title { font-size: 12px; }
    .episodes-block-head .tab { font-size: 11px; padding: 4px 8px 11px; }
    .film-item .ep-tag { font-size: 10px; padding: 2px 16px 3px 6px; }
    .film-item .corner-tag { width: 38px; height: 20px; font-size: 8px; padding: 6px 4px 6px 0; }
    .swiper-slide.slide-item { height: 210px; }
    .slide-info { bottom: 14px; left: 14px; right: 14px; max-width: 80%; }
    .slide-info p { display: none; }
    .slide-info .slide-name { font-size: 16px; }
    .slide-item .watch-btn { bottom: 14px; right: 14px; padding: 6px 10px; font-size: 11px; }
    /* Anime info */
    .anime-info-box {
        display: grid;
        grid-template-columns: 130px minmax(0, 1fr);
        grid-template-areas:
            "title  title"
            "poster rating"
            "poster stats"
            "meta1  meta1"
            "desc   desc"
            "actions actions";
        column-gap: 14px;
        row-gap: 12px;
        padding: 16px;
    }
    .anime-poster { grid-area: poster; width: 130px; height: 185px; align-self: start; }
    .anime-details { display: contents; }
    .anime-head-row { display: contents; }
    .anime-head-titles { grid-area: title; }
    .anime-rating-box {
        grid-area: rating;
        align-self: start;
        text-align: left;
        min-width: 0;
        width: 100%;
    }
    .anime-meta-grid {
        display: contents;
    }
    .anime-meta-col--info {
        grid-area: meta1;
        padding: 12px 0 0;
        border-top: 1px solid #eef0f5;
    }
    .anime-meta-col--stats {
        grid-area: stats;
        align-self: start;
    }
    .anime-meta-col li { margin-bottom: 8px; line-height: 1.5; }
    .anime-meta-col li:last-child { margin-bottom: 0; }
    .anime-desc-wrap { grid-area: desc; margin-bottom: 0; }
    .anime-actions { grid-area: actions; }
    .anime-poster-overlay { padding: 12px 10px; gap: 8px; }
    .apo-btn { font-size: 11.5px; padding: 7px 8px; }
    .apo-btn i { font-size: 12px; width: 14px; }
    .anime-banner { height: 210px; }
    .anime-banner-title { font-size: 18px; }
    .anime-banner-now { bottom: 12px; right: 12px; padding: 5px 9px; font-size: 11px; }
    .anime-banner-now .abnow-dot { width: 7px; height: 7px; }
    .anime-details h1 { font-size: 18px; }
    /* Player */
    .player-nav { flex-direction: column; align-items: flex-start; }
    /* Footer */
    .footer-azbar { display: none; }
    .footer-main-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }
    .footer-center { order: -1; padding-top: 0; padding-left: 0; margin-left: 0; width: 100%; text-align: center; }
    .footer-main-inner .footer-col:not(.footer-center) {
        width: 100%;
        text-align: center;
    }
    .footer-main-inner .footer-col:not(.footer-center) h4 {
        text-align: center;
        margin-bottom: 8px;
    }
    .footer-main-inner .footer-col:not(.footer-center) ul {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 14px;
        justify-content: center;
        padding: 0;
        margin: 0;
    }
    .footer-main-inner .footer-col:not(.footer-center) ul li { margin-bottom: 0; }
    .azbar-letters { gap: 6px; }
    .az-btn { min-width: 24px; height: 24px; font-size: 10px; }
}

@media (max-width: 420px) {
    .film-list { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .tabs { flex-wrap: nowrap; overflow-x: auto; }
}

/* ============================================================
   PROFİL SAYFASI
   ============================================================ */

.profile-page { display: flex; flex-direction: column; }

/* Banner alanı: sadece bir yükseklik yer tutucusudur (240px). Görsel,
   wrap'ın background-image'inden gelir; tekrar/kesilme olmasın diye burada
   ayrı bir resim yok. */
.profile-banner-spacer {
    width: 100%;
    height: 200px;
}

/* Banner + başlık kutusu birleşik wrap. Arkaplan iki şekilde gelir:
   - Kullanıcı kapak yüklemediyse: --themed class'ı + jakebackground
   - Kapak yüklediyse: PHP wrap'ın inline style'ına o resmi koyar
   Box her durumda transparan kalır ki wrap'ın arkaplanı altta görünsün. */
.profile-header-wrap {
    position: relative;
    background-color: #0d1b6e;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 8px;
    overflow: hidden;
}
.profile-header-wrap--themed {
    background-image: url('/img/jakebackground.png');
}

/* Başlık kutusu — wrap'ın arkaplanı görünsün diye transparan */
.profile-header-box {
    background: transparent;
    border: none;
    border-top: none;
    border-radius: 0;
    padding: 0 18px 14px;
    position: relative;
    min-height: 76px;
}
.profile-avatar-wrap {
    position: absolute;
    left: 18px;
    bottom: 12px;
    width: 165px;
    height: 165px;
    display: inline-block;
}
.profile-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    border: 4px solid #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.22);
    display: block;
}
.profile-avatar-status {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
    background: #6c757d;
    cursor: help;
}
.profile-avatar-status.online  { background: #28a745; }
.profile-avatar-status.offline { background: #d33; }

/* Anında çıkan hover tooltip (Çevrimiçi / Çevrimdışı) */
.profile-avatar-status[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    padding: 5px 10px;
    background: rgba(15, 20, 35, 0.92);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s, transform 0.12s;
    z-index: 10;
}
.profile-avatar-status[data-tooltip]::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2px);
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(15, 20, 35, 0.92);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s;
    z-index: 10;
}
.profile-avatar-status[data-tooltip]:hover::after,
.profile-avatar-status[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
}
.profile-avatar-status[data-tooltip]:hover::before,
.profile-avatar-status[data-tooltip]:focus-visible::before {
    opacity: 1;
}

/* ---- Banner / Avatar "Düzenle" hover overlays (sadece kendi profilinde) ---- */
.profile-banner-edit {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(15, 20, 35, 0.72);
    color: #fff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease, background .18s ease;
    pointer-events: none;
}
.profile-banner-edit i { font-size: 12px; }
.profile-header-wrap--own:hover .profile-banner-edit,
.profile-banner-edit:focus-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.profile-banner-edit:hover { background: rgba(37, 99, 235, 0.92); color: #fff; }

.profile-avatar-edit {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 6px;
    background: rgba(15, 20, 35, 0.55);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity .18s ease;
    border: 4px solid transparent;
}
.profile-avatar-edit i { font-size: 18px; }
.profile-avatar-wrap--own:hover .profile-avatar-edit,
.profile-avatar-edit:focus-visible {
    opacity: 1;
}
@media (max-width: 600px) {
    .profile-banner-edit { top: 8px; right: 8px; padding: 6px 10px; font-size: 12px; }
    .profile-banner-edit span { display: none; }
    .profile-avatar-edit { font-size: 10px; }
    .profile-avatar-edit i { font-size: 14px; }
}

.profile-header-info {
    padding-left: 188px;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.profile-username-badge {
    display: inline-block;
    align-self: flex-start;
    width: auto;
    background: #1a73e8;
    color: #fff;
    padding: 7px 18px;
    border-radius: 5px;
    font-family: 'Fira Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    white-space: nowrap;
}
/* Sekmeler */
.profile-nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 2px solid #1a73e8;
    background: #fff;
    margin-top: 16px;
    padding: 0 10px;
    border-radius: 6px 6px 0 0;
}
.profile-tab {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: #666;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color .15s;
    user-select: none;
}
.profile-tab:hover  { color: #1a73e8; }
.profile-tab.is-active { color: #1a73e8; border-bottom-color: #1a73e8; }

/* Sekme + sidebar düzeni */
.profile-content { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; }
.profile-panes   { flex: 1; min-width: 0; }

.profile-tab-pane { display: none; }
.profile-tab-pane.is-active { display: block; }

.profile-main    { display: flex; flex-direction: column; gap: 14px; }
.profile-sidebar { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 14px; }

/* Kart */
.profile-card {
    background: #fff;
    border: 1px solid #dde3f0;
    border-radius: 8px;
    overflow: hidden;
}
.profile-card--full { width: 100%; }

.profile-card-title {
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #1a73e8;
    padding: 11px 14px;
    border-bottom: 1px solid #edf0f7;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.profile-card-title i { font-size: 12px; }
.profile-card-count {
    margin-left: 4px;
    color: inherit;
    font-weight: inherit;
    text-transform: none;
    letter-spacing: 0;
}

/* Favorites — homepage "son bölümler" görünümü; sadece 11+ animede dikey kaydırma */
.profile-card--favs { overflow: visible; }
.profile-favs-scroll {
    padding: 12px 14px;
}
.profile-favs-scroll:has(.film-item:nth-child(11)) {
    max-height: 580px;
    overflow-y: auto;
    overflow-x: hidden;
}
.profile-favs-grid {
    gap: 18px 12px;
    margin-bottom: 0;
}
.profile-favs-grid .film-item .poster { border-radius: 0; aspect-ratio: 2/3; }
.profile-favs-grid .film-item .film-name {
    font-family: 'Fira Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #555;
    text-align: center;
    margin-top: 9px;
    line-height: 1.35;
}
.profile-favs-grid .film-item .film-name:hover { color: #165fa7; }
body.dark-mode .profile-favs-grid .film-item .film-name { color: #e0e3eb; }

/* Yorum listesi — sadece 4+ yorumda dikey kaydırma */
.profile-comment-scroll {
    padding: 12px 14px;
    overflow-x: hidden;
}
.profile-comment-scroll:has(.cz-comment:nth-child(4)) {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Profil bağlamında cz-comment: karakter bg yok, kompakt */
.profile-comments-card .cz-comment {
    min-height: auto;
    padding: 0;
    background: transparent;
    border-radius: 6px;
    border-bottom: none;
    overflow: visible;
}
.profile-comments-card .cz-c-card {
    padding: 12px 14px;
}
/* Profil yorumlarında "can-mod" (profil sahibi/mod) kullanıcılar için sadece sil göster */
.profile-comments-card .cz-comment.can-mod .cz-c-edit { display: none; }
.profile-comments-card .cz-comment.can-mod .cz-c-delete { display: inline-flex; align-items: center; }
/* Profil compose form: anime sayfası ile aynı, ama karakter bg yok */
.profile-comments-card .cz-c-form { padding: 0 14px 14px; }
.profile-comments-card .cz-c-textarea { min-height: 90px; }

/* Yorum yazarı linki — kayıtlı kullanıcılar profile gider */
.cz-c-author-link {
    text-decoration: none;
    cursor: pointer;
    transition: color .15s, text-decoration-color .15s;
}
.cz-c-author-link:hover {
    color: #0d4787;
    text-decoration: underline;
}
body.dark-mode .cz-c-author-link:hover { color: #8fb9ee; }

/* Başarımlar — yumuşak boş bildirim varyantı */
.profile-empty-notice--soft {
    background: #eef3fb;
    color: #1a73e8;
    text-align: center;
}
body.dark-mode .profile-empty-notice--soft {
    background: #19223a;
    color: #5fa8f8;
}

/* Boş bildirim */
.profile-empty-notice {
    background: #fde8ea;
    color: #c0392b;
    border-radius: 4px;
    padding: 11px 14px;
    font-size: 12px;
    margin: 12px 14px;
    line-height: 1.5;
}

/* Favori grid (izlenenler kart stilini taklit eder) */
.profile-favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 18px 14px;
    padding: 16px;
}
.profile-fav-item {
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    transition: transform .15s;
}
.profile-fav-item:hover { transform: translateY(-3px); }
.profile-fav-poster {
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    border-radius: 6px;
    overflow: hidden;
    background: #e9eef6;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.profile-fav-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s;
}
.profile-fav-item:hover .profile-fav-poster img { transform: scale(1.04); }

/* Diziler grid'inde poster üzerine hover → koyu overlay + KALDIR (watched-card pattern) */
.profile-fav-poster-link { display: block; width: 100%; height: 100%; text-decoration: none; }
.profile-fav-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 21, 35, 0.78);
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    justify-content: center;
    padding: 10px;
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
    z-index: 2;
}
.profile-fav-item:hover .profile-fav-overlay,
.profile-fav-item:focus-within .profile-fav-overlay {
    opacity: 1;
    pointer-events: auto;
}
.profile-fav-item.is-removing {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity .22s, transform .22s;
    pointer-events: none;
}
.profile-fav-name {
    margin-top: 4px;
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #2c3344;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
}
.profile-fav-item:hover .profile-fav-name { color: #1a73e8; }
.profile-fav-date {
    font-size: 12px;
    color: #6f7787;
    line-height: 1.2;
}
body.dark-mode .profile-fav-name { color: #e0e3eb; }
body.dark-mode .profile-fav-item:hover .profile-fav-name { color: #5fa8f8; }
body.dark-mode .profile-fav-date { color: #8a93a3; }

/* Profil yorumları */
.profile-comment { border-bottom: 1px solid #edf0f7; }
.profile-comment:last-child { border-bottom: none; }
.profile-comment-inner {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 14px;
}
.profile-comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}
.profile-comment-body { flex: 1; min-width: 0; }
.profile-comment-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}
.profile-comment-meta strong { font-size: 12px; color: #1a73e8; }
.profile-comment-date { font-size: 11px; color: #aaa; }
.profile-comment-body p { font-size: 12px; color: #444; line-height: 1.55; }
.profile-comment-delete {
    background: none; border: none; color: #ccc; cursor: pointer;
    padding: 3px 6px; font-size: 12px; flex-shrink: 0;
    transition: color .15s; border-radius: 3px;
}
.profile-comment-delete:hover { color: #e74c3c; background: #fde8ea; }

/* Yorum formu */
.profile-comment-form {
    padding: 12px 14px;
    border-top: 1px solid #edf0f7;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.profile-comment-textarea-wrap { position: relative; }
.profile-comment-textarea {
    width: 100%;
    border: 1px solid #dde3f0;
    border-radius: 6px;
    padding: 9px 36px 9px 10px;
    font-size: 12px;
    resize: vertical;
    background: #f9fbff;
    color: #333;
    outline: none;
    transition: border-color .15s;
    font-family: inherit;
    min-height: 68px;
}
.profile-comment-textarea:focus { border-color: #1a73e8; background: #fff; }
.profile-emoji-btn {
    position: absolute;
    right: 6px;
    bottom: 7px;
    background: none;
    border: none;
    color: #bbb;
    cursor: pointer;
    font-size: 15px;
    padding: 2px;
    transition: color .15s;
}
.profile-emoji-btn:hover { color: #f5a623; }
.profile-emoji-picker { position: absolute; right: 0; top: auto; bottom: 34px; z-index: 200; }

.profile-comment-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.profile-comment-name {
    flex: 1;
    border: 1px solid #dde3f0;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 12px;
    background: #f9fbff;
    color: #333;
    outline: none;
    font-family: inherit;
}
.profile-comment-name:focus { border-color: #1a73e8; background: #fff; }
.profile-comment-submit {
    background: #1a73e8;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
    font-family: inherit;
}
.profile-comment-submit:hover { background: #155ec9; }
.profile-comment-submit:disabled { opacity: .6; cursor: not-allowed; }
.profile-comment-status { font-size: 11px; min-height: 14px; }
.profile-comment-status.is-error { color: #e74c3c; }
.profile-comment-status.is-ok    { color: #28a745; }

/* Biyografi */
.profile-bio-text  { padding: 12px 14px; font-size: 12px; color: #444; line-height: 1.6; }
.profile-bio-empty { padding: 12px 14px; font-size: 12px; color: #1a73e8; font-style: italic; }

/* Takipçi / Takip sayaç butonu */
.profile-follow-counts__btn {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    transition: color .15s;
}
.profile-follow-counts__btn:hover { color: #5fa8f8; }
.profile-follow-counts__btn:hover strong { color: #ffffff; }
.profile-follow-counts__btn strong { transition: color .15s; }

/* TAKİPÇİ / TAKİP modal'ı (site teması: beyaz panel, mavi accent) */
.follow-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.follow-modal[hidden] { display: none; }
.follow-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.follow-modal__panel {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 80vh;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 14px 42px rgba(15, 23, 42, 0.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: followModalIn .18s ease-out;
}
@keyframes followModalIn {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.follow-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #edf0f7;
    background: linear-gradient(180deg, #f8fafd 0%, #ffffff 100%);
}
.follow-modal__title {
    font-family: 'Fira Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1a73e8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.follow-modal__title i { font-size: 13px; }
.follow-modal__count {
    font-weight: 500;
    color: #8a98b5;
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
}
.follow-modal__close {
    background: transparent;
    border: 1px solid #e6ebf5;
    color: #8a98b5;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, border-color .15s, background .15s;
}
.follow-modal__close:hover {
    color: #1a73e8;
    border-color: #cfd9ee;
    background: #f4f7fc;
}
.follow-modal__body {
    overflow-y: auto;
    padding: 6px 0;
    -webkit-overflow-scrolling: touch;
}
.follow-modal__row {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f4f7fc;
    transition: background .12s;
}
.follow-modal__row:last-child { border-bottom: none; }
.follow-modal__row:hover { background: #f4f7fc; }
.follow-modal__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e6ebf5;
    background: #f4f7fc;
}
.follow-modal__name {
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.follow-modal__date {
    font-family: 'Fira Sans', sans-serif;
    font-size: 11px;
    color: #8a98b5;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.follow-modal__empty {
    padding: 36px 18px;
    text-align: center;
    color: #8a98b5;
    font-size: 13px;
    font-family: 'Fira Sans', sans-serif;
}

body.follow-modal-open { overflow: hidden; }

/* Dark mode — modal */
body.dark-mode .follow-modal__panel { background: #1e2335; box-shadow: 0 14px 42px rgba(0, 0, 0, 0.55); }
body.dark-mode .follow-modal__head { background: linear-gradient(180deg, #161b2c 0%, #1e2335 100%); border-bottom-color: #2a3050; }
body.dark-mode .follow-modal__title { color: #5fa8f8; }
body.dark-mode .follow-modal__count { color: #8a98b5; }
body.dark-mode .follow-modal__close { background: #151829; border-color: #2a3050; color: #8a98b5; }
body.dark-mode .follow-modal__close:hover { color: #5fa8f8; border-color: #3a4368; background: #1e2335; }
body.dark-mode .follow-modal__row { border-bottom-color: #2a3050; }
body.dark-mode .follow-modal__row:hover { background: #2a3050; }
body.dark-mode .follow-modal__avatar { background: #151829; border-color: #2a3050; }
body.dark-mode .follow-modal__name { color: #e8eef9; }
body.dark-mode .follow-modal__date { color: #8a98b5; }
body.dark-mode .follow-modal__empty { color: #8a98b5; }

@media (max-width: 540px) {
    .follow-modal__panel { max-height: 90vh; }
    .follow-modal__row { padding: 10px 14px; }
}

/* İstatistikler */
.profile-stats-list {
    padding: 8px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.profile-stats-list li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: #444;
    padding: 6px 0;
    border-bottom: 1px dashed #edf0f7;
}
.profile-stats-list li:last-child { border-bottom: none; }
.profile-stats-list li i   { width: 14px; color: #1a73e8; flex-shrink: 0; font-size: 11px; }
.profile-stats-list li span { flex: 1; }
.profile-stats-list li strong { color: #1a73e8; font-weight: 700; }

/* Stats — Toplam tile kartları (DİZİ / FİLM / SAAT / EN UZUN SERİ) */
.profile-stats-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
/* Sidebar variant — Hesap İstatistikleri kartı içinde 2x2 dizilim */
.profile-stats-tiles--sidebar {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 0 14px 12px;
    margin-bottom: 0;
}
.profile-stats-tiles--sidebar .profile-stat-tile {
    padding: 10px 10px;
    gap: 8px;
    border-radius: 8px;
}
.profile-stats-tiles--sidebar .profile-stat-tile::before { height: 2px; border-radius: 8px 8px 0 0; }
.profile-stats-tiles--sidebar .profile-stat-tile__icon {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    font-size: 14px;
}
.profile-stats-tiles--sidebar .profile-stat-tile__num { font-size: 17px; letter-spacing: -0.3px; }
.profile-stats-tiles--sidebar .profile-stat-tile__label { font-size: 10px; margin-top: 2px; }
.profile-stat-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #e6ebf5;
    border-radius: 10px;
    padding: 14px 16px;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.profile-stat-tile::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1a73e8 0%, #5fa8f8 100%);
    border-radius: 10px 10px 0 0;
}
.profile-stat-tile:hover {
    border-color: #cfd9ee;
    box-shadow: 0 3px 10px rgba(26, 115, 232, 0.08);
    transform: translateY(-1px);
}
.profile-stat-tile__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e8f1fd 0%, #d4e6fb 100%);
    color: #1a73e8;
    font-size: 18px;
}
.profile-stat-tile__body { display: flex; flex-direction: column; min-width: 0; }
.profile-stat-tile__num {
    font-family: 'Fira Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.05;
    color: #1f2937;
    letter-spacing: -0.5px;
}
.profile-stat-tile__label {
    font-family: 'Fira Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #6b7a99;
    margin-top: 3px;
}

/* BY YEAR chart — beyaz kart, mavi/altın çubuklar */
.profile-byyear-card { padding: 0; }
.profile-byyear { padding: 14px 16px 12px; }
.profile-byyear__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #edf0f7;
    padding-bottom: 10px;
    margin-bottom: 12px;
}
.profile-byyear__title {
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #1a73e8;
    text-transform: uppercase;
}
.profile-byyear__tabs { display: flex; gap: 6px; }
.profile-byyear__tab {
    background: #f4f7fc;
    border: 1px solid #e6ebf5;
    padding: 4px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'Fira Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: #6b7a99;
    text-transform: uppercase;
    transition: color .15s, background .15s, border-color .15s;
}
.profile-byyear__tab:hover { color: #1a73e8; border-color: #cfd9ee; }
.profile-byyear__tab.is-active {
    background: #1a73e8;
    border-color: #1a73e8;
    color: #ffffff;
}
.profile-byyear__chart {
    position: relative;
    height: 120px;
    border-bottom: 1px dashed #d8dfee;
    margin-bottom: 6px;
}
.profile-byyear__bars {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    gap: 2px;
}
.profile-byyear__bars[hidden] { display: none; }
.profile-byyear__col {
    flex: 1 1 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    position: relative;
    cursor: pointer;
}
.profile-byyear__bar {
    width: 100%;
    min-height: 0;
    background: linear-gradient(180deg, #5fa8f8 0%, #1a73e8 100%);
    border-radius: 2px 2px 0 0;
    transition: opacity .15s, filter .15s;
}
.profile-byyear__bar--rating {
    background: linear-gradient(180deg, #ffd54f 0%, #f5a623 100%);
}
.profile-byyear__col:hover .profile-byyear__bar { filter: brightness(1.10); opacity: .92; }
.profile-byyear__col.is-selected .profile-byyear__bar {
    filter: brightness(1.18);
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.30);
}

/* 2-satırlı tooltip (hover'da görünür) */
.profile-byyear__tip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    margin-bottom: 8px;
    background: #1f2937;
    color: #ffffff;
    padding: 6px 10px;
    border-radius: 6px;
    font-family: 'Fira Sans', sans-serif;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s, transform .12s;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.22);
    line-height: 1.25;
}
.profile-byyear__tip strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
}
.profile-byyear__tip span {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: #c5cee0;
    margin-top: 2px;
}
.profile-byyear__tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1f2937;
}
.profile-byyear__col:hover .profile-byyear__tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Tıklanan yılın detay paneli */
.profile-byyear__detail {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #edf0f7;
}
.profile-byyear__detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.profile-byyear__detail-title {
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}
.profile-byyear__detail-close {
    background: transparent;
    border: 1px solid #e6ebf5;
    color: #8a98b5;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, border-color .15s, background .15s;
}
.profile-byyear__detail-close:hover {
    color: #1a73e8;
    border-color: #cfd9ee;
    background: #f4f7fc;
}
.profile-byyear__detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 12px;
}
.profile-byyear__detail-empty {
    text-align: center;
    color: #8a98b5;
    font-size: 12px;
    padding: 20px 10px;
}
.profile-byyear__item {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform .15s;
}
.profile-byyear__item:hover { transform: translateY(-2px); }
.profile-byyear__item-img {
    position: relative;
    aspect-ratio: 2 / 3;
    background: #f4f7fc;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e6ebf5;
}
.profile-byyear__item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.profile-byyear__item:hover .profile-byyear__item-img { border-color: #cfd9ee; box-shadow: 0 4px 10px rgba(26, 115, 232, 0.14); }
.profile-byyear__score {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(245, 166, 35, 0.95);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.profile-byyear__score i { font-size: 9px; }
.profile-byyear__item-name {
    font-family: 'Fira Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* TÜRLERE GÖRE — donut chart */
.profile-genre-card { padding: 0; }
.profile-genre { padding: 14px 16px 18px; }
.profile-genre__head {
    border-bottom: 1px solid #edf0f7;
    padding-bottom: 10px;
    margin-bottom: 18px;
}
.profile-genre__title {
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #1a73e8;
    text-transform: uppercase;
}
.profile-genre__chart {
    position: relative;
    width: 380px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}
.profile-genre__svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}
.profile-genre__slice {
    cursor: pointer;
    transition: stroke-width .18s ease, opacity .18s ease;
}
.profile-genre__slice:hover { stroke-width: 13.5; }
.profile-genre__slice.is-dimmed { opacity: 0.30; }
.profile-genre__label {
    font-family: 'Fira Sans', 'Helvetica Neue', sans-serif;
    font-size: 2.5px;
    font-weight: 700;
    fill: #ffffff;
    paint-order: stroke;
    stroke: rgba(0,0,0,0.18);
    stroke-width: 0.18px;
    user-select: none;
}
.profile-genre__center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
    padding: 24%;
}
.profile-genre__center strong {
    font-family: 'Fira Sans', sans-serif;
    font-size: 38px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
    letter-spacing: -1px;
    transition: color .18s;
}
.profile-genre__center span {
    font-family: 'Fira Sans', sans-serif;
    font-size: 11px;
    color: #6b7a99;
    margin-top: 8px;
    letter-spacing: 0.8px;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3;
    max-width: 90%;
}

body.dark-mode .profile-genre__head { border-bottom-color: #2a3050; }
body.dark-mode .profile-genre__title { color: #5fa8f8; }
body.dark-mode .profile-genre__track { stroke: #2a3050; }
body.dark-mode .profile-genre__center strong { color: #e8eef9; }
body.dark-mode .profile-genre__center span { color: #8a98b5; }

@media (max-width: 480px) {
    .profile-genre__chart { width: 100%; }
    .profile-genre__center strong { font-size: 30px; }
}

/* Dark mode — detay paneli */
body.dark-mode .profile-byyear__detail { border-top-color: #2a3050; }
body.dark-mode .profile-byyear__detail-title { color: #e8eef9; }
body.dark-mode .profile-byyear__detail-close { background: #151829; border-color: #2a3050; color: #8a98b5; }
body.dark-mode .profile-byyear__detail-close:hover { color: #5fa8f8; border-color: #3a4368; background: #1e2335; }
body.dark-mode .profile-byyear__detail-empty { color: #8a98b5; }
body.dark-mode .profile-byyear__item-img { background: #151829; border-color: #2a3050; }
body.dark-mode .profile-byyear__item:hover .profile-byyear__item-img { border-color: #3a4368; box-shadow: 0 4px 10px rgba(95, 168, 248, 0.18); }
body.dark-mode .profile-byyear__item-name { color: #e8eef9; }
.profile-byyear__axis {
    display: flex;
    justify-content: space-between;
    font-family: 'Fira Sans', sans-serif;
    font-size: 11px;
    color: #8a98b5;
    padding-top: 4px;
}

/* Dark mode ayarı */
body.dark-mode .profile-stat-tile { background: #1e2335; border-color: #2a3050; }
body.dark-mode .profile-stat-tile:hover { border-color: #3a4368; box-shadow: 0 3px 10px rgba(95, 168, 248, 0.10); }
body.dark-mode .profile-stat-tile__icon { background: linear-gradient(135deg, rgba(95,168,248,0.12) 0%, rgba(95,168,248,0.20) 100%); color: #5fa8f8; }
body.dark-mode .profile-stat-tile__num { color: #e8eef9; }
body.dark-mode .profile-stat-tile__label { color: #8a98b5; }
body.dark-mode .profile-byyear__head { border-bottom-color: #2a3050; }
body.dark-mode .profile-byyear__title { color: #5fa8f8; }
body.dark-mode .profile-byyear__tab { background: #151829; border-color: #2a3050; color: #8a98b5; }
body.dark-mode .profile-byyear__tab:hover { color: #5fa8f8; border-color: #3a4368; }
body.dark-mode .profile-byyear__tab.is-active { background: #2563eb; border-color: #2563eb; color: #fff; }
body.dark-mode .profile-byyear__chart { border-bottom-color: #2a3050; }
body.dark-mode .profile-byyear__axis  { color: #8a98b5; }

@media (max-width: 760px) {
    .profile-stats-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
    .profile-stats-tiles { grid-template-columns: 1fr; }
    .profile-stat-tile__num { font-size: 20px; }
}

/* Dark mode */
body.dark-mode .profile-header-wrap { background-color: #0d1b6e; }
body.dark-mode .profile-header-box { background: transparent; border-color: transparent; }
body.dark-mode .profile-avatar { border-color: #1e2335; }
body.dark-mode .profile-username-badge { background-color: #2563eb; }
body.dark-mode .profile-nav-tabs { background: #1e2335; border-bottom-color: #5fa8f8; }
body.dark-mode .profile-tab { color: #9ab3d4; }
body.dark-mode .profile-tab.is-active { color: #5fa8f8; border-bottom-color: #5fa8f8; }
body.dark-mode .profile-card { background: #1e2335; border-color: #2a3050; }
body.dark-mode .profile-card-title { color: #5fa8f8; border-bottom-color: #2a3050; }
body.dark-mode .profile-empty-notice { background: #3a1f22; color: #f08080; }
body.dark-mode .profile-fav-name { color: #bbb; }
body.dark-mode .profile-comment { border-bottom-color: #2a3050; }
body.dark-mode .profile-comment-body p { color: #bbb; }
body.dark-mode .profile-comment-meta strong { color: #5fa8f8; }
body.dark-mode .profile-comment-form { border-top-color: #2a3050; }
body.dark-mode .profile-comment-textarea { background: #151829; border-color: #2a3050; color: #ccc; }
body.dark-mode .profile-comment-textarea:focus { border-color: #5fa8f8; background: #1a1f35; }
body.dark-mode .profile-comment-name { background: #151829; border-color: #2a3050; color: #ccc; }
body.dark-mode .profile-comment-name:focus { border-color: #5fa8f8; }
body.dark-mode .profile-comment-submit { background: #2563eb; }
body.dark-mode .profile-comment-submit:hover { background: #1d53d2; }
body.dark-mode .profile-bio-text  { color: #bbb; }
body.dark-mode .profile-bio-empty { color: #5fa8f8; }
body.dark-mode .profile-stats-list li { color: #bbb; border-bottom-color: #2a3050; }
body.dark-mode .profile-stats-list li i      { color: #5fa8f8; }
body.dark-mode .profile-stats-list li strong { color: #5fa8f8; }

/* Responsive */
@media (max-width: 768px) {
    .profile-content { flex-direction: column; }
    .profile-sidebar { width: 100%; position: static; }
    .profile-banner-spacer { height: 150px; }
    .profile-avatar-wrap { width: 100px; height: 100px; }
    .profile-header-info { padding-left: 118px; }
    .profile-avatar-status { width: 24px; height: 24px; right: -4px; bottom: -4px; }
}
@media (max-width: 480px) {
    .profile-favorites-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px 10px; padding: 12px; }
}

/* =============================================================
   HESAP AYARLARI (settings page)
   ============================================================= */
.settings-page {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 22px;
    margin: 14px 0 40px;
    align-items: flex-start;
}

/* Sol panel */
.settings-side {
    background: #fff;
    border: 1px solid #e6e9f0;
    border-radius: 6px;
    overflow: hidden;
}
.settings-nav { list-style: none; padding: 0; margin: 0; }
.settings-nav li { border-bottom: 1px solid #eef0f5; }
.settings-nav li:last-child { border-bottom: 0; }
.settings-nav li a,
.settings-nav li button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    color: #444;
    text-decoration: none;
    font-size: 14px;
    width: 100%;
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}
.settings-nav li a:hover,
.settings-nav li button:hover { background: #f5f7fb; color: #4b88dd; }
.settings-nav li.active a {
    background: #4b88dd;
    color: #fff;
    font-weight: 600;
}
.settings-nav li.active a i { color: #fff; }
.settings-nav li i { width: 18px; text-align: center; color: #6d7686; }
.settings-logout-form { margin: 0; }
.settings-logout-form button { color: #d33; }
.settings-logout-form button i { color: #d33; }

/* Sağ ana panel */
.settings-main { min-width: 0; }
.settings-title {
    color: #4b88dd;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin: 0 0 14px;
    padding: 0 6px;
}

.settings-card {
    background: #fff;
    border: 1px solid #e6e9f0;
    border-radius: 6px;
    padding: 22px 24px;
    margin-bottom: 18px;
}
.settings-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #2a2f3a;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef0f5;
}
.settings-card-title.settings-subtitle { margin-top: 28px; }

.settings-section { margin-bottom: 14px; text-align: center; }
.settings-section h4 {
    font-size: 15px;
    color: #2a2f3a;
    margin: 0 0 14px;
    text-align: center;
    font-weight: 600;
}

.settings-cover-preview {
    width: 100%;
    height: 320px;
    background: #f0f3f8 center/cover no-repeat;
    border: 2px solid #4b88dd;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #889;
    margin-bottom: 14px;
}
.settings-cover-placeholder { font-size: 14px; }

.settings-avatar-preview {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}
.settings-avatar-preview img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #4b88dd;
    background: #1a1a1a;
}

.settings-file-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.settings-file-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: #e2e6ee;
    color: #444;
    border-radius: 24px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s;
}
.settings-file-btn:hover { background: #d3d9e3; }
.settings-file-btn input[type="file"] { display: none; }
.settings-file-name { color: #6d7686; font-size: 13px; }

.settings-help {
    font-size: 12px;
    color: #6d7686;
    margin: 6px 0 12px;
    text-align: center;
}
.settings-hint {
    font-size: 13px;
    color: #d33;
    text-align: center;
    margin: 8px 0 0;
}
.settings-hr {
    border: 0;
    border-top: 1px solid #eef0f5;
    margin: 24px 0;
}

/* Form satırları */
.settings-form-row { margin-bottom: 18px; text-align: left; }
.settings-form-row > label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #2a2f3a;
    margin-bottom: 6px;
}
.settings-form-row input[type="text"],
.settings-form-row input[type="email"],
.settings-form-row input[type="number"],
.settings-form-row textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d6dae3;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    color: #2a2f3a;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.settings-form-row input[readonly] { background: #f5f7fb; color: #6d7686; }
.settings-form-row input:focus,
.settings-form-row textarea:focus {
    outline: none;
    border-color: #4b88dd;
    box-shadow: 0 0 0 3px rgba(75, 136, 221, 0.12);
}
.settings-form-row textarea { resize: vertical; min-height: 90px; }

.settings-form-row .settings-help { text-align: left; }

.settings-radio-row {
    display: flex;
    gap: 14px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.settings-radio-row.settings-radio-col {
    flex-direction: column;
    gap: 8px;
}
.settings-radio-row.settings-radio-col .settings-radio {
    width: 100%;
    justify-content: flex-start;
}
.settings-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid #d6dae3;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    background: #fff;
}
.settings-radio:has(input:checked) {
    border-color: #4b88dd;
    background: rgba(75, 136, 221, 0.08);
    color: #4b88dd;
    font-weight: 600;
}

/* Toggle bloğu */
.settings-toggle-block {
    padding: 16px 0;
    border-top: 1px solid #eef0f5;
}
.settings-toggle-block:first-of-type { border-top: 0; }
.settings-toggle-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.settings-toggle-head h4 {
    margin: 0;
    font-size: 15px;
    color: #2a2f3a;
    font-weight: 600;
    text-align: left;
}
.settings-toggle-block .settings-help { text-align: left; margin: 4px 0 8px; }
.settings-share-link {
    display: inline-block;
    color: #4b88dd;
    text-decoration: none;
    font-size: 13px;
    word-break: break-all;
}
.settings-share-link:hover { text-decoration: underline; }

/* Switch (toggle) */
.settings-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
    flex-shrink: 0;
}
.settings-switch input { opacity: 0; width: 0; height: 0; }
.settings-switch .slider {
    position: absolute;
    inset: 0;
    background: #cfd5e0;
    border-radius: 24px;
    transition: background 0.2s;
    cursor: pointer;
}
.settings-switch .slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.settings-switch input:checked + .slider { background: #4b88dd; }
.settings-switch input:checked + .slider::before { transform: translateX(22px); }

/* Aksiyon ve butonlar */
.settings-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}
.settings-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 24px;
    border: 0;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, transform 0.1s;
}
.settings-btn:hover { transform: translateY(-1px); }
.settings-btn-primary { background: #4b88dd; color: #fff; }
.settings-btn-primary:hover { background: #3d75c6; }
.settings-btn-danger { background: #e74c3c; color: #fff; }
.settings-btn-danger:hover { background: #c0392b; }

/* Alerts */
.settings-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 18px;
    font-size: 14px;
}
.settings-alert i { font-size: 18px; margin-top: 2px; }
.settings-alert ul { margin: 4px 0 0 0; padding-left: 18px; }
.settings-alert-success { background: #e8f7ee; color: #1f7a3d; border: 1px solid #b9e3c5; }
.settings-alert-error   { background: #fdecea; color: #b3261e; border: 1px solid #f5c2bd; }

/* Diğer (tehlike) bölümü */
.settings-warning { color: #c0392b; font-weight: 500; text-align: left; margin-bottom: 14px; }
.settings-warning i { margin-right: 4px; }
.settings-danger-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.settings-delete-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 8px;
}
.settings-delete-form input[type="text"] {
    flex: 1;
    min-width: 220px;
    padding: 10px 12px;
    border: 1px solid #d6dae3;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
}
.settings-delete-form input[type="text"]:focus {
    outline: none;
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.12);
}

/* Dark mode */
body.dark-mode .settings-side { background: #1a1f35; border-color: #2a3050; }
body.dark-mode .settings-nav li { border-bottom-color: #2a3050; }
body.dark-mode .settings-nav li a,
body.dark-mode .settings-nav li button { color: #ccc; }
body.dark-mode .settings-nav li a:hover,
body.dark-mode .settings-nav li button:hover { background: #232844; color: #5fa8f8; }
body.dark-mode .settings-nav li.active a { background: #2563eb; }
body.dark-mode .settings-card { background: #1a1f35; border-color: #2a3050; }
body.dark-mode .settings-card-title { color: #e6e9f0; border-bottom-color: #2a3050; }
body.dark-mode .settings-section h4 { color: #e6e9f0; }
body.dark-mode .settings-cover-preview { background-color: #232844; border-color: #5fa8f8; color: #6d7686; }
body.dark-mode .settings-avatar-preview img { border-color: #5fa8f8; }
body.dark-mode .settings-file-btn { background: #2a3050; color: #ccc; }
body.dark-mode .settings-file-btn:hover { background: #353c66; }
body.dark-mode .settings-file-name,
body.dark-mode .settings-help { color: #8a93a6; }
body.dark-mode .settings-hr { border-top-color: #2a3050; }
body.dark-mode .settings-form-row > label,
body.dark-mode .settings-toggle-head h4 { color: #e6e9f0; }
body.dark-mode .settings-form-row input,
body.dark-mode .settings-form-row textarea,
body.dark-mode .settings-delete-form input[type="text"] {
    background: #151829; border-color: #2a3050; color: #ccc;
}
body.dark-mode .settings-form-row input[readonly] { background: #232844; color: #8a93a6; }
body.dark-mode .settings-form-row input:focus,
body.dark-mode .settings-form-row textarea:focus { border-color: #5fa8f8; }
body.dark-mode .settings-radio { background: #151829; border-color: #2a3050; color: #ccc; }
body.dark-mode .settings-radio:has(input:checked) {
    background: rgba(95, 168, 248, 0.12); border-color: #5fa8f8; color: #5fa8f8;
}
body.dark-mode .settings-toggle-block { border-top-color: #2a3050; }
body.dark-mode .settings-share-link { color: #5fa8f8; }
body.dark-mode .settings-switch .slider { background: #353c66; }
body.dark-mode .settings-switch input:checked + .slider { background: #5fa8f8; }
body.dark-mode .settings-alert-success { background: #14321e; color: #7ed8a3; border-color: #1f7a3d; }
body.dark-mode .settings-alert-error   { background: #3a1614; color: #f5a8a2; border-color: #8a2e26; }

/* Responsive */
@media (max-width: 900px) {
    .settings-page { grid-template-columns: 1fr; }
    .settings-side { position: static; }
    .settings-nav { display: flex; flex-wrap: wrap; }
    .settings-nav li { flex: 1 1 50%; border-bottom: 1px solid #eef0f5; }
}
@media (max-width: 600px) {
    .settings-card { padding: 16px; }
    .settings-cover-preview { height: 200px; }
    .settings-avatar-preview img { width: 150px; height: 150px; }
    .settings-actions { justify-content: stretch; }
    .settings-actions .settings-btn { width: 100%; justify-content: center; }
}

/* =============================================================
   KİLİTLİ PROFİL SAYFASI + TAKİP UI
   ============================================================= */
.locked-profile {
    display: flex;
    justify-content: center;
    padding: 40px 16px 60px;
}
.locked-profile-card {
    background: #fff;
    border: 1px solid #e6e9f0;
    border-radius: 8px;
    max-width: 540px;
    width: 100%;
    padding: 32px 28px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(0,0,0,0.04);
}
.locked-profile-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #4b88dd;
    background: #1a1a1a;
    margin-bottom: 20px;
}
.locked-profile-title {
    font-size: 18px;
    color: #2a2f3a;
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.4;
}
.locked-profile-title i { color: #4b88dd; margin-right: 6px; }
.locked-profile-name {
    font-size: 14px;
    color: #6d7686;
    line-height: 1.6;
    margin: 0 0 24px;
}
.locked-profile-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.locked-follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 26px;
    background: #4b88dd;
    color: #fff;
    border: 0;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: background 0.15s, transform 0.1s;
}
.locked-follow-btn:hover { background: #3d75c6; transform: translateY(-1px); }
.locked-follow-btn.is-pending { background: #f0ad4e; }
.locked-follow-btn.is-pending:hover { background: #e0982f; }
.locked-follow-btn.is-following { background: #28a745; }
.locked-follow-btn.is-following:hover { background: #c0392b; }
.locked-follow-btn[disabled] { opacity: 0.65; cursor: not-allowed; }
.locked-back-link {
    color: #4b88dd;
    text-decoration: none;
    font-size: 13px;
}
.locked-back-link:hover { text-decoration: underline; }

/* Profil sayfası takip butonu (header içinde) */
.profile-follow-btn {
    position: absolute;
    right: 16px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: #4b88dd;
    color: #fff;
    border: 0;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, transform 0.1s;
}
.profile-follow-btn:hover { background: #3d75c6; transform: translateY(-1px); }
.profile-follow-btn.is-pending { background: #f0ad4e; }
.profile-follow-btn.is-pending:hover { background: #e0982f; }
.profile-follow-btn.is-following { background: #28a745; }
.profile-follow-btn.is-following:hover { background: #c0392b; }
.profile-follow-btn[disabled] { opacity: 0.65; cursor: not-allowed; }
/* "Şu an izliyor" kutusu varken takip butonu yukarı kaydırılır (çakışma önlemi) */
.profile-header-wrap:has(.profile-now-watching) .profile-follow-btn { bottom: 96px; }

/* Puan rozeti — kullanıcı adının altında (yıldız + sayı + Puan) */
.profile-points {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 20px;
    font-size: 13px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    cursor: help;
    transition: box-shadow .35s ease, background .35s ease;
}
.profile-points i { color: #ffc107; font-size: 13px; transition: color .35s ease, text-shadow .35s ease; }
.profile-points-num { font-weight: 700; transition: color .35s ease, text-shadow .35s ease; }
.profile-points-label { font-weight: 400; opacity: 0.9; }

/* =============================================
   PUAN TIER SİSTEMİ (data-tier="1..8")
   T1-T3 sade renk, T4'ten itibaren glow/halo,
   T8 holografik shimmer + sparkle.
   ============================================= */

/* T1 — Çaylak (gri durağan) */
.profile-points[data-tier="1"] i,
.profile-points[data-tier="1"] .profile-points-num { color: #b8c0cc; }

/* T2 — Bronz (turuncu durağan) */
.profile-points[data-tier="2"] i,
.profile-points[data-tier="2"] .profile-points-num {
    color: #d2873b;
    text-shadow: 0 0 4px rgba(210, 135, 59, 0.4), 0 1px 2px rgba(0,0,0,0.6);
}

/* T3 — Gümüş (parlak gri durağan, hafif iç ışık) */
.profile-points[data-tier="3"] i,
.profile-points[data-tier="3"] .profile-points-num {
    color: #e8edf5;
    text-shadow: 0 0 5px rgba(220, 230, 255, 0.5), 0 1px 2px rgba(0,0,0,0.6);
}

/* T4 — Altın (sarı + nefes glow) */
.profile-points[data-tier="4"] i,
.profile-points[data-tier="4"] .profile-points-num {
    color: #ffd700;
    animation: pp-breath-gold 4s ease-in-out infinite alternate;
}
@keyframes pp-breath-gold {
    0%   { text-shadow: 0 0 4px rgba(255, 215, 0, 0.45), 0 1px 2px rgba(0,0,0,0.6); }
    100% { text-shadow: 0 0 12px rgba(255, 215, 0, 0.85), 0 0 22px rgba(255, 200, 0, 0.45), 0 1px 2px rgba(0,0,0,0.6); }
}

/* T5 — Kızıl Neon */
.profile-points[data-tier="5"] {
    box-shadow: 0 0 0 1px rgba(255, 70, 70, 0.35) inset;
    animation: pp-halo-red 3s ease-in-out infinite;
}
.profile-points[data-tier="5"] i,
.profile-points[data-tier="5"] .profile-points-num {
    color: #ff5252;
    text-shadow: 0 0 6px rgba(255, 60, 60, 0.85), 0 0 14px rgba(255, 60, 60, 0.55);
}
@keyframes pp-halo-red {
    0%, 100% { box-shadow: 0 0 0 1px rgba(255,70,70,0.35) inset, 0 0 8px rgba(255,70,70,0.25); }
    50%      { box-shadow: 0 0 0 1px rgba(255,70,70,0.55) inset, 0 0 18px rgba(255,70,70,0.55); }
}

/* T6 — Mor Neon */
.profile-points[data-tier="6"] {
    box-shadow: 0 0 0 1px rgba(184, 50, 255, 0.4) inset;
    animation: pp-halo-purple 2.5s ease-in-out infinite;
}
.profile-points[data-tier="6"] i,
.profile-points[data-tier="6"] .profile-points-num {
    color: #c97cff;
    text-shadow: 0 0 6px rgba(184, 50, 255, 0.9), 0 0 14px rgba(150, 60, 220, 0.55);
}
@keyframes pp-halo-purple {
    0%, 100% { box-shadow: 0 0 0 1px rgba(184,50,255,0.4) inset, 0 0 10px rgba(184,50,255,0.3); }
    50%      { box-shadow: 0 0 0 1px rgba(184,50,255,0.65) inset, 0 0 22px rgba(184,50,255,0.6); }
}

/* T7 — Cyan Neon (en belirgin pulse) */
.profile-points[data-tier="7"] {
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.5) inset;
    animation: pp-halo-cyan 2s ease-in-out infinite;
}
.profile-points[data-tier="7"] i,
.profile-points[data-tier="7"] .profile-points-num {
    color: #5be9ff;
    text-shadow: 0 0 6px rgba(0, 212, 255, 0.95), 0 0 16px rgba(0, 212, 255, 0.6);
}
@keyframes pp-halo-cyan {
    0%, 100% { box-shadow: 0 0 0 1px rgba(0,212,255,0.5) inset, 0 0 12px rgba(0,212,255,0.4); }
    50%      { box-shadow: 0 0 0 1px rgba(0,212,255,0.85) inset, 0 0 28px rgba(0,212,255,0.75); }
}

/* T8 — Efsane (holografik shimmer + outer halo + sparkle) */
.profile-points[data-tier="8"] {
    background:
        linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)) padding-box,
        linear-gradient(115deg, #ff3b8b, #ffb13b, #4cff8a, #00d4ff, #b832ff, #ff3b8b) border-box;
    border: 1px solid transparent;
    background-size: 100% 100%, 300% 100%;
    animation: pp-rainbow-border 6s linear infinite, pp-halo-rainbow 3s ease-in-out infinite;
    overflow: hidden;
}
.profile-points[data-tier="8"] i {
    color: transparent;
    background: linear-gradient(115deg, #ff3b8b, #ffb13b, #4cff8a, #00d4ff, #b832ff, #ff3b8b);
    background-size: 300% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    animation: pp-rainbow-shift 6s linear infinite;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.45));
}
.profile-points[data-tier="8"] .profile-points-num {
    color: transparent;
    background: linear-gradient(115deg, #ff3b8b, #ffb13b, #4cff8a, #00d4ff, #b832ff, #ff3b8b);
    background-size: 300% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    animation: pp-rainbow-shift 6s linear infinite;
    text-shadow: none;
}
.profile-points[data-tier="8"] .profile-points-label {
    color: rgba(255, 255, 255, 0.85);
    opacity: 1;
}
@keyframes pp-rainbow-shift {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}
@keyframes pp-rainbow-border {
    0%   { background-position: 0% 50%, 0% 50%; }
    100% { background-position: 0% 50%, 300% 50%; }
}
@keyframes pp-halo-rainbow {
    0%, 100% { box-shadow: 0 0 14px rgba(255, 255, 255, 0.25), 0 0 24px rgba(180, 100, 255, 0.35); }
    50%      { box-shadow: 0 0 22px rgba(255, 255, 255, 0.45), 0 0 38px rgba(0,  212, 255, 0.55); }
}

/* T8 — Sparkle: 3 nokta, sırayla flicker eder */
.profile-points-sparkle {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    overflow: hidden;
}
.profile-points-sparkle::before,
.profile-points-sparkle::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.9);
    opacity: 0;
}
.profile-points-sparkle::before {
    top: 14%; left: 18%;
    animation: pp-sparkle 2.4s ease-in-out infinite;
}
.profile-points-sparkle::after {
    bottom: 18%; right: 22%;
    animation: pp-sparkle 2.4s ease-in-out 1.2s infinite;
}
@keyframes pp-sparkle {
    0%, 100%   { opacity: 0; transform: scale(0.6); }
    40%, 60%   { opacity: 1; transform: scale(1); }
}

/* Erişilebilirlik: animasyon istemeyenler için tüm tier'leri durağan yap */
@media (prefers-reduced-motion: reduce) {
    .profile-points,
    .profile-points i,
    .profile-points .profile-points-num,
    .profile-points-sparkle::before,
    .profile-points-sparkle::after { animation: none !important; }
}

/* Takipçi/takip sayıları (temalı dark wrap üzerinde okunaklı) */
.profile-follow-counts {
    margin-top: 4px;
    padding: 4px 12px;
    font-size: 14px;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 20px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.profile-follow-counts strong { color: #fff; margin-right: 3px; font-size: 15px; }
.profile-follow-counts-sep { color: rgba(255,255,255,0.55); }

/* İstekler sekmesi (uyarı badge'i) */
.profile-tab--alert { color: #c0392b; }
.profile-tab--alert.is-active { background: #fef0ee; color: #c0392b; }

/* Takipçi/takip listesi */
.profile-follow-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    padding: 14px 0;
}
.profile-follow-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #eef0f5;
    border-radius: 6px;
    text-decoration: none;
    color: #2a2f3a;
    transition: background 0.12s, border-color 0.12s;
}
.profile-follow-item:hover { background: #f5f7fb; border-color: #4b88dd; }
.profile-follow-item img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: #1a1a1a;
    flex-shrink: 0;
}
.profile-follow-item span { font-size: 14px; font-weight: 500; }

/* İstek satırı (kabul/reddet butonları) */
.profile-follow-item--request {
    flex-direction: row;
    justify-content: space-between;
    cursor: default;
}
.profile-follow-item--request:hover { background: #fff; border-color: #eef0f5; }
.profile-follow-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
}
.profile-follow-link:hover span { color: #4b88dd; }
.profile-follow-actions { display: flex; gap: 6px; }
.profile-follow-accept,
.profile-follow-reject {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.profile-follow-accept { background: #28a745; }
.profile-follow-accept:hover { background: #218a3a; }
.profile-follow-reject { background: #d33; }
.profile-follow-reject:hover { background: #b81f1f; }
.profile-follow-accept[disabled],
.profile-follow-reject[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Dark mode */
body.dark-mode .locked-profile-card { background: #1a1f35; border-color: #2a3050; }
body.dark-mode .locked-profile-title { color: #e6e9f0; }
body.dark-mode .locked-profile-title i { color: #5fa8f8; }
body.dark-mode .locked-profile-name { color: #8a93a6; }
body.dark-mode .locked-back-link { color: #5fa8f8; }
body.dark-mode .profile-follow-counts { color: #8a93a6; }
body.dark-mode .profile-follow-counts strong { color: #e6e9f0; }
body.dark-mode .profile-follow-item {
    background: #1a1f35; border-color: #2a3050; color: #ccc;
}
body.dark-mode .profile-follow-item:hover { background: #232844; border-color: #5fa8f8; }
body.dark-mode .profile-follow-item--request:hover { background: #1a1f35; border-color: #2a3050; }

/* Responsive */
@media (max-width: 600px) {
    .profile-follow-btn { position: static; margin-top: 12px; align-self: flex-start; }
    .locked-profile-card { padding: 22px 18px; }
    .locked-profile-avatar { width: 90px; height: 90px; }
    .locked-profile-title { font-size: 16px; }
}


/* ============================================================
   PUAN ROZETİ + PUANLAMA MODAL — bölüm/dizi/film ortak
   ============================================================ */
.ep-score-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 4px;
    background: #fff;
    border: 2px solid #b0b6c0;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    color: #6f7886;
    cursor: pointer;
    font-family: inherit;
    transition: filter .15s ease, transform .12s ease;
}
.ep-score-badge:hover { filter: brightness(0.96); transform: translateY(-1px); }
.ep-score-badge .ep-score-label { font-weight: 500; }
.ep-score-badge .ep-score-value { font-weight: 700; font-size: 14px; }
.ep-score-badge.is-good { border-color: #27ae60; color: #27ae60; }
.ep-score-badge.is-mid  { border-color: #e67e22; color: #e67e22; }
.ep-score-badge.is-bad  { border-color: #e74c3c; color: #e74c3c; }
body.dark-mode .ep-score-badge { background: #23262f; }
body.dark-mode .ep-score-badge:not(.is-good):not(.is-mid):not(.is-bad) { color: #b0b8c5; border-color: #3a4150; }

.ep-rate-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ep-rate-modal[hidden] { display: none !important; }
.ep-rate-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 18, 30, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.ep-rate-modal-dialog {
    position: relative;
    background: #fff;
    border: 1px solid #b9d3ee;
    border-top: 3px solid #165fa7;
    border-radius: 6px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 26px 28px 22px;
}
.ep-rate-modal-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #8a8f99;
    font-size: 18px;
    padding: 4px 8px;
    line-height: 1;
}
.ep-rate-modal-close:hover { color: #e74c3c; }

.ep-rate-stars-block { padding: 4px 0 18px; }
.ep-rate-stars { display: inline-flex; gap: 4px; line-height: 1; }
.ep-rate-modal .rate-star {
    position: relative;
    display: inline-block;
    width: 36px; height: 36px;
    line-height: 1;
    font-size: 36px;
}
.ep-rate-modal .rate-star .bg,
.ep-rate-modal .rate-star .fg { font-size: 36px; line-height: 1; }
.ep-rate-modal .rate-star .fg { color: #f5a623; }
.ep-rate-modal.user-rated .rate-star .fg { color: #f5a623; }
.ep-rate-message {
    color: #2d3340;
    font-size: 14px;
    font-weight: 600;
    margin: 14px 0 0;
}

.ep-rate-section { border-top: 1px solid #e3e8f0; padding: 16px 0 6px; }
.ep-rate-section-title { margin: 0 0 12px; color: #1f2937; font-size: 16px; font-weight: 700; }
.ep-rate-empty { color: #5b6473; font-size: 13px; margin: 0 0 6px; }
.ep-rate-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 0; font-size: 13px;
}
.ep-rate-row .ep-rate-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: #e6e9ee; object-fit: cover; flex-shrink: 0;
}
.ep-rate-row .ep-rate-name { color: #165fa7; font-weight: 700; text-decoration: none; }
.ep-rate-row .ep-rate-name:hover { text-decoration: underline; }
.ep-rate-row .ep-rate-text { color: #2d3340; }
.ep-rate-row .ep-rate-text strong { font-weight: 700; }
.ep-rate-row .ep-rate-date { color: #8a8f99; font-size: 12px; margin-left: 8px; }

body.dark-mode .ep-rate-modal-dialog {
    background: #23262f; border-color: #2c4a72; border-top-color: #6ea6e8;
}
body.dark-mode .ep-rate-modal-close { color: #b0b8c5; }
body.dark-mode .ep-rate-section { border-color: #2a2d36; }
body.dark-mode .ep-rate-section-title { color: #e1e6ee; }
body.dark-mode .ep-rate-message { color: #d6dae3; }
body.dark-mode .ep-rate-empty { color: #b0b8c5; }
body.dark-mode .ep-rate-row .ep-rate-name { color: #6ea6e8; }
body.dark-mode .ep-rate-row .ep-rate-text { color: #d6dae3; }
body.dark-mode .ep-rate-row .ep-rate-date { color: #8a93a3; }

@media (max-width: 600px) {
    .ep-rate-modal-dialog { padding: 22px 18px 16px; }
    .ep-rate-modal .rate-star,
    .ep-rate-modal .rate-star .bg,
    .ep-rate-modal .rate-star .fg { width: 30px; height: 30px; font-size: 30px; }
}

/* Anime/dizi/film puanı: kalp + skor rozeti yatayda */
.anime-rating-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.ep-vote-count {
    display: block;
    font-size: 11px;
    color: #8a8f99;
    text-align: right;
    line-height: 1;
    margin-top: 5px;
}
body.dark-mode .ep-vote-count { color: #8a93a3; }

/* Bölüm sayfası: Genişlet modu —
   Player tam genişlikte üste alınır (her iki kolon),
   alt kısım (bölümler/yorumlar/info) eskiden olduğu gibi sol kolonda kalır,
   sidebar oynatıcının altına ama hâlâ sağda olacak şekilde inerek devam eder. */
body.cz-expanded .body-container {
    display: grid;
    grid-template-columns: 1fr 320px;
    grid-template-areas:
        "player player"
        "main   aside";
    column-gap: 10px;
    row-gap: 16px;
    align-items: start;
}
body.cz-expanded .body-container > .ep-player-block { grid-area: player; min-width: 0; }
body.cz-expanded .body-container > #main  { grid-area: main; min-width: 0; }
body.cz-expanded .body-container > #aside { grid-area: aside; }

/* Profil → İzlenenler listesi */
.profile-watched-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.profile-watched-item {
    display: flex;
    gap: 10px;
    padding: 8px;
    background: #f7f8fb;
    border: 1px solid #e3e6ee;
    border-radius: 5px;
    text-decoration: none;
    color: inherit;
    transition: background .15s ease, border-color .15s ease;
}
.profile-watched-item:hover { background: #eef4fb; border-color: #b9d3ee; }
.profile-watched-item img {
    width: 56px;
    height: 84px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}
.profile-watched-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.profile-watched-name {
    color: #165fa7;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.profile-watched-ep { color: #4a4f59; font-size: 12px; font-weight: 500; }
.profile-watched-date { color: #8a8f99; font-size: 11px; margin-top: auto; }
body.dark-mode .profile-watched-item { background: #1f242c; border-color: #2c333d; }
body.dark-mode .profile-watched-item:hover { background: #2a2f38; border-color: #3a4150; }

/* ============================================================
 * İzlenenler — alt sekmeler + ilerleme kartları
 * ============================================================ */
.watched-pane-card { padding: 0; overflow: hidden; }

.watched-subtabs {
    display: flex;
    background: #f7f8fb;
    border-bottom: 1px solid #e3e6ee;
}
.watched-subtab {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #5a6275;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-bottom: 3px solid transparent;
    transition: color .15s, background .15s, border-color .15s;
}
.watched-subtab:hover { color: #1a73e8; background: #eef4fb; }
.watched-subtab.is-active { color: #1a73e8; border-bottom-color: #1a73e8; background: #fff; }
.watched-subtab i { font-size: 14px; }
.watched-subtab[data-watched="completed"].is-active { color: #28a745; border-bottom-color: #28a745; }
.watched-subtab[data-watched="completed"].is-active i { color: #28a745; }
.watched-subtab[data-watched="dropped"].is-active { color: #d9822b; border-bottom-color: #d9822b; }
.watched-subtab[data-watched="dropped"].is-active i { color: #d9822b; }
.watched-subtab-count { color: #97a0b3; font-weight: 500; font-size: 12px; }

.watched-subpane { display: none; padding: 16px; }
.watched-subpane.is-active { display: block; }

.watched-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 18px 14px;
}
.watched-card {
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform .15s;
}
.watched-card.is-hidden { display: none; }
.watched-card:hover { transform: translateY(-3px); }
.watched-card-poster {
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    border-radius: 6px;
    overflow: hidden;
    background: #e9eef6;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.watched-card-poster-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
.watched-card-poster img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s;
}
.watched-card:hover .watched-card-poster img { transform: scale(1.04); }

/* Hover overlay (Devam / Bırak / Kaldır) */
.watched-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 21, 35, 0.78);
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    justify-content: center;
    padding: 10px;
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}
.watched-card:hover .watched-card-overlay,
.watched-card:focus-within .watched-card-overlay {
    opacity: 1;
    pointer-events: auto;
}
.wc-btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 7px 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: rgba(255,255,255,0.12);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .15s, transform .1s;
    backdrop-filter: blur(2px);
}
.wc-btn i { font-size: 11px; }
.wc-btn:hover { transform: translateY(-1px); }
.wc-btn--continue { background: #1a73e8; }
.wc-btn--continue:hover { background: #155fc7; }
.wc-btn--drop { background: rgba(255,255,255,0.16); }
.wc-btn--drop:hover { background: #d9822b; }
.wc-btn--drop.is-active { background: #d9822b; }
.wc-btn--drop.is-active:hover { background: #b8691f; }
.wc-btn--remove { background: rgba(220, 53, 69, 0.85); }
.wc-btn--remove:hover { background: #b02a37; }
.wc-btn[disabled] { opacity: 0.6; cursor: not-allowed; }

.watched-card-name {
    margin-top: 4px;
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #2c3344;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
}
.watched-card-name:hover,
.watched-card:hover .watched-card-name { color: #1a73e8; }

/* "Daha Fazla Göster" butonu */
.watched-more-btn {
    display: block;
    margin: 16px auto 0;
    padding: 9px 22px;
    border: 1px solid #e3e6ee;
    background: #f7f8fb;
    color: #1a73e8;
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s, border-color .15s, color .15s;
}
.watched-more-btn i { margin-left: 6px; font-size: 11px; }
.watched-more-btn:hover { background: #eef4fb; border-color: #b9d3ee; }
body.dark-mode .watched-more-btn { background: #1f242c; border-color: #2c333d; color: #5fa8f8; }
body.dark-mode .watched-more-btn:hover { background: #232936; border-color: #3a4150; }
.watched-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #8a8f99;
    margin-top: 2px;
}
.watched-card-progress { font-weight: 600; color: #5a6275; }
.watched-card-bar {
    display: block;
    height: 3px;
    background: #e3e6ee;
    border-radius: 2px;
    overflow: hidden;
}
.watched-card-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #1a73e8, #4f9eff);
    border-radius: 2px;
    transition: width .25s ease;
}
.watched-subpane[data-watched-pane="completed"] .watched-card-bar-fill {
    background: linear-gradient(90deg, #28a745, #4ed06f);
}
.watched-subpane[data-watched-pane="dropped"] .watched-card-bar-fill {
    background: linear-gradient(90deg, #d9822b, #f0a657);
}

/* Dark mode */
body.dark-mode .watched-subtabs { background: #1a1f28; border-bottom-color: #2c333d; }
body.dark-mode .watched-subtab { color: #9aa3b6; }
body.dark-mode .watched-subtab:hover { background: #232936; color: #5fa8f8; }
body.dark-mode .watched-subtab.is-active { color: #5fa8f8; border-bottom-color: #5fa8f8; background: #14181f; }
body.dark-mode .watched-subtab[data-watched="completed"].is-active { color: #4ed06f; border-bottom-color: #4ed06f; }
body.dark-mode .watched-subtab[data-watched="completed"].is-active i { color: #4ed06f; }
body.dark-mode .watched-subtab[data-watched="dropped"].is-active { color: #f0a657; border-bottom-color: #f0a657; }
body.dark-mode .watched-subtab[data-watched="dropped"].is-active i { color: #f0a657; }
body.dark-mode .watched-card-name  { color: #e0e3eb; }
body.dark-mode .watched-card:hover .watched-card-name { color: #5fa8f8; }
body.dark-mode .watched-card-meta  { color: #7a8294; }
body.dark-mode .watched-card-progress { color: #c0c8d8; }
body.dark-mode .watched-card-bar { background: #2c333d; }

/* ============================================================
 * İzlenecekler tablosu
 * ============================================================ */
.watchlist-pane-card { padding: 0; overflow: hidden; }

.watchlist-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 13px;
    color: #2c3344;
}
.watchlist-table thead th {
    text-align: left;
    padding: 14px 16px;
    font-weight: 600;
    font-size: 12px;
    color: #5a6275;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: #f7f8fb;
    border-bottom: 1px solid #e3e6ee;
}
.watchlist-table thead .wl-col-act { text-align: right; }
.watchlist-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid #eef0f4;
    vertical-align: middle;
}
.watchlist-table tbody tr:last-child td { border-bottom: 0; }
.watchlist-table tbody tr.watchlist-row { transition: background .15s; }
.watchlist-table tbody tr.watchlist-row:hover { background: #f7faff; }
.watchlist-table tbody tr.is-removing { opacity: 0; transform: translateX(20px); transition: opacity .25s, transform .25s; }

.wl-anime-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}
.wl-anime-link img {
    width: 44px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: #e9eef6;
}
.wl-anime-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wl-anime-name {
    font-weight: 700;
    color: #1a73e8;
    line-height: 1.3;
    transition: color .15s;
}
.wl-anime-link:hover .wl-anime-name { color: #155fc7; }
.wl-anime-ep { color: #8a8f99; font-size: 12px; }

.wl-ep-title-link {
    color: #2c3344;
    text-decoration: none;
    transition: color .15s;
}
.wl-ep-title-link:hover { color: #1a73e8; }

.wl-col-date  { color: #5a6275; white-space: nowrap; }
.wl-col-act   { text-align: right; white-space: nowrap; }

.wl-btn {
    appearance: none;
    border: 1px solid transparent;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.wl-btn:hover { transform: translateY(-1px); }
.wl-btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }

.wl-btn--watch {
    background: #e8f5ec;
    border-color: #bde2c7;
    color: #28a745;
}
.wl-btn--watch:hover { background: #28a745; border-color: #28a745; color: #fff; }

.wl-btn--remove {
    background: #fdecee;
    border-color: #f5c2c7;
    color: #dc3545;
}
.wl-btn--remove:hover { background: #dc3545; border-color: #dc3545; color: #fff; }

/* Dark mode */
body.dark-mode .watchlist-table { background: #14181f; color: #e0e3eb; }
body.dark-mode .watchlist-table thead th { background: #1a1f28; color: #9aa3b6; border-bottom-color: #2c333d; }
body.dark-mode .watchlist-table tbody td { border-bottom-color: #2c333d; }
body.dark-mode .watchlist-table tbody tr.watchlist-row:hover { background: #1f242c; }
body.dark-mode .wl-anime-name { color: #5fa8f8; }
body.dark-mode .wl-anime-link:hover .wl-anime-name { color: #80b8ff; }
body.dark-mode .wl-anime-ep { color: #7a8294; }
body.dark-mode .wl-ep-title-link { color: #e0e3eb; }
body.dark-mode .wl-ep-title-link:hover { color: #5fa8f8; }
body.dark-mode .wl-col-date { color: #9aa3b6; }
body.dark-mode .wl-btn--watch { background: #1d2c25; border-color: #295a3a; color: #4ed06f; }
body.dark-mode .wl-btn--watch:hover { background: #28a745; border-color: #28a745; color: #fff; }
body.dark-mode .wl-btn--remove { background: #2c1e22; border-color: #5a2935; color: #ef6878; }
body.dark-mode .wl-btn--remove:hover { background: #dc3545; border-color: #dc3545; color: #fff; }

/* Mobil — bölüm adı ve tarih kolonları sıkışırsa gizle */
@media (max-width: 640px) {
    .watchlist-table .wl-col-title { display: none; }
}
@media (max-width: 480px) {
    .watchlist-table .wl-col-date  { display: none; }
}
body.dark-mode .profile-watched-name { color: #6ea6e8; }
body.dark-mode .profile-watched-ep { color: #c0c5cf; }
body.dark-mode .profile-watched-date { color: #8a93a3; }

/* ============================================================
 * Yorumlar — kullanıcının site yorumları tablosu
 * (Dizi / Yorum / Tarih / Puan)
 * ============================================================ */
.user-comments-pane-card { padding: 0; overflow: hidden; }

.user-comments-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #2c3344;
    table-layout: fixed;
}
.user-comments-table thead th {
    text-align: left;
    padding: 14px 16px;
    font-weight: 600;
    font-size: 12px;
    color: #5a6275;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: #f7f8fb;
    border-bottom: 1px solid #e3e6ee;
}
.user-comments-table thead .uc-col-score { text-align: center; }
.user-comments-table .uc-col-anime { width: 22%; }
.user-comments-table .uc-col-body  { width: 46%; }
.user-comments-table .uc-col-date  { width: 18%; }
.user-comments-table .uc-col-score { width: 90px; }
.user-comments-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #eef0f4;
    vertical-align: top;
}
.user-comments-table tbody tr:last-child td { border-bottom: 0; }
.user-comments-table tbody tr.user-comments-row:hover { background: #f7faff; }

.uc-anime-link {
    display: inline-flex;
    align-items: flex-start;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}
.uc-anime-link img {
    width: 44px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: #e9eef6;
}
.uc-anime-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.uc-anime-name {
    font-weight: 700;
    color: #1a73e8;
    line-height: 1.3;
    transition: color .15s;
}
.uc-anime-link:hover .uc-anime-name { color: #155fc7; }
.uc-anime-ep {
    color: #8a8f99;
    font-size: 12px;
    text-decoration: none;
    transition: color .15s;
}
a.uc-anime-ep:hover { color: #1a73e8; }

.uc-col-body { color: #3b4150; }
.uc-body-text {
    line-height: 1.5;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.uc-col-date {
    color: #5a6275;
    line-height: 1.35;
    font-size: 12.5px;
}

.uc-col-score { text-align: center; }
.uc-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 28px;
    padding: 0 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    background: #4a505c;
}
.uc-score--great { background: #1f8f3a; }
.uc-score--good  { background: #28a745; }
.uc-score--mid   { background: #6cba3e; }
.uc-score--low   { background: #d9822b; }
.uc-score--bad   { background: #c3393b; }
.uc-score--none  { background: #aab0bd; color: #fff; font-weight: 600; }

body.dark-mode .user-comments-table { background: #14181f; color: #e0e3eb; }
body.dark-mode .user-comments-table thead th { background: #1a1f28; color: #9aa3b6; border-bottom-color: #2c333d; }
body.dark-mode .user-comments-table tbody td { border-bottom-color: #2c333d; }
body.dark-mode .user-comments-table tbody tr.user-comments-row:hover { background: #1f242c; }
body.dark-mode .uc-anime-name { color: #5fa8f8; }
body.dark-mode .uc-anime-link:hover .uc-anime-name { color: #87bef6; }
body.dark-mode .uc-anime-ep { color: #8a93a3; }
body.dark-mode a.uc-anime-ep:hover { color: #5fa8f8; }
body.dark-mode .uc-col-body { color: #c8cdd8; }
body.dark-mode .uc-col-date { color: #9aa3b6; }
body.dark-mode .uc-score--none { background: #3a4150; color: #c8cdd8; }

@media (max-width: 720px) {
    .user-comments-table .uc-col-date  { display: none; }
    .user-comments-table .uc-col-anime { width: 35%; }
    .user-comments-table .uc-col-body  { width: auto; }
}
@media (max-width: 480px) {
    .user-comments-table thead th,
    .user-comments-table tbody td { padding: 10px 8px; }
    .uc-anime-link img { width: 36px; height: 52px; }
    .user-comments-table .uc-col-score { width: 60px; }
}

/* ============================================================
 * Bildirilerim — 3 alt sekme (Hata / Yorum / Kullanıcı)
 * ============================================================ */
.reports-pane-card { padding: 0; overflow: hidden; }

.reports-subtabs {
    display: flex;
    background: #f7f8fb;
    border-bottom: 1px solid #e3e6ee;
}
.reports-subtab {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #5a6275;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-bottom: 3px solid transparent;
    transition: color .15s, background .15s, border-color .15s;
}
.reports-subtab:hover { color: #1a73e8; background: #eef4fb; }
.reports-subtab.is-active { color: #1a73e8; border-bottom-color: #1a73e8; background: #fff; }
.reports-subtab i { font-size: 14px; }
.reports-subtab-count { color: #97a0b3; font-weight: 500; font-size: 12px; }

.reports-subpane { display: none; }
.reports-subpane.is-active { display: block; }
.reports-subpane .profile-empty-notice { margin: 16px 14px; }

.reports-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #2c3344;
    table-layout: fixed;
}
.reports-table thead th {
    text-align: left;
    padding: 14px 16px;
    font-weight: 600;
    font-size: 12px;
    color: #5a6275;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: #f7f8fb;
    border-bottom: 1px solid #e3e6ee;
}
.reports-table .rp-col-target { width: 28%; }
.reports-table .rp-col-reason { width: 22%; }
.reports-table .rp-col-body   { width: 38%; }
.reports-table .rp-col-result { width: 170px; }
.reports-table .rp-col-date   { width: 130px; white-space: nowrap; }

.reports-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #eef0f4;
    vertical-align: middle;
}
.reports-table tbody tr:last-child td { border-bottom: 0; }
.reports-table tbody tr.reports-row:hover { background: #f7faff; }

.rp-target-link {
    display: inline-flex;
    align-items: flex-start;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}
.rp-target-link img {
    width: 44px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: #e9eef6;
}
.rp-target-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rp-target-name {
    font-weight: 700;
    color: #1a73e8;
    line-height: 1.3;
    transition: color .15s;
}
.rp-target-link:hover .rp-target-name { color: #155fc7; }
.rp-target-sub { color: #8a8f99; font-size: 12px; text-decoration: none; transition: color .15s; }
a.rp-target-sub:hover { color: #1a73e8; }
.rp-target-deleted { color: #97a0b3; font-style: italic; }

.rp-user-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}
.rp-user-link img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
    background: #e9eef6;
}
.rp-user-name { font-weight: 600; color: #1a73e8; transition: color .15s; }
a.rp-user-link:hover .rp-user-name { color: #155fc7; }

.rp-body-link {
    color: #3b4150;
    text-decoration: none;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s;
}
.rp-body-link:hover { color: #1a73e8; }
.rp-col-body span { line-height: 1.5; }

.rp-col-reason { color: #3b4150; }
.rp-col-date   { color: #5a6275; line-height: 1.35; font-size: 12.5px; }

.rp-pill {
    display: inline-block;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
    line-height: 1.2;
    white-space: nowrap;
}
.rp-pill--ok      { background: #e8f5ec; color: #1f8f3a; border: 1px solid #bde2c7; }
.rp-pill--pending { background: #fff5e0; color: #b8651a; border: 1px solid #f3d59a; }
.rp-pill--muted   { background: #eef0f4; color: #5a6275; border: 1px solid #d8dde6; }

body.dark-mode .reports-subtabs { background: #1a1f28; border-bottom-color: #2c333d; }
body.dark-mode .reports-subtab { color: #9aa3b6; }
body.dark-mode .reports-subtab:hover { background: #232936; color: #5fa8f8; }
body.dark-mode .reports-subtab.is-active { color: #5fa8f8; border-bottom-color: #5fa8f8; background: #14181f; }

body.dark-mode .reports-table { background: #14181f; color: #e0e3eb; }
body.dark-mode .reports-table thead th { background: #1a1f28; color: #9aa3b6; border-bottom-color: #2c333d; }
body.dark-mode .reports-table tbody td { border-bottom-color: #2c333d; }
body.dark-mode .reports-table tbody tr.reports-row:hover { background: #1f242c; }
body.dark-mode .rp-target-name { color: #5fa8f8; }
body.dark-mode .rp-target-link:hover .rp-target-name { color: #87bef6; }
body.dark-mode .rp-target-sub { color: #8a93a3; }
body.dark-mode a.rp-target-sub:hover { color: #5fa8f8; }
body.dark-mode .rp-target-deleted { color: #6f7787; }
body.dark-mode .rp-user-name { color: #5fa8f8; }
body.dark-mode a.rp-user-link:hover .rp-user-name { color: #87bef6; }
body.dark-mode .rp-body-link { color: #c8cdd8; }
body.dark-mode .rp-body-link:hover { color: #5fa8f8; }
body.dark-mode .rp-col-reason { color: #c8cdd8; }
body.dark-mode .rp-col-date { color: #9aa3b6; }

body.dark-mode .rp-pill--ok      { background: #1d2c25; color: #4ed06f; border-color: #295a3a; }
body.dark-mode .rp-pill--pending { background: #2b2418; color: #f0a657; border-color: #553e20; }
body.dark-mode .rp-pill--muted   { background: #232936; color: #9aa3b6; border-color: #2f3744; }

@media (max-width: 720px) {
    .reports-table .rp-col-date { display: none; }
    .reports-table .rp-col-target { width: 38%; }
    .reports-table .rp-col-result { width: 130px; }
}
@media (max-width: 480px) {
    .reports-subtab { padding: 12px 8px; font-size: 12px; gap: 5px; }
    .reports-subtab i { display: none; }
    .reports-table thead th,
    .reports-table tbody td { padding: 10px 8px; }
    .rp-target-link img { width: 36px; height: 52px; }
    .rp-user-link img { width: 28px; height: 28px; }
    .rp-pill { padding: 4px 7px; font-size: 11px; }
}

/* ============================================================
 * Favoriler — alt sekmeler (Diziler / Bölümler)
 * ============================================================ */
.favorites-pane-card { padding: 0; overflow: hidden; }

.favorites-subtabs {
    display: flex;
    background: #f7f8fb;
    border-bottom: 1px solid #e3e6ee;
}
.favorites-subtab {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #5a6275;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-bottom: 3px solid transparent;
    transition: color .15s, background .15s, border-color .15s;
}
.favorites-subtab:hover { color: #1a73e8; background: #eef4fb; }
.favorites-subtab.is-active { color: #1a73e8; border-bottom-color: #1a73e8; background: #fff; }
.favorites-subtab-count { color: #97a0b3; font-weight: 500; font-size: 12px; }

.favorites-subpane { display: none; }
.favorites-subpane.is-active { display: block; }
.favorites-subpane[data-fav-pane="episodes"].is-active { display: block; }

.favorites-subpane .profile-empty-notice { margin: 16px 14px; }

body.dark-mode .favorites-subtabs { background: #1a1f28; border-bottom-color: #2c333d; }
body.dark-mode .favorites-subtab { color: #9aa3b6; }
body.dark-mode .favorites-subtab:hover { background: #232936; color: #5fa8f8; }
body.dark-mode .favorites-subtab.is-active { color: #5fa8f8; border-bottom-color: #5fa8f8; background: #14181f; }

/* ==========================================================
 * Takvim — Ana sayfa ek stilleri (mevcut .takvim-* + ep-badge)
 * ========================================================== */
.schedule-row .ep-badge.ep-badge-pending {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #64748b;
    cursor: default;
}
.schedule-row .ep-badge.ep-badge-pending:hover {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #64748b;
}
.takvim-schedule.is-loading { opacity: .55; transition: opacity .15s ease; pointer-events: none; }

/* ==========================================================
 * /takvim/ — Tam haftalık takvim sayfası
 * ========================================================== */
.takvim-page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 16px;
    padding: 18px 18px 8px;
    border-bottom: 1px solid #eef0f4;
}
.takvim-page-title h1 {
    margin: 0; font-size: 22px; color: #1f2a44;
    display: flex; align-items: center; gap: 10px;
}
.takvim-page-title h1 i { color: #165fa7; }
.takvim-page-sub { margin: 4px 0 0; color: #64748b; font-size: 12px; font-weight: 700; letter-spacing: .8px; }
.takvim-page-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.takvim-kind-pill {
    display: inline-flex; align-items: center;
    padding: 6px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
    color: #475569; background: #f1f5f9;
    border: 1px solid #e2e8f0;
    transition: all .15s ease;
}
.takvim-kind-pill:hover { background: #e8f0fe; border-color: #b7d1f0; color: #165fa7; }
.takvim-kind-pill.active { background: #165fa7; border-color: #165fa7; color: #fff; }

.takvim-week { display: grid; gap: 14px; padding: 16px 18px 22px; }

.takvim-day-block {
    background: #fff; border: 1px solid #eaecef; border-radius: 10px;
    overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease;
}
.takvim-day-block.is-today { border-color: #b7d1f0; box-shadow: 0 1px 6px rgba(22, 95, 167, 0.07); }
.takvim-day-block.is-active { border-color: #165fa7; }

.takvim-day-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; background: #f8fafc;
    border-bottom: 1px solid #eaecef;
}
.takvim-day-meta { display: flex; align-items: baseline; gap: 8px; }
.takvim-day-name { font-weight: 800; font-size: 13px; color: #1f2a44; text-transform: uppercase; letter-spacing: .5px; }
.takvim-day-date { font-size: 12px; color: #64748b; }
.takvim-day-today {
    margin-left: 4px;
    background: #165fa7; color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: .5px;
    padding: 2px 7px; border-radius: 999px;
    text-transform: uppercase;
}
.takvim-day-count { font-size: 11px; color: #94a3b8; font-weight: 600; }

.takvim-day-list { padding: 4px 0; }
.takvim-day-empty { padding: 14px 16px; color: #94a3b8; font-size: 13px; text-align: center; }

.takvim-row {
    display: grid;
    grid-template-columns: 64px 50px 1fr auto;
    gap: 12px; align-items: center;
    padding: 10px 14px;
    border-top: 1px solid #f1f5f9;
}
.takvim-day-list .takvim-row:first-child { border-top: 0; }
.takvim-row:hover { background: #f8fafc; }
.takvim-row-time .t {
    display: inline-block;
    font-weight: 800; color: #1f2a44; font-size: 14px;
    background: #e8f0fe; border: 1px solid #cfe0f6;
    padding: 4px 8px; border-radius: 6px;
    font-variant-numeric: tabular-nums;
}
.takvim-row-poster {
    display: block; width: 50px; height: 70px;
    border-radius: 6px; overflow: hidden;
    background: #e2e8f0;
}
.takvim-row-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.takvim-row-info { min-width: 0; }
.takvim-row-title {
    display: block; font-weight: 700; color: #1f2a44; font-size: 14px;
    text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.takvim-row-title:hover { color: #165fa7; }
.takvim-row-meta {
    margin-top: 4px; display: flex; flex-wrap: wrap; gap: 8px;
    font-size: 11px; color: #64748b;
}
.takvim-row-kind {
    background: #fef3c7; color: #92400e;
    padding: 2px 6px; border-radius: 4px;
    font-weight: 700; letter-spacing: .3px;
}
.takvim-row-pip { background: #f1f5f9; color: #475569; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.takvim-row-eptitle { color: #475569; }

.takvim-row-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 6px;
    font-size: 12px; font-weight: 700;
    border: 1px solid #cfe0f6;
    transition: all .15s ease;
}
.takvim-row-btn.ready { background: #fff; color: #165fa7; }
.takvim-row-btn.ready:hover { background: #165fa7; border-color: #165fa7; color: #fff; }
.takvim-row-btn.released { background: #16a34a; border-color: #15803d; color: #fff; }
.takvim-row-btn.released:hover { background: #15803d; border-color: #14532d; color: #fff; }
.takvim-row-btn.pending { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; cursor: default; }

@media (max-width: 600px) {
    .takvim-week { padding: 12px 8px 16px; gap: 10px; }
    .takvim-day-head { padding: 8px 10px; }
    .takvim-row {
        grid-template-columns: 42px 1fr auto;
        gap: 8px;
        padding: 8px 10px;
    }
    .takvim-row-time { display: none; }
    .takvim-row-poster { width: 42px; height: 58px; }
    .takvim-row-title { font-size: 13px; }
    .takvim-row-meta { gap: 5px; font-size: 10.5px; margin-top: 3px; }
    .takvim-row-kind, .takvim-row-pip { padding: 1px 5px; }
    .takvim-row-btn {
        padding: 5px 8px;
        font-size: 11px;
        gap: 4px;
        white-space: nowrap;
    }
    .takvim-row-btn i { font-size: 10px; }
}

/* Dark mode */
body.dark-mode .takvim-page-head { border-color: #2a2d36; }
body.dark-mode .takvim-page-title h1 { color: #e8eaf0; }
body.dark-mode .takvim-page-sub { color: #94a3b8; }
body.dark-mode .takvim-kind-pill { background: #1f242c; border-color: #2a2d36; color: #c0c5cf; }
body.dark-mode .takvim-kind-pill:hover { background: #1d2a3d; border-color: #2c3d57; color: #6ea6e8; }
body.dark-mode .takvim-kind-pill.active { background: #165fa7; border-color: #165fa7; color: #fff; }
body.dark-mode .takvim-day-block { background: #1f242c; border-color: #2a2d36; }
body.dark-mode .takvim-day-head { background: #181c22; border-color: #2a2d36; }
body.dark-mode .takvim-day-name { color: #e8eaf0; }
body.dark-mode .takvim-day-date { color: #94a3b8; }
body.dark-mode .takvim-row { border-color: #262a31; }
body.dark-mode .takvim-row:hover { background: #181c22; }
body.dark-mode .takvim-row-title { color: #e8eaf0; }
body.dark-mode .takvim-row-time .t { background: #1d2a3d; border-color: #2c3d57; color: #c0d8f5; }
body.dark-mode .takvim-row-pip { background: #2a2d36; color: #c0c5cf; }

/* Hafta navigasyonu — filtre pill'lerinin yanında */
.takvim-page-filters .takvim-nav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px; font-weight: 600;
    background: #165fa7;
    border: 1px solid #165fa7;
    color: #fff;
    transition: all .15s ease;
}
.takvim-page-filters .takvim-nav-btn:first-of-type { margin-left: 4px; }
.takvim-page-filters .takvim-nav-btn:hover { background: #114a86; border-color: #114a86; color: #fff; }

body.dark-mode .takvim-page-filters .takvim-nav-btn { background: #165fa7; border-color: #165fa7; color: #fff; }
body.dark-mode .takvim-page-filters .takvim-nav-btn:hover { background: #1e6cc4; border-color: #1e6cc4; color: #fff; }

/* ==========================================================
 * Bölüm sayfasi — bir sonraki bölüm geri sayım kutusu
 * ========================================================== */
.next-ep-countdown {
    display: flex; align-items: stretch; gap: 14px;
    margin: 14px 0;
    padding: 14px 18px;
    background: linear-gradient(135deg, #1e6cc4 0%, #165fa7 65%, #114a86 100%);
    color: #fff; border-radius: 10px;
    box-shadow: 0 6px 20px -10px rgba(22, 95, 167, 0.55);
    position: relative; overflow: hidden;
}
.next-ep-countdown::before {
    content: ''; position: absolute; right: -40px; top: -40px;
    width: 220px; height: 220px;
    background: radial-gradient(closest-side, rgba(255,255,255,.18), transparent 70%);
    pointer-events: none;
}
.nec-icon {
    flex: 0 0 auto; width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.15);
    border-radius: 10px; font-size: 22px;
    align-self: flex-start;
}
.nec-body {
    flex: 1; min-width: 0; position: relative; z-index: 1;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
}
.nec-title {
    font-weight: 700; font-size: 14px; line-height: 1.4;
    letter-spacing: .2px;
}
.nec-clock {
    display: inline-flex; flex-wrap: wrap; gap: 8px;
    font-variant-numeric: tabular-nums;
}
.nec-block {
    display: inline-flex; align-items: baseline; gap: 3px;
}
.nec-num {
    font-size: 15px; font-weight: 800; line-height: 1;
    background: rgba(255,255,255,.14);
    padding: 3px 6px; border-radius: 5px;
    min-width: 26px; text-align: center;
    display: inline-block;
}
.nec-unit {
    font-size: 10px; font-weight: 600;
    text-transform: lowercase; letter-spacing: .2px;
    color: rgba(255,255,255,.85);
}
.next-ep-countdown.is-live { background: linear-gradient(135deg, #16a34a, #15803d); }

@media (max-width: 600px) {
    .next-ep-countdown { padding: 12px 14px; gap: 10px; }
    .nec-icon { width: 38px; height: 38px; font-size: 18px; }
    .nec-title { font-size: 13px; }
    .nec-num { font-size: 14px; min-width: 24px; padding: 2px 5px; }
    .nec-clock { gap: 6px; }
}

/* ============================================================
   PROFİL — "Şu an izliyor" kutucuğu (banner sağ üstü)
   ============================================================ */
.profile-now-watching {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    max-width: 320px;
    padding: 8px 14px 8px 8px;
    background: rgba(15, 20, 35, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.32);
    transition: transform 0.15s, background 0.2s, border-color 0.2s;
}
.profile-now-watching:hover {
    background: rgba(15, 20, 35, 0.78);
    border-color: rgba(95, 168, 248, 0.55);
    transform: translateY(-1px);
}
.profile-now-watching-poster {
    position: relative;
    flex: 0 0 auto;
    width: 50px;
    height: 72px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.profile-now-watching-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.profile-now-watching-pulse {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    animation: profileNowPulse 1.6s infinite;
}
@keyframes profileNowPulse {
    0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.65); }
    70%  { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.profile-now-watching-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}
.profile-now-watching-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #fca5a5;
}
.profile-now-watching-label i { font-size: 7px; color: #ef4444; }
.profile-now-watching-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 230px;
}
.profile-now-watching-ep {
    font-size: 11.5px;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 230px;
}

@media (max-width: 720px) {
    .profile-now-watching {
        position: static;
        margin: 12px 14px 0;
        max-width: none;
    }
}

/* ============================================================
   COCUK KORUMA / YAS FILTRESI — body[data-cz-age-limit="N"] kullanicilar
   icin secilen yas seviyesinin uzerindeki [data-age-rating] kart/satirlari
   gizler. Cascade: 3 her seyi gizler, 17 sadece Rx'i gizler.
   ============================================================ */
/* 17+ — sadece Rx (explicit) gizli */
body[data-cz-age-limit="17"] [data-age-rating="Rx"],
/* 13+ — R, R+, Rx gizli */
body[data-cz-age-limit="13"] [data-age-rating="R"],
body[data-cz-age-limit="13"] [data-age-rating="R+"],
body[data-cz-age-limit="13"] [data-age-rating="Rx"],
/* 7+ — PG-13, R, R+, Rx gizli */
body[data-cz-age-limit="7"]  [data-age-rating="PG-13"],
body[data-cz-age-limit="7"]  [data-age-rating="R"],
body[data-cz-age-limit="7"]  [data-age-rating="R+"],
body[data-cz-age-limit="7"]  [data-age-rating="Rx"],
/* 3+ — PG ve uzeri gizli (sadece G gorunur) */
body[data-cz-age-limit="3"]  [data-age-rating="PG"],
body[data-cz-age-limit="3"]  [data-age-rating="PG-13"],
body[data-cz-age-limit="3"]  [data-age-rating="R"],
body[data-cz-age-limit="3"]  [data-age-rating="R+"],
body[data-cz-age-limit="3"]  [data-age-rating="Rx"] {
    display: none !important;
}

/* ============================================================
   AGE WARNING MODAL — R+ / Rx animeleri icin +18 uyari penceresi
   ============================================================ */
.age-warn-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.age-warn-modal[hidden] { display: none !important; }
body.age-warn-locked { overflow: hidden; }

.age-warn-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 18, 30, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.age-warn-dialog {
    position: relative;
    background: #fff;
    border: 1px solid #b9d3ee;
    border-top: 3px solid #d9534f;
    border-radius: 6px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
    width: 100%;
    max-width: 520px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 0;
    animation: ageWarnIn 0.18s ease-out;
}
@keyframes ageWarnIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.age-warn-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 24px 14px;
    border-bottom: 1px solid #eef0f5;
    text-align: center;
}
.age-warn-hero {
    width: auto;
    height: auto;
    max-width: 280px;
    max-height: 280px;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}
.age-warn-title {
    margin: 0;
    color: #2d3340;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.age-warn-body {
    padding: 18px 24px 4px;
    color: #2d3340;
    font-size: 13px;
    line-height: 1.55;
}
.age-warn-lead {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}
.age-warn-lead strong { color: #d9534f; }
.age-warn-sub {
    margin: 0 0 8px;
    color: #4a5160;
}
.age-warn-list {
    margin: 10px 0 14px;
    padding: 0;
    list-style: none;
    border-top: 1px solid #eef0f5;
}
.age-warn-list li {
    position: relative;
    padding: 8px 4px 8px 26px;
    border-bottom: 1px solid #eef0f5;
    color: #3a4150;
    font-size: 12.5px;
    line-height: 1.5;
}
.age-warn-list li::before {
    content: "\f00c"; /* fa-check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 6px;
    top: 9px;
    color: #3a86d4;
    font-size: 12px;
}

.age-warn-foot {
    padding: 14px 24px 18px;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.age-warn-btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    font: 600 14px/1 'Fira Sans', sans-serif;
    padding: 10px 22px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, transform 0.05s ease;
}
.age-warn-btn-primary {
    background: #3a86d4;
    color: #fff;
}
.age-warn-btn-primary:hover { background: #2a78c4; }
.age-warn-btn-primary:active { transform: translateY(1px); }

@media (max-width: 520px) {
    .age-warn-dialog { max-width: 100%; }
    .age-warn-head { padding: 14px 16px 12px; }
    .age-warn-body { padding: 14px 16px 4px; }
    .age-warn-foot { padding: 12px 16px 16px; }
    .age-warn-title { font-size: 16px; }
    .age-warn-lead { font-size: 14px; }
}

body.dark-mode .age-warn-dialog {
    background: #23262f;
    border-color: #2c4a72;
    border-top-color: #d9534f;
}
body.dark-mode .age-warn-head { border-color: #2a2d36; }
body.dark-mode .age-warn-title { color: #e1e6ee; }
body.dark-mode .age-warn-body { color: #d6dae3; }
body.dark-mode .age-warn-lead { color: #e1e6ee; }
body.dark-mode .age-warn-sub { color: #b0b8c5; }
body.dark-mode .age-warn-list,
body.dark-mode .age-warn-list li { border-color: #2a2d36; color: #d6dae3; }
body.dark-mode .age-warn-list li::before { color: #6ea6e8; }

/* ===========================
 * Header search autocomplete
 * =========================== */
.search-suggest {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 360px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border: 1px solid #e2e8f5;
    border-radius: 8px;
    box-shadow: 0 14px 36px -10px rgba(15,35,80,0.28);
    overflow: hidden;
    z-index: 1000;
}
.search-suggest[hidden] { display: none; }
.search-suggest-tabs {
    display: flex;
    border-bottom: 1px solid #e2e8f5;
    background: #fafbfd;
}
.ss-tab {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 11px 8px 9px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7c98;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s, background .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.ss-tab:hover { color: #165fa7; }
.ss-tab.is-active { color: #1f6feb; border-bottom-color: #1f6feb; background: #fff; }
.ss-tab-count {
    display: none;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 10px;
    background: #e2e8f5;
    color: #29395a;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}
.ss-tab.is-active .ss-tab-count { background: #1f6feb; color: #fff; }
.search-suggest.has-results .ss-tab-count { display: inline-block; }

.search-suggest-body { position: relative; }
.ss-pane { display: none; }
.ss-pane.is-active { display: block; }
.ss-list {
    max-height: 460px;
    overflow-y: auto;
}

.ss-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #eef2f8;
    color: inherit;
    transition: background .12s;
}
.ss-item:last-child { border-bottom: 0; }
.ss-item:hover,
.ss-item.is-focus { background: #f4f8fe; }
.ss-item-link {
    position: absolute;
    inset: 0;
    z-index: 0;
    text-decoration: none;
}
.ss-item > .ss-item-thumb,
.ss-item > .ss-item-main {
    position: relative;
    z-index: 1;
    pointer-events: none;
}
.ss-item > .ss-item-main .ss-genre-link {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}
.ss-item-thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 78px;
    border-radius: 4px;
    overflow: hidden;
    background: #eef2f8;
    align-self: flex-start;
}
.ss-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ss-item-thumb--avatar {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    align-self: center;
}
.ss-item-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
}
.ss-item-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #1d2436;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ss-item-genres,
.ss-item-meta {
    font-size: 11.5px;
    color: #6b7c98;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ss-item-genres .ss-label,
.ss-item-meta  .ss-label { color: #6b7c98; }
.ss-item-genres a,
.ss-item-meta  a {
    color: #1f6feb;
    text-decoration: none;
    font-weight: 600;
}
.ss-item-genres a:hover,
.ss-item-meta  a:hover { text-decoration: underline; }
.ss-item-genres .ss-sep { color: #c8d1de; margin: 0 2px; }
.ss-item-meta .ss-dash  { color: #c8d1de; margin: 0 4px; }
.ss-item-meta strong { font-weight: 600; color: #1f6feb; }
.ss-item-sub {
    font-size: 11.5px;
    color: #6b7c98;
    line-height: 1.3;
}
.ss-item-username {
    font-size: 14px;
    font-weight: 700;
    color: #1d2436;
}

.ss-empty,
.ss-loading {
    padding: 24px 16px;
    text-align: center;
    color: #6b7c98;
    font-size: 12.5px;
}
.ss-loading i { margin-right: 6px; }

.search-suggest-foot {
    display: block;
    text-align: center;
    background: #1f6feb;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .8px;
    padding: 10px 12px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background .15s;
}
.search-suggest-foot:hover { background: #165fa7; color: #fff; }

/* Dark mode */
body.dark-mode .search-suggest {
    background: #1c2434;
    border-color: #2a3550;
    box-shadow: 0 14px 36px -10px rgba(0,0,0,0.6);
}
body.dark-mode .search-suggest-tabs { background: #20293c; border-bottom-color: #2a3550; }
body.dark-mode .ss-tab { color: #8a93a3; }
body.dark-mode .ss-tab:hover { color: #90caf9; }
body.dark-mode .ss-tab.is-active { color: #5fa8f8; background: #1c2434; border-bottom-color: #5fa8f8; }
body.dark-mode .ss-tab-count { background: #2a3550; color: #c5cbd6; }
body.dark-mode .ss-tab.is-active .ss-tab-count { background: #5fa8f8; color: #0e1a2e; }
body.dark-mode .ss-item { border-bottom-color: #2a3550; }
body.dark-mode .ss-item:hover,
body.dark-mode .ss-item.is-focus { background: #243047; }
body.dark-mode .ss-item-thumb { background: #2a3550; }
body.dark-mode .ss-item-title,
body.dark-mode .ss-item-username { color: #e3e8f0; }
body.dark-mode .ss-item-genres,
body.dark-mode .ss-item-meta,
body.dark-mode .ss-item-sub { color: #8f99ad; }
body.dark-mode .ss-item-genres a,
body.dark-mode .ss-item-meta a,
body.dark-mode .ss-item-meta strong { color: #5fa8f8; }
body.dark-mode .ss-item-genres .ss-sep,
body.dark-mode .ss-item-meta .ss-dash { color: #3d4866; }
body.dark-mode .ss-empty,
body.dark-mode .ss-loading { color: #8f99ad; }
body.dark-mode .search-suggest-foot { background: #1f6feb; }
body.dark-mode .search-suggest-foot:hover { background: #2a82ff; }

@media (max-width: 720px) {
    .search-suggest {
        position: fixed;
        top: 56px;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
    }
}

/* ============================================================
   "EN UZUN SERİ" tile — kademeli ısınma efekti
   --streak-heat:  0..1   (PHP tarafında 3/10/30/50/100 gün eşiklerine göre)
   --streak-color: rgb(R,G,B)  (mavi → sarı → turuncu → kırmızı geçiş)
   ============================================================ */
.profile-stat-tile--streak {
    --streak-heat: 0;
    --streak-color: #1a73e8;
    transition:
        transform .2s ease,
        border-color .25s ease,
        box-shadow .35s ease;
}

/* Üst çizgi — streak rengine direkt boyanır (renk PHP'de zaten interpole edildi) */
.profile-stat-tile--streak::before {
    background: linear-gradient(
        90deg,
        var(--streak-color) 0%,
        color-mix(in oklab, var(--streak-color), white 35%) 100%
    );
    height: calc(3px + var(--streak-heat) * 1.5px);
    box-shadow: 0 0 calc(var(--streak-heat) * 12px) calc(var(--streak-heat) * 1.5px) var(--streak-color);
    transition: background .35s ease, box-shadow .35s ease, height .25s ease;
}

/* Kutucuğun altından yayılan glow — heat ile büyür, düşük heat'te bile görünür */
.profile-stat-tile--streak.is-heated {
    box-shadow:
        0 calc(2px + var(--streak-heat) * 6px) calc(8px + var(--streak-heat) * 26px) calc(var(--streak-heat) * 3px)
            color-mix(in oklab, transparent, var(--streak-color) calc(35% + var(--streak-heat) * 50%)),
        0 0 calc(var(--streak-heat) * 40px) calc(var(--streak-heat) * 6px)
            color-mix(in oklab, transparent, var(--streak-color) calc(20% + var(--streak-heat) * 45%));
    border-color: color-mix(in oklab, #e6ebf5, var(--streak-color) calc(40% + var(--streak-heat) * 50%));
}

.profile-stat-tile--streak.is-heated:hover {
    transform: translateY(-1px);
    box-shadow:
        0 calc(4px + var(--streak-heat) * 6px) calc(14px + var(--streak-heat) * 28px) calc(var(--streak-heat) * 4px)
            color-mix(in oklab, transparent, var(--streak-color) calc(55% + var(--streak-heat) * 35%)),
        0 0 calc(8px + var(--streak-heat) * 44px) calc(var(--streak-heat) * 7px)
            color-mix(in oklab, transparent, var(--streak-color) calc(30% + var(--streak-heat) * 50%));
}

/* Sol alev iconunun arkası — saturated streak-color tint */
.profile-stat-tile--streak .profile-stat-tile__icon {
    background: linear-gradient(
        135deg,
        color-mix(in oklab, var(--streak-color) 14%, white) 0%,
        color-mix(in oklab, var(--streak-color) 24%, white) 100%
    );
    color: var(--streak-color);
    transition: background .35s ease, color .35s ease;
}

/* Alev iconu kendisi — yüksek heat'te hafif drop-shadow */
.profile-stat-tile--streak .profile-stat-tile__flame {
    display: inline-block;
    transform-origin: 50% 100%;
    filter: drop-shadow(0 0 calc(var(--streak-heat) * 4px) var(--streak-color));
    transition: filter .35s ease;
}

/* 50+ gün → alev hafif zıplar/oynar (çok değil, sadece görülür) */
.profile-stat-tile--streak.is-burning .profile-stat-tile__flame {
    animation: streak-flame-flicker 1.6s ease-in-out infinite;
}

/* 100+ gün → tam ateş: daha belirgin hareket + güçlü glow */
.profile-stat-tile--streak.is-inferno .profile-stat-tile__flame {
    animation: streak-flame-blaze 1.05s ease-in-out infinite;
    filter: drop-shadow(0 0 6px var(--streak-color)) drop-shadow(0 0 12px var(--streak-color));
}

.profile-stat-tile--streak.is-inferno .profile-stat-tile__icon {
    animation: streak-icon-pulse 2.4s ease-in-out infinite;
}

@keyframes streak-flame-flicker {
    0%, 100% { transform: translateY(0)     scale(1); }
    25%      { transform: translateY(-1.5px) scale(1.05); }
    50%      { transform: translateY(0)     scale(0.98); }
    75%      { transform: translateY(-1px)  scale(1.03); }
}

@keyframes streak-flame-blaze {
    0%, 100% { transform: translateY(0)    scale(1); }
    30%      { transform: translateY(-2.5px) scale(1.10) rotate(-2deg); }
    60%      { transform: translateY(-1px) scale(1.06) rotate(2deg); }
}

@keyframes streak-icon-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, transparent, var(--streak-color) 55%); }
    50%      { box-shadow: 0 0 14px 2px color-mix(in oklab, transparent, var(--streak-color) 70%); }
}

/* Reduced motion: animasyonları kapat ama renk/glow korunsun */
@media (prefers-reduced-motion: reduce) {
    .profile-stat-tile--streak.is-burning .profile-stat-tile__flame,
    .profile-stat-tile--streak.is-inferno .profile-stat-tile__flame,
    .profile-stat-tile--streak.is-inferno .profile-stat-tile__icon {
        animation: none;
    }
}

/* Dark mode — icon bg'si streak-color'un saydam katmanı, color biraz açılmış streak-color */
body.dark-mode .profile-stat-tile--streak .profile-stat-tile__icon {
    background: linear-gradient(
        135deg,
        color-mix(in oklab, var(--streak-color) 14%, transparent) 0%,
        color-mix(in oklab, var(--streak-color) 24%, transparent) 100%
    );
    color: color-mix(in oklab, var(--streak-color), white 22%);
}
body.dark-mode .profile-stat-tile--streak.is-heated {
    border-color: color-mix(in oklab, #2a3050, var(--streak-color) calc(40% + var(--streak-heat) * 50%));
}

/* ==== "Kaldigin Yerden Devam Et" slider — × dismiss + progress bar ==== */
.resume-card { position: relative; }
.resume-card .resume-dismiss {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    padding: 0;
    line-height: 1;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    z-index: 5;
    opacity: 0;
    transition: opacity .15s ease, background .15s ease;
}
.resume-card:hover .resume-dismiss { opacity: 1; }
.resume-card .resume-dismiss:hover { background: #c62828; }
.resume-card .resume-dismiss:focus-visible {
    opacity: 1;
    outline: 2px solid #4a90e2;
    outline-offset: 1px;
}
.resume-card .resume-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 32px; /* film-name yuksekligi (~28-30px) ustunde */
    height: 3px;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
    overflow: hidden;
}
body.dark-mode .resume-card .resume-progress { background: rgba(255, 255, 255, 0.18); }
.resume-card .resume-progress-bar {
    height: 100%;
    background: #e50914;
    transition: width .3s ease;
}

/* ============================================================
   /ara/kullanicilar/ - Kullanici arama grid
   ============================================================ */
.users-search-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid #eef0f4;
    background: #fafbfc;
}
.users-search-input {
    flex: 1 1 260px;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #d8dde6;
    border-radius: 6px;
    font: 14px inherit;
    background: #fff;
}
.users-search-input:focus { outline: none; border-color: #2c83fb; }
.users-search-btn {
    height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 6px;
    background: #2c83fb;
    color: #fff;
    font: 600 13px inherit;
    cursor: pointer;
}
.users-search-btn:hover { background: #1c70e0; }
.users-search-tab {
    margin-left: auto;
    font: 600 12px inherit;
    color: #2c83fb;
    text-decoration: none;
}
.users-search-tab:hover { text-decoration: underline; }

.users-empty {
    padding: 28px 20px;
    text-align: center;
    color: #888;
    font: 14px inherit;
}

.users-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    padding: 16px;
}
@media (max-width: 900px) { .users-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px) { .users-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .users-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 10px; } }

.user-card {
    display: block;
    text-decoration: none;
    color: inherit;
}
.user-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    background: #eef1f6;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.user-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}
.user-card:hover .user-card-thumb img { transform: scale(1.04); }

.user-card-since {
    position: absolute;
    left: 0;
    bottom: 8px;
    padding: 4px 10px 4px 8px;
    background: linear-gradient(90deg, #2c83fb 0%, #4a98ff 100%);
    color: #fff;
    font: 700 11px inherit;
    line-height: 1;
    border-radius: 0 4px 4px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
    letter-spacing: .2px;
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-card-dot {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    background: #6c757d;
}
.user-card-dot.online  { background: #28a745; }
.user-card-dot.offline { background: #d33; }

.user-card-name {
    margin-top: 8px;
    text-align: center;
    font: 600 13px inherit;
    color: #1f2330;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-card:hover .user-card-name { color: #2c83fb; }

body.dark-mode .users-search-form { background: #1a1c25; border-bottom-color: #2a2d3a; }
body.dark-mode .users-search-input { background: #22252f; border-color: #2f3340; color: #e6e8ef; }
body.dark-mode .user-card-name { color: #e6e8ef; }
body.dark-mode .user-card-thumb { background: #22252f; }

/* ============================================================
   DARK MODE — eksik kalan beyaz alanlar (2026-05-10)
   ============================================================ */

/* Logo altı tagline */
body.dark-mode #logo .logo-tagline { color: #6ea6e8; }

/* Card block (Takvim / Devam Eden Seriler / Sana Özel Öneriler / Kaldığın Yerden Devam Et) */
body.dark-mode .card-block { background: #23262f; border-color: #333; }
body.dark-mode .card-block-head { background: #23262f; border-bottom-color: #2a2d36; }
body.dark-mode .card-block-head h2 { color: #6ea6e8; }
body.dark-mode .card-block-more { background: #0d47a1; color: #fff; }
body.dark-mode .card-block-more:hover { background: #1665d8; color: #fff; }

/* Takvim — gün butonları + program satırı */
body.dark-mode .day-btn { background: #1f242c; border-color: #2c333d; }
body.dark-mode .day-btn .day-name { color: #8a93a3; }
body.dark-mode .day-btn .day-date { color: #d7dde6; }
body.dark-mode .day-btn:hover:not(.active) { border-color: #6ea6e8; }
body.dark-mode .day-btn.active { background: #0d47a1; border-color: #0d47a1; }
body.dark-mode .day-btn.active .day-name,
body.dark-mode .day-btn.active .day-date { color: #fff; }
body.dark-mode .schedule-row .saat { color: #8a93a3; }
body.dark-mode .schedule-row .anime-title:hover { color: #6ea6e8; }
body.dark-mode .schedule-row .ep-badge {
    background: #1f242c;
    border-color: #2c333d;
    color: #c0d8f5;
}
body.dark-mode .schedule-row .ep-badge:hover { background: #0d47a1; border-color: #0d47a1; color: #fff; }
body.dark-mode .schedule-row .ep-badge.ep-badge-released { background: #144b2a; border-color: #1e6a3c; color: #74c992; }
body.dark-mode .schedule-row .ep-badge.ep-badge-released:hover { background: #1e6a3c; border-color: #2a8a4f; color: #fff; }
body.dark-mode .schedule-row .ep-badge.ep-badge-pending { background: #2a2d36; border-color: #333; color: #8a93a3; }
body.dark-mode .schedule-empty { color: #8a93a3; }

/* Header dropdown menüleri (Türler / Kategoriler) */
body.dark-mode #menu > li > ul.sub {
    background: #23262f;
    border-top-color: #6ea6e8;
    box-shadow: 0 6px 20px rgba(0,0,0,0.55);
}
body.dark-mode #menu > li > ul.sub li a { color: #d7dde6; }
body.dark-mode #menu > li > ul.sub li a:hover { background: #1d2a3d; color: #6ea6e8; }

/* Gelişmiş Arama — kutucuk + pill + dropdown panel */
body.dark-mode .adv-box { background: #23262f; border-color: #333; }
body.dark-mode .adv-box-title { color: #6ea6e8; border-bottom-color: #2a2d36; }
body.dark-mode .adv-pill {
    background-color: #1f242c;
    border-color: #2c333d;
    color: #d7dde6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23aab3c2' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.dark-mode .adv-pill:hover {
    background-color: #2a3344;
    border-color: #3a4458;
    color: #fff;
}
body.dark-mode .adv-pill option { background: #23262f; color: #d7dde6; }
body.dark-mode .adv-pill-input::placeholder { color: #6f7886; }
body.dark-mode .adv-dd-btn .adv-dd-label { color: #e0e3eb; }
body.dark-mode .adv-dd-btn .adv-dd-value { color: #8a93a3; }
body.dark-mode .adv-dd.is-open .adv-dd-btn { background-color: #2a3344; border-color: #6ea6e8; }
body.dark-mode .adv-dd-panel {
    background: #23262f;
    border-color: #333;
    box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4);
}
body.dark-mode .adv-dd-opt { color: #d7dde6; }
body.dark-mode .adv-dd-opt:hover { background: #1d2a3d; color: #6ea6e8; }
body.dark-mode .adv-dd-check { background: #1f242c; border-color: #3a4458; }
body.dark-mode .adv-dd-opt input:checked + .adv-dd-check { background: #0d47a1; border-color: #0d47a1; }
body.dark-mode .adv-dd-empty { color: #6f7886; }

/* Maskot bubble (yan panel — beyaz kalıyordu) */
body.dark-mode .aside-maskot-bubble { background: #23262f; border-color: #6ea6e8; color: #d7dde6; }
body.dark-mode .aside-maskot-bubble strong { color: #6ea6e8; }

/* Listing / Arşiv / Kategori-Tür liste sayfası — beyaz kart */
body.dark-mode .listing-shell { background: #23262f; }
body.dark-mode .listing-head { border-bottom-color: #2a2d36; }
body.dark-mode .listing-head-title { color: #6ea6e8; border-bottom-color: #6ea6e8; }
body.dark-mode .alpha-nav { background: #1f242c; border-color: #2c333d; }
body.dark-mode .alpha-nav-item { background: #23262f; border-color: #2c333d; color: #d7dde6; }
body.dark-mode .alpha-nav-item:hover,
body.dark-mode .alpha-nav-item.is-active { background: #0d47a1; border-color: #0d47a1; color: #fff; }
body.dark-mode .listing-pager .lp-btn { background: #1f242c; border-color: #2c333d; color: #d7dde6; }
body.dark-mode .listing-pager .lp-btn:hover { background: #0d47a1; border-color: #0d47a1; color: #fff; }
body.dark-mode .listing-pager .lp-btn.is-disabled,
body.dark-mode .listing-pager .lp-btn.is-disabled:hover {
    background: #1f242c; border-color: #2c333d; color: #6f7886;
}
body.dark-mode .listing-pager .lp-jump { color: #a0a6b2; }
body.dark-mode .listing-pager .lp-jump-label { color: #d7dde6; }
body.dark-mode .listing-pager .lp-jump-total { color: #8a93a3; }
body.dark-mode .listing-pager .lp-jump-select {
    background-color: #1f242c;
    border-color: #2c333d;
    color: #6ea6e8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236ea6e8' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.dark-mode .listing-pager .lp-jump-select:hover { border-color: #6ea6e8; }
body.dark-mode .listing-pager .lp-jump-select option { background: #23262f; color: #d7dde6; }
body.dark-mode .adv-box--horizontal { background: #23262f; }

/* Profil yorum kart bağlamı (boş zemin → koyu fark gözüksün) */
body.dark-mode .profile-comments-card .cz-c-card { background: transparent; }