/*
Theme Name: Hikaye
Theme URI: https://example.com/hikaye
Author: Ali
Author URI: https://example.com
Description: Hikaye odaklı, arama motoru görünümlü ana sayfası olan, kayıtlı kullanıcıların hikaye gönderebildiği, kullanıcı profilleri sunan, SEO'su kusursuz, minimal açık WordPress teması. Schema.org, Open Graph, Twitter Cards, XML sitemap, breadcrumb desteği dahildir.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hikaye
Tags: blog, custom-post-types, custom-menu, featured-images, threaded-comments, translation-ready, rtl-language-support, two-columns, right-sidebar, accessibility-ready
*/

:root {
    --h-bg: #ffffff;
    --h-fg: #1a1a1a;
    --h-muted: #6b7280;
    --h-border: #e5e7eb;
    --h-soft: #fff5f6;
    --h-accent: #e11d48;
    --h-accent-hover: #be123c;
    --h-danger: #dc2626;
    --h-radius: 10px;
    --h-radius-lg: 24px;
    --h-shadow: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04);
    --h-shadow-lg: 0 10px 30px rgba(0,0,0,.08);
    --h-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --h-font-serif: Georgia, "Times New Roman", serif;
    --h-max: 1100px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--h-font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--h-fg);
    background: var(--h-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--h-accent); text-decoration: none; transition: color .15s ease; }
a:hover, a:focus-visible { color: var(--h-accent-hover); text-decoration: underline; }

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 .5em;
    color: var(--h-fg);
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 1rem + 1.2vw, 1.9rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

.screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px; width: 1px; overflow: hidden;
    word-wrap: normal !important;
}
.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--h-fg); color: #fff; padding: 10px 16px;
    z-index: 9999; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* Layout */
.container { max-width: var(--h-max); margin: 0 auto; padding: 0 20px; }

