/* Han Ekonomi v2.4 - Guaranteed same-size images (crop or upscale), transparent under image */
/* Tokens */
.han-eko {
  --han-bg: #ffffff;
  --han-surface: #f5f7fb;
  --han-text: #0f172a;
  --han-muted: #64748b;
  --han-accent: #2563eb;
  --han-border: #e5e7eb;
  --han-space-between: 3rem;
  --han-radius: 14px;
  --han-thumb-h: 260px;      /* list card fixed height */
  --han-hero-thumb-h: 360px; /* hero fixed height */
}
html[data-theme="dark"] .han-eko,
body[data-theme="dark"] .han-eko,
.dark .han-eko {
  --han-bg: #0b1220;
  --han-surface: #0f1a2b;
  --han-text: #e5e7eb;
  --han-muted: #94a3b8;
  --han-accent: var(--han-accent, #60a5fa);
  --han-border: #1f2937;
}
.han-eko{background:transparent!important;color:var(--han-text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji'}
.han-eko a{text-decoration:none;color:inherit}
.han-row{display:grid;gap:1.25rem}

/* Kur widget */
.han-kur-wrap{margin-bottom:1rem}
.glob-kur-container{width:100%;display:flex;flex-wrap:wrap;gap:.5rem;padding:.25rem;justify-content:flex-start;box-sizing:border-box}
.glob-kur-container .kur-box{display:inline-flex;align-items:center;background:var(--han-bg);color:var(--han-text);padding:10px 14px;border-radius:12px;font-size:15px;border:1px solid var(--han-border);box-shadow:0 2px 6px rgba(0,0,0,.06);flex-shrink:0;line-height:1.35}
.glob-kur-container .kur-box .icon{margin-right:6px;font-size:18px}
.glob-kur-container .kur-box.up .change{color:#16a34a}.glob-kur-container .kur-box.down .change{color:#dc2626}
@media(max-width:768px){.glob-kur-container{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}.glob-kur-container::-webkit-scrollbar{display:none}.glob-kur-container .kur-box{font-size:13px;padding:8px 10px;margin-right:8px}}

/* Section 1 */
.han-s1{grid-template-columns:2fr 1fr;align-items:start;margin-bottom:var(--han-space-between)}
.han-col{min-width:0}

/* Cards */
.han-card{background:var(--han-bg);border-radius:var(--han-radius);overflow:hidden;border:1px solid var(--han-border);display:flex;flex-direction:column}
.han-cell{display:flex}.han-cell .han-card{height:100%}

/* THUMB: strict fill — no color behind, crop if needed, upscale if needed */
.han-thumb{position:relative;height:var(--han-thumb-h);background:transparent!important;overflow:hidden;flex:0 0 var(--han-thumb-h)}
.han-card-hero .han-thumb{height:var(--han-hero-thumb-h);flex-basis:var(--han-hero-thumb-h)}
.han-thumb img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;object-position:center center;display:block}

/* Meta line normalized */
.han-card .han-meta{display:flex;gap:.6rem;padding:.9rem 1rem .35rem;align-items:center;flex-wrap:wrap;min-height:42px}
.han-time{font-size:.82rem;color:var(--han-muted)}
.han-cat{display:inline-flex;align-items:center;padding:.3rem .6rem;border-radius:999px;font-size:.78rem;background:var(--han-surface);color:var(--han-accent);border:1px solid var(--han-border);font-weight:600}

/* Titles: clamp to 2 lines */
.han-card .han-title{padding:.6rem 1rem 1.1rem;margin:0;line-height:1.3;letter-spacing:-.01em}
.han-card .han-title a{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;line-clamp:2}

/* Most read */
.han-sidebar-title{margin:0 0 .75rem;font-weight:700;font-size:1rem;color:var(--han-muted)}
.han-mostread-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}
.han-most-item{display:grid;grid-template-columns:32px 1fr 84px;gap:.6rem;align-items:center;padding:.6rem;border-radius:10px;border:1px solid var(--han-border);background:var(--han-bg)}
.han-index{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--han-surface);color:var(--han-accent);font-weight:700}
.han-most-title{font-weight:600;line-height:1.25}
.han-most-thumb img{width:84px;height:56px;object-fit:cover;border-radius:8px;display:block}

/* Section 2 grid */
.han-s2{grid-template-columns:repeat(3,1fr)}

/* Hover */
.han-card a:hover .han-title,.han-most-link:hover .han-most-title{color:var(--han-accent)}
.han-thumb:hover{filter:brightness(.98)}

/* Pagination + LoadMore */
.han-pagination{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap}
.han-page{padding:.5rem .75rem;border:1px solid var(--han-border);border-radius:8px}
.han-page.is-active{background:var(--han-accent);color:#fff;border-color:transparent}
.han-loadmore-wrap{display:grid;place-items:center;margin-top:1rem}
.han-loadmore{padding:.65rem 1rem;border-radius:10px;border:1px solid var(--han-border);background:var(--han-surface);cursor:pointer}
.han-spinner{width:28px;height:28px;border:3px solid var(--han-border);border-top-color:var(--han-accent);border-radius:50%;animation:hanSpin 1s linear infinite}
@keyframes hanSpin{to{transform:rotate(360deg)}}

/* Responsive fixed heights */
@media(max-width:1280px){
  .han-s1{grid-template-columns:1fr}
  .han-eko{--han-thumb-h:240px;--han-hero-thumb-h:320px}
  .han-s2{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .han-eko{--han-thumb-h:200px;--han-hero-thumb-h:240px}
  .han-s2{grid-template-columns:1fr}
  .han-most-item{grid-template-columns:28px 1fr 64px}
}

/* v2.5: Fixed card height for symmetry regardless of title length */
.han-eko { --han-card-h: 420px; } /* list cards total height */
.han-card { height: var(--han-card-h) !important; }
.han-card .han-title a { word-break: break-word; overflow-wrap: anywhere; }
/* Ensure nothing exceeds the fixed height */
.han-card { overflow: hidden; }
/* Optional: if you want less height on smaller screens, tweak via media */
@media(max-width:640px){
  .han-eko{ --han-card-h: 380px; }
}

/* v2.6: Dark mode section must be fully transparent */
html[data-theme="dark"] .han-eko,
body[data-theme="dark"] .han-eko,
.dark .han-eko { background: transparent !important; box-shadow: none !important; }
.han-eko::before, .han-eko::after { background: transparent !important; box-shadow: none !important; }
.han-row, .han-kur-wrap { background: transparent !important; }



/* === v2.6.1 Hotfix: card title readability & equal-width grid === */

/* Fix: Hero (big) card title looked "overlapped" (tight tracking).
   Normalize spacing and line-height specifically for hero. */
.han-card-hero .han-title { letter-spacing: 0 !important; line-height: 1.25 !important; }
.han-card-hero .han-title a { -webkit-line-clamp: 3; line-clamp: 3; } /* allow one more line */

/* Slightly more breathing room under meta */
.han-card .han-title { padding: .7rem 1rem 1.2rem !important; }

/* Fix: Section 2 cards having inconsistent widths.
   Use minmax(0,1fr) to prevent long words from expanding the column. */
.han-row.han-s2 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 1024px) {
  .han-row.han-s2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  .han-row.han-s2 { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Ensure grid items cannot force column growth */
.han-s2 > .han-col,
.han-s2 > .han-cell { min-width: 0 !important; }

/* Ensure card fills its grid cell width cleanly */
.han-s2 .han-card { width: 100% !important; box-sizing: border-box; }

/* End of v2.6.1 Hotfix */



/* === v2.6.2 Hotfix: Show full hero title (no truncation) === */
.han-card-hero { height: auto !important; } /* hero card can grow */

.han-card-hero .han-title { letter-spacing: 0 !important; line-height: 1.25 !important; }

.han-card-hero .han-title a{
  display: block !important;              /* disable -webkit-box */
  -webkit-line-clamp: unset !important;   /* remove clamp */
  line-clamp: unset !important;
  overflow: visible !important;           /* show full text */
  text-overflow: initial !important;      /* remove ellipsis */
  white-space: normal !important;         /* wrap text normally */
}
/* === End v2.6.2 === */