/* =========================================================
   Aktivite360 – FINAL Core CSS (No Shadow, 12-col Grid)
   File: 360.css
   ========================================================= */

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

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

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

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, h4, h5, h6 { margin: 0; }

:focus-visible{
  outline: 2px solid rgba(91, 91, 247, .55);
  outline-offset: 2px;
}
html, body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* -------------------------
   1) Design Tokens
------------------------- */
:root{
  /* Colors */
  --a360-bg: #fbfbff;
  --a360-surface: #ffffff;
  --a360-surface-2: #f7f8fb;
  --a360-border: #e6e8ef;

  --a360-text: #0b1220;
  --a360-text-2: #445066;
  --a360-muted: #6b7280;

  --a360-primary: #5b5bf7;   /* logo mor tonuna yakın */
  --a360-primary-2: #7c5cff;
  --a360-success: #16a34a;
  --a360-danger: #ef4444;
  --a360-warning: #f59e0b;

  /* Radius */
  --a360-r1: 10px;
  --a360-r2: 14px;
  --a360-r3: 18px;

  /* Spacing scale */
  --a360-s0: 0px;
  --a360-s1: 4px;
  --a360-s2: 8px;
  --a360-s3: 12px;
  --a360-s4: 16px;
  --a360-s5: 20px;
  --a360-s6: 24px;
  --a360-s7: 32px;
  --a360-s8: 40px;
  --a360-s9: 48px;
  --a360-s10: 56px;
  --a360-s11: 64px;

  /* Grid */
  --a360-container: 1120px;
  --a360-gutter: 16px;

  /* Type (Open Sans first) */
  --a360-font: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  --a360-lh: 1.55;
}

/* -------------------------
   2) Typography
------------------------- */
body{
  font-family: var(--a360-font);
  line-height: var(--a360-lh);
  background: var(--a360-bg);
  color: var(--a360-text);
  font-weight: 400;
}

.a360-h1{ font-size: 40px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; }
.a360-h2{ font-size: 28px; line-height: 1.2;  letter-spacing: -0.01em; font-weight: 700; }
.a360-h3{ font-size: 22px; line-height: 1.25; font-weight: 700; }
.a360-title{ font-size: 18px; line-height: 1.3; font-weight: 700; }

.a360-text{ font-size: 16px; color: var(--a360-text); }
.a360-text-2{ font-size: 16px; color: var(--a360-text-2); }
.a360-muted{ color: var(--a360-muted); }
.a360-small{ font-size: 14px; color: var(--a360-text-2); }

/* Responsive type */
@media (max-width: 768px){
  .a360-h1{ font-size: 32px; }
  .a360-h2{ font-size: 24px; }
}

/* -------------------------
   3) Layout Utilities
------------------------- */
.a360-container{
  width: 100%;
  max-width: var(--a360-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--a360-gutter);
  padding-right: var(--a360-gutter);
}

.a360-section{ padding: var(--a360-s9) 0; }
@media (max-width:768px){
  .a360-section{ padding: var(--a360-s7) 0; }
}

.a360-surface{
  background: var(--a360-surface);
  border: 1px solid var(--a360-border);
  border-radius: var(--a360-r2);
}

.a360-surface-2{
  background: var(--a360-surface-2);
  border: 1px solid var(--a360-border);
  border-radius: var(--a360-r2);
}

/* No shadow rule (explicit) */
.a360-no-shadow{ box-shadow: none !important; }

/* -------------------------
   4) 12-Column Grid (flex)
------------------------- */
.a360-row{
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--a360-gutter) * -1);
  margin-right: calc(var(--a360-gutter) * -1);
}

.a360-col{
  padding-left: var(--a360-gutter);
  padding-right: var(--a360-gutter);
  width: 100%;
  min-width: 0;
}

/* Desktop (>=1024) columns */
@media (min-width: 1024px){
  .a360-col-1{ width: 8.333333%; }
  .a360-col-2{ width: 16.666667%; }
  .a360-col-3{ width: 25%; }
  .a360-col-4{ width: 33.333333%; }
  .a360-col-5{ width: 41.666667%; }
  .a360-col-6{ width: 50%; }
  .a360-col-7{ width: 58.333333%; }
  .a360-col-8{ width: 66.666667%; }
  .a360-col-9{ width: 75%; }
  .a360-col-10{ width: 83.333333%; }
  .a360-col-11{ width: 91.666667%; }
  .a360-col-12{ width: 100%; }
}

/* Tablet (>=768 <1024) */
@media (min-width: 768px) and (max-width: 1023.98px){
  .a360-md-1{ width: 8.333333%; }
  .a360-md-2{ width: 16.666667%; }
  .a360-md-3{ width: 25%; }
  .a360-md-4{ width: 33.333333%; }
  .a360-md-5{ width: 41.666667%; }
  .a360-md-6{ width: 50%; }
  .a360-md-7{ width: 58.333333%; }
  .a360-md-8{ width: 66.666667%; }
  .a360-md-9{ width: 75%; }
  .a360-md-10{ width: 83.333333%; }
  .a360-md-11{ width: 91.666667%; }
  .a360-md-12{ width: 100%; }
}

/* Gap helpers (flex gap) */
.a360-gap-1{ gap: var(--a360-s1); }
.a360-gap-2{ gap: var(--a360-s2); }
.a360-gap-3{ gap: var(--a360-s3); }
.a360-gap-4{ gap: var(--a360-s4); }
.a360-gap-5{ gap: var(--a360-s5); }
.a360-gap-6{ gap: var(--a360-s6); }

/* -------------------------
   5) Buttons (No Shadow)
------------------------- */
.a360-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--a360-r2);
  border: 1px solid transparent;
  font-weight: 700;
  line-height: 1;
  transition: transform .06s ease, opacity .15s ease, background .15s ease, border-color .15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: -0.04em;
}
.a360-btn:active{ transform: translateY(1px); }

.a360-btn[disabled],
.a360-btn.is-disabled{
  opacity: .55;
  pointer-events: none;
}

.a360-btn-primary{
  background: linear-gradient(90deg, var(--a360-primary), #995cff);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
}
.a360-btn-primary:hover{ opacity: .95; }

.a360-btn-outline{
  background: transparent;
  border-color: var(--a360-border);
  color: var(--a360-text);
}
.a360-btn-outline:hover{ border-color: #d7dbe7; background: #fafbff; }

.a360-btn-soft{
  background: #eef0ff;
  border-color: #e3e6ff;
  color: #2a2ad6;
}
.a360-btn-soft:hover{ background: #e7eaff; }

.a360-btn-success{
  background: var(--a360-success);
  color: #fff;
}
.a360-btn-danger{
  background: var(--a360-danger);
  color: #fff;
}

/* Sizes */
.a360-btn-sm{ padding: 16px 1.5rem; border-radius: var(--a360-s11); font-weight: 700; font-size: 14px; }
.a360-btn-lg{ padding: 14px 2rem; border-radius: var(--a360-s11); font-size: 16px; }

/* Full width */
.a360-btn-block{ width: 100%; }

/* -------------------------
   6) Inputs / Pills / Chips
------------------------- */
.a360-input,
.a360-select,
.a360-textarea{
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--a360-r2);
  border: 1px solid var(--a360-border);
  background: #fff;
  color: var(--a360-text);
  outline: none;
}

.a360-textarea{ min-height: 120px; resize: vertical; }

.a360-input:focus,
.a360-select:focus,
.a360-textarea:focus{
  border-color: rgba(91, 91, 247, .45);
}

/* Option pill (wizard) */
.a360-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--a360-border);
  background: #fff;
  font-weight: 700;
  color: var(--a360-text);
  cursor: pointer;
}
.a360-pill.is-active{
  border-color: rgba(91, 91, 247, .45);
  background: #f0f1ff;
  color: #2a2ad6;
}