/* Header */
.site-header {
    border-bottom: 1px solid var(--h-border);
    background: #fff;
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: saturate(180%) blur(8px);
    background: rgba(255,255,255,.9);
}
.site-header .container {
    display: flex; align-items: center; justify-content: space-between;
    height: 64px; gap: 16px;
}
.site-branding a { color: var(--h-fg); font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.site-branding a:hover { color: var(--h-accent); }
.site-branding { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; }
.site-branding .custom-logo-link { display: inline-flex; align-items: center; line-height: 1; }
.site-branding .custom-logo { max-height: 28px; width: auto; height: auto; }

.primary-nav ul { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }
.primary-nav a { color: var(--h-fg); font-size: .95rem; }
.primary-nav a:hover { color: var(--h-accent); }

.desktop-quick-links { display: flex; align-items: center; gap: 10px; }
.desktop-quick-links a {
    color: var(--h-muted);
    text-decoration: none;
    font-size: .86rem;
    padding: 6px 10px;
    border: 1px solid var(--h-border);
    border-radius: 999px;
}
.desktop-quick-links a:hover { color: var(--h-accent); border-color: var(--h-accent); }

.header-actions { display: flex; align-items: center; gap: 10px; }
.mobile-menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--h-border);
    border-radius: 10px;
    background: #fff;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
}
.mobile-menu-toggle span {
    width: 18px;
    height: 2px;
    background: var(--h-fg);
    border-radius: 2px;
}
.mobile-menu-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(82vw, 340px);
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 78px 18px 18px;
    border-left: 1px solid var(--h-border);
    background: #fff;
    transform: translateX(104%);
    opacity: 0;
    visibility: hidden;
    transition: transform .22s ease, opacity .2s ease, visibility .2s ease;
}
.mobile-menu-panel.is-open { transform: translateX(0); opacity: 1; visibility: visible; }
.mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 24, .35);
    z-index: 110;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    pointer-events: none;
}
.mobile-menu-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-menu-panel a {
    color: var(--h-fg);
    text-decoration: none;
    font-weight: 500;
    padding: 10px 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.mobile-menu-panel .mmi { width: 18px; text-align: center; opacity: .85; }
.mobile-menu-panel .mmi svg {
    width: 18px;
    height: 18px;
    display: block;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.mobile-menu-panel a:hover {
    background: var(--h-soft);
    color: var(--h-accent);
}
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: var(--h-radius);
    background: var(--h-accent); color: #fff !important; font-size: .9rem; font-weight: 600;
    border: 1px solid transparent; cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}
.btn:hover { background: var(--h-accent-hover); text-decoration: none; }
.btn.btn-ghost { background: transparent; color: var(--h-fg) !important; border-color: var(--h-border); }
.btn.btn-ghost:hover { background: var(--h-soft); }
.btn.btn-sm { padding: 6px 10px; font-size: .85rem; }

/* Hero (search engine look) */
.hero {
    padding: clamp(48px, 10vw, 120px) 20px clamp(32px, 6vw, 64px);
    text-align: center;
}
.hero-banner {
    max-width: var(--h-max);
    margin: 24px auto 8px;
    border-radius: 16px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(8, 4, 6, .72) 0%, rgba(8, 4, 6, .44) 45%, rgba(8, 4, 6, .18) 100%),
        url('/wp-content/themes/hikaye/assets/images/hekayeler-biz-banner.webp') center/cover no-repeat;
    min-height: clamp(260px, 42vw, 460px);
    display: flex;
    align-items: end;
    padding: clamp(18px, 3.2vw, 34px);
}
.hero-banner-overlay {
    text-align: right;
    max-width: min(780px, 100%);
    margin-left: auto;
}
.hero-banner-title {
    margin: 0;
    color: #fff;
    font-size: clamp(1.45rem, 4.2vw, 3.05rem);
    line-height: 1.12;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .36);
}
.hero-banner-sub {
    margin: 10px 0 0;
    color: rgba(255,255,255,.9);
    font-size: clamp(.94rem, 1.65vw, 1.18rem);
    text-shadow: 0 1px 10px rgba(0,0,0,.3);
}
.hero .logo {
    font-family: var(--h-font-serif);
    font-size: clamp(2.6rem, 2rem + 4vw, 4.5rem);
    font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px;
}
.hero .logo span { color: var(--h-accent); }
.hero .tagline {
    color: var(--h-muted); font-size: 1rem; margin: 0 0 28px;
}
.search-box {
    max-width: 620px; margin: 0 auto;
    display: flex; align-items: center;
    border: 1px solid var(--h-border);
    background: #fff; border-radius: 999px;
    padding: 4px 4px 4px 20px;
    box-shadow: var(--h-shadow);
    transition: box-shadow .2s, border-color .2s;
}
.search-box:focus-within { box-shadow: var(--h-shadow-lg); border-color: #d1d5db; }
.search-box svg { color: var(--h-muted); flex-shrink: 0; }
.search-box input[type="search"] {
    flex: 1; border: 0; outline: none; padding: 14px 12px;
    font-size: 1rem; background: transparent; color: var(--h-fg);
    min-width: 0;
}
.search-box button {
    border: 0; border-radius: 999px;
    background: var(--h-accent); color: #fff;
    padding: 10px 22px; font-size: .95rem; font-weight: 600; cursor: pointer;
    transition: background .15s ease;
}
.search-box button:hover { background: var(--h-accent-hover); }

/* Sections */
.section { padding: 40px 0; }
.section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 24px; gap: 16px;
}
.section-head h2 { margin: 0; font-size: 1.4rem; }
.section-head a { font-size: .9rem; color: var(--h-muted); }
.section-head a:hover { color: var(--h-accent); }

