/* Styles for the demo / login / register / chat pages (kept from the test site). */
/* ===========================================================================
   GoldPro Tablet — site styles

   Parliament blue with gold. Cool neutrals throughout: the greys are tinted
   towards the blue rather than towards cream, so nothing on the page fights
   the header.
   =========================================================================== */

:root {
    --navy:       #1B3A5C;  /* parliament blue — header and hero  */
    --navy-deep:  #122741;  /* footer, one step down              */
    --navy-line:  #2E5178;  /* dividers on navy                   */
    --gold:       #C09A4A;  /* accent ON navy                     */
    --gold-lift:  #D4B166;  /* gold hover                         */
    --gold-ink:   #8A6A24;  /* accent on white — darker, readable */
    --paper:      #FFFFFF;  /* page                               */
    --paper-alt:  #F5F7FA;  /* alternate band, cool not cream     */
    --ink:        #14181F;  /* body text                          */
    --slate:      #5A6472;  /* secondary text                     */
    --rule:       #DDE1E7;  /* hairlines                          */
    --danger:     #9B2C24;

    --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

    --wrap: 1140px;
}

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

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

a { color: inherit; }

.skip:focus { left: 12px; top: 12px; }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* ---- type scale -------------------------------------------------------- */

h1, h2, h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; margin: 0; }
h1 { font-size: clamp(2.4rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.35rem); }
h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; }

.eyebrow {
    font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--gold-ink); margin: 0 0 14px;
}

.lede { font-size: 1.15rem; color: var(--slate); max-width: 56ch; }

/* ---- header ------------------------------------------------------------ */

/* ---- buttons ----------------------------------------------------------- */

