/**
 * Aktim - Base Styles (Reset & Common)
 * Shared across mobile & desktop
 *
 * @package    Aktim
 * @author     Mustafa Erdinc <mustafaerdinc@me.com>
 * @copyright  2024-2026 Bilgicler Yapi
 * @link       https://mustafaerdinc.com.tr
 */

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

html,
body {
  margin: 0;
  font-family: var(--font-family);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
}

/* Mobile: Dark background to blend with browser UI */
@media (max-width: 849px) {
  html,
  body {
    background-color: var(--color-mobile-bg);
  }
}

main {
  flex: 1;
}

a {
  text-decoration: none;
  color: inherit;
}

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

/* ===========================================
   ICONIFY WEB COMPONENT
   =========================================== */
iconify-icon {
  display: inline-flex;
  vertical-align: middle;
  font-size: 1em;
  width: 1em;
  height: 1em;
  color: currentColor;
}

/* ===========================================
   ACCESSIBILITY
   =========================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.visually-hidden-focusable {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.visually-hidden-focusable:focus {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: auto;
  height: auto;
  padding: 0.75rem 1.5rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
  text-decoration: none;
}

/* ===========================================
   SHARED BUTTON STYLES
   =========================================== */
.btn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background-color var(--transition-medium), color var(--transition-medium);
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.btn-secondary:hover {
  background-color: var(--color-secondary-dark);
}

/* ===========================================
   BACKGROUND ANIMATION KEYFRAMES
   =========================================== */
@keyframes aktim1-pan {
  0% { background-position: 0 center; }
  50% { background-position: 92% center; }
  100% { background-position: 75% center; }
}

@keyframes aktim2-pan {
  0% { background-position: 0 center; }
  60% { background-position: 100% center; }
  100% { background-position: 45% center; }
}

@keyframes aktim3-pan {
  0% { background-position: 20% center; }
  100% { background-position: 84% center; }
}

@keyframes aktimofis-pan {
  0% { background-position: 0 center; }
  50% { background-position: 100% center; }
  100% { background-position: 20% center; }
}