/* Categories grid */
.cat-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.cat-card {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    background: var(--h-soft);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius);
    color: var(--h-fg); font-weight: 500;
    transition: all .15s ease;
}
.cat-card:hover { background: #fff; border-color: var(--h-accent); color: var(--h-accent); text-decoration: none; transform: translateY(-2px); }
.cat-card .count { margin-left: auto; color: var(--h-muted); font-size: .82rem; font-weight: 400; }
.cat-card:hover .count { color: var(--h-accent); }

/* Story grid */
.story-grid {
    display: grid; gap: 28px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.story-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius);
    background: #fff; overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease;
}
.story-card:hover { box-shadow: var(--h-shadow-lg); transform: translateY(-2px); }
.story-card .body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.story-card h3 { font-size: 1.15rem; margin: 0; }
.story-card h3 a { color: var(--h-fg); }
.story-card h3 a:hover { color: var(--h-accent); text-decoration: none; }
.story-card .excerpt { color: var(--h-muted); font-size: .93rem; margin: 0; }
.story-card .excerpt-link { color: inherit; text-decoration: none; }
.story-card .excerpt-link:hover { color: var(--h-accent); text-decoration: none; }
.story-card .meta {
    margin-top: auto; display: flex; align-items: center; gap: 10px;
    font-size: .82rem; color: var(--h-muted); padding-top: 10px;
    flex-wrap: wrap;
}
.story-card .meta .avatar { width: 24px; height: 24px; border-radius: 50%; }
.story-card .meta .dot { opacity: .5; }
.story-card .meta-cat {
    color: var(--h-muted);
    text-decoration: none;
}
.story-card .meta-cat:hover { color: var(--h-accent); }
.story-card .cat-tag {
    display: inline-block; padding: 3px 10px;
    background: var(--h-soft); border-radius: 999px;
    color: var(--h-fg); font-size: .78rem; text-decoration: none;
    border: 1px solid var(--h-border);
}
.story-card .cat-tag:hover { border-color: var(--h-accent); color: var(--h-accent); }