.btn {
    display: inline-block; padding: 11px 22px;
    font: inherit; font-size: 0.97rem; font-weight: 600;
    text-decoration: none; border: 1px solid transparent; border-radius: 2px;
    cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.btn-gold { background: var(--gold); color: #221A05; }
.btn-gold:hover { background: var(--gold-lift); }
.btn-quiet { background: transparent; color: inherit; border-color: currentColor; opacity: .85; }
.btn-quiet:hover { opacity: 1; }
.btn-ink { background: var(--navy); color: #FFFFFF; }
.btn-ink:hover { background: #2A3646; }
.btn-wide { width: 100%; text-align: center; }

.linklike:hover { opacity: 1; }

/* ---- hero -------------------------------------------------------------- */

.hero { background: var(--navy); color: #EDF1F7; padding: 76px 0 92px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero h1 { color: #FFFFFF; }
.hero .lede { color: #B9C7D8; margin: 22px 0 34px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-fine { font-size: 0.88rem; color: #8CA0B8; margin-top: 18px; }

/* ---- the fiş: this page's signature ------------------------------------ */
/* Drawn in CSS at receipt proportions rather than shipped as an image, so it
   stays crisp on any screen and costs nothing to load. */

.fis-stage { display: flex; justify-content: center; perspective: 1400px; }

.fis {
    width: 340px; background: #FDFCF7; color: #1A1A18;
    font-family: var(--mono); font-size: 12px; line-height: 1.85;
    padding: 22px 20px 30px;
    transform: rotate(-1.4deg);
    box-shadow: 0 26px 50px rgba(0,0,0,.34);
    position: relative;
}
/* torn edge along the bottom */
.fis::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px;
    background:
        radial-gradient(circle at 5px 0, transparent 5px, #FDFCF7 5px) repeat-x;
    background-size: 10px 10px;
}
.fis-head { text-align: center; border-bottom: 1px dashed #B9B5A8; padding-bottom: 10px; margin-bottom: 10px; }
.fis-shop { font-weight: 500; letter-spacing: .1em; }
.fis-meta { color: #6B6759; font-size: 11px; }
.fis-row { display: flex; justify-content: space-between; gap: 10px; }
.fis-row span:last-child { text-align: right; white-space: nowrap; }
.fis-sep { border-top: 1px dashed #B9B5A8; margin: 10px 0; }
.fis-total { font-weight: 500; }
.fis-foot { text-align: center; color: #6B6759; font-size: 11px; margin-top: 12px; }

/* ---- sections ---------------------------------------------------------- */

.band { padding: 84px 0; }
.band-rule { border-top: 1px solid var(--rule); }
.band-alt { background: var(--paper-alt); }
.section-head { max-width: 62ch; margin-bottom: 46px; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.feature { background: var(--paper); padding: 30px 26px; }
.feature h3 { margin-bottom: 8px; }
.feature p { margin: 0; color: var(--slate); font-size: 0.98rem; }

.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.shot { border: 1px solid var(--rule); background: #fff; }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { padding: 12px 16px; font-size: .9rem; color: var(--slate); border-top: 1px solid var(--rule); }
.shot-placeholder {
    aspect-ratio: 16 / 10; display: grid; place-items: center;
    background: repeating-linear-gradient(45deg, #F1F4F8, #F1F4F8 10px, #E7ECF2 10px, #E7ECF2 20px);
    color: var(--slate); font-size: .88rem; text-align: center; padding: 20px;
}

/* ---- price ------------------------------------------------------------- */

.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.price-card { border: 1px solid var(--navy); padding: 34px 32px; background: #fff; }
.price-amount { font-size: 3rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.price-period { color: var(--slate); font-size: .96rem; margin-top: 6px; }
.price-list { list-style: none; padding: 0; margin: 24px 0 28px; font-size: .98rem; }
.price-list li { padding: 9px 0 9px 24px; border-top: 1px solid var(--rule); position: relative; }
.price-list li::before { content: "—"; position: absolute; left: 0; color: var(--gold-ink); }

.pay-list { list-style: none; padding: 0; margin: 0; }
.pay-list li { padding: 16px 0; border-top: 1px solid var(--rule); }
.pay-list li:last-child { border-bottom: 1px solid var(--rule); }
.pay-list strong { font-weight: 600; display: block; }
.pay-list span { color: var(--slate); font-size: .96rem; }

/* ---- forms ------------------------------------------------------------- */

.form-page { max-width: 460px; margin: 0 auto; padding: 72px 24px 96px; }
.form-page h1 { font-size: 2rem; margin-bottom: 8px; }
.form-page .lede { font-size: 1rem; margin-bottom: 32px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 6px; }
.field input, .field textarea, .field select {
    width: 100%; padding: 11px 13px;
    font: inherit; font-size: 1rem;
    background: #fff; color: var(--ink);
    border: 1px solid var(--rule); border-radius: 2px;
}
/* A select left unstyled sits a few pixels shorter than the inputs above it
   and in the browser's own font, which reads as a field from another form. */
.field select { appearance: none; cursor: pointer; padding-right: 36px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%234b5563' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center; background-size: 11px; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--navy); outline: none; box-shadow: 0 0 0 3px rgba(27,58,92,.14); }
.field .hint { font-size: .84rem; color: var(--slate); margin-top: 5px; }

.msg { padding: 12px 15px; border-radius: 2px; font-size: .95rem; margin-bottom: 22px; }
.msg-error { background: #FBEDEB; color: var(--danger); border: 1px solid #E8C4BE; }
.msg-ok { background: #EAF0F7; color: #1B3A5C; border: 1px solid #C3D2E3; }
.field-error { color: var(--danger); font-size: .86rem; margin-top: 5px; }

.form-alt { margin-top: 26px; font-size: .95rem; color: var(--slate); text-align: center; }

/* ---- test drive -------------------------------------------------------- */

.trial-bar {
    background: var(--navy); color: #E4EBF3;
    padding: 14px 0; font-size: .94rem;
}
.trial-bar-inner { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.trial-days { color: var(--gold-lift); font-weight: 600; }

.demo-frame {
    border: 1px solid var(--rule); background: #fff;
    min-height: 620px; display: grid; place-items: center;
    text-align: center; padding: 40px;
}
.demo-frame p { color: var(--slate); max-width: 46ch; }

.note-list { color: var(--slate); font-size: .96rem; }

/* ---- prose (Hakkımızda, Şartlar) --------------------------------------- */

.prose { max-width: 68ch; }
.prose h2 { font-size: 1.35rem; margin: 40px 0 12px; }
.prose h2:first-of-type { margin-top: 0; }
.prose p { margin: 0 0 16px; }
.prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 7px; }
.prose .updated { font-size: .9rem; color: var(--slate); border-left: 2px solid var(--gold-ink); padding-left: 14px; }

/* ---- footer ------------------------------------------------------------ */

.foot-col a { display: block; text-decoration: none; opacity: .8; padding: 4px 0; }
.foot-col a:hover { opacity: 1; color: var(--gold-lift); }
/* ---- responsive -------------------------------------------------------- */

@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; gap: 44px; }
    .feature-grid { grid-template-columns: 1fr 1fr; }
    .shots { grid-template-columns: 1fr 1fr; }
    .price-grid { grid-template-columns: 1fr; gap: 36px; }
    .foot-inner { grid-template-columns: 1fr 1fr; }
    .nav { display: none; }
}

@media (max-width: 620px) {
    body { font-size: 16px; }
    .band { padding: 58px 0; }
    .hero { padding: 54px 0 66px; }
    .feature-grid, .shots { grid-template-columns: 1fr; }
    .head-inner { flex-wrap: wrap; gap: 14px; padding-top: 12px; padding-bottom: 12px; }
    .head-cta { margin-left: auto; }
    .head-shop { display: none; }
    .fis { width: 100%; max-width: 320px; }
    .foot-inner { grid-template-columns: 1fr; gap: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- demo: the app inside a tablet shell -------------------------------- */
/* Landscape, because the entry row is ten columns wide and is designed for a
   tablet held that way. Portrait would show the product misused. */

.tablet-stage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 34px;
    margin: 28px 0 10px;
}

.tablet-shell {
    position: relative;
    width: min(760px, 100%);
    aspect-ratio: 16 / 10;
    background: #23282e;
    border-radius: 26px;
    padding: 18px 34px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28), inset 0 0 0 2px #343b43;
}

.tablet-screen {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}

.tablet-screen iframe {
    /* Rendered at tablet width and scaled down, rather than squeezed: the entry
       row would otherwise reflow and the visitor would see a layout no real
       device produces. */
    width: 1280px;
    height: 800px;
    border: 0;
    transform: scale(.54);
    transform-origin: top left;
}

.tablet-camera {
    position: absolute;
    top: 50%;
    left: 15px;
    width: 7px;
    height: 7px;
    margin-top: -3px;
    background: #4d555e;
    border-radius: 50%;
}

/* ---- phone shell -------------------------------------------------------
   The SAME Flutter build as the tablet demo, in a narrower frame.

   AppLayout.isPhone reads MediaQuery.shortestSide < 600 at runtime, and in a
   browser that is the iframe. 400px less 14px of bezel each side leaves the
   app 372dp — a few dp from a real Galaxy A34 — so it draws the phone screens
   without a flag, a second bundle or anything to keep in step.

   That also makes the demo honest: it is the same binary a customer installs,
   laid out by the same rule, rather than a phone-shaped mock-up. */
.phone-shell {
    position: relative;
    width: min(400px, 100%);
    aspect-ratio: 9 / 19;
    background: #23282e;
    border-radius: 34px;
    padding: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28), inset 0 0 0 2px #343b43;
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
}

.phone-screen iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* The earpiece slot, for the same reason the tablet has a camera dot: it is
   what makes the frame read as a device rather than a bordered box. */
.phone-notch {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 76px;
    height: 5px;
    border-radius: 3px;
    background: #40474f;
}


.tablet-cta { max-width: 260px; text-align: center; }
.cta-arrow { width: 96px; height: auto; display: block; margin: 0 auto 6px; }
.cta-note { color: var(--slate); font-size: .95rem; margin-bottom: 14px; }

@media (max-width: 900px) {
    /* Below this the shell is narrower than the scaled screen, so the frame
       stops being a frame. Show the button alone. */
    .tablet-shell { display: none; }
    .tablet-cta { max-width: none; }

    /* The phone shell KEEPS its iframe — a 400px frame still fits a narrow
       screen where a 760px one does not — but loses the bezel. Drawing a
       phone around an app that is already on a phone is a picture of the
       thing the visitor is holding. */
    .phone-shell {
        width: 100%;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }
    .phone-screen { border-radius: 0; }
    .phone-notch { display: none; }
}

/* ---- canlı sohbet -------------------------------------------------------- */

#chatFab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: var(--navy, #3D4F63);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    z-index: 60;
}

/* The browser's own rule is `[hidden] { display: none }`, which an ID selector
   outranks — so `display: flex` below silently defeated `panel.hidden = true`
   and the close button appeared to do nothing. Restate it at equal weight. */
#chatPanel[hidden],
#chatFab[hidden] {
    display: none !important;
}

#chatPanel {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 340px;
    max-width: calc(100vw - 32px);
    height: 460px;
    max-height: calc(100vh - 44px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
    z-index: 61;
}

#chatPanel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--navy, #3D4F63);
    color: #fff;
    font-weight: 600;
}

#chatPanel header button {
    background: none;
    border: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

#chatBody {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    background: #F4F6F8;
}

.chat-empty { color: #7A8794; font-size: .92rem; margin: 0; }

.chat-msg { margin-bottom: 10px; display: flex; flex-direction: column; }
.chat-msg p {
    margin: 0;
    padding: 8px 11px;
    border-radius: 10px;
    max-width: 88%;
    font-size: .93rem;
    line-height: 1.35;
    /* Someone else's text, and it may be one long word. */
    overflow-wrap: anywhere;
}
.chat-msg time { font-size: .72rem; color: #98A2AE; margin-top: 3px; }

.chat-msg.me { align-items: flex-end; }
.chat-msg.me p { background: var(--navy, #3D4F63); color: #fff; }
.chat-msg.them { align-items: flex-start; }
.chat-msg.them p { background: #fff; border: 1px solid #DDE3EA; color: #23282e; }

#chatForm { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #E4E8ED; }
#chatForm input { flex: 1; padding: 9px 11px; border: 1px solid #DDE3EA; border-radius: 6px; }
#chatForm button {
    border: 0;
    border-radius: 6px;
    padding: 9px 16px;
    background: var(--navy, #3D4F63);
    color: #fff;
    cursor: pointer;
}

#chatStatus {
    margin: 0;
    padding: 0 12px 8px;
    font-size: .8rem;
    color: #B4472F;
    min-height: 1em;
}

/* ---- sohbet yönetimi ----------------------------------------------------- */

.admin-chat { display: grid; grid-template-columns: 280px 1fr; gap: 18px; min-height: 60vh; }
.admin-chat aside { border: 1px solid #DDE3EA; border-radius: 10px; overflow: auto; max-height: 70vh; }

.thread {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid #EEF1F5;
    padding: 11px 13px;
    cursor: pointer;
    position: relative;
}
.thread.on { background: #EFF3F7; }
.thread strong { display: block; font-size: .95rem; }
.thread .sub { display: block; font-size: .78rem; color: #7A8794; }
.thread .badge {
    position: absolute; right: 10px; top: 12px;
    background: #B4472F; color: #fff;
    border-radius: 9px; padding: 1px 6px; font-size: .72rem;
}

#threadView { border: 1px solid #DDE3EA; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; }
.thread-head { font-size: .9rem; color: #7A8794; margin-bottom: 10px; }
.thread-body { flex: 1; overflow-y: auto; max-height: 52vh; }
.thread-reply { display: flex; gap: 8px; margin-top: 12px; }
.thread-reply input { flex: 1; padding: 9px 11px; border: 1px solid #DDE3EA; border-radius: 6px; }
.thread-reply button { border: 0; border-radius: 6px; padding: 9px 18px; background: var(--navy, #3D4F63); color: #fff; cursor: pointer; }

@media (max-width: 800px) { .admin-chat { grid-template-columns: 1fr; } }

/* Shown in the tablet shell when wwwroot/tablet is empty — a blank screen
   inside a device frame reads as a broken product, which is worse than a
   sentence saying what is missing. */
.tablet-missing {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
    color: #7A8794;
    font-size: .9rem;
}
.tablet-missing strong { color: #B4472F; font-size: 1rem; }
.tablet-missing code {
    background: #F1F3F6;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: .78rem;
    overflow-wrap: anywhere;
}

/* ---- language picker ---------------------------------------------------
   In the footer rather than the header: a visitor whose browser already said
   "de" is served German and never needs it, so it should not compete with the
   navigation. The one who does need it is looking for it, and the footer is
   where sites put it. */
.lang-picker a {
    color: inherit;
    opacity: .72;
    text-decoration: none;
}

.lang-picker a:hover { opacity: 1; text-decoration: underline; }

/* ---- two products, side by side ----------------------------------------
   Symmetrical on purpose: neither product is the real one with the other as
   an afterthought. A shop with a counter buys the tablet, one that works from
   a case buys the phone, and plenty buy both — a layout that made one the
   headline would be telling the visitor which they are. */
.product-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}

.product-card {
    background: #fff;
    border: 1px solid var(--line, #e3e6ea);
    border-radius: 14px;
    padding: 28px 26px 26px;
    text-align: center;
}

.product-shot {
    height: 210px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 18px;
}

.product-shot img {
    max-height: 100%;
    max-width: 100%;
    /* The two devices are drawn to the same scale, so the tablet reads as the
       larger object. Sizing each to fill its box would have made them look
       like the same device twice. */
    object-fit: contain;
}

.product-price {
    margin: 14px 0 4px;
    font-size: 1.05rem;
}

.product-price strong { font-size: 2rem; }
.product-price span { opacity: .65; }

.product-lede { opacity: .8; margin: 6px 0 0; }

.product-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 22px;
    text-align: left;
    display: inline-block;
}

.product-list li { margin: 7px 0; padding-left: 22px; position: relative; }

.product-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold, #c9a227);
}

.product-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 860px) {
    /* Stacked, and the PHONE first — a visitor reading this on a phone is
       holding the thing that card describes. */
    .product-split { grid-template-columns: 1fr; }
    .product-shot { height: 170px; }
}

/* Two prices, side by side, matching the two product cards above. */
.price-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 620px;
    margin: 0 auto 6px;
    text-align: center;
}

.price-name { margin: 0; opacity: .75; }
.price-included { margin: 18px auto 10px; }

@media (max-width: 640px) {
    .price-two { grid-template-columns: 1fr; }
}

/* ---- hero: copy left, devices right ------------------------------------
   The arrangement the visitor expects from every other software site, and it
   works for a reason — the sentence is read first and the picture confirms it.
   The image is wide, so it takes the larger share. */
.hero-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 36px;
    align-items: center;
}

.hero-copy h1 { margin: 6px 0 14px; }
.hero-actions { margin-top: 22px; }
.hero-shot img { width: 100%; height: auto; display: block; }

@media (max-width: 900px) {
    /* Copy above, picture below. A hero image squeezed to half a phone screen
       shows nothing legible, and the sentence is what has to land. */
    .hero-grid { grid-template-columns: 1fr; }
}