/* -------------------------
   7) Cards / Blocks (No Shadow)
------------------------- */
.a360-card{
  border: 1px solid var(--a360-border);
  border-radius: var(--a360-r3);
  background: #fff;
}
.a360-card-hd{ padding: var(--a360-s6); border-bottom: 1px solid var(--a360-border); }
.a360-card-bd{ padding: var(--a360-s6); }
.a360-card-ft{ padding: var(--a360-s6); border-top: 1px solid var(--a360-border); }

/* Info box / alert */
.a360-alert{
  border: 1px solid var(--a360-border);
  border-radius: var(--a360-r2);
  padding: var(--a360-s5);
  background: #fff;
}
.a360-alert-warning{
  border-color: rgba(245, 158, 11, .35);
  background: rgba(245, 158, 11, .08);
}
.a360-alert-success{
  border-color: rgba(22, 163, 74, .35);
  background: rgba(22, 163, 74, .08);
}

/* Divider */
.a360-divider{
  height: 1px;
  background: var(--a360-border);
  width: 100%;
}

/* -------------------------
   8) Flex / Alignment helpers
------------------------- */
.a360-flex{ display: flex; }
.a360-inline-flex{ display: inline-flex; }
.a360-wrap{ flex-wrap: wrap; }

.a360-center{ justify-content: center; align-items: center; }
.a360-between{ justify-content: space-between; }
.a360-start{ justify-content: flex-start; align-items: flex-start; }
.a360-end{ justify-content: flex-end; }

.a360-items-center{ align-items: center; }
.a360-items-start{ align-items: flex-start; }
.a360-items-end{ align-items: flex-end; }

.a360-text-center{ text-align: center; }
.a360-text-left{ text-align: left; }
.a360-text-right{ text-align: right; }

.a360-hide{ display: none !important; }

/* -------------------------
   9) Spacing Utilities (m/p scale)
------------------------- */
:root{
  --a360-space-0: var(--a360-s0);
  --a360-space-1: var(--a360-s1);
  --a360-space-2: var(--a360-s2);
  --a360-space-3: var(--a360-s3);
  --a360-space-4: var(--a360-s4);
  --a360-space-5: var(--a360-s5);
  --a360-space-6: var(--a360-s6);
  --a360-space-7: var(--a360-s7);
  --a360-space-8: var(--a360-s8);
  --a360-space-9: var(--a360-s9);
  --a360-space-10: var(--a360-s10);
  --a360-space-11: var(--a360-s11);
}

/* Margin all */
.a360-m-0{ margin: var(--a360-space-0) !important; }
.a360-m-1{ margin: var(--a360-space-1) !important; }
.a360-m-2{ margin: var(--a360-space-2) !important; }
.a360-m-3{ margin: var(--a360-space-3) !important; }
.a360-m-4{ margin: var(--a360-space-4) !important; }
.a360-m-5{ margin: var(--a360-space-5) !important; }
.a360-m-6{ margin: var(--a360-space-6) !important; }
.a360-m-7{ margin: var(--a360-space-7) !important; }
.a360-m-8{ margin: var(--a360-space-8) !important; }
.a360-m-9{ margin: var(--a360-space-9) !important; }
.a360-m-10{ margin: var(--a360-space-10) !important; }
.a360-m-11{ margin: var(--a360-space-11) !important; }

/* Margin axis */
.a360-mx-0{ margin-left: var(--a360-space-0) !important; margin-right: var(--a360-space-0) !important; }
.a360-mx-1{ margin-left: var(--a360-space-1) !important; margin-right: var(--a360-space-1) !important; }
.a360-mx-2{ margin-left: var(--a360-space-2) !important; margin-right: var(--a360-space-2) !important; }
.a360-mx-3{ margin-left: var(--a360-space-3) !important; margin-right: var(--a360-space-3) !important; }
.a360-mx-4{ margin-left: var(--a360-space-4) !important; margin-right: var(--a360-space-4) !important; }
.a360-mx-5{ margin-left: var(--a360-space-5) !important; margin-right: var(--a360-space-5) !important; }
.a360-mx-6{ margin-left: var(--a360-space-6) !important; margin-right: var(--a360-space-6) !important; }
.a360-mx-7{ margin-left: var(--a360-space-7) !important; margin-right: var(--a360-space-7) !important; }
.a360-mx-8{ margin-left: var(--a360-space-8) !important; margin-right: var(--a360-space-8) !important; }
.a360-mx-9{ margin-left: var(--a360-space-9) !important; margin-right: var(--a360-space-9) !important; }
.a360-mx-10{ margin-left: var(--a360-space-10) !important; margin-right: var(--a360-space-10) !important; }
.a360-mx-11{ margin-left: var(--a360-space-11) !important; margin-right: var(--a360-space-11) !important; }

.a360-my-0{ margin-top: var(--a360-space-0) !important; margin-bottom: var(--a360-space-0) !important; }
.a360-my-1{ margin-top: var(--a360-space-1) !important; margin-bottom: var(--a360-space-1) !important; }
.a360-my-2{ margin-top: var(--a360-space-2) !important; margin-bottom: var(--a360-space-2) !important; }
.a360-my-3{ margin-top: var(--a360-space-3) !important; margin-bottom: var(--a360-space-3) !important; }
.a360-my-4{ margin-top: var(--a360-space-4) !important; margin-bottom: var(--a360-space-4) !important; }
.a360-my-5{ margin-top: var(--a360-space-5) !important; margin-bottom: var(--a360-space-5) !important; }
.a360-my-6{ margin-top: var(--a360-space-6) !important; margin-bottom: var(--a360-space-6) !important; }
.a360-my-7{ margin-top: var(--a360-space-7) !important; margin-bottom: var(--a360-space-7) !important; }
.a360-my-8{ margin-top: var(--a360-space-8) !important; margin-bottom: var(--a360-space-8) !important; }
.a360-my-9{ margin-top: var(--a360-space-9) !important; margin-bottom: var(--a360-space-9) !important; }
.a360-my-10{ margin-top: var(--a360-space-10) !important; margin-bottom: var(--a360-space-10) !important; }
.a360-my-11{ margin-top: var(--a360-space-11) !important; margin-bottom: var(--a360-space-11) !important; }

/* Margin sides */
.a360-mt-0{ margin-top: var(--a360-space-0) !important; }
.a360-mt-1{ margin-top: var(--a360-space-1) !important; }
.a360-mt-2{ margin-top: var(--a360-space-2) !important; }
.a360-mt-3{ margin-top: var(--a360-space-3) !important; }
.a360-mt-4{ margin-top: var(--a360-space-4) !important; }
.a360-mt-5{ margin-top: var(--a360-space-5) !important; }
.a360-mt-6{ margin-top: var(--a360-space-6) !important; }
.a360-mt-7{ margin-top: var(--a360-space-7) !important; }
.a360-mt-8{ margin-top: var(--a360-space-8) !important; }
.a360-mt-9{ margin-top: var(--a360-space-9) !important; }
.a360-mt-10{ margin-top: var(--a360-space-10) !important; }
.a360-mt-11{ margin-top: var(--a360-space-11) !important; }