/* Single story */
.entry-header { padding: 40px 0 24px; }
.entry-header h1 { margin: 0 0 12px; }
.entry-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    color: var(--h-muted); font-size: .9rem; margin-top: 8px;
}
.entry-meta .author {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--h-fg); text-decoration: none;
}
.entry-meta .author img { width: 32px; height: 32px; border-radius: 50%; }
.entry-meta .meta-cat {
    color: var(--h-muted);
    text-decoration: none;
}
.entry-meta .meta-cat:hover { color: var(--h-accent); }
.entry-meta .dot { opacity: .5; }
.reading-tools { max-width: 720px; margin: 0 auto 16px; }
.reading-tools-toggle {
    display: inline-flex; align-items: center; gap: 10px;
    border: 1px solid var(--h-border); border-radius: 999px;
    background: #fff; color: var(--h-fg); padding: 10px 16px;
    font-size: .9rem; font-weight: 600; cursor: pointer;
}
.reading-tools-toggle .aa { font-size: 1.2rem; font-family: var(--h-font-serif); }
.reading-tools-toggle:hover { border-color: var(--h-accent); color: var(--h-accent); }
.reading-tools-panel {
    margin-top: 12px; border: 1px solid var(--h-border); border-radius: var(--h-radius);
    padding: 16px; background: #fff; box-shadow: var(--h-shadow);
}
.reading-tools-panel[hidden] { display: none; }
.rt-group + .rt-group { margin-top: 14px; }
.rt-group h3 { font-size: .82rem; color: var(--h-muted); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 8px; }
.rt-stepper {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border: 1px solid var(--h-border); border-radius: 10px; padding: 8px 10px;
}
.rt-btn {
    border: 1px solid var(--h-border); border-radius: 8px; width: 36px; height: 36px;
    background: #fff; color: var(--h-fg); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.rt-value { font-weight: 600; color: var(--h-fg); }
.rt-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rt-option {
    border: 1px solid var(--h-border); border-radius: 10px; background: #fff;
    color: var(--h-fg); font-size: .9rem; padding: 10px; cursor: pointer;
}
.rt-option.active { border-color: var(--h-accent); color: var(--h-accent); background: #fff1f2; }
.entry-content {
    font-size: 1.08rem; line-height: 1.8; max-width: 720px; margin: 0 auto;
}
.entry-content p, .entry-content h2, .entry-content h3, .entry-content ul, .entry-content ol, .entry-content blockquote { margin-bottom: 1.1em; }
.entry-content p {
    margin-bottom: 1.35em;
    text-indent: 0;
}
.entry-content > p:first-of-type { text-indent: 0; }
.entry-content > p:first-of-type::first-letter {
    float: left;
    font-family: var(--h-font-serif);
    font-weight: 700;
    font-size: 3em;
    line-height: .92;
    margin: .02em .14em 0 0;
    color: var(--h-fg);
}
.entry-content.rt-font-serif { font-family: var(--h-font-serif); }
.entry-content.rt-font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.entry-content.rt-spacing-tight { line-height: 1.65; }
.entry-content.rt-spacing-normal { line-height: 1.8; }
.entry-content.rt-spacing-wide { line-height: 2.02; }
.entry-content h2 { margin-top: 1.8em; }
.entry-content blockquote {
    border-left: 4px solid var(--h-accent);
    padding: 4px 20px; margin: 1.5em 0; color: var(--h-muted);
    font-style: italic;
}
.entry-content pre, .entry-content code { background: var(--h-soft); border-radius: 6px; }
.entry-content pre { padding: 16px; overflow-x: auto; }
.entry-content code { padding: 2px 6px; font-size: .95em; }
.entry-content img { border-radius: var(--h-radius); margin: 1em auto; }

.entry-actions {
    display: flex; justify-content: center; gap: 10px;
    padding: 28px 0; border-top: 1px solid var(--h-border); border-bottom: 1px solid var(--h-border); margin: 40px 0;
    flex-wrap: wrap;
}
.action-btn {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--h-border); background: #fff;
    padding: 10px 16px; border-radius: 999px; cursor: pointer;
    color: var(--h-fg); font-size: .9rem; font-weight: 500;
    transition: all .15s ease;
}
.action-btn:hover { border-color: var(--h-accent); color: var(--h-accent); }
.action-btn.active { background: var(--h-accent); color: #fff; border-color: var(--h-accent); }
.action-btn.active svg { fill: currentColor; }

.story-nav {
    max-width: 720px;
    margin: 20px auto 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.story-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--h-border);
    border-radius: 10px;
    color: var(--h-fg);
    background: #fff;
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
}
.story-nav-btn:hover {
    border-color: var(--h-accent);
    color: var(--h-accent);
    text-decoration: none;
}
.story-nav .next { margin-left: auto; }
.story-nav-spacer { width: 1px; }

/* Author profile */
.author-hero {
    padding: 48px 0 32px; border-bottom: 1px solid var(--h-border);
    text-align: center;
}
.author-hero .avatar {
    width: 112px; height: 112px; border-radius: 50%;
    margin: 0 auto 14px; box-shadow: var(--h-shadow);
}
.author-hero h1 { margin: 0 0 6px; }
.author-hero .handle { color: var(--h-muted); margin-bottom: 10px; }
.author-hero .bio { max-width: 580px; margin: 14px auto; color: var(--h-fg); }
.author-hero .stats {
    display: flex; justify-content: center; gap: 28px; margin: 18px 0;
    font-size: .95rem;
}
.author-hero .stats strong { display: block; font-size: 1.3rem; color: var(--h-fg); }
.author-hero .stats span { color: var(--h-muted); }
.author-tabs {
    display: flex; justify-content: center; gap: 24px; margin: 20px 0 0;
    border-bottom: 1px solid var(--h-border);
}
.author-tabs a {
    padding: 12px 6px; color: var(--h-muted); font-weight: 500;
    border-bottom: 2px solid transparent; text-decoration: none;
}
.author-tabs a.active, .author-tabs a:hover { color: var(--h-fg); border-color: var(--h-accent); }

/* Breadcrumbs */
.breadcrumbs {
    padding: 12px 0; font-size: .85rem; color: var(--h-muted);
}
.breadcrumbs a { color: var(--h-muted); }
.breadcrumbs a:hover { color: var(--h-accent); }
.breadcrumbs .sep { margin: 0 6px; opacity: .6; }

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    margin: 40px 0;
}
.pagination ul.page-numbers,
nav.pagination ul.page-numbers {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}
.pagination ul.page-numbers li,
nav.pagination ul.page-numbers li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pagination ul.page-numbers li > a.page-numbers,
.pagination ul.page-numbers li > span.page-numbers,
nav.pagination ul.page-numbers li > a.page-numbers,
nav.pagination ul.page-numbers li > span.page-numbers {
    height: 40px;
    min-width: 40px;
    padding: 0 14px;
    border: 1px solid var(--h-border);
    border-radius: 10px;
    color: var(--h-fg); text-decoration: none; font-size: .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-weight: 600;
    background: #fff;
}
.pagination ul.page-numbers li > a.page-numbers:hover,
nav.pagination ul.page-numbers li > a.page-numbers:hover {
    border-color: var(--h-accent);
    color: var(--h-accent);
}
.pagination ul.page-numbers li > span.page-numbers.current,
nav.pagination ul.page-numbers li > span.page-numbers.current {
    background: var(--h-accent);
    color: #fff;
    border-color: var(--h-accent);
}
.pagination ul.page-numbers li > a.page-numbers.prev,
.pagination ul.page-numbers li > a.page-numbers.next,
nav.pagination ul.page-numbers li > a.page-numbers.prev,
nav.pagination ul.page-numbers li > a.page-numbers.next {
    min-width: 112px;
    padding: 0 16px;
}

