/*
Theme Name: Akses News
Theme URI: https://example.com/akses-news
Author: Custom Theme
Author URI: https://example.com
Description: Tema WordPress portal berita bergaya navy-blue dengan hero slider, ticker tag populer, ranking artikel populer, banner rekomendasi, dan kartu artikel berwarna pastel per kategori. Cocok untuk media online dan portal berita.
Version: 2.0.0
Requires at least: 5.9
Tested up to: 6.6
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: akses-news
Tags: news, blog, grid-layout, two-columns, custom-menu, custom-logo, featured-images, sticky-post, threaded-comments, translation-ready

Akses News is a custom WordPress theme.
*/

/* =====================================================
   1. CSS VARIABLES / ROOT
===================================================== */
:root{
  --color-navy: #16225c;        /* nav bar & banner navy */
  --color-navy-dark: #0f1a49;
  --color-blue: #1d4ed8;        /* logo ".co.id", link, angka populer */
  --color-blue-light: #dbeafe;
  --color-gold: #f2b90b;        /* current menu item */
  --color-orange: #f4611e;      /* tombol RSS */
  --color-dark: #1a1a1a;
  --color-text: #22252b;
  --color-muted: #85888f;
  --color-border: #e8e9ee;
  --color-bg: #ffffff;
  --color-bg-soft: #f4f5f9;
  --color-footer-bg: #eef0f6;
  --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --radius: 8px;
  --radius-sm: 4px;
  --container: 1200px;
}

/* =====================================================
   2. RESET
===================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg-soft);
  line-height: 1.6;
  font-size: 16px;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration: none; }
a:hover{ color: var(--color-blue); }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,h5,h6{ font-family: var(--font-heading); margin: 0 0 .5em; line-height:1.3; color:var(--color-dark); font-weight:700; }
figure{ margin:0; }
button{ font-family: inherit; cursor:pointer; }
.screen-reader-text{ position:absolute !important; left:-9999px; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}

/* =====================================================
   3. SITE HEADER
===================================================== */
.site-header{
  background:#fff;
  position: sticky;
  top:0;
  z-index: 500;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 0;
  gap: 20px;
}

/* Off-canvas "Menu" button (kiri) */
.offcanvas-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  background:none;
  border:none;
  font-size:15px;
  font-weight:600;
  color: var(--color-dark);
  flex-shrink:0;
}
.offcanvas-toggle i{ font-size:19px; }
.offcanvas-toggle:hover{ color: var(--color-blue); }