.a360-mb-0{ margin-bottom: var(--a360-space-0) !important; }
.a360-mb-1{ margin-bottom: var(--a360-space-1) !important; }
.a360-mb-2{ margin-bottom: var(--a360-space-2) !important; }
.a360-mb-3{ margin-bottom: var(--a360-space-3) !important; }
.a360-mb-4{ margin-bottom: var(--a360-space-4) !important; }
.a360-mb-5{ margin-bottom: var(--a360-space-5) !important; }
.a360-mb-6{ margin-bottom: var(--a360-space-6) !important; }
.a360-mb-7{ margin-bottom: var(--a360-space-7) !important; }
.a360-mb-8{ margin-bottom: var(--a360-space-8) !important; }
.a360-mb-9{ margin-bottom: var(--a360-space-9) !important; }
.a360-mb-10{ margin-bottom: var(--a360-space-10) !important; }
.a360-mb-11{ margin-bottom: var(--a360-space-11) !important; }

.a360-ml-0{ margin-left: var(--a360-space-0) !important; }
.a360-ml-1{ margin-left: var(--a360-space-1) !important; }
.a360-ml-2{ margin-left: var(--a360-space-2) !important; }
.a360-ml-3{ margin-left: var(--a360-space-3) !important; }
.a360-ml-4{ margin-left: var(--a360-space-4) !important; }
.a360-ml-5{ margin-left: var(--a360-space-5) !important; }
.a360-ml-6{ margin-left: var(--a360-space-6) !important; }
.a360-ml-7{ margin-left: var(--a360-space-7) !important; }
.a360-ml-8{ margin-left: var(--a360-space-8) !important; }
.a360-ml-9{ margin-left: var(--a360-space-9) !important; }
.a360-ml-10{ margin-left: var(--a360-space-10) !important; }
.a360-ml-11{ margin-left: var(--a360-space-11) !important; }

.a360-mr-0{ margin-right: var(--a360-space-0) !important; }
.a360-mr-1{ margin-right: var(--a360-space-1) !important; }
.a360-mr-2{ margin-right: var(--a360-space-2) !important; }
.a360-mr-3{ margin-right: var(--a360-space-3) !important; }
.a360-mr-4{ margin-right: var(--a360-space-4) !important; }
.a360-mr-5{ margin-right: var(--a360-space-5) !important; }
.a360-mr-6{ margin-right: var(--a360-space-6) !important; }
.a360-mr-7{ margin-right: var(--a360-space-7) !important; }
.a360-mr-8{ margin-right: var(--a360-space-8) !important; }
.a360-mr-9{ margin-right: var(--a360-space-9) !important; }
.a360-mr-10{ margin-right: var(--a360-space-10) !important; }
.a360-mr-11{ margin-right: var(--a360-space-11) !important; }

/* Padding all */
.a360-p-0{ padding: var(--a360-space-0) !important; }
.a360-p-1{ padding: var(--a360-space-1) !important; }
.a360-p-2{ padding: var(--a360-space-2) !important; }
.a360-p-3{ padding: var(--a360-space-3) !important; }
.a360-p-4{ padding: var(--a360-space-4) !important; }
.a360-p-5{ padding: var(--a360-space-5) !important; }
.a360-p-6{ padding: var(--a360-space-6) !important; }
.a360-p-7{ padding: var(--a360-space-7) !important; }
.a360-p-8{ padding: var(--a360-space-8) !important; }
.a360-p-9{ padding: var(--a360-space-9) !important; }
.a360-p-10{ padding: var(--a360-space-10) !important; }
.a360-p-11{ padding: var(--a360-space-11) !important; }

/* Padding axis */
.a360-px-0{ padding-left: var(--a360-space-0) !important; padding-right: var(--a360-space-0) !important; }
.a360-px-1{ padding-left: var(--a360-space-1) !important; padding-right: var(--a360-space-1) !important; }
.a360-px-2{ padding-left: var(--a360-space-2) !important; padding-right: var(--a360-space-2) !important; }
.a360-px-3{ padding-left: var(--a360-space-3) !important; padding-right: var(--a360-space-3) !important; }
.a360-px-4{ padding-left: var(--a360-space-4) !important; padding-right: var(--a360-space-4) !important; }
.a360-px-5{ padding-left: var(--a360-space-5) !important; padding-right: var(--a360-space-5) !important; }
.a360-px-6{ padding-left: var(--a360-space-6) !important; padding-right: var(--a360-space-6) !important; }
.a360-px-7{ padding-left: var(--a360-space-7) !important; padding-right: var(--a360-space-7) !important; }
.a360-px-8{ padding-left: var(--a360-space-8) !important; padding-right: var(--a360-space-8) !important; }
.a360-px-9{ padding-left: var(--a360-space-9) !important; padding-right: var(--a360-space-9) !important; }
.a360-px-10{ padding-left: var(--a360-space-10) !important; padding-right: var(--a360-space-10) !important; }
.a360-px-11{ padding-left: var(--a360-space-11) !important; padding-right: var(--a360-space-11) !important; }

.a360-py-0{ padding-top: var(--a360-space-0) !important; padding-bottom: var(--a360-space-0) !important; }
.a360-py-1{ padding-top: var(--a360-space-1) !important; padding-bottom: var(--a360-space-1) !important; }
.a360-py-2{ padding-top: var(--a360-space-2) !important; padding-bottom: var(--a360-space-2) !important; }
.a360-py-3{ padding-top: var(--a360-space-3) !important; padding-bottom: var(--a360-space-3) !important; }
.a360-py-4{ padding-top: var(--a360-space-4) !important; padding-bottom: var(--a360-space-4) !important; }
.a360-py-5{ padding-top: var(--a360-space-5) !important; padding-bottom: var(--a360-space-5) !important; }
.a360-py-6{ padding-top: var(--a360-space-6) !important; padding-bottom: var(--a360-space-6) !important; }
.a360-py-7{ padding-top: var(--a360-space-7) !important; padding-bottom: var(--a360-space-7) !important; }
.a360-py-8{ padding-top: var(--a360-space-8) !important; padding-bottom: var(--a360-space-8) !important; }
.a360-py-9{ padding-top: var(--a360-space-9) !important; padding-bottom: var(--a360-space-9) !important; }
.a360-py-10{ padding-top: var(--a360-space-10) !important; padding-bottom: var(--a360-space-10) !important; }
.a360-py-11{ padding-top: var(--a360-space-11) !important; padding-bottom: var(--a360-space-11) !important; }

/* Padding sides (only top/bottom needed for now) */
.a360-pt-0{ padding-top: var(--a360-space-0) !important; }
.a360-pt-1{ padding-top: var(--a360-space-1) !important; }
.a360-pt-2{ padding-top: var(--a360-space-2) !important; }
.a360-pt-3{ padding-top: var(--a360-space-3) !important; }
.a360-pt-4{ padding-top: var(--a360-space-4) !important; }
.a360-pt-5{ padding-top: var(--a360-space-5) !important; }
.a360-pt-6{ padding-top: var(--a360-space-6) !important; }
.a360-pt-7{ padding-top: var(--a360-space-7) !important; }
.a360-pt-8{ padding-top: var(--a360-space-8) !important; }
.a360-pt-9{ padding-top: var(--a360-space-9) !important; }
.a360-pt-10{ padding-top: var(--a360-space-10) !important; }
.a360-pt-11{ padding-top: var(--a360-space-11) !important; }

.a360-pb-0{ padding-bottom: var(--a360-space-0) !important; }
.a360-pb-1{ padding-bottom: var(--a360-space-1) !important; }
.a360-pb-2{ padding-bottom: var(--a360-space-2) !important; }
.a360-pb-3{ padding-bottom: var(--a360-space-3) !important; }
.a360-pb-4{ padding-bottom: var(--a360-space-4) !important; }
.a360-pb-5{ padding-bottom: var(--a360-space-5) !important; }
.a360-pb-6{ padding-bottom: var(--a360-space-6) !important; }
.a360-pb-7{ padding-bottom: var(--a360-space-7) !important; }
.a360-pb-8{ padding-bottom: var(--a360-space-8) !important; }
.a360-pb-9{ padding-bottom: var(--a360-space-9) !important; }
.a360-pb-10{ padding-bottom: var(--a360-space-10) !important; }
.a360-pb-11{ padding-bottom: var(--a360-space-11) !important; }

