/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html {
color: #222;
font-size: 1em;
line-height: 1.4;
}

::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}

::selection {
background: #b3d4fc;
text-shadow: none;
}

hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
.search-container {
max-width: 500px;
margin: 50px auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
input[type="text"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
button {
padding: 10px 15px;
background-color: #5bc0de;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #0056b3;
}
.results {
margin-top: 20px;
text-align: left;
}
.result-item {
padding: 10px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 10px;
}
.prefix {
background: #5bc0de;
color: white;
padding: 15px 15px;
font-size: 16px;
font-weight: bold;
border-right: 2px solid #157b99;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.loading {
font-size: 18px;
color: #007bff;
font-weight: bold;
margin-top: 10px;
display: none;
}
.loading span {
display: inline-block;
width: 8px;
height: 8px;
margin: 0 3px;
background: #007bff;
border-radius: 50%;
animation: loadingAnimation 1.2s infinite ease-in-out;
}

.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #f8f9fa;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
    
.title {
font-size: 24px;
font-weight: bold;
}

.search-btn {
padding: 8px 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
float:right;
}

.search-btn:hover {
background-color: #0056b3;
}
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}

fieldset {
border: 0;
margin: 0;
padding: 0;
}

textarea {
resize: vertical;
}

.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}


/* ===== Initializr Styles ==================================================
Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
========================================================================== */

body {
font: 17px/27px Helvetica, Helvetica Neue, Arial;
}

.wrapper {
width: 90%;
margin: 0 5%;
}

/* ===================
ALL: Orange Theme
=================== */

.header-container {
/*border-bottom: 20px solid #2c83b7;*/
}

.footer-container,
.main aside {
/*border-top: 10px solid #2c83b7;*/
}


.header-container,
.footer-container,
.main aside {
background: #0066cc;
}

.title {
color: white;
}

/* ==============
MOBILE: Menu
============== */

nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}

nav a {
display: block;
margin-bottom: 10px;
padding: 15px 0;

text-align: center;
text-decoration: none;
font-weight: bold;

color: white;
background: #2b96d6;
}

nav a:hover,
nav a:visited {
color: white;
}

nav a:hover {
text-decoration: underline;
}

/* ==============
MOBILE: Main
============== */

.main {
padding: 2px 0;
}

.main article h1 {
font-size: 2em;
}

.main aside {
color: white;
padding: 0px 5% 10px;
}

.footer-container footer {
color: white;
padding: 20px 0;
}

/* ===============
ALL: IE Fixes
=============== */

.ie7 .title {
padding-top: 20px;
}

/* ==========================================================================
Author's custom styles
========================================================================== */

/* ==========================================================================
Media Queries
========================================================================== */

@media only screen and (min-width: 480px) {

/* ====================
INTERMEDIATE: Menu
==================== */

nav a {
float: left;
width: 27%;
margin: 0 1.7%;
padding: 25px 2%;
margin-bottom: 0;
}

nav li:first-child a {
margin-left: 0;
}

nav li:last-child a {
margin-right: 0;
}

/* ========================
INTERMEDIATE: IE Fixes
======================== */

nav ul li {
display: inline;
}

.oldie nav a {
margin: 0 0.7%;
}
}

@media only screen and (min-width: 768px) {

/* ====================
WIDE: CSS3 Effects
==================== */

/*
.header-container,
.main aside {
-webkit-box-shadow: 0 5px 10px #aaa;
-moz-box-shadow: 0 5px 10px #aaa;
box-shadow: 0 5px 10px #aaa;
}
*/
.header-container {
/*-webkit-box-shadow: 0 5px 10px #aaa;
-moz-box-shadow: 0 5px 10px #aaa;
box-shadow: 0 5px 10px #aaa;*/
}

/* ============
WIDE: Menu
============ */

.title {
float: left;
}

nav {
float: right;
width: 38%;
}

/* ============
WIDE: Main
============ */

.main article {
/*float: left;*/
/*width: 90%;*/
}

.main aside {
float: right;
width: 8%;
}
}

@media only screen and (min-width: 1140px) {

/* ===============
Maximal Width
=============== */

.wrapper {
width:69%;/* 1140px - 10% for margins */
margin: 0 auto;
}
}

/* ==========================================================================
Helper classes
========================================================================== */

.hidden {
display: none !important;
visibility: hidden;
}

.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}

.invisible {
visibility: hidden;
}



/* ==========================================================================
Print styles
========================================================================== */

@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}

a,
a:visited {
text-decoration: underline;
}

a[href]:after {
content: " (" attr(href) ")";
}

abbr[title]:after {
content: " (" attr(title) ")";
}

a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}

pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}

thead {
display: table-header-group;
}

tr,
img {
page-break-inside: avoid;
}

img {
max-width: 100% !important;
}