.site-branding{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.site-branding .custom-logo{ max-height:44px; width:auto; }
.site-branding .logo-mark{
  width:40px; height:40px; border-radius:50%;
  background: var(--color-navy);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.site-branding .logo-mark svg{ width:20px; height:20px; }
.site-title{
  font-weight:800;
  font-size: 24px;
  margin:0;
  letter-spacing:-.3px;
  white-space:nowrap;
}
.site-title a{ color: var(--color-dark); }
.site-title .brand-suffix{ color: var(--color-blue); font-weight:800; }
.site-description{
  font-size:11px;
  color: var(--color-muted);
  margin-top:1px;
}

.header-right{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
  justify-content:flex-end;
}
.header-search-form{
  display:flex;
  align-items:center;
  background: var(--color-bg-soft);
  border:1px solid var(--color-border);
  border-radius: 30px;
  padding: 6px 8px 6px 16px;
  max-width:280px;
  width:100%;
}
.header-search-form input[type="search"]{
  border:none;
  background:transparent;
  outline:none;
  font-size:14px;
  flex:1;
  min-width:0;
}
.header-search-form button{
  background:none;
  border:none;
  color: var(--color-muted);
  font-size:15px;
  padding:4px 8px;
}
.header-rss{
  width:38px; height:38px;
  border-radius:50%;
  background: var(--color-orange);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  font-size:15px;
}
.header-rss:hover{ color:#fff; opacity:.9; }

.menu-toggle{
  display:none;
  background:none;
  border:none;
  font-size:20px;
  color: var(--color-dark);
  padding: 6px 8px;
}

/* =====================================================
   4. PRIMARY NAVIGATION (navy bar)
===================================================== */
.primary-nav{
  background: var(--color-navy);
}
.primary-nav .container{ display:flex; align-items:stretch; }
.primary-nav ul{
  display:flex;
  flex-wrap:wrap;
}
.primary-nav ul li a{
  display:block;
  padding: 13px 15px;
  color:#e7e9f5;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
}
.primary-nav ul li a:hover{
  color: var(--color-gold);
}
.primary-nav ul li.current-menu-item a,
.primary-nav ul li.current_page_item a,
.primary-nav ul li.current-menu-parent a{
  color: var(--color-gold);
}
.primary-nav ul li.menu-item-has-children{ position:relative; }
.primary-nav ul li.menu-item-has-children > ul{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background: var(--color-navy);
  min-width:200px;
  box-shadow:0 8px 16px rgba(0,0,0,.25);
  z-index:100;
  flex-direction:column;
}
.primary-nav ul li.menu-item-has-children:hover > ul{ display:flex; }
.primary-nav ul li.menu-item-has-children > ul li a{ padding:10px 16px; }

/* =====================================================
   5. OFF-CANVAS MENU PANEL
===================================================== */
.offcanvas-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  z-index:900; display:none;
}
.offcanvas-overlay.is-open{ display:block; }
.offcanvas-panel{
  position:fixed; top:0; left:0; bottom:0;
  width:300px; max-width:85vw;
  background:#fff;
  z-index:901;
  transform: translateX(-100%);
  transition: transform .25s ease;
  overflow-y:auto;
  padding: 20px;
}
.offcanvas-panel.is-open{ transform: translateX(0); }
.offcanvas-panel__close{
  background:none; border:none; font-size:20px; float:right; color:var(--color-muted);
}
.offcanvas-panel h4{
  font-size:12px; text-transform:uppercase; color:var(--color-muted); letter-spacing:.5px;
  margin: 18px 0 8px; clear:both;
}
.offcanvas-panel ul li a{ display:block; padding:9px 0; font-size:15px; color:var(--color-dark); border-bottom:1px solid var(--color-border); }
.offcanvas-panel ul li a:hover{ color: var(--color-blue); }

/* =====================================================
   6. LAYOUT: CONTENT + SIDEBAR
===================================================== */
.site-main-wrap{ padding: 24px 0 48px; }
.layout-grid{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items:start;
}
@media (max-width: 900px){
  .layout-grid{ grid-template-columns: 1fr; }
}
.widget-area{ position: sticky; top: 90px; }
@media (max-width: 900px){ .widget-area{ position:static; } }

.section-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:19px;
  padding-left:12px;
  border-left:4px solid var(--color-blue);
  margin-bottom:16px;
}
.section-title a.see-all{
  margin-left:auto;
  font-size:13px;
  font-weight:600;
  color: var(--color-blue);
}

/* =====================================================
   7. CATEGORY BADGE (pill pastel)
===================================================== */
.cat-badge{
  display:inline-block;
  font-size:11.5px;
  font-weight:700;
  padding:4px 12px;
  border-radius:20px;
  color:#1a7a4c;
  background:#d7f5e3;
}
.cat-tekno{ background:#e0e7ff; color:#3730a3; }
.cat-teknologi{ background:#e0e7ff; color:#3730a3; }
.cat-otomotif{ background:#ffe8d6; color:#c2410c; }
.cat-money{ background:#dcfce7; color:#15803d; }
.cat-edukasi{ background:#ede9fe; color:#6d28d9; }
.cat-tren{ background:#fce7f3; color:#be185d; }
.cat-lifestyle{ background:#ffe4e6; color:#be123c; }
.cat-bola{ background:#d7f5e3; color:#1a7a4c; }
.cat-travel{ background:#dbeafe; color:#1d4ed8; }
.cat-lestari{ background:#ecfccb; color:#4d7c0f; }
.cat-health{ background:#cffafe; color:#0e7490; }
.cat-entertainment{ background:#fae8ff; color:#a21caf; }
.cat-nasional{ background:#fee2e2; color:#b91c1c; }
.cat-global{ background:#e0e7ff; color:#3730a3; }
.cat-bisnis{ background:#e5e7f5; color:#33408f; }
.cat-sains{ background:#ccfbf1; color:#0f766e; }
.cat-berita{ background:#e5e7f5; color:#33408f; }
.cat-regional{ background:#fef3c7; color:#92400e; }

/* Versi teks polos (dipakai di widget Populer) */
.cat-text{
  font-size:12.5px;
  color: var(--color-muted);
  font-weight:600;
}

/* =====================================================
   8. HERO SLIDER (Homepage)
===================================================== */
.hero-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 24px;
}

.hero-slider{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  background:#111;
}
.hero-slider__slide{
  display:none;
  position:relative;
  min-height: 380px;
}
.hero-slider__slide.is-active{ display:block; }
.hero-slider__slide img{
  width:100%; height:380px; object-fit:cover; opacity:.9;
}
.hero-slider__badge-breaking{
  position:absolute; top:16px; left:16px; z-index:3;
  background: var(--color-blue);
  color:#fff;
  font-size:11.5px;
  font-weight:800;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius: 4px;
}
.hero-slider__overlay{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding: 24px 60px 20px 24px;
  background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
}
.hero-slider__overlay .cat-inline{
  display:inline-block;
  color:#fff;
  font-size:12.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  padding-bottom:6px;
  border-bottom:2px solid var(--color-gold);
  margin-bottom:10px;
}
.hero-slider__overlay h2{
  color:#fff;
  font-size: 26px;
  margin: 0 0 8px;
}
.hero-slider__overlay h2 a{ color:#fff; }
.hero-slider__meta{ color:#d7d9e6; font-size:12.5px; }

.hero-slider__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%;
  background: rgba(255,255,255,.9);
  border:none;
  display:flex; align-items:center; justify-content:center;
  z-index:4; font-size:15px; color:var(--color-dark);
}
.hero-slider__nav:hover{ background:#fff; }
.hero-slider__nav.prev{ left:14px; }
.hero-slider__nav.next{ right:14px; }

/* =====================================================
   9. TAG CAROUSEL ("Tag Popular")
===================================================== */
.tag-carousel-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 28px;
}
.tag-carousel-wrap .carousel-arrow{
  width:30px; height:30px; border-radius:50%;
  border:1px solid var(--color-border);
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--color-muted); flex-shrink:0;
}
.tag-carousel-wrap .carousel-arrow:hover{ background:var(--color-bg-soft); }
.tag-carousel__label{
  font-weight:700; font-size:14px; white-space:nowrap; flex-shrink:0;
}
.tag-carousel__viewport{ overflow:hidden; flex:1; }
.tag-carousel__track{
  display:flex; gap:22px; white-space:nowrap;
  transition: transform .3s ease;
}
.tag-carousel__track a{ font-size:14px; color: var(--color-text); }
.tag-carousel__track a:hover{ color: var(--color-blue); }

/* =====================================================
   10. LATEST POSTS LIST
===================================================== */
.post-list{ display:flex; flex-direction:column; gap:16px; }
.post-list-item{
  display:flex;
  gap:16px;
  background:#fff;
  padding: 12px;
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.post-list-item img{ width:150px; height:105px; object-fit:cover; border-radius: var(--radius-sm); flex-shrink:0; }
.post-list-item__body{ display:flex; flex-direction:column; justify-content:center; gap:6px; }
.post-list-item .cat-badge{ align-self:flex-start; }
.post-list-item .entry-title{ font-size:17px; margin:0; }
.post-list-item .entry-title a:hover{ color: var(--color-blue); }
.post-list-item .entry-excerpt{ font-size:13.5px; color:#555; margin:0; }
.post-list-item .entry-meta{ font-size:12px; color: var(--color-muted); }
@media (max-width:600px){
  .post-list-item{ flex-direction:column; }
  .post-list-item img{ width:100%; height:180px; }
}

/* =====================================================
   11. RECOMMENDED BANNER (navy carousel)
===================================================== */
.recommended-banner{
  background: var(--color-navy);
  background-image: radial-gradient(circle at 90% 20%, rgba(255,255,255,.06) 0, transparent 45%),
                     radial-gradient(circle at 10% 90%, rgba(255,255,255,.05) 0, transparent 40%);
  border-radius: var(--radius);
  padding: 20px;
  margin: 22px 0;
  color:#fff;
}
.recommended-banner__head{
  display:flex; align-items:center; gap:10px;
  font-size:16px; font-weight:700; color:#fff;
  margin-bottom:16px;
}
.recommended-banner__head i{ color: var(--color-gold); }
.recommended-carousel{ position:relative; }
.recommended-carousel__viewport{ overflow:hidden; }
.recommended-carousel__track{
  display:flex; gap:16px; transition: transform .35s ease;
}
.recommended-card{
  background:#fff;
  border-radius: var(--radius-sm);
  overflow:hidden;
  flex: 0 0 calc(33.333% - 11px);
  color: var(--color-text);
}
@media (max-width:800px){ .recommended-card{ flex:0 0 calc(70% - 8px); } }
.recommended-card__thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.recommended-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.recommended-card__thumb .cat-badge{ position:absolute; bottom:8px; left:8px; }
.recommended-card__body{ padding:10px 12px 14px; }
.recommended-card .entry-title{ font-size:14.5px; margin:0 0 6px; }
.recommended-card .entry-meta{ font-size:11.5px; color: var(--color-muted); }
.recommended-carousel__nav{
  position:absolute; top:38%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:50%;
  background:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--color-navy); z-index:3;
}
.recommended-carousel__nav.prev{ left:-14px; }
.recommended-carousel__nav.next{ right:-14px; }

/* =====================================================
   12. LOAD MORE
===================================================== */
.load-more-wrap{ text-align:center; margin-top:28px; }
.btn-load-more{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--color-navy);
  color:#fff;
  padding: 12px 28px;
  border-radius: 30px;
  font-weight:600;
  font-size:14.5px;
  border:none;
}
.btn-load-more:hover{ background: var(--color-navy-dark); color:#fff; }

/* =====================================================
   13. SIDEBAR WIDGETS
===================================================== */
.widget{
  background:#fff;
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.widget-title{
  display:flex; align-items:center; gap:8px;
  font-size:16px;
  margin-bottom:16px;
}
.widget-title i{ color: var(--color-orange); }

/* Popular posts (ranked) */
.popular-posts{ display:flex; flex-direction:column; gap:16px; }
.popular-post-item{ display:flex; gap:12px; align-items:flex-start; }
.popular-post-item .rank-num{
  font-size: 20px;
  font-weight:800;
  color: var(--color-blue);
  width:22px;
  flex-shrink:0;
  line-height:1.3;
}
.popular-post-item .entry-title{ font-size:14.5px; margin:0 0 4px; }
.popular-post-item .entry-title a:hover{ color: var(--color-blue); }
.popular-post-item .entry-meta{ font-size:11.5px; color:var(--color-muted); }

/* Tag cloud / trending */
.trending-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.trending-tags a{
  font-size:12.5px;
  padding:6px 12px;
  background: var(--color-bg-soft);
  border-radius: 20px;
}
.trending-tags a:hover{ background: var(--color-blue); color:#fff; }

/* Ad slot placeholder */
.widget-ad{
  background: var(--color-bg-soft);
  border:1px dashed var(--color-border);
  text-align:center;
  padding: 30px 10px;
  color: var(--color-muted);
  font-size:12px;
  text-transform:uppercase;
  border-radius: var(--radius-sm);
}

/* =====================================================
   14. GENERIC POST GRID (dipakai di archive/kategori grid opsional)
===================================================== */
.post-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 700px){ .post-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .post-grid{ grid-template-columns: 1fr; } }
.post-card{
  background:#fff;
  border-radius: var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.post-card__thumb{ position:relative; aspect-ratio: 16/10; overflow:hidden; background:#eee; }
.post-card__thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .3s; }
.post-card:hover .post-card__thumb img{ transform: scale(1.05); }
.post-card__thumb .cat-badge{ position:absolute; bottom:10px; left:10px; }
.post-card__body{ padding: 12px 14px 16px; flex:1; display:flex; flex-direction:column; }
.post-card .entry-title{ font-size:16px; margin: 6px 0; }
.post-card .entry-title a:hover{ color: var(--color-blue); }
.entry-meta{ font-size:12px; color: var(--color-muted); margin-top:auto; }
.entry-meta .sep{ margin:0 4px; }

/* =====================================================
   15. SINGLE POST
===================================================== */
.single-post-header{ margin-bottom:16px; }
.single-post-header .cat-badge{ margin-bottom:10px; }
.single-post-header h1{ font-size:28px; }
.single-post-thumb{ margin: 16px 0; border-radius: var(--radius); overflow:hidden; }
.single-post-thumb figcaption{ font-size:12.5px; color:var(--color-muted); padding:6px 2px; }
.entry-content{ font-size:17px; line-height:1.8; }
.entry-content p{ margin: 0 0 1.2em; }
.entry-content h2, .entry-content h3{ margin-top:1.4em; }
.entry-content img{ border-radius: var(--radius); margin: 1em 0; }
.entry-content blockquote{
  border-left:4px solid var(--color-blue);
  margin: 1.4em 0;
  padding: 4px 20px;
  font-style:italic;
  color:#444;
  background: var(--color-bg-soft);
}
.post-tags{ margin-top:24px; display:flex; flex-wrap:wrap; gap:8px; }
.post-tags a{
  font-size:12.5px; padding:5px 12px; background:var(--color-bg-soft); border-radius:20px;
}
.author-box{
  display:flex; gap:14px; align-items:center;
  background: var(--color-bg-soft);
  padding:16px; border-radius: var(--radius); margin-top:28px;
}
.author-box img{ border-radius:50%; width:56px; height:56px; }
.post-nav-links{
  display:flex; justify-content:space-between; gap:16px; margin-top:28px;
}
.post-nav-links a{
  flex:1; background:#fff; padding:12px 14px; border-radius: var(--radius); font-size:13.5px; box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.related-posts{ margin-top:36px; }

/* =====================================================
   16. ARCHIVE HEADER
===================================================== */
.archive-header{ background:#fff; padding:18px 20px; border-radius:var(--radius); box-shadow:0 1px 3px rgba(0,0,0,.05); }
.archive-header .section-title{ margin-bottom:6px; }

/* =====================================================
   17. PAGINATION
===================================================== */
.pagination{
  display:flex; gap:6px; justify-content:center; margin-top: 30px; flex-wrap:wrap;
}
.pagination a, .pagination span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 10px;
  border-radius: var(--radius-sm);
  background:#fff; font-size:14px; box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.pagination .current{ background: var(--color-navy); color:#fff; }

/* =====================================================
   18. FOOTER
===================================================== */
.site-footer{
  background: var(--color-footer-bg);
  border-top: 4px solid var(--color-navy);
  margin-top: 20px;
  color: var(--color-text);
}
.footer-top{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 30px;
  padding: 40px 0 30px;
}
@media (max-width:800px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns: 1fr; } }

.footer-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.footer-brand .site-title{ font-size:22px; }
.footer-brand .social-label{ font-size:12px; color:var(--color-muted); text-transform:uppercase; letter-spacing:.5px; }
.footer-brand .footer-copyright{ font-size:12.5px; color:var(--color-muted); }

.footer-widgets .widget{
  background:transparent; box-shadow:none; padding:0; margin:0;
}
.footer-widgets .widget-title{ font-size:15px; color:var(--color-dark); text-transform:uppercase; letter-spacing:.3px; }
.footer-widgets ul{ display:flex; flex-direction:column; gap:9px; }
.footer-widgets a{ color: var(--color-blue); font-size:14px; }
.footer-widgets a:hover{ text-decoration:underline; }
.footer-columns-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }

.footer-bottom{
  text-align:center;
  padding: 16px 0;
  font-size:12.5px;
  color: var(--color-muted);
  border-top: 1px solid rgba(0,0,0,.06);
}

/* =====================================================
   19. RESPONSIVE NAV (mobile)
===================================================== */
@media (max-width: 900px){
  .menu-toggle{ display:block; }
  .primary-nav ul{ display:none; flex-direction:column; width:100%; }
  .primary-nav.is-open ul{ display:flex; }
  .primary-nav .container{ flex-direction:column; align-items:stretch; }
  .header-search-form{ display:none; }
  .site-header__inner{ flex-wrap:wrap; }
}
@media (max-width:560px){
  .offcanvas-toggle span{ display:none; }
}

/* =====================================================
   20. MISC
===================================================== */
.no-results{ background:#fff; padding:40px; text-align:center; border-radius:var(--radius); box-shadow:0 1px 3px rgba(0,0,0,.05); }
.skip-link{ position:absolute; left:-9999px; top:0; background:#fff; padding:10px; z-index:9999; }
.skip-link:focus{ left:10px; top:10px; }