/* =========================================================
   HEADER (Final, Pro, No Shadow)
   ========================================================= */

/* Sticky header */
.a360-nav{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--a360-border);
}
.a360-nav::after{
  content:"";
  display:block;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(91,91,247,0),
    rgba(91,91,247,.30),
    rgba(124,92,255,.22),
    rgba(91,91,247,0)
  );
}

/* Make sure dropdowns can overflow */
.a360-nav,
.a360-container,
.a360-nav-inner{ overflow: visible; }

.a360-nav-inner{
  min-height: 82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}

.a360-left{ display:inline-flex; align-items:center; gap: 12px; }
.a360-right{ display:inline-flex; align-items:center; gap: 12px; }

/* Brand */
.a360-brand{ display:inline-flex; align-items:center; }
.a360-brand img{ height: 46px; width:auto; }
.a360-divider-v{ color: var(--a360-text-2); opacity: .7; }

/* City dropdown */
.a360-city{ position: relative; }
.a360-city-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 1.2rem;
  border-radius: 999px;
  border: 1px solid #e6e8ff;
  background: #fbfbff;
  color: #1f2a44;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.a360-city-btn{ cursor:pointer; }
.a360-city-label{ font-size: 12px; font-weight: 700; color: var(--a360-text-2); }
.a360-city-dot{ opacity:.6; }
.a360-city-name{font-weight: 600;letter-spacing: -0.4px; }
.a360-city-caret{ margin-left: 6px; opacity: .65; }

.a360-city-panel{
  display:none;
  position:absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 260px;
  padding: 10px;
  background:#fff;
  border: 1px solid var(--a360-border);
  border-radius: 18px;
  z-index: 9999;
}
.a360-city-panel.is-open{ display:block; }

.a360-city-panel a{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-weight: 700;
  color: var(--a360-text);
}
.a360-city-panel a:hover{
  background:#f6f7ff;
  border-color:#e7e9ff;
}
.a360-city-panel a.is-disabled{ opacity:.5; cursor:not-allowed; }

.a360-city-tag{
  font-size: 12px;
  font-weight: 800;
  color: #2a2ad6;
  background: #f0f1ff;
  border: 1px solid #e3e6ff;
  padding: 4px 8px;
  border-radius: 999px;
}

.a360-city-divider{ height:1px; background: var(--a360-border); margin: 8px 6px; }
.a360-city-soon{ font-size:12px; font-weight:800; color: var(--a360-text-2); padding: 6px 8px; }

/* WP menu (desktop) */
.a360-desktop-menu{ display:block; }
.a360-mobile-menu{ display:none; }

.a360-nav-menu ul{ display:flex; align-items:center; gap: 10px; }
.a360-nav-menu > ul > li{ position: relative; }

.a360-nav-menu a{
  display:inline-flex;
  align-items:center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--a360-text);
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.a360-nav-menu a:hover{ background:#f6f7ff; border-color:#e7e9ff; }
.a360-nav-menu a:active{ transform: translateY(1px); }

.a360-nav-menu .current-menu-item > a{
  background:#f0f1ff;
  border-color:#e3e6ff;
  color:#2a2ad6;
}

/* Caret for parent items */
.a360-nav-menu > ul > li.menu-item-has-children > a::after{
  content: "▾";
  font-size: 12px;
  margin-left: 8px;
  opacity: .65;
  transform: translateY(-1px);
}

/* Dropdown panel */
.a360-nav-menu .sub-menu{
  display:none;
  position:absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 280px;
  padding: 10px;
  background:#fff;
  border: 1px solid var(--a360-border);
  border-radius: 18px;
  z-index: 9999;
}

/* Hover bridge (fix closing while moving cursor) */
.a360-nav-menu .sub-menu::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
  background: transparent;
}

@media (min-width: 901px){
  .a360-nav-menu li:hover > .sub-menu{ display:block; }
}

.a360-nav-menu .sub-menu li{ width:100%; }
.a360-nav-menu .sub-menu a{
  display:flex;
  align-items:center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: #fff;
  font-size: 0.938rem;
  font-weight: 600;
}
.a360-nav-menu .sub-menu a:hover{
  background:#f6f7ff;
  border-color:#e7e9ff;
}

/* Mobile menu */
.menu-toggle.a360-menu-toggle{
  display:none;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--a360-border);
  background:#fff;
  font-weight: 800;
}

@media (max-width: 900px){
  .menu-toggle.a360-menu-toggle{ display:inline-flex; }
  .a360-desktop-menu{ display:none; }
  .a360-cta{ display:none; }

  .a360-mobile-menu{
    display:none;
    position:absolute;
    left:0; right:0;
    top: 82px;
    background:#fff;
    border-bottom: 1px solid var(--a360-border);
    padding: 14px 16px 18px;
  }
  .a360-mobile-menu.is-open{ display:block; }

  .a360-mobile-menu ul{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .a360-mobile-menu a{
    width: 100%;
    justify-content: space-between;
    border: 1px solid var(--a360-border);
    border-radius: var(--a360-r2);
    background: #fff;
    padding: 12px 14px;
  }

  .a360-mobile-menu .sub-menu{
    position: static;
    display:block;
    border: 0;
    padding: 8px 0 0 14px;
    background: transparent;
  }

  .a360-mobile-menu > ul > li.menu-item-has-children > a::after{ content:""; }
}

/* =========================================================
   HERO (Index)
   ========================================================= */
.a360-hero{
  padding: 54px 0 64px;
  background:
    radial-gradient(900px 240px at 20% 0%, rgba(91,91,247,.10), rgba(255,255,255,0) 60%),
    radial-gradient(700px 220px at 85% 10%, rgba(153,92,255,.08), rgba(255,255,255,0) 55%);
}

.a360-hero-grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items: start;
}

@media (max-width: 980px){
  .a360-hero-grid{ grid-template-columns: 1fr; }
}

.a360-hero-kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--a360-text-2);
  border: 1px solid var(--a360-border);
  background: #fff;
  padding: 8px 24px;
  border-radius: 999px;
}

.a360-hero-title{
  margin-top: 14px;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.06em;
  font-weight: 800;
}