p,
h2,
h3 {
orphans: 3;
widows: 3;
}

h2,
h3 {
page-break-after: avoid;
}
}
.checkbox-container {
display: flex;
align-items: center;
gap: 8px;
margin: -23px 0px 0px 0px;
}

.checkbox-container input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
}

.checkbox-container label {
font-size: 15px;
color: #333;
cursor: pointer;
margin: 5px 2px 0px 0px;
}

.checkbox-container a {
color: #4CAF50;
text-decoration: none;
font-weight: bold;
}

.checkbox-container a:hover {
text-decoration: underline;
}
section[itemprop="articleBody"] {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    text-align: left;
    margin: 30px auto;
    font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
    line-height: 1.7;
    font-size: 17px;
    color: #333;
}

/* Liste maddeleri */
section ul {
    list-style: none;
    padding-left: 0;
    margin-top: 20px;
}

section ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    background-color: #f6f6f6;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    padding: 12px 16px 12px 40px;
    font-size: 16px;
    font-weight: 500;
    color: #222;
}

/* Nokta yerine sade bir onay ikonu */
section ul li::before {
    content: "✔";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-70%);
    color: #2e7d32; /* yeşil ama kurumsal */
    font-weight: bold;
    font-size: 18px;
}

section[itemprop="articleBody"] h2 {
    font-size: 24px;
    color: #1a237e;
    margin-top: 30px;
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding-bottom: 6px;
}

@media screen and (max-width: 768px) {
    section[itemprop="articleBody"] {
        padding: 20px;
        font-size: 16px;
    }

    section ul li {
        font-size: 15px;
        padding-left: 38px;
    }
}

section p {
font-size: 16px;
color: #333;
line-height: 1.6;
margin-bottom: 15px;
}





section .search-button {
display: inline-block;
background: #007bff; 
color: white;
font-size: 20px;
font-weight: bold;
padding: 12px 24px;
border-radius: 5px;
text-decoration: none;
margin-top: 15px;
transition: background 0.3s ease;
}

section .search-button:hover {
background: #0056b3;
}

.social-share-container {
text-align: center;
margin: 4px 9px -9px 0px;
/*padding: 15px;*/

background: #f9f9f9;
border-radius: 10px;
/*box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);*/
}

.alert-social{
color: #000;
background-color: #fbfbfb;
}
.optional-text {
color: gray;
font-size: 0.9em;
}





.form_input:hover {
border-color: #6a34ad;
}


.form_input:focus {
border-color: #6a34ad;
box-shadow: 0 0 8px rgba(78, 38, 129, 0.4);
}


@media screen and (max-width: 768px) {
.form_input {
font-size: 18px;
padding: 14px;
}
}


.form-container {
background: #f9f9f9;
padding: 25px;
margin-top: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 450px;
margin-left: auto;
margin-right: auto;
}


.form-container h2 {
font-size: 20px;
color: #4e2681;
margin-bottom: 20px;
}


.form-group {
  width: 100%;
  max-width: 500px;
  margin: 20px auto;
}


.form-group label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}


.form-group input {
width: 100%;
padding: 12px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 6px;
outline: none;
transition: 0.3s ease-in-out;
display: block;
}


.form-group input:hover,
.form-group input:focus {
border-color: #6a34ad;
box-shadow: 0 0 6px rgba(78, 38, 129, 0.3);
}


.form-group input::placeholder {
color: #888;
font-size: 14px;
}


.submit-btn {
background: #4e2681;
color: white;
font-size: 16px;
font-weight: bold;
border: none;
padding: 12px 20px;
border-radius: 6px;
cursor: pointer;
width: 100%;
margin-top: 15px;
transition: 0.3s;
}

.submit-btn:hover {
background: #6a34ad;
box-shadow: 0 4px 8px rgba(78, 38, 129, 0.2);
}

@keyframes shake {
0% { transform: translateX(0); }
20% { transform: translateX(-5px); }
40% { transform: translateX(5px); }
60% { transform: translateX(-5px); }
80% { transform: translateX(5px); }
100% { transform: translateX(0); }
}

.shake-animation {
display: inline-block;
animation: shake 1s ease-in-out infinite; 
}


#feedback_form_user {
opacity: 0;
height: 0;
overflow: hidden;
visibility: hidden;
transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out, visibility 0.5s;
}

#feedback_form_voit {
opacity: 0;
height: 0;
overflow: hidden;
visibility: hidden;
transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out, visibility 0.5s;
}


#feedback_form_user.visible {
opacity: 1;
height: auto;
visibility: visible;
width: 100%;
}




#feedback_form_voit.visible {
opacity: 1;
height: auto;
visibility: visible;
}