/* Comments */
.comments-area { max-width: 720px; margin: 40px auto; }
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-list li { padding: 16px 0; border-bottom: 1px solid var(--h-border); }
.comment-list .avatar { float: left; margin-right: 12px; border-radius: 50%; }
.comment-meta { font-size: .85rem; color: var(--h-muted); margin-bottom: 6px; }
.comment-form label { display: block; font-size: .9rem; margin-bottom: 4px; }
.comment-form input, .comment-form textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--h-border);
    border-radius: 8px; font-family: inherit; font-size: .95rem;
    background: #fff;
}
.comment-form textarea { min-height: 120px; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--h-accent); outline: none; }
.comment-form .submit { width: auto; }

/* Footer */
.site-footer {
    border-top: 1px solid var(--h-border); padding: 32px 0;
    color: var(--h-muted); font-size: .9rem; margin-top: 60px;
    text-align: center;
}
.site-footer a { color: var(--h-muted); }
.site-footer a:hover { color: var(--h-accent); }

/* Utilities */
.row-2 { display: grid; grid-template-columns: 1fr 280px; gap: 40px; }
@media (max-width: 900px) { .row-2 { grid-template-columns: 1fr; } }

.sidebar .widget {
    padding: 16px; border: 1px solid var(--h-border); border-radius: var(--h-radius);
    margin-bottom: 18px; background: #fff;
}
.sidebar .widget h3 { font-size: 1rem; margin: 0 0 10px; }
.sidebar .widget ul { list-style: none; padding: 0; margin: 0; }
.sidebar .widget li { padding: 6px 0; border-bottom: 1px solid var(--h-border); }
.sidebar .widget li:last-child { border-bottom: 0; }

/* 404 */
.error-404 { text-align: center; padding: 80px 20px; }
.error-404 h1 { font-size: 6rem; margin: 0; color: var(--h-accent); }

/* Responsive */
@media (max-width: 600px) {
    .primary-nav { display: none; }
    .desktop-quick-links { display: none; }
    .header-actions { display: none; }
    .mobile-menu-toggle { display: inline-flex; }
    .hero-banner { min-height: 240px; margin-top: 14px; border-radius: 12px; }
    .hero { padding: 18px 12px 32px; }
    .entry-actions { gap: 6px; }
    .action-btn { padding: 8px 12px; font-size: .85rem; }
    .author-hero .stats { gap: 18px; }
    .rt-options { grid-template-columns: 1fr; }
}
@media (min-width: 601px) {
    .mobile-menu-panel,
    .mobile-menu-backdrop { display: none !important; }
}

/* Print */
@media print {
    .site-header, .site-footer, .entry-actions, .pagination, .comments-area { display: none; }
    body { color: #000; background: #fff; }
    a { color: #000; text-decoration: underline; }
}