.a360-hero-accent{
  background: linear-gradient(90deg, var(--a360-primary), #995cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.a360-hero-sub{
  margin-top: 12px;
  font-size: 0.938rem;
  line-height: 1.6;
  color: var(--a360-text-2);
  max-width: 100%;
}

@media (max-width: 768px){
  .a360-hero-title{ font-size: 34px; }
  .a360-hero-sub{ font-size: 16px; }
}

.a360-hero-form{ margin-top: 18px; }

.a360-hero-field{
  border: 1px solid var(--a360-border);
  background: #fff;
  border-radius: 18px;
  padding: 10px;
}

.a360-hero-input{
  width: 100%;
  border: 0;
  outline: none;
  padding: 12px 12px;
  font-size: 16px;
  background: transparent;
  color: var(--a360-text);
}

.a360-hero-actions{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.a360-hero-btn{
  min-width: 140px;
  width: 100%;
}

.a360-hero-chips{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.a360-chip{
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--a360-border);
  background: #fff;
  font-weight: 600;
  color: var(--a360-text);
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
  font-size: 0.875rem;
}
.a360-chip:hover{
  background: #f6f7ff;
  border-color: #e7e9ff;
}
.a360-chip:active{ transform: translateY(1px); }

.a360-hero-note{
  margin-top: 12px;
  font-size: 13px;
  color: var(--a360-text-2);
}

/* Right preview card */
.a360-hero-card{
  border: 1px solid var(--a360-border);
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
}

.a360-hero-card-hd{
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--a360-border);
  background: #fbfbff;
}

.a360-hero-card-title{
  font-weight: 800;
  letter-spacing: -0.01em;
}
.a360-hero-card-meta{
  margin-top: 4px;
  font-size: 13px;
  color: var(--a360-text-2);
  font-weight: 600;
}

.a360-hero-card-bd{ padding: 16px 18px; }
.a360-hero-card-ft{ padding: 16px 18px; border-top: 1px solid var(--a360-border); }

.a360-hero-step{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  padding: 12px 0;
}
.a360-hero-step + .a360-hero-step{
  border-top: 1px dashed #e9ebf4;
}

.a360-hero-time{
  font-weight: 800;
  color: #2a2ad6;
}

.a360-hero-step-title{
  font-weight: 700;
  letter-spacing: -0.01em;
}
.a360-hero-step-sub{
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--a360-text-2);
}
/* Kicker dot */
.a360-hero-kicker{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* The dot */
.a360-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--a360-primary);
  position: relative;
  flex: 0 0 auto;
}

/* Soft pulse ring (no shadow, clean) */
.a360-dot::after{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 2px solid rgba(91,91,247,.22);
  transform: scale(.65);
  opacity: 0;
  animation: a360Pulse 1.6s ease-out infinite;
}

/* Subtle second ring (optional but nice) */
.a360-dot::before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  border: 1px solid rgba(153,92,255,.25);
  opacity: .9;
}

/* Animation */
@keyframes a360Pulse{
  0%   { transform: scale(.65); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .a360-dot::after{ animation: none; opacity: .35; transform: scale(1); }
}

/* ================================
   Billing switch (Aylık/Yıllık)
================================ */
.a360-billing{
  margin-top: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
}

.a360-billing-label{
  font-size: 14px;
  font-weight: 800;
  color: var(--a360-text-2);
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.a360-billing-label.is-active{
  background: #fff;
  border-color: var(--a360-border);
  color: var(--a360-text);
}

.a360-billing-save{
  font-size: 12px;
  font-weight: 900;
  color: #2a2ad6;
  background: #f0f1ff;
  border: 1px solid #e3e6ff;
  padding: 4px 8px;
  border-radius: 999px;
}

/* Switch button */
.a360-switch{
  width: 52px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--a360-border);
  background: #fff;
  position: relative;
  padding: 0;
}

.a360-switch-knob{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  position:absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--a360-primary), #995cff);
  transition: left .18s ease;
}

.a360-billing[data-a360-billing="yearly"] .a360-switch-knob{
  left: 25px;
}

/* ================================
   Pricing (updated)
================================ */
.a360-pricing{
  padding: 56px 0 72px;
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(91,91,247,.08), rgba(255,255,255,0) 60%),
    radial-gradient(800px 260px at 85% 20%, rgba(153,92,255,.06), rgba(255,255,255,0) 55%);
}

.a360-pricing-head{
  max-width: 780px;
  margin: 0 auto 22px;
  text-align: center;
}

.a360-pricing-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--a360-text-2);
  border: 1px solid var(--a360-border);
  background: #fff;
  padding: 8px 12px;
  border-radius: 999px;
}

.a360-pricing-title{
  margin-top: 14px;
  font-size: 32px;
  line-height: 1.14;
  letter-spacing: -0.05em;
  font-weight: 900;
}

.a360-pricing-sub{
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--a360-text-2);
    font-weight: 500;
    letter-spacing: -0.4px;
}

@media (max-width: 768px){
  .a360-pricing-title{ font-size: 26px; }
}

.a360-pricing-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
  margin-top: 48px;
}

@media (max-width: 980px){
  .a360-pricing-grid{ grid-template-columns: 1fr; }
}

/* Plan card */
.a360-plan{
  position: relative;
  background: #fff;
  border: 1px solid var(--a360-border);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* IMPORTANT: allow featured pill to sit without clipping */
.a360-plan-featured{ overflow: visible; }

.a360-plan-hd{
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--a360-border);
  background: #fbfbff;
  -webkit-border-top-left-radius: 32px;
-webkit-border-top-right-radius: 32px;
-moz-border-radius-topleft: 32px;
-moz-border-radius-topright: 32px;
border-top-left-radius: 32px;
border-top-right-radius: 32px;
}

.a360-plan-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.a360-plan-name{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.a360-plan-price{
  margin-top: 10px;
  display:flex;
  align-items: baseline;
  gap: 8px;
}

.a360-plan-price-main{
  font-size: 32px;
  font-weight: 950;
  letter-spacing: -0.02em;
}

.a360-plan-price-sub{
  font-size: 14px;
  font-weight: 700;
  color: var(--a360-text-2);
}

.a360-plan-credit{
  margin-top: 6px;
  font-size: 14px;
  color: var(--a360-text-2);
  font-weight: 700;
}

.a360-plan-small{
  margin-top: 8px;
  font-size: 13px;
  color: var(--a360-text-2);
  font-weight: 650;
  display: none; /* only show on yearly */
}

/* show yearly notes when yearly selected */
.a360-billing[data-a360-billing="yearly"] ~ .a360-pricing-grid .a360-plan-small{
  display: block;
}

.a360-plan-bd{
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}

.a360-plan-list{
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--a360-text);
  font-weight: 700;
}

.a360-plan-list li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  line-height: 1.35;
  font-weight: 600;
  font-size: 0.938em;
}

.a360-check,
.a360-x{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--a360-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  flex: 0 0 auto;
  transform: translateY(1px);
}

.a360-check{
  background: #f6f7ff;
  border-color: #e7e9ff;
  color: #2a2ad6;
}

.a360-x{
  background: #fff;
  color: var(--a360-muted);
}

.a360-plan-list li.is-muted{
  color: var(--a360-text-2);
  opacity: .75;
}

.a360-plan-note{
  margin: 0;
  font-size: 13px;
  color: var(--a360-text-2);
  font-weight: 650;
  text-align: center;
}

/* Badges */
.a360-badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid var(--a360-border);
  background: #fff;
  color: var(--a360-text-2);
  white-space: nowrap;
}

.a360-badge-soft{
  background: #f6f7ff;
  border-color: #e7e9ff;
  color: #2a2ad6;
}

.a360-badge-primary{
  background: rgba(91,91,247,.10);
  border-color: rgba(91,91,247,.22);
  color: #2a2ad6;
}

.a360-badge-outline{
  background: #fff;
  border-color: var(--a360-border);
  color: var(--a360-text-2);
}

/* Featured (Plus) border + subtle bg */
.a360-plan-featured{
  border-color: rgba(91,91,247,.35);
  background:
    radial-gradient(900px 260px at 30% 0%, rgba(91,91,247,.09), rgba(255,255,255,0) 60%),
    #fff;
}

/* ✅ FIXED Featured pill (no “patlama”) */
.a360-feature-pill{
  position: absolute;
    top: -20px;
    left: 18px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 950;
    background: rgb(238 240 255);
    border: 1px solid rgba(91, 91, 247, .24);
    color: #2a2ad6;
    white-space: nowrap;
}