#phoneDetails {
    opacity: 1;
    visibility: visible;
    transition: all 0.5s ease-in-out;
    padding: 15px;
    margin-top: 20px;
    background-color: #f9f9f9;
    border-left: 5px solid #4CAF50;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    font-size: 16px;
    line-height: 1.6;
}


@media screen and (max-width: 480px) {
#user-question button {
width: 100%;
display: block;
margin: 10px auto;
}
}


.comment-main {
background: #ffffff;
border: 1px solid #ddd;
border-radius: 10px;
padding: 15px;
margin-bottom: 15px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}


.name {
font-size: 16px;
font-weight: bold;
color: #4e2681;
margin-bottom: 5px;
}


.datetime {
font-size: 14px;
color: #777;
display: block;
margin-bottom: 10px;
}


.content {
font-size: 15px;
line-height: 1.6;
color: #333;
margin-bottom: 10px;
}


.delete a img, .reply a img {
width: 20px;
height: 20px;
margin-right: 8px;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.3s ease-in-out;
}

.delete a img:hover, .reply a img:hover {
opacity: 1;
}

.like-count {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
}

.like-count a {
font-size: 14px;
color: #333;
text-decoration: none;
padding: 5px 10px;
border-radius: 5px;
background: #f4f4f4;
transition: background 0.3s ease-in-out;
}

.like-count a:hover {
background: #ddd;
}


.subcomments {
background: #f9f9f9;
border-radius: 8px;
padding: 10px;
margin-top: 10px;
display: none; 
}

.subcomment h4 {
font-size: 16px;
color: #333;
margin-bottom: 10px;
}

.subcommentinner {
padding: 10px;
border-radius: 5px;
}

.subcommentinner input,
.subcommentinner textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
margin-top: 5px;
}

.subcommentinner button {
background: #4e2681;
color: white;
padding: 8px 12px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s ease-in-out;
}

.subcommentinner button:hover {
background: #6a34ad;
}

@media screen and (max-width: 768px) {
.comment-main {
padding: 10px;
}

.name {
font-size: 14px;
}

.datetime {
font-size: 12px;
}

.like-count a {
font-size: 12px;
padding: 5px;
}

.subcommentinner button {
width: 100%;
text-align: center;
}
}



.alert {
background: #ffffff;
border: 2px solid #ddd;
border-radius: 10px;
padding: 20px;
margin-bottom: 15px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
}


.CenterContent {
flex-grow: 1;
text-align: left;
}


.close {
float: right;
font-size: 20px;
color: #555;
opacity: 0.6;
transition: opacity 0.3s ease-in-out;
}

.close:hover {
opacity: 1;
}


.visitor-count {
font-size: 14px;
color: #555;
display: flex;
align-items: center;
}

.visitor {
background-image: url('/img/visitor-icon.webp');
width: 16px;
height: 16px;
display: inline-block;
background-size: contain;
margin-right: 5px;
}


.PanelNumber {
font-size: 18px;
font-weight: bold;
color: #4e2681;
margin-right: 10px;
}


.panel-detail-icon i {
width: 24px;
height: 24px;
display: inline-block;
background-size: contain;
vertical-align: middle;
}


.panel-city {
font-size: 14px;
color: #666;
font-weight: bold;
margin-top: 5px;
}


p {
font-size: 15px;
/*color: #444;*/
margin-bottom: 5px;
}


hr {
border: 0;
height: 1px;
background: #ddd;
margin: 15px 0;
}


.leftcontent {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}


.Number-Safe-Icon {
background: #f5f5f5;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}

.Number-Icon {
background-image: url('/img/phone-icon.webp');
width: 30px;
height: 30px;
display: inline-block;
background-size: contain;
}


@media screen and (max-width: 768px) {
.alert {
flex-direction: column;
text-align: center;
}

.visitor-count {
justify-content: center;
}

.panel-detail-icon i {
display: block;
margin: 5px auto;
}

.leftcontent {
margin-top: 15px;
}
}


.table-box {
width: 100%;
margin: 20px auto;
padding: 15px;
background: #ffffff;
border-radius: 10px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
overflow-x: auto;
}


.table-container {
flex: 1;
padding: 10px;
}


table {
width: 100%;
border-collapse: collapse;
border-radius: 8px;
overflow: hidden;
background: #fff;
}


th {
background: #4e2681;
color: white;
padding: 12px;
text-align: left;
font-size: 16px;
}


td {
padding: 10px;
border-bottom: 1px solid #ddd;
font-size: 15px;
color: #333;
}


tbody tr:nth-child(even) {
background: #f9f9f9;
}

tbody tr:hover {
background: #e8e8ff;
}


.toggle-button {
background: #4e2681;
color: white;
padding: 10px 15px;
border: none;
border-radius: 6px;
cursor: pointer;
margin-top: 10px;
transition: background 0.3s ease-in-out;
font-size: 14px;
}

.toggle-button:hover {
background: #6a34ad;
}


@media screen and (max-width: 768px) {
.table-box {
padding: 10px;
}

.table-container {
width: 100%;
padding: 5px;
}

th, td {
font-size: 14px;
padding: 8px;
}

.toggle-button {
width: 100%;
}
}

.detail-button {
background: #4e2681; 
color: white;
padding: 12px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
text-align: center;
display: inline-flex;
align-items: center;
gap: 8px; 
transition: background 0.3s ease-in-out, transform 0.2s ease-in-out;
}


.detail-button:hover {
background: #6a34ad;
transform: scale(1.05);
}


.detail-button:active {
background: #3b1d5a;
transform: scale(0.95);
}


@media screen and (max-width: 768px) {
.detail-button {
width: 100%; 
font-size: 14px;
padding: 10px;
}
}
@media screen and (max-width: 480px) {
#user-question button {
width: 100%;
margin: 5px 0;
}
}

