:root {
--kf-espresso: #241209;
--kf-espresso-2: #351b0e;
--kf-coffee: #4a2815;
--kf-gold: #d9a64d;
--kf-gold-light: #f4d38b;
--kf-cream: #fff5e5;
--kf-paper: #f8eedc;
--kf-ink: #2c180d;
--kf-muted: #72543c;
--kf-font-serif: Georgia, "Playfair Display", "Times New Roman", serif;
--kf-font-sans: Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
*, *::before, *::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body.kf-page {
margin: 0;
padding: 0;
background-color: var(--kf-espresso);
color: var(--kf-ink);
font-family: var(--kf-font-serif);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
.kf-page a {
color: inherit;
text-decoration: none;
}
.kf-shell {
width: min(1180px, calc(100% - 36px));
margin-inline: auto;
} .kf-header {
background: linear-gradient(180deg, #170b05, #2b160b);
color: var(--kf-cream);
border-bottom: 1px solid rgba(217, 166, 77, 0.45);
}
.kf-nav {
min-height: 76px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.kf-brand {
display: flex;
align-items: center;
gap: 12px;
color: var(--kf-gold-light);
text-decoration: none;
}
.kf-brand-mark {
font-size: 34px;
line-height: 1;
}
.kf-brand-name {
font-size: 25px;
line-height: 1.1;
font-family: var(--kf-font-serif);
font-weight: 700;
color: var(--kf-gold-light);
}
.kf-brand-sub {
display: block;
font: 12px/1.4 var(--kf-font-sans);
color: #d8c3a2;
letter-spacing: 0.3px;
margin-top: 4px;
}
.kf-menu {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 25px;
font: 15px var(--kf-font-sans);
color: #f7e4c3;
}
.kf-menu a {
color: #f7e4c3;
text-decoration: none;
transition: color 0.2s ease;
}
.kf-menu a:hover {
color: var(--kf-gold-light);
}
.kf-menu ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 22px;
}
.kf-menu ul li a {
color: #f7e4c3;
text-decoration: none;
}
.kf-menu ul li a:hover {
color: var(--kf-gold-light);
} .kf-hero {
position: relative;
isolation: isolate;
overflow-x: clip;
overflow-y: visible;
color: var(--kf-cream);
text-align: center;
padding: 40px 18px 32px;
background:
radial-gradient(ellipse at 50% 0%, rgba(137, 78, 32, 0.32), transparent 55%),
radial-gradient(ellipse at 50% 100%, rgba(110, 57, 22, 0.22), transparent 55%),
linear-gradient(180deg, #2a150a, #1c0d06);
border-bottom: 1px solid rgba(217, 166, 77, 0.45);
}
.kf-hero::before, .kf-hero::after {
content: "";
position: absolute;
z-index: -1;
pointer-events: none;
background-repeat: no-repeat;
background-size: contain;
opacity: 0.78;
}
.kf-hero::before {
left: max(-35px, calc((100vw - 1180px)/2 - 25px));
bottom: 0;
width: 300px;
height: 245px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20320%20260%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23d9a64d%27%20stroke-width%3D%272%27%20opacity%3D%27.85%27%3E%3Cpath%20d%3D%27M0%20190%20Q55%20130%20110%20190%20T220%20190%20T330%20190%27%20opacity%3D%27.35%27%2F%3E%3Cpath%20d%3D%27M20%20205%20Q70%20160%20130%20205%20T250%20205%27%20opacity%3D%27.25%27%2F%3E%3Cpath%20d%3D%27M130%2035%20A68%2068%200%201%200%20198%20125%20A53%2053%200%201%201%20130%2035%27%20fill%3D%27%23d9a64d%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M232%2070%20l5%2012%2012%205%20-12%205%20-5%2012%20-5%20-12%20-12%20-5%2012%20-5z%27%20fill%3D%27%23d9a64d%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M80%20105%20l3%208%208%203%20-8%203%20-3%208%20-3%20-8%20-8%20-3%208%20-3z%27%20fill%3D%27%23d9a64d%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2745%27%20cy%3D%2770%27%20r%3D%272%27%20fill%3D%27%23f4d38b%27%2F%3E%3Ccircle%20cx%3D%27250%27%20cy%3D%27145%27%20r%3D%272%27%20fill%3D%27%23f4d38b%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.kf-hero::after {
right: max(-25px, calc((100vw - 1180px)/2 - 15px));
top: 2px;
width: 290px;
height: 255px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20320%20280%27%3E%3Cg%20stroke%3D%27%23d9a64d%27%20fill%3D%27none%27%20stroke-width%3D%272%27%20opacity%3D%27.72%27%3E%3Ccircle%20cx%3D%27160%27%20cy%3D%27115%27%20r%3D%2752%27%2F%3E%3Ccircle%20cx%3D%27160%27%20cy%3D%27115%27%20r%3D%2742%27%20stroke-width%3D%271%27%2F%3E%3Cpath%20d%3D%27M160%208v40%20M160%20182v42%20M53%20115h40%20M227%20115h40%20M84%2039l28%2028%20M208%20163l28%2028%20M236%2039l-28%2028%20M112%20163l-28%2028%20M160%200l-7%2025%20M160%200l7%2025%20M20%20115l25%20-7%20M20%20115l25%207%20M300%20115l-25%20-7%20M300%20115l-25%207%27%2F%3E%3Cpath%20d%3D%27M145%20111q15%20-12%2030%200%20M148%20135q12%209%2024%200%27%20stroke-width%3D%272%27%2F%3E%3Cpath%20d%3D%27M153%20122q7%20-6%2014%200%27%20stroke-width%3D%271.5%27%2F%3E%3Cpath%20d%3D%27M0%20225%20Q55%20175%20110%20225%20T220%20225%20T330%20225%27%20opacity%3D%27.35%27%2F%3E%3Cpath%20d%3D%27M10%20242%20Q65%20195%20130%20242%20T260%20242%27%20opacity%3D%27.25%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.kf-hero .kf-shell {
position: relative;
z-index: 1;
}
.kf-hero h1 {
font-size: clamp(30px, 4vw, 48px);
line-height: 1.15;
margin: 0 0 8px;
color: #f7e7c8;
font-weight: 600;
font-family: var(--kf-font-serif);
}
.kf-hero p {
margin: 0 0 20px;
color: #e8d2ad;
font: 16px var(--kf-font-sans);
} .kf-search {
display: flex;
width: 100%;
margin: 0;
padding: 5px;
border: 1px solid var(--kf-gold);
border-radius: 40px;
background: #160a05;
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.kf-search input {
min-width: 0;
flex: 1;
border: 0;
outline: 0;
color: #fff2d9;
background: transparent;
padding: 11px 18px;
font-size: 15px;
font-family: var(--kf-font-sans);
}
.kf-search input::placeholder {
color: #c4aa84;
}
.kf-search button {
border: 0;
border-radius: 50%;
width: 42px;
height: 42px;
background: linear-gradient(135deg, #f8d88e, #c78b35);
color: #321909;
font-size: 19px;
cursor: pointer;
display: grid;
place-items: center;
transition: transform 0.2s ease, filter 0.2s ease;
}
.kf-search button:hover {
transform: scale(1.05);
filter: brightness(1.1);
} .kf-search-wrap {
position: relative;
z-index: 250;
}
.kf-autocomplete-dropdown {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
background: #190a04;
border: 1px solid var(--kf-gold);
border-radius: 16px;
box-shadow: 0 16px 36px rgba(0,0,0,0.85);
z-index: 1000;
max-height: 380px;
overflow-y: auto;
overscroll-behavior: contain;
text-align: left;
}
.kf-autocomplete-dropdown::-webkit-scrollbar {
width: 6px;
}
.kf-autocomplete-dropdown::-webkit-scrollbar-thumb {
background: rgba(217, 166, 77, 0.45);
border-radius: 4px;
}
.kf-autocomplete-dropdown.open {
display: block;
}
.kf-ac-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 18px;
color: #f7e7c8;
border-bottom: 1px solid rgba(217,166,77,0.15);
font: 14px var(--kf-font-sans);
text-decoration: none;
transition: background 0.15s ease;
}
.kf-ac-item:last-child {
border-bottom: none;
}
.kf-ac-item:hover {
background: rgba(217,166,77,0.15);
color: var(--kf-gold-light);
}
.kf-ac-badge {
font-size: 12px;
color: var(--kf-gold);
} .kf-categories {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin-top: 24px;
}
.kf-category {
min-width: 68px;
color: #f4dfb8;
font: 13px var(--kf-font-sans);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-decoration: none;
transition: transform 0.2s ease, color 0.2s ease;
}
.kf-category-icon {
width: 48px;
height: 48px;
border: 1px solid var(--kf-gold);
border-radius: 50%;
display: grid;
place-items: center;
color: var(--kf-gold-light);
background: rgba(255, 255, 255, 0.035);
transition: all 0.2s ease;
}
.kf-category:hover {
transform: translateY(-2px);
color: var(--kf-gold-light);
}
.kf-category:hover .kf-category-icon {
background: rgba(217, 166, 77, 0.2);
box-shadow: 0 0 18px rgba(217, 166, 77, 0.35);
border-color: var(--kf-gold-light);
} .kf-main {
padding: 34px 0 55px;
background: linear-gradient(180deg, #29150a, #1d0e07);
}
.kf-article-wrap {
width: 100%;
}
.kf-article {
width: min(100%, 1020px);
margin: 0 auto;
padding: clamp(24px, 4vw, 46px);
border: 1px solid #d6a85e;
border-radius: 22px;
background: linear-gradient(145deg, #fff8ec, #f4e5cd);
box-shadow: 0 18px 55px rgba(0, 0, 0, 0.28);
color: var(--kf-ink);
}
.kf-breadcrumb {
font: 13px var(--kf-font-sans);
color: #806044;
margin-bottom: 18px;
}
.kf-breadcrumb a {
color: #806044;
text-decoration: none;
transition: color 0.15s ease;
}
.kf-breadcrumb a:hover {
color: #b47a2c;
}
.kf-breadcrumb span {
color: #b47a2c;
padding: 0 7px;
}
.kf-article-title {
font-size: clamp(28px, 3.5vw, 40px);
line-height: 1.25;
color: #321b0d;
margin: 0 0 10px;
font-family: var(--kf-font-serif);
font-weight: 700;
}
.kf-article-meta {
display: flex;
gap: 16px;
font: 13px var(--kf-font-sans);
color: var(--kf-muted);
margin-bottom: 22px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(214, 168, 94, 0.3);
}
.kf-lead {
font: 17px/1.65 var(--kf-font-sans);
color: #442b19;
margin: 0 0 24px;
} .kf-featured-image-box {
width: 100%;
border-radius: 18px;
border: 1px solid #d6a85e;
overflow: hidden;
box-shadow: 0 12px 32px rgba(50, 25, 10, 0.22);
margin: 20px 0 26px;
background: #2a150b;
}
.kf-featured-image-box img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
} .kf-instructions {
padding: 18px 22px;
margin: 22px 0;
border-radius: 15px;
background: #f4e2c4;
border: 1px solid #ead0a6;
}
.kf-instructions strong {
display: block;
margin-bottom: 8px;
color: #4a2a12;
}
.kf-steps {
list-style: none;
padding: 0;
margin: 0;
counter-reset: step;
font: 15px/1.8 var(--kf-font-sans);
}
.kf-steps li {
counter-increment: step;
display: flex;
gap: 10px;
align-items: flex-start;
margin-bottom: 6px;
}
.kf-steps li::before {
content: counter(step);
flex: 0 0 23px;
height: 23px;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff7e8;
background: #89521e;
font-size: 12px;
font-weight: bold;
margin-top: 2px;
} .kf-copy {
font: 16px/1.85 var(--kf-font-sans);
color: #49321f;
}
.kf-copy p {
margin: 0 0 18px;
}
.kf-copy h2, .kf-copy h3, .kf-copy h4 {
font-family: var(--kf-font-serif);
color: #3b2110;
margin: 28px 0 12px;
line-height: 1.3;
}
.kf-copy h2 { font-size: 26px; }
.kf-copy h3 { font-size: 22px; }
.kf-copy h4 { font-size: 18px; }
.kf-copy ul, .kf-copy ol {
padding-left: 24px;
margin: 0 0 18px;
}
.kf-copy li {
margin-bottom: 6px;
}
.kf-copy blockquote {
margin: 20px 0;
padding: 14px 20px;
border-left: 4px solid var(--kf-gold);
background: rgba(217, 166, 77, 0.12);
border-radius: 0 12px 12px 0;
font-style: italic;
color: #3d2413;
} .kf-section {
margin-top: 28px;
}
.kf-section h3 {
display: flex;
align-items: center;
gap: 12px;
font-size: 24px;
line-height: 1.25;
color: #3b2110;
margin: 0 0 12px;
font-family: var(--kf-font-serif);
}
.kf-section h3 span {
color: #a36b29;
font-size: 25px;
}
.kf-divider {
height: 1px;
margin: 32px 0 20px;
background: linear-gradient(90deg, transparent, #c89a55, transparent);
}
.kf-moonline {
text-align: center;
color: #a97736;
letter-spacing: 10px;
font-size: 20px;
margin-bottom: 24px;
} .kf-symbol-grid-mini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 16px;
}
.kf-mini-card {
display: block;
background: #fdf6ec;
border: 1px solid #d9b177;
border-radius: 14px;
overflow: hidden;
text-decoration: none;
box-shadow: 0 4px 14px rgba(60, 30, 10, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kf-mini-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 22px rgba(60, 30, 10, 0.16);
}
.kf-mini-thumb {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #2a150b;
}
.kf-mini-thumb::after {
content: "";
position: absolute;
inset: 5px;
border-radius: 6px;
border: 1.5px solid rgba(226, 184, 118, 0.7);
box-shadow: inset 0 0 12px rgba(18, 10, 5, 0.45);
pointer-events: none;
z-index: 2;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.kf-mini-card:hover .kf-mini-thumb::after {
border-color: rgba(245, 215, 160, 0.95);
box-shadow: inset 0 0 16px rgba(18, 10, 5, 0.3), 0 0 6px rgba(226, 184, 118, 0.4);
}
.kf-mini-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.kf-mini-card:hover .kf-mini-thumb img {
transform: scale(1.05);
}
.kf-mini-title {
padding: 10px 12px;
font: 14px/1.4 var(--kf-font-sans);
font-weight: 600;
color: #3b2110;
text-align: center;
} .kf-posts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 22px;
margin: 28px 0;
}
.kf-grid-card {
display: flex;
flex-direction: column;
background: #fff9ee;
border: 1px solid #d9b177;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(60, 30, 10, 0.09);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kf-grid-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(60, 30, 10, 0.18);
border-color: #b38038;
}
.kf-grid-card-thumb {
position: relative;
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #2a150b;
}
.kf-grid-card-thumb::after {
content: "";
position: absolute;
inset: 6px;
border-radius: 8px;
border: 1.5px solid rgba(226, 184, 118, 0.75);
box-shadow: inset 0 0 14px rgba(18, 10, 5, 0.45);
pointer-events: none;
z-index: 2;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.kf-grid-card:hover .kf-grid-card-thumb::after {
border-color: rgba(245, 215, 160, 0.95);
box-shadow: inset 0 0 18px rgba(18, 10, 5, 0.3), 0 0 8px rgba(226, 184, 118, 0.45);
}
.kf-grid-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.kf-grid-card:hover .kf-grid-card-thumb img {
transform: scale(1.04);
}
.kf-grid-card-body {
padding: 16px 18px 20px;
display: flex;
flex-direction: column;
flex: 1;
}
.kf-grid-card-title {
font-size: 19px;
line-height: 1.3;
margin: 0 0 8px;
font-family: var(--kf-font-serif);
}
.kf-grid-card-title a {
color: #321b0d;
text-decoration: none;
}
.kf-grid-card-title a:hover {
color: #b47a2c;
}
.kf-grid-card-excerpt {
font: 14px/1.6 var(--kf-font-sans);
color: #5c422f;
margin: 0 0 14px;
flex: 1;
}
.kf-grid-card-link {
font: 13px var(--kf-font-sans);
font-weight: bold;
color: #b47a2c;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
.kf-grid-card-link:hover {
color: #89521e;
} .pagination {
display: flex;
justify-content: center;
gap: 8px;
margin: 32px 0;
font-family: var(--kf-font-sans);
}
.pagination .page-numbers {
padding: 8px 14px;
border-radius: 8px;
border: 1px solid #d9b177;
background: #fff8ec;
color: #4a2815;
text-decoration: none;
font-size: 14px;
transition: all 0.15s ease;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
background: #89521e;
color: #fff7e8;
border-color: #89521e;
} .kf-az-pills {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
.kf-az-pill {
width: 32px;
height: 32px;
border-radius: 8px;
border: 1px solid #d9b177;
background: #fff8ec;
color: #4a2815;
display: grid;
place-items: center;
font: 13px var(--kf-font-sans);
font-weight: 600;
text-decoration: none;
transition: all 0.15s ease;
}
.kf-az-pill:hover {
background: #89521e;
color: #fff7e8;
border-color: #89521e;
} .kf-viral-share-bar {
background: #fdf5e8;
border: 1px solid #d9b177;
border-radius: 14px;
padding: 16px 20px;
margin: 24px 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.kf-viral-share-title {
font: 14px/1.4 var(--kf-font-sans);
font-weight: 600;
color: #4a2a12;
}
.kf-viral-btns {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.kf-share-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 20px;
font: 13px var(--kf-font-sans);
font-weight: 600;
text-decoration: none;
border: 0;
cursor: pointer;
transition: transform 0.15s ease, filter 0.15s ease;
}
.kf-share-pill:hover {
transform: translateY(-1px);
filter: brightness(1.08);
}
.kf-share-pill.whatsapp {
background: #25d366;
color: #ffffff;
}
.kf-share-pill.pinterest {
background: #e60023;
color: #ffffff;
}
.kf-share-pill.copy {
background: #4a2815;
color: #f7e7c8;
} .kf-comments-details {
margin-top: 28px;
border: 1px solid #d9b177;
border-radius: 14px;
background: #fff8ec;
overflow: hidden;
}
.kf-comments-summary {
padding: 14px 20px;
cursor: pointer;
font: 15px var(--kf-font-sans);
font-weight: 600;
color: #4a2a12;
background: #f7e6ca;
user-select: none;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
}
.kf-comments-summary::-webkit-details-marker {
display: none;
}
.kf-comments-summary::after {
content: "▼";
font-size: 11px;
color: #89521e;
transition: transform 0.2s ease;
}
.kf-comments-details[open] .kf-comments-summary::after {
transform: rotate(180deg);
}
.kf-comments-inner {
padding: 20px;
max-height: 500px;
overflow-y: auto;
}
.kf-comments-inner ol.commentlist {
list-style: none;
margin: 0;
padding: 0;
}
.kf-comments-inner li.comment {
border-bottom: 1px solid rgba(217, 166, 77, 0.2);
padding: 12px 0;
font: 14px/1.6 var(--kf-font-sans);
color: #49321f;
}
.kf-comments-inner .comment-author {
font-weight: bold;
color: #3b2110;
}
.kf-comments-inner .comment-meta {
font-size: 12px;
color: #806044;
} .kf-footer {
background: #170b05;
color: #d8c29f;
text-align: center;
padding: 36px 16px 42px;
font: 13px var(--kf-font-sans);
border-top: 1px solid rgba(217, 166, 77, 0.35);
}
.kf-footer a {
text-decoration: none;
transition: color 0.15s ease;
}
.kf-footer a:hover {
color: var(--kf-gold-light);
} @media (max-width: 760px) {
.kf-nav {
padding: 16px 0;
align-items: flex-start;
flex-direction: column;
gap: 14px;
}
.kf-menu {
gap: 12px 18px;
font-size: 13px;
}
.kf-hero {
padding: 30px 14px 25px;
}
.kf-hero::before {
left: -95px;
width: 220px;
height: 185px;
opacity: 0.48;
}
.kf-hero::after {
right: -105px;
width: 220px;
height: 190px;
opacity: 0.48;
}
.kf-categories {
gap: 13px 8px;
}
.kf-category {
min-width: 65px;
font-size: 12px;
}
.kf-category-icon {
width: 42px;
height: 42px;
}
.kf-main {
padding: 20px 0 35px;
}
.kf-shell {
width: min(100% - 22px, 1180px);
}
.kf-article {
border-radius: 16px;
padding: 20px 17px;
}
.kf-symbol-grid-mini {
grid-template-columns: 1fr;
}
.kf-posts-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 420px) {
.kf-brand-name {
font-size: 22px;
}
.kf-menu {
width: 100%;
}
} .innerContainer {
width: min(100%, 1020px);
margin: 0 auto;
}
.safirBox {
width: min(100%, 1020px);
margin: 0 auto 30px;
padding: clamp(24px, 4vw, 46px);
border: 1px solid #d6a85e;
border-radius: 22px;
background: linear-gradient(145deg, #fff8ec, #f4e5cd);
box-shadow: 0 18px 55px rgba(0, 0, 0, 0.28);
color: var(--kf-ink);
}
.pageHeading {
margin-bottom: 22px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(214, 168, 94, 0.3);
}
.pageHeading h1.title, .pageHeading h1 {
font-size: clamp(26px, 3.5vw, 38px);
line-height: 1.25;
color: #321b0d;
margin: 8px 0 0;
font-family: var(--kf-font-serif);
font-weight: 700;
}
#breadcrumb, .breadcrumb {
font: 13px var(--kf-font-sans);
color: #806044;
margin-bottom: 12px;
}
#breadcrumb a, .breadcrumb a {
color: #806044;
text-decoration: none;
}
#breadcrumb a:hover, .breadcrumb a:hover {
color: #b47a2c;
}
#singleContent.reading {
font: 16px/1.85 var(--kf-font-sans);
color: #49321f;
}
#singleContent.reading h2,
#singleContent.reading h3,
#singleContent.reading h4 {
font-family: var(--kf-font-serif);
color: #3b2110;
margin: 28px 0 12px;
}
#singleContent.reading p {
margin: 0 0 18px;
}
#singleContent.reading a {
color: #89521e;
text-decoration: underline;
font-weight: 600;
}
#singleContent.reading a:hover {
color: #b47a2c;
} .kf-toc-box {
background: #fdf6ec;
border: 1px solid #d9b177;
border-radius: 14px;
padding: 16px 22px;
margin: 24px 0;
}
.kf-toc-title {
font-family: var(--kf-font-serif);
font-size: 18px;
font-weight: bold;
color: #4a2815;
margin-bottom: 10px;
}
.kf-toc-list {
list-style: none;
padding: 0;
margin: 0;
font: 14px/1.8 var(--kf-font-sans);
}
.kf-toc-list a {
color: #5c422f;
text-decoration: none;
}
.kf-toc-list a:hover {
color: #b47a2c;
} .kf-ad-slot:empty,
.ads:empty,
ins.adsbygoogle[data-ad-status="unfilled"] {
display: none !important;
} .kf-logo-img {
width: 44px;
height: 44px;
object-fit: contain;
filter: drop-shadow(0 2px 8px rgba(217, 166, 77, 0.45));
} .kf-poster-card {
position: relative;
overflow: hidden;
border-radius: 20px;
margin: 0 0 24px;
background: #1B100A;
box-shadow: 0 16px 38px rgba(18, 11, 7, 0.25);
border: 1px solid rgba(226, 184, 118, 0.4);
}
.kf-poster-card img {
width: 100%;
height: auto;
max-height: 540px;
object-fit: cover;
display: block;
} .kf-poster-card::after {
content: "";
position: absolute;
inset: 12px;
border-radius: 14px;
border: 1.5px solid rgba(226, 184, 118, 0.75);
box-shadow: inset 0 0 28px rgba(18, 10, 5, 0.45);
pointer-events: none;
z-index: 4;
}
.kf-poster-content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 24px 28px 24px;
background: linear-gradient(to top, rgba(14, 8, 4, 0.95) 0%, rgba(14, 8, 4, 0.78) 35%, rgba(14, 8, 4, 0.15) 62%, transparent 100%);
z-index: 3;
}
.kf-poster-crumbs,
.kf-poster-crumbs #breadcrumb {
margin: 0 0 6px !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
font: 13px var(--kf-font-sans) !important;
color: rgba(226, 184, 118, 0.95) !important;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
}
.kf-poster-crumbs a {
color: #FFF9E6 !important;
text-decoration: none !important;
}
.kf-poster-crumbs span {
color: rgba(226, 184, 118, 0.9) !important;
padding: 0 6px;
}
.kf-poster-title {
color: #FFFFFF !important;
font-size: clamp(22px, 3.2vw, 32px) !important;
font-weight: 700 !important;
line-height: 1.25 !important;
margin: 0 0 8px !important;
font-family: var(--kf-font-serif) !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 4px 24px rgba(0, 0, 0, 0.85) !important;
}
.kf-poster-date {
font-size: 13px !important;
color: #E2B876 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
font-family: var(--kf-font-sans) !important;
}
@media (max-width: 768px) {
.kf-poster-card::after {
inset: 8px;
}
.kf-poster-content {
padding: 16px 18px 16px;
background: linear-gradient(to top, rgba(14, 8, 4, 0.96) 0%, rgba(14, 8, 4, 0.82) 48%, rgba(14, 8, 4, 0.2) 75%, transparent 100%);
}
.kf-poster-title {
font-size: 20px !important;
}
.kf-poster-card img {
max-height: 380px;
}
} .kf-faq-accordion {
margin: 24px 0 32px;
display: flex;
flex-direction: column;
gap: 12px;
}
.kf-faq-item {
background: #fdf7ec;
border: 1px solid #d9b177;
border-radius: 14px;
overflow: hidden;
transition: all 0.2s ease;
box-shadow: 0 4px 14px rgba(60, 30, 10, 0.06);
}
.kf-faq-item[open] {
background: #fff9ee;
border-color: #b47a2c;
box-shadow: 0 8px 22px rgba(60, 30, 10, 0.12);
}
.kf-faq-question {
padding: 16px 20px;
cursor: pointer;
font: 16px/1.45 var(--kf-font-serif);
font-weight: 700;
color: #3b2110;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
list-style: none;
user-select: none;
}
.kf-faq-question::-webkit-details-marker {
display: none;
}
.kf-faq-arrow {
color: #b47a2c;
font-size: 13px;
transition: transform 0.2s ease;
flex-shrink: 0;
}
.kf-faq-item[open] .kf-faq-arrow {
transform: rotate(180deg);
}
.kf-faq-answer {
padding: 0 20px 18px;
font: 15px/1.8 var(--kf-font-sans);
color: #49321f;
border-top: 1px solid rgba(217, 166, 77, 0.2);
margin-top: 4px;
padding-top: 14px;
}
.kf-faq-answer p {
margin: 0;
} .kf-footer {
background: #170b05;
color: #d8c29f;
padding: 46px 16px 36px;
font: 14px/1.65 var(--kf-font-sans);
border-top: 1px solid rgba(217, 166, 77, 0.35);
text-align: left;
}
.kf-footer .innerContainer,
.kf-footer .kf-shell {
width: min(100%, 1020px);
margin: 0 auto;
}
.kf-footer-grid {
display: grid;
grid-template-columns: 1.6fr 1.1fr 1.1fr;
gap: 36px;
margin-bottom: 32px;
}
.kf-footer h4 {
font-family: var(--kf-font-serif);
color: var(--kf-gold-light);
font-size: 19px;
font-weight: 700;
margin: 0 0 14px;
}
.kf-footer p {
color: #c9b090;
line-height: 1.7;
}
.kf-footer ul {
list-style: none;
padding: 0;
margin: 0;
}
.kf-footer ul li {
margin-bottom: 10px;
}
.kf-footer a {
color: #d8c29f;
text-decoration: none;
transition: color 0.15s ease;
}
.kf-footer a:hover {
color: var(--kf-gold-light);
} .kf-mobile-tabbar {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: rgba(23, 11, 5, 0.96);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top: 1px solid rgba(217, 166, 77, 0.35);
z-index: 999;
justify-content: space-around;
align-items: center;
}
.kf-mobile-tabbar a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #d8c29f;
font-size: 11px;
text-decoration: none;
gap: 3px;
flex: 1;
}
.kf-mobile-tabbar a.active,
.kf-mobile-tabbar a:hover {
color: var(--kf-gold-light);
}
.kf-mobile-tabbar .tab-icon {
font-size: 18px;
}
@media (max-width: 768px) {
.kf-footer-grid {
grid-template-columns: 1fr;
gap: 24px;
text-align: center;
}
.kf-footer h4 {
justify-content: center;
}
.kf-mobile-tabbar {
display: flex;
}
body.kf-page {
padding-bottom: 60px; }
} .kf-header {
background: linear-gradient(180deg, #180c05 0%, #1f0f07 100%) !important;
border-bottom: 1px solid rgba(217, 166, 77, 0.35) !important;
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(8px);
}
.kf-nav {
min-height: 74px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.kf-brand {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.kf-brand-name {
font-size: 23px;
line-height: 1.1;
font-family: var(--kf-font-serif);
font-weight: 700;
color: #fff9ee;
letter-spacing: 0.02em;
}
.kf-brand-sub {
display: block;
font: 11.5px/1.4 var(--kf-font-sans);
color: #d4a359;
letter-spacing: 0.3px;
margin-top: 3px;
}
.kf-menu ul,
.kf-menu ul.kf-nav-links {
display: flex;
align-items: center;
gap: 28px;
list-style: none;
margin: 0;
padding: 0;
}
.kf-menu a {
display: inline-flex;
align-items: center;
gap: 8px;
color: #eedcc0 !important;
font-size: 14.5px;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
}
.kf-menu a:hover {
color: #ffffff !important;
}
.kf-menu .kf-nav-ic {
color: #e2b876;
font-size: 16px;
filter: drop-shadow(0 1px 4px rgba(226, 184, 118, 0.45));
}
@media (max-width: 860px) {
.kf-menu ul,
.kf-menu ul.kf-nav-links {
gap: 16px;
flex-wrap: wrap;
}
.kf-menu a {
font-size: 13.5px;
}
} .kf-poster-date,
.kf-article-meta {
display: none !important;
}
.kf-fali-yorum-page {
max-width: 820px;
margin: 0 auto;
padding: 10px 0 30px;
}
.kf-fali-crumbs {
font-size: 13px;
color: #a89078;
margin-bottom: 22px;
}
.kf-fali-crumbs a {
color: #d8c29f;
text-decoration: none;
transition: color 0.2s ease;
}
.kf-fali-crumbs a:hover {
color: #ffffff;
}
.kf-crumb-sep {
margin: 0 7px;
opacity: 0.6;
}
.kf-crumb-current {
color: #e2b876;
}
.kf-fali-header {
text-align: center;
margin-bottom: 26px;
}
.kf-fali-cup-icon {
margin-bottom: 10px;
display: inline-block;
filter: drop-shadow(0 2px 8px rgba(226, 184, 118, 0.4));
}
.kf-fali-page-title {
font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
font-size: 32px;
font-weight: 700;
color: #f3e7d3;
margin: 0 0 10px;
letter-spacing: 0.02em;
}
.kf-fali-moon-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
color: #e2b876;
font-size: 14px;
letter-spacing: 0.1em;
}
.kf-fali-moon-divider .kf-mline {
display: inline-block;
width: 50px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(226, 184, 118, 0.6), transparent);
}
.kf-fali-intro-wrap {
display: flex;
align-items: center;
gap: 22px;
margin-bottom: 28px;
background: linear-gradient(135deg, rgba(46, 24, 13, 0.88) 0%, rgba(28, 14, 7, 0.94) 60%, rgba(18, 9, 4, 0.98) 100%);
border: 1px solid rgba(226, 184, 118, 0.35);
border-radius: 18px;
padding: 20px 24px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 230, 180, 0.16);
}
.kf-fali-intro-card {
flex: 1;
}
.kf-fali-intro-card p {
margin: 0;
font-size: 14.5px;
line-height: 1.65;
color: #eedcc0;
}
.kf-fali-intro-cup {
flex-shrink: 0;
width: 170px;
height: 140px;
border-radius: 14px;
overflow: hidden;
border: 1.5px solid rgba(226, 184, 118, 0.55);
box-shadow: 0 4px 18px rgba(0,0,0,0.5);
background: #180c05;
}
.kf-fali-intro-cup img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 640px) {
.kf-fali-intro-wrap {
flex-direction: column-reverse;
text-align: center;
padding: 16px;
}
.kf-fali-intro-cup {
width: 100%;
max-width: 200px;
height: 140px;
margin: 0 auto;
}
}
.kf-fali-symbols-list {
display: flex;
flex-direction: column;
gap: 18px;
margin-bottom: 24px;
} .kf-fali-card {
display: flex;
align-items: center;
gap: 22px;
background: linear-gradient(135deg, #2e170c 0%, #1d0e06 50%, #120803 100%);
border: 1.5px solid rgba(226, 184, 118, 0.35);
border-radius: 18px;
padding: 18px 22px;
box-shadow: 
0 10px 30px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255, 230, 180, 0.16),
inset 0 0 20px rgba(0, 0, 0, 0.25);
position: relative;
overflow: hidden;
transition: all 0.25s ease;
}
.kf-fali-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(226, 184, 118, 0.65), transparent);
pointer-events: none;
}
.kf-fali-card:hover {
transform: translateY(-3px);
background: linear-gradient(135deg, #381c0e 0%, #241107 50%, #160a04 100%);
border-color: rgba(235, 196, 132, 0.75);
box-shadow: 
0 14px 38px rgba(0, 0, 0, 0.7),
0 0 22px rgba(226, 184, 118, 0.22),
inset 0 1px 0 rgba(255, 240, 205, 0.25);
} .kf-fali-card-thumb {
flex-shrink: 0;
width: 170px;
height: 110px;
aspect-ratio: 16 / 10;
border-radius: 12px;
overflow: hidden;
position: relative;
background: #140904;
display: block;
}
.kf-fali-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s ease;
}
.kf-fali-card:hover .kf-fali-card-thumb img {
transform: scale(1.06);
}
.kf-fali-card-thumb::after {
content: "";
position: absolute;
inset: 5px;
border: 1.5px solid rgba(226, 184, 118, 0.75);
border-radius: 9px;
box-shadow: inset 0 0 14px rgba(18, 10, 5, 0.45);
pointer-events: none;
z-index: 2;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.kf-fali-card:hover .kf-fali-card-thumb::after {
border-color: rgba(245, 215, 160, 0.95);
box-shadow: inset 0 0 18px rgba(18, 10, 5, 0.3), 0 0 8px rgba(226, 184, 118, 0.45);
}
.kf-fali-card-content {
flex: 1;
min-width: 0;
}
.kf-fali-card-title {
font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
margin: 0 0 6px 0;
color: #ffd885;
}
.kf-fali-card-title a {
color: inherit;
text-decoration: none;
}
.kf-fali-card-title a:hover {
color: #ffffff;
}
.kf-fali-card-desc {
font-size: 14px;
line-height: 1.6;
color: rgba(245, 235, 220, 0.92);
margin: 0 0 10px 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
} .kf-fali-card-link {
font-size: 14px;
font-weight: 700;
color: #ffd885 !important;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 4px;
letter-spacing: 0.02em;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
transition: all 0.22s ease;
}
.kf-fali-card-link .kf-arrow {
color: #ffbe44;
font-size: 17px;
font-weight: bold;
transition: transform 0.2s ease;
}
.kf-fali-card-link:hover {
color: #ffffff !important;
text-shadow: 0 0 10px rgba(255, 216, 133, 0.8);
}
.kf-fali-card-link:hover .kf-arrow {
transform: translateX(4px);
color: #ffffff;
}
@media (max-width: 580px) {
.kf-fali-card {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.kf-fali-card-thumb {
width: 100%;
height: 170px;
}
} .kf-fali-bottom-cta {
text-align: center;
margin: 38px 0 24px;
}
.kf-btn-again {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 40px;
border-radius: 999px;
background: linear-gradient(135deg, #442311 0%, #2b1509 50%, #190b04 100%);
border: 2px solid #e2b876;
color: #ffffff !important;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.04em;
text-decoration: none;
box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6), 0 0 18px rgba(226, 184, 118, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}
.kf-btn-again span {
color: #ffffff !important;
}
.kf-btn-again .kf-btn-arrow {
color: #ffd885 !important;
font-size: 18px;
font-weight: bold;
}
.kf-btn-again .kf-btn-cup {
font-size: 18px;
filter: drop-shadow(0 2px 6px rgba(226, 184, 118, 0.6));
}
.kf-btn-again:hover {
background: linear-gradient(135deg, #5c2f16 0%, #3d1c0b 50%, #240f05 100%);
border-color: #ffd899;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 0 26px rgba(226, 184, 118, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
.kf-btn-again:hover .kf-btn-arrow {
transform: translateX(-4px);
}
.kf-fali-bottom-ornament {
text-align: center;
color: #e2b876;
font-size: 14px;
letter-spacing: 0.2em;
opacity: 0.7;
margin: 24px 0 16px;
}