/* On mobile center pill */
@media (max-width: 980px){
  .a360-feature-pill{
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Add-ons + FAQ (same as before; keep yours if already works) */
/* ... (senin mevcut a360-addons ve a360-pricing-faq blokların kalabilir) */

/* ================================
   Pricing – Add-ons + FAQ FIX
================================ */

/* Add-ons wrapper */
.a360-addons{
  margin-top: 16px;
  border: 1px solid var(--a360-border);
  border-radius: 18px;
  background: #fff;
  padding: 16px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
  align-items: center;
}

@media (max-width: 980px){
  .a360-addons{
    grid-template-columns: 1fr;
  }
}

.a360-addons-title{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0;
}

.a360-addons-sub{
  margin-top: 6px;
  font-size: 14px;
  font-weight: 650;
  color: var(--a360-text-2);
}

.a360-addons-right{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 980px){
  .a360-addons-right{
    grid-template-columns: 1fr;
  }
}

/* Add-on cards */
.a360-addon{
  display: block;
  border: 1px solid var(--a360-border);
  border-radius: 16px;
  padding: 12px 12px;
  background: #fbfbff;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}

.a360-addon:hover{
  background: #f6f7ff;
  border-color: #e7e9ff;
}

.a360-addon:active{
  transform: translateY(1px);
}

.a360-addon-top{
  display:block;
  font-size: 14px;
  font-weight: 950;
  color: var(--a360-text);
  letter-spacing: -0.01em;
}

.a360-addon-sub{
  display:block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 750;
  color: var(--a360-text-2);
}

/* FAQ grid */
.a360-pricing-faq{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 980px){
  .a360-pricing-faq{
    grid-template-columns: 1fr;
  }
}

.a360-faq-item{
  border: 1px solid var(--a360-border);
  border-radius: 18px;
  background: #fff;
  padding: 14px 14px;
}

.a360-faq-q{
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -0.01em;
  margin: 0;
}

.a360-faq-a{
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 650;
  color: var(--a360-text-2);
}

/* ================================
   Pricing – Add-ons + FAQ FIX
================================ */
.a360-addons{
  margin-top: 16px;
  border: 1px solid var(--a360-border);
  border-radius: 18px;
  background: #fff;
  padding: 16px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
  align-items: center;
}

@media (max-width: 980px){
  .a360-addons{ grid-template-columns: 1fr; }
}

.a360-addons-title{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0;
}

.a360-addons-sub{
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--a360-text-2);
}

.a360-addons-right{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 980px){
  .a360-addons-right{ grid-template-columns: 1fr; }
}

.a360-addon{
  display: block;
  border: 1px solid var(--a360-border);
  border-radius: 16px;
  padding: 12px;
  background: #fbfbff;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}

.a360-addon:hover{
  background: #f6f7ff;
  border-color: #e7e9ff;
}

.a360-addon:active{ transform: translateY(1px); }

.a360-addon-top{
  display:block;
  font-size: 14px;
  font-weight: 950;
  color: var(--a360-text);
  letter-spacing: -0.01em;
}

.a360-addon-sub{
  display:block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 750;
  color: var(--a360-text-2);
}

/* FAQ grid */
.a360-pricing-faq{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 980px){
  .a360-pricing-faq{ grid-template-columns: 1fr; }
}

.a360-faq-item{
  border: 1px solid var(--a360-border);
  border-radius: 18px;
  background: #fff;
  padding: 14px;
}

.a360-faq-q{
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -0.01em;
  margin: 0;
}

.a360-faq-a{
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--a360-text-2);
}

/* =========================================================
   A360 – HOW IT WORKS
   ========================================================= */

.a360-how{
  padding: 64px 0;
  background: radial-gradient(900px 320px at 50% 0%,
    rgba(91,91,247,.10),
    rgba(91,91,247,0) 60%),
    #fff;
}

.a360-how-head{
  text-align: center;
  max-width: 820px;
  margin: 0 auto 28px;
}

.a360-how-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--a360-border);
  background: #fff;
  font-weight: 800;
  color: var(--a360-text-2);
}

.a360-how-title{
  margin-top: 14px;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 900;
}

.a360-how-sub{
  margin-top: 10px;
  color: var(--a360-text-2);
  font-size: 16px;
}

/* Steps grid */
.a360-how-steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 26px;
}

.a360-how-card{
  border: 1px solid var(--a360-border);
  border-radius: 22px;
  background: #fff;
  padding: 18px;
}

.a360-how-card-top{
  display: flex;
  align-items: center;
  gap: 10px;
}

.a360-how-step{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #2a2ad6;
  background: #f0f1ff;
  border: 1px solid #e3e6ff;
}

.a360-how-card-title{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.a360-how-card-text{
  margin-top: 10px;
  color: var(--a360-text-2);
  line-height: 1.55;
  font-size:0.938rem;
}

.a360-how-media{
  margin-top: 14px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--a360-border);
  background: #fafbff;
}

.a360-how-media img{
  width: 100%;
  height: auto;
  display: block;
}

.a360-how-bullets{
  margin-top: 12px;
  display: grid;
  gap: 8px;
  color: var(--a360-text);
  font-weight: 700;
}

.a360-how-bullets li{
  padding-left: 14px;
  position: relative;
  color: var(--a360-text-2);
  font-weight: 700;
}

.a360-how-bullets li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(91,91,247,.55);
}

/* Engine area */
.a360-how-engine{
  margin-top: 22px;
  border: 1px solid var(--a360-border);
  border-radius: 26px;
  background: #fff;
  padding: 20px;
}

.a360-engine-head{
  text-align: center;
  max-width: 860px;
  margin: 0 auto 14px;
}

.a360-engine-title{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.a360-engine-sub{
  margin-top: 8px;
  color: var(--a360-text-2);
}

.a360-engine-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.a360-engine-card{
  border: 1px solid var(--a360-border);
  border-radius: 22px;
  background: #fff;
  padding: 16px;
}

.a360-engine-top{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.a360-engine-tag{
  font-size: 12px;
  font-weight: 900;
  color: #2a2ad6;
  background: #f0f1ff;
  border: 1px solid #e3e6ff;
  padding: 6px 10px;
  border-radius: 999px;
}

.a360-engine-title2{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.a360-engine-text{
  margin-top: 10px;
  color: var(--a360-text-2);
  line-height: 1.55;
  font-size:0.938rem;
}

.a360-engine-media{
  margin-top: 12px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--a360-border);
  background: #fafbff;
}

.a360-engine-media img{
  width: 100%;
  height: auto;
  display: block;
}

.a360-engine-list{
  margin-top: 12px;
  display: grid;
  gap: 8px;
  color: var(--a360-text-2);
  font-weight: 700;
}

.a360-engine-list li{
  padding-left: 14px;
  position: relative;
}

.a360-engine-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(124,92,255,.55);
}

/* Model box */
.a360-how-model{
  margin-top: 16px;
  border: 1px solid var(--a360-border);
  border-radius: 26px;
  background: #fff;
  padding: 18px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  align-items: center;
}

.a360-model-title{
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.a360-model-sub{
  margin-top: 8px;
  color: var(--a360-text-2);
  line-height: 1.55;
}

.a360-model-right{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.a360-model-box{
  border: 1px solid var(--a360-border);
  border-radius: 22px;
  background: #fff;
  padding: 14px;
}

.a360-model-box.is-strong{
  border-color: rgba(91,91,247,.35);
  background: rgba(91,91,247,.06);
}

.a360-model-k{
  font-size: 14px;
  font-weight: 900;
  color: var(--a360-text);
}

.a360-model-list{
  margin-top: 10px;
  display: grid;
  gap: 8px;
  color: var(--a360-text-2);
  font-weight: 700;
}

/* CTA */
.a360-how-cta{
  margin-top: 18px;
  text-align: center;
}

.a360-how-cta-sub{
  margin-top: 10px;
  color: var(--a360-text-2);
  font-weight: 700;
}

/* Responsive */
@media (max-width: 980px){
  .a360-how-steps{ grid-template-columns: 1fr; }
  .a360-engine-grid{ grid-template-columns: 1fr; }
  .a360-how-model{ grid-template-columns: 1fr; }
  .a360-model-right{ grid-template-columns: 1fr; }
}
/* =========================================
   A360 – PROOF / REAL PLAN EXAMPLE
   No shadow, border-based, clean
   ========================================= */

.a360-proof{
  padding: var(--a360-s10) 0;
  background:
    radial-gradient(900px 380px at 20% 0%, rgba(91,91,247,.10), rgba(255,255,255,0)),
    radial-gradient(900px 420px at 90% 10%, rgba(153,92,255,.10), rgba(255,255,255,0));
}

.a360-proof-head{
  max-width: 760px;
  margin: 0 auto var(--a360-s7);
  text-align: center;
}

.a360-proof-kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--a360-border);
  background: rgba(255,255,255,.85);
  font-weight: 800;
  color: var(--a360-text-2);
}

.a360-proof-title{
  margin-top: 24px;
    font-size: 32px;
    line-height: 1.14;
    letter-spacing: -0.05em;
    font-weight: 900;
}

.a360-proof-sub{
  margin-top: var(--a360-s4);
  font-size: 16px;
  color: var(--a360-text-2);
}

.a360-proof-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--a360-s7);
  align-items: start;
}