@media screen and (max-width: 768px) {
.alert {
padding: 15px;
}

.form_group,
.commentinpt,
.checkbox-container {
padding: 10px 0;
}

.btn-info {
font-size: 16px;
}
}
/* MODAL */
.custom-modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.custom-modal-content {
background-color: white;
margin: 10% auto;
padding: 20px;
border-radius: 10px;
width: 40%;
text-align: center;
position: relative;
}
.close-modal {
position: absolute;
top: 0px;
right: 15px;
font-size: 24px;
cursor: pointer;
}

.social-btn.copylink i {
    color: #333;
}

@media screen and (max-width: 768px) {
.custom-modal-content {
width: 90%;
max-height: 70vh;
padding: 20px;
overflow-y: auto;
}

.social-btn {
font-size: 16px;
padding: 12px;
}
}


.social-actions {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
color: #65676B;
}

.left-actions {
flex: 1;
gap: 20px;
display: flex;
justify-content: flex-start;
}

.right-actions {
display: flex;
gap: 20px;
justify-content: flex-end;
}

.action-item {
cursor: pointer;
font-weight: bold;
display: flex;
align-items: center;
gap: 5px;
padding: 8px 12px;
border-radius: 20px;
border: 1px solid #ccc;
position: relative;
transition: all 0.2s ease-in-out;
}

.icon {
width: 22px;
height: 22px;
stroke: #65676B;
display: inline-block;
  vertical-align: middle;
transition: stroke 0.2s ease-in-out, transform 0.2s ease-in-out;
}

