"/*
Theme Name: Hoooptap
Theme URI: https://hoooptap.com
Author: Hoooptap
Description: Hoooptap NFC bağlantı ürünleri için modern WooCommerce teması.
Version: 2.0.0
Text Domain: hoooptap*/

:root {
    --blue:#315cff;
    --ink:#0b0d12;
    --muted:#69707c;
    --line:#e7e9ee;
    --soft:#f5f7fa;
    --dark:#0a111b;
    --mint:#68e7d0;
    --lime:#b8ff62
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    overflow-x:hidden
}
/* Header ve Genel Düzen */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  position: relative;
}

.brand {
  font-size: 1.8rem;
  font-weight: 800;
  color: #000;
  text-decoration: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* WordPress wp_nav_menu (ul/li) ve standart linklerin sıfırlanması */
.nav ul {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a:not(.nav-cart) {
  color: #0f172a;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}

/* Sepet Butonu */
.nav-cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #f8fafc;
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  color: #0f172a;
  font-weight: 600;
  border: 1px solid #e2e8f0;
}

.cart-count {
  background-color: #000;
  color: #fff;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 10px;
}

/* Checkbox Gizleme */
.menu-toggle,
.hamburger-btn {
  display: none;
}

/* Mobil Cihaz Kuralları (992px Altı) */
@media (max-width: 992px) {
  .hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    cursor: pointer;
    z-index: 1001;
  }

  .hamburger-btn span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #000;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
  }

  /* Mobil Açılır Menü Panel */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #ffffff;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    z-index: 1000;
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease-in-out;
  }

  .nav ul {
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
    gap: 0;
  }

  .nav li {
    width: 100%;
  }

  .nav a:not(.nav-cart) {
    display: block;
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
  }

  .nav-cart {
    margin-top: 16px;
    width: 100%;
    justify-content: center;
  }

  /* Menü Açılma Tetikleyicisi */
  .menu-toggle:checked ~ .nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* İkon Animasyonu */
  .menu-toggle:checked ~ .hamburger-btn span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .menu-toggle:checked ~ .hamburger-btn span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle:checked ~ .hamburger-btn span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }
}
body {
    margin:0;
    color:var(--ink);
    background:#fff;
    font-family:Arial,Helvetica,sans-serif;
    overflow-x:hidden
}
a {
    color:inherit;
    text-decoration:none
}
img {
    max-width:100%;
    height:auto
}
.wrap {
    width:min(100% - 40px,1120px);
    margin-inline:auto
}
.section {
    padding:clamp(72px,9vw,132px) 0
}
.eyebrow {
    display:block;
    color:var(--blue);
    font-size:10px;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase
}
.site-header {
    border-bottom:1px solid var(--line);
    background:#fff
}
.header-inner {
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px
}
.brand {
    font-weight:900;
    letter-spacing:-.07em;
    font-size:20px
}
.nav {
    display:flex;
    align-items:center;
    gap:24px;
    font-size:12px;
    font-weight:700
}
.nav a:hover {
    color:var(--blue)
}
.hero {
    padding:clamp(72px,10vw,148px) 0 92px;
    background:radial-gradient(circle at 82% 40%,#eaf0ff 0,transparent 29%),#fff
}
.hero-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);
    align-items:center;
    gap:clamp(48px,8vw,120px)
}
h1,h2,h3,p {
    margin-top:0
}
.hero h1 {
    max-width:690px;
    margin:18px 0 24px;
    font-size:clamp(58px,8vw,112px);
    line-height:.86;
    letter-spacing:-.095em
}
.hero p {
    max-width:570px;
    color:var(--muted);
    line-height:1.75;
    font-size:16px
}
.actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:30px
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 20px;
    border-radius:999px;
    background:var(--blue);
    color:#fff;
    font-size:12px;
    font-weight:800;
    transition:transform .2s,box-shadow .2s
}
.button:hover {
    transform:translateY(-3px);
    box-shadow:0 12px 24px #315cff3b
}
.button.alt {
    background:#fff;
    color:var(--ink);
    border:1px solid var(--line)
}
.hero-proof {
    display:flex;
    flex-wrap:wrap;
    gap:10px 22px;
    margin-top:24px;
    color:var(--muted);
    font-size:12px
}
.hero-proof span:before {
    content:'+';
    color:var(--blue);
    font-weight:900;
    margin-right:5px
}
.nfc-scene {
    position:relative;
    isolation:isolate;
    min-height:470px;
    border-radius:32px;
    background:linear-gradient(145deg,#0b1017,#111b29);
    overflow:hidden;
    box-shadow:0 28px 70px #0a111b24
}
.nfc-glow {
    position:absolute;
    inset:18% 15%;
    background:#315cff;
    filter:blur(60px);
    opacity:.45
}
.nfc-card {
    position:absolute;
    z-index:2;
    left:16%;
    top:39%;
    width:215px;
    height:135px;
    padding:22px;
    border-radius:18px;
    background:linear-gradient(135deg,#315cff,#1741d8);
    color:#fff;
    box-shadow:0 20px 40px #0005;
    transform:rotate(-8deg);
    animation:card-drift 5s ease-in-out infinite
}
.nfc-card-brand {
    font-size:18px;
    font-weight:900;
    letter-spacing:-.08em
}
.nfc-symbol {
    position:absolute;
    right:20px;
    bottom:16px;
    font-size:32px;
    letter-spacing:-12px
}
.nfc-phone {
    position:absolute;
    z-index:3;
    right:20%;
    top:16%;
    width:150px;
    height:300px;
    padding:14px 10px;
    border:8px solid #1a1f27;
    border-radius:30px;
    background:#070a0e;
    transform:rotate(9deg);
    box-shadow:12px 22px 35px #0007;
    animation:phone-float 4s ease-in-out infinite
}
.phone-speaker {
    width:40px;
    height:5px;
    border-radius:5px;
    background:#31343b;
    margin:2px auto 18px
}
.phone-screen {
    height:245px;
    border-radius:20px;
    background:#fff;
    padding:20px 13px;
    color:#13151a
}
.review-label {
    display:block;
    font-size:10px;
    font-weight:700
}
.review-stars {
    display:block;
    margin:13px 0;
    color:#f3a900;
    letter-spacing:2px;
    font-size:12px
}
.phone-screen strong {
    font-size:14px;
    line-height:1.2
}
.review-line {
    display:block;
    height:7px;
    margin-top:24px;
    border-radius:4px;
    background:#e7e8eb
}
.review-line.short {
    width:65%;
    margin-top:10px
}
.nfc-waves {
    position:absolute;
    z-index:1;
    left:31%;
    top:36%;
    width:180px;
    height:180px;
    border:1px solid #68e7d088;
    border-radius:50%;
    animation:wave-pulse 2.6s ease-out infinite
}
.nfc-waves span {
    position:absolute;
    inset:20px;
    border:1px solid #68e7d055;
    border-radius:50%
}
.nfc-waves span:nth-child(2) {
    inset:45px
}
.nfc-waves span:nth-child(3) {
    inset:70px
}
.nfc-caption {
    position:absolute;
    bottom:28px;
    left:0;
    right:0;
    text-align:center;
    color:#aab6c6;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.2em
}
.trust-strip {
    background:#0b1421;
    color:white;
    border-block:1px solid var(--line)
}
.trust-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr)
}
.trust-grid>div {
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:8px;
    padding:24px 10px;
    border-right:1px solid var(--line)
}
.trust-grid>div:last-child {
    border:0
}
.trust-grid strong {
    font-size:30px
}
.trust-grid span {
    color:var(--muted);
    font-size:13px
}
.service-offer-card {
    min-height:260px;
    border-radius:22px;
    background:#111216;
    color:#fff;
    padding:32px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    box-shadow:18px 18px 0 #d9dce5
}
.service-offer-mark {
    color:#7d9aff;
    font-size:11px;
    letter-spacing:.16em;
    font-weight:800
}
.service-offer-card strong {
    font-size:28px;
    line-height:1.02;
    letter-spacing:-.06em
}
.service-offer-card span:last-child {
    font-size:12px;
    color:#aeb0b9
}
.service-offer-grid {
    display:grid;
    grid-template-columns:1.4fr .6fr;
    align-items:center;
    gap:70px
}
.service-offer h2,.discount-banner h2,.technology-section h2,.section-muted h2,.how-highlight h2,.cta-section h2 {
    font-size:clamp(34px,5vw,65px);
    line-height:.94;
    letter-spacing:-.08em;
    margin:14px 0 20px
}
.service-offer p,.section-intro,.how-highlight p,.cta-section p {
    max-width:700px;
    color:var(--muted);
    line-height:1.7
}
.service-offer-card {
    min-height:210px;
    padding:30px;
    border:1px solid var(--line);
    border-radius:22px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:15px;
    background:linear-gradient(145deg);
    box-shadow:0 18px 40px #15234b0a
}
.service-offer-card strong {
    font-size:25px;
    line-height:1.05;
    letter-spacing:-.07em
}
.service-offer-card>span:last-child {
    font-size:12px;
    color:var(--muted)
}
.discount-banner {
    padding:52px 0;
    background:var(--blue);
    color:#fff
}
.discount-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:36px
}
.discount-banner .eyebrow {
    color:#b8ff62
}
.discount-banner h2 {
    max-width:720px;
    margin-bottom:10px
}
.discount-banner p {
    color:#dfe5ff
}
.button-light {
    background:#fff;
    color:var(--blue);
    white-space:nowrap
}
.technology-section {
    background:#fff
}
.section-intro {
    margin-bottom:40px
}
.steps {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px
}
.step-card {
    border:1px solid var(--line);
    border-radius:22px;
    padding:16px;
    box-shadow:0 16px 40px #15234b0b
}
.step-visual {
    position:relative;
    height:190px;
    margin-bottom:24px;
    overflow:hidden;
    border-radius:15px;
    background:linear-gradient(145deg,#edf1ff,#fafbff)
}
.step-card>b {
    color:var(--blue);
    font-size:10px
}
.step-card h3 {
    margin:18px 0 8px;
    font-size:24px;
    letter-spacing:-.06em
}
.step-card p {
    color:var(--muted);
    font-size:13px;
    line-height:1.65
}
.step-card-shape {
    position:absolute;
    left:50%;
    top:62px;
    width:130px;
    height:80px;
    padding:28px 18px;
    border-radius:14px;
    background:var(--blue);
    color:#fff;
    font-size:14px;
    font-weight:900;
    transform:translateX(-50%) rotate(-8deg);
    animation:card-drift 4s ease-in-out infinite
}
.step-wave,.step-signal {
    position:absolute;
    left:50%;
    top:50%;
    width:50px;
    height:50px;
    border:2px solid var(--blue);
    border-radius:50%;
    transform:translate(-50%,-50%);
    animation:wave-pulse 2.5s ease-out infinite
}
.step-wave.wave-b {
    animation-delay:1.1s
}
.step-phone {
    position:absolute;
    left:50%;
    top:25px;
    width:90px;
    height:140px;
    padding:35px 8px 8px;
    border:6px solid #131923;
    border-radius:17px;
    background:#fff;
    transform:translateX(-50%) rotate(8deg);
    animation:phone-float 3.5s ease-in-out infinite
}
.step-phone i {
    position:absolute;
    top:9px;
    left:31px;
    width:22px;
    height:3px;
    background:#333;
    border-radius:3px
}
.step-phone strong,.step-phone small {
    display:block;
    font-size:8px
}
.step-phone small {
    margin-top:22px;
    color:var(--blue)
}
.step-result {
    position:absolute;
    left:50%;
    top:52px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
    transform:translateX(-50%);
    animation:result-pop 3s ease-in-out infinite
}
.step-result b {
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
    border-radius:50%;
    background:var(--blue);
    color:#fff;
    font-size:27px
}
.step-result small {
    white-space:nowrap;
    color:var(--muted);
    font-size:10px
}
.section-muted {
    background:var(--soft)
}
.products-home {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    color:black;
    margin-top:40px
}
.products-home .product {
    min-width:0;
    padding:12px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff
}
.analytics-section {
    background:#f1f4f8
}
.analytics-heading {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:44px;
    margin-bottom:42px
}
.analytics-heading h2 {
    margin:14px 0 0;
    font-size:clamp(46px,6vw,82px);
    line-height:.88;
    letter-spacing:-.09em
}
.analytics-heading h2 em {
    font-style:normal;
    color:var(--blue)
}
.analytics-heading>p {
    max-width:380px;
    color:var(--muted);
    line-height:1.7
}
.analytics-dashboard {
    padding:24px;
    border-radius:24px;
    background:var(--dark);
    color:#fff;
    box-shadow:0 30px 70px #0a111b22
}
.analytics-topline {
    display:flex;
    justify-content:space-between;
    color:#aebbc9;
    font-size:11px
}
.live-dot {
    color:var(--mint)
}
.live-dot:before {
    content:'';
    display:inline-block;
    width:7px;
    height:7px;
    margin-right:6px;
    border-radius:50%;
    background:var(--mint);
    box-shadow:0 0 0 5px #68e7d01c
}
.analytics-metrics {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-top:18px
}
.analytics-metrics>div {
    padding:18px;
    border:1px solid #22334d;
    border-radius:12px;
    background:#111f35
}
.analytics-metrics small,.analytics-metrics span {
    display:block;
    color:#99aabd;
    font-size:10px
}
.analytics-metrics strong {
    display:block;
    margin:12px 0 6px;
    font-size:26px
}
.analytics-metrics span {
    color:var(--mint)
}
.analytics-chart {
    margin-top:10px;
    padding:20px;
    border:1px solid #22334d;
    border-radius:12px;
    background:#101d31
}
.chart-head {
    display:flex;
    justify-content:space-between;
    color:#9daabd;
    font-size:11px
}
.chart-head strong {
    color:#fff
}
.chart-bars {
    height:150px;
    display:flex;
    align-items:end;
    gap:12px;
    margin-top:20px;
    background:repeating-linear-gradient(to top,transparent 0 36px,#ffffff0a 37px)
}
.chart-bars i {
    display:block;
    flex:1;
    height:var(--h);
    border-radius:5px 5px 0 0;
    background:linear-gradient(#68e7d0,#315cff);
    animation:bar-rise 1s cubic-bezier(.2,.8,.2,1) both
}
.chart-bars i:nth-child(2) {
    animation-delay:.1s
}
.chart-bars i:nth-child(3) {
    animation-delay:.2s
}
.chart-bars i:nth-child(4) {
    animation-delay:.3s
}
.chart-bars i:nth-child(5) {
    animation-delay:.4s
}
.chart-bars i:nth-child(6) {
    animation-delay:.5s
}
.chart-bars i:nth-child(7) {
    animation-delay:.6s
}
.chart-bars i:nth-child(8) {
    animation-delay:.7s
}
.analytics-features {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:12px
}
.analytics-features article {
    padding:20px;
    border:1px solid #21434b;
    border-radius:13px;
    background:#102833
}
.analytics-features b {
    color:var(--lime);
    font-size:12px
}
.analytics-features p {
    margin:8px 0 0;
    color:#a9c0c5;
    font-size:11px;
    line-height:1.6
}
.split-section {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center
}
.cta-section {
    background:#fff
}
.cta-section h2 {
    max-width:800px
}
@keyframes card-drift {
    0%,100% {
        transform:translateX(-50%) rotate(-8deg)
    }
    50% {
        transform:translateX(calc(-50% + 12px)) rotate(-2deg)
    }
}
@keyframes phone-float {
    0%,100% {
        translate:0 5px
    }
    50% {
        translate:0 -8px
    }
}
@keyframes wave-pulse {
    0% {
        scale:.3;
        opacity:.8
    }
    100% {
        scale:2.2;
        opacity:0
    }
}
@keyframes result-pop {
    0%,100% {
        scale:.96
    }
    50% {
        scale:1.05
    }
}
@keyframes bar-rise {
    from {
        scale:1 0;
        transform-origin:bottom
    }
    to {
        scale:1 1;
        transform-origin:bottom
    }
}
@media(max-width:760px) {
    .wrap {
        width:min(calc(100% - 32px),560px)
    }
    .section {
        padding:70px 0
    }
    .header-inner {
        min-height:64px
    }
    .nav {
        gap:12px;
        font-size:10px
    }
    .hero {
        padding:64px 0 54px
    }
    .hero-grid,.service-offer-grid,.split-section {
        grid-template-columns:1fr;
        gap:36px
    }
    .hero-grid>div:first-child {
        order:2
    }
    .hero-grid>div:last-child {
        order:1
    }
    .nfc-scene {
        min-height:390px
    }
    .nfc-card {
        left:15%;
        width:180px;
        height:112px
    }
    .nfc-phone {
        right:16%;
        width:126px;
        height:260px
    }
    .phone-screen {
        height:210px
    }
    .trust-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .trust-grid>div {
        padding:18px 8px;
        border-bottom:1px solid var(--line);
        border-right:1px solid var(--line)
    }
    .trust-grid>div:nth-child(even) {
        border-right:0
    }
    .trust-grid>div:nth-last-child(-n+2) {
        border-bottom:0
    }
    .service-offer-card {
        min-height:170px
    }
    .discount-inner {
        display:block
    }
    .discount-inner .button {
        margin-top:20px
    }
    .steps,.products-home,.analytics-features {
        grid-template-columns:1fr
    }
    .analytics-heading {
        display:block
    }
    .analytics-heading>p {
        margin-top:22px
    }
    .analytics-metrics {
        grid-template-columns:repeat(2,1fr)
    }
    .footer-inner {
        grid-template-columns:1fr!important;
        gap:30px
    }
}
@media(max-width:390px) {
    .wrap {
        width:calc(100% - 24px)
    }
    .hero h1 {
        font-size:50px
    }
    .actions {
        display:grid;
        grid-template-columns:1fr
    }
    .actions .button {
        width:100%
    }
    .hero-proof {
        display:grid;
        grid-template-columns:1fr 1fr
    }
    .analytics-metrics {
        grid-template-columns:1fr
    }
    .analytics-dashboard {
        padding:16px
    }
    .chart-bars {
        gap:6px
    }
}
/* Analytics section aligned with the main Hoooptap system */.analytics-section {
    position:relative;
    overflow:hidden;
    background:#f5f7fa;
    border-top:1px solid #edf0f4;
    border-bottom:1px solid #edf0f4
}
.analytics-section:before {
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:radial-gradient(circle at 12% 18%,#dfe8ff 0,transparent 32%),radial-gradient(circle at 90% 80%,#dff8f3 0,transparent 28%);
    opacity:.65
}
.analytics-section .wrap {
    position:relative;
    z-index:1
}
.analytics-heading {
    display:grid!important;
    grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
    align-items:end;
    gap:clamp(32px,8vw,120px);
    margin-bottom:34px
}
.analytics-heading h2 {
    max-width:760px;
    margin:16px 0 0;
    font-size:clamp(48px,7vw,92px);
    line-height:.87;
    letter-spacing:-.09em
}
.analytics-heading h2 em {
    color:var(--blue);
    font-style:normal
}
.analytics-heading>p {
    max-width:390px;
    margin:0 0 6px;
    color:#536176;
    font-size:15px;
    line-height:1.7
}
.analytics-dashboard {
    position:relative;
    padding:22px;
    border:1px solid #1b3049;
    border-radius:24px;
    background:linear-gradient(145deg,#0b1421,#0a111b);
    box-shadow:0 24px 70px #13213824
}
.analytics-dashboard:after {
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:linear-gradient(110deg,transparent 0 45%,#ffffff06 50%,transparent 55%);
    background-size:220% 100%;
    animation:analytics-sheen 6s ease-in-out infinite
}
.analytics-topline,.analytics-metrics,.analytics-chart {
    position:relative;
    z-index:1
}
.analytics-topline {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
    color:#99aabd;
    font-size:11px
}
.live-dot {
    color:var(--mint)
}
.live-dot:before {
    content:'';
    display:inline-block;
    width:8px;
    height:8px;
    margin-right:7px;
    border-radius:50%;
    background:var(--mint);
    box-shadow:0 0 0 5px #68e7d01f;
    animation:live-pulse 1.8s ease-out infinite
}
.analytics-metrics {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px
}
.analytics-metrics>div {
    padding:18px;
    border:1px solid #263d5a;
    border-radius:14px;
    background:#101f35;
    transition:transform .25s,border-color .25s
}
.analytics-metrics>div:hover {
    transform:translateY(-4px);
    border-color:var(--mint)
}
.analytics-metrics small,.analytics-metrics span {
    display:block;
    color:#9cb1c7;
    font-size:10px
}
.analytics-metrics strong {
    display:block;
    margin:12px 0 5px;
    color:#fff;
    font-size:29px;
    letter-spacing:-.04em
}
.analytics-metrics span {
    color:var(--mint)
}
.analytics-chart {
    margin-top:10px;
    padding:20px;
    border:1px solid #263d5a;
    border-radius:14px;
    background:#0f1d31
}
.chart-head {
    display:flex;
    justify-content:space-between;
    color:#fff;
    font-size:12px
}
.chart-head span {
    color:#9cb1c7
}
.chart-bars {
    display:flex;
    align-items:end;
    gap:12px;
    height:172px;
    margin-top:22px;
    padding:0 2px;
    background:repeating-linear-gradient(to top,transparent 0 41px,#ffffff0b 42px)
}
.chart-bars i {
    flex:1;
    height:var(--h);
    min-width:10px;
    border-radius:6px 6px 2px 2px;
    background:linear-gradient(180deg,var(--mint),var(--blue));
    box-shadow:0 0 20px #315cff25;
    transform-origin:bottom;
    animation:analytics-bar-rise 1s cubic-bezier(.2,.8,.2,1) both
}
.analytics-features {
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-top:10px
}
.analytics-features article {
    padding:22px;
    border:1px solid #173d48;
    border-radius:14px;
    background:#102b35;
    color:#fff;
    transition:transform .25s,background .25s
}
.analytics-features article:hover {
    transform:translateY(-4px);
    background:#123641
}
.analytics-features b {
    color:var(--lime);
    font-size:12px
}
.analytics-features p {
    margin:10px 0 0;
    color:#b3ced2;
    font-size:12px;
    line-height:1.55
}
@keyframes analytics-bar-rise {
    from {
        transform:scaleY(0)
    }
    to {
        transform:scaleY(1)
    }
}
@keyframes analytics-sheen {
    0%,35% {
        background-position:180% 0
    }
    65%,100% {
        background-position:-20% 0
    }
}
@keyframes live-pulse {
    0% {
        box-shadow:0 0 0 0 #68e7d080
    }
    70%,100% {
        box-shadow:0 0 0 8px #68e7d000
    }
}
@media(max-width:760px) {
    .analytics-heading {
        display:block!important;
        margin-bottom:26px
    }
    .analytics-heading h2 {
        font-size:clamp(48px,14vw,72px)
    }
    .analytics-heading>p {
        margin-top:20px;
        font-size:14px
    }
    .analytics-dashboard {
        padding:14px;
        border-radius:18px
    }
    .analytics-metrics {
        grid-template-columns:repeat(2,minmax(0,1fr))!important
    }
    .analytics-metrics>div {
        padding:14px
    }
    .analytics-metrics strong {
        font-size:24px
    }
    .analytics-chart {
        padding:14px
    }
    .chart-bars {
        gap:6px;
        height:128px
    }
    .analytics-features {
        grid-template-columns:1fr!important
    }
    .analytics-features article {
        padding:18px
    }
}
@media(max-width:390px) {
    .analytics-metrics {
        grid-template-columns:1fr!important
    }
    .analytics-topline {
        align-items:flex-start;
        gap:8px;
        flex-wrap:wrap
    }
    .chart-bars {
        height:110px;
        gap:4px
    }
}
/* Final complete layout pass */.site-header {
    position:relative;
    z-index:10
}
.header-inner {
    width:min(calc(100% - 40px),1120px);
    margin:auto
}
.hero-grid,.service-offer-grid,.split-section {
    min-width:0
}
.hero-art,.nfc-scene {
    min-width:0
}
.service-offer {
    background:#fff
}
.service-offer-grid {
    align-items:center
}
.service-offer h2,.section-muted h2,.technology-section h2,.how-highlight h2 {
    max-width:760px;
    font-size:clamp(40px,5vw,70px);
    line-height:.92;
    letter-spacing:-.08em
}
.service-offer p,.section-muted .section-intro,.how-highlight p {
    max-width:620px;
    color:#627086;
    line-height:1.7
}
.discount-banner {
    background:var(--blue);
    color:#fff
}
.discount-banner .eyebrow {
    color:#dfe6ff
}
.discount-banner p {
    color:#dce5ff
}
.technology-section {
    background:#f7f9fc
}
.steps {
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    margin-top:36px
}
.step-card {
    min-width:0;
    min-height:390px;
    padding:20px;
    border:1px solid #dce5ef;
    border-radius:22px;
    background:#fff;
    box-shadow:0 16px 40px #17315b0c
}
.step-visual {
    height:178px;
    margin-bottom:22px;
    border-radius:16px;
    background:linear-gradient(135deg,#edf3ff,#f0fbf8);
    overflow:hidden
}
.step-card h3 {
    margin:12px 0 8px;
    font-size:24px;
    letter-spacing:-.05em
}
.step-card p {
    color:#65748a;
    font-size:13px;
    line-height:1.65
}
.section-muted {
    background:#fff
}
.products-home {
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px
}
.products-home>* {
    min-width:0
}
.products-home .product {
    height:100%;
    border:1px solid #dce5ef;
    border-radius:18px;
    background:#fff;
    overflow:hidden;
    box-shadow:0 15px 36px #17315b0b
}
.products-home .product img {
    width:100%;
    height:230px;
    object-fit:cover
}
.analytics-section {
    background:#f1f5fb
}
.analytics-section .wrap {
    max-width:1120px
}
.analytics-heading {
    display:grid!important;
    grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
    align-items:end;
    gap:50px;
    margin-bottom:34px
}
.analytics-heading h2 {
    margin:14px 0 0;
    font-size:clamp(48px,6.5vw,92px);
    line-height:.86;
    letter-spacing:-.09em
}
.analytics-heading h2 em {
    color:var(--blue);
    font-style:normal
}
.analytics-heading>p {
    max-width:390px;
    margin:0 0 5px;
    color:#58687e;
    line-height:1.7
}
.analytics-dashboard {
    background:#0b1421;
    border:1px solid #233b5b;
    border-radius:22px;
    box-shadow:0 25px 70px #10244922
}
.analytics-metrics {
    grid-template-columns:repeat(4,minmax(0,1fr))
}
.analytics-metrics>div {
    background:#12213a;
    border-color:#2b4668;
    border-radius:14px
}
.analytics-chart {
    background:#101f35;
    border-color:#2b4668;
    border-radius:14px
}
.chart-bars i {
    background:linear-gradient(180deg,#68e7d0,#4d9ee8 55%,#315cff)
}
.analytics-features {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px
}
.analytics-features article {
    background:#102b35;
    border:1px solid #1c4d58;
    border-radius:14px
}
.how-highlight {
    background:#fff
}
.split-section {
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);
    gap:70px;
    align-items:center
}
.how-highlight ul {
    display:grid;
    gap:10px;
    margin:26px 0 0;
    padding:0;
    list-style:none
}
.how-highlight li {
    padding:15px 18px;
    border:1px solid #dce5ef;
    border-radius:12px;
    background:#f7f9fc;
    color:#344258
}
.analytics-steps {
    background:#fff;
    border-top:1px solid #e7ebf1
}
.analytics-steps-intro {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);
    gap:60px;
    align-items:end;
    margin-bottom:34px
}
.analytics-steps h2 {
    margin:14px 0 0;
    font-size:clamp(42px,5vw,70px);
    line-height:.9;
    letter-spacing:-.08em
}
.analytics-steps h2 em {
    color:var(--blue);
    font-style:normal
}
.analytics-steps-intro>p {
    max-width:380px;
    margin:0 0 4px;
    color:#627086;
    line-height:1.7
}
.analytics-step-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px
}
.analytics-step-grid article {
    display:flex;
    gap:16px;
    min-width:0;
    min-height:145px;
    padding:22px;
    border:1px solid #dce5ef;
    border-radius:16px;
    background:#f7f9fc;
    transition:transform .25s,box-shadow .25s,border-color .25s
}
.analytics-step-grid article:hover {
    transform:translateY(-5px);
    border-color:var(--blue);
    box-shadow:0 18px 35px #315cff18
}
.analytics-step-grid article>span {
    display:grid;
    place-items:center;
    flex:0 0 42px;
    height:42px;
    border-radius:50%;
    background:var(--blue);
    color:#fff;
    font-size:11px;
    font-weight:800
}
.analytics-step-grid b {
    display:block;
    margin:3px 0 7px
}
.analytics-step-grid p {
    margin:0;
    color:#68768b;
    font-size:13px;
    line-height:1.55
}
.cta-section {
    background:#eef3ff;
    text-align:center
}
.cta-section .wrap {
    display:grid;
    justify-items:center
}
.site-footer {
    background:#0b1421;
    color:#fff;
    padding:68px 0 76px
}
.footer-grid {
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr;
    gap:60px
}
.site-footer p,.site-footer a:not(.brand) {
    color:#9fb0c4
}
.site-footer h4 {
    color:#fff
}
@media(max-width:760px) {
    .wrap {
        width:min(calc(100% - 32px),560px)
    }
    .section {
        padding:64px 0
    }
    .hero-grid,.service-offer-grid,.split-section {
        grid-template-columns:1fr!important;
        gap:34px
    }
    .hero-art {
        order:-1
    }
    .hero-grid>div:first-child {
        order:1
    }
    .hero h1 {
        font-size:clamp(50px,15vw,76px)
    }
    .trust-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))!important
    }
    .steps,.products-home,.analytics-features,.analytics-step-grid {
        grid-template-columns:1fr!important
    }
    .step-card {
        min-height:0
    }
    .analytics-heading,.analytics-steps-intro {
        display:block!important
    }
    .analytics-heading>p,.analytics-steps-intro>p {
        margin-top:20px
    }
    .analytics-metrics {
        grid-template-columns:repeat(2,minmax(0,1fr))!important
    }
    .footer-grid {
        grid-template-columns:1fr;
        gap:32px
    }
}
@media(max-width:390px) {
    .wrap {
        width:calc(100% - 24px)
    }
    .hero h1 {
        font-size:46px
    }
    .hero .actions {
        display:grid;
        grid-template-columns:1fr
    }
    .hero .actions .button {
        width:100%
    }
    .hero-proof {
        display:grid!important;
        grid-template-columns:1fr 1fr
    }
    .analytics-metrics {
        grid-template-columns:1fr!important
    }
    .analytics-topline {
        flex-wrap:wrap;
        gap:8px
    }
}
.analytics-section {
    background:#f5f7fb
}
.analytics-dashboard {
    background:#0b1421;
    border:1px solid #233b5b;
    box-shadow:0 28px 70px #10244918
}
.analytics-metrics>div {
    background:#12213a;
    border-color:#2b4668
}
.analytics-chart {
    background:#101f35;
    border-color:#2b4668
}
.chart-bars i {
    background:linear-gradient(180deg,#6de6cf 0%,#4e9de8 52%,#315cff 100%)
}
.analytics-features article {
    background:#fff;
    border:1px solid #dbe4f0;
    color:#0d0f13;
    box-shadow:0 14px 30px #17315d0b
}
.analytics-features b {
    color:#315cff
}
.analytics-features p {
    color:#627086
}
.analytics-steps {
    background:#fff;
    border-top:1px solid #e9edf3
}
.analytics-steps-intro {
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);
    gap:60px;
    align-items:end;
    margin-bottom:36px
}
.analytics-steps h2 {
    margin:14px 0 0;
    font-size:clamp(42px,5vw,70px);
    line-height:.91;
    letter-spacing:-.08em
}
.analytics-steps h2 em {
    color:#315cff;
    font-style:normal
}
.analytics-steps-intro>p {
    max-width:380px;
    margin:0 0 4px;
    color:#637084;
    line-height:1.7
}
.analytics-step-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px
}
.analytics-step-grid article {
    display:flex;
    align-items:flex-start;
    gap:18px;
    min-height:145px;
    padding:22px;
    border:1px solid #dce5f1;
    border-radius:16px;
    background:#f8fafc;
    transition:transform .25s,border-color .25s,box-shadow .25s
}
.analytics-step-grid article:hover {
    transform:translateY(-5px);
    border-color:#315cff;
    box-shadow:0 18px 35px #315cff18
}
.analytics-step-grid article>span {
    display:grid;
    place-items:center;
    flex:0 0 42px;
    height:42px;
    border-radius:50%;
    background:#315cff;
    color:#fff;
    font-size:11px;
    font-weight:800
}
.analytics-step-grid b {
    display:block;
    margin:3px 0 7px;
    color:#0d0f13;
    font-size:16px
}
.analytics-step-grid p {
    margin:0;
    color:#68768b;
    font-size:13px;
    line-height:1.55
}
@media(max-width:760px) {
    .analytics-steps-intro {
        display:block
    }
    .analytics-steps-intro>p {
        margin-top:20px
    }
    .analytics-step-grid {
        grid-template-columns:1fr
    }
    .analytics-step-grid article {
        min-height:0
    }
    .analytics-features article {
        padding:18px
    }
}
.section-muted {
    background:#fff;
    border-top:1px solid #edf0f4;
    border-bottom:1px solid #edf0f4
}
.section-muted h2,.technology-section h2,.how-highlight h2,.cta-section h2 {
    max-width:760px;
    margin:14px 0 12px;
    font-size:clamp(38px,5vw,68px);
    line-height:.94;
    letter-spacing:-.075em
}
.section-intro {
    max-width:560px;
    margin:0 0 30px;
    color:#5e6a7c;
    line-height:1.7
}
.discount-banner {
    position:relative;
    overflow:hidden;
    background:#315cff;
    color:#fff
}
.discount-banner:before {
    content:'';
    position:absolute;
    width:420px;
    height:420px;
    right:-120px;
    top:-220px;
    border:1px solid #ffffff33;
    border-radius:50%;
    box-shadow:0 0 0 40px #ffffff0c,0 0 0 80px #ffffff08
}
.discount-inner {
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    padding-block:54px
}
.discount-inner h2 {
    max-width:620px;
    margin:12px 0;
    font-size:clamp(30px,4vw,52px);
    line-height:.95;
    letter-spacing:-.06em
}
.discount-inner p {
    max-width:580px;
    color:#dce4ff;
    line-height:1.6
}
.button-light {
    background:#fff!important;
    color:#315cff!important;
    border-color:#fff!important
}
.technology-section {
    background:#f8fafc
}
.steps {
    margin-top:34px
}
.step-card {
    position:relative;
    overflow:hidden;
    min-height:390px;
    padding:18px;
    border:1px solid #dfe5ef;
    border-radius:22px;
    background:#fff;
    box-shadow:0 18px 45px #1e355b0d
}
.step-card:after {
    content:'';
    position:absolute;
    inset:auto -40px -70px;
    width:180px;
    height:180px;
    border-radius:50%;
    background:#315cff0c;
    pointer-events:none
}
.step-card b {
    color:#315cff;
    font-size:11px;
    letter-spacing:.14em
}
.step-card h3 {
    margin:12px 0 8px;
    font-size:24px;
    letter-spacing:-.05em
}
.step-card p {
    margin:0;
    color:#637084;
    font-size:13px;
    line-height:1.65
}
.step-visual {
    position:relative;
    display:grid;
    place-items:center;
    height:170px;
    margin-bottom:22px;
    border-radius:16px;
    background:linear-gradient(145deg,#edf3ff,#f4fbfa);
    overflow:hidden
}
.step-card-shape {
    display:grid;
    place-items:center;
    width:128px;
    height:78px;
    border-radius:14px;
    background:#315cff;
    color:#fff;
    font-weight:800;
    box-shadow:0 15px 25px #315cff35
}
.step-phone {
    display:grid;
    place-items:center;
    width:90px;
    height:142px;
    border:6px solid #101823;
    border-radius:17px;
    background:#fff;
    color:#315cff;
    box-shadow:0 14px 24px #16233724
}
.step-phone small,.step-result small {
    display:block;
    color:#65738a;
    font-size:9px
}
.step-result {
    display:grid;
    place-items:center;
    gap:8px;
    text-align:center
}
.step-result>b {
    display:grid;
    place-items:center;
    width:54px;
    height:54px;
    border-radius:50%;
    background:#315cff;
    color:#fff;
    font-size:24px
}
.products-home {
    margin-top:28px;
    align-items:stretch
}
.section-muted .products-home li,.section-muted .products-home .product {
    height:100%;
    border:1px solid #dfe5ef;
    border-radius:18px;
    background:#fff;
    overflow:hidden;
    box-shadow:0 15px 36px #1e355b0b
}
.section-muted .products-home img {
    width:100%;
    height:230px;
    object-fit:cover
}
.how-highlight {
    background:#fff
}
.split-section {
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
    align-items:center;
    gap:clamp(40px,8vw,120px)
}
.how-highlight p,.cta-section p {
    max-width:610px;
    color:#637084;
    line-height:1.7
}
.how-highlight ul {
    display:grid;
    gap:12px;
    margin:25px 0 0;
    padding:0;
    list-style:none
}
.how-highlight li {
    padding:15px 18px;
    border:1px solid #dfe5ef;
    border-radius:12px;
    color:#344258;
    background:#f8fafc
}
.cta-section {
    background:#f0f4ff;
    text-align:center
}
.cta-section .wrap {
    display:grid;
    justify-items:center
}
.cta-section p {
    margin:0 0 24px
}
.site-footer {
    padding:64px 0 72px;
    background:#0b1421;
    color:#fff
}
.footer-grid {
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr;
    gap:60px
}
.site-footer .brand {
    display:inline-block;
    margin-bottom:18px;
    color:#fff
}
.site-footer p {
    max-width:260px;
    color:#9fb0c4;
    font-size:13px;
    line-height:1.7
}
.site-footer h4 {
    margin:0 0 18px;
    color:#fff;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.14em
}
.site-footer a:not(.brand) {
    display:block;
    width:max-content;
    margin:0 0 11px;
    color:#9fb0c4;
    font-size:13px;
    text-decoration:none;
    transition:color .2s
}
.site-footer a:not(.brand):hover {
    color:#fff
}
@media(max-width:760px) {
    .discount-inner {
        display:block!important;
        padding-block:44px
    }
    .discount-inner .button {
        margin-top:22px
    }
    .steps {
        grid-template-columns:1fr!important
    }
    .step-card {
        min-height:0
    }
    .split-section {
        grid-template-columns:1fr
    }
    .footer-grid {
        grid-template-columns:1fr;
        gap:34px
    }
    .site-footer {
        padding:52px 0
    }
    .section-muted h2,.technology-section h2,.how-highlight h2,.cta-section h2 {
        font-size:clamp(38px,12vw,56px)
    }
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition:none!important
    }
}

.screen-reader-text {
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important
}
.custom-logo {
    max-height:28px;
    width:auto
}
.entry-content img {
    max-width:100%;
    height:auto
}
.wp-block-button__link {
    background:var(--blue)
}
.website-page{overflow:hidden}
.website-hero{background:linear-gradient(120deg,#f0f2f5,#fff);padding:96px 0 84px}
.website-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.website-hero h1{font-size:clamp(54px,7vw,94px);line-height:.88;letter-spacing:-.085em;margin:18px 0 24px}
.website-hero h1 em,.intro-section h2 em,.website-discount h2 em{font-style:normal;color:var(--blue)}
.website-hero p{max-width:560px;color:#60636b;font-size:17px;line-height:1.7}
.website-actions{display:flex;align-items:center;gap:24px;margin-top:30px}
.website-proof{display:flex;gap:18px;flex-wrap:wrap;margin-top:30px;color:#686a70;font-size:11px}
.website-proof span:before{content:'+';color:var(--blue);font-weight:800;margin-right:5px}
.website-preview{position:relative;padding:26px 20px 34px;background:#111318;border-radius:26px;box-shadow:22px 22px 0 #dce0e8}
.preview-browser{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 20px 40px #0004;transform:rotate(2deg)}
.browser-bar{height:30px;background:#e8e9ec;display:flex;align-items:center;gap:5px;padding:0 12px}
.browser-bar i{width:6px;height:6px;background:#b5b7bc;border-radius:50%}
.browser-bar span{font-size:8px;color:#777;margin-left:12px}
.preview-content{height:265px;padding:35px 28px;background:linear-gradient(135deg,#fff,#e9edff)}
.preview-content small{font-size:8px;color:var(--blue);letter-spacing:.15em;font-weight:800}
.preview-content strong{display:block;font-size:30px;line-height:.95;letter-spacing:-.07em;margin-top:18px}
.preview-content strong b{color:var(--blue)}
.preview-button{width:75px;height:19px;border-radius:20px;background:#111;margin-top:20px}
.preview-blocks{display:flex;gap:8px;margin-top:38px}
.preview-blocks i{height:38px;flex:1;background:#fff;border-radius:6px}
.preview-label{display:block;color:#aeb2c0;font-size:9px;letter-spacing:.14em;margin-top:20px}
.website-section{padding:92px 0}
.narrow-copy{max-width:720px;margin-bottom:42px}
.intro-section{background:#fafafa}
.intro-section h2{font-size:clamp(42px,6vw,76px);line-height:.92;letter-spacing:-.08em;margin:16px 0}
.narrow-copy>p{color:#64666e;font-size:17px;line-height:1.7;max-width:620px}
.website-benefits,.website-plans,.website-process{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.website-benefits article,.website-process>div{background:#fff;border:1px solid #e2e3e6;border-radius:18px;padding:28px;min-height:190px}
.website-benefits b,.website-process b,.plan-index{color:var(--blue);font-size:11px}
.website-benefits h3{font-size:22px;letter-spacing:-.05em;margin:40px 0 10px}
.website-benefits p,.website-process p{color:#70727a;line-height:1.6;font-size:13px}
.plans-section{background:#f0f1f4}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:40px}
.section-heading h2,.process-section h2{font-size:clamp(42px,6vw,72px);line-height:.9;letter-spacing:-.08em;margin:15px 0 0}
.section-heading>p{max-width:260px;color:#6b6d74;line-height:1.6;font-size:13px}
.website-plan{background:#fff;border:1px solid #dadce1;border-radius:18px;padding:28px;display:flex;flex-direction:column;min-height:500px}
.website-plan.featured{background:#111318;color:#fff;border-color:#111318;transform:translateY(-12px);box-shadow:0 22px 45px #1113}
.website-plan h3{font-size:30px;letter-spacing:-.06em;margin:30px 0 4px}
.website-plan>p{font-size:12px;color:#71737a;min-height:38px;line-height:1.5}
.website-plan.featured>p{color:#aeb0b7}
.website-plan strong{font-size:30px;letter-spacing:-.07em;margin:24px 0}
.website-plan ul{list-style:none;border-top:1px solid #e0e0e0;padding:20px 0;margin:0 0 25px;display:grid;gap:11px;flex:1}
.website-plan.featured ul{border-color:#ffffff22}
.website-plan li{font-size:12px}
.website-plan li:before{content:'+';color:var(--blue);font-weight:800;margin-right:8px}
.website-plan .button{width:100%;text-align:center}
.website-discount{background:var(--blue);color:#fff;padding:62px 0}
.discount-layout{display:flex;align-items:center;justify-content:space-between;gap:35px}
.website-discount h2{font-size:clamp(34px,5vw,64px);line-height:.9;letter-spacing:-.08em;max-width:750px;margin:14px 0}
.website-discount p{color:#dce4ff}
.website-discount .eyebrow{color:#dce4ff}
.website-process>div{background:#f0f1f4}
.website-process h3{font-size:23px;letter-spacing:-.05em;margin:38px 0 8px}
@media(max-width:700px){
.website-hero{padding:58px 0 52px}
.website-hero-grid{grid-template-columns:1fr;gap:36px}
.website-hero h1{font-size:clamp(52px,15vw,78px)}
.website-actions{flex-wrap:wrap;gap:16px}
.website-preview{padding:18px 14px 24px}
.preview-content{height:225px;padding:28px 22px}
.website-section{padding:62px 0}
.website-benefits,.website-plans,.website-process{grid-template-columns:1fr}
.website-plan.featured{transform:none}
.section-heading{display:block}
.section-heading>p{margin-top:20px}
.website-discount{padding:48px 0}
.discount-layout{display:block}
.discount-layout .button{margin-top:22px}
}
:root{--blue:#2f5cff;--ink:#0b0b0d;--muted:#67676d;--paper:#fff;--soft:#f2f2f0;--line:#dfdfdc;--radius:16px}
.wrap{width:min(100% - 40px,920px);margin-inline:auto}
.site-header{border-bottom:1px solid #eee;background:#fff}
.header-inner{height:72px;display:flex;align-items:center;justify-content:space-between}
.brand{font-size:22px;font-weight:800;letter-spacing:-.06em}
.brand:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--blue);margin:0 4px 2px 0}
.nav{display:flex;gap:25px;font-size:13px}
.nav a:hover{color:var(--blue)}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-weight:700}
.button{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:999px;background:var(--blue);color:white;font-weight:700;font-size:12px;border:1px solid var(--blue)}
.button.alt{background:white;color:var(--ink);border-color:var(--line)}
.product-card .button{width:100%;margin-top:auto;padding:10px}
.product-card.dark .button{background:var(--blue);border-color:var(--blue)}
.site-footer{border-top:1px solid var(--line);padding:45px 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;font-size:12px}
.footer-grid p{color:var(--muted);font-size:11px}
.footer-grid h4{font-size:11px;margin:0 0 10px}
.footer-grid a{display:block;margin:5px 0;color:var(--muted)}
@media(max-width:700px){
.wrap{width:min(100% - 28px,920px)}
.header-inner{height:auto;padding:18px 0;align-items:flex-start;gap:16px}
.nav{gap:12px;flex-wrap:wrap;justify-content:flex-end}
.footer-grid{grid-template-columns:1fr 1fr}
.footer-grid>div:first-child{grid-column:1/-1}
}
.text-link{display:inline-block;color:#111;font-weight:800;margin-top:18px;text-decoration:none;border-bottom:1px solid var(--blue);padding-bottom:5px}
.cta-section .eyebrow{color:#cbd7ff}
.cta-section .button{background:#fff;color:#111}
.page-aside .button{background:var(--blue);color:#fff;text-align:center}
.web-plan .button{width:100%;text-align:center}
.web-sales-discount .eyebrow{color:#d7e0ff}
.discount-banner .eyebrow{color:#d1dcff}
.button-light{background:#fff;color:#111;border-color:#fff;white-space:nowrap}
.button-light{background:#fff;color:#111;border-color:#fff}
.woocommerce div.product form.cart .button{border:0;cursor:pointer}
@media(max-width:700px){
.wrap{width:min(100% - 28px,920px)}
.header-inner{height:62px}
.nav{gap:10px;font-size:10px}
.web-sales-discount .button{margin-top:22px}
.discount-inner .button{margin-top:24px}
.website-page{overflow:hidden}
.website-hero{background:linear-gradient(120deg,#f0f2f5,#fff);padding:96px 0 84px}
.website-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.website-hero h1{font-size:clamp(54px,7vw,94px);line-height:.88;letter-spacing:-.085em;margin:18px 0 24px}
.website-hero h1 em,.intro-section h2 em,.website-discount h2 em{font-style:normal;color:var(--blue)}
.website-hero p{max-width:560px;color:#60636b;font-size:17px;line-height:1.7}
.website-actions{display:flex;align-items:center;gap:24px;margin-top:30px}
.website-proof{display:flex;gap:18px;flex-wrap:wrap;margin-top:30px;color:#686a70;font-size:11px}
.website-proof span:before{content:'+';color:var(--blue);font-weight:800;margin-right:5px}
.website-preview{position:relative;padding:26px 20px 34px;background:#111318;border-radius:26px;box-shadow:22px 22px 0 #dce0e8}
.preview-browser{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 20px 40px #0004;transform:rotate(2deg)}
.browser-bar{height:30px;background:#e8e9ec;display:flex;align-items:center;gap:5px;padding:0 12px}
.browser-bar i{width:6px;height:6px;background:#b5b7bc;border-radius:50%}
.browser-bar span{font-size:8px;color:#777;margin-left:12px}
.preview-content{height:265px;padding:35px 28px;background:linear-gradient(135deg,#fff,#e9edff)}
.preview-content small{font-size:8px;color:var(--blue);letter-spacing:.15em;font-weight:800}
.preview-content strong{display:block;font-size:30px;line-height:.95;letter-spacing:-.07em;margin-top:18px}
.preview-content strong b{color:var(--blue)}
.preview-button{width:75px;height:19px;border-radius:20px;background:#111;margin-top:20px}
.preview-blocks{display:flex;gap:8px;margin-top:38px}
.preview-blocks i{height:38px;flex:1;background:#fff;border-radius:6px}
.preview-label{display:block;color:#aeb2c0;font-size:9px;letter-spacing:.14em;margin-top:20px}
.website-section{padding:92px 0}
.narrow-copy{max-width:720px;margin-bottom:42px}
.intro-section{background:#fafafa}
.intro-section h2{font-size:clamp(42px,6vw,76px);line-height:.92;letter-spacing:-.08em;margin:16px 0}
.narrow-copy>p{color:#64666e;font-size:17px;line-height:1.7;max-width:620px}
.website-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.website-benefits article{background:#fff;border:1px solid #e2e3e6;border-radius:18px;padding:28px;min-height:190px}
.website-benefits b,.website-process b{color:var(--blue);font-size:11px}
.website-benefits h3{font-size:22px;letter-spacing:-.05em;margin:40px 0 10px}
.website-benefits p{color:#70727a;line-height:1.6;font-size:13px}
.plans-section{background:#f0f1f4}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:40px}
.section-heading h2,.process-section h2{font-size:clamp(42px,6vw,72px);line-height:.9;letter-spacing:-.08em;margin:15px 0 0}
.section-heading>p{max-width:260px;color:#6b6d74;line-height:1.6;font-size:13px}
.website-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.website-plan{background:#fff;border:1px solid #dadce1;border-radius:18px;padding:28px;display:flex;flex-direction:column;min-height:500px}
.website-plan.featured{background:#111318;color:#fff;border-color:#111318;transform:translateY(-12px);box-shadow:0 22px 45px #1113}
.plan-index{font-size:9px;color:var(--blue);font-weight:800;letter-spacing:.1em}
.website-plan h3{font-size:30px;letter-spacing:-.06em;margin:30px 0 4px}
.website-plan>p{font-size:12px;color:#71737a;min-height:38px;line-height:1.5}
.website-plan.featured>p{color:#aeb0b7}
.website-plan strong{font-size:30px;letter-spacing:-.07em;margin:24px 0}
.website-plan strong small{font-size:12px;letter-spacing:0}
.website-plan ul{list-style:none;border-top:1px solid #e0e0e0;padding:20px 0;margin:0 0 25px;display:grid;gap:11px;flex:1}
.website-plan.featured ul{border-color:#ffffff22}
.website-plan li{font-size:12px}
.website-plan li:before{content:'+';color:var(--blue);font-weight:800;margin-right:8px}
.website-plan .button{width:100%;text-align:center}
.website-discount{background:var(--blue);color:#fff;padding:62px 0}
.discount-layout{display:flex;align-items:center;justify-content:space-between;gap:35px}
.website-discount h2{font-size:clamp(34px,5vw,64px);line-height:.9;letter-spacing:-.08em;max-width:750px;margin:14px 0}
.website-discount p{color:#dce4ff}
.website-discount .eyebrow{color:#dce4ff}
.process-section{background:#fff}
.website-process{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:42px}
.website-process>div{background:#f0f1f4;border-radius:16px;padding:26px;min-height:180px}
.website-process h3{font-size:23px;letter-spacing:-.05em;margin:38px 0 8px}
.website-process p{color:#70727a;font-size:13px;line-height:1.6}
.website-hero{padding:58px 0 52px}
.website-hero-grid{grid-template-columns:1fr;gap:36px}
.website-hero h1{font-size:clamp(52px,15vw,78px)}
.website-hero p{font-size:15px}
.website-actions{flex-wrap:wrap;gap:16px}
.website-preview{padding:18px 14px 24px;box-shadow:12px 12px 0 #dce0e8}
.preview-content{height:225px;padding:28px 22px}
.preview-content strong{font-size:25px}
.website-section{padding:62px 0}
.website-benefits,.website-plans,.website-process{grid-template-columns:1fr}
.website-plan.featured{transform:none}
.section-heading{display:block}
.section-heading>p{margin-top:20px}
.website-discount{padding:48px 0}
.discount-layout{display:block}
.discount-layout .button{margin-top:22px}
.website-page .button{min-height:46px}
}
/* =========================================================
   NASIL ÇALIŞIR SAYFASI - EKSİK STİLLER
   ========================================================= */

/* Page Hero */
.page-hero {
    background: #eff0f2;
    padding: 90px 0 80px;
}

.page-hero h1 {
    max-width: 800px;
    font-size: clamp(42px, 7vw, 86px);
    line-height: .95;
    letter-spacing: -.07em;
    margin: 16px 0;
}

.page-hero p {
    max-width: 620px;
    color: #606168;
    font-size: 18px;
    line-height: 1.6;
}


/* Nasıl çalışır - 3 adım */
.how-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 35px;
}

.how-steps article {
    background: #fff;
    border: 1px solid #e1e2e5;
    border-radius: 16px;
    padding: 24px;
}

.how-steps b {
    color: var(--blue);
    font-size: 11px;
}

.how-steps h3 {
    margin: 28px 0 8px;
}

.how-steps p {
    color: #6b6d74;
    font-size: 13px;
    line-height: 1.6;
}


/* Section muted */
.section-muted {
    background: #315cff;
    border-top: 1px solid #edf0f4;
    border-bottom: 1px solid #edf0f4;
    color:white;
}


/* Analytics heading taşma düzeltmesi */
.analytics-heading > * {
    min-width: 0;
}


/* Analytics / Features responsive */
@media (max-width: 700px) {

    .page-hero {
        padding: 60px 0;
    }

    .page-hero h1 {
        font-size: clamp(42px, 12vw, 70px);
    }

    .page-hero p {
        font-size: 16px;
    }

    .analytics-heading {
        display: block;
    }

    .analytics-heading > p {
        margin-top: 20px;
    }

    .analytics-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .analytics-features {
        grid-template-columns: 1fr;
    }

    .how-steps {
        grid-template-columns: 1fr;
    }

    .analytics-topline {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .analytics-dashboard {
        padding: 14px;
    }

    .analytics-chart {
        overflow: hidden;
    }

    .chart-bars {
        gap: 5px;
    }

    .analytics-topline {
        font-size: 9px;
    }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .chart-bars i {
        animation: none;
    }
}

/* =========================================================
   HOOOPTAP — PRODUCTS / HOOOPTAP SHOWCASE
   ========================================================= */

.section.section-muted {
    position: relative;
    overflow: hidden;
    padding: clamp(80px, 9vw, 140px) 0;
    background:aliceblue;
}

/* subtle background detail */
.section.section-muted::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    top: -280px;
    right: -220px;
    border-radius: 50%;
    background: rgba(48, 91, 255, 0.035);
    filter: blur(10px);
    pointer-events: none;
}

.section.section-muted .wrap {
    position: relative;
    z-index: 1;
}


/* ---------------------------------------------------------
   Heading
   --------------------------------------------------------- */

.section.section-muted .eyebrow {
    display: block;
    margin-bottom: 16px;

    color: #4265ff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.section.section-muted > .wrap > h2 {
    max-width: 620px;
    margin: 0 0 52px;

    color: #0c111b;
    font-size: clamp(38px, 4.4vw, 62px);
    font-weight: 650;
    line-height: .98;
    letter-spacing: -.055em;
}


/* ---------------------------------------------------------
   Product grid
   --------------------------------------------------------- */

.products-home {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* ---------------------------------------------------------
   Card
   --------------------------------------------------------- */

.products-home .product-card {
    min-width: 0;
    margin: 0;
    padding: 0;

    list-style: none;

    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(15, 23, 42, .075);
    border-radius: 22px;

    box-shadow:
        0 2px 4px rgba(15, 23, 42, .02),
        0 18px 50px rgba(15, 23, 42, .055);

    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1),
        box-shadow .45s cubic-bezier(.22, 1, .36, 1),
        border-color .3s ease;

    overflow: hidden;
}

.products-home .product-card:hover {
    transform: translateY(-7px);

    border-color: rgba(48, 91, 255, .16);

    box-shadow:
        0 5px 10px rgba(15, 23, 42, .025),
        0 28px 70px rgba(15, 23, 42, .11);
}


/* ---------------------------------------------------------
   Card link
   --------------------------------------------------------- */

.products-home .product-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;

    color: inherit;
    text-decoration: none;
}


/* ---------------------------------------------------------
   Product image
   --------------------------------------------------------- */

.products-home .product-card-media {
    position: relative;
    aspect-ratio: 1.42 / 1;

    overflow: hidden;

    background:
        linear-gradient(145deg, #edf2fa 0%, #f8fafc 100%);
}

.products-home .product-card-media::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0) 55%,
        rgba(6,12,24,.055) 100%
    );

    pointer-events: none;
}

.products-home .product-card-media img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.005);

    transition:
        transform .65s cubic-bezier(.22, 1, .36, 1),
        filter .45s ease;
}

.products-home .product-card:hover .product-card-media img {
    transform: scale(1.055);
    filter: saturate(1.04);
}


/* Product badge */

.products-home .product-badge {
    position: absolute;
    z-index: 2;
    top: 15px;
    left: 15px;

    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 10px;

    color: #fff;
    background: rgba(9, 17, 32, .82);

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;

    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* Arrow */

.products-home .product-arrow {
    position: absolute;
    z-index: 2;
    top: 15px;
    right: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    color: #111827;
    background: rgba(255,255,255,.9);

    border-radius: 50%;

    font-size: 15px;
    line-height: 1;

    box-shadow: 0 5px 18px rgba(0,0,0,.08);

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        background .3s ease,
        color .3s ease;
}

.products-home .product-card:hover .product-arrow {
    transform: rotate(45deg);
    color: #fff;
    background: #315cff;
}


/* ---------------------------------------------------------
   Card body
   --------------------------------------------------------- */

.products-home .product-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;

    padding: 27px 27px 23px;
}


/* Kicker */

.products-home .product-card-kicker {
    margin: 0 0 8px;

    color: #72809a;

    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
}


/* Product name */

.products-home .woocommerce-loop-product__title {
    margin: 0;

    color: #0c111b;

    font-size: clamp(28px, 2.5vw, 36px);
    font-weight: 650;
    line-height: 1;
    letter-spacing: -.045em;
}


/* ---------------------------------------------------------
   Replace the huge WooCommerce excerpt visually
   --------------------------------------------------------- */

.products-home .product-card-excerpt {
    margin: 18px 0 0;

    color: #687386;

    font-size: 0;
    line-height: 1.65;

    min-height: 104px;
}


/* Custom concise copy — no HTML change needed */

.products-home .product-card-excerpt::after {
    display: block;

    color: #687386;

    font-size: 13px;
    line-height: 1.65;
    letter-spacing: -.005em;
}

.products-home .product-card:nth-child(1) .product-card-excerpt::after {
    content:
        "Günlük networking ve bireysel kullanım için sade, hızlı ve modern dijital kart.";
}

.products-home .product-card:nth-child(2) .product-card-excerpt::after {
    content:
        "Kişisel bilgilerinizi güvenli ve profesyonel bir dijital bağlantıda buluşturun.";
}

.products-home .product-card:nth-child(3) .product-card-excerpt::after {
    content:
        "Ekipler ve işletmeler için marka odaklı, ölçeklenebilir dijital bağlantı deneyimi.";
}


/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

.products-home .product-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-top: auto;
    padding-top: 22px;

    border-top: 1px solid rgba(15, 23, 42, .075);
}


/* Price */

.products-home .product-card-footer .price {
    color: #101722;

    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.products-home .product-card-footer .woocommerce-Price-currencySymbol {
    margin-right: 2px;
}


/* View */

.products-home .product-card-view {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #315cff;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: -.01em;

    transition: gap .3s ease;
}

.products-home .product-card-view span {
    font-size: 16px;
    line-height: 1;
}

.products-home .product-card:hover .product-card-view {
    gap: 13px;
}


/* ---------------------------------------------------------
   Slight individual visual treatment
   --------------------------------------------------------- */

.products-home .product-card:nth-child(1) .product-card-media {
    background: #e9edf5;
}

.products-home .product-card:nth-child(2) .product-card-media {
    background: #edf1f7;
}

.products-home .product-card:nth-child(3) .product-card-media {
    background: #e8edf4;
}


/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .section.section-muted {
        padding: 85px 0;
    }

    .section.section-muted > .wrap > h2 {
        margin-bottom: 38px;
    }

    .products-home {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .products-home .product-card:last-child {
        grid-column: 1 / -1;
        max-width: calc(50% - 9px);
    }
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 640px) {

    .section.section-muted {
        padding: 70px 0;
    }

    .section.section-muted > .wrap > h2 {
        margin-bottom: 32px;

        font-size: 40px;
        line-height: .98;
    }

    .products-home {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .products-home .product-card:last-child {
        grid-column: auto;
        max-width: none;
    }

    .products-home .product-card {
        border-radius: 19px;
    }

    .products-home .product-card-media {
        aspect-ratio: 1.5 / 1;
    }

    .products-home .product-card-body {
        padding: 23px 22px 20px;
    }

    .products-home .woocommerce-loop-product__title {
        font-size: 31px;
    }

    .products-home .product-card-excerpt {
        min-height: 82px;
        margin-top: 15px;
    }

    .products-home .product-card-excerpt::after {
        font-size: 12px;
    }
}


/* ---------------------------------------------------------
   Small mobile
   --------------------------------------------------------- */

@media (max-width: 400px) {

    .section.section-muted > .wrap > h2 {
        font-size: 35px;
    }

    .products-home .product-card-media {
        aspect-ratio: 1.38 / 1;
    }
}


/* ---------------------------------------------------------
   Accessibility
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .products-home .product-card,
    .products-home .product-card-media img,
    .products-home .product-arrow,
    .products-home .product-card-view {
        transition: none;
    }
}

/* =========================================================
   HOOOPTAP — SHOP PAGE
   ========================================================= */

main.wrap.content {
    padding-top: clamp(70px, 8vw, 115px);
    padding-bottom: clamp(90px, 10vw, 150px);
}


/* ---------------------------------------------------------
   SHOP HEADER
   --------------------------------------------------------- */

main.wrap.content > h1:first-child {
    display: none;
}

main.wrap.content .page-title {
    max-width: 700px;
    margin: 0 0 42px;

    color: #0b111c;

    font-size: clamp(42px, 5.5vw, 72px);
    font-weight: 650;
    line-height: .94;
    letter-spacing: -.06em;
}


/* ---------------------------------------------------------
   WooCommerce toolbar
   --------------------------------------------------------- */

main.wrap.content .woocommerce-result-count {
    display: inline-flex;
    align-items: center;

    margin: 0 0 22px;

    color: #7a8496;

    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .04em;
}


/* Sorting */

main.wrap.content .woocommerce-ordering {
    float: right;
    margin: 0 0 22px;
}

main.wrap.content .woocommerce-ordering select {
    min-width: 190px;
    height: 42px;
    padding: 0 38px 0 14px;

    color: #263143;
    background-color: #fff;

    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 999px;

    font-family: inherit;
    font-size: 11px;
    font-weight: 600;

    outline: none;
    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    background-image:
        linear-gradient(45deg, transparent 50%, #667085 50%),
        linear-gradient(135deg, #667085 50%, transparent 50%);
    background-position:
        calc(100% - 17px) 18px,
        calc(100% - 12px) 18px;
    background-size: 5px 5px;
    background-repeat: no-repeat;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

main.wrap.content .woocommerce-ordering select:hover,
main.wrap.content .woocommerce-ordering select:focus {
    border-color: rgba(49, 92, 255, .35);
    box-shadow: 0 5px 20px rgba(15, 23, 42, .05);
}


/* ---------------------------------------------------------
   Clear WooCommerce float
   --------------------------------------------------------- */

main.wrap.content .woocommerce-ordering::after,
main.wrap.content .woocommerce-result-count::after {
    content: "";
    display: table;
    clear: both;
}


/* ---------------------------------------------------------
   PRODUCTS GRID
   --------------------------------------------------------- */

main.wrap.content ul.products {
    clear: both;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;

    margin: 20px 0 0 !important;
    padding: 0 !important;

    list-style: none;
}

main.wrap.content ul.products::before,
main.wrap.content ul.products::after {
    display: none !important;
}


/* Kill WooCommerce column widths */

main.wrap.content ul.products.columns-4 li.product,
main.wrap.content ul.products li.product {
    float: none !important;

    width: auto !important;
    margin: 0 !important;

    clear: none !important;
}


/* ---------------------------------------------------------
   PRODUCT CARD
   --------------------------------------------------------- */

main.wrap.content .product-card {
    min-width: 0;

    background: #fff;

    border: 1px solid rgba(15, 23, 42, .075);
    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 2px 5px rgba(15, 23, 42, .02),
        0 18px 50px rgba(15, 23, 42, .055);

    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1),
        box-shadow .45s cubic-bezier(.22, 1, .36, 1),
        border-color .3s ease;
}

main.wrap.content .product-card:hover {
    transform: translateY(-7px);

    border-color: rgba(49, 92, 255, .16);

    box-shadow:
        0 5px 12px rgba(15, 23, 42, .025),
        0 30px 70px rgba(15, 23, 42, .11);
}


/* ---------------------------------------------------------
   CARD LINK
   --------------------------------------------------------- */

main.wrap.content .product-card-link {
    display: flex;
    flex-direction: column;

    height: 100%;

    color: inherit;
    text-decoration: none;
}


/* ---------------------------------------------------------
   MEDIA
   --------------------------------------------------------- */

main.wrap.content .product-card-media {
    position: relative;

    aspect-ratio: 1.42 / 1;

    overflow: hidden;

    background: #edf1f7;
}

main.wrap.content .product-card-media::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0) 55%,
            rgba(7,14,28,.06) 100%
        );
}

main.wrap.content .product-card-media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.005);

    transition:
        transform .65s cubic-bezier(.22, 1, .36, 1),
        filter .45s ease;
}

main.wrap.content .product-card:hover .product-card-media img {
    transform: scale(1.055);
    filter: saturate(1.04);
}


/* ---------------------------------------------------------
   BADGE
   --------------------------------------------------------- */

main.wrap.content .product-badge {
    position: absolute;
    z-index: 2;

    top: 15px;
    left: 15px;

    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 0 10px;

    color: #fff;
    background: rgba(9, 17, 32, .82);

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;

    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* ---------------------------------------------------------
   ARROW
   --------------------------------------------------------- */

main.wrap.content .product-arrow {
    position: absolute;
    z-index: 2;

    top: 15px;
    right: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    color: #111827;
    background: rgba(255,255,255,.92);

    border-radius: 50%;

    font-size: 15px;
    line-height: 1;

    box-shadow: 0 5px 18px rgba(0,0,0,.08);

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        background .3s ease,
        color .3s ease;
}

main.wrap.content .product-card:hover .product-arrow {
    transform: rotate(45deg);

    color: #fff;
    background: #315cff;
}


/* ---------------------------------------------------------
   BODY
   --------------------------------------------------------- */

main.wrap.content .product-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;

    padding: 27px 27px 23px;
}

main.wrap.content .product-card-kicker {
    margin: 0 0 8px;

    color: #758197;

    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
}

main.wrap.content .woocommerce-loop-product__title {
    margin: 0;

    color: #0b111c;

    font-size: clamp(29px, 3vw, 38px);
    font-weight: 650;
    line-height: 1;
    letter-spacing: -.05em;
}


/* ---------------------------------------------------------
   DESCRIPTION
   --------------------------------------------------------- */

main.wrap.content .product-card-excerpt {
    min-height: 104px;

    margin: 18px 0 0;

    font-size: 0;
    line-height: 1.65;

    color: #687386;
}

main.wrap.content .product-card-excerpt::after {
    display: block;

    font-size: 13px;
    line-height: 1.65;

    color: #687386;
}

main.wrap.content .product-card:nth-child(1)
.product-card-excerpt::after {
    content:
        "Ekipler ve işletmeler için marka odaklı, ölçeklenebilir dijital bağlantı deneyimi.";
}

main.wrap.content .product-card:nth-child(2)
.product-card-excerpt::after {
    content:
        "Kişisel bilgilerinizi güvenli ve profesyonel bir dijital bağlantıda buluşturun.";
}

main.wrap.content .product-card:nth-child(3)
.product-card-excerpt::after {
    content:
        "Günlük networking ve bireysel kullanım için sade, hızlı ve modern dijital kart.";
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

main.wrap.content .product-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: auto;
    padding-top: 22px;

    border-top: 1px solid rgba(15, 23, 42, .075);
}

main.wrap.content .product-card-footer .price {
    color: #101722;

    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
}

main.wrap.content .product-card-view {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #315cff;

    font-size: 12px;
    font-weight: 700;

    transition: gap .3s ease;
}

main.wrap.content .product-card-view span {
    font-size: 16px;
    line-height: 1;
}

main.wrap.content .product-card:hover .product-card-view {
    gap: 13px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    main.wrap.content {
        padding-top: 75px;
    }

    main.wrap.content .page-title {
        margin-bottom: 35px;
    }

    main.wrap.content ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    main.wrap.content ul.products .product-card:last-child {
        grid-column: 1 / -1;
        max-width: calc(50% - 9px);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    main.wrap.content {
        padding-top: 60px;
        padding-bottom: 80px;
    }

    main.wrap.content .page-title {
        margin-bottom: 30px;

        font-size: 43px;
    }

    main.wrap.content .woocommerce-result-count {
        margin-bottom: 16px;
    }

    main.wrap.content .woocommerce-ordering {
        float: none;
        width: 100%;
        margin-bottom: 25px;
    }

    main.wrap.content .woocommerce-ordering select {
        width: 100%;
    }

    main.wrap.content ul.products {
        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: 5px !important;
    }

    main.wrap.content ul.products .product-card:last-child {
        grid-column: auto;
        max-width: none;
    }

    main.wrap.content .product-card {
        border-radius: 19px;
    }

    main.wrap.content .product-card-media {
        aspect-ratio: 1.45 / 1;
    }

    main.wrap.content .product-card-body {
        padding: 23px 22px 20px;
    }

    main.wrap.content .woocommerce-loop-product__title {
        font-size: 31px;
    }

    main.wrap.content .product-card-excerpt {
        min-height: 82px;
        margin-top: 15px;
    }

    main.wrap.content .product-card-excerpt::after {
        font-size: 12px;
    }
}


/* =========================================================
   REDUCE MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    main.wrap.content .product-card,
    main.wrap.content .product-card-media img,
    main.wrap.content .product-arrow,
    main.wrap.content .product-card-view {
        transition: none;
    }
}


/* =========================================================
   HOOOPTAP — PRODUCT DETAIL
   Premium / Minimal Product Page
   ========================================================= */


/* ---------------------------------------------------------
   PAGE
   --------------------------------------------------------- */

main.wrap.content:has(.hoooptap-product-detail) {
    max-width: 1240px;
    padding-top: clamp(70px, 9vw, 125px);
    padding-bottom: clamp(90px, 11vw, 160px);
}


/* ---------------------------------------------------------
   REMOVE DUPLICATE / DEFAULT TITLE
   --------------------------------------------------------- */

main.wrap.content:has(.hoooptap-product-detail) > h1 {
    display: none;
}


/* ---------------------------------------------------------
   PRODUCT GRID
   --------------------------------------------------------- */

.hoooptap-product-detail {
    margin: 0;
}

.hoooptap-product-detail .product-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(400px, .95fr);
    align-items: start;
    gap: clamp(50px, 7vw, 105px);
}


/* ---------------------------------------------------------
   PRODUCT MEDIA
   --------------------------------------------------------- */

.hoooptap-product-detail .product-media {
    position: sticky;
    top: 35px;
}

.hoooptap-product-detail
.woocommerce-product-gallery {
    width: 100% !important;
    margin: 0 !important;

    background: #eef2f7;

    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 30px;

    overflow: hidden;

    box-shadow:
        0 2px 5px rgba(15, 23, 42, .02),
        0 25px 70px rgba(15, 23, 42, .075);
}


/* gallery wrapper */

.hoooptap-product-detail
.woocommerce-product-gallery__wrapper {
    margin: 0 !important;
}


/* main image */

.hoooptap-product-detail
.woocommerce-product-gallery__image {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    aspect-ratio: 1.25 / 1;

    margin: 0 !important;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255,255,255,.9),
            rgba(237,241,247,.8) 65%,
            #e8edf4 100%
        );
}

.hoooptap-product-detail
.woocommerce-product-gallery__image > a {
    display: block;
    width: 100%;
    height: 100%;
}

.hoooptap-product-detail
.woocommerce-product-gallery__image img.wp-post-image {
    display: block;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover;

    margin: 0 !important;

    transition:
        transform .7s cubic-bezier(.22, 1, .36, 1);
}

.hoooptap-product-detail
.woocommerce-product-gallery:hover
img.wp-post-image {
    transform: scale(1.025);
}


/* Hide WooCommerce zoom duplicate */

.hoooptap-product-detail
.woocommerce-product-gallery .zoomImg {
    display: none !important;
}


/* Fullscreen icon */

.hoooptap-product-detail
.woocommerce-product-gallery__trigger {
    z-index: 10;

    top: 18px !important;
    right: 18px !important;

    width: 38px !important;
    height: 38px !important;

    margin: 0 !important;

    color: #172033 !important;
    background: rgba(255,255,255,.9) !important;

    border: 0 !important;
    border-radius: 50% !important;

    box-shadow: 0 6px 20px rgba(0,0,0,.08);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition:
        transform .3s ease,
        background .3s ease;
}

.hoooptap-product-detail
.woocommerce-product-gallery__trigger:hover {
    transform: scale(1.07);
    background: #fff !important;
}


/* ---------------------------------------------------------
   SUMMARY
   --------------------------------------------------------- */

.hoooptap-product-detail .product-summary {
    padding-top: 8px;
}


/* Eyebrow */

.hoooptap-product-detail .product-summary > .eyebrow {
    display: inline-flex;
    align-items: center;

    margin-bottom: 18px;

    color: #315cff;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .14em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   DUPLICATE PRODUCT TITLE
   --------------------------------------------------------- */

/* İlk H1'i gizle, WooCommerce title kalsın */
.hoooptap-product-detail
.product-summary > h1:not(.product_title) {
    display: none;
}


/* Main title */

.hoooptap-product-detail
.product-summary .product_title {
    margin: 0;

    color: #0a101b;

    font-size: clamp(52px, 6vw, 78px);
    font-weight: 650;
    line-height: .9;
    letter-spacing: -.065em;
}


/* ---------------------------------------------------------
   PRICE
   --------------------------------------------------------- */

.hoooptap-product-detail
.product-summary > .price {
    display: flex;
    align-items: baseline;

    margin: 27px 0 34px !important;

    color: #101722 !important;

    font-size: 25px !important;
    font-weight: 650 !important;
    line-height: 1;
    letter-spacing: -.035em;
}

.hoooptap-product-detail
.product-summary > .price .woocommerce-Price-currencySymbol {
    margin-right: 3px;
}


/* ---------------------------------------------------------
   DESCRIPTION
   --------------------------------------------------------- */

.hoooptap-product-detail
.woocommerce-product-details__short-description {
    margin: 0 !important;
}


/*
   Existing .htp component
   We override the inline CSS visually.
*/

.hoooptap-product-detail .htp {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
}

.hoooptap-product-detail .htp-g {
    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 12px !important;
}


/* description cards */

.hoooptap-product-detail .htp-c {
    padding: 25px 25px 24px !important;

    border-radius: 20px !important;

    box-sizing: border-box;

    box-shadow: none !important;
}


/* left */

.hoooptap-product-detail .htp-l {
    background: #f5f7fa !important;

    border: 1px solid rgba(15, 23, 42, .065) !important;
}


/* right */

.hoooptap-product-detail .htp-r {
    background: #0b1220 !important;

    border: 1px solid #0b1220 !important;
}


/* tags */

.hoooptap-product-detail .htp-tag {
    display: block !important;

    margin-bottom: 10px !important;

    color: #315cff !important;

    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: .14em !important;
}


/* headings */

.hoooptap-product-detail .htp-c h2 {
    margin: 0 0 10px !important;

    color: #0b111c !important;

    font-size: 21px !important;
    font-weight: 650 !important;
    line-height: 1.1 !important;
    letter-spacing: -.035em;
}

.hoooptap-product-detail .htp-r h2 {
    color: #fff !important;
}


/* paragraph */

.hoooptap-product-detail .htp-c p {
    margin: 0 0 15px !important;

    color: #737d8d !important;

    font-size: 12px !important;
    line-height: 1.65 !important;
}

.hoooptap-product-detail .htp-r p {
    color: #9ba5b5 !important;
}


/* list */

.hoooptap-product-detail .htp-list {
    margin: 0 !important;
    padding: 0 !important;
}

.hoooptap-product-detail .htp-list li {
    display: flex !important;
    align-items: flex-start !important;

    margin: 9px 0 !important;

    color: #303948 !important;

    font-size: 11px !important;
    line-height: 1.5 !important;
}

.hoooptap-product-detail .htp-r .htp-list li {
    color: #e7ebf2 !important;
}


/* check icons */

.hoooptap-product-detail .htp-list li::before {
    width: 19px !important;
    height: 19px !important;

    margin-top: 0 !important;

    background: #e7efff !important;
    color: #315cff !important;

    font-size: 10px !important;
}

.hoooptap-product-detail .htp-r .htp-list li::before {
    background: #315cff !important;
    color: #fff !important;
}


/* ---------------------------------------------------------
   CART AREA
   --------------------------------------------------------- */

.hoooptap-product-detail
.product-summary > form.cart {
    display: flex;
    align-items: center;

    gap: 10px;

    margin: 27px 0 0 !important;
    padding: 0 !important;
}


/* quantity */

.hoooptap-product-detail
.product-summary .quantity {
    margin: 0 !important;
}

.hoooptap-product-detail
.product-summary .quantity .qty {
    width: 66px !important;
    height: 52px !important;

    padding: 0 8px !important;

    color: #121927 !important;
    background: #f5f7fa !important;

    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 13px !important;

    font-family: inherit;
    font-size: 14px !important;
    font-weight: 650 !important;

    text-align: center;

    outline: none;
}


/* remove number arrows */

.hoooptap-product-detail
.product-summary .quantity .qty::-webkit-inner-spin-button,
.hoooptap-product-detail
.product-summary .quantity .qty::-webkit-outer-spin-button {
    opacity: .5;
}


/* add to cart */

.hoooptap-product-detail
.single_add_to_cart_button {
    flex: 1;

    min-height: 52px !important;

    margin: 0 !important;
    padding: 0 27px !important;

    color: #fff !important;
    background: #315cff !important;

    border: 0 !important;
    border-radius: 13px !important;

    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .01em;

    cursor: pointer;

    box-shadow:
        0 10px 25px rgba(49, 92, 255, .20);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.hoooptap-product-detail
.single_add_to_cart_button:hover {
    transform: translateY(-2px);

    background: #244be0 !important;

    box-shadow:
        0 15px 32px rgba(49, 92, 255, .27);
}

.hoooptap-product-detail
.single_add_to_cart_button:active {
    transform: translateY(0);
}


/* ---------------------------------------------------------
   PRODUCT META
   --------------------------------------------------------- */

.hoooptap-product-detail
.product_meta {
    margin-top: 21px !important;
    padding-top: 18px;

    border-top: 1px solid rgba(15, 23, 42, .075);

    color: #8a93a2 !important;

    font-size: 10px !important;
    line-height: 1.5;
}

.hoooptap-product-detail
.product_meta .posted_in {
    color: #8a93a2 !important;
}

.hoooptap-product-detail
.product_meta a {
    color: #58657a !important;

    font-weight: 600;

    text-decoration: none;

    transition: color .25s ease;
}

.hoooptap-product-detail
.product_meta a:hover {
    color: #315cff !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

    main.wrap.content:has(.hoooptap-product-detail) {
        padding-top: 75px;
    }

    .hoooptap-product-detail .product-detail-grid {
        grid-template-columns: 1fr;

        gap: 42px;
    }

    .hoooptap-product-detail .product-media {
        position: relative;
        top: auto;
    }

    .hoooptap-product-detail .product-summary {
        max-width: 720px;
    }

    .hoooptap-product-detail
    .product-summary .product_title {
        font-size: clamp(48px, 8vw, 68px);
    }

    .hoooptap-product-detail .htp-g {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

    main.wrap.content:has(.hoooptap-product-detail) {
        padding-top: 55px;
        padding-bottom: 85px;
    }

    .hoooptap-product-detail .product-detail-grid {
        gap: 30px;
    }

    .hoooptap-product-detail
    .woocommerce-product-gallery {
        border-radius: 21px;
    }

    .hoooptap-product-detail
    .woocommerce-product-gallery__image {
        aspect-ratio: 1.12 / 1;
    }

    .hoooptap-product-detail .product-summary {
        padding-top: 0;
    }

    .hoooptap-product-detail
    .product-summary .product_title {
        font-size: 49px;
        line-height: .91;
    }

    .hoooptap-product-detail
    .product-summary > .price {
        margin: 21px 0 27px !important;

        font-size: 22px !important;
    }

    .hoooptap-product-detail .htp-g {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .hoooptap-product-detail .htp-c {
        padding: 22px !important;
        border-radius: 17px !important;
    }

    .hoooptap-product-detail .htp-c h2 {
        font-size: 19px !important;
    }

    .hoooptap-product-detail
    .product-summary > form.cart {
        gap: 8px;
    }

    .hoooptap-product-detail
    .product-summary .quantity .qty {
        width: 61px !important;
        height: 50px !important;
    }

    .hoooptap-product-detail
    .single_add_to_cart_button {
        min-height: 50px !important;
        padding: 0 18px !important;
    }
}

/* =========================================================
   HEADER — CART
   ========================================================= */

.nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav > ul {
    display: flex;
    align-items: center;
    gap: 28px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.nav > ul li {
    margin: 0;
    padding: 0;
}

.nav a {
    position: relative;

    color: #5f6979;
    text-decoration: none;

    font-size: 12px;
    font-weight: 600;

    transition:
        color .25s ease;
}

.nav a:hover {
    color: #101722;
}


/* Cart */

.nav .nav-cart {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 9px 13px;

    color: #111827;

    background: #f3f6fa;

    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 999px;

    transition:
        background .25s ease,
        transform .25s ease,
        border-color .25s ease;
}

.nav .nav-cart:hover {
    color: #111827;

    background: #fff;

    border-color: rgba(49, 92, 255, .18);

    transform: translateY(-1px);
}


/* Cart count */

.nav .cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 18px;
    height: 18px;

    padding: 0 5px;

    color: #fff;
    background: #315cff;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}


/* Mobile */

@media (max-width: 700px) {

    .nav {
        gap: 12px;
    }

    .nav > ul {
        gap: 14px;
    }

    .nav > ul li:nth-child(n + 3) {
        display: none;
    }

    .nav .nav-cart {
        padding: 8px 10px;
    }

    .nav-cart-label {
        font-size: 11px;
    }
}

/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .hoooptap-product-detail
    .product-summary .product_title {
        font-size: 43px;
    }

    .hoooptap-product-detail
    .product-summary > form.cart {
        align-items: stretch;
    }

    .hoooptap-product-detail
    .product-summary .quantity .qty {
        width: 55px !important;
    }
}

/* Bildirim Kutusu Görünürlük Ayarı */
.woocommerce-notices-wrapper {
  width: 100%;
  clear: both;
  z-index: 9999;
}

.woocommerce-message {
  background-color: #e0f2fe !important;
  border: 1px solid #bae6fd !important;
  border-left: 5px solid #0284c7 !important;
  color: #0369a1 !important;
  padding: 16px 24px !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 20px auto !important;
}

.woocommerce-message a.button {
  background-color: #000000 !important;
  color: #ffffff !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
}
/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hoooptap-product-detail
    .woocommerce-product-gallery__image img,
    .hoooptap-product-detail
    .single_add_to_cart_button,
    .hoooptap-product-detail
    .woocommerce-product-gallery__trigger {
        transition: none;
    }
}