.a360-proof-left{
  border: 1px solid var(--a360-border);
  border-radius: var(--a360-r3);
  background: rgba(255,255,255,.86);
  padding: var(--a360-s7);
}

.a360-proof-bullets{
  display: grid;
  gap: 14px;
}

.a360-proof-bullet{
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border-radius: var(--a360-r2);
  border: 1px solid var(--a360-border);
  background: #fff;
}

.a360-proof-ic{
  width: 42px; height: 42px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 14px;
  border: 1px solid #e7e9ff;
  background: #f6f7ff;
  font-size: 18px;
}

.a360-proof-bt{
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.a360-proof-bd{
  color: var(--a360-text-2);
  font-size: 14px;
  line-height: 1.45;
}

.a360-proof-cta{
  margin-top: var(--a360-s7);
  display:flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.a360-proof-note{
  margin: 0;
  font-size: 13px;
  color: var(--a360-text-2);
}

/* Plan demo card */
.a360-plan-demo{
  border: 1px solid var(--a360-border);
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  overflow: hidden;
}

.a360-plan-demo-hd{
  padding: var(--a360-s6);
  border-bottom: 1px solid var(--a360-border);
}

.a360-plan-demo-meta{
  margin-top: 6px;
  font-weight: 700;
  color: var(--a360-text-2);
}

.a360-plan-demo-tags{
  margin-top: 14px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}

.a360-chip{
  display:inline-flex;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid #e7e9ff;
  background: #f6f7ff;
  color: #2a2ad6;
  font-weight: 850;
  font-size: 13px;
}

.a360-plan-demo-body{
  padding: var(--a360-s6);
  display: grid;
  gap: 14px;
}

.a360-step{
  display:grid;
  grid-template-columns: 78px 1fr;
  gap: 14px;
  padding: 14px;
  border-radius: var(--a360-r2);
  border: 1px solid var(--a360-border);
  background: #fff;
}

.a360-step-time{
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #2a2ad6;
  font-size: 18px;
  line-height: 1;
  padding-top: 2px;
}

.a360-step-title{
  font-weight: 900;
  letter-spacing: -0.01em;
}

.a360-step-sub{
  margin-top: 6px;
  color: var(--a360-text-2);
  font-weight: 700;
  font-size: 14px;
}

.a360-warn,
.a360-info,
.a360-local{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--a360-border);
  background: #fff;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.35;
  color: var(--a360-text);
}

.a360-warn{
  border-color: rgba(245,158,11,.35);
  background: rgba(245,158,11,.10);
}

.a360-info{
  border-color: rgba(91,91,247,.28);
  background: rgba(91,91,247,.08);
}

.a360-local{
  border-color: rgba(16,185,129,.28);
  background: rgba(16,185,129,.08);
}

.a360-plan-demo-ft{
  padding: var(--a360-s6);
  border-top: 1px solid var(--a360-border);
  background: rgba(255,255,255,.92);
}

/* Responsive */
@media (max-width: 980px){
  .a360-proof-title{ font-size: 32px; }
  .a360-proof-grid{ grid-template-columns: 1fr; }
  .a360-proof-left{ padding: var(--a360-s6); }
}
/* =========================================================
   Aktivite360 — "Kimler için?" Section (CSS)
   360.css içine ekle
========================================================== */

.a360-forwho{
  padding: var(--a360-s10) 0;
  background: radial-gradient(900px 320px at 50% 0%, rgba(91, 91, 247, .10), rgba(91, 91, 247, 0) 60%), #fff;
}

.a360-forwho-head{
  text-align: center;
  max-width: 820px;
  margin: 0 auto var(--a360-s7);
}

.a360-forwho-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid #e6e8ff;
  background: #fbfbff;
  font-weight: 900;
  color: var(--a360-text-2);
  letter-spacing: -0.01em;
}

.a360-forwho-title{
  margin-top: var(--a360-s5);
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--a360-text);
}

.a360-forwho-sub{
  margin-top: var(--a360-s4);
  font-size: 16px;
  color: var(--a360-text-2);
}

.a360-forwho-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.a360-forwho-card{
  grid-column: span 3;
  border: 1px solid var(--a360-border);
  border-radius: 18px;
  background: #fff;
  padding: 18px 18px 16px;
}

.a360-forwho-ico{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid #e7e9ff;
  background: #f6f7ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.a360-forwho-card-title{
  margin-top: 12px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--a360-text);
}

.a360-forwho-card-text{
  margin-top: 8px;
  font-size: 14px;
  color: var(--a360-text-2);
  line-height: 1.55;
}

.a360-forwho-bullets{
  margin-top: 14px;
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--a360-border);
}

.a360-forwho-bullets li{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--a360-text);
  font-weight: 700;
}

.a360-forwho-bullets li::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid rgba(91,91,247,.55);
  background: rgba(91,91,247,.10);
  flex: 0 0 auto;
}

.a360-forwho-bottom{
  margin-top: var(--a360-s7);
  text-align: center;
}

.a360-forwho-note{
  margin-top: 10px;
  font-size: 13px;
  color: var(--a360-text-2);
}

/* Responsive */
@media (max-width: 1024px){
  .a360-forwho-card{ grid-column: span 6; }
}

@media (max-width: 640px){
  .a360-forwho{ padding: var(--a360-s8) 0; }
  .a360-forwho-title{ font-size: 28px; }
  .a360-forwho-card{ grid-column: span 12; }
}
/* =========================================================
   Aktivite360 — Neden Aktivite360?
========================================================== */

.a360-why{
  padding: var(--a360-s10) 0;
  background: linear-gradient(180deg,
    rgba(91,91,247,.06),
    rgba(255,255,255,0) 70%);
}

.a360-why-head{
  text-align: center;
  max-width: 820px;
  margin: 0 auto var(--a360-s7);
}

.a360-why-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid #e6e8ff;
  background: #fbfbff;
  font-weight: 900;
  color: var(--a360-text-2);
}

.a360-why-title{
  margin-top: var(--a360-s5);
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 900;
}