svg.icon {
    width: 22px;
height: 22px;
stroke: #65676B;
display: inline-block;
  vertical-align: middle;
transition: stroke 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.action-item:hover {
color: #1877F2;
border: 1px solid #1877F2;
background-color: rgba(24, 119, 242, 0.1);
transform: scale(1.1);
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.action-item:hover .icon {
stroke: #1877F2;
transform: scale(1.2);
}

.action-item::after {
content: attr(data-tooltip);
position: absolute;
bottom: 150%;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 6px 10px;
border-radius: 5px;
font-size: 14px;
white-space: nowrap;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.action-item::before {
content: "";
position: absolute;
bottom: 140%;
left: 50%;
transform: translateX(-50%);
border-width: 5px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.action-item:hover::after,
.action-item:hover::before {
visibility: visible;
opacity: 1;
}
.action-item::after {
content: attr(data-tooltip);
position: absolute;
bottom: 150%;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 6px 10px;
border-radius: 5px;
font-size: 14px;
white-space: nowrap;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.action-item::before {
content: "";
position: absolute;
bottom: 140%;
left: 50%;
transform: translateX(-50%);
border-width: 5px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.action-item:hover::after,
.action-item:hover::before {
visibility: visible;
opacity: 1;
}


.safe-icon {
position: relative;
display: inline-block;
width: 24px;
height: 24px;
background-size: cover;
cursor: pointer;
}
.safe-icon::after {
content: attr(data-tooltip);
position: absolute;
bottom: 150%;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 6px 10px;
border-radius: 5px;
font-size: 14px;
white-space: nowrap;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}

.safe-icon::before {
content: "";
position: absolute;
bottom: 140%;
left: 50%;
transform: translateX(-50%);
border-width: 5px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}

.safe-icon:hover::after,
.safe-icon:hover::before {
visibility: visible;
opacity: 1;
}

.copy-wrapper {
    position: relative;
    display: inline-block;
}

.copy-toast {
    position: absolute;
    bottom: 120%; /* butonun üstünde olacak */
    left: 50%;
    transform: translateX(-50%);
    background-color: #1877F2;
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 99;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.copy-toast::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #1877F2 transparent transparent transparent;
}

.copy-toast.show {
    opacity: 1;
}

.copy-checkmark {
    margin-left: 8px;
    color: #00ff88;
    font-size: 16px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.copylink.show-success .copy-checkmark {
    opacity: 1;
}

.icon {
  width: 24px;
  height: 24px;
  transform: none;
  transition: none;
}

.social-buttons {
  /*display: flex;*/
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin: 15px 0;
  flex-wrap: wrap;
}

.social-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 37px;
    transition: transform 0.2s ease-in-out;
    position: relative;
}

.social-btn:hover {
  transform: scale(1.1);
}



/* Tooltip */
.social-btn[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 1;
  pointer-events: none;
z-index: 9999;
}
.social-btn::before {
  content: "";
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 9998; /* Ok da üstte kalır */
}
.copy-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}

.copy-box input {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #f9f9f9;
}

.copy-btn {
  background-color: #555;
  color: white;
  border: none;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.2s;
}

.copy-btn:hover {
  background-color: #333;
}




.copy-container {
  position: relative;
  margin-top: 20px;
}

.svg-wrapper {
  max-width: 500px;
  width: 100%;
  margin: 20px auto;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background-color: #fdfdfd;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.3s ease;
  cursor: zoom-in;
}

.svg-wrapper img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.svg-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.85);
  text-align: center;
  padding-top: 60px;
  transition: opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.svg-modal.active {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.svg-modal img.modal-content {
  max-width: 90%;
  max-height: 80%;
  margin: auto;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.close-modal {
  position: absolute;
  color: black;
  font-size: 36px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10000;
}

#feedback_form {
    width: 98%;
}


.embed-box {
  margin-top: 15px;
}

.embed-box textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  font-family: monospace;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 6px;
  resize: none;
  background: #f9f9f9;
}

.copy-btn.small {
  margin-top: 6px;
  font-size: 13px;
  padding: 6px 10px;
}
img[src^="/Home/Svg"] {
width: 100%;
    height: 100%;
  display: inline-block;
}

 .social-footer {
            margin-top: 1rem;
        }
        .social-footer a {
            display: inline-block;
            margin: 0 8px;
            color: white;
            text-decoration: none;
        }
        .social-footer a:hover {
            text-decoration: underline;
        }

        .tag-cloud {

}
.tag {
    padding: 4px 8px;
    /*background-color: #f3f3f3;*/
    border-radius: 4px;
    color: #333;
    cursor: pointer;
}

.border-left-primary {
    border-left: 4px solid #4e73df;
}
.border-left-info {
    border-left: 4px solid #36b9cc;
}
.card-title {
    font-weight: bold;
}
.card-text {
    font-size: 0.95rem;
}


.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    list-style: none;
    background-color: #fff;
    border-radius: 50px;
}

.pagination li {
    display: inline;
    margin: 0 8px;
}

.pagination li a, .pagination li span {
    color: #fff;
    padding: 12px 20px;
    text-decoration: none;
    border-radius: 50px;
    background-color: #007bff; 
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.pagination li a:hover, .pagination li span:hover {
    background-color: #0056b3; 
    transform: translateY(-2px); 
}


.pagination .active span {
    background-color: #28a745;
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.pagination .disabled span {
    background-color: #ccc;
    color: #888;
    pointer-events: none;
}

.pagination li a:hover {
    background-color: #0056b3;
    color: white;
}

@media (max-width: 768px) {
    .pagination {
        font-size: 14px;
    }

    .pagination li a, .pagination li span {
        padding: 8px 16px;
    }
}

.p-center {
    text-align: center;
}


.scroll-container {
    display: flex;
    overflow-x: auto;  /* Yatay kaydırma ekler */
    padding: 10px 0;
    gap: 20px;  /* Kartlar arasındaki boşluk */
    scroll-behavior: smooth; /* Kaydırma animasyonu */
    -webkit-overflow-scrolling: touch; /* Mobilde düzgün kaydırma */
    width: 100%;
}
.comparison-container {
    text-align: center;
    margin-top: 40px;
}
.comparison-cards {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 280px; /* Kart genişliği */
    text-align: center;
    transition: transform 0.3s ease;
}

/* Hover Efekti */
.comparison-card:hover {
    transform: translateY(-5px); /* Hover sırasında yukarı kayma */
}

/* Kart Başlığı */
.comparison-header {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}

.phone-number {
    font-size: 20px;
    font-weight: bold;
    color: #007bff;
    margin: 0 10px;
}

.vs {
    font-size: 18px;
    color: #555;
}

/* Benzerlik */
.similarity {
    font-size: 16px;
    margin-bottom: 20px;
}

.similarity-value {
    font-size: 22px;
    font-weight: bold;
    color: #28a745;
}

/* Butonlar */
.button-container {
    margin-top: 20px;
}

.details-btn {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.details-btn:hover {
    background-color: #0056b3;
}

.details-btn:focus {
    outline: none;
}
/* General container for the call-check section */
.call-check-container {
    background-color: #f9f9f9;
    border-radius: 12px;
    padding: 25px;
    margin: 30px auto;
    /*max-width: 800px;*/
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    color: #333;
}

/* Heading styles */
.call-check-container h2 {
    font-size: 28px;
    color: #4e2681;
    text-align: center;
    margin-bottom: 20px;
}

.call-check-container h3 {
    font-size: 20px;
    color: #4e2681;
    margin-top: 20px;
}

/* Paragraph styling */
.call-check-container p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Highlighting important words */
.call-check-container strong {
    color: #4e2681;
    font-weight: bold;
}

/* Button Styling */
.search-button {
    display: inline-block;
    background-color: #4e2681;
    color: white;
    padding: 18px 35px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Button Hover Effect */
.search-button:hover {
    background-color: #6f3e9f;
    transform: translateY(-2px);
}

/* Responsive Design for smaller screens */
@media (max-width: 768px) {
    .call-check-container {
        padding: 15px;
        margin: 20px;
    }

    .call-check-container h2 {
        font-size: 24px;
    }

    .call-check-container h3 {
        font-size: 18px;
    }

    .call-check-container p {
        font-size: 14px;
    }

    .search-button {
        font-size: 16px;
        padding: 14px 25px;
    }
}
.call-info-container {
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.call-time-text {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
    font-weight: bold;
    text-transform: capitalize;
}

.call-time-text {
    color: #4CAF50;
    background-color: #f0f8e9;
    border-left: 5px solid #4CAF50;
    padding: 15px;
    border-radius: 5px;
    font-size: 20px;
}

.call-time-text:hover {
    background-color: #e8f5e1;
    color: #388e3c;
    cursor: pointer;
}

.call-time-text a {
    color: inherit;
    text-decoration: none;
    font-weight: bold;
}


.call-time-text a:hover {
    color: #388e3c;
    text-decoration: underline;
}

@media (max-width: 600px) {
    .call-info-container {
        width: 95%;
        padding: 15px;
    }

    h2 {
        font-size: 20px;
    }

    .call-time-text {
        font-size: 16px;
    }
}

.call-info-link-container {
    width: 80%;
    max-width: 800px;
    margin: 50px auto;
    text-align: center;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.call-info-link-container h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
}

.call-info-link-container p {
    font-size: 18px;
    color: #555;
    margin-bottom: 20px;
}

.cta-button {
    display: inline-block;
    background-color: #4CAF50;
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #388e3c;
}
/* comparison-container */
.comparison-container {
    margin: 20px auto;
    padding: 30px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}


.comparison-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}


.comparison-container h2 {
    font-size: 28px;
    color: #333;
    margin-bottom: 20px;
}


.comparison-container p {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}


.cta-button {
    display: inline-block;
    background-color: #4CAF50;
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}


.cta-button:hover {
    background-color: #388e3c;
    cursor: pointer;
}


@media (max-width: 600px) {
    .comparison-container {
        width: 95%;
        padding: 20px;
    }

    .cta-button {
        padding: 12px 20px;
        font-size: 16px;
    }

    .comparison-container h2 {
        font-size: 22px;
    }

    .comparison-container p {
        font-size: 16px;
    }
}

@media only screen and (max-width: 768px) {
    h1 {
        font-size: 1.4rem;
        line-height: 1.3;
    }
}

.main-container {
    margin: 0 auto;
    padding: 20px 15px;
    box-sizing: border-box;
    background-color: #fff;

    line-height: 1.6;
}
@media screen and (max-width: 768px) {
    .main-container {
        padding: 15px 10px;
    }
}

header {
    width: 100%;
    padding: 20px 0;

    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.comment-container-flex {
  display: flex;
  flex-wrap: wrap;
  border:1px solid #ddd;
  border-radius:10px;
  overflow:hidden;
  margin-bottom:15px;
  background:#fff;
}

.blog-image {
  flex: 0 0 auto;
  max-width: 200px;
  padding:10px;
}

.blog-image img {
  display:block;
  width:100%;
  height:135px;
  /*object-fit: contain;*/
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
  image-rendering: auto;
}

.blog-content {
  flex:1;
  padding:15px;
}

@media(max-width:768px){
  .comment-container-flex {flex-direction:column;}
  .blog-image {max-width:100%; padding:0;}
  .blog-image img {height:auto;}
  .blog-content {padding:10px;}
}
.blog-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px;
}

.blog-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.name-home a {
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}

.content p {
    margin: 0; 
    line-height: 1.5;
}

@media (max-width: 768px) {
    .blog-content {
        padding: 10px;
    }
}



        .video-list {
            display: flex;
            flex-direction: column;
            gap: 30px;
            max-width: 800px;
            margin: auto;
        }

        .video-item {
            background: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .video-item iframe {
            width: 100%;
            height: 400px;
            border: none;
            border-radius: 5px;
        }

        .video-title {
            font-size: 1.2rem;
            margin: 10px 0;
            color: #222;
        }

        @media(max-width: 600px) {
            .video-item iframe {
                height: 220px;
            }
        }

 .alert-custom-article {
    /*background: linear-gradient(135deg, #fdfbfb, #ebedee);*/
    border: 1px solid #d3d3d3;
    border-radius: 12px;
    padding: 30px 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    margin: 30px auto;
background: linear-gradient(135deg, #e3f2fd, #f9f9f9);
    font-family: 'Segoe UI', sans-serif;
    position: relative;
    transition: all 0.3s ease;
}

.alert-custom-article h1 {
    font-size: 28px;
    color: #1a237e;
    margin-bottom: 10px;
}

.alert-custom-article .panel-detail-icon {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}

.alert-custom-article .tag-cloud .tag {
    display: inline-block;
    background-color: #e8f0fe;
    color: #1a73e8;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.2s ease;
}

.alert-custom-article .tag:hover {
    background-color: #d2e3fc;
}

.alert-custom-article .social-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    align-items: center;
}

.alert-custom-article .action-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: color 0.2s ease;
}

.alert-custom-article .action-item:hover {
    color: #1a73e8;
}

.alert-custom-article .visitor-count {
    /*position: absolute;*/
    top: 20px;
    right: 20px;
    font-size: 14px;
    color: #888;
}

.alert-custom-article .close {
    position: absolute;
    top: 18px;
    left: 20px;
    font-size: 20px;
    text-decoration: none;
    color: #aaa;
}
.pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    background: #f7f7f7;
    margin-top: 30px;
}

.pagination li {
    margin: 5px;
}

.pagination li a,
.pagination li span {
    display: inline-block;
    min-width: 38px;
    padding: 8px 12px;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    border-radius: 8px;
    text-decoration: none;
    background-color: #ffffff;
    color: #1a237e;
    border: 1px solid #ddd;
    transition: all 0.2s ease-in-out;
}

.pagination li a:hover {
    background-color: #1a73e8;
    color: #ffffff;
    border-color: #1a73e8;
}

.pagination li.active span,
.pagination li.active a {
    background-color: #1a73e8;
    color: #ffffff;
    border-color: #1a73e8;
    pointer-events: none;
}

.pagination li.disabled span {
    color: #bbb;
    background-color: #eee;
    border-color: #ddd;
    cursor: not-allowed;
}
@media screen and (max-width: 480px) {
    .pagination li a,
    .pagination li span {
        font-size: 13px;
        padding: 6px 10px;
        min-width: 32px;
    }
}
.logo-display {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 30px;
}

.support-message {
    background-color: #fff9e6;
    border: 2px solid #ffe08a;
    border-radius: 12px;
    padding: 20px;
    margin-top: 15px;
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.support-message strong {
    color: #c47f00;
}

.bmc-button {
    margin-top: 15px;
    height: 45px;
    width: 162px;
    transition: transform 0.2s ease;
}

.bmc-button:hover {
    transform: scale(1.05);
}
.user-note {
    margin-top: 25px;
    padding: 15px 20px;
    background-color: #f4f4f4;
    border-left: 4px solid #9c9c9c;
    font-style: italic;
    font-size: 15px;
    color: #333;
    border-radius: 6px;
    line-height: 1.6;
}
.action-item {
    cursor: pointer;
    margin-right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

.action-item:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -25px;
    background: #333;
    color: #fff;
    padding: 4px 8px;
    font-size: 12px;
    white-space: nowrap;
    border-radius: 4px;
    z-index: 10;
}

            .ai-home-highlight {
                background-color: #f9f9f9;
                padding: 30px 20px;
                border-radius: 12px;
                margin-top: 30px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            }

            .ai-home-header h2 {
                margin-bottom: 10px;
                font-size: 24px;
                color: #4e2681;
            }

            .ai-home-header p {
                color: #555;
                font-size: 15px;
                margin-bottom: 20px;
            }

            .ai-number-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
                gap: 12px;
            }

            .ai-number-card {
                background: white;
                border: 1px solid #ddd;
                border-radius: 8px;
                padding: 12px;
                text-align: center;
                transition: transform 0.2s;
            }

                .ai-number-card:hover {
                    transform: scale(1.03);
                    box-shadow: 0 0 10px rgba(0,0,0,0.05);
                }

            .ai-icon {
                font-size: 18px;
                margin-right: 5px;
                vertical-align: middle;
            }
            .ai-link {
    display: inline-block;
    margin-top: 8px;
    color: #4e2681;
    font-weight: bold;
    text-decoration: none;
}

.ai-link:hover {
    text-decoration: underline;
}
.panel-detail-icon i {
width: 24px;
height: 24px;
display: inline-block;
background-size: contain;
vertical-align: middle;
}

.panel-detail-icon-time {
    float: center;
    color: #444;
    margin-right: 10px;
}

.ai-number-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ai-number-card {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
}

.ai-icon {
    display: inline-block;
    width: 24px; /* Sabit genişlik */
    text-align: center; /* Ortalar */
    flex-shrink: 0; /* Küçülmeyi engeller */
}
   .section-title {
        text-align: center;
        font-size: 2rem;
        font-weight: 700;
        color: #4e54c8;
        margin-bottom: 40px;
    }

    .ai-card-horizontal {
        display: flex;
        align-items: center;
        gap: 20px;
        background: #ffffff;
        border-radius: 18px;
        padding: 20px;
        margin-bottom: 30px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
        transition: all 0.25s ease-in-out;
        flex-wrap: wrap;
    }

        .ai-card-horizontal:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
        }

    .ai-icon-left {
        width: 70px;
        height: 70px;
        background: linear-gradient(135deg, #4e54c8, #8f94fb);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: inset 0 0 10px rgba(78, 84, 200, 0.2);
    }

        .ai-icon-left img {
            width: 36px;
            height: 36px;
            filter: brightness(100) invert(1);
        }
         @media (max-width: 768px) {
            .ai-card-horizontal {
                flex-direction: column;
                align-items: center;
                text-align: center;
                padding: 25px 20px;
            }

            .ai-icon-left {
                margin-bottom: 15px;
            }

            .ai-card-body {
                text-align: center;
            }
        }
    .ai-card-body {
        flex: 1;
        min-width: 250px;
    }

    .ai-question-title {
        font-size: 1.2rem;
        font-weight: 700;
        margin-bottom: 6px;
        line-height: 1.4;
    }

        .ai-question-title a {
            color: #4e54c8;
            text-decoration: none;
        }

            .ai-question-title a:hover {
                color: #2d2dff;
            }

    .ai-summary {
        font-size: 1rem;
        color: #4b4b4b;
        line-height: 1.6;
    }
      .section-title {
        text-align: center;
        font-size: 2rem;
        font-weight: 700;
        color: #4e54c8;
        margin-bottom: 40px;
    }

    .ai-card-horizontal {
        display: flex;
        align-items: center;
        gap: 20px;
        background: #ffffff;
        border-radius: 18px;
        padding: 20px;
        margin-bottom: 30px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
        transition: all 0.25s ease-in-out;
        flex-wrap: wrap;
    }

        .ai-card-horizontal:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
        }

    .ai-icon-left {
        width: 70px;
        height: 70px;
        background: linear-gradient(135deg, #4e54c8, #8f94fb);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: inset 0 0 10px rgba(78, 84, 200, 0.2);
    }

        .ai-icon-left img {
            width: 36px;
            height: 36px;
            filter: brightness(100) invert(1);
        }

    .ai-card-body {
        flex: 1;
        min-width: 250px;
    }

    .ai-question-title {
        font-size: 1.2rem;
        font-weight: 700;
        margin-bottom: 6px;
        line-height: 1.4;
    }

        .ai-question-title a {
            color: #4e54c8;
            text-decoration: none;
        }

            .ai-question-title a:hover {
                color: #2d2dff;
            }

              .search-wrapper {
        display: flex;
        align-items: center;
        background: #fff;
        border-radius: 50px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
        padding: 8px 18px;
        max-width: 650px;
        margin: auto;
        gap: 10px;
    }



    .search-wrapper button {
        background: linear-gradient(135deg, #4e2681, #7b38c6);
        color: white;
        padding: 12px 24px;
        border: none;
        border-radius: 50px;
        font-weight: bold;
        font-size: 14px;
        transition: 0.3s;
        white-space: nowrap;
    }

    @media screen and (max-width: 600px) {
        .search-wrapper {
            flex-direction: column;
            align-items: stretch;
            padding: 16px;
            border-radius: 20px;
        }

        .search-wrapper button {
            width: 100%;
            margin-top: 10px;
            border-radius: 12px;
        }

        .search-wrapper input {
            border-radius: 12px;
            background: #f9f9f9;
        }
    }

    .flag-row{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:24px;
    align-items:center;
  }
  .flag{
    font-size:2.25rem;           /* bayrak emojisi boyutu */
    line-height:1;
    width:56px; height:56px;     /* dairesel buton */
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#f2eef8;          /* #4e2681 paletine yakın açık zemin */
    box-shadow:0 0 0 2px #4e2681 inset;
    text-decoration:none;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .flag:hover{
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(78,38,129,.25), 0 0 0 2px #4e2681 inset;
  }
  @media (max-width:480px){
    .flag{ width:48px; height:48px; font-size:2rem; }
  }