.a360-why-title span{
  color: var(--a360-primary);
}

.a360-why-sub{
  margin-top: var(--a360-s4);
  font-size: 16px;
  color: var(--a360-text-2);
}

/* Compare layout */
.a360-why-compare{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.a360-why-col{
  grid-column: span 6;
  border: 1px solid var(--a360-border);
  border-radius: 18px;
  background: #fff;
  padding: 20px;
}

.a360-why-col-title{
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 12px;
}

/* List */
.a360-why-items{
  display: grid;
  gap: 10px;
}

.a360-why-items li{
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  color: var(--a360-text-2);
}

.a360-why-items li::before{
  content: "–";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 900;
  opacity: .6;
}

/* Aktivite360 highlight */
.a360-why-a360{
  border-color: rgba(91,91,247,.35);
  background: #fafbff;
}

.a360-why-items.is-highlight li{
  color: var(--a360-text);
  font-weight: 700;
}

.a360-why-items.is-highlight li::before{
  content: "✓";
  color: var(--a360-primary);
  opacity: 1;
}

/* Punchline */
.a360-why-foot{
  margin-top: var(--a360-s7);
  text-align: center;
}

.a360-why-punch{
  font-size: 18px;
  line-height: 1.45;
  color: var(--a360-text);
}

/* Responsive */
@media (max-width: 768px){
  .a360-why-title{ font-size: 28px; }
  .a360-why-col{ grid-column: span 12; }
}

/* =========================================================
   Aktivite360 — Final CTA
========================================================== */

.a360-final-cta{
  padding: var(--a360-s11) 0;
  background: radial-gradient(900px 320px at 50% 0%, rgba(91, 91, 247, .10), rgba(91, 91, 247, 0) 60%), #fff;
}

.a360-final-box{
  border: 1px solid rgba(91,91,247,.35);
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff, #fafbff);
  padding: 48px 32px;
  text-align: center;
}

.a360-final-title{
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--a360-text);
}

.a360-final-title span{
  color: var(--a360-primary);
}

.a360-final-sub{
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--a360-text-2);
}

.a360-final-actions{
  margin-top: 28px;
}

.a360-final-btn{
  padding: 16px 26px;
  font-size: 17px;
}

/* Trust bullets */
.a360-final-trust{
  margin-top: 22px;
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.a360-final-trust li{
  font-size: 14px;
  font-weight: 700;
  color: var(--a360-text-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Responsive */
@media (max-width: 768px){
  .a360-final-box{
    padding: 36px 22px;
  }

  .a360-final-title{
    font-size: 28px;
  }

  .a360-final-sub{
    font-size: 15px;
  }
}
/* =========================================================
   Aktivite360 — Mini FAQ
========================================================== */

.a360-faq{
  padding: var(--a360-s10) 0;
  background: linear-gradient(180deg, rgba(91, 91, 247, .06), rgba(255, 255, 255, 0) 70%);
}

.a360-faq-head{
  text-align: center;
  margin-bottom: var(--a360-s7);
}

.a360-faq-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid #e6e8ff;
  background: #fbfbff;
  font-weight: 900;
  color: var(--a360-text-2);
}

.a360-faq-title{
  margin-top: var(--a360-s5);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* FAQ list */
.a360-faq-list{
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.a360-faq-item{
  border: 1px solid var(--a360-border);
  border-radius: 16px;
  padding: 14px 16px;
  background: #fff;
}

.a360-faq-q{
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.a360-faq-q::-webkit-details-marker{
  display: none;
}

.a360-faq-q::after{
  content: "+";
  font-size: 20px;
  font-weight: 900;
  opacity: .6;
  transition: transform .2s ease;
}

.a360-faq-item[open] .a360-faq-q::after{
  content: "–";
}

.a360-faq-a{
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--a360-text-2);
}

/* Responsive */
@media (max-width: 768px){
  .a360-faq-title{
    font-size: 26px;
  }
}
/* =========================================================
   Footer — Made in İstanbul + FerdiYuzmec credit
========================================================== */

.a360-footer-made{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--a360-text-2);
}

.a360-heart{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(91,91,247,.25);
  background: rgba(91,91,247,.08);
  color: var(--a360-primary);
  font-size: 12px;
  line-height: 1;
}

/* FerdiYuzmec credit line */
.a360-footer-credit{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--a360-border);
  display: flex;
  justify-content: center;
}

.a360-footer-credit-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--a360-border);
  background: #fff;
  font-weight: 900;
  color: var(--a360-text-2);
}

.a360-footer-credit-link:hover{
  background: #f6f7ff;
  border-color: #e7e9ff;
  color: var(--a360-text);
}

.a360-footer-credit-logo{
  height: 18px;
  width: auto;
  display: block;
}

.a360-footer-credit-text{
  font-size: 13px;
  letter-spacing: -0.01em;
}

/* Responsive: bottom layout stack nicely */
@media (max-width: 768px){
  .a360-footer-bottom{
    flex-direction: column;
    align-items: flex-start;
  }
  .a360-footer-toplink{
    align-self: flex-start;
  }
}
/* =========================================================
   Aktivite360 — Footer (No Shadow)
========================================================== */

.a360-footer{
  border-top: 1px solid var(--a360-border);
  background: linear-gradient(180deg, #fff, #fafbff);
  padding: var(--a360-s10) 0 var(--a360-s6);
}

.a360-footer-top{
  display: grid;
  grid-template-columns: 1.1fr 1.9fr;
  gap: 24px;
  padding-bottom: var(--a360-s7);
  border-bottom: 1px solid var(--a360-border);
}

.a360-footer-brand{
  border: 1px solid var(--a360-border);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  padding: 18px;
}

.a360-footer-logo img{
  height: 42px;
  width: auto;
}

.a360-footer-tagline{
  margin-top: 12px;
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: 16px;
  color: var(--a360-text);
}

.a360-footer-desc{
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--a360-text-2);
}

.a360-footer-social{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.a360-social{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--a360-border);
  background: #fff;
  font-weight: 800;
  font-size: 13px;
}
.a360-social:hover{
  background: #f6f7ff;
  border-color: #e7e9ff;
}

/* link columns */
.a360-footer-links{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.a360-footer-col{
  border: 1px solid var(--a360-border);
  border-radius: 18px;
  background: #fff;
  padding: 18px;
}

.a360-footer-col-title{
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.a360-footer-menu{
  display: grid;
  gap: 8px;
}

.a360-footer-menu a{
  display: inline-flex;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--a360-text-2);
  font-weight: 800;
  font-size: 14px;
}
.a360-footer-menu a:hover{
  background: #f6f7ff;
  border-color: #e7e9ff;
  color: var(--a360-text);
}

/* bottom bar */
.a360-footer-bottom{
  margin-top: var(--a360-s6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.a360-footer-bottom-left{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 800;
  color: var(--a360-text-2);
}

.a360-footer-bottom-left a{
  color: var(--a360-text-2);
  border-bottom: 1px solid transparent;
}
.a360-footer-bottom-left a:hover{
  color: var(--a360-text);
  border-bottom-color: var(--a360-border);
}

.a360-footer-dot{
  opacity: .6;
}

.a360-footer-toplink{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--a360-border);
  background: #fff;
  font-weight: 900;
  font-size: 13px;
}
.a360-footer-toplink:hover{
  background: #f6f7ff;
  border-color: #e7e9ff;
}

/* responsive */
@media (max-width: 980px){
  .a360-footer-top{
    grid-template-columns: 1fr;
  }
  .a360-footer-links{
    grid-template-columns: 1fr;
  }
}
.a360-sr-only { padding-left: 12px;}